JavaScript 객체와 불변성 (221118) - TIL8

1. 기본형 데이터와 참조형 데이터

• 기본형 데이터(Primitive Type)
  

기본형 데이터(Primitive Type)는 값을 그대로 할당하는 것이다.
변수 저장 영역의 값 주소만 변경된다.

• 기본형 데이터의 종류
  

숫자(Number)
문자열(String)
불리언(Boolean)
null
undefined
심볼(Symbol) ES6

• 참조형 데이터(Reference Type)
  

참조형 데이터(Reference Type)는 기본형 데이터의 경우 변수 저장 영역, 데이터 저장 영역과 더불어 프로퍼티 저장영역이 하나 더 추가로 필요하다.

• 참조형 데이터(Reference Type) 종류
  

객체(Object) (객체는 아래의 자료형을 모두 포함)
     배열(Array)
     함수(Function)
     날짜(Date)
     정규표현식(RegExp)
     Map ES6
     WeakMap ES6
     Set ES6
     WeakSet ES6

• JS 메모리 영역

stack memory 변수 기본형 데이터가 저장되는 메모리 영역 => 정적 할당

heap memory 참조형 데이터가 저장되는 메모리 영역 => 동적 할당(메모리 할당과정이 하나더늘어남)

• JS 메모리 할당의 기본 원리와 특징

기본적으로 메모리 영역 하나 안에는 한가지의 데이터 값만 들어간다.
(객체의 경우 한개의 메모리 영역에 모두 할당할 수 없음 => 프로퍼티 데이터 저장 영역 사용)

- 데이터 할당 시에는 느리다.

- 사용하는 과정에서 값 비교시 거의 들지 않는다.(데이터 값이 같은 주소인 경우 값이 동일하기 때문에)

- 재사용이 가능하기 때문에 메모리 낭비를 최소화 (데이터 값이 동일할 경우 이미 존재하는 동일한 주소로 지정되면 되기 때문에)

! 참조하는 대상이 없는 메모리에 경우 참조 카운트 0이라고 한다. (garbage collect, GC의 대상 => 향후 사라짐)

2. 불변객체 만들기

<script>
	let obj1 = {c: 10, d: 'ddd'};
    let obj2 = obj1;
    let obj3 = {c: 10, d: 'ddd'};
        
    obj2.c = 20;
        
    console.log(obj1); // {c: 20, d: 'ddd'}
    console.log(obj2); // {c: 20, d: 'ddd'};
    console.log(obj3); // {c: 10, d: 'ddd'};
</script>

위의 경우 obj1이 원본 객체, obj2는 복제된 객체이지만 obj2가 변경될 때 원본객체의 값도 함께 바뀐다.

이러한 이유는 변수영역 -> 데이터 영역 -> 프로퍼티 영역 영역으로 구성되는데
obj2 생성시 obj1과 데이터 영역(객체이기 때문에 범위로 생성)을 공유(같은 주소값을 지님)하게 된다.

obj2.c = 20;을 입력해서 obj2의 프로퍼티 영역의 값이 변경되는데 해당 영역(주소값)을 obj1과 공유하고
있기 때문에 obj1의 프로퍼티 값도 바뀌게 되는 것이다.

따라서 불변 객체를 만들기 위해서는 복제 객체를 사용하면 안되고 항상 새로운 객체를 사용해야 한다.

3. 얕은 복사(shallow copy)와 깊은 복사(deep copy)

얕은 복사(shallow copy)를 이해하기 위해서는 깊은 복사(deep copy)를 먼저 이해하는 것이 도움이 된다.

깊은 복사는 대상을 복사할 때 해당 대상의 값만을 복사하는 것이다.
새로 생성된 값이 변경되어도 원본 값에는 영향이 없다.

<script>
  let num1 = 1;
  let num2 = num1;

  num2 = 2;

  console.log(num1); // 1
  console.log(num2); // 2
</script>

복사하는 기본형 데이터이기 때문에 원본 자체를 복사하는 것이 아니라 값만 불러와서 새롭게 생성된다.

반면에 얕은 복사(shallow copy)는 대상 자체를 복사해서 새로 생성된 것과 원본 자체가 같게 되는 것을 말한다.
객체를 복사하는 경우 얕은 복사가 일어나는 것을 볼 수 있다.

<script>
  const originObj = {
              name: 'pablaw',
              num: 7,
          };
  let shallow = originObj;

  shallow.num = 10;

  console.log(originObj); // {name: 'pablaw', num: 10}
  console.log(shallow); // {name: 'pablaw', num: 10}
</script>

객체는 무수히 많은 키값을 가질 수 있기 때문에 따로 깊은 복사가 일어난다면 굉장히 비효율적으로 동작하게 된다.