JavaScript & ES6 - ES6 Karakteristike

Što je ECMAScript 6 (ili ES6)?

ECMAScript 2015 (ili ES6) je šesto i glavno izdanje standarda za specifikaciju jezika ECMAScript. Definiše standard za implementaciju JavaScript. ES6 je donio značajne promjene u JavaScript jeziku. Uvodi nekoliko novih karakteristika, kao što su varijable s opsegom bloka, nova petlja za itiraciju preko nizova i objekata, literal predložaka i mnoga druga poboljšanja kako bi JavaScript programiranje bilo lakše i zabavnije. U ovome dijelu kurs ćemo razgovaraćemo o nekim od najboljih ES6 karakteristika koje možete koristiti u svakodnevnom JavaScript kodiranju.


Ključna riječ let

ES6 uvodi novu ključnu riječ let za deklarisanje varijabli. Prije ES6, jedini način za deklarisanje varijable u JavaScript bila je ključna riječ var. Pogledajmo koja je razlika između njih. Dvije su kritične razlike između var i let. Promjenjive deklarisane ključnom riječi var su opsega funkcije i podignute su na vrhu unutar njenog opsega, dok su varijable deklarisane ključnom riječi let opseg bloka ({}) i one nisu podignute. Opseg blokova jednostavno znači da se stvara novi opseg između para vitičastih zagrada, tj. {}. Zbog toga, ako varijablu deklarišete s ključnom riječi let unutar petlje, ona ne postoji izvan petlje, kao što je prikazano u sljedećem primjeru: 

// ES6 sintaksa
for(let i = 0; i < 5; i++) {
    console.log(i); // 0,1,2,3,4
}
console.log(i); // undefined


// ES5 sintaksa
for(var i = 0; i < 5; i++) {
    console.log(i); // 0,1,2,3,4
}
console.log(i); // 5
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 let ključna riječ</title>
</head>
<body>
    <script>
    // ES6 sintaksa
    for(let i = 0; i < 5; i++) {
        document.write(i + "<br>"); // 0,1,2,3,4
    }
    document.write("<hr>" + i + "<hr>"); // undefined
    
    
    // ES5 sintaksa
    for(var i = 0; i < 5; i++) {
        document.write(i + "<br>"); // 0,1,2,3,4
    }
    document.write("<hr>" + i);
    </script>
</body>
</html>

Kao što možete vidjeti u gornjem primjeru, varijabla i u prvom bloku nije dostupna izvan for petlje. To nam takođe omogućava ponovnu upotrebu istog imena varijable više puta, jer je njezin opseg ograničen na blok ({}), što rezultuje manjom deklaracijom varijable i više čistijim kodom.


Ključna riječ const

Nova ključna riječ const omogućava definisanje konstanti. Konstante su samo za čitanje, ne možete im dodijeliti nove vrijednosti. Takođe su u blok opsegu poput let. 

const PI = 3.14;
console.log(PI); // 3.14

PI = 10; // error
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 const ključna riječ</title>
</head>
<body>
    <script>
    const PI = 3.14;
    console.log(PI); // 3.14
    
    PI = 10; // error
    </script>
    <p><strong>Napomena:</strong> Molimo provjerite konzolu
    pretraživača pritiskom na tipku f12 na tastaturi.</p>
</body>
</html>

Međutim, i dalje možete promijeniti svojstva objekta ili elemente niza: 

// Promjena vrijednosti svojstva objekta
const PERSON = {name: "Peter", age: 28};
console.log(PERSON.age); // 28
PERSON.age = 30;
console.log(PERSON.age); // 30

// Promjena elementa niza
const COLORS = ["red", "green", "blue"];
console.log(COLORS[0]); // red
COLORS[0] = "yellow";
console.log(COLORS[0]); // yellow
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 Konstante nisu nepromjenjive</title>
</head>
<body>
    <script>
    // Promjena vrijednosti svojstva objekta
    const PERSON = {name: "Peter", age: 28};
    document.write(PERSON.age + "<br>"); // 28
    PERSON.age = 30;
    document.write(PERSON.age + "<hr>"); // 30
    
    // Promjena elementa niza
    const COLORS = ["red", "green", "blue"];
    document.write(COLORS[0] + "<br>"); // red
    COLORS[0] = "yellow";
    document.write(COLORS[0]); // yellow
    </script>
</body>
</html>