원시 값과 객체의 비교

 

자바스크립트가 제공하는 데이터타입

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

 

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 분인 이름
값 : 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과
식별자 : 어떤 값을 구별해서 식별해낼 수 있는 고유한 이름

 

1. 원시값 

변경 불가능한 값 

한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다.

=> 변수는 언제든지 재할당을 통해 변수 값을 변경 가능하다.

 

변수의 상대 개념인 상수는 재할당이 금지된 변수

=> 상수와 변경 불가능한 값을 동일시하면 안된다.

 

불변성 :

원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 메모리 공간에 저장되어 있는 재할당 이전의 원시 값을 변경하는 것이 아니라 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장한 후, 변수는 새롭게 재할당한 원시값을 가리킨다. 

이떄 변수가 참조하던 메모리 공간의 주소가 바뀐다.

=> 불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 방법이 없다.

 

var score = 80;
var copy = score;

console.log(score) // 80
console.log(copy) // 80 (값에 의한 전달)

console.log(score === copy) // true

 

값에 의한 전달 : 변수에 할당되는 변수의 원시 값(메모리 주소)이 복사되어 전달된다.

=> 변수와 같은 식별자는 값이 아니라 메모리 주소를 기억한다. (메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별해낼 수 있어야 한다.)

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

=> 값에 의한 전달도 사실은 메모리 주소를 전달하는 것이다. 전달된 메모리 주소를 통해 메모리 공간에 접근하여 값을 참조할 수 있다.

 

var score = 80;
var copy = score; // copy 변수에는 score 변수의 값 80이 복사되어 할당

console.log(score, copy) // 80, 80
console.log(score === copy) true

score = 100

console.log(score, copy) // 100, 80
console.log(score === copy) // false

 

score변수의 값을 변경해도 copy변수의 값에는 어떠한 영향도 주지 않는다. 

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

 

 

2. 변경 가능한 값

변경 가능한 값

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

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

=> 변수는 참조 값을 통해 객체에 접근할 수 있다.

 

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

재할당 없이 프로퍼티를 동적으로 추가할 수도 있고 프로퍼티 값을 갱신할 수도 있으며 프로퍼티 자체를 삭제할 수도 있다.

=> 객체를 할당한 변수에 재할당을 하지 않았으므로 객체를 할당한 변수의 참조 값은 변경되지 않는다. 

 

참조에 의한 전달 : 원본의 참조 값이 복사되어 전달된다.

=> 원시 값과 다르게 여러 개의 식별자가 하나의 객체를 공유할 수 있다.

 

var person = { 
	name: 'lee'
};

// 참조 값을 얕은복사. copy와 person은 동일한 참조 값을 갖는다.
var copy = person;
console.log(copy === person) // true

// copy를 통해 객체를 변경한다.
copy.name = 'kim';
person.address = 'seoul';

// copy와 person은 동일한 객체를 가리킨다.
// 따라서 어느 한쪽에서 객체를 변경하면 서로 영향을 주고받는다.
console.log(person) // {name:'kim', address:'seoul'}
console.log(copy) // {name:'kim', address:'seoul'}

 

 

 

출처 : 자바스크립트 모던 deep dive