Hola ,

En este artículo, intentaremos explicar los conceptos de elevación y zona muerta temporal en JavaScript.

Hoisting es un término comúnmente utilizado en Javascript que se refiere al proceso mediante el cual la declaración de funciones , variables o clases parece moverse a la parte superior de su alcance, antes de la ejecución del código.

Contrariamente a la creencia popular, el término elevación no es un término definido normativamente en la especificación ECMAScript.

Por ejemplo, considere el siguiente código:

// global scope
console.log(bar); // undefined

foo(); // "Hello, world!"

var bar = 42;

function foo() {
  console.log("Hello, world!");
}

Sin embargo, debido a hoisting , el motor de JavaScript mueve la declaración de bary fooa la parte superior del alcance global , haciendo que se vea así:

// global scope
var bar;

function foo() {
  console.log("Hello, world!");
}

console.log(bar); // undefined

foo(); // "Hello, world!"

bar = 42;

Ahora, hablemos de la diferencia entre las palabras clave var, lety consty cómo se relacionan con la elevación.

Var

La varpalabra clave es la primera forma de declarar variables en JavaScript. Está sujeta a elevación , lo que significa que la declaración de una varvariable se mueve automáticamente a la parte superior de su ámbito respectivo (global o función) en tiempo de ejecución:

// global scope
console.log(bar); // undefined <-- PROOF OF THE HOISTING
var bar = 41;
console.log(bar); // 41

function foo() { // function scope
  console.log(bar); // undefined (not 41) <-- PROOF OF THE HOISTING
  var bar = 42;
  console.log(bar); // 42
}

foo();
console.log(bar); // 41

Las palabras clave lety constse introdujeron en la versión ECMAScript 2015 (ES6) de JavaScript como una forma de declarar variables y constantes de ámbito de bloque .

Contrariamente a la creencia popular, las palabras clave lety también están sujetas a izaje .const

Por ejemplo, considere los siguientes ejemplos de código:

// global scope
console.log(bar); // ReferenceError
let bar = 42;
// global scope
console.log(bar); // ReferenceError
const bar = 42;

Las declaraciones realizadas con laslet palabras clave y const también están sujetas a elevación (es decir, se mueven a la parte superior de su ámbito respectivo (global o de bloque)) , pero se dice que están en una zona muerta temporal (TDZ) , lo que significa que cualquier intento de acceder a ellas será resultar en un error de referencia .

Considere los siguientes ejemplos:

// global scope
let bar = 41;
console.log(bar); // 41

if (true) { // block scope
 console.log(bar); // ReferenceError (not 41) <-- PROOF OF THE HOISTING / TDZ
 let bar = 42;
 console.log(bar); // 42
}

console.log(bar); // 41
// global scope
const bar = 41;
console.log(bar); // 41

if (true) { // block scope
 console.log(bar); // ReferenceError (not 41) <-- PROOF OF THE HOISTING / TDZ
 const bar = 42;
 console.log(bar); // 42
}

console.log(bar); // 41

Como ejercicio, intente eliminar la declaración de variable en el ifbloque. bar¿Puedes acceder ahora a la variable de ámbito global ?

En conclusión, durante su próxima entrevista, cuando se le haga la pregunta "¿se elevan let y const?", podría decir que:

Las declaraciones realizadas con las palabras clave lety constse elevan de manera efectiva pero con la restricción de zona muerta temporal (es decir, el motor de JavaScript conoce las variables, pero no se pueden usar hasta que hayan sido declaradas). Además, las clases también están sujetas a la misma forma de izaje que lety const.