Comprendre la diferència entre let i var a JavaScript

Arthur Petit

Dimecres, 5 de juny de 2024 a les 23:12:37

Captura de declaracions de variables en JavaScript
Al món de JavaScript, entendre la diferència entre let i var és crucial per escriure codi net i eficient. Introduïda a ECMAScript 6, la instrucció let ha afegit una nova dimensió a la declaració de variables, sovint descrita com a proporcionar més control sobre l'abast de la variable.
Mentre que tots dos deixar i var s'utilitzen per declarar variables, presenten diferents comportaments que poden afectar significativament el vostre codi. En aquest article, explorarem aquestes diferències i oferirem orientació sobre quan utilitzar-les deixar en lloc de var.

Comandament Descripció

var Declara una variable, inicialitzant-la opcionalment a un valor. Té un àmbit de funció o un abast global i es pot tornar a declarar i actualitzar.

let Declara una variable local amb àmbit de bloc, inicialitzant-la opcionalment a un valor. No es pot tornar a declarar dins del mateix àmbit.

const Declara una constant de només lectura amb àmbit de bloc. S'ha d'inicialitzar en el moment de la declaració i no es pot reassignar.

writeHead Estableix el codi d'estat i les capçaleres per a la resposta HTTP a Node.js.

createServer Crea un servidor HTTP a Node.js, que pot escoltar i respondre les sol·licituds.

listen Configura el servidor perquè comenci a escoltar les connexions entrants en un port especificat.

console.log Imprimeix missatges a la consola, útil per a la depuració.

Comandament	Descripció
var	Declara una variable, inicialitzant-la opcionalment a un valor. Té un àmbit de funció o un abast global i es pot tornar a declarar i actualitzar.
let	Declara una variable local amb àmbit de bloc, inicialitzant-la opcionalment a un valor. No es pot tornar a declarar dins del mateix àmbit.
const	Declara una constant de només lectura amb àmbit de bloc. S'ha d'inicialitzar en el moment de la declaració i no es pot reassignar.
writeHead	Estableix el codi d'estat i les capçaleres per a la resposta HTTP a Node.js.
createServer	Crea un servidor HTTP a Node.js, que pot escoltar i respondre les sol·licituds.
listen	Configura el servidor perquè comenci a escoltar les connexions entrants en un port especificat.
console.log	Imprimeix missatges a la consola, útil per a la depuració.

Com "let" i "var" diferència a la pràctica

L'exemple d'script d'interfície il·lustra les diferències clau entre i . En el funció, la variable var x es declara dins d'un bloc if i reasigna la mateixa variable dins de tot l'àmbit de la funció. Això fa que els dos registres de la consola surtin 2, demostrant com no respecta l'abast del bloc. En canvi, el declara la funció tant dins com fora del bloc if. El let La declaració dins del bloc és una variable diferent, de manera que el primer registre de la consola surt 2 i el segon registre de la consola surt 1, respectant l'abast del bloc.

L'exemple de backend Node.js configura un servidor HTTP senzill per demostrar encara més aquestes diferències. Utilitzant dins d'un bloc if, ho veiem sobreescriu l'exterior variable a causa de l'abast de la funció. El let message a l'interior del bloc es manté local a aquest bloc, mostrant l'abast del bloc mitjançant la sortida de missatges diferents per a cada bloc. L'ús de i ordres estableix el servidor, que escriu respostes al client, demostrant aplicacions pràctiques de i let en escenaris del món real.

Distinció entre "let" i "var" a JavaScript

Exemple de JavaScript de front-end

// 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();

Entendre l'abast amb "let" i "var"

Exemple de backend Node.js

// 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/');

Immersió més profunda en l'abast i l'elevació

Un altre aspecte clau a tenir en compte a l'hora de comparar i està pujant. L'elevació és el comportament de JavaScript de moure declaracions a la part superior de l'abast actual. Amb , les variables s'hicen i s'inicien amb undefined, que pot donar lloc a resultats inesperats si la variable s'utilitza abans de la seva declaració. En canvi, també està hissat, però no està inicialitzat. Això significa accedir a un variable abans de la seva declaració donarà lloc a a .

A més, ajuda a prevenir problemes amb tancaments en bucles. Quan s'utilitza en un bucle, totes les iteracions fan referència a la mateixa variable, cosa que pot provocar errors. Malgrat això, crea una nova vinculació per a cada iteració, assegurant que cada iteració de bucle té el seu propi abast. Aquest comportament fa let una opció més segura i previsible per declarar variables dins de bucles.

Què és l'elevació en JavaScript?
L'elevació és el comportament predeterminat de JavaScript de moure declaracions a la part superior de l'abast actual. les declaracions s'hissen i s'inicialitzen amb , mentre les declaracions són hissades però no inicialitzades.
Què passa si utilitzeu a variable abans de la seva declaració?
Accedint a variable abans que la seva declaració resulti en a .
Llauna i es tornarà a declarar en el mateix àmbit?
No, no es pot tornar a declarar en el mateix àmbit, mentre que es pot tornar a declarar en el mateix àmbit.
Per què és preferible en bucles?
crea una nova vinculació per a cada iteració del bucle, assegurant que cada iteració del bucle tingui el seu propi abast. Això evita errors comuns associats als tancaments.
Ho fa respectar l'abast del bloc?
No, no respecta l'abast del bloc; està d'abast de funció o d'abast global.
Què és la Zona Morta Temporal?
La Zona Morta Temporal és el temps entre l'entrada a l'àmbit i la declaració real de la variable, durant el qual s'accedeix a un variable llançarà a .
Llauna s'utilitza de manera semblant a ?
Sí, té un àmbit de bloc com , però s'utilitza per declarar variables que no s'han de reassignar.
Quan hauria ser utilitzat per sobre ?
s'hauria d'utilitzar per sobre quan necessiteu l'abast del bloc i per evitar problemes amb l'elevació i tancaments variables.

Reflexions finals sobre les declaracions variables

En conclusió, la introducció de a ECMAScript 6 ha proporcionat als desenvolupadors una eina més robusta per a la declaració de variables en JavaScript. Entendre les diferències entre i és essencial per escriure un codi més net i més fàcil de mantenir. Mentre var encara pot ser útil en determinades situacions, ofereix un millor control sobre l'abast i l'elevació, reduint la probabilitat d'errors.

En triar acabat en els escenaris adequats, els desenvolupadors poden aprofitar l'abast de blocs i evitar els inconvenients comuns associats amb la declaració de variables i l'elevació. Aquest coneixement és fonamental per a qualsevol persona que vulgui dominar el desenvolupament modern de JavaScript.

Comprendre la diferència entre "let" i "var" a JavaScript

Com "let" i "var" diferència a la pràctica

Distinció entre "let" i "var" a JavaScript

Entendre l'abast amb "let" i "var"

Immersió més profunda en l'abast i l'elevació

Reflexions finals sobre les declaracions variables