Closures y Ámbito Léxico en JavaScript

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:00

Closures y Ámbito Léxico en JavaScript

Curso de Fundamentos de JavaScript

Clase 25 de 55

Clase 25 / 55

Recursos

Comprender cómo una función puede recordar variables de su entorno exterior, incluso después de haberse ejecutado, es fundamental para escribir código flexible y potente en JavaScript. Esto es exactamente lo que logran los closures, y dominar este concepto marca una diferencia importante en la forma de estructurar aplicaciones.

¿Qué es un closure y cómo se relaciona con el ámbito léxico?

Un closure es una función que tiene acceso a variables de un ámbito externo, incluso después de que esa función externa ya haya terminado de ejecutarse [0:08]. Para comprender esta idea es necesario conocer el ámbito léxico (lexical scope): cuando una función se declara, se crea un ámbito léxico que le permite acceder tanto a sus propias variables como a las de ámbitos superiores [0:22].

En la práctica esto significa que si dentro de una función externa (outer function) se define una función interna (inner function), esta última puede leer y utilizar las variables de la primera.

¿Cómo se ve un closure en código?

El ejemplo más directo consiste en crear una función outerFunction con una variable outerVariable que contiene el texto "I am from Outer function" [0:42]. Dentro de ella se define innerFunction, que ejecuta un console.log de esa variable externa y luego se retorna [1:06].

javascript function outerFunction() { const outerVariable = "I am from Outer function";

function innerFunction() { console.log(outerVariable); }

return innerFunction; }

const closureExample = outerFunction(); closureExample();

Al ejecutar el programa, la consola muestra I am from Outer function [1:50]. Esto confirma que innerFunction accedió a la variable de su función contenedora, y eso es precisamente un closure.

¿Por qué hay que tener cuidado con el uso de memoria?

Los closures conservan referencias a las variables externas, lo que implica consumo de memoria. Para ilustrarlo se crea una función createCounter con una variable count inicializada en cero [2:16]. Internamente retorna una función que incrementa count con count++ y lo imprime con console.log [2:32].

javascript function createCounter() { let count = 0;

return function () { count++; console.log(count); }; }

const counterA = createCounter(); counterA(); // 1 counterA(); // 2

const counterB = createCounter(); counterB(); // 1

Cada llamada a createCounter genera un ámbito léxico independiente [3:15]. Por eso counterA llega a 2 mientras counterB arranca en 1: cada instancia almacena su propio valor de count en memoria. Esto demuestra que, aunque los closures son muy útiles, conviene no abusar de ellos para evitar un consumo excesivo de recursos [3:30].

¿Cómo manejar diferentes contextos con closures?

Otro uso práctico es generar funciones con contextos distintos a partir de una misma estructura. Se crea una función other con una variable message que contiene "Hello, " [3:50]. Dentro se define inner, que recibe un parámetro name y lo concatena con el mensaje externo [4:18].

javascript function other() { const message = "Hello, ";

function inner(name) { console.log(message + name); }

return inner; }

const closureA = other(); const closureB = other();

closureA("Alice"); // Hello, Alice closureB("Bob"); // Hello, Bob

Al ejecutar se obtiene Hello, Alice y Hello, Bob [5:06]. Cada closure mantiene su propio contexto pero comparte la misma lógica interna, lo que permite crear funciones flexibles y reutilizables.

¿Qué ventajas ofrecen los closures en la práctica?

Permiten trabajar con diferentes ámbitos dentro de una misma estructura de funciones.
Facilitan la creación de funciones que recuerdan estado entre ejecuciones, como contadores o acumuladores.
Hacen posible generar múltiples contextos a partir de una sola función base, personalizando el comportamiento con parámetros.
Su uso debe ser consciente y medido, ya que cada closure retiene referencias en memoria que no se liberan automáticamente [5:30].

Si ya has experimentado con closures en tus proyectos o tienes dudas sobre cómo aplicarlos de forma eficiente, comparte tu experiencia en los comentarios.

Eduardo Reyes

