본문 바로가기
JavaScript

[JavaScript] 원시 값 vs 객체 (Primitive Type/Reference Type(Object))

by 배잼 2022. 2. 4.

모던 자바스크립트 Deep Dive 11장을 읽으며 정리한다.

원시 값(Primitive Type)은 변경 불가능한 값?

책에 서술되어 있는 내용을 가져왔다. 변경 불가능한 값이라고 하지만, 우리가 아는 변수는 값을 재할당 할 수 있다. 이에 잠시 의아함을 느꼈는데, 초점은 변경 불가능한 이다.

원시 값을 할당한 변수에 새로운 원시 값을 할당한다면, 새로운 메모리 공간을 확보하고, 재할당한 원시 값을 저장한 다음, 변수는 새롭게 재할당된 값을 가리킨다. 즉, 변수가 참조하던 메모리 공간의 주소가 바뀐다. 메모리 공간에 저장되어 있던 이 변경되는 게 아니다!

  • 불변성 (Immutability) : 변경 불가능하다. 불변성을 갖는 원시 값을 할당한 변수는 재할당 외에 변수 값을 변경할 수 있는 방법이 없다.

다음과 같은 예제를 보자,

let str = 'string';

console.log(str[0]); //s
str[0] = 'v' 
console.log(str); //string, 이게 바로 불변성이다. 

이미 생성된 문자열의 일부 문자를 변경해도 반영되지 않는다. 그러나 변수에 새로운 문자열을 재할당하는 건 가능하다.

객체(Object)는 변경 가능한 값

객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근한다면 참조 값(reference value)에 접근할 수 있다. 객체를 할당한 변수에는 생성된 객체가 실제로 저장된 메모리 공간의 주소가 저장되어 있다.

var person = {
    name: 'pearjam'
};

원시 값은 변경 불가능하다. 하지만 객체라면 어떨까? 재할당 없이 객체를 직접 변경할 수 있다. property를 생성하고 변경하고 삭제하는 게 재할당에서 자유롭다. 만약 name을 ‘cherry’로 바꾼다 해도 객체를 할당한 변수의 reference value는 바뀌지 않는다.

그렇다면 과연 변경 가능한 게 좋은 걸까? 만약 계속 재할당을 한다면 객체를 복사하는 데 드는 비용이 크다. 메모리의 효율적 소비가 어렵고 성능이 나빠진다. 즉, 반대로 말하면 효율적 메모리 사용과 성능을 위해 이러한 설계가 도출됐다고 이해할 수 있다.

  • 부작용 또한 있다. 여러 개의 식별자가 하나의 객체를 공유할 수 있다.

전달 방식

  1. 원시 값 : 값에 의한 전달
let a = 100;
let b = a;
console.log(a, b); //100, 100

a = 80;
console.log(a, b); //80, 100

let b = a 라고 해줬음에도 불구하고, 중간에 a를 80이라 재할당 했을때 b는 여전히 100임을 알 수 있다.

  1. 객체 : 참조에 의한 전달
let person = {
    name = 'pear'
};

const copy = person;

console.log(person); // {name: 'pear'}
console.log(copy); //{name: 'pear'}

그러나, 원시 값과 다른 점은 원본에 참조 값이 복사되어 전달된다. 즉, 그림으로 보면 다음과 같다.

다음 코드를 실행해보자!

let person = {
    name = 'pear'
};

let copy = person;

copy.name = 'cherry';

person.age = 10;

console.log(person); // {name: 'cherry', age: 10}
console.log(copy); // {name: 'cherry', age: 10}

원시 값과 다른 결과가 나오는 걸 확인할 수 있다! 두 개의 식별자가 하나의 객체를 공유하는 셈이다.

그렇다면 값에 의한 전달과 참조에 의한 전달은 다른 걸까?

결국 값에 의한 전달과 참조에 의한 전달은 식별자가 기억하는 메모리 공간에 저장된 값을 복사 - 전달하는 면에서 동일하다! 이런 이유로 공유에 의한 전달(pass by sharing)이라고 표현한다. 하지만! 자바스크립트는 pointer가 존재하지 않으므로 다른 프로그래밍 언어의 참조의 의한 전달과 의미는 정확히 일치하지 않는다. 🙂

C와 C++를 하면서 pointer의 존재가 많이 나를 힘들게 했는데, 없는 게 꼭 좋은 것만은 아닌 것 같다.

댓글