Lección 1 · 1 de 20

Ámbito y clausuras · JavaScript

Aprenda qué es el ámbito de una variable en JavaScript y cómo una clausura recuerda datos privados entre llamadas, con contadores de pedidos.

JavaScript · Ámbito y clausuras en DMarlon Studio: el código del ejemplo y su salida en la terminal

Cada función crea su propio ámbito: las variables declaradas dentro solo existen ahí. En el ejemplo, count vive dentro de createCounter y, desde fuera, typeof count da undefined: el resto del programa no la ve.

Lo interesante es que createCounter devuelve otra función, next, que sigue usando count aunque createCounter ya haya terminado. Eso es una clausura: la función interna conserva el ámbito donde nació. Cada llamada a createCounter crea un ámbito nuevo; por eso nextOrder y nextInvoice llevan cuentas separadas (Order #3 frente a Invoice #1).

let y const tienen ámbito de bloque: en un bucle for, let i crea una variable nueva en cada vuelta. Cada flecha guardada en tasks recuerda su propia i, así que salen task 1, task 2, task 3. Con el antiguo var, las tres compartirían la misma variable y escribirían task 4 tres veces.

Las clausuras sirven también para fabricar funciones ya configuradas: makeDiscount(0.3) devuelve una función que recuerda el 30 % de descuento y lo aplica a cada precio que recibe. Es la base de patrones que verá más adelante en este curso, como la memoización o el patrón módulo.

Código · main.js

// Each call to createCounter gets its own private "count".function createCounter(label) {  let count = 0; // lives on inside the closure  return function next() {    count += 1;    return `${label} #${count}`;  };}const nextOrder = createCounter("Order");const nextInvoice = createCounter("Invoice");console.log(nextOrder());console.log(nextOrder());console.log(nextInvoice());console.log(nextOrder());// Block scope: let creates a new binding on every loop turn.const tasks = [];for (let i = 1; i <= 3; i++) {  tasks.push(() => `task ${i}`);}console.log(tasks.map((run) => run()).join(", "));// A closure can also keep settings, such as a discount rate.function makeDiscount(rate) {  return (price) => +(price * (1 - rate)).toFixed(2);}const blackFriday = makeDiscount(0.3);console.log("Black Friday price:", blackFriday(49.9));console.log("Is count visible here?", typeof count);

Salida · node main.js

Order #1
Order #2
Invoice #1
Order #3
task 1, task 2, task 3
Black Friday price: 34.93
Is count visible here? undefined

Para recordar

Una variable solo existe en el ámbito (función o bloque) donde se declara.
Una clausura es una función que recuerda las variables del ámbito donde se creó.
Cada llamada a la función externa crea un estado privado nuevo.
let crea una variable nueva en cada vuelta del bucle; var, no.

Ejercicio

Cambie createCounter para que devuelva un objeto con dos métodos, next() y reset() (que vuelva a poner count a cero), y compruebe que reiniciar los pedidos no afecta a las facturas.