Izado en JavaScript

Elevación es un comportamiento en el que las declaraciones de variables y funciones se mueven (o "elevan") a la parte superior de su alcance contenedor (ya sea el alcance global o el alcance de la función) antes el código se ejecuta. Esto significa que puede utilizar variables y funciones antes de que se declaren en el código.

Elevación en variables

var

• Las variables declaradas con var se elevan a la parte superior de su alcance, pero sus valores no se inicializan hasta el punto del código donde ocurre la asignación.

console.log(x); // undefined
var x = 5;
console.log(x); // 5

dejar y constante

• Las variables declaradas con let y const también se elevan, pero se colocan en una "zona muerta temporal" hasta que se alcanzan sus declaraciones. Acceder a ellos antes de que sean declarados resultará en un ReferenceError.

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;

// block scope
{
  let x = 5;
}

console.log(x); // ReferenceError: x is not defined

Funciones de elevación

Función tradicional

• Las declaraciones de funciones están completamente elevadas, lo que significa que tanto la declaración como el cuerpo de la función se mueven a la parte superior del alcance. Esto le permite llamar a una función antes de su declaración en el código.

sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}

• Por el contrario, las expresiones de función (donde se asigna una función a una variable) solo se presentan como variables, por lo que llamarlas antes de que se inicialice la variable dará como resultado un error de tipo indefinido o un error de tipo.

greet(); // TypeError: greet is not a function
var greet = function () {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Función de flecha

• Por el contrario, las expresiones de función (donde se asigna una función a una variable) solo se presentan como variables, por lo que llamarlas antes de que se inicialice la variable dará como resultado un error de tipo indefinido o un error de tipo.

greet(); // TypeError: greet is not a function
var greet = () => {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Zona muerta temporal (TDZ)

La zona muerta temporal (TDZ) existe para las variables declaradas usando let y const porque JavaScript está diseñado para impedirle acceder a estas variables antes de que se declaren e inicialicen.

¿Por qué var y let, const se comportan de manera diferente al elevar?

• Es por la evolución histórica de JavaScript.
• Inicialmente, JavaScript fue diseñado para usuarios que no son desarrolladores, y el uso principal de JavaScript era agregar pequeños elementos interactivos a la página web.
• Entonces var solo admite alcance funcional. Además, en ese momento, no había alcance de bloqueo.
• Pero en la evolución posterior de JavaScript, se volvió más complicado trabajar con var y corregir errores.
• Entonces, para que JavaScript sea competitivo con otros lenguajes modernos, se agregaron más funciones como let, const, funciones de flecha, métodos ES6, etc.

¿Por qué var no se actualiza como let y const?

• Es por compatibilidad con versiones anteriores.
• En ese momento, JavaScript era ampliamente utilizado por muchas empresas, por lo que actualizar o realizar cambios en las funciones existentes llevaría a romper el código base.
• Por lo tanto, las funciones modernas se agregaron individualmente.

Preguntas comunes de la entrevista

• ¿Qué es izar en JavaScript?
• ¿Qué se incluye en JavaScript y qué no?
• ¿Cuál es la diferencia entre var, let y const con respecto a la elevación?
• ¿Qué es la zona muerta temporal (TDZ) en JavaScript?
• ¿Puedes explicar el levantamiento con declaraciones de funciones versus expresiones de funciones?
• ¿Qué es la elevación en los módulos ES6?
• ¿Por qué deberíamos evitar depender de hoisting en el código del mundo real?

Resumen

• Elevación es el comportamiento predeterminado en JavaScript donde las declaraciones de variables y funciones se mueven a la parte superior de sus respectivos alcances durante la fase de compilación.
• El levantamiento funciona solo para variables declaradas con var y funciones tradicionales, no para funciones let, const y flecha.
• Solo se eleva la declaración de la función, por lo que las funciones tradicionales funcionan, pero si la función se asigna a una variable, no se podrá invocar hasta que se defina.
• La razón por la que las funciones var y tradicionales se utilizan pero no las funciones let, const y flecha es porque en la etapa inicial, JavaScript se usaba principalmente para pequeñas interacciones de UI.
• Pero más tarde, a medida que JavaScript se utilizó ampliamente para crear aplicaciones en las empresas, se volvió más difícil corregir errores con un alcance solo global.
• Por lo tanto, en futuras actualizaciones, se abordaron inquietudes más seguras.
• Además, la actualización de las funciones existentes habría roto las bases de código, por lo que las nuevas funciones se agregaron por separado.