Var, Let ja Const - mikä on ero?

ES2015: n (ES6) kanssa tuli paljon kiiltäviä uusia ominaisuuksia. Ja nyt, vuodesta 2020 lähtien, oletetaan, että monet JavaScript-kehittäjät ovat tutustuneet ja alkaneet käyttää näitä ominaisuuksia.

Vaikka tämä oletus voi olla osittain totta, on silti mahdollista, että jotkut näistä ominaisuuksista ovat edelleen mysteeri joillekin kehittäjille.

Yksi ES6: n mukana tulleista ominaisuuksista on lisääminen letja const, jota voidaan käyttää muuttujan ilmoittamiseen. Kysymys kuuluu, mikä tekee niistä eroja hyvistä ol'ista, varjoita olemme käyttäneet? Jos sinulla ei ole vielä selvää asiaa, tämä artikkeli on sinulle.

Tässä artikkelissa, niin voimme keskustella var, letja const  suhteessa niiden laajuus, käytön ja nosto-. Kun luet, ota huomioon niiden väliset erot, jotka huomautan.

Var

Ennen ES6: n tuloa varjulistukset hallitsivat. On kuitenkin ongelmia, jotka liittyvät muuttujiin, jotka on ilmoitettu var. Siksi oli välttämätöntä, että muuttujien ilmoittamiselle tuli uusia tapoja. Ensin ymmärretään varenemmän, ennen kuin keskustelemme näistä asioista.

Var. Laajuus

Soveltamisala tarkoittaa olennaisesti sitä, missä nämä muuttujat ovat käytettävissä. varilmoitukset ovat globaalisti määriteltyjä tai toimivat / paikallisesti.

Laajuus on globaali, kun varmuuttuja ilmoitetaan funktion ulkopuolella. Tämä tarkoittaa, että kaikki muuttujat, jotka on ilmoitettu vartoimintolohkon ulkopuolella, ovat käytettävissä koko ikkunassa.

varon funktion laajuus, kun se ilmoitetaan funktion sisällä. Tämä tarkoittaa, että se on käytettävissä ja siihen pääsee vain tässä toiminnossa.

Jos haluat ymmärtää lisää, katso alla olevaa esimerkkiä.

 var greeter = "hey hi"; function newFunction() { var hello = "hello"; } 

Tässä greeteron globaalisti rajattu, koska se on toiminnon ulkopuolella, kun taas hellofunktio on rajattu. Joten emme voi käyttää muuttujaa hellofunktion ulkopuolella. Joten jos teemme tämän:

 var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined 

Saamme virheen, joka johtuu siitä, helloettemme ole käytettävissä toiminnon ulkopuolella.

muuttuja muuttujat voidaan ilmoittaa uudelleen ja päivittää

Tämä tarkoittaa, että voimme tehdä tämän samassa laajuudessa emmekä saa virhettä.

 var greeter = "hey hi"; var greeter = "say Hello instead"; 

ja tämä myös

 var greeter = "hey hi"; greeter = "say Hello instead"; 

Var. Nostaminen

Nosto on JavaScripti-mekanismi, jossa muuttujat ja toimintoilmoitukset siirretään soveltamisalansa yläosaan ennen koodin suorittamista. Tämä tarkoittaa, että jos teemme tämän:

 console.log (greeter); var greeter = "say hello" 

se tulkitaan näin:

 var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" 

Joten varmuuttujat nostetaan soveltamisalansa yläosaan ja alustetaan arvolla undefined.

Ongelma var

Mukana on heikkous   var. Selitän alla olevan esimerkin avulla:

 var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" 

Joten, koska times > 3palaa tosi, greeteron määritelty uudelleen "say Hello instead". Vaikka tämä ei ole ongelma, jos haluat tietoisesti greetermääritellä uudelleen, siitä tulee ongelma, kun et ymmärrä, että muuttuja greeteron jo määritelty aiemmin.

Jos olet käyttänyt greeterkoodisi muita osia, saatat olla yllättynyt saamastasi tuloksesta. Tämä aiheuttaa todennäköisesti paljon virheitä koodissasi. Siksi letja constovat välttämättömiä.

Päästää

leton nyt suositeltava muuttuja-ilmoitukselle. Ei ole mikään yllätys, koska se paranee varilmoituksissa. Se ratkaisee myös ongelman, varjonka juuri käsittelimme. Katsotaanpa, miksi näin on.

let on estetty

Lohko on palanen koodia, jota rajoittaa {}. Lohko asuu kiharoissa. Kaikki kiharaisissa olkaimissa on lohko.

Joten muuttuja, joka on ilmoitettu lohkossa kanssa, let  on käytettävissä vain kyseisen lohkon sisällä. Haluan selittää tämän esimerkillä:

 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 

Näemme, että hellolohkon ulkopuolella (kiharaiset olkaimet, joissa se määritettiin) palauttaminen antaa virheen. Tämä johtuu siitä, että letmuuttujat ovat lohkottuja.

Let voidaan päivittää, mutta sitä ei voida ilmoittaa uudelleen.

Aivan kuten var, muuttuja, jolla on ilmoitettu, letvoidaan päivittää sen soveltamisalaan. Toisin var, eli letmuuttuja ei voida uudelleen julistaa sen soveltamisalaan. Joten vaikka tämä toimii:

 let greeting = "say Hi"; greeting = "say Hello instead"; 

tämä palauttaa virheen:

 let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 

Jos sama muuttuja määritetään eri laajuuksilla, virheitä ei kuitenkaan ole:

 let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" 

Miksi ei ole virhettä? Tämä johtuu siitä, että molempia esiintymiä käsitellään erilaisina muuttujina, koska niillä on erilaiset laajuudet.

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 while let and const 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 with undefined, let and const variables are not initialized.
• Vaikka varja letvoidaan ilmoittaa ilman alustusta, se conston alustettava ilmoituksen aikana.

Onko sinulla kysyttävää tai lisäyksiä? Kerro minulle sitten.

Kiitos, että luit :)