Closures en JavaScript: un concepto sencillo que marca la diferencia

Autor: | Última modificación: 15 de abril de 2024 | Tiempo de Lectura: 3 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

En este artículo vamos a sumergirnos en el fascinante mundo de JavaScript para hablar de un elemento peculiar que puede marcar la diferencia en tu código: los closures en JavaScript.

Imagina que tienes una función y, dentro de ella, otra función. Cuando esta función interna tiene acceso a las variables de la función externa, hablamos de un closure. Es como si la función interna tuviera un hilo atado al contexto de la función externa, manteniendo siempre una vía de comunicación para acceder a sus variables. Los closures en Javascript se quedan con ese contexto y lo hacen accesible en todo momento.

Closures en JavaScript

¿Qué son los closures en JavaScript?

Los closures en JavaScript, también conocidos como clausuras, son una característica de algunos lenguajes de programación que permiten que una función pueda recordar el entorno en el que fue creada, incluso después de que la función haya terminado de ejecutarse. Esto significa que una función que se define dentro de otra función puede acceder y mantener en su alcance las variables, parámetros y cualquier otro estado presente en el ámbito de la función externa, incluso cuando la función externa ha finalizado su ejecución.

En otras palabras, los closures en Javascript son una función junto con el entorno (ámbito léxico) en el que fue creada. El entorno capturado puede incluir variables locales, funciones y otras referencias que la función closure necesite.

Los closures en JavaScript son útiles en muchas situaciones, especialmente cuando se trabaja con funciones que necesitan mantener algún estado específico entre llamadas o cuando se quieren implementar patrones de diseño, como el módulo en JavaScript.

Cómo funcionan los closures en JavaScript

Para entender mejor cómo funciona un closure, veamos un ejemplo práctico en JavaScript. Imagina que queremos crear una función llamada creaSumador que acepte un número y devuelva otra función que sume ese número al valor que se le pase.

//closures en JavaScript
function creaSumador(numero) {
  return function(valor) {
    return numero + valor;
  }
}

const sumaDiez = creaSumador(10);
console.log(sumaDiez(5)); // Output: 15

En este ejemplo, creaSumador recibe un parámetro numero y devuelve una función anónima que toma otro parámetro valor. Esta función interna tiene acceso al numero del contexto en el que se creó, permitiendo que el closure funcione. Al llamar a creaSumador(10), obtenemos una función que suma 10 a cualquier valor que le pasemos posteriormente.

Utilidad de los closures en JavaScript

Los closures en JavaScript son especialmente útiles cuando trabajamos con programación funcional. Nos permiten crear funciones especializadas que pueden recordar y utilizar datos específicos del contexto en el que fueron creadas. Un caso de uso común es para crear objetos con funciones asociadas. Veamos otro ejemplo:

//closures en JavaScript
function creaVehiculo(nombre) {
  return {
    getNombre: function() {
      return nombre;
    },
    setNombre: function(nuevoNombre) {
      nombre = nuevoNombre;
    },
    saluda: function() {
      console.log(`Hola, soy ${nombre}.`);
    }
  };
}

const coche = creaVehiculo('Seat');
console.log(coche.getNombre()); // Output: Seat

coche.setNombre('Ford');
coche.saluda(); // Output: Hola, soy Ford.

En este ejemplo, la función creaVehiculo crea y devuelve un objeto que tiene tres métodos: getNombre, setNombre y saluda. Cada uno de estos métodos tiene acceso al contexto de nombre gracias al closure, lo que les permite interactuar con esta variable de manera coherente.

Ventajas de los closures en JavaScript

La principal ventaja de los closures en JavaScript es que nos permiten crear funciones más flexibles y reutilizables. Al encapsular variables en el contexto de la función que las crea, evitamos que se contaminen otros ámbitos, lo que resulta en un código más limpio y seguro. Además, el uso adecuado de closures puede llevar a una programación más eficiente y modular.

Closures y el desarrollo web

Si estás interesado en aprender más sobre closures en JavaScript y otros conceptos avanzados de JavaScript, el Desarrollo Web Full Stack Bootcamp de KeepCoding es el lugar perfecto para ti. En este bootcamp, te sumergirás en el apasionante mundo del desarrollo web y te convertirás en un experto en programación y tecnología.

El bootcamp de KeepCoding te ofrece una formación integral que te permitirá entrar en el sector IT en poco tiempo y con las habilidades necesarias para destacar. El sector tecnológico es una industria en constante crecimiento, con una alta demanda de profesionales y salarios atractivos. No pierdas la oportunidad de cambiar tu vida y adentrarte en una carrera emocionante y llena de posibilidades. ¡Accede ahora y pide más información!

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado