Entiende los closures de JavaScript

Clase 16 de 51 • Fundamentos de JavaScript 2017

Resumen

Los closure son funciones que recuerdan el entorno en el cual fuerón creadas, esto quiere decir que al llamar la función van a recordar las variables que tenian en ese momento. Por ejemplo, si queremos hacer una función para saludar determinada familia

function saludarFamilia(apellido) {
  return function(nombre) {
    console.log(`Hola ${nombre} ${apellido}`)
  }
}

let saludarPerez = saludarFamilia('perez');
``

De esta forma podemos crear nuevas funciones partiendo de funciones que recuerdan variables internas

Víctor Julio Molano Bolívar

student•

Yo creo que lo mejor seria:

generaPrefijo = prefijo => valor => prefijo + valor;
const re = generaPrefijo("re");
re("malo");

Con las arrowFunctions no necesito ni paréntesis en este caso.

Yefri Gonzalez

student•

Excelente, ahora mi pregunta es que consecuencias tiene no poner const/let/var a generaPrefijo?

nicolas fernandez

student•

Si no pones var/let/const la podes llamar a esa funcion desde cualquier parte de tu codigo (global) independientemente de donde declaraste la función (hoisting) , pero esa funciones susceptible a ser sobrescrita si declaras otra con el mismo nombre en otra parte del código.
Ahora si la declaras con var/let/const vas a tener que declarar la función antes de utilizarla (nuevamente hoisting, sube al tope del scope la declaración de variables , pero no la asignación).
Con var/let tu funcion puede ser sobreescrita pero con const no.
personalmente prefiero con const todas las funciones al principio del codigo

David Santiago González Ramos

student•

Closures: Son funciones que recuerdan el scope - entorno en donde fueron creadas. Lo cual permite que los closures o funciones internas tengan acceso a las variables de la función externa, dado que estan en el mismo scope. Ejemplo:

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

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

console.log(suma5(2));  // muestra 7
console.log(suma10(2)); // muestra 12

La función anónima interna, crea una única variable y, que es recibida como parámetro. Sin embargo dado que es un closure y esta en el scope de la funcion creaSumador, tiene acceso a x lo cual le permite devolvernos la suma de x + y
Pd: código tomado de Mozilla Developer Network

Miguel Angel Reyes Verdin

student•

Excelente aporte 7u7

Jhonny Stiven Agudelo Tenorio

student•

Con arrow function quedaría así

const sumador = (numero) => (otroNumero) => (numero + otroNumero)
const suma = sumador(5)
suma(7)

Nestor Beltran

student•

que tal comunidad, una pregunta, me queda claro que la función saludarMiebroDeFamilia(nombre) recuerda el valor de la variable apellido por que esta en el mismo scope, pero lo que no me quedo claro es como sabe que la variable nombre que recibe como parámetro tiene el valor que le pasamos desde saludarGomez(“jorge”) o saludarPerez(“maria”) etc… , se que javascript permite que si declaramos que la función no reciba parámetros más adelante pasar le parámetros dinámica mente aun cuando no lo declaramos, pero como es que saludarMiebroFamilia(nombre) sabe que ese parámetro que pasamos dinámica mentes es el valor que va ha recibir ?

Adriana Villalobos

student•

Tengo la misma duda

Juan Henriquez Zavarse

student•

Hola Nestor, imagina que la función saludarMiebroDeFamilia(nombre) { ... } es una simple función que recibe un parametro y se encarga de imprimir el nombre (el parametro que recibe) y el apellido que lo obtiene del ambito en donde fue definida esta (scope). También sabemos que esta funcion esta siendo retornada desde otra función llamada saludarFamilia:

function saludarFamilia(apellido) {  // outer function  
	return function saludarMiebroDeFamilia(nombre) { // inner function
		console.log(`Hola ${nombre} ${apellido}`);
	}
}

Cuando queremos crear un saludo para una familia familia en especifico, hacemos esto:

const saludarGomez = saludarFamilia('Gomez');

Ahora detente aqui un momento y preguntate que sucede cuando ejecutas la función saludarFamilia.
Cuando la ejecutas, saludarFamilia te devuelve una funcion común y corriente que podras utilizar cuando quieras. Si hacemos un console.log de la constante que acabamos de crear: saludarGomez, te daras cuenta de que imprime esto:

console.log(saludarGomez);
// Imprime:
// function saludarMiebroDeFamilia(nombre) {
//	console.log(`Hola ${nombre} ${apellido}`);
// }

Es por eso que cuando haces un saludarGomez('Luis') o un saludarPerez('Carmen') el sabe que valor tiene el parametro nombre, ya que saludarGomez y saludarPerez son en realidad dos funciones que reciben como parametro un nombre, pero con la particularidad de que fueron retornadas desde un principio desde una funcion (saludarFamilia) donde se definido el apellido.

