CLOSURES & HOISTING Apuntes EXPLICADOS

CLOSURES

Según la definición estricta una clausura o closure es una función que guarda referencias del estado adyacente (ámbito léxico).

En otras palabras, una clausura permite acceder al ámbito de una función exterior desde una función interior. En JavaScript, las clausuras se crean cada vez que una función es creada.

EJEMPLO

const moneyBox = () => {
    var saveCoins = 0;
    const countCoins = (coins) => {
        saveCoins += coins;
        console.log(`MoneyBox: $${saveCoins}`);
    } 
    return countCoins;
};
let myMoneyBox = moneyBox();
myMoneyBox(4); 
myMoneyBox(6);
myMoneyBox(10);

Lexical

const buildCount = (i) => {
    let count = i;
    const displayCount = () => {
        console.log(count++);
    };
    return displayCount;
};

const myCount = buildCount(3);
myCount();
myCount();
myCount();

const myOtherCount = buildCount(10);
myOtherCount();
myOtherCount();
myOtherCount();

NOTA: Cabe resaltar que la sintaxis x++ realiza un incremento pero muestra el valor anterior al incremento, y la sintaxis ++x realiza el incremento pero muestra el valor ya incrementado.

Private

const person = () => {
    var saveName = "Name";
    return {
        getName: () => {
            return saveName;
        },
        setName: (name) => {
            saveName = name;
        },
    };
};

newPerson = person();
console.log(newPerson.getName());

newPerson.setName('nombreCualquiera');
console.log(newPerson.getName());

Loops

const anotherFunction = () => {
    for (let i = 0; i < 10; i++){
        setTimeout(() => {
            console.log(i);
        }, 1000)
    }
};
anotherFunction();

NOTA: El closure en este caso viene a ser el setTimeout() y como Oscar mostró si usas var, en el setTimeout() por consola se mostrará 10 veces 10 ya que el setTimeout es asíncrono y va ejecutarse luego de haber recorrido todo el for. Y tendrá el valor de 10 ya que var tiene un scope de función debido al hoisting (levantamiento)

HOISTING

El concepto de Hoisting fue pensado como una manera general de referirse a cómo funcionan los contextos de ejecución en JavaScript (específicamente las fases de creación y ejecución).

Conceptualmente, por ejemplo, una estricta definición de hoisting sugiere que las declaraciones de variables y funciones son físicamente movidas al comienzo del código, pero esto no es lo que ocurre en realidad.

Lo que sucede es que las declaraciones de variables var y funciones son asignadas en memoria durante la fase de compilación, pero quedan exactamente en dónde las has escrito en el código.

EJEMPLO 1

Escritura de Codigo
a = 2;
var a; 
console.log(a)

Como lo interpreta JavaScript
 var a;     //Declaración de la variable con valor undefined por defecto.
 a = 2;     //Inicialización de la variable asignandole un valor
 console.log(a); // Ejecución de llamado a la consola el valor a = 2,

EJEMPLO 2

Escritura de Codigo
console.log(b);
var b = 2;
console.log(b)

Interpretación de JavaScript
var b;      // Declaración de la variable con valor undefined por defecto.
console.log(b) //Ejecución del llamado a la consola el valor de b = undefined.
b = 3;      //Asignación del valor b = 3
console.log(b) //Ejecución del llamado a la consola el valor de b = 3

EJEMPLO 3

Escritura de Codigo
nameOfDog('Elmo');
function nameOfDog(name) {
    console.log(name);
}

Interpretaciónde JavaScript
function nameOfDog(name) { 
    console.log(name);
}       // Guardado de la funcion en el scope actual
nameOfDog('Elmo'); //Asignación de un argumento a una función disponible en el scope