Elevación de JavaScript

Elevar es el comportamiento predeterminado de JavaScript de mover declaraciones a la parte superior.

Las declaraciones de JavaScript están elevadas

En JavaScript, una variable se puede declarar después de que se haya utilizado. En otras palabras, una variable se puede utilizar antes de que se declare. El ejemplo 1 da el mismo resultado que el ejemplo 2.

Ejm 1

<!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>

Ejm 2

<!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 comprender esto, debes comprender el término “elevación“. Elevar es el comportamiento predeterminado de JavaScript de mover todas las declaraciones a la parte superior del alcance actual (a la parte superior de la secuencia de comandos 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 se inicializan.

  • Significado: el bloque de código es consciente de la variable, pero no se puede utilizar hasta que se haya declarado.

El uso de una variable let o const antes de que se declare dará como resultado un ReferenceError. La variable está en una “zona muerta temporal” desde el inicio del bloque hasta que se declara.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
<p>Con <b>let</b> no puedes usar una variable antes de ser declarada</p>
<p id="demo"></p>

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

Las inicializaciones de JavaScript no están elevadas

Javascript solo eleva declaraciones, no inicializaciones. El ejemplo 1 no da el mismo resultado que el ejemplo 2:

Ejm1

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo"></p>

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

elem = document.getElementById("demo"); //ENCUENTRA UN ELEMENTO
elem.innerHTML = x + " " + y; // MUESTRA x E y
</script>
</body>
</html>

Ejm2

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo"></p>
<script>
var x = 5; // INICIALIZAMOS x

elem = document.getElementById("demo");  // ENCUENTRA UN ELEMENTO
elem.innerHTML = "x es: " + x + " e y es" + y; // MUESTRA x E y

var y = 7;  // INICIALIZA 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 parte superior. Debido a la elevación, y se ha declarado antes de su uso, pero debido a que las inicializaciones no se elevan, el valor de y no está definido. El ejemplo 2 es lo mismo que escribir.

Ejm3

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo"></p>
<script>
var x = 5; // INICIALIZAMOS x
var y; // TAN SOLO DECLARAMOS LA VARIABLE y

elem = document.getElementById("demo"); //ENCONTRAMOS UN ELEMENTO
elem.innerHTML = x + " " + y; // MOSTRAMOS x E y

Y = 7; // ASIGNAMOS UN VALOR A y

</script>
</body>
</html>

¡Declara tus variables en la parte superior!

Elevar es (para muchos desarrolladores) un comportamiento desconocido o pasado por alto de JavaScript. Si un desarrollador no comprende el elevado, los programas pueden contener errores (errores). Para evitar errores, siempre declara todas las variables al principio de cada ámbito. 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 no están declaradas.