Основы JavaScript в Проектировании динамических страниц - Функциональные концепции - Неизменяемость

Неизменяемость предполагает невозможность внесения изменений в данные, объявляемые вне функции. Вместо изменения исходных структур данных создаются копии этих структур, используемые вместо оригинала.

Рассмотрим примеры с объектом и массивом.

Объект color_lawn

let color_lawn = {
 title: "lawn",
 color: "#00ff00",
 rating: 0
}

в котором необходимо изменить свойство raiting.

Не правильный подход, нарушающий концепцию неизменяемости:

function rateColor(color, rating){
 color.rating = rating;
 return color;
}
console.log(rateColor(color_lawn, 5).rating) //5
console.log(color_lawn.rating); //5

Правильный подход, с использованием Object.assign()

var rateColor = function(color, rating){
 return Object.assign({}, color, {rating: rating});
}
console.log(rateColor(color_lawn, 5).rating) //5
console.log(color_lawn.rating); //0

Еще один правильный подход с помощью оператора распространения объекта ....

const rateColor = (color, rating) => ({
...color,
rating
});

Массив list

let list = [
 {title: "red"},
 {title: "lawn"},
 {title: "pink"}
]

не правильный подход

var addColor = function(title, colors){
  colors.push({title: title});
}

правильный подход, с использованием функции concat

const addColor = (title, colors) => colors.concat({title});

правильный подход с использованием оператора распространения ...

const addColor = (title, colors) => [...colors, {title}];