Hoisting

Lo dije un par de clases atrás, pero vuelvo a recomendar también el curso de Closures y Scope en JS porque explica todo este módulo de scopes y hoisting claro y en profundidad: https://platzi.com/cursos/javascript-closures-scope/

Si este curso se adentrara en contenido mas avanzados y organizara de otra forma las clases perfectamente seria el remplazo para el curso de JS profesional, en otras palabras es mi manera de decir que este curso esta realmente bien realizado.

Conocer todas estas cuestiones de scope es esencial, pero me parece que las mismas no tienen nada que ver con el curso actual. Para aprenderlas hay otros cursos, de hecho, cursos específicos.

Hay tanto para decir de Clean Code, que ocupar tiempo en cuestiones aledañas o tangenciales me parece desafortunado.

Hoisting

var greet = "Hello";

function saludar() {
  console.log(greet); //> undefined
  var greet = "Hi";
  console.log(greet); //> Hi
}

saludar(); // se invoca la función

la variable local greet se declara en la parte superior de la función saludar(), antes de que se imprima la variable global greet. Sin embargo, en el momento en que se imprime la variable local greet, aún no se le ha asignado un valor y, por lo tanto, su valor es undefined.
JavaScript, cada vez que se define una variable dentro de una función, se crea una nueva instancia de esa variable en un ámbito local dentro de la función. Es decir, la variable local greet dentro de la función saludar() se refiere a una instancia diferente de la variable greet que la variable global greet que está definida fuera de la función, es otro espacio de memoria.

• De las 3 formas de declarar variables (let, const, var) sólo var tiene hoisting
• hoisting sólo se aplica a la declaración de la variable no a la asignación

Es importante recalcar que las variables declaradas con var, a pesar de que no tienen scope de bloque, sí tienen scope de función. Por ende:

// scope de bloque:
console.log(age) // undefined
{
  console.log(age) // undefined
  var age = 28
}

console.log(age) // 28

// scope de función
function greet() {
  console.log(greeting) // undefined
  var greeting = 'Hi'
  console.log(greeting) // Hi
}

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

Como greeting está declarada dentro de una función, se le aplicará hoisting en el ámbito léxico de la función. Mientras que age, como está declarada dentro de un bloque, se le aplicará hoisting de forma global.

var greet = "Hello";

function saludar() {
  console.log(greet); //> Hello
  var greet = "Hi";
  console.log(greet); //> Hi
}

saludar(); // se invoca la función

Este es el ejemplo si la función no fuera auto invocada.

En este ejemplo los valores impresos son:

• Hello
• Hi

Es importante entender como se ejecuta nuestro código para saber el porque de los comportamientos.

let age = 28

{    
    console.log('valor dentro del bloque', age);
    let age = 29;
}

console.log('valor fuera del bloque', age)

age = age*2
console.log('valor cambiado', age)

Es importante tomar en cuenta que en este escenario imprime undifined porque se está declarando una variable con el mismo nombre que la variable global, y esta variable declarada dentro de la función solo es accesible a nivel función, que sería lo equivalente a esto:

var greet = "Hello";

function saludar() {
	var greet;
  console.log(greet); //> undefined
  var greet = "Hi";
  console.log(greet); //> Hi
}
saludar();

Pero si no es asi, si imprime el valor de la variable global:

var greet = "Hello";

function saludar() {
  console.log(greet); //> Hello
}
saludar();

Buenas prácticas para usar hoisting

• No utilizar var en las declaraciones de variables.

• Escribir primero las funciones y luego su invocación.