Scope y hoisting en javascript

Published:

Scope en funciones

Esta vez hundiremos nuestros cerebros en el interesante mundo del scope en javascript.

¿Que es el scope en javascript?

El scope en javascript, básicamente, es la accesibilidad de variables y/o funciones, es decir, cuando y como podemos acceder a una variable o función.

Tipos de scope

El scope local limita a las asignaciones definidas dentro de un scope, a sólo ser accesibles dentro de este mismo.

function myFunc() {
  let hola = "hola";
  console.log(hola);
}

myFunc(); // "hola"

console.log(hola); // hola is not defined

El scope global por otra parte deja que las asignaciones puedan ser accesibles globalmente, es decir, pueden ser utilizados por otros scopes.

let hola = "hola";

function myFunc() {
  console.log(hola);
}

myFunc(); // "hola"

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

Tipos de declaración de variables

Existen distintas formas de declarar variables en javascript, ya sea con let, const o var. Existe una diferencia entre let, const y var, el hoisting.

El hoisting define cuando se declara una variable en el contexto de ejecución. Vamos a un ejemplo con let y const. Tomando el ejemplo anterior, pero moviendo la declaración de la variable después de llamar la función myFunc.

function myFunc() {
  console.log(hola);
}

myFunc(); // Reference Error: hola is not defined.

let hola = "hola";

pero si utilizamos var en vez de let, obtendremos otro resultado.

function myFunc() {
  console.log(hola);
}

myFunc(); // undefined

var hola = "hola";

Al parecer ahora javascript tiene acceso a la referencia de la variable hola, pero al no tener asignado ningun valor, al momento de llamar a la función myFunc retorna en la consola undefined.

Esto sucede porque javascript realiza lo siguiente antes de ejecutar el código.

var hola;

function myFunc() {
  console.log(hola);
}

myFunc(); // undefined

hola = "hola";

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

Javascript declara la variable hola pero no le asigna ningún valor, hasta después de ejecutar myFunc.

Esto se define como hoisting en javascript, las funciones definidas con la palabra reservada function y las variables definidas con var.

Tipos de declaración de funciones

Las funciones, como es bien sabido desde ES6, tiene distintas formas de declararse.

las funciones definidas de manera standard también se ven afectadas por el hoisting.

myFunc(); // "hola"

myOtherFunc(); // Reference Error: hola2 is not defined

function myFunc() {
  console.log("hola");
}

const myOtherFunc = () => {
  console.log("hola2");
};

antes de ejecutar el código, las funciones declaradas de manera standard serán movidas al principio del archivo, tal cual como pasa con las variables definidas con var, con la diferencia de que las funciones conservan su definición.

por lo tanto el código ejecutado se vería así:

function myFunc() {
  console.log("hola");
}

myFunc(); // "hola"

myOtherFunc(); // Reference Error: hola2 is not defined

const myOtherFunc = () => {
  console.log("hola2");
};

Las funciones de flecha son una asignación de valor, en este caso una funcion anonima, a una variable definida ya sea con const, let o var. Por lo tanto, el hoisting de estas se comportará de la misma manera que una variable definida con const, let o var.

const myFunc = function () {
  console.log("hola");
};

const myOtherFunc = () => {
  console.log("hola2");
};

Las funciones definidas en el ejemplo anterior tendrán un comportamiento parecido, ya que estamos asignando una función declarada con la keyword function a una constante, el hoisting de la definición function en este caso no tendrá incidencia.