[모던 자바스크립트 Deep Dive🦎] 11장 : 원시 값과 객체의 비교

📍 원시 타입

• 변경 불가능한 값 (읽기 전용 값)
• 원시 값을 변수에 할당하면 변수에는 실제 값이 저장됨
• 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달됨 (값에 의한 전달)
• 원시 값을 할당한 변수에 새로운 원시 값을 재할당하면, 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장한 후, 변수는 새롭게 재할당한 원시 값을 가리킴
• 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없음

 

• 문자열
  • 문자열은 0개 이상의 문자로 이루어진 집합
  • 1개의 문자는 2바이트의 메모리 공간에 저장됨
  • 문자열은 유사 배열 객체이자 이터러블이므로 배열과 유사하게 각 문자에 접근 가능
  • 🔅 유사 배열 객체 : 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체

  var str = 'string';
  
  // 문자열은 원시 값이므로 변경할 수 없다.
  // 이때 에러는 발생하지 않는다.
  str[0] = 'S';
  console.log(str);  // string
  

 

• 값에 의한 전달
  • 변수에 원시 값을 갖는 변수를 할당하면, 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값
  • 따라서 한쪽에서 재할당을 통해 값을 변경해도 다른 쪽에 영향을 주지 않음

var score = 80;
var copy = score;

console.log(score === copy);  // true

score = 100;

// score 변수와 copy 변수는 서로 다른 메모리에 저장된 별개의 값
// score 변수의 값을 변경해도 copy 변수의 값에는 아무런 영향이 없다.
console.log(score, copy);     // 100 80
console.log(score === copy);  // false

 

📍 객체 타입

• 객체를 변수에 할당하면 변수에는 참조 값이 저장됨
• 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달됨 (참조에 의한 전달)
• 객체는 프로퍼티의 개수가 정해져 있지 않으며, 동적으로 추가/삭제 가능
• 원시 값처럼 확보해야 할 메모리 공간의 크기를 사전에 정의할 수 없음
• 자바스크립트는 클래스 없이 객체 생성 가능하며, 객체가 생성된 이후에 동적으로 프로퍼티와 메서드 추가 가능 ⇒ 편리하지만, 객체 생성 및 프로퍼티 접근에 비용이 더 많이 드는 비효율적인 방식
• 객체를 할당한 변수의 경우, “변수는 객체를 참조하고 있다” 혹은 “변수는 객체를 가리키고 있다”라고 표현함

var person = {
	name: 'Lee'
};

console.log(person);  // person 변수는 객체 {name: 'Lee'}를 가리키고 있다.

 

• 객체는 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 단점이 있음

 

🔅 얕은 복사 & 깊은 복사

• 객체를 프로퍼티 값으로 갖는 객체의 경우,
• 얕은 복사는 참조 값을 복사
• 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사 ⇒ 원시 값처럼 완전한 복사본을 만듦

 

• 참조에 의한 전달
  • 원본의 참조 값이 복사되어 전달
  • 두 개의 식별자가 하나의 객체를 공유
  • 원본 또는 사본 중 어느 한쪽에서 객체를 변경하면 서로 영향을 줌

  var person = {
  	name: 'Lee'
  };
  
  // copy와 person은 동일한 객체를 참조함
  var copy = person;
  
  console.log(copy === person);  // true
  
  copy.name = 'Kim';
  person.address = 'Seoul';
  
  // 어느 한쪽에서 객체를 변경하면 서로 영향을 줌
  console.log(person);  // {name: "Kim", address: "Seoul"}
  console.log(copy);    // {name: "Kim", address: "Seoul"}

 

📍 예시

var person1 = {
	name: 'Lee'
}

var person2 = {
	name: 'Lee'
}

// 객체를 할당한 변수를 비교하면 참조 값을 비교함
console.log(person1 === person2);  // false

// 원시 값을 할당한 변수를 비교하면 원시 값을 비교함
console.log(person1.name === person2.name);  // true