[JS] 자바스크립트 원시 값과 객체(Immutability, Mutability)

ECMAScript6(ES6)는 7개의 데이터 타입(number, string, boolean, undefined, null, symbol, object)을 제공한다.
이는 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있다.

 

자바스크립트 원시 타입(Primitive Type)

• 값의 변경이 불가능한 값(Immutable Value)
• 변수에 할당된 값은 더 이상 변경이 될 수 없다!! 여기서 중요한 포인트는 원시 값 자체를 변경할 수 없다는 것이지 변수 값을 변경할 수 없다는 것이 아니다.
• number, string, boolean, undefined, null, symbol 타입이 이에 해당된다.

자바스크립트의 객체 타입(Object Type)

• 값의 변경이 가능한 값(Mutable Value)
• 변수에 할당된 값을 수정할 수 있다!
• object 타입이 이에 해당된다.

---

각 자료형의 특징을 조금 더 깊게 이해하기 위해 메모리 측면에서 생각해보자.

변수에 값을 복사할 때, 메모리에서는 어떤 일이 일어날까?

이 개념에서 중요한 포인트는 변수에서 변수로 메모리 주소를 넘겨준다는 점 이다.

이 개념에 기초하여 자바스크립트의 원시 값과 객체의 특징을 공부해보자.

 

원시 값, Immutable

var score = 80;
var copy = score;

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

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

 

copy = score 구문을 실행할 때 다음 두 방식으로 해석이 가능하다.

 

1. 새로운 80을 생성해서 메모리 주소를 전달. 두 변수가 기억하는 메모리 주소가 다르다.

출처: 모던 자바스크립트 Deep Dive

 

2. score의 값인 80의 주소를 그대로 copy에 전달. 두 변수가 기억하는 메모리 주소가 같다. 파이썬은 이 방식을 적용한다.

출처: 모던 자바스크립트 Deep Dive

 

MDN 문서를 확인해보면 자바스크립트의 원시 값은 1번 방식을 채택하고 있다는 것을 확인할 수 있다.

원시 값 - 용어 사전 | MDN

새롭게 생성된 원시 값의 주소를 저장하고 이 주소를 통해 값에 접근하게 된다.

 

객체, Mutable

var person = {
    name: 'Lee'
};

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

copy = person 구문을 실행하게 되면 두 변수는 같은 주소에 저장된 값을 가리킨다.

person은 copy에게 생성된 객체의 주소를 넘겨줬기 때문이다.

결과적으로 copy와 person은 값이 변경될 때 서로가 서로에게 영향을 주게 된다.

출처: 모던 자바스크립트 Deep Dive

 

마무리

이 단락의 핵심은 원시 값은 값을 복사하여 주소 값을 넘겨주기 때문에 서로 간섭할 수 없다는 점, 객체는 주소 값을 넘겨주기 때문에 서로 영향을 주고받을 수 있다는 점이다.

두 데이터 타입의 차이를 명확히 이해한다면 목적에 맞게 선택하여 착오 없이 개발을 진행할 수 있을 것 같다🔥

 

 

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures#기본_타입_primitive_value
https://developer.mozilla.org/ko/docs/Glossary/Primitive
https://www.geeksforgeeks.org/call-by-value-vs-call-by-reference-in-javascript/
모던 자바스크립트 Deep Dive 11장 원시 값과 객체의 비교