Puno sjajnih novih značajki izašlo je s ES2015 (ES6). A sada, budući da je 2020., pretpostavlja se da se puno programera JavaScript-a upoznalo i počelo koristiti ove značajke.
Iako bi ova pretpostavka mogla djelomično biti istinita, još uvijek je moguće da su neke od ovih značajki za neke programere tajna.
Jedna od značajki koje su došle uz ES6 je dodavanje let
i const
, koje se može koristiti za deklariranje varijabli. Pitanje je, po čemu se razlikuju od dobrih var
koje smo koristili? Ako vam još uvijek nije jasno ovo, ovaj je članak za vas.
U ovom članku, mi ćemo raspravljati var
, let
a const
s obzirom na njihov opseg, korištenje i isticanje. Dok čitate, imajte na umu razlike između njih na koje ću ukazati.
Var
Prije pojave ES6 var
vladale su deklaracije. Postoje problemi povezani s varijablama s kojima se deklarira var
. Zbog toga je bilo potrebno da se pojave novi načini deklariranja varijabli. Prvo, shvatimo var
više prije nego što razgovaramo o tim pitanjima.
Opseg var
Opseg u osnovi znači gdje su ove varijable dostupne za upotrebu. var
deklaracije se primjenjuju globalno ili funkcioniraju / lokalno.
Opseg je globalni kada je var
varijabla deklarirana izvan funkcije. To znači da je svaka varijabla koja je deklarirana var
izvan funkcijskog bloka dostupna za upotrebu u cijelom prozoru.
var
je opseg funkcije kada je deklariran unutar funkcije. To znači da je dostupan i može mu se pristupiti samo unutar te funkcije.
Da biste dalje razumjeli, pogledajte primjer u nastavku.
var greeter = "hey hi"; function newFunction() { var hello = "hello"; }
Ovdje greeter
je globalno opseg jer postoji izvan funkcije, dok hello
je opseg funkcije. Dakle, ne možemo pristupiti varijabli hello
izvan funkcije. Pa ako učinimo ovo:
var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined
Dobit ćemo pogrešku koja je posljedica toga što hello
nije dostupan izvan funkcije.
varijable varijable mogu se ponovno deklarirati i ažurirati
To znači da to možemo učiniti u istom opsegu i da neće dobiti pogrešku.
var greeter = "hey hi"; var greeter = "say Hello instead";
i ovo također
var greeter = "hey hi"; greeter = "say Hello instead";
Podizanje var
Dizanje je JavaScript mehanizam gdje se varijable i deklaracije funkcija premještaju na vrh svog opsega prije izvršavanja koda. To znači da ako to učinimo:
console.log (greeter); var greeter = "say hello"
tumači se ovako:
var greeter; console.log(greeter); // greeter is undefined greeter = "say hello"
Dakle, var
varijable se podižu na vrh svog opsega i inicijaliziraju s vrijednošću undefined
.
Problem s var
Postoji slabost koja dolazi sa sobom var
. Upotrijebit ću primjer u nastavku da objasnim:
var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead"
Dakle, budući da times > 3
vraća true, greeter
redefinirano je na "say Hello instead"
. Iako to nije problem ako svjesno želite greeter
biti redefinirani, to postaje problem kada ne shvatite da je varijabla greeter
već definirana prije.
Ako ste koristili greeter
u drugim dijelovima koda, mogli biste se iznenaditi izlaznim podacima koje biste mogli dobiti. To će vjerojatno uzrokovati puno grešaka u vašem kodu. Zbog toga su let
i const
neophodni.
Neka
let
sada je poželjna za deklaraciju varijable. Nije iznenađenje jer dolazi kao poboljšanje var
deklaracija. Također rješava problem s var
onim što smo upravo pokrili. Razmotrimo zašto je tome tako.
neka je blok opsega
Blok je dio koda ograničen sa {}. Blok živi u kovrčavim zagradama. Sve što je unutar kovrčavih zagrada blok je.
Dakle, varijabla deklarirana u bloku s let
dostupna je samo za upotrebu unutar tog bloka. Objasnit ću vam to na primjeru:
let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined
Vidimo da upotreba hello
izvan svog bloka (kovrčave zagrade tamo gdje je definirana) vraća pogrešku. To je zato što su let
varijable opsega bloka.
neka se može ažurirati, ali ne i ponovno deklarirati.
Baš kao var
i varijabla deklarirana sa let
može se ažurirati u okviru svog opsega. Za razliku od toga var
, let
varijabla se ne može ponovno deklarirati unutar svog opsega. Dakle, dok će ovo raditi:
let greeting = "say Hi"; greeting = "say Hello instead";
ovo će vratiti pogrešku:
let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared
Međutim, ako je ista varijabla definirana u različitim opsezima, neće biti pogreške:
let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi"
Zašto nema pogreške? To je zato što se obje instance tretiraju kao različite varijable jer imaju različite domete.
This fact makes let
a better choice than var
. When using let
, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.
Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var
does not happen.
Hoisting of let
Just like var
, let
declarations are hoisted to the top. Unlike var
which is initialized as undefined
, the let
keyword is not initialized. So if you try to use a let
variable before declaration, you'll get a Reference Error
.
Const
Variables declared with the const
maintain constant values. const
declarations share some similarities with let
declarations.
const declarations are block scoped
Like let
declarations, const
declarations can only be accessed within the block they were declared.
const cannot be updated or re-declared
This means that the value of a variable declared with const
remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const
, we can neither do this:
const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable.
nor this:
const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared
Every const
declaration, therefore, must be initialized at the time of declaration.
This behavior is somehow different when it comes to objects declared with const
. While a const
object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const
object as this:
const greeting = { message: "say Hi", times: 4 }
while we cannot do this:
const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable.
we can do this:
greeting.message = "say Hello instead";
This will update the value of greeting.message
without returning errors.
Hoisting of const
Just like let
, const
declarations are hoisted to the top but are not initialized.
So just in case you missed the differences, here they are:
var
declarations are globally scoped or function scoped whilelet
andconst
are block scoped.var
variables can be updated and re-declared within its scope;let
variables can be updated but not re-declared;const
variables can neither be updated nor re-declared.- They are all hoisted to the top of their scope. But while
var
variables are initialized withundefined
,let
andconst
variables are not initialized. - While
var
andlet
can be declared without being initialized,const
must be initialized during declaration.
Got any question or additions? Please let me know.
Thank you for reading :)