Alojamiento en JavaScript | audacia

En JavaScript, el levantamiento se refiere al comportamiento integrado del lenguaje a través del cual las declaraciones de funciones, variables y clases se mueven a la parte superior de su alcance, todo antes de la ejecución del código. A su vez, esto nos permite usar funciones, variables y clases antes de que se declaren.

En esta publicación, exploraremos algunos ejemplos de elevación y veremos el impacto que tiene en el código que escribimos.

Declaraciones.

Antes de comenzar, asegurémonos de estar en la misma página con respecto a declaraciones. En JavaScript, las declaraciones incluyen el uso de:

• function para declarar una función (incluidos los generadores)
• async function para declarar una función asíncrona (incluidos los generadores)
• class declarar una clase
• var declarar una variable
• let para declarar una variable de ámbito de bloque
• const para declarar una variable no reasignable con ámbito de bloque

Considere los siguientes ejemplos:

// Declaring a function
function myFunction() {
  // ...
}


// Declaring a variable
let a = "a";


// Declaring a class
class MyClass {
  // ...
}

En el fragmento anterior, simplemente estamos haciendo tres declaraciones: una función, una variable y una clase. Ahora bien, ¿qué significa izar estas declaraciones?

Función de elevación.

Debajo del capó, las declaraciones de funciones se colocan en la memoria en tiempo de compilación. Como tal, esto hace posible, en ejecución, llamar a una función declarada antes está definido. Por ejemplo:

console.log(greeting()); // "Hello there!"


function greeting() {
 return "Hello there!";
}

En el fragmento anterior, podemos registrar el valor de retorno de invocar greeting() antes esa función está incluso definida. Todo esto se debe a función de elevación – un comportamiento integrado de JavaScript que eleva la declaración de una función y su valor a la parte superior de su alcance.

Tenga en cuenta que esto difiere de invocar una función que es nunca declarado:

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

Dado que la función nunca se define en ninguna parte, el intérprete de JavaScript evalúa la expresión como una ReferenceError.

Ahora que hemos visto cómo funcionan los izajes de JavaScript, echemos un vistazo a cómo se izan las variables.

Elevación variable con var.

A diferencia de la función de elevación, elevación variable muestra un comportamiento ligeramente diferente. Cuando se declara una variable con el var palabra clave, el intérprete de JavaScript todavía eleva su declaración. Sin embargo, difiere de cómo se elevan las funciones en que el valor de la variable (si la tiene) no está incluida. Considere el siguiente ejemplo:

console.log(a); // undefined

var a = "a";

console.log(a); // "a"

Cuando la variable a está elevado, el motor de JavaScript aún lo mueve a la parte superior de su alcance, pero inicializa la variable con un valor de undefined. Como tal, hasta a se declara realmente en la línea siguiente, no se asignará su valor real. Luego, después de la declaración, finalmente podemos registrar su valor en la consola: “a“.

Ahora, ¿qué pasa con las variables declaradas con el let y const palabras clave? Resulta que también hay algunos comportamientos ligeramente diferentes que declaran variables de ámbito de bloque.

Elevación variable con let y const.

Similar a declarar una variable con varla declaración de una variable con let oro const todavía ve la declaración de la variable elevada a la parte superior de su alcance. Sin embargo, en lugar de inicializar esa variable con un valor (es decir, undefined, como se muestra arriba), el motor de JavaScript omite ese paso por completo. Como tal, por no siendo inicializado, el intérprete de JavaScript arrojará un error si intentamos acceder a la variable:

console.log(a); // ReferenceError: Cannot access 'a' before initialization

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

let a = "a";

console.log(a); // "a"

La razón por la que vemos estos errores, aunque la variable a esté correctamente izada, se debe a que la variable se encuentra en la zona muerta temporal (TDZ). Es decir, mientras la variable está dentro del alcance, no podemos acceder ni usar la variable en absoluto antes de que se declare explícitamente. Este mismo comportamiento también se aplica al declarar una clase con el class palabra clave:

let instance = new MyClass(); // Cannot access 'MyClass' before initialization

class MyClass {
 // ...
}

Ciertos desarrolladores en la comunidad pueden argumentar que las declaraciones con let, constoro class son sin elevación en el sentido más estricto.

Ahora que hemos visto cómo se pueden izar diferentes declaraciones, ¿qué significado tiene esto? en codigo?

¿Izar o no izar?

Hoisting no está definido explícitamente en la especificación ECMAscript, que describe los estándares de JavaScript como lenguaje. En su mayor parte, debe considerar la elevación como una opción predeterminada comportamiento de JavaScript en lugar de un característica. Es decir, en lugar de aprovechar la elevación como una herramienta práctica o un patrón de diseño en los scripts y las aplicaciones que escribe, debe tener en cuenta sus características a medida que continúa trabajando con JavaScript.

En ciertas bases de código, por ejemplo, puede encontrarse con funciones que se utilizan en la lógica empresarial en el arriba del script, mientras que sus declaraciones se dejan al final. abajo del script (algo que la Guía de estilo de JavaScript de AirBnb desaconseja). Aunque es menos común y probablemente solo parcialmente útil, sepa que todo esto es posible debido a elevación.

Obtenga más información sobre la elevación.

Para obtener más información sobre elevación, declaraciones y alcance en JavaScript, consulte estos recursos:

O explore el programa Intermediate JavaScript Nanodegree para dominar el lenguaje de programación más popular del mundo.