Hoisting en Javascript - ¿Qué es y Cómo Funciona?

En este artículo, vamos a explorar uno de los conceptos más interesantes y controvertidos de javascript: el hoisting.

Hoisted Javascript, también conocido como "hoisting", es un comportamiento en Javascript Hoisting que permite usar funciones y variables antes de que se hayan declarado. Esto puede parecer confuso al principio, pero no te preocupes, vamos a profundizar en este concepto a lo largo del artículo.

En particular, nos enfocaremos en el funcionamiento y las implicaciones del hoisting javascript, especialmente cuando se trata de variables con var, let o const. Entender cómo funciona el hoisting es crucial para escribir código más seguro y eficiente en js hoisting.

Definición del hoisting en Javascript

El hoisting es un comportamiento que permite usar funciones y variables antes de que se hayan declarado. En otras palabras, el intérprete de JavaScript divide la declaración y asignación de funciones y variables, lo que significa que las declaramos al principio de su ámbito o scope y luego son inicializadas.

Al hacerlo, esto nos permite usar una función antes de definirla con un hoisting javascript, como por ejemplo, llamar a una función que se define más abajo.

Tipos de variables y su comportamiento con el hoisting

Variables declaradas con var

Las variables que se declaran usando var hoisting javascript son inicializadas en su ámbito o scope. Por lo tanto, cuando accedamos a una variable antes de la declaración y asignación con var, la misma devolverá undefined.

Por ejemplo:

javascript
console.log(x); // Salida: undefined
var x = 10;


Variables declaradas con let o const

Las variables que se declaran usando let o const js hoisting no son inicializadas en su ámbito. Cuando accedamos a una variable antes de la declaración y asignación, utilizando let o const, este comportamiento da como resultado un ReferenceError.

Por ejemplo:

javascript
console.log(y); // Salida: ReferenceError: Cannot access 'y' before initialization.
let y = 20;


Variables declaradas con var

La forma de declarar una variable es mediante la palabra reservada var. Cuando una variable se declara usando esta palabra reservada, el hoisting ocurre pero se inicializa a undefined en su lugar.

Por ejemplo: var x; alert(x); // El valor será 0 (pero como estamos en un entorno de desarrollo y el alert no puede recibir valores NULL o UNDEFINED, saldra el valor 0)

Variables declaradas con let o const

En el caso de variables declaradas con let y const, tenemos un comportamiento diferente al del var. Al igual que con las declaraciones de funciones, estas variables tienen hoisting, pero su valor es undefined.

Cuando una variable es declarada usando let o const, se crea una zona muerta temporal (temporal dead zone, TDZ), donde no se puede acceder a ella antes de su declaración.

Efecto del hoisting en la ejecución del código

Cuando se habla de hoisting, se refiere a la capacidad de usar variables o funciones antes de que sean declaradas en JavaScript. Esto puede generar confusión y errores en el código. Por ejemplo, si declaramos una función fuera de su cuerpo, esta se encuentra siempre disponible dentro de su ámbito, independientemente de la posición.

En hoisting javascript, las variables son inicializadas con un valor por defecto cuando son accesadas antes que sea declarada usando var. Esto permite ejecutar el código aunque hayamos accedido a una variable fuera del lugar en donde se ha encontrado declarada. En cambio, si intentamos acceder a una variable con let o const, este comportamiento da como resultado un ReferenceError.

Ejemplos prácticos del hoisting en Javascript

El concepto de hoisting se aplica a variables y funciones, y funciona de manera similar para cada uno, aunque con algunas particularidades importantes. El ejemplo más básico es el siguiente:

javascript
console.log(x); // undefined
var x = 10;


En este caso, el valor de x no es undefined, sino que está presente, sin embargo, su valor es undefined. Esto significa que la variable x se ha hoisted en este ámbito.

El hoisting afecta tanto a variables como a funciones. En el siguiente ejemplo, usamos una función anónima y otra función de forma explícita. El primer console.log devuelve undefined, ya que es ejecutado antes de que sea declarada la variable y.

```javascript
console.log(y); // undefined
var y = function() {
return 'Hola Mundo';
};

console.log(y()); // Hola Mundo
```

En el segundo ejemplo, usamos una función llamada sumarDos. Esta función suma dos números enteros y devuelve el resultado.

```javascript
function sumarDos(num1, num2) {
let x = num1 + num2;
return x;
}

console.log(sumarDos(10,20)); // 30
```

También puedes llamar a una función antes de que se defina.

Mejores prácticas para evitar confusiones con el hoisting

Para minimizar posibles errores derivados del comportamiento del hoisting, te recomendamos las siguientes mejores prácticas:

Evita usar var siempre que sea posible, ya que si se utilizan variables con var y let o const en la misma función o bloque, puede ser difícil de depurar.

Al escribir código utiliza preferiblemente block scope para que puedas controlar qué funciones están disponibles en cada bloque. Así evitarás problemas derivados de la variable hoisting por parte del interprete de JavaScript.

Usa siempre que sea necesario variables con let o const y almacénalos en objetos o arrays, ya que esto te ayudará a hacer un seguimiento más fácil de dónde se están utilizando tus variables.

No uses var para declarar funciones que no estén dentro de otras funciones. Si así lo haces tu función queda globalmente visible (en el scope del window), y puede generar conflictos si tienes más de una función con el mismo nombre en la misma página.

Asimismo, utiliza los métodos hasOwnProperty() o in para determinar si un método existe en algún objeto, esto te evitará problemas por las funciones que se hayan hecho hoisting.

Conclusión

El comportamiento del hoisting en Javascript es un concepto fundamental que todo desarrollador debe entender para escribir código eficiente y seguro. Si bien el javascript hoisting puede ser beneficioso en ciertos contextos, su mal uso puede generar errores confusos y difíciles de depurar.

Al comprender cómo funciona la zona muerta temporal (temporal dead zone, TDZ) y cómo interactúan las variables con var y let o const, podemos escribir código más seguro y fácilmente mantenible. El hoisted javascript ya no será un misterio para nosotros, y podremos aprovechar al máximo los beneficios de la hoisting en nuestros proyectos Javascript.

Es crucial entender el concepto de hoisting js, su comportamiento y sus implicaciones en nuestra programación Javascript. Al hacerlo, podemos escribir código más eficiente, seguro y fácil de depurar, lo que nos permitirá ser mejores desarrolladores de aplicaciones web con Javascript.

Si quieres conocer otros artículos parecidos a Hoisting en Javascript - ¿Qué es y Cómo Funciona? puedes visitar la categoría Blog.