JavaScript

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ícate

Las 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:

  1. Cuando se invoca la función creaSumador(), se crea un nuevo entorno de ejecución que tiene su propio ámbito léxico.
  2. En este ámbito léxico, se crea la variable x con el valor suministrado al llamar a la función creaSumador(). Por ejemplo, cuando se llama a creaSumador(5), la variable x en ese ámbito específico tiene el valor 5.
  3. La función creaSumador retorna una función anónima que acepta un argumento y y suma el valor de x y y. Puesto que la función anónima está siendo creada dentro del ámbito léxico de creaSumador, tiene acceso a las variables de la función exterior, incluida la variable x.
  4. Cuando se llama a la función anónima devuelta por creaSumador, esta función aún conserva el acceso a la variable x 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 funciones suma5 y suma10 funcionen correctamente con sus respectivos valores de x.

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:

  1. La función creaContador crea un entorno de ejecución con su propio ámbito léxico. En este ámbito, se crea e inicializa la variable contador con el valor 0.
  2. creaContador devuelve una función anónima que incrementa el valor de contador en 1 y devuelve el valor actualizado de contador cada vez que se llama.
  3. 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.
  4. Cuando se asigna la función anónima a la variable miContador y luego se invoca miContador(), se llama a la función anónima y la variable contador 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.

Aprende JavaScript GRATIS online

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

JavaScript
Puzzle

Polimorfismo

JavaScript
Test

Array

JavaScript
Código

Transformación con map()

JavaScript
Test

Introducción a JavaScript

JavaScript
Test

Gestor de tareas con JavaScript

JavaScript
Proyecto

Manipulación DOM

JavaScript
Test

Funciones

JavaScript
Test

Funciones flecha

JavaScript
Código

Async / Await

JavaScript
Código

Creación y uso de variables

JavaScript
Test

Excepciones

JavaScript
Puzzle

Promises

JavaScript
Código

Funciones cierre (closure)

JavaScript
Test

Herencia

JavaScript
Puzzle

Herencia

JavaScript
Test

Estructuras de control

JavaScript
Código

Selección de elementos DOM

JavaScript
Test

Modificación de elementos DOM

JavaScript
Test

Filtrado con filter() y find()

JavaScript
Test

Funciones cierre (closure)

JavaScript
Puzzle

Funciones

JavaScript
Puzzle

Mapas con Map

JavaScript
Test

Reducción con reduce()

JavaScript
Test

Callbacks

JavaScript
Puzzle

Manipulación DOM

JavaScript
Puzzle

Promises

JavaScript
Test

Async / Await

JavaScript
Test

Eventos del DOM

JavaScript
Puzzle

Async / Await

JavaScript
Puzzle

Promises

JavaScript
Puzzle

Filtrado con filter() y find()

JavaScript
Código

Callbacks

JavaScript
Test

Creación de clases y objetos Restaurante

JavaScript
Código

Reducción con reduce()

JavaScript
Código

Filtrado con filter() y find()

JavaScript
Puzzle

Reducción con reduce()

JavaScript
Puzzle

Conjuntos con Set

JavaScript
Puzzle

Herencia de clases

JavaScript
Código

Eventos del DOM

JavaScript
Test

Clases y objetos

JavaScript
Puzzle

Modificación de elementos DOM

JavaScript
Puzzle

Mapas con Map

JavaScript
Puzzle

Funciones

JavaScript
Código

Tipos de datos

JavaScript
Test

Clases y objetos

JavaScript
Test

Array

JavaScript
Test

Conjuntos con Set

JavaScript
Test

Array

JavaScript
Puzzle

Encapsulación

JavaScript
Puzzle

Clases y objetos

JavaScript
Código

Uso de operadores

JavaScript
Puzzle

Uso de operadores

JavaScript
Test

Estructuras de control

JavaScript
Test

Excepciones

JavaScript
Test

Transformación con map()

JavaScript
Puzzle

Funciones flecha

JavaScript
Test

Selección de elementos DOM

JavaScript
Puzzle

Encapsulación

JavaScript
Test

Mapas con Map

JavaScript
Código

Creación y uso de variables

JavaScript
Puzzle

Polimorfismo

JavaScript
Puzzle

Tipos de datos

JavaScript
Puzzle

Estructuras de control

JavaScript
Puzzle

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.

Accede GRATIS a JavaScript y certifícate

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

  1. Comprender el concepto de closures y su importancia en JavaScript.
  2. Conocer cómo se crea un closure y cómo retiene el acceso a su ámbito léxico original.
  3. Aprender a utilizar closures para crear funciones con contextos específicos y mantener la privacidad de ciertas variables.
  4. 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.