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

원시 값과 객체의 비교

원시 값은 변경 불가능한 값

객체 타입의 값은 변경 가능한 값

 

원시 값을 변수에 할당하면 변수에는 실제 값 저장

객체를 변수에 할당하면 변수에는 참조 값 저장

 

원시 값을 다른 변수에 할당 -> 값에 의한 전달

객체를 다른 변수에 할당 -> 참조에 의한 전달

---

원시 값

변경 불가능한 값

원시 값은 변경 불가능한 값이다. 한번 생성된 원시 값은 읽기만 가능하고 변경 불가하다.

 

위 코드를 보면 새로운 메모리 공간을 확보한다.

원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 메모리 공간에 저장되어 있는 재할당 이전의 원시 값을 변경하는 것이 아니라 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장한 후, 변수는 새롭게 재할당한 원시 값을 가리킨다.

이러한 특성을 불변성이라고 한다.

 

불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다.

 

만약 원시 값이 변경 가능한 값이라면, 변수가 가리키던 메모리 공간의 주소를 바꿀 필요 없이 원시 값 자체를 변경하면 된다.

 

문자열과 불변성

자바스크립트의 문자열은 원시 타입이다. 원시 타입은 변경 불가능하다.

var str = 'string';
str[0] = 'S';

console.log(str); // string

첫 번째 index를 S로 변경했지만 string이 출력된다.

문자열은 변경 불가능한 값인 원시 타입이기 때문이다.

 

값에 의한 전달

변수에 원시 값을 갖는 변수를 할당하면, 할당받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다.

 

var score = 80;
var copy = score;

console.log(score, copy); // 80 80

 

 

 

score와 copy의 값은 다른 메모리 공간에 저장된 별개의 값이다.

 

 

 

var score = 80;
var copy = score;

console.log(score); // 80
console.log(copy); // 80

score = 100;

console.log(score); // 100
console.log(copy); // 80

score 변수와 copy 변수의 값 80은 다른 메모리 공간에 저장된 별개의 값이다.

따라서 sroce 변수를 변경해도 copy 변수의 값에는 어떠한 영향도 주지 않는다.

console.log(score, copy); // 100 80
console.log(score === copy); // false

 

 

 

 

객체

객체는 원시 값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정할 수 없다.

동적으로 추가되고 삭제할 수 있기 때문이다.

 

변경 가능한 값

객체는 변경 가능한 값이다. 객체를 할당한 변수는 참조 값을 갖는다.

var person = {
  name: 'Lee'
};

var person = {
  name: 'Lee'
};

// 프로퍼티 값 갱신
person.name = 'Kim';

// 프로퍼티 동적 추가
person.address = 'Seoul';

console.log(person); // {name: "Kim", address: "Seoul"}

객체는 여러 개의 식별자가 하나의 객체를 공유할 수 있다.

 

 

참조에 의한 전달

객체를 가리키는 변수를 다른 변수에 할당하면 원본의 값이 복사되어 전달된다.

var person = {
  name: 'Lee'
};

// 참조 값을 복사
var copy = person;

두 개의 식별자(person, copy)가 동일한 객체를 가리키고 있어 한쪽이 변경하면 서로 영향을 받는다.

 

 

var person1 = {
  name: 'Lee'
};

var person2 = {
  name: 'Lee'
};

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

 

 

 

하트 누르면 위 내용 전부 기억함