Let es el nuevo Var



Cuando aprendemos un lenguaje de programación, aparecen varios conceptos básicos, como declarar variables, y son tan simples que podemos comenzar a usarlos sin ningún conocimiento de su funcionamiento.

Sé lo que pensabas: "¿Por qué pierdes el tiempo escribiéndonos sobre esto?"

Porque creo que vale la pena dedicar unos minutos a comprender mejor estos elementos, cuál es su significado y cómo debemos usarlos. Esto lo ayudará a evitar algunos errores comunes y a escribir mejor el código.

En este artículo, nos centraremos en cómo almacenar datos en JavaScript.

Var


"Érase una vez en una galaxia distante ..." la única opción para definir variables en JavaScript era usar la palabra clave var, y eso fue suficiente para manipular los datos en el código. Pero con la introducción del estándar ES6, algunas de las rarezas y debilidades del antiguo JS se hicieron bastante obvias:

  1. Alcance: la palabra clave var le permite definir variables solo en el alcance global y local (o en el alcance de una función). No importa cuántos bloques de código anidados tenga, solo existen estas dos posibilidades.
  2. Constantes: si desea definir algo que no cambiará durante la ejecución del código, solo puede confiar en el sentido común de los desarrolladores. Podemos usar algunas convenciones útiles para aclarar el significado (por ejemplo, mayúsculas), pero no hay nada que garantice que el significado no cambie.
  3. Anulación de variables: puede repetir la declaración de la misma variable tantas veces como desee (en el mismo ámbito), y esto es un poco confuso si desea mantener las variables únicas.

Definiciones


Antes de comenzar con las cosas técnicas, introduzcamos algunas definiciones generales:

Una variable es un "contenedor" en el que se almacenan los datos reutilizables (muy trivial).

Los identificadores son nombres de variables (también muy triviales).

Un bloque es un fragmento de código separado por un par de llaves ( ccskrf ), por ejemplo: if, for, function y. etc.

Alcance , determina la visibilidad de las variables dentro del código. Si tiene dudas, pregúntese: "¿Dónde está mi variable visible en el código?"
NOTA No confunda el alcance con el contexto de ejecución , que es diferente.

** Contexto (o contexto de ejecución) ** es el entorno en el que se ejecuta el código JavaScript. Para simplificar, podemos decir que el contexto es el objeto al que pertenece el código, y esta es la palabra clave que se refiere a él. Entonces pregúntese: "¿A qué objeto se refiere esto?"

Ahora supongamos que nuestro desarrollador es un apasionado de Star Wars (que es bueno), pero sospecha de nuevos estándares como ES6 (que es malo), aunque ha existido por algún tiempo. Por lo tanto, prefiere escribir su código en el antiguo estilo ES5, y se verá así:

console.log("I am a %s", jedi); var jedi = "Ani"; //   jedi    // =>  undefined function useTheForce(comeToTheDarkSide) { var jedi = "Obi-Wan Kenobi"; var jedi = "Anakin Skywalker"; if (comeToTheDarkSide) { var jedi = "Darth Vader"; console.log("I am %s", jedi); // => I am Darth Vader } console.log("I am %s", jedi); //  Darth Vader } useTheForce(true); console.log("I am %s", jedi); // => Ani 

Como puede ver, hay tres bloques de código (incluido global), pero solo dos ámbitos. Esto se debe a que el código entre corchetes no crea un ámbito. La consola emitirá "Soy Darth Vader" dos veces y luego "Soy Ani" a nivel mundial.

También tenga en cuenta que la misma variable se declara dos veces seguidas dentro de la función, y luego nuevamente en la instrucción if. Esto significa que tenemos la declaración de la misma variable en el mismo alcance tres veces, lo que arroja una excepción.

Por último, pero no menos importante, la salida del primer registro es: imprimimos el valor de nuestra variable antes de definirlo. Esto es completamente legal con var y se llama "elevación".

