생활코딩의 JavaScript Immutability 강의를 정리하여 작성한 내용입니다.

---

2. 불변의 함수

2-1. 불변의 함수 만들기

JacaScript의 함수는 파라미터의 인자가 원시 데이터 타입인 경우와 객체인 경우 그 동작방법이 달라진다.

객체가 함수의 인자로 전달되어, 객체 자신(원본)의 프로퍼티의 값(primitive 타입, string)이 변경되는 경우:

function fn(person){
	person.name = 'lee';
}
var o1 = {name:'kim'};
fn(o1);
console.log(o1); // {name: "lee"}

객체가 함수의 인자로 전달되어, 객체 자신(원본)의 프로퍼티의 값(primitive 타입, string)의 불변성이 유지되는 경우:

• 함수 내부에서 인자로 전달받은 객체를 복사
• 복사한 객체의 프로퍼티를 수정
• 수정한 객체를 리턴
• 함수가 리턴한 객체를 새로운 변수에 할당하여 사용

function fn(person){
	person = Object.assign({}, person); // 함수 내부에서 인자로 전달받은 객체를 복사
	person.name = 'lee'; // 복사한 객체의 프로퍼티를 수정
	return person; // 수정한 객체를 리턴
}
var o1 = {name:'kim'};
var o2 = fn(o1); // 리턴 받은 객체를 새로운 변수에 할당
console.log(o1, o2); // {name: "kim"} {name: "lee"}

객체가 함수의 인자로 전달되어, 객체 자신(원본)의 프로퍼티의 값(primitive 타입, string)의 불변성이 유지되는 경우2:

• 함수에 전달된 객체를 복제하여 새로운 변수에 할당
• 새로운 변수를 함수의 인자로 전달

function fn(person){
	person.name = 'lee';
}
var o1 = {name:'kim'};
var o2 = Object.assign({}, o1); // 원본 객체를 복제하여 새로운 변수에 할당
fn(o2); // 복제된 객체가 담긴 변수를 함수에 전달
console.log(o1, o2); // {name: "kim"} {name: "lee"}

2-2. 가변과 불변 API 비교

JavaScript의 API 중에 원본을 immutable하게 처리하는 API와 mutable하게 처리하는 API를 비교하면서 "4. 불변의 함수 만들기"에서 살펴본 메커니즘이 실제로 현실에서 어떻게 발현되는지 ARABOZA.

원본 객체가 변경되는 경우

var score = [1,2,3];
score.push(4);
console.log(score); // [1, 2, 3, 4]

원본 객체를 복제하여 원본의 불변성을 유지하는 경우

var score = [1,2,3];
// score.push(4);
var score2 = score.concat(4);
console.log(score, score2); // [1, 2, 3] [1, 2, 3, 4]

원본 객체를 변경하는 것이 유리한 경우:

• 수 많은 변수들이 동일한 원본 객체를 참조하고 있는데, 전부 수정해야 하는 경우

var score = [1,2,3];
var a = score;
var b = score;
var c = score;
// 수 많은 변수들이 객체(배열) score를 참조 ...
score.push(4);
console.log(score, a, b, c); // [1, 2, 3, 4] [1, 2, 3, 4] [1, 2, 3, 4] [1, 2, 3, 4]

원복 객체의 불변성을 유지하는 것이 유리한 경우:

• 수 많은 변수들이 동일한 원본 객체를 참조하고 있는데, 그 값이 변경되면 안됨
• 그렇지만 원본 객체의 값을 가져다가 수정해서 사용하고자 하는 경우

var score = [1,2,3];
var a = score;
var b = score;
var c = score;
// 수 많은 변수들이 객체(배열) score를 참조 ...
// score.push(4);
var score2 = score.concat(4);
console.log(score, score2, a, b, c); // [1, 2, 3] [1, 2, 3, 4] [1, 2, 3] [1, 2, 3]

JavaScript에서 불변성과 성능 사이에는 trade-off 관계가 성립:

• 원본 객체를 복제해서 사용하면 원본 객체의 불변성을 유지할 수 있다. 하지만 성능상 손해를 본다.
• 원본 객체를 그냥 수정하면 성능이 빠르다. 하지만 코드가 뜻하지 않은 동작을 할 수도 있다.

결론적으로 상황에 따라서 장점을 잘 살려서 사용하여야 한다.