[JavaScript] 8. 원시 값과 객체의 비교

📖 모던 자바스크립트 교재) 11장. 원시 값과 객체의 비교

 

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefinedm 심벌, 객체 타입)은 원시 타입과 객체 타입으로 구분할 수 있다.

• 원시 타입의 값
  • 변경 불가능한 값
  • 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값 저장
  • 값에 의한 전달 : 다른 변수에 할당하면 원본의 원시 값 복사되어 전달
• 객체(참조) 타입의 값
  • 변경 가능한 값
  • 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값 저장
  • 참조에 의한 전달 : 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달

 

---

01. 원시 값

1) 변경 불가능한 값

원시 타입의 값은 변경 불가능한 값이다. 
한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다.

 

2) 문자열과 불변성

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

 

이것은 문자열이 생성된 후 변경된 것인지, 코드를 통해 알아보자.

 

🖥️ 예제 코드

var str = 'Hello';
str = 'world';

첫 번째 문 -> 문자열 'Hello' 생성, 식별자 str은 문자열 'Hello'가 저장된 메모리 공간의 첫 번째 메모리 셀 주소를 가리킴.

두 번째 문 -> 새로운 문자열 'world'를 메모리에 생성, 식별자 str은 이것을 가리킴.

 

이때 문자열 'Hello'와 'world'는 모두 메모리에 존재한다.

식별자 str은 문자열 'Hello'를 가리키고 있다가 문자열 'world'를 가리키도록 변경되었을 뿐인 것이다.

 

 

3) 값에 의한 전달

"값에 의한 전달" 이라고는 하지만, 값을 전달하는 것이 아니라 메모리 주소를 전달한다.
단, 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.

 

 

🖥️ 예제 코드

var score = 80;
var copy = score;

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

score = 100;

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

위 예제에서 ? 에는 무엇이 들어가야 할까.

"변수에 변수를 할당했을 때 무엇이 어떻게 전달되는가?" 에 대한 답변이 될 것이다.

 

copy 변수에 원시 값을 갖는 score 변수를 할당하면, 할당받는 변수(copy)에 할당되는 변수(score)의 원시 값 80이 복사되어 전달된다.

➡️ score 변수에 새로운 숫자 값 100을 재할당하더라도, copy 변수에는 원시 값 80이 복사되어 전달되었기 때문에, 여전히 copy 변수의 값은 80이다.

 

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

 

변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달된다.
변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있기 때문이다.

※ 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다.

 

---

02. 객체

1) 변경 가능한 값

🖥️ 예제 코드

var person = {
    name: 'Lee'
};

객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값(reference value)에 접근할 수 있다.

참조 값은 생성된 객체가 저장된 메모리 공간의 주소, 그 자체다.

 

객체를 할당한 변수는 "변수는 객체를 참고하고 있다" 또는 "변수는 객체를 가리키고 있다"라고 표현한다.

위 예제에서 person 변수는 객체 { name: 'Lee' }를 참고하고(가리키고) 있다.

 

객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다.

-> 재할당 없이 프로퍼티 동적 추가 / 프로퍼티 값 갱신 / 프로퍼티 자체를 삭제 가능

 

💡 얕은 복사와 깊은 복사

• 얕은 복사 : 1단계만 복사
• 깊은 복사 : 재귀적으로 원시 값까지 전부 복사

 

2) 참조에 의한 전달

🖥️ 예제 코드

var person = {
    name: 'Lee'
};

// 참조 값을 복사(얕은 복사)
var copy = person;

 

➡️ 객체를 가리키는 변수(원본, person) -> 변수(사본, copy)에 할당하면 원본의 참조 값이 복사되어 전달된다.

➡️ 두 개의 식별자(person, copy) 가 하나의 객체를 공유하게 된다.

➡️ 원본 또는 사본 중 어느 한쪽에서 객체를 변경(객체의 프로퍼티 값을 변경하거나 프로퍼티 추가, 삭제)하면 서로 영향을 주고 받는다.

 

 

📖 참고자료

https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C/dashboard

[무료] 모던 자바스크립트 딥다이브 스터디 - 인프런 | 강의