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

11장 원시 값과 객체의 비교

자바스크립트가 제공하는 7가지 데이터 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있다.

이번 장을 시작하기 앞서 원시 타입과 객체 타입의 차이점을 비교해보도록 하겠다.

	원시 타입	객체 타입
값의 유형	변경 불가능한 값(immutable)	변경 가능한 값(mutable)
변수에 저장되는 값	변수에 실제 값이 저장됨	변수에 참조 값이 저장됨
복사되어 전달되는 방식	원시 값이 복사되어 전달 (값에 의한 전달)  pass by value	참조값이 복사되어 전달 (참조에 의한 전달) pass by reference

 

 

11.1 원시 값

원시 값은 변경 불가능 하므로 값을 선언한 후 값의 할당, 재할당할 때의 변수가 참조하는 메모리 공간의 주소가 변경된다.

 

11.1.1 문자열과 불변성

자바스크립트의 문자열은 원시 타입이며 변경 불가능하다. 이것은 문자열이 생성된 이후에는 변경할 수 없음을 의미한다.

 

문자열은 유사 배열 객체이면서 이터러블이므로 배열과 유사하게 각 문자에 접근할 수 있다.

var str='LEE';

console.log(str[0]); // L

// 원시 값인 문자열이 객체처럼 동작하는 모습
console.log(str.length); // 3
console.log(str.toLowerCase()); // lee

str[0]='k'
console.log(str); // LEE

단 str[0]='k'처럼 이미 생성된 문자열 일부문자를 변경해도 반영되지 않는다. 이는 문자열이 변경불가능한 값이기 때문이다. 변수에 새로운 문자열을 재할당하는 것은 가능하며 이는 문자열을 변경하는 것이 아니라 새롭게 할당하는 것이기 때문이다.

 

11.1.3 값에 의한 전달

var score = 90;
var copy= score; 

console.log(score === copy); //true
score=100;
console.log(score, copy); //100 90

위 예제에서 score와 copy변수는 다른 메모리의 별개의 값이기 때문에 score값을 변경해도 copy에는 아무런 영향을 주지 않는다. 

원시 값을 갖는 두 변수는 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.

 

 

11.2 객체

 

객체는 변경가능한 값이다.

객체는 원시 값과 다르게 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근할 수 있다. 참조 값은 생성된 객체(아래 예시에서 name)가 저장된 메모리 공간의 주소 그 자체다.

var person = {
	name: 'LEE';
	};

위 예제에서 person변수는 객체 {name: LEE}를 참조하고 있다.

 

원시 값은 변경불가능한 값이므로 변수의 값을 변경하려면 재할당밖에 방법이 없지만 객체는 재할당 없이 객체를 직접 변경할 수 있고 프로퍼티를 동적으로 추가하고 값을 갱신할 수도 있다. 

 

메모리를 효율적으로 사용하기 위해 그리고 객체를 복사해 생성하는 비용을 절약하여 성능을 향상시키기 위해 객체는 변경 가능한 값으로 설계되어 있다.

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

 

얕은 복사와 깊은 복사

객체를 프로퍼티 값을 갖는 객체의 경우 얕은 복사는 한 단계까지만 복사하는 것을 말하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말한다.

 

위의 예시에서 c1.x.y와 o.x.y는 같은 참조값을 가지며 하나의 객체를 공유한다. 따라서 o의 변화에 c1의 값도 덩달아 달라진다.

 

얕은 복사와 깊은 복사로 생성된 객체는 원본과는 다른 객체이다. 즉 원본과 복사본은 참조 값이 다른 별개의 객체이다.

하지만 얕은 복사는 객체에 중첩되어 있는 객체의 경우 참조 값을 복사하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사해서 원시 값처럼 완전한 복사본을 만든다.