Artículos de Tecnología > Front End

Hoisting en JavaScript

luanalvesdev
luanalvesdev

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:

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

Traducido para Alura Latam por Nathalia Cardozo.

Artículos de Tecnología > Front End

En Alura encontrarás variados cursos sobre Front End. ¡Comienza ahora!

Semestral

  • 265 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro y comunidad exclusiva para resolver tus dudas
  • Luri powered by ChatGPT

    Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana

  • Acceso a todo el contenido de la plataforma por 6 meses
US$65,90
un solo pago de US$65,90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Anual

  • 265 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro y comunidad exclusiva para resolver tus dudas
  • Luri powered by ChatGPT

    Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana

  • Acceso a todo el contenido de la plataforma por 12 meses
US$99,90
un solo pago de US$99,90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Acceso a todos
los cursos

Estudia las 24 horas,
dónde y cuándo quieras

Nuevos cursos
cada semana