자바스크립트 딥다이브 11. 원시 값과 객체의 비교

11. 1. 원시 값

11. 1. 1. 변경 불가능한 값

• immutable: 변경 불가능
• 변수 값은 재할당을 통해 교체할 수 있다.
• 상수는 재할당조차 금지되어 있다. 상수랑 변수는 구별해야겠지?
• 이로 인해 신뢰성을 보장하고, 상태 변경을 추적할 수 있다.
• TypeScript의 readonly 와 가까운 친척 사이.

 

11. 1. 2. 문자열과 불변성

• 몇 개의 문자로 이뤄졌느냐에 따라 필요한 메모리 공간의 크기가 결정된다.
• 문자 하나 당 2바이트
• 반면에 숫자는 크기와 상관없이 8바이트
• 유사 배열 객체 array-like object
  
  • 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체
  • 문자열이 그러하다. 음? 근데 객체라메.. 그거슨 객체처럼 동작하는 래퍼 객체라서 자동 변환되기 때문.
• 원시값과 래퍼 객체
  • 나랑 같은 생각하고 있는 거 안다. 그 래퍼 아니다. wrapper object임.
  • 마침표 표기법(또는 대괄호 표기법) 쓰면 자바스크립트 엔진이 지 맘대로 원시값을 객체로 변환해서 계산해버림. 위의 경우가 바로 그러한 경우. 쇼미더 객체
  • 볼 일 다 보면 다시 원시값으로 되돌려줌.
  • 이렇게 자기도 모르는 새 수술 당하고 만들어진 임시 객체들을 래퍼 객체(wrapper object)라 부름.

var str = 'show';

console.log(str[0]); // s

// 원시 값인 문자열이 객체처럼 동작한다.
console.log(str.length); // 4
console.log(str.toUpperCase()); // SHOW

 

11. 1. 3. 값에 의한 전달

• 변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달된다.
• → 값의 주소 값을 전달하는 게 아니다!

 

11. 2. 객체

11. 2. 1. 변경 가능한 값

• mutable
• 객체는 객체가 저장된 메모리의 주소를 값으로 갖는다. (메모리의 주소 = 참조 값)
• 재할당 없이 변경, 추가, 갱신, 삭제 할 수 있다.
• 부작용: 여러 개의 식별자가 하나의 객체를 공유할 수 있다.

🔍 얄팍하게 다시 보는 얕복, 깊복

• 얕은 복사: 객체에 중첩된 객체는 참조 값을 복사한다.
• 깊은 복사: 객체에 중첩된 객체까지 복사해서 원시 값처럼 완전한 복사본을 만든다.

 

11. 2. 2. 참조에 의한 전달

• 메모리 주소 값을 갖는 변수의 사본을 만들면, 두 개 모두 한 객체를 가르키고 있다. 저장된 메모리 주소는 다르지만 동일한 참조 값을 갖는다. 하나의 객체를 공유하고 있다.
• 한쪽에서 객체의 내용을 변경하면 다른 쪽이 영향을 받는다.

// 예제 11-18
let person = '진우'
let person1 = {
  name: '진우'
};
let person2 = {
  name: '진우'
};

console.log(person1 === person2);  // false
console.log(person1.name === person2.name);  // true
person1['name']

 

• 다시 보는 얕복깊복 이미지

머리에 각인될때까지..