0Pricing
JavaScript Academy · Lección

Cómo las clausuras capturan el estado

Comprenda el entorno léxico de las clausuras.

Cómo las clausuras capturan el estado es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Qué es una clausura

Una clausura es una función agrupada junto con referencias a las variables del ámbito donde se definió. La función interna «recuerda» esas variables incluso después de que la función externa haya terminado.

function outer() {
  const message = "hello";
  function inner() {
    console.log(message); // sees outer variable
  }
  inner();
}
outer(); // "hello"

Devolver la función interna

La parte interesante aparece cuando devuelve la función interna. Esta conserva el acceso a la variable externa aunque outer ya haya terminado de ejecutarse.

function outer() {
  const message = "remembered";
  return function () {
    console.log(message);
  };
}
const fn = outer();
fn(); // "remembered"

Ámbito léxico

Las clausuras funcionan gracias al ámbito léxico: una función puede acceder a las variables definidas en los ámbitos que la rodean físicamente en el código fuente, no en el lugar desde el que se llama.

const x = 10;
function show() {
  console.log(x); // resolves where defined
}
function run() {
  const x = 99;
  show(); // still logs 10, not 99
}
run();

Capturar por referencia

Una clausura captura la variable en sí, no una instantánea de su valor. Si la variable cambia posteriormente, la clausura ve el nuevo valor.

function make() {
  let count = 0;
  const get = () => count;
  count = 5; // changed after get defined
  return get;
}
console.log(make()()); // 5

Cada llamada crea un ámbito nuevo

Cada invocación de la función externa crea un conjunto nuevo de variables. Las clausuras de llamadas distintas no comparten estado.

function counter() {
  let n = 0;
  return () => ++n;
}
const a = counter();
const b = counter();
console.log(a(), a()); // 1 2
console.log(b());      // 1 (independent)

Clausuras sobre parámetros

Los parámetros de las funciones también se capturan. Esto le permite crear funciones especializadas a partir de una función general.

function adder(x) {
  return (y) => x + y;
}
const add5 = adder(5);
console.log(add5(3));  // 8
console.log(add5(10)); // 15

La trampa clásica de los bucles

Un error famoso: usar var en un bucle comparte una sola variable entre todas las clausuras. Cuando se ejecutan, el bucle ya ha terminado y todas ven el valor final.

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 3 3 3

Cómo solucionarlo con let

let crea una vinculación nueva en cada iteración, por lo que cada clausura captura su propio i. Esta es la solución moderna.

const fns = [];
for (let i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 0 1 2

Las clausuras mantienen viva la memoria

Mientras exista una clausura, las variables que captura no se pueden recolectar. Normalmente esto no supone un problema, pero puede provocar fugas si conserva las clausuras más tiempo del necesario.

function make() {
  const big = new Array(3).fill("data");
  return () => big.length;
}
const f = make();
console.log(f()); // 3 - big stays in memory via f

Las clausuras están en todas partes

Las devoluciones de llamada, los controladores de eventos, setTimeout, los métodos de arrays y las promesas dependen de las clausuras para recordar el contexto. Las utiliza constantemente, a menudo sin darse cuenta.

function greet(name) {
  return () => console.log("Hi " + name);
}
[greet("Ada"), greet("Bob")].forEach((fn) => fn());
// Hi Ada
// Hi Bob

Inspección del estado capturado

Varias clausuras de la misma llamada comparten las mismas variables capturadas, por lo que una puede leer lo que otra escribe.

function pair() {
  let value = 0;
  return {
    set: (v) => { value = v; },
    get: () => value
  };
}
const p = pair();
p.set(42);
console.log(p.get()); // 42

Comprobación rápida

Cómo capturan estado las clausuras.

Resumen

Una clausura es una función más referencias a su ámbito de definición. Gracias al ámbito léxico, recuerda las variables externas después de que la función externa devuelve el control y las captura por referencia, no por valor. Cada llamada externa crea un ámbito independiente; utilice let para evitar la trampa de los bucles. Las clausuras mantienen viva la memoria capturada y hacen posibles las devoluciones de llamada en todas partes.

Preguntas frecuentes

¿La lección «Cómo las clausuras capturan el estado» es gratis?

Sí — el texto completo de «Cómo las clausuras capturan el estado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Cómo las clausuras capturan el estado»?

Comprenda el entorno léxico de las clausuras. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Cómo las clausuras capturan el estado»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Cómo las clausuras capturan el estado
  2. Variables privadas con clausuras
  3. Patrón de módulo (IIFE)
  4. Funciones de fábrica
← Volver a JavaScript Academy