Thread by @lupitacode

👋 ¡Hola gente bonita!

✨ Les comparto este post que realice sobre las diferencias entre var, let y const en JavaScript. ✨

Aquí te lo explico 🧵🧵

📝 Reasignación
Los valores de las variables var y let pueden ser actualizados, si quieres cambiar el valor de una de esas variables puedes simplemente cambiarlo:

var str = 'pita'
str = 'Rob'
console.log(str) //Rob

let str2 = 'Joe'
str2 = 'Dex'
console.log(str2) //Dex

con const no se puede cambiar su valor, al intentarlo causaría un error:

const name = 'Lupita'
name = 'Dexter' //TypeError

👉 Deben ser inicializadas al momento de que se declaran.

const solo afecta a los valores primitivos ya que con los objetos si podemos cambiar sus valores, por ejemplo:

const a = {
friend = 'Lupita'
}
a.friend = 'Dexter'
console.log(a.friend) // Dexter 👍

En el ejemplo, el objeto aunque este declarado con const sus propiedades si se pueden cambiar o eliminar. Existen métodos para prevenir que se puedan cambiar los valores, pero ese es otro tema...

Así que NO es del todo cierto que el valor de const nunca puede ser cambiado 🤓

👥 Redeclaración:

Quiere decir que puedes volver a declarar el mismo nombre de la variable.
Aunque solo con var se puede hacer:

var str = 'pita'
var str = 'Joe' 👍

let age = 40
let age = 50 //SyntaxError

const surname = 'Solis'
const surname = 'Fox' //SyntaxError

Aunque en la consola de Chrome y Edge si podemos volver a declarar el mismo nombre de la variable. Esto sucede porque desde 2019 Chrome permite redeclaraciones con let y const.

🔗 Link de la info: developer.chrome.com/blog/new-in-de…

Aunque si definimos las variables de la siguiente manera nos mostrara error:

🤔 ¿Qué es el scope?

Se traduce como "ámbito" o "alcance" y determina en que partes de nuestro programa tenemos acceso a una cierta variable.

El scope lo podemos dividir de la siguiente manera:

> Global Scope
> Local Scope:
L Function Scope
L Block Scope

🌐 Global Scope

Cuando creas una variable con var, let o const que NO este dentro de una función, un modulo, un if etc., cuando la creas "al aire libre" eso es lo que se conoce como una variable global.

👉 Puedes acceder a estas variables desde cualquier parte del código

👇

🪟 Propiedad del objeto global (window)

Al declarar una variable con VAR esta se agrega como propiedad del objeto global, que en los navegadores es: window, por ejemplo:

var name = 'Lupita';
name === window. name //true
window. name // Lupita

👇

...y que pasa con let y const?

Aunque declares una variable con let o const de manera global, estas si siguen siendo de ámbito global solo que NO están unidas a window. NO son propiedad del objeto global:

let str = 'Joe'
str === window.str //false
window.str //undefined

👇

🚪 Function Scope

Cuando las variables tipo var, let y const se crean dentro de una función, esas variables solo están disponibles dentro de esa función.

Si se intenta acceder a ellas fuera de la función resulta en un error de referencia

ejemplo 👇

Function Scope - Ejemplo:

function fun() {
var apple = 1;
let pear = 2;
const tomato = 3;
}

console.log(apple); //ReferenceError
console.log(pear); //ReferenceError
console.log(tomato); //ReferenceError

🚪 Function Scope

Puede pensar en las llaves de las funciones como si fueran puertas. Mantienen las variables dentro y no permiten que salgan...

🧱 Block Scope

Puedes definir una variable tipo let o const, donde su scope sea interno (bloque) y solo se pueda acceder a ellas dentro de la misma.

Las variables definidas con var se pueden usar fuera del bloque, ya que no quedan encapsuladas dentro de los bloques...

Los bloques en JS se delimitan mediante llaves, una de apertura "{", y otra de cierre "}", ejemplos podrían ser un if, for, switch etc.

