JavaScriptin "let" ja "var" välisen eron ymmärtäminen

JavaScriptin let ja var välisen eron ymmärtäminen
JavaScriptin let ja var välisen eron ymmärtäminen
Arthur Petit
Keskiviikko 5. kesäkuuta 2024 klo 23.32.13

Muuttujailmoitusten ymmärtäminen JavaScriptissä

JavaScript-maailmassa let:n ja var:n eron ymmärtäminen on ratkaisevan tärkeää puhtaan ja tehokkaan koodin kirjoittamisessa. ECMAScript 6:ssa käyttöön otettu let-lause on lisännyt muuttujan määrittelyyn uuden ulottuvuuden, jonka usein kuvataan tarjoavan paremman hallinnan muuttujan laajuuteen.

Vaikka molemmat antaa ja var Käytetään muuttujien ilmoittamiseen, ne käyttäytyvät eri tavalla, mikä voi merkittävästi vaikuttaa koodiisi. Tässä artikkelissa tutkimme näitä eroja ja annamme ohjeita niiden käyttöön antaa sijasta var.

Komento Kuvaus
var Ilmoittaa muuttujan, valinnaisesti alustaen sen arvoksi. Se on toiminnallinen tai globaali, ja se voidaan ilmoittaa uudelleen ja päivittää.
let Ilmoittaa lohkolaajuisen paikallisen muuttujan ja alustaa sen valinnaisesti arvoksi. Sitä ei voida ilmoittaa uudelleen samassa laajuudessa.
const Ilmoittaa lohkolaajuisen, vain luku -vakion. Se on alustettava ilmoituksen yhteydessä, eikä sitä voi siirtää uudelleen.
writeHead Asettaa tilakoodin ja otsikot HTTP-vastaukselle Node.js:ssä.
createServer Luo HTTP-palvelimen Node.js:ssä, joka voi kuunnella pyyntöjä ja vastata niihin.
listen Asettaa palvelimen kuuntelemaan saapuvia yhteyksiä tietyssä portissa.
console.log Tulostaa viestejä konsoliin, mikä on hyödyllistä virheenkorjaustarkoituksiin.

Miten "let" ja "var" eroavat käytännössä

Käyttöliittymän komentosarjaesimerkki havainnollistaa tärkeimmät erot var ja let. Vuonna varTest funktio, muuttuja var x ilmoitetaan if-lohkossa ja se määrittää saman muuttujan uudelleen koko funktioalueen sisällä. Tämä johtaa siihen, että molemmat konsolin lokit tulostavat 2, mikä osoittaa kuinka var ei kunnioita lohkon laajuutta. Sitä vastoin letTest funktio ilmoittaa let y sekä if-lohkon sisällä että ulkopuolella. The let Lohkon sisällä oleva ilmoitus on eri muuttuja, joten ensimmäinen konsolin loki tulostaa 2 ja toinen konsolin lokitulostus 1 ottaen huomioon lohkon laajuuden.

Backend Node.js -esimerkki määrittää yksinkertaisen HTTP-palvelimen näiden erojen osoittamiseksi edelleen. Käyttämällä var count jos-lohkon sisällä näemme sen var korvaa ulomman count muuttuja funktion laajuuden vuoksi. The let message lohkon sisällä pysyy paikallisena kyseiselle lohkolle, esitellen lohkon laajuuden tulostamalla eri viestejä jokaiselle lohkolle. Käyttö createServer ja listen komennot perustaa palvelimen, joka kirjoittaa vastaukset asiakkaalle osoittaen käytännön sovelluksia var ja let todellisissa skenaarioissa.

Erotus "let" ja "var" välillä JavaScriptissä

Käyttöliittymän JavaScript-esimerkki

// Example demonstrating the difference between 'var' and 'let'
function varTest() {
    var x = 1;
    if (true) {
        var x = 2;  // same variable
        console.log(x);  // 2
    }
    console.log(x);  // 2
}

function letTest() {
    let y = 1;
    if (true) {
        let y = 2;  // different variable
        console.log(y);  // 2
    }
    console.log(y);  // 1
}

varTest();
letTest();

Laajuuden ymmärtäminen "let"- ja "var"-määritteillä

Backend Node.js Esimerkki

// Backend example using Node.js to demonstrate 'let' and 'var'
const http = require('http');

