[JavaScript] 함수의 불변성(Immutability) 이란?

함수의 불변성이란?

함수 내부에서 외부로부터 주어진 parameter의 값 또는 상태를 변경하지 않아야 함을 뜻한다.

값 또는 상태 변경이 필요한 경우에는 새로운 값 또는 객체(Object)를 만들어서 반환해야 한다.

 

---

Primitive Type 데이터

primitive 데이터의 경우 값을 복사(pass by value)하기 때문에, 함수에 매개 변수로 전달된 데이터를 변경하더라도, 원래 변수는 바뀌지 않는다.

그럼에도, 다른 개발자나 사용자들이 함수를 사용함에 있어 함수 내부에서 원래의 값을 바꾸는 것은 좋지 않기 때문에

새로운 변수를 생성해서, 파라미터로 전달된 값을 할당한 이후에 변경하는 것이 바람직하다.

예를들어, const count = val, count = 6; 

이런식으로 count라는 새로운 변수를 함수 안에서 사용할 수 있도록 만들어 놓고, 이 변수를 가지고 변경하거나 활용하는 것이 좋다.

 

function countUp(val){
  val = 6;
  console.log(val); // 6
}

const start = 1;
countUp(start);
console.log(start) // 1

---

Object Type 데이터

반면, object 데이터의 경우에는 함수에 매개 변수로 전달되었을 때,

함수 내부에서 매개 변수로 전달된 object 데이터의 상태를 변경한다면

이 매개 변수는 결국 실제 객체의 주소를 가리키고 있으므로(pass by reference), 실제 객체의 상태가 변경됨을 주의해야 한다. 

(아래 코드에서 실제 객체 VIP의 name이 SON에서 Kane으로 변경되었다.)

따라서 매개변수로 받는 경우, 상태를 변경할 필요가 있을 경우에는 changeVIP 함수 내에 새로운 Object를 만들어서 변경하거나 반환해야 한다.

 

function changeVIP(vip){
  vip.name = 'Kane'
  console.log(vip); // { name: 'Kane', club: 'Tottenham' }
}

const VIP = {
  name: 'SON',
  club: 'Tottenham'
}

changeVIP(VIP);
console.log(VIP); // // { name: 'Kane', club: 'Tottenham' }