JavaScript
Tutorial JavaScript: Funciones cierre (closure)
JavaScript closures: definición y ejemplos. Aprende a usar closures en JavaScript con ejemplos prácticos y detallados.
Aprende JavaScript GRATIS y certifícateLas funciones de cierre, o closures, son uno de los conceptos fundamentales en JavaScript que permiten a los desarrolladores controlar el alcance y la vida útil de las variables y otras características. Un closure es una función que captura y recuerda el entorno en el que fue creada, incluso cuando se llama en un entorno diferente. En otras palabras, un closure permite "recordar" y mantener acceso al ámbito léxico de la función incluso después de que la función haya sido invocada fuera de su ámbito original:
function creaSumador(x) {
return function(y) {
return x + y;
};
}
const suma5 = creaSumador(5);
const suma10 = creaSumador(10);
console.log(suma5(3)); // Devuelve 8
console.log(suma10(3)); // Devuelve 13
En el ejemplo anterior, la función creaSumador
devuelve una nueva función que toma un argumento y
y lo suma con el argumento x
del ámbito superior. La función anónima devuelta por creaSumador
es un closure porque retiene el acceso al ámbito léxico de su función de contención, aunque se ejecute en un ámbito diferente más adelante. En este caso, incluso después de que la función creaSumador
haya devuelto su valor, la función anónima interna aún tiene acceso a la variable x
y su valor. Gracias a esto, pueden crearse sumadores específicos (como suma5
o suma10
) que recuerdan su contexto original y funcionan correctamente fuera de su ámbito léxico inicial.
Analizando con más profundidad la estructura del closure:
- Cuando se invoca la función
creaSumador()
, se crea un nuevo entorno de ejecución que tiene su propio ámbito léxico. - En este ámbito léxico, se crea la variable
x
con el valor suministrado al llamar a la funcióncreaSumador()
. Por ejemplo, cuando se llama acreaSumador(5)
, la variablex
en ese ámbito específico tiene el valor5
. - La función
creaSumador
retorna una función anónima que acepta un argumentoy
y suma el valor dex
yy
. Puesto que la función anónima está siendo creada dentro del ámbito léxico decreaSumador
, tiene acceso a las variables de la función exterior, incluida la variablex
. - Cuando se llama a la función anónima devuelta por
creaSumador
, esta función aún conserva el acceso a la variablex
y su valor del ámbito léxico original donde fue creada la función, incluso si esta función anónima se llama en un ámbito diferente. Esto es lo que permite que las funcionessuma5
ysuma10
funcionen correctamente con sus respectivos valores dex
.
Otro ejemplo de closure para ayudar a entender mejor el concepto:
function creaContador() {
let contador = 0;
return function() {
contador++;
return contador;
};
}
const miContador = creaContador();
console.log(miContador()); // Devuelve 1
console.log(miContador()); // Devuelve 2
console.log(miContador()); // Devuelve 3
En este ejemplo:
- La función
creaContador
crea un entorno de ejecución con su propio ámbito léxico. En este ámbito, se crea e inicializa la variablecontador
con el valor0
. creaContador
devuelve una función anónima que incrementa el valor decontador
en1
y devuelve el valor actualizado decontador
cada vez que se llama.- La función anónima devuelta es un closure, ya que puede acceder al ámbito léxico que contiene la variable
contador
, incluso cuando se ejecuta fuera de su entorno original. - Cuando se asigna la función anónima a la variable
miContador
y luego se invocamiContador()
, se llama a la función anónima y la variablecontador
interna se incrementa y conserva su estado a través de subsiguientes llamadas.
Es importante destacar que los closures permiten ocultar y encapsular información, proporcionando una especie de "ámbito privado" al aislar ciertas variables del ámbito global y limitar su acceso únicamente a la función interna. De esta manera, se evitan colisiones de nombres y se protegen datos sensibles que no deben ser accesibles de manera externa.
En resumen, las funciones de cierre o closures en JavaScript son un concepto fundamental que permite a los desarrolladores controlar el alcance de las variables y mantener el acceso a su entorno léxico original, incluso cuando se ejecutan en un ámbito diferente. Los closures también son útiles para preservar el estado entre llamadas a funciones, encapsular información y proporcionar privacidad en el código.
Ejercicios de esta lección Funciones cierre (closure)
Evalúa tus conocimientos de esta lección Funciones cierre (closure) con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Funciones flecha
Polimorfismo
Array
Transformación con map()
Introducción a JavaScript
Gestor de tareas con JavaScript
Manipulación DOM
Funciones
Funciones flecha
Async / Await
Creación y uso de variables
Excepciones
Promises
Funciones cierre (closure)
Herencia
Herencia
Estructuras de control
Selección de elementos DOM
Modificación de elementos DOM
Filtrado con filter() y find()
Funciones cierre (closure)
Funciones
Mapas con Map
Reducción con reduce()
Callbacks
Manipulación DOM
Promises
Async / Await
Eventos del DOM
Async / Await
Promises
Filtrado con filter() y find()
Callbacks
Creación de clases y objetos Restaurante
Reducción con reduce()
Filtrado con filter() y find()
Reducción con reduce()
Conjuntos con Set
Herencia de clases
Eventos del DOM
Clases y objetos
Modificación de elementos DOM
Mapas con Map
Funciones
Tipos de datos
Clases y objetos
Array
Conjuntos con Set
Array
Encapsulación
Clases y objetos
Uso de operadores
Uso de operadores
Estructuras de control
Excepciones
Transformación con map()
Funciones flecha
Selección de elementos DOM
Encapsulación
Mapas con Map
Creación y uso de variables
Polimorfismo
Tipos de datos
Estructuras de control
Todas las lecciones de JavaScript
Accede a todas las lecciones de JavaScript y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Javascript
Sintaxis
Tipos De Datos
Sintaxis
Variables
Sintaxis
Operadores
Sintaxis
Estructuras De Control
Sintaxis
Funciones
Sintaxis
Funciones Cierre (Closure)
Sintaxis
Funciones Flecha
Programación Funcional
Filtrado Con Filter() Y Find()
Programación Funcional
Transformación Con Map()
Programación Funcional
Reducción Con Reduce()
Programación Funcional
Clases Y Objetos
Programación Orientada A Objetos
Excepciones
Programación Orientada A Objetos
Encapsulación
Programación Orientada A Objetos
Herencia
Programación Orientada A Objetos
Polimorfismo
Programación Orientada A Objetos
Array
Estructuras De Datos
Conjuntos Con Set
Estructuras De Datos
Mapas Con Map
Estructuras De Datos
Manipulación Dom
Dom
Selección De Elementos Dom
Dom
Modificación De Elementos Dom
Dom
Eventos Del Dom
Dom
Callbacks
Programación Asíncrona
Promises
Programación Asíncrona
Async / Await
Programación Asíncrona
Certificados de superación de JavaScript
Supera todos los ejercicios de programación del curso de JavaScript y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender el concepto de closures y su importancia en JavaScript.
- Conocer cómo se crea un closure y cómo retiene el acceso a su ámbito léxico original.
- Aprender a utilizar closures para crear funciones con contextos específicos y mantener la privacidad de ciertas variables.
- Entender cómo los closures pueden ser útiles para preservar el estado entre llamadas a funciones y permitir una programación más modular y reutilizable.