Hace 23 días

Closures (Clausuras) — Explicación completa

El concepto central

Un closure es cuando una función "recuerda" las variables del lugar donde fue creada, incluso después de que ese lugar ya terminó de ejecutarse y, en teoría, debería haber desaparecido.

Es la consecuencia directa de todo lo que ya vimos con lexical scope: una función siempre tiene acceso a las variables del scope donde fue escrita. Un closure es simplemente ese acceso, pero "congelado" y llevado hacia afuera, sobreviviendo más allá de la vida normal de esas variables.

Ejemplo 1: El caso básico

function outerFunction() {
	let outerVariable = "I am from the outer function";
	function innerFunction() {
		console.log(outerVariable);
	}
	return innerFunction;
}

const clousureExample = outerFunction();
clousureExample(); // "I am from the outer function"

¿Qué pasa paso a paso?

Llamas a outerFunction(). Se crea la variable outerVariable dentro de su scope.
outerFunction retorna innerFunction (sin ejecutarla, solo la referencia a la función).
Normalmente pensarías: "cuando outerFunction termina, outerVariable debería desaparecer, porque era una variable local de esa función".
Pero no desaparece. Porque innerFunction la "necesita" (tiene una referencia a ella en su código), JavaScript mantiene outerVariable viva en memoria, atada a innerFunction.
clousureExample ahora es innerFunction, cargando consigo ese "mochila" con outerVariable adentro.
Cuando llamas clousureExample(), aunque outerFunction ya terminó hace rato, innerFunction todavía puede leer outerVariable.

Esa "mochila" que la función se lleva es el closure.

Ejemplo 2: Estado privado y contador

function createCounter() {
	let count = 0;
	return function () {
		count++;
		console.log(`Current count: ${count}`);
	};
}

const counterA = createCounter();
counterA(); // Current count: 1
counterA(); // Current count: 2

const counterB = createCounter();
counterB(); // Current count: 1

Este ejemplo es clave porque muestra dos cosas nuevas:

A) El closure no solo lee, también puede modificar la variable

Cada vez que llamas counterA(), se ejecuta count++. Esa variable count sigue viva entre llamadas — no se reinicia. El closure guarda una referencia real a la variable, no una copia congelada de su valor.

B) Cada llamada a createCounter() crea un closure NUEVO e independiente

const counterA = createCounter(); // crea SU PROPIA variable "count" (empieza en 0)
const counterB = createCounter(); // crea OTRA variable "count", totalmente distinta (empieza en 0)

Piénsalo así: cada vez que ejecutas createCounter(), JavaScript crea una nueva "caja" con su propia count adentro, y te da una función que solo tiene llave a esa caja específica.

createCounter() llamada #1  →  Caja 1: { count: 0 }  →  counterA tiene la llave de la Caja 1
createCounter() llamada #2  →  Caja 2: { count: 0 }  →  counterB tiene la llave de la Caja 2

Por eso counterA() dos veces da 1, 2 — pero counterB() empieza en 1 de nuevo, no en 3. Son cajas completamente separadas, aunque vengan de la misma función createCounter.

Esto es exactamente cómo se logra "estado privado" en JavaScript: count no es accesible desde afuera directamente (no puedes hacer counterA.count), solo se puede modificar a través de la función que retornó createCounter. Es una forma de encapsulamiento, similar a una variable privada en POO.

Ejemplo 3: Confirmando la independencia con parámetros

function outer() {
	let message = "Hello, ";
	function inner(name) {
		console.log(message + name);
	}
	return inner;
}

const clousureA = outer();
const clousureB = outer();

clousureA("Alice"); // Hello, Alice
clousureB("Bob"); // Hello, Bob

Mismo patrón: outer() se llama dos veces → dos closures independientes, cada uno con su propia copia de message (aunque en este caso message nunca cambia, cada closure técnicamente tiene la suya).

clousureA e clousureB son ambos funciones inner, pero cada una "recuerda" el message de su propia ejecución de outer(). Por eso name (el parámetro, que sí cambia en cada llamada) se combina correctamente con el message correspondiente a cada closure.

