Back to blog

Не мутируйте объекты

Во фронтентд-разработке(с использованием реактивных фреймворков в частности) плохой практикой является мутирование объекта. 

То есть вместо того, чтобы изменять какой-то объект, следует сделать на его основе новый и, в процессе создания, изменять элементы.


Для этого хорошо подходят такие функции как map, filter или оператор …


Несколько примеров. 


// возвращает вместо всего объекта только значение определённого поля

const newObject = object.map(item => item.field);


// оставляет только элементы, у которых поле field равно someValue

const newObject = object.filter(item => item.field === someValue);


Но чаще всего нам нужно изменить какое-то одно свойство и вместо того, что писать такую конструкцию


let newObject = object; // мы же помним, что мутировать текущий объект плохо?

newObject['neededFiled'] = 'newValue';

return newObject;


Можно сделать короче и красивее


return { …object, neededFiled: 'newValue'};


Элегантный способ удалить поле объекта, не мутируя исходный объект.


const myObject = {

   a: 1,

   b: 2,

   c: 3

};

const { a, ...noA } = myObject;

console.log(noA); // => { b: 2, c: 3 }


Оператор rest(…) сохранит в Констанцу noA все оставшиеся элементы, которые мы явно не выделили. 

Вот такой небольшой лайфхак. 


© 2020 shogenov.com