隆Te damos la bienvenida a este reto!

1

隆Bienvenido al mundo de JavaScript!

D铆a 1

2

Variables, funciones y sintaxis b谩sica

3

Tipos de datos

4

Playground - Retorna el tipo

5

Tipos de datos - pt 2

D铆a 2

6

Operadores

7

Hoisting y coerci贸n

8

Playground - Calcula la propina

9

Alcance de las variables

D铆a 3

10

Condicionales

11

Playground - Calcula a帽os bisiestos

12

Switch

13

Playground - Obten informaci贸n de mascotas seg煤n su tipo

14

Ciclos

15

Playground - Dibuja un triangulo

D铆a 4

16

Arrays

17

Playground - Encuentra al michi mas famoso

18

Objetos

19

Playground - Obten el promedio de los estudiantes

D铆a 5 - Checkpoint

20

Playground - encuentra el palindromo m谩s grande

D铆a 6

21

Reasignaci贸n y redeclaraci贸n

22

Modo estricto

D铆a 7

23

Debugging y manejo de errores

24

Programaci贸n funcional

Quiz: D铆a 7

D铆a 8

25

Closures

26

Playground - Crea una calculadora con closures

27

Higher order functions

28

Playground - Crea tu propio m茅todo map

D铆a 9

29

ECMAScript

30

TC39

Quiz: D铆a 9

D铆a 10 - Checkpoint

31

ES6

32

ES7

33

Playground - Task planner

D铆a 11

34

Asincronismo

35

Playground - Promesas

36

Manejando el asincronismo

37

Playground - Resuelve el callback hell usando promesas

38

Playground - Resuelve el callback hell usando async/await

D铆a 12

39

Arrays a profundidad

40

M茅todos de arrays: Every, Find y findIndex

41

Playground - V谩lida el formulario

D铆a 13

42

M茅todos de arrays: Includes, Join y concat

43

Playground - agrupa los productos

44

M茅todos de arrays: Flat y FlatMap

45

Playground - Encuentra la ubicaci贸n del valor buscado

D铆a 14

46

Mutable functions

47

Playground - Modifica una lista de compras

48

M茅todos de arrays: sort

49

Playground - Ordena los productos

D铆a 15 - Checkpoint

50

Playground - Sistema de reservaciones de un hotel

D铆a 16

51

Programaci贸n orientada a objetos en JavaScript

52

Objetos literales

53

Playground - Congela el objeto recursivamente

D铆a 17

54

Prototipos en JavaScript

55

Playground - Modifica el prototype de los arrays

56

Playground - Crea un auto usando clases

D铆a 18

57

Abstracci贸n en JavaScript

58

Playground - Sistema de carrito de compras

59

Encapsulamiento en JavaScript

60

Playground - Encapsula datos de los usuarios

D铆a 19

61

Herencia en JavaScript

62

Playground - Jerarqu铆a de animales

63

Polimorfismo en JavaScript

64

Playground - Sistema de pagos

D铆a 20 - Checkpoint

65

Playground - Agenda de vuelos

D铆a 21

66

Patrones de dise帽o

67

Sinlgeton y Factory pattern en JavaScript

68

Playground - Implementa singleton en un chat

D铆a 22

69

Adapter y Decorator pattern en JavaScript

70

Playground - Personaliza productos de una tienda

71

Builder y Protype pattern en JavaScript

72

Playground - Mejora el c贸digo usando builder pattern

D铆a 23

73

Facade y proxy pattern en JavaScript

74

Playground - Proxy en servicio de mensajer铆a

75

Chain of responsability y Observer pattern en JavaScript

76

Playground - Implementaci贸n de Observador en Newsletter

D铆a 24 - Checkpoint

77

Playground - Crea un task manager con patrones de dise帽o

D铆a 25

78

Estructuras de datos en JavaScript

79

Playground - Crea tu propia implementaci贸n de un array

80

Hash tables en JavaScript

81

Playground - Implementaci贸n de una HashTable para Contactos

D铆a 26

82

Set en JavaScript

83

Playground - Remueve duplicados de una lista

84

Maps en JavaScript

85

Playground - Crea un organizador de tareas

D铆a 27

86

Singly Linked List en JavaScript

87

Playground - Agrega m茅todos a la singly linked list

88

Playground - Implementaci贸n de una singly linked list

D铆a 28

89

Stacks en JavaScript

90

Playground - Crea un stack para una playlist

D铆a 29

91

Queues en JavaScript

92

Playground - Crea una cola de emails

D铆a 30

93

隆Lo lograste!

Live Class

94

30 d铆as de JS con Juan DC

95

30 d铆as de JS con Nicobytes

96

30 d铆as de JS con GNDX

97

30 d铆as de JS con LeoCode

98

30 d铆as de JS con Teffcode

99

Sesi贸n: Cierre de los 30 d铆as de JavaScript

隆Se acaba el precio especial! Aprende Ingl茅s, AI, programaci贸n y m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

1 D铆as
9 Hrs
54 Min
15 Seg

Closures

25/99

Lectura

Los closures en JavaScript son una caracter铆stica fundamental del lenguaje que permite a las funciones recordar el estado de su entorno de ejecuci贸n, incluso despu茅s de que la funci贸n haya sido invocada. Esto permite a las funciones mantener un estado privado y protegido de variables y funciones internas, lo que proporciona una mayor flexibilidad y seguridad en el c贸digo.

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 8

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Hoy quiero hablarles sobre uno de los conceptos m谩s interesantes en JavaScript: los closures.


