[JS] Mutation이란? mutable vs. Immutable (cf. const 키워드)

# Mutation이란?

프로그래밍 세계에서 Mutate란 값을 바꾸는 것, 즉 "change the value" 와 동의어이다.

 

이에 따라, Javascript에서 데이터 타입은 값을 바꿀 수 있는지 여부에 따라서 다음의 2가지로 분류 된다.

 

• Immutable: 값을 바꿀 수 없는 데이터 타입. (e.g. 원시 타입)
• Mutable: 값을 바꿀 수 있는 데이터 타입. (e.g. 참조 타입)

---

# 재할당(Reassignment) vs. 변경(Mutation)

주의할 점은 값의 재할당(Reassignment)와 값의 변경(Mutation)은 다른 의미라는 점이다.

 

예를 들어, myName이라는 변수에 새로운 string 값을 재할당하는 것은 가능하지만.

 

let myName = "Teddy";

myName = "Jane"; // 재할당(Reassignemnt)
console.log(myName); // Jane

 

"Jane" 이라는 stirng 값 자체를 변경하는 것은 불가능하다. (string 데이터 타입은 immutable이다)

 

let myName = "Jane";

myName[2] = "k"; // 값변경(Mutation) - 작동 X
console.log(myName); // Jane - 변경 불가

"Jane"[2] = "k"; // 작동 X

 

즉 mutable, imutable은 string  값 자체를 변경 가능한가에 관한 것이지,

변수에 다른 값을 재할당하여 교체할 수 있는가에 관한 것이 아니다.

 

# const 

`const` 키워드로 선언된 변수는 재할당(Reassign)을 금지할 뿐이다.

 

따라서 const로 선언된 변수에 할당되어 있는 object나 array 내부의 값을 변경하는 것은 얼마든지 가능하다.

이는 const로 선언된 변수에 할당된 reference 주소 값을 변경하지 않기 때문이다.

---

# Immutable vs.  Mutable

# 원시 타입은 Immutable 이다.

원시타입(Primitive type)인 string, number, boolean 등은 immutable이다.

따라서 값 자체는 변경(change)이 불가능하다. 물론 변수의 재할당(Reassign)은 가능하다.

 

let myName = "Teddy";
myName[0] = "R"; // 값 변경은 불가능!

console.log(myName); // 여전히 "Teddy" 가 찍힌다.

myName = "Kyle"; // 재할당은 가능!
console.log(myName); // 재할당된 "Kyle" 이 찍힌다.

 

# 참조 타입은 Mutable이다.

참조 타입(Strucural type)인 object, array 등은 Mutable이다.

따라서 내부의 값을 변경(change)할 수 있다.

 

예를 들어 배열 의 내부 요소는 변경 가능하다.

 

let arrX = [1, 2];
arrX[0] = 100; // 배열 내부의 요소 값 변경 가능!

console.log(arrX); // [100, 2]

 

객체 또한 내부 속성 값 변경이 가능하다.

 

const person = {
  name: "Teddy",
  job: "developer",
};

person.job = "designer"; // 객체 내부 속성 값 변경

console.log(person.job); // designer

 

const로 선언한 객체이지만, 재할당만 불가할 뿐 객체 내부의 값은 변경이 가능하다.

---

※ 관련 글

[JS] Shallow Copy & Deep Copy 기본 개념, 원리 (feat. 값 vs. 레퍼런스 전달)