Estructuras de datos inmutables

La forma que muestra Sacha para crear objetos inmutables puede fallar si tienes objetos que tengan otros objetos por dentro, por ejemplo:

const nicolas = {
	altura : {
		valor: 170,
		unidad: 'cm'
	},
	nombre: 'Nicolás'
}

const nicolasClon = {
	...nicolas
}

//Si después queremos modificar por ejemplo el valor de la altura del clon
nicolasClon.altura.valor = 180
//También estamos modificando la altura del objeto nicolas

console.log(nicolasClon.altura.valor) //180
console.log(nicolas.altura.valor) //180

Una truco que puedes usar para copiar objetos y sean inmutables sin importa que hayan objetos nested es primero hacerle un JSON.parse(JSON.stringify(objeto)) a el objeto que quieras copiar.

Modificando la función de sacha quedaría así:

const compleanosInmutable = persona => {
	persona = JSON.parse(JSON.stringify(persona))
	return {
		...persona
		edad: persona.edad + 1
	}
}

De esta forma si necesitas puedes modificar el valor retornado por la función aunque tenga una propiedad que sea un objeto por dentro.

Espero les sirva 😃

Resumen de la clase
Estructura de datos inmutables

Las estructuras de datos inmutables nos van a permitir deshacernos de los “efectos colaterales” cuando estamos desarrollando (side effects; efecto de lado según Sacha).

Dada el siguiente código:

const pablo = {
	nombre: 'Pablo',
	apellido: 'Andrés',
	edad: 30
}

const cumpleanos = persona => persona.edad++

La función modificará la edad en el objeto cada vez que se ejecute:

pablo
//{nombre: "Pablo", apellido: "Andrés", edad: 30}

cumpleanos(pablo)
//30

pablo
//{nombre: "Pablo", apellido: "Andrés", edad: 31}

cumpleanos(pablo)
//31

pablo
//{nombre: "Pablo", apellido: "Andrés", edad: 32}

cumpleanos(pablo)
//32

pablo
//{nombre: "Pablo", apellido: "Andrés", edad: 33}

Este es el llamado side effect (efecto de lado). La función puede modificar el objeto sin que nosotros así lo queramos.
Para evitar este efecto colateral definimos una función inmutable.

const cumpleanosInmutable = persona => ({
	...persona,
	edad: persona.edad + 1
})

Si le pasamos el objeto ‘pablo’ la función nos devolverá un nuevo objeto sin modificar el anterior.

pablo
// {nombre: "Pablo", apellido: "Andrés", edad: 33}

cumpleanosInmutable(pablo)
// {nombre: "Pablo", apellido: "Andrés", edad: 34}

cumpleanosInmutable(pablo)
// {nombre: "Pablo", apellido: "Andrés", edad: 34}

pablo
// {nombre: "Pablo", apellido: "Andrés", edad: 33}

cumpleanosInmutable(pablo)
// {nombre: "Pablo", apellido: "Andrés", edad: 34}

cumpleanosInmutable(pablo)
// {nombre: "Pablo", apellido: "Andrés", edad: 34}

pablo
// {nombre: "Pablo", apellido: "Andrés", edad: 33}

La “desventaja” que tendremos es que para guardar el valor de la función vamos a tener que generar una nueva variable.

const pabloViejo = cumpleanosInmutable(pablo)
const pabloMasViejo = cumpleanosInmutable(pabloViejo)

Utilizar estructuras de datos es parte de las buenas prácticas de javascript ya que nos permite deshacernos de los “efectos de lado” y no preocuparnos de modificar código inconscientemente y que se “rompa todo” en cualquier otro lado.

const felipe = {
      nombre: 'Felipe',
      apellido: 'Salamanca',
      edad: 18
    }
    const cumpleaños = persona => persona.edad++
    const cumpleañosInmutable = persona => ({
      ...persona,
      edad: persona.edad + 1
    })

Recuerden: Aunque sigamos este proceso si ponen persona.edad++ les va a alterar el original y no es lo deseado a la hora de crear un dato inmutable

Básicamente las estructuras de datos inmutables permiten que puedas tener una referencia al objeto principal, un clon que puedes modificar sin alterar al original.

Que bueno reforzar lo visto en el curso

Esto es muy importante para cuando vez el curso de redux

¿Esto no es lo mismo que cuando lo estuvo explicando en la sección de Objetos?

código JS clase 46 —> Datos inmutables

const jeison ={

    nombre: 'Jeison',
    apellido: 'Ruiz',
    edad: 22
}

//const cumpleaños = persona => persona.edad++


