Introducción a JavaScript

1

¿Por qué aprender JavaScript?

2

¡Hola Mundo! en Mac

3

¡Hola Mundo! en Windows

4

Anatomía de una variable

5

Tipos de datos en JavaScript

6

Creación de strings

7

Operadores aritméticos

8

Conversión de tipos: Type Casting y Coerción

9

Conversión de tipos explícita e implícita

Estructuras de Control y Lógica

10

Operadores de comparación

11

Operadores lógicos

12

Ejecución condicional: if

13

Ejercicio: Adivina el número

14

Ejecución condicional: switch

15

Loop: for

16

Loop: for of

17

Loop: for in

18

Loop: while

19

Loop: do while

Funciones y This

20

Anatomía de una función

21

Funciones vs Métodos

22

Funciones puras e impuras

23

Arrow function y enlace léxico

24

Contextos de ejecución y scope chain

25

¿Qué es Closure?

26

Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?

Manipulación de Arrays

27

Introducción a Arrays

28

Mutabilidad e inmutabilidad de Arrays

29

Modificación básica del final con push( ), pop( )

30

Iteración con map( ) y forEach( )

31

Filtrado y reducción con filter( ) y reduce( )

32

Búsqueda de elementos con find( ) y findIndex( )

33

Crear copias con slice( )

34

Spread operator: casos de uso

Programación Orientada a Objetos

35

Anatomía de un Objeto

36

Trabajando con objetos en JavaScript

37

Función constructora

38

¿Qué es una clase?

39

Prototipos y herencias

40

Herencia en la práctica

41

Prototipos en la práctica

42

this en JavaScript

43

Proyecto: Crea una red social

44

Proyecto: Crea una red social parte 2

Asincronía en JavaScript

45

¿Cómo funciona el JavaScript Engine?

46

Promesas en JavaScript

47

Usando Async y await en JavaScript

48

For await of

49

¿Cómo funciona la web?

50

¿Cómo funciona HTTP?

51

Método GET en JavaScript

52

Método POST en JavaScript

53

Método DELETE en JavaScript

54

Importancia del id en el método DELETE

55

ECMAScript 6 y tus siguientes pasos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¿Qué es Closure?

25/55
Recursos

¿Qué son los closures?

Los closures son un concepto fundamental en la programación con JavaScript y otras lenguas similares. Básicamente, un closure es una función que tiene acceso a variables de un ámbito externo, incluso después de que esa función ha dejado de ejecutarse. Este comportamiento se debe al ámbito léxico, el cual se define en el momento en que se crea una función. Este ámbito permite que las funciones accedan a variables dentro de su ámbito y a cualquier variable de los ámbitos superiores.

¿Cómo se crean y funcionan los closures?

Para entender la creación de closures, consideremos un ejemplo práctico:

function otherFunction() {
    const otherVariable = "I am from other function";
    
    function innerFunction() {
        console.log(otherVariable);
    }
    
    return innerFunction;
}

const closureExample = otherFunction();
closureExample();

En este ejemplo, innerFunction es un closure porque tiene acceso a otherVariable, que está definida en su ámbito externo, otherFunction. Cuando ejecutamos closureExample(), el programa imprime "I am from other function", demostrando que innerFunction puede acceder a otherVariable a pesar de que otherFunction ya ha finalizado su ejecución.

¿Cuáles son las precauciones al usar closures?

A pesar de que los closures son herramientas poderosas, es esencial usarles con cuidado para evitar problemas de memoria. Al crear closures, cada función interna que retorna tendrá su propio ámbito léxico, lo que puede requerir más memoria si no se gestiona correctamente.

Observemos el siguiente ejemplo con un contador:

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

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

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

Aquí, cada llamada a createCounter crea un nuevo closure con su propio ámbito count. Los valores de count son independientes entre counterA y counterB, mostrando que cada closure mantiene su propio estado.

¿Cómo manejar diferentes contextos con closures?

Los closures también permiten trabajar con diferentes contextos, ofreciendo flexibilidad en el manejo de funciones:

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

const closureA = order();
closureA("Alicia"); // Hello, Alicia
closureA("Bob");    // Hello, Bob

En este caso, la función inner retorna un saludo personalizado, usando el contexto compartido de order para formar el mensaje completo. Esto demuestra cómo los closures pueden usarse para crear funciones flexibles que acceden y manipulan datos en diferentes contextos.

En resumen, los closures ofrecen una poderosa capacidad para gestionar ámbitos y mantener estados privados en JavaScript, pero se debe ser cuidadoso para no incurrir en problemas de memoria. Con una comprensión adecuada, podemos utilizar esta característica para escribir código eficiente y flexible. ¡Sigue explorando y practicando para perfeccionar tus habilidades con closures y otros conceptos avanzados!

