Entiende los closures de JavaScript

Clase 52 de 55 • Fundamentos de JavaScript 2018

Resumen

Un closure, básicamente, es una función que recuerda el estado de las variables al momento de ser invocada, y conserva este estado a través de reiteradas ejecuciones. Un aspecto fundamental de los closures es que son funciones que retornan otras funciones.

Cristhian Camilo Perez Veloza

student•

alguien mas pensó en la palabra “Parce” para el saludo colombiano?

Diego Alejandro Aguilera Martinez

student•

Si jajaja

ariel ventura

student•

parce jaja

Brian Jose Coronel Ortiz

student•

Vengo del futuro, del curso profesional de JavaScript, les comporto mis apuntes para entender un poco mas de los closures, sin embargo, en el curso de JS profesional se explica todo un poco mas claro.

Daniela Arroyo Ortega

student•

Como hiciste tus apuntes? Te quedaron geniales

Brian Jose Coronel Ortiz

student•

Con adobe Xd

Pablo Andres

student•

Resumen de la Clase
Closures

Un closure es una función que recuerda el estado de las cosas cuando fue creada.
Una función que devuelve otra función con parámetros invocados en dos veces; primero el de la función ‘padre’ y luego el de la función ‘hijo’.

Para ejemplificar generemos una función que va a crear saludos. En este caso hagamos un saludo argentino, uno mexicano y otro para colombia.

function crearSaludo(finalDeFrase) {
	return function(nombre) {

	}
}

La función ‘padre’ es generadora o creadora de otras funciones y la función ‘hijo’ es anónima, es la que nos va a devolver el resultado.
Vamos a llamar esta función para crear constantes.

const saludoArgentino = crearSaludo('che')
const saludoMexicano = crearSaludo('wey')
const saludoColombiano = crearSaludo('amigo')

Entonces ahora podemos llamar a la función nuevamente a través de cada variable constante y pasando el parámetro de la función ‘hijo’ esta vez, el parámetro ‘nombre’ para generar el saludo de la siguiente manera.

saludoArgentino('Pablo')  // Hola Pablo che
saludoMexicano('Pablo')   // Hola Pablo wey
saludoColombiano('Pablo') // Hola Pablo amigo

Y agregamos la respuesta de la función (el console.log en este caso) en la que accedemos a la variable ‘finalDeFrase’ generada en la declaración de los diferentes saludos

function crearSaludo(finalDeFrase) {
	return function(nombre) {
		console.log(`Hola ${nombre} ${finalDeFrase}`)
	}
}

La variable ‘finalDeFrase’ es la generada en las constantes con el nombre mismo de la función, a partir del parámetro que le pasamos; ‘che’, ‘wey’ o ‘amigo’ en este caso.
La función ‘hijo’ recuerda cada una de las variables generadas que se usó para crear el saludo.
Y la función ‘hijo’ va a ser cada una de las constantes creadas; saludoArgentino, saludoMexicano o saludoColombiano en este mismo caso.

const saludoArgentino = crearSaludo('che')

Al invocar la función ‘hijo’ luego, le pasamos el parámetro ‘nombre’ y así la función se completa y nos imprime el saludo ‘Hola Pablo che’ en este caso.

saludoArgentino('Pablo')  // Hola Pablo che

El código completo queda así:

function crearSaludo(finalDeFrase) {
	return function(nombre) {
		console.log(`Hola ${nombre} ${finalDeFrase}`)
	}
}

const saludoArgentino = crearSaludo('che')
const saludoMexicano = crearSaludo('wey')
const saludoColombiano = crearSaludo('amigo')

saludoArgentino('Pablo')  // Hola Pablo che
saludoMexicano('Pablo')   // Hola Pablo wey
saludoColombiano('Pablo') // Hola Pablo amigo

Britney Hadassa Ascencio Henriquez

student•

Gracias

Fernando Cruz

student•