🚪 Puedes pensar también que esas llaves son puertas. Esas puertas mantienen las variables let y const dentro.

Block Scope - Ejemplo:

{
let name = 'Lupita';
var lang = 'Spanish';
console.log(name) //Lupita
}

console.log(lang) //Spanish
console.log(name) //ReferenceError

⚠️ Debemos evitar el uso de var para no encontrarnos con comportamientos inesperados

🏋️‍♀️ Hoisting (Elevación)

Es un mecanismo de JS donde las declaraciones de variables y funciones se elevan a la parte superior de su scope antes de la ejecución del código

👉 Este es un concepto para referirse a como funciona el contexto de ejecución de JS

👇

Es necesario que conozcas como funciona el contexto de ejecución, ya que al no comprenderlo puede llevar a confusiones, respuestas erróneas y engañosas respecto al hoisting.

Aunque es normal sentir confusión al principio.

¿Cuál es la diferencia entre declarar e inicializar?

Declarar una variable significa q se reserva el nombre en memoria en el scope actual
Inicializar una variable es establecer el valor de la variable

let a; //declaración
a=2 //inicialización

let x = 1 //declarar e inicializar

Cuando declaramos una variable es como si la declaración se separara de la inicialización y se elevara al inicio del scope al que pertenece osea la variable queda exactamente en donde la has escrito en el código solo que JS sin que te des cuenta la "eleva" al inicio de su scope

Es importante recordar que la asignación de la variable NO se eleva, sino únicamente su declaración. JS solo utiliza el hoisting en declaraciones, NO inicializaciones

Por ello es necesario conocer la diferencia entre declaración e inicialización que explique en el otro tweet 👆

Debido a esta "elevación" o hoisting podríamos acceder a la variable antes de su declaración y veríamos el valor de undefined en consola como en el siguiente ejemplo:

👇👇

Hoisting con VAR - Ejemplo

// en el código:
console.log(a); //undefined
var a = 2;

Lo que hace JS cuando se ejecuta es lo siguiente:

var a = undefined;
console.log(a);
a = 2;

Cuando las variables son elevadas var obtiene por defecto el valor de inicialización: undefined en el proceso de hoisting. Por su parte let y const también son elevadas pero no son puestas con el valor undefined en el proceso

Entonces let y const SI son elevadas (hoisted)..

👇

Para probar que let y const también se elevan, mira el siguiente ejemplo:

{
console.log(typeof testVar); //undefined
console.log(typeof str); //ReferenceError: Cannot
access 'str' before initialization

let str = 'Lupita';
}

El código anterior es la prueba de que let es claramente elevada por encima de donde fue declarada, ya que el motor nos avisa de este hecho:

Se sabe que la variable 'str' existe (es declarada), pero no podemos acceder a ella antes de su inicialización.

En resumen la única diferencia con let y const es que cuando son elevadas sus valores no toman el valor por defecto undefined...

⌛️ TDZ (Temporal Dead Zone)

Es el área del código donde las variables declaradas con let y const son inaccesibles.

Como sugiere su nombre es una zona muerta TEMPORAL lo que quiere decir que esta zona se define por tiempo y no por ubicación.

👇

Las variables declaradas con let o const están en un área del código q se llama TDZ. Estas existen en la TDZ desde el inicio de su scope hasta que son declaradas por ello no podemos acceder a una variable declarada con let o const antes de su declaración ya q nos devuelve error

⌛️ Temporal Dead Zone - Ejemplo:

// en el código:
function foo(){
console.log(a);
let a = 2;
}
foo(); //ReferenceError

Lo que hace JS cuando se ejecuta es esto:

function foo(){
//Inicio "TDZ" de a
console.log(a);
//Fin "TDZ" de a
let a = 2;
}
foo();

Nota: En el ejemplo de const tuve un error de dedo coloque el operador igual =, pero es con los dos puntos (:)

Así:

const a = {
friend: "Lupita",
};
a.friend = "Dexter";
console.log(a.friend); // Dexter 👍