Analogía para que se te quede grabado

Imagina que outerFunction es una fábrica de mochilas. Cada vez que la llamas, la fábrica:

Mete algunas cosas dentro de una mochila (las variables locales, como count o message).
Te entrega la mochila ya empacada (la función interna).

Aunque la fábrica cierre después (la función outer termine de ejecutarse), la mochila sigue existiendo y sigue teniendo esas cosas adentro, porque tú la tienes en la mano. Cada vez que llamas a la fábrica, te da una mochila nueva, no la misma de antes.

Regla mental para resumir

Un closure ocurre cuando una función interna usa variables de una función externa, y esa función interna se "escapa" hacia afuera (se retorna, se guarda, se pasa como callback). JavaScript entonces mantiene vivas esas variables externas mientras la función interna las siga necesitando.

Tabla resumen de los 3 ejemplos

EjemploQué demuestra

outerFunction / innerFunction

El closure "recuerda" variables aunque la función externa ya terminó

createCounter

El closure puede modificar el valor, y cada llamada crea un closure independiente

outer / inner

Confirma que closures distintos no comparten memoria entre sí, cada uno tiene su propia copia.

Comentarios (50)50 comentarios

Dymon Zamora

Hace 2 años

Yo en la Clase:

giovanny.calderon

🤣

José Antonio De La Paz Fonseca

Estoy igual jaja

Jafeth Jesús Sánchez Sánchez

¿Qué es un closure en JavaScript?

Un closure es cuando una función "recuerda" el entorno o contexto en el que fue creada, incluso después de que la función haya terminado de ejecutarse. Es como si guardara una pequeña "memoria" de las variables que estaban en su alcance cuando se creó.

¿Cómo se utiliza?

Se usa mucho en JavaScript cuando queremos que una función interna tenga acceso a las variables de una función externa, incluso después de que la función externa haya finalizado. Nos ayuda a mantener el estado de ciertas variables sin exponerlas a todo el programa, lo que mejora la seguridad del código.

¿Por qué es importante?

Control del estado: Permite que las funciones retengan datos.
Privacidad: Las variables dentro del closure no son accesibles desde afuera, ayudando a encapsular la lógica.
Evita colisiones: Puedes evitar que otras partes de tu programa cambien los valores de esas variables.

Ejemplo sencillo:

Imagina que tu mamá te da una caja para guardar tu mesada. Cada vez que recibes dinero, lo metes ahí. Con el tiempo, esa caja sigue recordando cuánto has ahorrado. Tú puedes abrirla y agregar más, pero nadie más puede ver cuánto tienes o tocar tu dinero. Así funcionan los closures: mantienen el dinero (o en nuestro caso, las variables) a salvo y accesibles solo para ti.

function crearCajaDeAhorros() {
  let dinero = 0;  // Esta es la "memoria" o estado de la caja

  return function(agregarDinero) {
    dinero += agregarDinero;
    console.log(`Tienes ahora $${dinero} en tu caja de ahorros.`);
  };
}

const miCaja = crearCajaDeAhorros();  // Creamos una nueva caja
miCaja(50);  // Añadimos $50
miCaja(30);  // Añadimos $30 más

Miguel Jonathan Madrigal González

Bravo, muy buena información y ejemplo, me has ayudado a comprender closure mucho más. Te deseo mucho exitos bro, felicidades.

Diego Fernando Enriquez Bernal

Hace un año

De verdad que tu comentario me ayudo mucho a entender esta clase, mil gracias.

Kevin Vargas Murcia

En programación, un closure, también conocido como clausura o cierre, es una función que recuerda y tiene acceso al entorno en el que se creó, incluso después de que la función externa que la creó haya terminado de ejecutarse.

En otras palabras, un closure es una función que encapsula un dato (que puede ser una variable o un objeto) y recuerda el estado del entorno en el que se definió. Esto permite que la función interna acceda y utilice variables o valores de la función externa, incluso después de que esta haya finalizado.

