console.log(addOne(timesTwo(b))) // imprime 5
debido a que se ejecuta promero timesTwo() va ejeceutando de adentro hacia afuera de los paréntesis
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesiónEstado compartido o shared state
11/23Recursos
Shared State significa que diferentes métodos trabajan a partir de una misma variable. y, así como aprendimos en clases anteriores, cuando modificamos variables con el mismo objeto de referencia podemos encontrarnos con algunos problemas y obtener resultados inesperados a pesar de ejecutar el mismo código y recibir los mismos parámetros:
// Intento #1
const a = {
value: 2
}
const addOne = () => a.value += 1
const timesTwo = () => a.value *= 2
addOne()
timesTwo()
console.log(a.value) // 6
// Sin embargo, si ejecutamos las mismas funciones en orden invertido
// obtenemos resultados diferentes
timesTwo()
addOne()
console.log(a.value) // 5 !??
Para resolver este tipo de problemas debemos utilizar la programación funcional, en vez de modificar la variable original, nuestras funciones deben copiar y modificar sus argumentos:
const b = {
value: 2
}
const addOne = x => Object.assign({}, x, { value: x.value + 1 })
const timesTwo = x => Object.assign({}, x, { value: x.value * 2 })
addOne(b)
timesTwo(b)
// El resultado siempre es el mismo a pesar de
// ejecutar las funciones en orden diferente
timesTwo(b)
addOne(b)
console.log(b.value)
Aportes 11
Preguntas 4
Ordenar por:
Prácticamente lo que hacían las primeras funciones que creamos era mutar directamente la variable global (Podían ser accedidas gracias a su scope), de la segunda forma lo que se hizo fue simplemente hacer que esa variable no se mutara globalmente, sino que la función crea su propia variable y retorna el resultado ^^
Nota: Al igual que los objectos, los Arreglos también se pasan por referencia.
Me quedé un rato con el video pausado analizando porque estaba seguro que el resultado era 5 y no 6 😄 al final si era así.
Que diferencia hay entre el Object.assign y el spread syntax(…) para crear copias de los objetos?
Creo que la forma correcta de usar el assign en este contexto seria asi:
const addOne = x => Object.assign( {}, {value: x.value + 1 })
const timesTwo = x => Object.assign( {}, {value: x.value * 2 })
//The problem of shared state.
//it becomes apparently pure function in impure function, because are actually mutable functions (modified the original property), for that reason in long term that kind of function are not predictable.
//==================================Bad==================================
const myObject = {
value: 2
}
const addOne = () => myObject.value += 1 ;
const twoTimes = () => myObject.value *= 2;
// I know the value is 2, in order to obtain 3 I add one.
addOne();//3
// I know the value is 2, so in order to obtain 4 i multiply by 2.
twoTimes();//6, i don't excepted it, and it actually add one, there is a side effect
console.log(myObject.value);
//returns: 6
// I know the value is 2, so in order to obtain 4 i multiply by 2.
twoTimes();//4
// I know the value is 2, in order to obtain 3 I add one.
addOne();//5, i don't excepted it, and it actually add one, there is a side effect
console.log(myObject.value);
//returns: 5
//the problem is that its not a real control about the original value, someone can modify it and get a side effect in the code.
//¿How i can prevent side effects in this case? Using copies.
//==================================Good==================================
const myObject2 = {
value: 2
}
const addOne_good = (originalObj) => Object.assign({}, {value: originalObj.value + 1});
const twoTimes_good = (originalObj) => Object.assign({}, {value: originalObj.value * 2});
// I know the value is 2, so in order to obtain 4 i multiply by 2.
addOne_good(myObject2);//4
// I know the value is 2, in order to obtain 3 I add one.
twoTimes_good(myObject2);//3
console.log(myObject2.value);
//returns: 2, the original value.
// I know the value is 2, i want 6
let = result = twoTimes_good(addOne_good(myObject2));
console.log(result.value);// 6
os datos deben ser inmutables para evitar shared state, side effects, impure functions… Todo lo que hagamos será sobre copias y no sobre los datos compartidos con más partes de la aplicación.
Mas informacion en este enlace Shared state
Estos temas son muy interesantes.
![Francisco Garcia [C6]](https://static.platzi.com/media/avatars/avatars/garciafran_c845c2fe-2ea4-42db-a305-a7f4ef13b0fd.jpeg)
Muy interesante la duplicación de objetos
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.