const cumpleañosInnmutable =persona => ({
    ...persona,
    edad: persona.edad+1
})

Función inmutable

Buen dato, ya se había mencionado pero es bueno aclarar

Tengan muy presente que si realizamos la suma del + 1 de la siguiente manera, aun nos sigue modificando el objeto original

  cumpleanos =  (persona) => ({
        ...persona,
        edad: persona.edad++ })```
Se debe realizar como lo hizo el docente, lo intente con el ++ y me cambiaba el objeto original. 

esta teoría te va a servir mucho cuando estes en el curso de redux

Si buscan aprender React, entender este concepto es de suma importancia,

Esto ya lo había enseñado :p

Muy claro como en todo el curso 😃

Esto igual es algo genial de JavaScript que lo vimos hace muchos capítulos, y la forma más confiable de copiar estructuras JSON para hacerlas inmutables es con JSON.parse(JSON.stringify(obj)) que también se ve en el curso de programación funcional uwu

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      const andres = {
        nombre: 'Andres',
        apellido: 'Ramirez',
        edad: 33
      }

      //const cumple = persona => persona.edad++

      const cumpleInmutable = persona => ({
        ...persona,
        edad: persona.edad + 1
      })


    </script>

  </body>
</html>

IDEAS CLAVES

=> ¿Estructura de datos inmutables?
Ayudan a prevenir el efecto colateral

La ventaja de la estructuras inmutables es no contaminar
afectar otras funciones, otras partes del codigo al mutar, al cambiar los datos de un objeto o una varibale

la idea clave es crear nuevas variables con la variable original

daniel
daniel2
daniel3
daniel4

Aportes de otros estudiantes de la clase que extraigo
"Un valor inmutable es un valor que no se puede cambiar luego de ser definido, se puede modificar pero debe ser en un objeto diferente."

/*
Autor: Daniel Páez
URL Autor:  heysoypaez.com
Tema de la clase: Uso de la fecha en javascript
Descripción: Aprovechando el objeto Date() para hacer calculos conzz
URL código: github.com/heysoypaez
*/

/*PROTOCOLO DE VERIFICACIÓN DE FUNCIONAMIENTO
==================================*/
//Imprimiendo algo en la consola
console.log("inicializando archivo");


/*DECLARACIÓN DE OBJETOS
============================*/		

const daniel = {
	nombre: "Daniel",
	apellido: "Páez",
	edad: 18
}


/*DECLARACIÓN DE VARIABLES
==================================*/


/*DECLARACIÓN DE FUNCIONES
========================================================*/

const cumpleanos = ( persona ) => persona.edad ++ 
//esta función modifica cosas fuera de ella


//esta funcion devuelve un nuevo objeto con su edad + 1
//el objeto de daniel queda inmutable, no cambia
const cumpleanosInmutable = persona => ({
	...persona,
	edad: persona.edad + 1
})

/*EJECUCIÓN DE FUNCIONES Y PROMESAS
========================================0*/

cumpleanosInmutable(daniel)


/*=======================================
RENDER EN PANTALLA
Agregando al html datos de la clase
=======================================*/

//Variables
let temaClase = "Entendiendo los closures de javascript";
let titulo = document.getElementById("title")
let contenidoClase = document.getElementById("contenido-clase")

//Variables reasignadas
titulo.innerHTML=  temaClase;
contenidoClase.innerHTML= temaClase;

//contenido de la clase

let apuntes = document.getElementById("apuntes")
let textoContenido = "=> Reduce al minimo el alcance de cada una de las variables a menos que tenga un objetivo concreto" 

apuntes.innerHTML = `${textoContenido}`;

Para mayor profundización, pueden estudiar Spread Operator o operador de propagación:
https://medium.com/@gloriafercu/es6-spread-operator-en-arrays-y-objetos-e46bfc84a0d0

Por si les sirve… una manera de inmutabilizar un array con objetos podes hacerlo de la siguiente manera:

const arraydeNombres=[{nombre: “Manu”}, {nombre: “Pepe”}]
const copiaDeArraydeNombres = […arraydeNombres]

Saludos!

me recuerda a cuando creábamos otro objeto y modificábamos su valor, excepto que ahora lo definimos con const

Es muy interesante

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

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 

como se llama cuando hacemos algo como esto:

const persona = {
nombre: 'Darwist',
edad: 24
}
const { edad } = persona;

// o esto

function calcularEdad({ edad }){
}

calcularEdad(persona);

De acuerdo, tener en cuenta no contaminar el código.

const sacha = {
  nombre: 'sacha',
  apellido: 'lifszyc',
  edad: 28
}
const cumpleanos = function (persona) {
  persona.edad++
}

¿porqué al definir la función así, genera UNDEFINE?

https://es.wikipedia.org/wiki/Efecto_secundario_(informática)

En ciencias de la computación se dice que una función o expresión tiene efecto colateral, efecto de lado o efecto secundario si esta, además de retornar un valor, modifica el estado de su entorno. Por ejemplo, una función puede modificar una variable global o estática, modificar uno de sus argumentos, escribir datos a la pantalla o a un archivo, o leer datos de otras funciones que tienen efecto secundario. Los efectos secundarios frecuentemente hacen que el comportamiento de un programa sea más difícil de predecir.

La programación imperativa generalmente emplea funciones con efecto secundario para hacer que los programas funcionen, la programación funcional en cambio se caracteriza por minimizar estos efectos.

En el diseño de CPU las instrucciones con efecto colateral son aquellas instrucciones que modifican valores internos del CPU de forma no explícita - de hecho, la instrucción ADD puede o no modificar otros registros (carry, zero, overflow, etc). Esto causa un problema cuando se diseña un CPU que usa “pipeline” de instrucciones y soporta instrucciones con efecto colateral. Se debe prestar especial cuidado para evitar este riesgo.

Otra forma de ver la inmutabilidad que menciona, es que al principio copia la referencia al objeto.
En el segundo no puede cambiar, porque se trata de otro objeto, no es el mismo.

const willy = {
            nombre: "Willy",
            apellido: "Daconceicao",
            edad: 28
        }

        // const cumpleanos = (persona) => persona.edad++ //si llamamos a esta funcion y le pasamos como parametro el objeto willy vemos que tiene un efecto de lado, modifica el objeto fuera de la funcion
    
        // estas estructuras van a permitirnos quitar el efecto de lado, creando una funcion inmutable es decir no modifica el objeto original, que recibe una persona y va a devolver un nuevo obj de js donde pisaremos atributos, con esto estamos creando un objeto nuevo en memoria no estamos modificando el objeto anterior
        const cumpleanosInmutable = (persona) => ({
            ...persona, //desglosamos a la persona (un Objeto) es decir, colocamos cada uno de sus atributos en este nuevo objeto 
            edad: persona.edad + 1 //pisamos el atributo edad
        })

        //la unica deventaja es que tenemos que definir una nueva variable para referirnos al nuevo objeto que estamos retornando que va a hacer un willyMasViejo porque modificamos su edad en 1
        const willy29 = cumpleanosInmutable(willy)

        // willy = {nombre: "Willy", apellido: "Daconceicao", edad: 28} - EL OBJETO ORIGINAL
        // willy29 = {nombre: "Willy", apellido: "Daconceicao", edad: 29} - EL OBJETO QUE MODIFICAMOS, PERO EVITAMOS EL EFECTO DE LADO```

