210421. Today I Learned(TIL) : Immutability와 Mutability(+원시 자료형과 참조 자료형)

자바스크립트에서 참조 자료형을 다룰 때, immutable한 메서드와 mutable한 메서드를 구분해서 사용해야하는 경우가 생각보다 많다는 것을 알고 자바스크립트에서 데이터의 가변성(mutability)과 불변성(immutability)에 대해 정리해보려고 한다.

그에 앞서, 먼저 원시 자료형(primitive data)과 참조 자료형(reference data)에 대해 정리해보자.

1) 원시 자료형(primitive type data)

• 객체가 아니면서 메소드를 가지지 않는 6가지 타입 -> string, number, bigint, boolean, null, undefined, symbol
• 변수 하나당 하나의 데이터만을 담고 있음
• 변수를 선언을 하게 되면 'stack'이라는 저장공간에 변수이름과 데이터가 함께 저장됨
• 원시 자료형은 데이터를 복사할 때, 데이터 자체가 복사되기 때문에 복사본을 수정해도 원본 데이터에는 영향을 주지 않음(immutable)

2) 참조 자료형(reference type data)

• 배열, 객체, 함수 등
• 하나의 변수에 여러 개의 데이터를 담고 있음
• 'heap'이라는 공간에 데이터의 내용을 보관하고, 'heap'의 주소를 'stack'에 저장
• 데이터를 호출할 때에는 'stack'에 저장되어 있는 주소를 참조하여 'heap'에서 찾아서 반환함
• 참조 자료형은 데이터를 복사할 때, 데이터 자체가 아닌 데이터의 주소를 복사하기 때문에 복사본 데이터를 수정하면 원본 데이터에도 영향을 줌(mutable)

1) 얕은 복사(shallow copy)

• 원본 데이터의 주소값을 복사함
• 복사본 데이터와 원본 데이터가 같은 주소값을 참조함
• 복사본 데이터를 수정하면 원본 데이터도 함께 수정됨(영향을 받음)
  --> mutable

2) 깊은복사(deep copy)

• 데이터 값 자체를 복사

• 복사본 데이터와 원본 데이터가 다른 주소값을 참조함(원본 데이터와의 참조가 완전히 끊김)

• 복사본 데이터를 수정해도 원본 데이터에는 영향을 주지 않음
  --> immutable

  ---

☑️ immutable한 메소드

.slice

let a = [1,2,3];
b = a.slice();
b[1] = 0;
console.log(b) = [1, 0, 3];
console.log(a) = [1, 2, 3];

☑️ mutable한 메소드

.pop

a.pop();
console.log(a) = [1, 2];

.push

let d = [4, 5, 6];
d.push(7);
console.log(d) = [4, 5, 6, 7];

.shift

let e = [7, 8, 9];
e.shift();
console.log(e) = [8, 9];

.unshift

let f = [10, 11, 12];
f.unshift(9);
console.log(f) = [9, 10, 11, 12];