¿Qué es inmutabilidad?

Inmutabilidad

¿Qué es inmutabilidad?

Algo que no puede ser cambiado después de su creación. - RAE

Redux no rendirazá la UI si no hay cambios entre el estado inicial y el estado final.

const updateAge = (userInfo) => {
  return {
    ...userInfo,
    age: userInfo.age + 1,
  };
}

const userInfo = {
  name: 'Miguel',
  age: 23,
  email: '[email protected]'
}

console.log('userInfo BEFORE: ', userInfo);
console.log('userInfo AFTER: ', userInfo);
console.log('updatedInfo: ', updateAge(userInfo));

Pero la inmutabilidad también tiene desventajas:

• Generación constante de objetos
• Propenso a errores humanos
• Menos trazabilidad

Inmutabilidad

Algo que no puede ser cambiado después de su creación

¿Por que es importante y en que se relaciona con Redux?

• Redux no indicara a la UI que debe renderizar nuevamente si su estado inicial y el estado retornado son exactamente iguales

Mutabilidad en JS

const updateAge = (userInfo) => {
    userInfo.age = userInfo.age + 1 
    return userInfo
}

const userInfo = {
    name: 'juan',
    age: 25,
    email: '[email protected]'
}

console.log('Before userInfo: ', userInfo) // {name: 'juan', age: 25, email: '[email protected]'} 

const updateUserInfo = updateAge(userInfo) 
console.log('After userInfo: ',userInfo) // {name: 'juan', age: 26, email: '[email protected]'}
console.log('updateUserInfo: ',updateUserInfo) // {name: 'juan', age: 26, email: '[email protected]'}

Inmutabilidad en JS

• Object.assign

const updateAge = (userInfo) => {
    return Object.assign({}, userInfo, { age: userInfo.age + 1 })
}

const userInfo = {
    name: 'juan',
    age: 25,
    email: '[email protected]'
}

console.log('Before userInfo: ', userInfo) // {name: 'juan', age: 25, email: '[email protected]'}

const updateUserInfo = updateAge(userInfo) 
console.log('After userInfo: ',userInfo) // {name: 'juan', age: 25, email: '[email protected]'}
console.log('updateUserInfo: ',updateUserInfo) // {name: 'juan', age: 26, email: '[email protected]'}

• Spread Operator

const updateAge = (userInfo) => {
    return { ...userInfo, age: userInfo.age + 1 }
}

const userInfo = {
    name: 'juan',
    age: 25,
    email: '[email protected]'
}

console.log('Before userInfo: ', userInfo) // {name: 'juan', age: 25, email: '[email protected]'}

const updateUserInfo = updateAge(userInfo) 
console.log('After userInfo: ',userInfo) // {name: 'juan', age: 25, email: '[email protected]'}
console.log('updateUserInfo: ',updateUserInfo) // {name: 'juan', age: 26, email: '[email protected]'}

Desventajas

• Generación constante de objetos
• Propenso a errores humanos
• Menos trazabilidad

Otro factor a tener en cuenta es que tanto el Spread Operator como Object.assing no funcionan con objetos que tienen otros objetos por dentro, lo que estaríamos copiando seria la referencia al objeto

const obj = {name: 'juan', age: 25, pleasures: { color: 'black' } }
const obj2 = { ...obj }

console.log(obj) // {name: 'juan', age: 25, pleasures: {color: 'black'}}
console.log(obj2) // {name: 'juan', age: 25, pleasures: {color: 'black'}}
console.log(obj.belongings == obj2.belongings) // true 

si modificamos alguna propiedad del objeto numero uno, la del objeto numero dos quedaría igual, son objetos con clave y valor igual, pero son objetos diferentes, es decir, tienen una referencia distinta

const obj = {name: 'juan', age: 25, pleasures: { color: 'black' } }
const obj2 = { ...obj }

obj.name = 'oscar'

console.log(obj) // {name: 'oscar', age: 25, pleasures: {color: 'black'}}
console.log(obj2) // {name: 'juan', age: 25, pleasures: {color: 'black'}}
console.log(obj.belongings == obj2.belongings) // true 

pero si llegamos a modificar el color (propiedad del objeto dentro del objeto)

const obj = {name: 'juan', age: 25, pleasures: { color: 'black' } }
const obj2 = { ...obj }

obj.pleasures.color = 'white'

console.log(obj) // {name: 'juan', age: 25, pleasures: {color: 'white'}}
console.log(obj2) // {name: 'juan', age: 25, pleasures: {color: 'white'}}
console.log(obj.belongings == obj2.belongings) // true 

vemos que tanto en el objeto numero uno como en el objeto numero dos la propiedad color cambio, ambos objetos en su propiedad pleasures tienen como valor la referencia a un mismo objeto

🤔 Porque no se debe copiar un objeto como se copian los otros tipos de variables en JavaScript?

Comúnmente cuando quieres copiar el valor de una variable dentro de otra puedes hacer lo siguiente:

let myNumber = 5;
let myOtherNumber = myNumber;

Ahora dentro de la variable “myOtherNumber” esta la copia del valor que esta en “myNumber” y puedes editar el valor sin afectar al original.

Qué pasa si intentamos copiar un objeto de la misma forma?

let myObject = {
 	myNumber
};
let myOtherObject = myObject;

En este caso al cambiar de alguna forma el objeto en “myOtherObject” también se verían reflejados esos cambios en el objeto que esta en “myObject”.

Pero porque pasa eso???

Cuando inicializas una variable, esta señala a su valor en memoria y cuando creas una copia, la nueva variable copia lo que esta señalando la variable original.

Con los objetos es diferente:

Las variables con objetos no señalan a su valor, señalan hacía una referencia, por lo tanto al crear una copia de un objeto como se intento anteriormente, la nueva variable tendrá la referencia.

Al tener los dos objetos la misma referencia, editar uno de ellos es como editar al otro, porque al final los dos (por medio de sus referencias) señala al mismo objeto.

Es en esta caso donde para copiar realmente el valor de un objeto puedes usar Object.assign y el spread operator.

Ahora tenemos structuredClone una función nativa para copiar un objeto con todos sus niveles de profundidad

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

Qué es inmutabilidad
Algo que no puede ser cambiado después de su creación.

Que complejo de interpretar porque pocas veces se me ocurrio alterar un valor constante, pues por algo es constante 🤯

El concepto de Inmutabilidad es sencillo y poderoso. Un valor inmutable es algo que no puede ser cambiado.