JavaScriptLección 12 de 16

Closures

Una función de JavaScript recuerda las variables del lugar donde se creó, incluso cuando la función exterior ya terminó. Eso es un closure (clausura): una forma de dar a una función su propia memoria privada.

Lo esencial

Una función interior ve las variables de la exterior y conserva el acceso a ellas
Cada llamada a la función exterior crea una memoria nueva y separada
Desde fuera no se llega a esas variables, así que los datos quedan privados
Una fábrica de funciones: makeGreeter("Hello") devuelve una función de saludo lista
Contadores, cachés, once y manejadores de eventos se apoyan en closures

Ejemplo

function createCounter() {  let count = 0;  return () => {    count += 1;    return count;  };} const next = createCounter();console.log(next(), next(), next()); const other = createCounter();console.log(other()); const makeGreeter = (greeting) => (name) => `${greeting}, ${name}!`;const hello = makeGreeter("Hello");console.log(hello("Max"));

next recuerda su propio count y lo sube en cada llamada. other se creó aparte, así que empezó en 1. makeGreeter devolvió una función que recordó la palabra Hello.

Tarea

Cómo usar el editor⌘ Enter o Ctrl Enter ejecuta el código, ⇧ ⌘ Enter comprueba la tarea.Tab y Mayús Tab sangran la línea o la selección; Esc y luego Tab sale del editor.La comprobación compara lo que imprimió el programa con la tarea; los espacios al final de línea no cuentan.Tras dos comprobaciones fallidas puedes ver la solución. Tu código se guarda en este navegador.

Completa la hucha: add(amount) suma a balance y devuelve el saldo nuevo, y total() devuelve balance. Después escribe once(fn): devuelve una función que ejecuta fn solo la primera vez. Salida: Mia: 20, Leo: 3 y From outside: undefined.

// Piggy banks: the balance is private, only add() and total() can reach itfunction createPiggyBank() {  let balance = 0;  return {    add(amount) {      // TODO: add amount to balance and return the new balance      return amount;    },    total() {      // TODO: return the balance      return 0;    },  };} // TODO: once(fn) returns a new function that runs fn only the first timefunction once(fn) {  return fn;} const mia = createPiggyBank();const leo = createPiggyBank();mia.add(10);mia.add(5);leo.add(3); const welcomeBonus = once(() => mia.add(5));welcomeBonus();welcomeBonus(); console.log(`Mia: ${mia.total()}`);console.log(`Leo: ${leo.total()}`);console.log(`From outside: ${mia.balance}`);

// Piggy banks: the balance is private, only add() and total() can reach it
function createPiggyBank() {
  let balance = 0;
  return {
    add(amount) {
      // TODO: add amount to balance and return the new balance
      return amount;
    },
    total() {
      // TODO: return the balance
      return 0;
    },
  };
}

// TODO: once(fn) returns a new function that runs fn only the first time
function once(fn) {
  return fn;
}

const mia = createPiggyBank();
const leo = createPiggyBank();
mia.add(10);
mia.add(5);
leo.add(3);

const welcomeBonus = once(() => mia.add(5));
welcomeBonus();
welcomeBonus();

console.log(`Mia: ${mia.total()}`);
console.log(`Leo: ${leo.total()}`);
console.log(`From outside: ${mia.balance}`);

Salida

Aquí aparecerá lo que imprima el programa.