TIL

🐤 JavaScript 객체와 불변성이란 ?

📌기본형 데이터와 참조형 데이터

💿 기본형 타입(Primitive type)...?
: 로우 레벨에서 직접 표현되는 불변의 데이터.

• Boolean 타입
• Null 타입
• Undefined 타입
• Number 타입
• BigInt 타입
• String 타입
• Symbol 타입

💿 참조형 타입(Reference type)...?

• Object
• Array
• Function
• Date
• regexp
• Map, WeakMap
• Set, WeakSet

📌 불변 객체를 만드는 방법

: 불변 객체는 생성 후 그 상태를 바꿀 수 없는 객체를 의미함.

• Object.freeze() 메서드를 이용하는 방법.

  객체를 동결한다고 표현한다. 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며 존재하는 속성의 불변성, 설정 가능성(configurability), 작성 가능성이 변경되는 것을 방지하고, 존재하는 속성의 값이 변경되는 것도 방지합니다. 또한, 동결 객체는 그 프로토타입이 변경되는것도 방지합니다. freeze()는 전달된 동일한 객체를 반환합니다.

const obj = {
  prop: 42
};
Object.freeze(obj);
obj.prop = 33;
// Throws an error in strict mode
console.log(obj.prop);
// expected output: 42

출처:https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

📌 얕은 복사와 깊은 복사

💾 **얕은 복사

: 객체의 '참조값(주소 값)'을 복사

const A = { name: '정원', age: 20};
const B = A;
console.log( A === B ); // true

B.name = '정호';
console.log(A.name); // 정호.

➡ 객체(A)를 직접 대입하는 경우, 참조에 의한 할당이 이루어지므로 둘은 같은 데이터(주소)를 가지고 있다.
때문에 B의 property를 수정하고, A를 출력해도 B값과 '동일'하다.

💾깊은 복사...?

: 객체의 '실제 값'을 복사.

const A = {name: '정원', age: 20};
const B = { ...obj };
B.name = '정호';

console.log( A === B ) // false
console.log( A.name ) // 정원

➡...(spread) 연산자를 통해 { }안에 A의 property를 복사하여 B에 할당하였다.
이제 A와 B는 다른 주소를 갖게되었다.

<모르는 단어 정리>

📃 바인딩이란?
식별자와 값을 연결하는 과정.
변수선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩하는 것이다.