Closures en programación funcional

Clase 15 de 23 • Curso de Programación Funcional en JavaScript por Bedu

Resumen

Los Closures son funciones que retornan otras funciones y recuerdan el scope en el que fueron creadas, es decir, son funciones que utilizan principios de la programación funcional, no modifica el valor de variables u objetos externos, más bien, utilizan sus propias variables independientes (a partir de los parámetros que reciban estas funciones) para dar resultados correctos.

Juan Castro

teacher•

Closures | MDN
Definiendo conceptos: Closure y Scope en JavaScript - @sergiodxa
Entendiendo closures en JavaScript - Yeison Daza

Carlos Gómez Mont

student•

Super aporte, gracias!!

Diego Cucaresse

student•

El texto de MDN es excelente. Muchas gracias profesor!!!

Gabriel De Andrade

student•

Closures: Es una función que retorna otra función
Ejemplo:

function buildSum(a) {
	return function(b) {
		return a+b
	}
}

Y con arrow functions:

const buildSum = a => b => a+b

Y si quieren indagar un poco mas a lo que ser refiere el profesor con “scope” les dejo este post de Fanny:

Qué es y cómo funciona el scope en JavaScript

Alejandro Betancur

student•

Me parece mas practico e igual de legible hacer closures con arrow function , a continuación un ejemplo donde la primera función tiene 2 parámetros y la segunda uno solo :

const buildSum = (value1, valu2) => value3 => (value1 + valu2) * value3;
console.log(buildSum(10, 20)(2));

Carlos A Sanchez

student•

Con esa definición, entonces esto podría ser un closure:

function buildingFakeClosure(){
	return function(){
		console.log('Am I a closure?')
	}
}

Javier Romero

student•

wuaooo!! hasta el mismo profesor dice que en la entrevista le costo mucho tiempo y trabajo poder realizar ese ejercicio, vaya eso es admirable y creo que me da una lección a mi y a todos, de que a los mismos programadores expertos les cuesta mucho lidiar con el código sea básico o avanzado, pero hacen lo posible por ser aprobados en una empresa, de verdad esto me alienta cuando aveces estoy frustrado.

Daniel Castillo

student•

Es un buen ejemplo, aunque no estoy de acuerdo con que los clojures son “funciones que retornan otras funciones”. propiamente dicho.

Estaría mejor definirlo como funciones internas que tienen acceso a las variables de sus funciones externas.

Y es por esa razón que en javascript las funciones que retornan funciones son tan utiles.

David Antonio Ordóñez Cornejo

student•

Los closures son funciones como valor que tienen acceso a todas las variables en su scope durante su creacion, lo que posibilita benecifiarse de los closures es que pueden ser retornadas de otras funciones, en este caso de hablamos de Funciones de Orden Superior

Mario Jesús Arango Cupe

student•

buildSum = a => b => a+b

console.log(buildSum(5)(5));```

Jorge Eliecer Rangel Jimenez

student•

Closures Arrow Function

const buildSuma = (a) => (b) => a + b```

Alison Báez

student•