Gerardo Ramones

student•

const makePrefixer = function (prefijo) {
	return function(palabra) {
		 console.log(`${prefijo}${palabra}`) 
	}
}

const prefijoSuper = makePrefixer("super")

prefijoSuper("bueno")
prefijoSuper("malo")
prefijoSuper("bruto")
prefijoSuper("vista")```

Mario Ruano Fernández

student•

Saludos! Esta es mi propuesta de ejercicio para hacer prefijos telefónicos:

prefijoInternacional = prefijo => num => {
    const marcadoInt = prefijo + num
    console.log(`Su número para marcado internacional es el ` + prefijo + num)
}

const prefijoSpain = prefijoInternacional("+34")

prefijoSpain("619367150")

Ignacio Briones

student•

excelente!

Luis Alejandro Cortes Chacón

student•

Formas de resolver el ejercicio
De la forma más larga a la más corta

// -------------Forma 1----------------
function makePrefixer(prefix){
	return function addPrefixer(word){
		console.log(prefix+word)
	}
}

// -------------Forma 2----------------
function makePrefixer(prefix){
	return word => prefix + word
}

// -------------Forma 3----------------
let makePrefixer = prefix => word => prefix + word



const prefijoRe = makePrefixer("re")
prefijoRe("bueno")

Dahiana Benitez

student•

Será que podrías explicar como funciona la Forma 3 por favor 😃

Esteban Saravia

student•

Ahi va el mío.

function makePrefix(prefix){
  return word => `${prefix} ${word}`
}

const PrefijoPo = makePrefix("Po ")
const PrefijoRe = makePrefix("Re ")

console.log(PrefijoPo("Juan"))
console.log(PrefijoRe("Bueno!!!"))

mspcraphic

student•

const makePrefixer = (prefijo) => palabra => (prefijo + palabra)
const prefijoRe = makePrefixer("re")
prefijoRe("malo")

Milton Miranda C.

student•

Para mi debe ser así:

// A la antigua:
function makePrefixer(prefijo){
	return function linkingWords(palabra){console.log(prefijo+palabra)}
}
// ó con arrow function:
const makePrefixer=(prefijo)=>linkingWords=(palabra)=>console.log(prefijo+palabra)
//y el resto del código tanto para la versión a la antigua como con arrow function:
const prefijoRe = makePrefixer("re")
const prefijoIn = makePrefixer("in")
const prefijoA = makePrefixer("a")
const prefijoCo = makePrefixer("co")

prefijoRe("torcido") //retorcido
prefijoIn("justo") //injusto
prefijoA("normal") //anormal
prefijoCo("partícipe") //copartícipe

Carlos Alberto López Orozco

student•

const prefixAll = (prefix) => (word => console.log(`${prefix}${word}`))
	
const prefixRe = prefixAll("re")
const prefixIn = prefixAll("in")
prefixRe("bueno")
prefixIn("creíble")

Alexis Antonio Moraga Gallardo

student•

Hola les comparto mi repositorio con el avance del curso

Repositorio

En el encontraran los ejercicios realizados en clase comentados, y mis notas personales

/*Clousures
que es un clousure
Un closure es la combinación de una función y el ámbito léxico en el que se declaró dicha función.
Es decir los closures son funciones que manejan variables independientes.
 En otras palabras, la función definida en el closure "recuerda" el ámbito en el que se ha creado.

para explicar lo que es el clousure realizaremos un ejemplo con una funcion para saludar familias con nombre y apellidos
*/



function saludarFamilia(apellido){
//creamos una funcion llamada saludarFamilia que que recive como parametro el apellido ynos retorna una segunda funcion llamda saludar
  return function saludar(nombre){
//creamos una segunda funcion que recive como parametro el nombre y nos retorna un saludo con el nombre y el apellido.
//esto es el clousure, ya que desde una funcion interna accedemos a parametros de usu funcion padre
    console.log(`Hola ${nombre} ${apellido}`)
  }
}


const saludarGomez = saludarFamilia("Gomez")
//creamos una llamada a la funcion saludar familia y le pasamos como parametro el apellido gomez,
// como la funcion saludarFamilia retorna otro funcion es esta funciona la que guardamos en una constante llamada saludarGomez,
//de esta forma guardamos el parametro gomez, dentro de la constante, y el clousure lo recordara cuando realicemos el llamado a saludarGomez
const saludarPerez = saludarFamilia("perez")

saludarGomez("pedro")
//llamamos ala funcion saludar gomez y le enviamos como parametro el nombre,
// ya que la funcion saludarGomez tiene guardado el apellifo en el clousure
saludarGomez("juan")
saludarGomez("diego")

saludarPerez("sergio")
saludarPerez("lucho")
saludarPerez("sandro")


//reto de la clase crear una funcion que añada un prefijo que enviamos como parametro a una palabra que eniaremos como parametrp

function makePrefixer(prefijo){//creamos una funcion llamada makePrefixer que nos retornara una segunda funcion

  return function addPrefix(palabra){//creamos la segunda funcion y le pasamos como parametro la palabra
    console.log(`${prefijo}${palabra}`)//hacemos console.log del prefijo antecediendo a la palabra
  }
}

const prefijoRe = makePrefixer("re")//instanciamos la funcion prefijoRe y le pasamos como parametro re

prefijoRe("malo")//usamos la funcion prefijoRe y le pasamos como parametro la palabra,
//la funcion prefijoRe recuerda ek contexto en el que se creo y guarda el prefiijo en el clousure

Jasan Azael Hernández Bautista

student•

Pues lo que mas se me dificulto, fue entender la lógica de las variables, tarde un poquito pero iba probando. Puse las variables de la manera mas simple.

<code>
const ponerPrefijo = (prefijo) => (palabra => console.log(`${prefijo}${palabra}`))

const prefijoRe = ponerPrefijo("re")
const prefijoIn = ponerPrefijo("in")

prefijoRe("finado")
prefijoIn("vensible")

Fco Castro

student•

Simple. Copiar el patrón del otro código y adaptarlo.
Lo difícil es asimilar el concepto. Quiero decir, “Bueno” pasa a , prefijoRe, el cuál NO muestra de manera sintáctica que esté recibiendo nada. Hace falta comprender que se le está pasando un valor a esa constante la cual llama a una función con un parámetro… ESTO HACE QUE EL PARÁMETRO “Bueno” SEA INVISIBLE AL SENTIDO COMÚN. Es crucial para mí asimilar este concepto.

function makePrefixer(prefixer) {
  return function WordConPrefijo(wordSinPrefijo) {
    console.log(`${prefixer}${wordSinPrefijo}`)
  }
}

const prefijoRe = makePrefixer("Re")
const prefijoIn = makePrefixer("In")



prefijoRe("Bueno")
prefijoIn("creíble")

Jorge Zamudio

student•

Que tal este, banda

const prefijo = function makePrefixer(pref){
  return (a) => console.log(`${pref}${a}`)
} 

prefijo("oye")(" loco")

Maria Paulina Arenas Agudelo

student•

//Function makePrefixer

function makePrefixer(prefijo) {
  return function word(palabra){
    console.log(`Esta palabra incluye el prefijo ${prefijo}${palabra}`)
  }
}

const prefijoRe = makePrefixer("Re");

prefijoRe("bueno")
prefijoRe("malo")

//Arrow Function

makePrefixer = prefijo => word = palabra  => console.log(`Esta palabra incluye el prefijo: ${prefijo}${palabra}`)

const prefijoRe = makePrefixer("Re");

prefijoRe("bueno")
prefijoRe("malo")

Victor Cerriteño

student•

les comparto mi solucion me gusto el poder simplificar tanto el codigo muy buenos consejos de parte de sacha siempre se puede ser mas pulcro con el codigo

const makeprefijo = (pre)=> (string)=>  console.log(pre+string);

const PREre=makeprefijo('re')

PREre('bueno')
PREre('malo')

const PREreContra=makeprefijo('re contra ')

PREreContra('bueno')
PREreContra('malo')

Pablo Fernández

student•

function prefixer(texto){
    console.log(`re${texto}`)
}

prefixer('malo')


//Con Arrows
const prefixer = (texto) => console.log(`re${texto}`)

prefixer('malo')

David Camacho

student•

const makePrefixer = prefijo => texto => console.log(prefijo+texto)

makerPrefixer es una función que recibe como parametro el prefijo y retorna otra función que recibe como parametro el texto y retorna un log de prefijo+texto

Escrito sin arrow functions:

function makePrefixer(prefijo) {
  return function palabra(texto) {
    console.log(`${prefijo}${texto}`)
  }
}```

Andres Barbosa

student•

Yo la cree así

const makePrefixer = (prefijo) => function(palabra){return prefijo +  palabra}```

Noe Mikhael Huaccharaque Ruiz

student•

Reto aceptado. Creacion de Prefijos

//con funcion
function Prefijo(pref){
    return function(palabra){
        console.log(pref+palabra)}}       
const prefijoCe = Prefijo("c")
prefijoCe("Vander")
prefijoCe("++")
prefijoCe("Sharp")

//Con ArrowFunction
const Prefijo = pref => palabra => console.log(pref+palabra)
const prefijoCe = Prefijo("c")
prefijoCe("Vander")
prefijoCe("++")
prefijoCe("Sharp")

Entiende los closures de JavaScript

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial