Nuevos métodos Inmutables en JavaScript para 2023

toReversed.js

// 3. toReversed

const studentGrades = [90, 88, 98, 61, 78, 62, 64];
// modifica el array original
studentGrades.reverse(); // [ 61, 62, 64, 78, 88, 90, 98 ]

const newStudentGrades = [90, 88, 98, 61, 78, 62, 64];
// Immutabilidad! Devuelve un nuevo array sin modificar el original
newStudentGrades.toReversed();

toSorted.js

// 1. toSorted

const studentGrades = [90, 88, 98, 61, 78, 62, 64];
// modifica el array original
studentGrades.sort() // [ 61, 62, 64, 78, 88, 90, 98 ]

const newStudentGrades = [90, 88, 98, 61, 78, 62, 64];
// Immutabilidad! Devuelve un nuevo array sin modificar el original
newStudentGrades.toSorted()

toSpliced.js

// 2. toSpliced

const shoppingCart = [{
    product: 'Nintendo Switch',
    price: 349,
    quantity: 1
}, {
    product: 'Zelda: Tears of the Kingdom',
    price: 59,
    quantity: 1
}, {
    product: 'Switch Pro Controller',
    price: 59,
    quantity: 2
}];

// modifica el array original
shoppingCart.splice(1,1) // [ { product: 'Zelda: Tears of the Kingdom', price: 59, quantity: 1 } ]

const newShoppingCart = [{
    product: 'Nintendo Switch',
    price: 349,
    quantity: 1
}, {
    product: 'Zelda: Tears of the Kingdom',
    price: 59,
    quantity: 1
}, {
    product: 'Switch Pro Controller',
    price: 59,
    quantity: 2
}];

// Immutabilidad! Devuelve un nuevo array sin modificar el original, 
// con todos los items menos el "spliced".
newShoppingCart.toSpliced(1,1) // [{ product: 'Nintendo Switch',...}, { product: 'Switch Pro Controller',...}]

with.js

// 4. with

const todos = [
	{
		id: 1,
		text: "Aprender JavaScript",
		completed: false,
	},
	{
		id: 2,
		text: "Aprender React",
		completed: false,
	},
];

// modifica el array original
todos[0].completed = true;
// [{ id: 1, text: 'Aprender JavaScript', completed: true }, { id: 2, text: 'Aprender React', completed: false }]

const newTodos = [
	{
		id: 1,
		text: "Aprender JavaScript",
		completed: false,
	},
	{
		id: 2,
		text: "Aprender React",
		completed: false,
	},
];

// Immutabilidad! Devuelve un nuevo array sin modificar el original
const newState = newTodos.with(0, { ...newTodos[0], completed: true });
// [{ id: 1, text: 'Aprender JavaScript', completed: true }, { id: 2, text: 'Aprender React', completed: false }]