NO ENTENDÍ NI PAPA DEL EJEMPLO, AYUDA :(

Juan Carlos Montilla Sánchez

student•

Hola, Alison.

Te daré mi explicación desde mi punto de vista pero en Platzi tiene un curso especial sobre Closures y Scope ✌️

Recordemos que estamos utilizando composición de funciones y básicamente, nos permite llamar funciones dentro de otras funciones.

🤯 Sé que esto te puede explotar la cabeza pero no te rindas; sé que puedes.

🤏 Continuando con la explicación: El scope recordemos que es el alcance del contenido (variables o funciones) dentro de bloques de códigos, ejemplo:

function soyScope(){
	//Esto se conoce como scope local
	let scopeLocal= "soy un scope local";
}

Y además de los scope local también tenemos scope global que se encuentra en nuestro objeto window para el navegador:

let soyScopeGlobal = "Yo estoy en el scope global";

function soyScope(){
	//Esto se conoce como scope local
	let scopeLocal= "soy un scope local";
	console.log(scopeLocal);
	console.log(soyScopeGlobal);
} 

console.log(scopeLocal);
console.log(soyScopeGlobal);

Te dejo esos ejemplos para que los pruebes en tu consola de Chrome y veas cual es el resultado.

Finalizando con el scope, ahora pasemos al Closure:

⛓ Y básicamente es como una liga o cadena que se encadena en una función y el claro ejemplo es el que dio el profesor:

// Sin Arrow Function
function construirSuma(valor1){
	return function(valor2){
		return valor1 + valor2;
	} 
}

const obtenerSuma = construirSuma(5);
console.log(obtenerSuma(5)) // 10

// Con arrow function

const construirSuma = valor1 => valor2 => valor1 + valor2;

const obtenerSuma = construirSuma(5);
console.log(obtenerSuma(5)) // 10

En el primer y segundo caso, utilizamos una función principal para retornar otra función en donde la segunda función me va a retornar la suma de los dos valores y la variable obtenerSuma me va a guardar la función que lleva adentro construirSuma y después que la invoquemos, me va a realizar la operación.

Espero que te haya sido de utilidad.

Saludos.

Carlos Enrique Ramírez Flores

student•

uff esto es genial, en una de las clases anteriores no sabia muy bien que esta haciendo, pero ahora lo comprendo mejor!

David Antonio Ordóñez Cornejo

student•

Un closure

// A little closure
const buildIncrementer = (inc, num) => () => num += inc
const incrementOne = buildIncrementer(1, 5)
console.log(incrementOne()) // 6
console.log(incrementOne()) // 7
console.log(incrementOne()) // 8

CARLOS LEIVA

student•

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions

David Colin

teacher•

Gracias 😉

CARLOS LEIVA

student•

a estas alturas no han explicado para que se usan las flechas =>

Alison Báez

student•

Son para declarar arrow functions.

Irving Juárez

student•

Aquí me gustaría mencionar que una de las ventajas de los closures, es que estos se quedan con el valor del scope, así que nosotros podemos cambiar el valor de la primer función dentro de la segunda. Algo como lo siguiente tío...

function count(): Function {
  let startAt: number = 0;

  return (action: string): number => {
    if (action === "add") {
      startAt += 1;
    } else if (action === "remove") {
      startAt -= 1;
    }

    return startAt;
  };
}

const counter: Function = count();
console.log(counter()); // 0
console.log(counter("add")); // 1
console.log(counter("add")); // 2
console.log(counter("add")); // 3
console.log(counter("remove")); // 2
console.log(counter("remove")); // 1
console.log(counter("remove")); // 0

Pd: estoy usando TS

Alvaro Arturo

student•

Moises Samuel Urias Moreno

student•

https://platzi.com/clases/scope/

Angel Enrique Barrios

student•

he usado Clousers en todo este tiempo y no sabia

Francisco Garcia [C6]

student•

Excelente, muy interesante

Carlos Eduardo Gomez García

teacher•

Hmm, antes de ver el video traté de resolverlo, pero como he trabajado mucho con esto supe como se hacía jaja

Por cierto, siempre creí que un Closure era un callback...

Alvaro H. Ruiz V.

student•

callback, entiendo que es una función que recibe como argumento otra función, quien me corrige?

Alejandro Sebastian Dubon Estrada

student•

Curso de Clousures y Scope en Platzi

Rafael Alejandro Santos Trujillo

student•

Closure: Es una función que retorna otra función además de que recuerdan el scope en el que fueron creadas.

/*Ejemplo closures */

function buildSum(a) {
    return function (b) {
        return a + b;
    };
}
const addFive = buildSum(5);
console.log(addFive(5));

Carlos Macias

student•

Curso de Closures y Scope en JavaScript

Closures en programación funcional

Introducción al curso y conceptos base

Qué aprenderás sobre la programación funcional

Programación funcional: qué es

Boilerplate: Base para el proyecto del curso

Funciones

Funciones Algebraicas y Funciones de JavaScript

Qué son funciones puras

Proyecto: Obtener el valor de los inputs

Objetos y Tipos de Memoria en JavaScript

Copiar y modificar objetos en JavaScript

Utilizando inmutabilidad en nuestras funciones

Proyecto: Validar inputs

Estado compartido en funciones

Estado compartido o shared state

Proyecto: Agregar elementos a la lista

Composición de funciones, Closures y Currying

Funciones compuestas o Function Composition

Completando las funciones para generar etiquetas HTML

Closures en programación funcional

Currying

Proyecto: Construyendo filas y celdas

Higher Order Functions

Introducción a las Higher Order Functions

Proyecto: Actualizando el total de calorías

Proyecto: Mostrar elementos

Proyecto: Eliminar elementos

Bonus: Declarative Programming

Programación Declarativa

Conclusiones

Conclusiones