Excelente tus apuntes, nose si es algo confuso pero lo dire,lo que yo veo ,claro Padre e hijo y esta clase lo represento asi... El hijo va con una manzana entre sus manos con aspecto y sabor diferentes por cada mitad de la manzana ,pues va a llevarselo a su padre cual va a cortarlo ,una mitad(crearsaludo() ) para el y otra mitad (nombre de su funcion del hijo) para el hijo .... Osea veo que el hijo va a darle algo al padre para que se alimente(se active) y claro el hijo tambien osea (el nombre de su funcion)

Nelson Alayón

student•

No entiendo, ¿por que se invocan las constantes saludoArgentino, saludoMexicano y saludoColombiano como si fueran funciones? Yo veo que están declaradas como constantes y ademas no reciben parámetros, pero al invocarlas se les asigna el parámetro nombre. ¿y por que un parametro nombre que nunca fué declarado resulta siendo el mismo parámetro de una funcón anonima dentro de la función crearSaludo?

Diego Forero

Team Platzi•

A la constante se esta asignando la función, por esto se llama luego esa constante con los parámetros.

Hugo Alexander Tellez Gomez

student•

Gracias @GOLLU23

Javier Andres Gamboa Duarte

student•

saludoColombiano -> 'parce'

Ivan Santiago

student•

Aqui coloquialmente el güey normalmente se escribe wey JAJAJ 😄

Héctor Martínez Reséndiz

student•

Ya entendí como funciona! saludoMexicano( 'Héctor' ) --> manda llamar a la función crearSaludo( 'güey' ). crearSaludo( finalDeFrase ) --> recibe la segunda variable que enviaste güey como finalDeFrase. return function( nombre ) --> recibe la primer variable que enviaste Héctor como nombre. function( nombre ) --> -Denominada closure- puede utilizar las variables que estén dentro de la función que lo rodea, en este caso puede utilizar nombre de la función crearSaludo finalDeFrase y nombre --> son las variables que pueden utilizarse en la función closure function(nombre) console.log(Hola ${nombre} ${finalDeFrase}) --> imprime en consola Hola Héctor güey

Otro ejemplo puede ser:

saludoColombiano( 'Héctor', 'Martínez') --> manda llamar a la función crearSaludo( 'Hola' , 'amigo' ). crearSaludo( saludo, finalDeFrase ) --> recibe las variables que enviaste Hola y amigo como saludo y finalDeFrase respectivamente. return function( nombre, apellido ) --> recibe las primeras variables que enviaste Héctor como nombre y Martínez como apellido. function( nombre, apellido ) --> -Denominada closure- puede utilizar las variables que estén dentro de la función que lo rodea, en este caso puede utilizar nombre y apellido de la función crearSaludo saludo, finalDeFrase, nombre y apellido--> son las variables que pueden utilizarse en la función closure function(nombre) console.log(${saludo} ${nombre} ${apellido} ${finalDeFrase}) --> imprime en consola Hola Héctor Martínez amigo

César A. Guerrón

student•

Gracias por el aporte, con los ejemplos que pones entendí mejor el uso de los closures

Matías Gabriel Navarro

student•

Lean la edición Scope & Closures del libro You Dont Know JS de Kyle Simpson si quieren reforzar esto y van a entrar en lo mas profundo de Javascript

Eduardo Vega

student•

La funcion que se guarda dentro de la constante es la funcion que se retorna. Cuando creas la constante, es como si invocaras la funcion de crearSaludo(), que esta a su vez retorna la funcion anonima que es la uqe guarda en la costante.
Cuando creas la constante e invocas la funcion le pasas el parametro “finalDeFrase”, que tambien es guardado dentro de la constante. El closure consiste en esto. Que la constante esta fuera del bloque de crearSaludo() —fuera del scope de la funcion— pero aun asi tiene acceso al parametro “finalDeFrase”.

Espero les sirva, saludos!

Yesid Felipe Tombé Castillo

student•

Muchas gracias por la explicación, me quedó un poco más claro el concepto. Saludos

Facundo Nicolás García Martoni

teacher•

Excelente explicación!

Elisa Zamarron Muñoz

student•

Vengo del Curso Profesional de Javascript. Sepan que ahí se da una explicación un poco más amplia del uso de closures :)

Daniel Cabrera Ramirez

student•

Espero verlo mas a fondo en ese curso, ya que sera el siguiente que tomare creo, gracias por el dato

Darwist Jesus Garcia Torres

student•

Wow lo más extraño que he visto, #JavascriptRecuerda

David Antonio Garcia Saaib

student•

Los puntos intermedios seria estos: de la manera mas sencilla de entender para mi es que llamamos a una funcion que manda un valor a otra funcion

En esta ocacion guardamos la primera funcion en una constante, nada mas dificil que eso

Como podemos hacer el codigo mas chico lo hacemos

Espero no equivocarme. El resultado es que al llamar a la constante que llama a la funcion crearSaludo('che') y en el return llama a la funcion que lo llamó, por lo que no es necesario poner su nombre, solo los parametros para utilizarlos.

Diocito me hara entender

Jhon Alexander Alvarez Romero

student•

Hola, a modo de comentario, como dice Sacha, si esto da confianza y es tan fundamental, deberian dar mas refuerzo sobre este tema

Jeison Sneider Ruiz Zemanate

student•

código JS clase 45 —> CLOSURES

function crearSaludo(finalDeFrase){
    return function (nombre){
        console.log(`Hola ${nombre} ${finalDeFrase}`)

    }
}

const saludoArgentino= crearSaludo('che')
const saludoMexicano= crearSaludo('guey')
const saludoColombiano= crearSaludo('parcero')

saludoArgentino('Jei')
saludoMexicano('Jei')
saludoColombiano('Jei')

Augusto Jesus Muñoz Liñan

student•

Gracias !

Elvis Moreira

student•

Para entender un poco esta clase les comparto algo de lo que he entendido y revisado:

Un clousure permite acceder al ámbito de una función exterior desde una función interior. y como dato importante los clousures se crean cada vez que una función es creada. Es decir en un ejemplo diferente al que se ha explicado en la clase es:

function creaSumador(x){
     return function(y){
           return x+y;
   };
}

Aquí se ha definido una función que se llama crearSumador que recibe sólo un argumento que es el valor de x esta función devuelve otra función y esta nueva función toma como parámetro y que es el otro argumento para poder realizar la suma.

var suma5 = creaSumador(5);
var suma10 = creaSumador(10);

Definimos dos variables para ejecutar la función definida

y luego en un console.log queremos mostrar el resultado de la suma así:

console.log(suma5(2))

Le pasamos a la variable definida suma5 el parámetro de 2 la suma nos dará 7

console.log(suma10(10))

Le pasamos a la variable definida suma10 el parámetro de 10 la suma nos dará 20

Todo esta explicación ha sido revisada de la documentación de developer mozilla

https://developer.mozilla.org/es/docs/Web/JavaScript/Closures

Uriel Alberto Arevalo Franco

student•

Un ejercicio sencillo que me ayudó a comprender un poco mas lo que es un closure. Se trata de una persona que se presenta con nombre, edad y peso.

function presentaPersona(edad, peso) {
            return function (nombre) {
                console.log(`Soy ${nombre} tengo ${edad} años  y peso ${peso} kilos`)
            }
        }
        const edadYPesoLuis = presentaPersona(30, 70)
        const edadYPesoPedro = presentaPersona(25, 68)
        const edadYPesoAlberto = presentaPersona(23, 74)

        edadYPesoLuis('Luis')
        edadYPesoPedro('Pero')
        edadYPesoAlberto('Alberto')

Juan Pablo Calao Pérez

student•

Saludo colombiano: parce, compa, pri, primo

Héctor Morán

student•

jejejeje... Es más común que en México digamos "wee" a "güey"

Sergio Armando Medina Chaparro

student•

😆

Mery De Freitas

student•

Consegui este ejemplo en internet que explica lo que quiere decir el profesor:

function getCounter() {
  let counter = 0;
  return function() {
    return counter++;
  }
}
let count = getCounter();
console.log(count());  // 0
console.log(count());  // 1
console.log(count());  // 2```

Rubén Jiménez Torres

student•

closure es un tipo especial de objeto que combina dos cosas: una función, y el entorno en que se creó esa función.