본문 바로가기

개발/javascript

원시 값과 객체의 비교04 - 변경 가능한 값

"원시 값과 객체의 비교"

 

2. 객체

객체는 프로퍼트의 개수가 정해져 있지 않으며 동적으로 추가되고 삭제할 수 있다. 또한 프로퍼티의 값에도 제약이 있다. 따라서 객체는 원시 값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 없다. 따라서 객체는 하나의 값을 관리하기 위한 방식이 아니라 여러 개의 값을 복합적인 구조로, 다시 말해 자료 구조로 다룰 수 있는 하나의 자료 구조라고 볼 수 있다.

 

객체는 복합적인 자료 구조이므로 객체를 관리하는 방식이 원시 값과 비교하여 복잡하고 구현 방식도 브라우저 제조사마다 다를 수 있다. 원시 값은 상대적으로 적은 메모리를 소비하지만 객체는 경우에 따라 크기가 매우 클 수도 있다. 객체를 생성하고 프로퍼티에 접근하는 것도 원시값과 비교할 때 비용이 많이 드는 일이다.

 

따라서 객체는 원시 값과는 다른 방식으로 동작하도록 디자인되어 있다. 원시값과의 비교를 통해 객체를 이해해 보도록 하자.

자바스크립트의 객체 관리 방식
Java와 같은 클래스 기반 객체 지향 프로그래밍 언어는 사전에 정의된 클래스에 기반하여 객체(인스턴스)를 생성한다. 다시 말해, 객체를 생성하기 이전에 이미 프로퍼티와 메소드가 정해져 있으며 그대로 객체를 생성한다. 객체가 생성된 이후에는 프로퍼티를 삭제하거나 추가할 수 없다. 하지만 자바스크립트는 클래스 없이 객체를 생성할 수 있으며 객체가 생성된 이후라도 동적으로 프로퍼티와 메소드를 추가할 수 있다.

이러한 이유로 대부분의 모던 자바스크립트 엔진은 객체의 프로퍼티 값의 위치를 메모리에 저장하기 위해 해시 함수 기반의 유사 딕셔너리 구조(dictionary-like structure)를 사용한다.

 

2.1. 원시 값과 객체의 비교

객체(참조) 타입의 값, 즉 객체는 변경 가능한 값(mutable value)이다. 먼저 변수에 객체를 할당하면 어떤 일이 일어나는 지부터 살펴보자.

var person = {
	name: 'Lee'
};

원시 값을 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 원시 값에 접근할 수 있다. 즉, 원시값을 할당한 변수는 원시 값 자체를 값으로 갖는다. 하지만 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값(Reference value)에 접근할 수 있다. 참조 값은 생성된 객체가 저장된 메모리 공간의 주소, 그 자체이다.

객체의 할당

위 그림을 보면 객체를 할당한 변수에는 생성된 객체가 실제로 저장된 메모리 공간의 주소가 저장되어 있다. 이 값을 참조 값이라고 한다. 변수는 이 참조값을 통해 객체에 접근할 수 있다.

 

원시 값을 할당한 변수를 참조하면 메모리에 저장되어 있는 원시 값에 접근한다. 하지만 객체를 할당한 변수를 참조하면 메모리에 저장되어 있는 참조 값을 통해 실제 객체에 접근한다.

// 할당이 이루어지는 시점에 객체 리터럴이 해석되고 그 결과 객체가 생성된다.
var person = {
	name: 'Lee'
};

// person 변수에 저장되어 있는 참조값으로 실제 객체에 접근하여 그 객체를 반환한다.
console.log(person);	// {name: "Lee"}

일반적으로 원시 값을 할당한 변수의 경우, "변수는 ○값을 갖는다." 또는 "변수의 값은○이다."라고 표현한다. 하지만 객체를 할당한 변수의 경우, "변수는 객체를 참조하고 있다" 또는 "변수는 객체를 가리키고(point)있다"라고 표현한다. 위 예제에서 변수 person은 객체 {name: 'Lee'} 를 가리키고(참조하고) 있다.

 

원시 값은 변경 불가능한 값이므로 원시 값을 갖는 변수의 값을 변경하려면 재할당 이외에는 다른 방법이 없다. 하지만 객체는 변경 가능한 값이다. 따라서 생성된 이후에도 프로퍼티를 동적으로 추가할 수도 있고 프로퍼티 값을 갱신할 수도 있으며 프로퍼티 자체를 삭제할 수도 있다.

var person = {
	name: 'Lee'
};

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

// 프로퍼티 동적 생성
person.address = 'Seoul';

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

원시 값은 변경 불가능한 값이므로 원시 값을 갖는 변수의 값을 변경하려면 재할당을 통해 메모리에 원시 값을 새롭게 생성해야 한다. 하지만 객체는 변경 가능한 값이므로 메모리에 저장된 객체를 직접 수정할 수 있다. 이때 객체를 할당한 변수의 참조 값은 변경되지 않는다.

앞에서 언급했듯이 객체를 생성하고 관리하는 방식은 매우 복잡하다. 객체를 변경할 때 마다 원시 값처럼 이전 값을 복사하여 새롭게 생성한다면 명확하고 신뢰성이 확보되겠지만 객체는 크기가 매우 클 수도 있고 프로퍼티 값이 객체일 수도 있어서 복사(Deep copy)하고 생성하는 비용이 많이 든다. 다시 말해, 메모리의 효율적 소비가 어렵고 퍼포먼스가 나빠진다.

얕은 복사(shallow copy)와 깊은 복사(deep copy)
객체를 프로퍼티 값으로 갖는 객체의 경우, 얕은 복사는 한 단계까지만 복사하는 것을 말하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말한다. 얕은 복사와 깊은 복사로 생성된 객체는 원본과는 다른 객체이다. 즉, 원본과 복사본은 참조값이 다른 별개의 객체이다. 하지만 얕은 복사는 객체에 중첩되어 있는 객체의 경우, 참조값을 복사하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하여 원시 값처럼 완전한 복사본을 만든다는 차이가 있다.

따라서 메모리를 효율적으로 사용하기 위해 그리고 객체의 복사하고 생성하는 비용을 절약하여 퍼포먼스를 향상시키기 위해 객체는 변경 가능 한 값으로 디자인되어 있다. 메모리 사용의 효율성과 퍼포먼스를 위해 어느 정도의 구조적인 단점을 감안한 디자인이라고 할 수 있다.

 

객체는 이러한 구조적 단점에 따른 부작용(Side effect)이 있다. 그것은 원시 값과는 다르게 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 것이다.