Juan David Santamaria Gomez

Hemos bajado los índices de ignorancia un poquitico, hemos cumplido!

Cruz Morales Hernández

Le di muchas vueltas a este tema, y con ayuda de un video en YT y ChatGPT generé este pequeño resumen. Espero les sirva y si pueden aportar sería excelente. 👁️ ojo les recomiendo ver el video que dejo al final:

Introducción 🔗

Si estás aprendiendo JavaScript, es posible que hayas oído hablar de los closures (o cierres). Aunque suena complicado, en realidad es una herramienta muy útil que nos permite recordar valores incluso después de que una función haya terminado de ejecutarse.

¿Qué es un Closure?

Un closure ocurre cuando una función dentro de otra función recuerda las variables de la función externa, incluso después de que esta última haya finalizado.

Un closure tiene estas características:

Es una función dentro de otra función.
Utiliza variables de la función que la contiene.
Puede ejecutarse desde otro lugar y seguir recordando esas variables.

Ejemplo Básico

Imagina que tenemos una función que almacena un mensaje y otra función dentro de ella que lo muestra:

function crearSaludo() {
    let mensaje = "¡Hola!";
    
    function mostrarSaludo() {
        console.log(mensaje);
    }
    
    return mostrarSaludo;
}

const saludo = crearSaludo();
saludo(); // Salida: "¡Hola!"
```Aquí, la función `mostrarSaludo` sigue recordando la variable `mensaje`, aunque `crearSaludo` ya terminó su ejecución.

### ¿Para qué se usan los Closures?

Los closures son muy útiles en diferentes situaciones:

1. **Proteger variables**
   * Evitan que otros puedan modificar datos importantes sin permiso.
2. **Crear funciones personalizadas**
   * Podemos hacer funciones que generen otras funciones con configuraciones específicas.
3. **Trabajar con eventos y asincronía**
   * Ayudan a recordar valores en temporizadores (`setTimeout`, `setInterval`) y eventos.
4. **Mejorar el rendimiento**
   * Permiten almacenar resultados de funciones para no recalcular lo mismo varias veces.

### Ejemplo Práctico

Un contador que recuerda su número sin usar variables globales:

```js
function contador() {
    let cuenta = 0;
    return function() {
        cuenta++;
        console.log(cuenta);
    };
}

const miContador = contador();
miContador(); // Salida: 1
miContador(); // Salida: 2
miContador(); // Salida: 3
```Aquí, cada vez que ejecutamos `miContador()`, la función sigue recordando el valor de `cuenta`.

### Conclusión

Los closures en JavaScript son una forma poderosa de trabajar con funciones y datos. Te permiten recordar valores, crear código más seguro y reutilizable, y son clave para entender el lenguaje de manera más profunda.

📽️ LINK: 21. CLAUSURAS (Closures) EN JAVASCRIPT

Gustavo Guillermo Alonso

muchas gracias! la verdad que no habia entendido nada con este video, se agradece muchisimo el aporte

Juan Manuel Bustos Carvajal

Muchas gracias hermano, esta vez entendí más con este comentario

SARA ACUÑA BENAVIDES

Para entender mejor

Juan Miguel Garcia Moreno

Sara! Haz compartido ORO sin ningun tipo de interes!

Gracias miles! Tremendo aporte!

Stiven Alvarez

Yo al principio no entendi nada, pero ya al final de la clase segui sin entender nada :'v

Matias Ezequiel Rivero

Pero nunca se ejecuta el closureB ? En ambos casos ejecuta el closureA. De igual manera imagino que el resultado devuelto es el mismo.

DAVID SANTIAGO CORREA MORALES

  function createCounter(){ 
    let count=0     
      return function() {
        count++       
        console.log(count)   
      }
  }    
  const counterA = createCounter()   
      counterA()  
      counterA()
   const counterB=createCounter()
      counterB()
```quiero suponer que es porque nosotros estamos generando lo datos (nombres) a nuestro antojo, pero como puedes ver en el codigo de "counterA" le decimos que sume de a uno por eso en la consola sale 1 2 y al no tener mas "counterA" pasa al "counterB" volviendo al 1, lo cual en la consola sale 1 2 1