.
Un closure es una funci贸n que guarda referencias a variables en su entorno l茅xico, incluso despu茅s de que la funci贸n ha sido devuelta. Esto significa que una funci贸n que se define dentro de otra funci贸n (la funci贸n interna) tiene acceso a las variables de la funci贸n externa (el 谩mbito l茅xico).
.
En t茅rminos m谩s simples, un closure permite que una funci贸n acceda a variables que no est谩n dentro de su propio 谩mbito. Esto es 煤til para crear funciones m谩s flexibles y reutilizables.
.
Ejemplo:

function sumar(a) { // funci贸n declarativa que recibe un par谩metro 'a'
  return function(b) { // rotorno de funci贸n an贸nima que recibe un par谩metro 'b'
    return a + b; // esa funci贸n retorna la suma de 'a' y 'b'
  }
}
// declaraci贸n de variables con llamadas de funci贸n 'sumar' y un par谩metro 'a'
let suma1 = sumar(5);
let suma2 = sumar(10);

console.log(suma1(2)); // devuelve 7
console.log(suma2(3)); // devuelve 13

En este ejemplo, sumar() es una funci贸n que devuelve otra funci贸n. La funci贸n interna es el closure, y tiene acceso a la variable a de la funci贸n externa.
.
Al llamar a sumar(5), se crea un closure que guarda el valor de a como 5. Luego, al llamar a suma1(2), la funci贸n interna suma 2 al valor de a (5) y devuelve 7.
.
De manera similar, al llamar a sumar(10), se crea otro closure que guarda el valor de a como 10. Luego, al llamar a suma2(3), la funci贸n interna suma 3 al valor de a (10) y devuelve 13.

Contador me imagino que sea counter intercambio de idioma jijij

Una cuesti贸n que me cost贸 entender en el primer ejemplo es por qu茅 la variable count no se inicializa a 0 cada vez que se llama a la variable myCounter dado que existe la linea

let count = 0;

Mi interpretaci贸n despu茅s de un buen rato razonando, es que cuando se ejecuta

const myCounter =counter();

b谩sicamente lo que sucede es que se inicializa count=0, se devuelve la funci贸n increment() y se almacena en la variable myCounter. Por lo tanto esta ultima variable es igual a increment(), por lo que llamar a myCounter() es exactamente lo mismo que llamar a increment(). En este caso existe una variable guardada en memoria bajo el nombre count, y cada vez que se llama a myCounter (o increment), este espacio se sobreescribe y es por eso que el output de la funci贸n cambia.

Por favor corr铆janme si alguien tiene un conocimiento m谩s ver铆dico de lo que sucede detr谩s de la ejecuci贸n del script. Gracias

arreglen el typo en 鈥渃ontador鈥, creo que deberia haber sido counter

25/89 Closures
Es una caracter铆stica que permite a las funciones mantener un estado interno privado y protegido de variables y funciones externas. Los closures se crean cuando una funci贸n es declarada dentro de otra funci贸n y tienen acceso al 谩mbito de la funci贸n extenera, incluyendo las variables y funciones gen茅ricas y reutilizables, que pueden ser parametrizadas con variables y funciones declaradas en su entorno de ejecuci贸n.

Un ejemplo de closure en JavaScript es la funci贸n 鈥渃ounter, que crea una variable privada count y devuelve el valor actual cada vez que se llama. Al asignar la funci贸n contador a una variable y luego llamar a la funci铆n varias veces, se est谩 utilizando el closure para acceder a la variable count y modificar su valor cada vez que se llama a la funci贸n increment.

Otro ejemplo es la funci铆n multiplyBy que toma un factor como argumento y devuelve una funci贸n que multiplica el valor dado por el factor. Al asignar la funci贸n 鈥渕ultiplicador鈥 con un factor espec铆fico a una variable y luego llamar ala funci贸n varias veces con diferentes valores, se est谩 utilizando el closure para parametrizar la funci贸n con un valor espec铆fico y crear una nueva funci贸n reutilizable que siempre multiplica el valor dado por ese factor.

Ej createCounter para crear un contador personalizado a partir de un valor inicial:

function createCounter(initialValue) {
	let count = initialValue;
	return function() {
	count++;
	return count;
	}
}
const myCounter1 = createCounter(0);
console.log(myCounter1()); // Output: 1
console.log(myCounter1()); // Output: 2
console.log(myCounter1()); // Outuput: 3

const myCounter2 = createCounter(10);
console.log(myCounter2()); // Output: 11
console.log(myCounter2()); // Output: 12
console.log(myCounter2()); // Output: 13

Ej Funci贸n para calcular el 谩rea de un rectandulo utilizando un clousure:

function areaTect(width) {
	return function (height) {
	return width * height;
	}
}
const rectArea = areaRect(5);
console.log(rectArea(6)); // Output: 30
console.log(rectArea(8)); // Output: 40

EJ funci贸n para contar la cantidad de veces que se llama a una funci贸n utilizando un clousure:

function countCalls(fn) {
	let count = 0;
	return function (...args) {
		count++;
		console.log(`La funci贸n ha sido llamada ${count} veces.`);
		return fn(..arg);
	}
}
function greet(name) {
	console.log(`Hola, ${name}!);
}
const countedGreet = countCalls(greet);
countedGreet('Juan'); // Output: Hola, Juan! 
//La funci贸n ha sido llamada 1 vez
countedGreet('Maria'); // Output: Hola, Maria! 
// La funci贸n ha sido llamada 2 veces

Se me hizo complicado entenderlo.

1.- La funci贸n principal se resuelve y mantiene su estado.
2.- La funci贸n que se retorna se guarda en la variable a la que lo asignes con el estado.
3.- Podemos usar la variable que contiene a la funci贸n secundaria para hacer cosas.

creo que toca practicar mas, a ver cuando se necesitan usar este tipo de funciones鈥