Aportes 24

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Yo en la Clase: ![](https://static.platzi.com/media/user_upload/image-e8b486cb-5dc6-4cf8-bd7c-7db314358670.jpg)
**¿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?** 1. **Control del estado**: Permite que las funciones retengan datos. 2. **Privacidad**: Las variables dentro del closure no son accesibles desde afuera, ayudando a encapsular la lógica. 3. **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. ```js 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 ``` ![](https://static.platzi.com/media/user_upload/1_QgJDPOW-e39V-ZzTl2F2gA-29f5cad0-990d-40fd-8162-24df3ab3d638.jpg)
**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.
Hemos bajado los *índices de ignorancia* un poquitico, hemos cumplido!
¿Cómo la función "interna" sabe que debe tomar como parámetros los datos suministrados a "closureA" y "closureB"?. ![](https://static.platzi.com/media/user_upload/image-c8d9f1be-550f-4671-8ff5-62195c037669.jpg)
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: ```js 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](https://www.youtube.com/watch?v=JXG_gQ0OF74\&ab_channel=LaCocinadelC%C3%B3digo)
Pero nunca se ejecuta el closureB ? En ambos casos ejecuta el closureA. De igual manera imagino que el resultado devuelto es el mismo.
![]()![](https://static.platzi.com/media/user_upload/image-f0368a9f-1399-44e5-a0f7-234d0cdf012b.jpg)
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.
![](https://static.platzi.com/media/user_upload/image-be881593-e6df-4664-a547-7ebe2812a06b.jpg) ![](https://static.platzi.com/media/user_upload/image-a0ae2cea-d7a2-4813-9336-a1922b3f34f6.jpg) ![](https://static.platzi.com/media/user_upload/image-d678bbfa-aaa0-43c2-8435-6e902e613d23.jpg)
NOTAS (o resumen wtv): ![](https://static.platzi.com/media/user_upload/image-2eda1966-8ab9-4763-bc5f-7bb06a8ea124.jpg) ![](https://static.platzi.com/media/user_upload/image-16fe54f7-7e48-4b51-bc6a-4bab87a9c415.jpg)
**Tip**: Si una función retorna otra función, pregúntate: *"¿Necesito conservar el estado o configuración entre llamadas?"* Si la respuesta es sí, **guárdala en una variable**.
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202025-04-06%20220234-dd64e01a-a5b1-4853-b8a9-84403b0bdac3.jpg)
Esta si no entendí nada
Para entender mejor <https://www.youtube.com/watch?v=JXG_gQ0OF74>
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.
La función `inner` accede a las variables definidas en el ámbito de la función `outer` gracias al concepto de closure. Aunque `outer` no reciba parámetros, las variables definidas dentro de ella, como `other_variable`, son accesibles por `inner` debido a que `inner` se define dentro del scope de `outer`. Esto se relaciona con el ámbito léxico, donde una función puede acceder a las variables de su contexto de creación, incluso después de que la función `outer` haya terminado de ejecutarse.
function outerFunction() { let outerVariable = "¡Soy del scope exterior!"; function innerFunction() { console.log(outerVariable); // Puede acceder a outerVariable } return innerFunction; } const closureFunction = outerFunction(); // Llama a outerFunction y guarda innerFunction closureFunction(); // ¡Soy del scope exterior!
```js function createFunctions() { let counter = 0; function increment() { counter += 1; return counter; } function decrement() { counter -= 1; return counter; } function getValue() { return counter; } return { increment, decrement, getValue, }; } const myFunctions = createFunctions(); console.log(myFunctions.increment()); // 1 console.log(myFunctions.increment()); // 2 console.log(myFunctions.increment()); // 3 console.log(myFunctions.decrement()); // 2 console.log(myFunctions.getValue()); // 2 ```function createFunctions() {  let counter = 0;   function increment() {    counter += 1;    return counter;  }   function decrement() {    counter -= 1;    return counter;  }   function getValue() {    return counter;  }   return {    increment,    decrement,    getValue,  };} const myFunctions = createFunctions(); console.log(myFunctions.increment()); // 1console.log(myFunctions.increment()); // 2console.log(myFunctions.increment()); // 3console.log(myFunctions.decrement()); // 2console.log(myFunctions.getValue()); // 2
function outer() {  let message = "hello, "; // Mensaje inicial  return function (name) { // Función interna que crea un cierre    console.log(message + name); // Concatena el mensaje con el nombre  };} const clousureE= outer(); // Devuelve la función interna con acceso a 'message'const clousureF = outer(); // Otro cierre independiente clousureE("Ana"); // Imprime: "hello, Ana"clousureF("Héctor"); // Imprime: "hello, Héctor"
Un closure es una función que tiene acceso a variables de su ámbito externo, incluso después de que esa función ha terminado de ejecutarse. Esto permite que la función "recuerde" el entorno en que fue creada. Por ejemplo, al declarar una función dentro de otra y devolverla, la función interna puede acceder a las variables de la función externa. Esto es útil para crear funciones con estado, como contadores, pero se debe tener cuidado con el uso de memoria, ya que podrían acumularse referencias a variables externas.
Para encontrar una palabra en un array utilizando `findIndex()`, sigue estos pasos: 1. Crea un array con las palabras. 2. Usa `findIndex()` proporcionando una función que defina la condición. Por ejemplo, si buscas la palabra "ejemplo": ```javascript const palabras = ["hola", "mundo", "ejemplo", "código"]; const indice = palabras.findIndex(palabra => palabra === "ejemplo"); console.log(indice); // Esto mostrará 2 ``` `findIndex()` devuelve el índice del primer elemento que cumple con la condición, o -1 si no se encuentra.
Para encontrar una palabra en un array de strings utilizando el método `find`, puedes hacerlo de la siguiente manera: ```javascript const palabras = ["manzana", "banana", "cereza"]; const encontrada = palabras.find(palabra => palabra === "banana"); console.log(encontrada); // Imprime "banana" ``` En este ejemplo, `find` busca la palabra "banana" en el array `palabras`. Si encuentra una coincidencia, la devuelve; de lo contrario, devuelve `undefined`. Asegúrate de usar una comparación adecuada para tus necesidades.
Un ejemplo de closure devolviendo varias funciones: ![](https://static.platzi.com/media/user_upload/Screenshot%20from%202024-07-29%2001-39-46-c4200441-d2e2-4f13-97a2-ce9f8564cbeb.jpg)