let Archives | Web Programiranje

Zajedničke karakteristike

Block scope

Ključne reči let i const ispred promenjive deklariše promenjivu, koja je dostupna jedino u svom lokalnom domenu tzv. “block scope”. Kada se promenjiva deklariše sa let/const u okviru vitičaste zagrade, onda su vitičaste zagrade ivice njenog domena.

if (5 > 0) {
    const osoba = "Pera";
    let godine = 44;
}
console.log(osoba);   // Vraća: ReferenceError: osoba is not defined
console.log(godine);  // Vraća: ReferenceError: godine is not defined

if (5 > 0) {

const osoba = "Pera";

let godine = 44;

}

console.log(osoba); // Vraća: ReferenceError: osoba is not defined

console.log(godine); // Vraća: ReferenceError: godine is not defined

Nema hoistovanja promenjive pri kompajliranju

Promenjive deklarisane sa “let/const” se ne hoist-uju na vrh bloka, kao što to rade promenjive deklarisane sa “var”.

function uradi() {
  console.log(bar);   // undefined
  console.log(pi);    // ReferenceError pi is not defined
  console.log(foo);   // ReferenceError  foo is not defined
  var bar = 1;
  const pi = 3.14;
  let foo = 2;
}
uradi();

function uradi() {

console.log(bar); // undefined

console.log(pi); // ReferenceError pi is not defined

console.log(foo); // ReferenceError foo is not defined

var bar = 1;

const pi = 3.14;

let foo = 2;

}

uradi();

Ne prave globalne promenjive

Treba napomenuti da ključne reči “let/const” ne prave globalne promenjive čak i kada se nalazi u globalnom domenu:

var x = 'global';
let y = 'nije global';
const z = 'nije global';
console.log(this.x); // "global"
console.log(this.y); // undefined
console.log(this.z); // undefined

var x = 'global';

let y = 'nije global';

const z = 'nije global';

console.log(this.x); // "global"

console.log(this.y); // undefined

console.log(this.z); // undefined

Specifičnosti “let” ključne reči

Block scope

Promenjiva može da se deklariše sa ključnom reči “let” i van vitičastih zagrada, pri čemu će ipak pripadi domenu koji prave te vitičaste zagrade. Ovaj izuzetak važi za slučaj kada se promenjiva deklariše u okviru izraza vezanog za iteraciju:

for (let i = 0; i < 5; i++){
    // Domen za promenjivu "i" je izmedju vitičastih zagrada
}
console.log(i); // Vraća: ReferenceError: i is not defined

for (let i = 0; i < 5; i++){

// Domen za promenjivu "i" je izmedju vitičastih zagrada

}

console.log(i); // Vraća: ReferenceError: i is not defined

Redeklarisanje promenjive u istom bloku pravi Syntax Error

Za razliku od deklaracije promenjive sa ključnom reči “var” gde je dozvoljeno ponovno redaklarisanje promenjive, redeklarisanje promenjive u istom domenu sa ključnom “let” nije dozvoljeno, i izbacuje grešku.

if (5>0) {
  let foo;
  let foo = 5; // SyntaxError thrown.
}

if (5>0) {

let foo;

let foo = 5; // SyntaxError thrown.

}

Zbog ovoga treba obratiti pažnju da se ne koristi u okviru “switch” izraza jer je sve jedan domen:

let x = 1;
switch(x) {
  case 0:
    let foo = 5;
    break;
  case 1:
    let foo = 10; // SyntaxError for redeclaration.
    break;
}

let x = 1;

switch(x) {

case 0:

let foo = 5;

break;

case 1:

let foo = 10; // SyntaxError for redeclaration.

break;

}

Ovaj problem može da se prevazidje na sledeći način:

let x = 1;
switch(x) {
  case 0: {
    let foo;
    break;
  }
  case 1: {
    let foo;
    break;
  }
}

let x = 1;

switch(x) {

case 0: {

let foo;

break;

}

case 1: {

let foo;

break;

}

Rešava problem iteracije i setTimeout() metode

Korišćenjem ključne reči “let” umesto “var”, u okviru “for…petlje”, jednostvno rešavamo poznati problem vezan za iteraciju u okviru setTimeout metode.

for (var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i);
    }, 1000);
}   // Vraća: 5 5 5 5 5

for (var i = 0; i < 5; i++){

setTimeout(function(){

console.log(i);

}, 1000);

} // Vraća: 5 5 5 5 5

Pošto ključna reč “let” ponovo definiše novu promenjivu “i” pri svakoj iteraciji petlje, onda se dobija očekivani rezultat:

for (let i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i);
    }, 1000);
}   // Vraća: 1 2 3 4 5

for (let i = 0; i < 5; i++){

setTimeout(function(){

console.log(i);

}, 1000);

} // Vraća: 1 2 3 4 5

Više o ovome problemu pogledajte u članku “(Ne)moguće greške u JavaScriptu”.

Specifičnost “const” ključne reči

