Elevación de JavaScript

Tabla de contenido

Izar es el comportamiento predeterminado de JavaScript al mover declaraciones al arriba.

Se elevan las declaraciones de JavaScript

En JavaScript, se puede declarar una variable después de haberla utilizado.

En otras palabras; una variable se puede utilizar antes de haber sido declarada.

El Ejemplo 1 da el mismo resultado que el Ejemplo 2:

Ejemplo 1

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     
// Display x in the element
var x; // Declare x

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element

var x; // Declare x
</script>

</body>
</html>

Ejemplo 2

var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     
// Display x in the element

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element
</script>

</body>
</html>

Para entender esto, hay que entender el término "elevación".

Izar es el comportamiento predeterminado de JavaScript de mover todas las declaraciones al parte superior del alcance actual (hasta la parte superior del script actual o la función actual).

Las palabras clave let y const

Las variables definidas con let y const se elevan a la parte superior del bloque, pero no inicializado.<p>Significado: El bloque de código es consciente de la variable, pero no se puede utilizar hasta que se haya declarado. <p>El uso de una variable let antes de declararla dará como resultado una Error de referencia.

La variable está en una "zona muerta temporal" desde el principio. del bloque hasta que se declare:

Ejemplo

carName = "Volvo";
let carName;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>

<script>
try {
  carName = "Saab";
  let carName = "Volvo";
}
catch(err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

Usar una variable const antes de declararla es un error de sintaxis. entonces el código simplemente no se ejecutará.

Ejemplo

Este código no se ejecutará.

carName = "Volvo";
const carName;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>const</b>, you cannot use a variable before it is declared.</p>
<p>Try to remove the //.</p>

<p id="demo"></p>

<script>
carName = "Volvo";
//const carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Lea más sobre let y const en JS Let/Const.

Las inicializaciones de JavaScript no se activan

JavaScript solo genera declaraciones, no inicializaciones.

El ejemplo 1 no da el mismo resultado que Ejemplo 2:

Ejemplo 1

var x = 5; // Initialize x
var y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // Initialize x
var y = 7; // Initialize y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y

</script>

</body>
</html>

Ejemplo 2

var x = 5; // Initialize x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

var y = 7; // Initialize y

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5;  // Initialize x

elem = document.getElementById("demo");      // Find an element 
elem.innerHTML = "x is " + x + " and y is " + y;  // Display x and y

var y = 7;  // Initialize y
</script>

</body>
</html>

¿Tiene sentido que y no esté definido en el último ejemplo?

Esto se debe a que solo la declaración (var y), no la inicialización (=7), se eleva a la cima.

Debido a la elevación, y se ha declarado antes de su uso, pero debido a las inicializaciones no se elevan, el valor de y no está definido.

El ejemplo 2 es lo mismo que escribir:

Ejemplo

var x = 5; // Initialize x
var y;     // Declare y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

y = 7;    // Assign 7 to y

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // Initialize x
var y;   // Declare y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y

y = 7;   // Assign 7 to y

</script>

</body>
</html>

¡Declare sus variables en la parte superior!

El levantamiento es (para muchos desarrolladores) un comportamiento desconocido o pasado por alto de JavaScript.

Si un desarrollador no entiende el izado, los programas pueden contener errores.<p> Para evitar errores, declare siempre todas las variables al principio de cada alcance.<p> Dado que así es como JavaScript interpreta el código, siempre es una buena regla.

JavaScript en modo estricto no permite el uso de variables si son no declarado.
Estudie "uso estricto" en el próximo capítulo.