Pude deducir que es lo que sucede:
const cumpleanos = persona => persona.edad++
Cuando se exprasa así una arrow function, es porque le hemos quitado la palabra function, los paréntesis del parámetro, las llaves y el return; pero todo eso que quitamos sabemos que está implícito. Con lo cual si ejecutamos ésta arrow function asi:
const cumpleanos = (persona) => {
persona.edad++
}
Sin la palabra return vamos a ver el mismo UNDEFINED en la consola, que se ve al ejecutar la función (no la arrow function)
const cumpleanos = function (persona) {
persona.edad++
}
Conclusión: para ver el valor 28 en lugar de UNDEDINED en la consola las funciones deben retornar algo, es decir, deben tener la palabra return.

const cumpleanos = persona => persona.edad++

sería equivalente a

const cumpleanos = function (persona) {
return persona.edad++
}

Algo curioso que sucede con la función dependiendo de como se incrementa el valor:

En este caso no se modifica el valor que se le pasa como valor:

const cumpleInmutable = persona => ({
  ...persona,
  edad: persona.edad + 1
})

Pero en este si se modifica. ¿Alguien más hizo la prueba?:

const cumpleInmutable = persona => ({
  ...persona,
  edad: persona.edad++
})

Wow muy buena clase, en realidad ya la habíamos visto un poco en los temas anteriores, pero está muy bien reforzar en esta clase, muchas gracias.

se entendio mejor el desglose de objetos, entendido estructuras de datos inmutables

Nos permiten programar mas seguros al saber que los datos nunca van a cambiar

La forma de crear un segunda array u objeto en forma de COPIA (ó estructura modificada) y que no afecte por REFERENCIA al original (estructura inmutable) se realiza mediante un Spread Operator (ó operador de propagación) ‘…’
Un video muy útil para complementar es:
Youtube- Spread Operator

