Hoisting en JavaScript

Cuando un equipo trabaja en un proyecto, es probable que el código será leído y cambiado por muchas personas, por lo que es necesário comprender las diferentes formas posibles de escribir un mismo código para que podamos obtener una buena productividad en el desempeño de su desarrollo.

Sin embargo, es importante que la persona desarrolladora comprenda qué es Hoisting y cómo se comporta en diferentes casos en este lenguaje.

Analicemos el código de declaración de función abajo y lo que devuelve:

console.log(suma(2,5))

function suma(a,b) {
    return a + b
}

Al verificar lo que tenemos en la consola, vemos que este código nos devolvió el valor de 7.

Tenga en cuenta que la función se puede llamar incluso antes de que se haya declarado, como se ha hecho con la función suma. Hoisting es el término que explica esta situación, en español significa "izar" o "elevar" y fue mencionado por la primera vez en ECMAScript® 2015 Language Specification. Hoisting le permite ejecutar funciones antes de sus declaraciones. En la práctica, las declaraciones de funciones se almacenan inicialmente en la memoria durante la fase de compilación y, aun así, permanecen en el mismo lugar donde se escriben.

La razón por la que funciona el código anterior es que los motores de JavaScript mueven la función suma a la parte superior del campo de aplicación, o escopo, como lo ilustra el siguiente código:

function suma(a,b){
    return a + b
}

console.log(suma(2,5))

Sin embargo, ¿Hoisting funciona en otros tipos de código? ¡Veamos!

Si intentamos usar el siguiente código, veremos que devuelve undefined en la consola:

console.log(alura) // undefined

var alura = ‘cursos’;

Esto sucede porque no se indica el uso de Hoisting en var, ya que la variable creada se eleva al escopo, pero sin su valor, y con eso, devuelve un valor indefinido.

El comportamiento es similar usando también la función con var:

function testaHoisting() {
    console.log(‘testaHoisting’, alura)
    var alura = ‘cursos’
}

Este código devuelve: undefined.

Hoisting tampoco se indica con let, ya que ocurre otro tipo de comportamiento no deseado:

console.log(alura)

let alura = ‘cursos’;

Este código nos devuelve un error:

script.js:1 Uncaught ReferenceError: Cannot access 'alura' before initialization

Este mensaje en español significa que “No es posible acceder a 'alura' antes de su inicialización”, es decir, el lenguaje JavaScript reconoce que let = alura existe, pero no puede acceder a su declaración. Este comportamiento de Hoisting con let es lo mismo que usar hoisting con const.

Para saber más

Después de leer este artículo, aprendió sobre una característica del lenguaje de programación Javascript. Para profundizar tus conocimientos, Alura puede ayudarte con eso, aprende más con nuestros cursos:

• Lógica de programación: Primeros pasos
• JavaScript: Introducción al lenguaje de la web
• JavaScript: Consolide sus conocimientos en el lenguaje de la web
• JS en la Web: Almacenando datos en el navegador

Este artículo fue escrito originalmente por Luan Alves y Mônica Hillman.

Traducido para Alura Latam por Nathalia Cardozo.