http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    var count = 10;
    let message = "The count is: ";

    if (true) {
        var count = 20;  // 'count' is hoisted and overwritten
        let message = "New count is: ";  // block-scoped
        res.write(message + count);  // New count is: 20
    }
    res.write(message + count);  // The count is: 20
    res.end();
}).listen(8080);

console.log('Server running at http://127.0.0.1:8080/');

Sukella syvemmälle laajuuteen ja nostoon

Toinen tärkeä näkökohta, joka on otettava huomioon vertailussa let ja var nostaa. JavaScript-käyttäytymisen nosto, kun ilmoitukset siirretään nykyisen laajuuden yläosaan. Kanssa var, muuttujat nostetaan ja alustetaan undefined, mikä voi johtaa odottamattomiin tuloksiin, jos muuttujaa käytetään ennen sen ilmoittamista. Verrattuna, let on myös nostettu, mutta sitä ei ole alustettu. Tämä tarkoittaa pääsyä a let muuttuja ennen kuin sen ilmoitus johtaa a ReferenceError.

Lisäksi, let auttaa estämään silmukoiden sulkemiseen liittyviä ongelmia. Käytettäessä var silmukassa kaikki iteraatiot viittaavat samaan muuttujaan, mikä voi johtaa virheisiin. Kuitenkin, let luo uuden sidoksen jokaiselle iteraatiolle varmistaen, että jokaisella silmukkaiteraatiolla on oma laajuutensa. Tämä käytös saa aikaan let turvallisempi ja ennakoitavampi valinta muuttujien ilmoittamiseen silmukoiden sisällä.

Yleisiä kysymyksiä "let" ja "var" JavaScriptissä

  1. Mitä on nosto JavaScriptissä?
  2. Hoisting on JavaScriptin oletustoiminto siirtää ilmoitukset nykyisen laajuuden yläosaan. var ilmoitukset nostetaan ylös ja alustetaan undefined, sillä aikaa let ilmoitukset nostetaan, mutta niitä ei alustata.
  3. Mitä tapahtuu, jos käytät a let muuttuja ennen sen ilmoitusta?
  4. Pääsy a let muuttuja ennen kuin sen ilmoitus johtaa a ReferenceError.
  5. Voi let ja var ilmoitetaan uudelleen samassa laajuudessa?
  6. Ei, let ei voida ilmoittaa uudelleen samassa laajuudessa, kun taas var voidaan ilmoittaa uudelleen samassa laajuudessa.
  7. Miksi on let mieluummin silmukoissa?
  8. let luo uuden sidoksen kullekin silmukan iteraatiolle varmistaen, että jokaisella silmukaiteraatiolla on oma laajuutensa. Tämä estää yleisiä sulkemisvirheitä.
  9. Tekee var kunnioittaa lohkon laajuutta?
  10. Ei, var ei noudata lohkon laajuutta; se on toimintolaajuinen tai maailmanlaajuisesti kattava.
  11. Mikä on Temporal Dead Zone?
  12. Temporal Dead Zone on aika laajuuden syöttämisen ja muuttujan varsinaisen ilmoituksen välillä, jonka aikana päästään let muuttuja heittää a ReferenceError.
  13. Voi const käyttää samalla tavalla kuin let?
  14. Joo, const on lohkotason kaltainen let, mutta sitä käytetään sellaisten muuttujien ilmoittamiseen, joita ei pidä osoittaa uudelleen.
  15. Milloin pitäisi let käyttää yli var?
  16. let tulisi käyttää yli var kun tarvitset lohkon laajuutta ja välttääksesi muuttuvien nosto- ja sulkujen ongelmia.

Viimeisiä ajatuksia muuttuvista ilmoituksista

Lopuksi esittely let ECMAScript 6 on tarjonnut kehittäjille tehokkaamman työkalun muuttujien ilmoittamiseen JavaScriptissä. Niiden välisten erojen ymmärtäminen let ja var on välttämätöntä puhtaamman, paremmin ylläpidettävän koodin kirjoittamiseen. Sillä aikaa var voi silti olla hyödyllistä tietyissä tilanteissa, let tarjoaa paremman hallinnan laajuudelle ja nostolle, mikä vähentää bugien todennäköisyyttä.

Valitsemalla let yli var Asianmukaisissa skenaarioissa kehittäjät voivat hyödyntää lohkojakoa ja välttää yleiset sudenkuopat, jotka liittyvät muuttuvaan ilmoittamiseen ja nostoon. Tämä tieto on olennaista kaikille, jotka haluavat hallita nykyaikaista JavaScript-kehitystä.