데이터를 불변하게 다루면 데이터들간의 간섭으로 인한 버그의 가능성을 획기적으로 낮출 수 있습니다. 또 데이터가 변경 되었는지 여부를 매우 쉽게 체크할 수 있습니다. 그 외에 Hot module reloading, time travel과 같은 고급 기법을 구현하는데 기초가 되기도 합니다.
from. 생활코딩

객체의 가변성

var o1 = { name: 'kim' };
var o2 = o1
console.log(o1 === o2); // 같은 객체를 가르키고 있기 때문에 true
o2.name = 'lee';
console.log(o1.name); // 같은 객체를 가르키고 있기 때문에 kim

객체의 복사

Object.assign() 메소드를 이용하여 immutability를 유지할 수 있다.

var o1 = { name: 'kim' };
var o2 = { Object.assign({}, o1) }
console.log(o1 === o2); // 서로가 다른 객체를 가르키고 있기 때문에 false

중첩된 객체의 복사 (push vs concat)

var o1 = { name: 'kim', score: [1, 2] }
var o2 = Object.assign({}, o1);
o2.score.push(3);
console.log(o1.score); // [1, 2, 3] Object.assign()으로 할당 했는데도 같은 객체를 가르키게 된다.
o2.score = o2.score.concat(4);
console.log(o2.score); // [1, 2, 3, 4] concat은 새로운 배열을 만들어 리턴하기 때문에 더이상 o1.score와 같은 객체를 가르키지 않게 된다.
console.log(o1.score); // [1, 2, 3] o2.score와 다른 객체를 가르키게 됬음으로 그대로

push vs concat vs spread

push - 원본 데이터를 바꾼다.

var a = [1, 2, 3];
a.push(9); // returns 4 (a의 길이)
console.log(a); // [1, 2, 3, 9]

concat - 새로운 배열을 반환하고 원본 데이터를 바꾸지 않는다.

var a = [1, 2, 3];
a.concat(9); // returns [1, 2, 3, 9]
console.log(a); // returns [1, 2, 3]

spread - concat보다 나은 방법, 원본 데이터를 바꾸지 않는다.

var a = [1, 2, 3];
console.log([...a, 9]); // returns [1, 2, 3, 9]