Smith F

tal cual, no me gusta que no haya un quality check o correcciones antes de publicar el video, uno ve que solo improvisan sobre la marcha

Anthony Utrera

¿Cómo la función "interna" sabe que debe tomar como parámetros los datos suministrados a "closureA" y "closureB"?.

Juan Diego Caro García

Cuando asignamos la función externa a las variables closureA y closureB, estamos creando una nuevo contexto de la función interna que se encuentra dentro de externa. Cuando ejecutamos closureA("Parámetro") o closureB("Parámetro"), estamos llamando a la función interna que se encuentra dentro del contexto de externa. La función interna tiene acceso a las variables de su ámbito superior, incluyendo la variable message y los parámetros que se le pasan.

Para ser más claro, cuando llamamos a closureA() o closureB() estamos llamando a la función interna que se encuentra dentro de la función externa, y estamos pasando los parámetro a esa función interna.

Como explica Juan Diego Caro García, solo agrego: que las variables closureA y closureB es como si se guardara la función interna por eso reciben el argumento sin problemas. Y tener en cuenta que la función externa retorna la función interna. Espero que ayude la explicación.

Jesús Patricio Pereira Matus

Un closure es como una función con un dato privado que solo puede ser modificado por funciones internas. Si haces lo mismo sin función, estás dejando ese dato expuesto al resto del programa.

Diego Andrés Lopez Rodriguez

Hace un año•editado

No entendi nada del segundo ejemplo...

El primerito estuvo MELO-Caramelo!

Pero el segundo, me genera un Buffering en el craneo...

Y por el contrario, el tercero, peor, no tengo ni la mas minima idea de como seria

Juan Miguel Jimenez

Hace 10 meses

Tranquilo tocayo, me paso igual, pero con paciencia y leyendolo bien, escuchando la explicación de la profe varias veces lo entendí En el segundo la función createCounter devuelve una función anonima, esa función anonima al momento de crearse counterA en la línea const counterA = createCounter()"le tira una foto al ambito" y guarda las variables como estaban en ese momento. luego cuando la ejecutas counterA() es como si tuvieras a la función anonima más la variable count que guardó del ámbito

Ivan Oliver Morales González

Un closure es cuando una función recuerda variables del lugar donde fue creada. Si hago const countA = createCounter(), se crea un entorno propio con su count. Al llamar countA(), solo corre la función interna usando el mismo count (no se reinicia). Puedo crear varios entornos independientes: const countA = createCounter(); const countB = createCounter(); … Cada uno lleva su propio count.

Analogía: es como abrir varias pestañas del IDE (countA, countB…), cada pestaña guarda sus variables y las va actualizando cuando la ejecutas.

Jorge Ivan Martinez Guerra

Esta si no entendí nada

Closure y contexto local no son lo mismo, aunque están relacionados. Un closure es una función que recuerda el entorno en el que fue creada, lo que incluye variables de un contexto local, incluso después de que el contexto haya terminado su ejecución. El contexto local se refiere simplemente al alcance de las variables dentro de una función específica. En resumen, un closure permite acceder a variables de un contexto local después de que la función ha finalizado, lo que no ocurre con el contexto local por sí solo.

Carlos Enrique Rocha Zamudio

Jorge Luis Moreno Ortiz

Desde que estoy en Platzi nunca me había confundido tanto en una clase, no entendí nada, creo que no fue la mejor clase de la profe lo bueno es que me toco investigar por mis medios.

José Miguel Vásquez Guerra

Es que fue muy rápido, no se detuvo a explicar o de repente asumió que todos ya somos expertos.

Juliana Rios

Calvin Rafael Bobadilla Fernandez

NOTAS (o resumen wtv):

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Closures y Ámbito Léxico en JavaScript