Promenjive deklarisane sa ključnom reči “const” generiše konstantu. Konstante u JavaScriptu su “nepromenljive varijable”, tj. varijable kojima se ne može ponovo dodeliti novi sadržaj.

const PI = 3.14;
// Kada zelimo da promenimo konstantu:
PI = 5; // Vraća error  "Assignment to constant variable"

const PI = 3.14;

// Kada zelimo da promenimo konstantu:

PI = 5; // Vraća error "Assignment to constant variable"

Promenjivost sadržaja konstante!?

Treba napomenuti da nepromenjivost važi samo za promenjivu, ali ne i za nepromenjivost sadržaja konstante!

const nekiObjekat = {
  a : 5,
  b : 6
}
// Kada zelimo da promenimo promenjivu koja je konstanta:
nekiObjekat = 10; // Vraća error "Assignment to constant variable"

// Medjutim bez problema menjamo svojstvo objekta koji je konstanta:
nekiObjekat.a = 8;  // Ne pravi error

const nekiObjekat = {

a : 5,

b : 6

}

// Kada zelimo da promenimo promenjivu koja je konstanta:

nekiObjekat = 10; // Vraća error "Assignment to constant variable"

// Medjutim bez problema menjamo svojstvo objekta koji je konstanta:

nekiObjekat.a = 8; // Ne pravi error

ili kao u sledećem primeru dodavanje novih članova nizu neće napraviti grešku:

const people = ['Tesla', 'Musk']
people.push('Berners-Lee')
console.log(people)  //Vraća:  ['Tesla', 'Musk', 'Berners-Lee']

const people = ['Tesla', 'Musk']

people.push('Berners-Lee')

console.log(people) //Vraća: ['Tesla', 'Musk', 'Berners-Lee']

Prava konstanta sa nepromenjivim sadržajem

Ako bi smo hteli da i sadržaj bude nepromenjiv onda je potrebno da koristimo i metodu Object.freeze():

const frozen = Object.freeze(['Ice', 'Icicle', 'Ice cube'])
frozen.push('Water')  // Vraća: Uncaught TypeError: Can't add property 3, object is not extensible

1 2	const frozen = Object.freeze(['Ice', 'Icicle', 'Ice cube']) frozen.push('Water') // Vraća: Uncaught TypeError: Can't add property 3, object is not extensible

Pogledajte više o “Object.freeze()” u članku “Object() & Object.prototype”

Spisak novosti

U ovome tekstu su izlistane sve novine koje su došle u sklopu novih JavaScript standarda, a obradjene su na sajltu webprogramiranje.org kroz različite članke:

Standard	Novina	Članak
ES2015	Novi način deklarisanja promenjivih sa ključnim rečima let & const	“let & const”
ES2015	Jednostavno definisanje podrazumevanih vrednosti parametara funukcije	“Podrazumevane vrednosti parametara funkcije”
ES2015	Sintaksna poboljšanja objektnog literala	“Object literal” poboljšanja
ES2015	Klase	“Klase u JavaScript-u”
ES2015	Nova petlja za iteraciju kroz iterable objekte: for…of	“Petlje i iteracije u JavaScript-u”
ES2015	Nove metode za rad sa nizovima: Array.from() Array.prototype.find() i Array.prototype.findIndex()	“Nove metode u radu sa nizovima”
ES2015	Nova sintaksa za import/export modula	“Modularno programiranje sa ES6 standardom
ES2015	Promisi	“Promise i asinhrono programiranje”
ES2015	Nova metoda konstruktorske funkcije: Object.assign()	Svojstva i metode konstruktorske f-je Object()
ES2015	Nove karakteristike “string-a”	“Nove karakteristike string-a”
ES2015	Arrow funkcija	“Arrow funkcija”
ES2015	Novi tipovi podataka Map, Set & Symbol	Novi tipovi podataka Map, Set & Symbol
ES2015	Spread & Rest operatori	“Spread & Rest operatori”
ES2015	Destruktuiranje podataka	“Destrukuiranje u JavaScript-u”
ES2015	Iteratori & Generatori	Iteratori i Generatori
ES2016	Nova metoda za rad sa nizovima: Array.prototype.inludes()	“Nove metode u radu sa nizovima”
ES2016	Eksponencijalni operator **	Eksponencijalni operator **
ES2017	Nove metode konstruktorske funkcije: Object.entries, Object.values i Object.getOwnPropertyDescriptors()	Svojstva i metode konstruktorske f-je Object()
ES2017	Async/Await sintaksi	“Async/Await” sintaksa za bolje “Promise”

Standard

Novina

Članak

ES2015

Novi način deklarisanja promenjivih sa ključnim rečima let & const

“let & const”

ES2015

Jednostavno definisanje podrazumevanih vrednosti parametara funukcije

“Podrazumevane vrednosti parametara funkcije”

ES2015

Sintaksna poboljšanja objektnog literala

“Object literal” poboljšanja