El "ascenso" supone que las variables y funciones declaradas se mueven físicamente al comienzo de su código. Técnicamente, hay declaraciones de variables y funciones que se almacenan en la memoria en la etapa de compilación, pero permanecen en el código exactamente donde las escribió. La importancia fundamental de un ascensor es que le permite usar funciones antes de declararlas en su código.

Puedes leer sobre esto aquí .

En nuestro ejemplo, la declaración de la variable "jedi" se coloca en la memoria y se inicializa al valor predeterminado (indefinido).

Dejar


Por el momento, nuestro desarrollador entiende que ES6 no es tan malo, y decide dar una oportunidad:

 console.log("I am a %s", jedi); let jedi = "Ani"; //   jedi    // => Uncaught ReferenceError:     "jedi"   function useTheForce(comeToTheDarkSide) { let jedi = "Obi-Wan Kenobi"; let jedi = "Anakin Skywalker"; // => Uncaught SyntaxError:  ''   if (comeToTheDarkSide) { var jedi = "Darth Vader"; console.log("I am %s", jedi); // =>  Darth Vader } console.log("I am %s", jedi); //  Anakim Skywalker } useTheForce(true); console.log("I am %s", jedi); // =>  Ani 

Pero pronto se da cuenta de que no puede simplemente cambiar la palabra clave var para permitir, para esto debe hacer algunas correcciones:

Rising no funciona de la misma manera: una variable se coloca en un estado llamado Temporal Dead Zone * * y no se inicializa hasta que se evalúa la definición. En nuestro ejemplo, arroja un error: error de referencia.

la reasignación está prohibida, la definición de una variable en el alcance debe ser única. Al intentar obtener un error: SyntaxError.

La declaración if es un alcance de bloque válido, por lo que la declaración jedi dentro de ella es única.

Ahora el código debería ser así:

 let jedi = "Ani"; console.log("I am a %s", jedi); // print jedi variable before defining it // =>  Ani (  ) : 0 function useTheForce(comeToTheDarkSide) { let jedi = "Obi-Wan Kenobi"; let jedi = "Anakin Skywalker"; if (comeToTheDarkSide) { var jedi = "Darth Vader"; console.log("I am %s", jedi); // =>  Darth Vader } console.log("I am %s", jedi); //  Anakim Skywalker } useTheForce(true); console.log("I am %s", jedi); 

Const


Ahora que sabes todo sobre let, será fácil presentarte a const . En esencia, podemos decir que const es similar a let, pero no puede reasignar otro valor. También debe saber que la asignación solo se permite durante las declaraciones constantes.

 function useTheForce(comeToTheDarkSide) { const jedi = "Yoda"; if (true) { jedi = "Darth Yoda"; console.log("I am %s", jedi); // => TypeError: Assignement to constant variable. } } useTheForce(true); 

Supongamos que en nuestro ejemplo, "jedi" es una constante con el valor "Yoda", si tratamos de cambiar el valor dentro de la instrucción if, nos dará un error TypeError, y esto es comprensible porque Yoda nunca se unirá al lado oscuro.

Conclusión


Cuando es imposible expresar un concepto en palabras en idiomas, se introduce un nuevo concepto para llenar el vacío. Esto es correcto para inglés ( enlace ), italiano, esperanto, ewokese (supongo), etc. Esto es aún más cierto para lenguajes de programación como JavaScript.

Ahora sabes que puedes:

  • Declare variables en el alcance del bloque y asigne memoria para ellas solo cuando evalúe el bloque
  • Mantenga las declaraciones de variables únicas dentro del alcance, evitando que el desarrollador anule por error la variable utilizada en otra parte del código (con un valor diferente)
  • Podemos asegurarnos de que la variable almacenada en const no cambie en ningún momento.

Mi último consejo es usar const como su opción predeterminada. Cuando necesite reasignar una variable, use ** let ** (como en los bucles). Y usa var cuando ... no, ya no necesitas var, realmente

Gracias por su atencion

Preguntas rápidas de Javascript

Estoy en twitter y vk

Source: https://habr.com/ru/post/466559/


All Articles