let coleccion = [1,2,3,4]
let coleccion2= [...coleccion]
// se crea ahora sí una COPIA del array
//para objetos -> ObjetoCopia ={...Objeto}

coleccion2[0]=0;
console.log(coleccion)
//colección, continua siendo [1,2,3,4],no se modificó.
console.log(coleccion2)
// y coleccion2  [0,2,3,4]

Se nota que estas poniendo atención al curso cuando sabes que este tema ya se había visto antes 😉
y claro no está de más repasarlo

La estructura de datos inmutables nos permite mantener el valor original del objeto, evitando tener efectos colaterales que pueden modificar el valor a lo largo del script, cosa que queremos evitar.

El ejemplo realizado en clases pero con closure.

const eliezer = {
    nombre: "Eliezer",
    apellido: "Hernandez",
    edad: 28,
};

function asignarEdad(persona){
    let edad = persona.edad
    return () => {
        edad++;
        return {
            ...persona,
            edad: edad,
        }
    }

Escuché “efecto helado” y me dio hambre…

Amigos si quieren conocer un poquito más sobre clonar objetos les recomiendo leer este artículo: 3 Ways to Clone Objects in JavaScript

Saludos y a seguir aprendiendo 💚

Bien!

Buena clase.

Entendido 😃

Excelente!

es como querer que se ejecute una funcion en segundo plano pero que no cambia la original.

buenas clases

Hola, cada vez que utilizo …algunObjeto me sale el mensaje SyntaxError: invalid property id

Excelente explicación!!!

Este punto tambn lo tocan en el curso de programacion Funcional, les dejo el link al video por si quieren mirarlo y explicado por otro profesor con otro ejemplo.

Excelente

Definir funciones inmutables

Esto ya lo explico en clases anteriores solo que esta vez con otro enfoque

lo que pasa es que el objeto se pasa por referencia por lo tanto no se debe de modificar. Es mejor crear un nubo objeto

Ohhhh ahora quedo mas claro lo de las anteriores clases

//Estructurad de datos inmutables

const persona = {
	nombre: "Felipe",
	apellido: "Smitham",
	altura: 1.7,
	edad: 28
};

const cumpleanios = persona => persona.edad++;

const cumpleaniosInmutable = persona => ({
	...persona,
	edad: persona.edad + 1
});

Si el objeto base tiene otro objeto dentro de él estos se modifican cuando modificamos sus copias.

queda claro el rol que juega el … como dato inmutable

Increíble!! Muy buena clase!!

const jesus = {
    nombre : 'Jesus',
    apellido : 'Castellanos',
    edad : 29
}
// const cumpleayos = (persona) => persona.edad++;

const cumpleayosInmutable = (persona) =>({
    ...persona,
    edad: persona.edad +1 
});```

/*Las estructuras de datos inmutables forman parte de los principios de la Programación Funcional y nos permiten evitar tener efectos colaterales en los datos.
En otras palabras, que hayan modificaciones en las variables sin nuestro consentimiento,
produciendo comportamientos inesperados en el programa. */

const ronald  = {
    nombre: 'Ronald',
    apellido: 'García',
    edad: 28
}

// const cumpleaños = personas => personas.edad++ << modifica nuestro Objeto

// Lo que hacemos acontinuacion es Tomar el objeto y 
//crear un nuevo objeto para asi no pisar el valor Principal
const cumpleañosInmutable = persona => ({
    ...persona,
    edad: persona.edad + 1
})

Las estructuras de datos inmutables forman parte de los principios de la Programación Funcional y nos permiten evitar tener efectos colaterales en los datos. En otras palabras, que hayan modificaciones en las variables sin nuestro consentimiento, produciendo comportamientos inesperados en el programa.

const cumpleanosInmutable= persona=> ({
  ... persona,
  edad: persona.edad+1
}) 

const frank21= cumpleanosInmutable(frank)
console.log(frank.edad)
console.log(frank21.edad)

Recomiendo mucho leer la sección de Aportes y Preguntas, se encuentran muchos comentarios y respuestas a dudas que incluso no se sabía que se tenía.

genial

Excelente clase. Al principio no le veía mucha utilidad a esto para ahora veo que servirá para muchos casos.

Bien!!

Muy Bueno!!

Al principio tambien se vio algo de esto, pero aca se ve la forma profesional de hacerlo

esta es la forma correcta de manejar los datos ya que Javascript es un lenguaje funcional

Muy interesante, en verdad. Lo probe con ++ en lugar de con + 1 y con ++ no funciona. 😃 debe ser con + 1 seguro tiene sus restricciones

        const fran = {
            nombre: 'Francisco',
            apelli: 'Garcia',
            edad: 52
        }

        //const cumpleanio = persona => persona.edad++

        const cumpleaniosInmutable = persona => ({
            ...persona,
            edad: persona.edad + 1
        })

        // asi no funciona. :-)
        // const cumpleaniosInmutable = persona => ({
        //     ...persona,
        //     edad: persona.edad++
        // }

Las estructuras inmutables te ayudan a no tener que encontrar errores, escondidos en el programa. Aveces llega a tal grado la paranoya que crees que un parentesis te afectó.

Con el operador “spread” nos aseguramos que cada propiedad obtenida del objeto original en el nuevo objeto que asignemos, dejen de ser mutables por culpa del valor por referencia de los objetos.

entiendo que para que suba la edad el crea las otras constantes, si llama a sacha29 varias veces seguira siendo edad 29, es interesante

Excelente!!

Perfecto.

En este curso he aprendido muchas cosas, lo que mas me ha causado impacto fue lo de la asignación desestructurante (destructuring assignment).

Resumen Clase:
Nos permiten deshacernos de los efectos de lados que nos llevan a errores o bug, Una desventaja de esta es que tenemos que definir una nueva variable para cada vez que se llame la función principal.

Muy bien, gracias por la aclaración.

Genial.

pero tambien esto ocupa mas espacio en memoria.

Ok!

Usando los principios de la programación funcional, hará que desarrollemos software más legible.

Saber esto es muy util para tener mayor control sobre el programa.
Sin embargo pienso que hay ocasiones donde no es tan rentable aplicarlo, por ejemplo cuando queremos procesar un dato, (llamese objeto, array u otros) y trabajar con ellos en el resto del programa, claro está que si el flujo lo permite.

Entendido.

Entonces es mejor crear un objeto nuevo y no modificar el objeto original

Para no generar daño colateral debemos copiar el objeto y crear uno nuevo pero siendo consientes de que consumiremos más memoria

var dbz = {
            nombre: 'David',
            apellido: 'Baez',
            edad: 44
        }
        // const cumpleanos = persona => persona.edad++
        const cumpleanosInmutable = persona => ({
            ...persona,
            edad: persona.edad + 1
        })

Es decir, antes de aplicar una y otra técnica, debemos analizar con precisión qué es lo que queremos lograr con las variables.

const cumpleañosInmutable = persona => ({
…persona,
edad : persona.edad + 1
})

justo necesito utilizar los datos inmutables…

Alguien mas ha notado que JavaScript, el lenguaje más popular del mundo, está evolucionando hacia un lenguaje fuertemente tipado y que de hecho ya tocó desarrollar TypeScript? Al final la informática no ha cambiado desde C.

estructura inmutables

I share my notes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Entiende los closures de JavaScript </title>
</head>
<body>
    <script>
        const sacha ={
            nombre: 'sacha',
            apellido: 'Lifszyc',
            edad: 28
        }

        //const cumpleaños = persona => persona.edad++
        
        const   cumpleanosInmutable = persona =>({ //la usamos para no modificar al objeto en su parametro edad, creando un nuevo objeto en memoria
            ...persona,
            edad: persona.edad+1
        })

        /* lo que pasa en consola
        sacha
        {nombre: "sacha", apellido: "Lifszyc", edad: 28}
        cumpleanosInmutable (sacha)
        {nombre: "sacha", apellido: "Lifszyc", edad: 29}
        sacha
        {nombre: "sacha", apellido: "Lifszyc", edad: 28}
        */

    </script>
</body>
</html>```

Gracias Sacha, muy buena la explicación

Aqui les dejo mi código :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estructuras_inmutables</title>
</head>
<body>
    <script>
const angie = {
    nombre: `angie`,
    apellido: `garcia`,
    edad: 28
}

 const cumpleañosInmutable = persona => ({
     ...persona,
     edad: persona.edad + 1
 }) 
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>Clase 41 - Estructuras de datos inmutables</title>
</head>
<body>
    <script>
        const leo = {
            nombre: 'Leonardo',
            apellido: 'Bravo',
            edad: 27
        }
        
        // const cumpleanos = persona => persona.edad++
        
        const cumpleanosInmutable = persona => ({
            ...persona,
            edad: persona.edad + 1
        })
    </script>
</body>
</html>```

Interesante, lo pondré en practica y en que casos laborales se puede aplicar?