[ Javascript ] 원시 값과 객체의 차이에 대해 알아보기.

 

 

원시 값 (Primitive)

 

 

MDN - 원시 값 설명

원시 값 - 용어 사전 | MDN

 

 

 

자바스크립트에서 원시 값은 객체가 아니고, 메서드를 가지지 않는 데이터로 아래와 같이 총 7가지의 종류가 존재한다.

 

- string

- number

- bigint

- boolean

- undefined

- symbol

- null

 

 

 

원시 타입의 값은 변경 불가능한 값으로, 변수에 원시 값을 재할당(교체)은 가능하지만 원시 값을 직접 변형할 수는 없다.

그렇기때문에 원시 값은 데이터의 신뢰성을 보장한다.

* 여기서 변수와 값을 혼동하면 안됨! 변경할 수 없는 것은 변수가 아니라 (원시)값이다! 변수의 값은 재할당을 통해 변경(교체)할 수 있다.

 

 

 

 

var number = 3; // number 변수에 원시 값 3을 할당.
number = 5; // number 변수에 원시 값 5를 재할당. 
// 이 때 기존의 값 3은 메모리 어딘가에 남아있고, 새로운 원시 값인 5로 변수 number의 값이 교체 된다.

 

원시 값을 가진 변수에 재할당을 해도 원시 값이 바뀌는게 아니라 기존의 원시 값은 메모리에 남아있고, 새롭게 할당된 원시 타입의 값으로 재할당 되고 변수에 할당된 기존 값을 가리키는 메모리 주소가 아닌 새롭게 할당된 값을 가리키는 메모리 주소로 변경된다. (이때 메모리에 남아있는 기존의 원시 값은 자바스크립트의 가비지컬렉션에 의해 시기는 정확히 알 수 없지만, 추후 정리된다.)

변수가 참조하던 메모리 공간의 주소가 변경된 이유는 변수에 할당된 원시 값이 변경 불가능한 값이기 때문이다.

 

 

 

 

 

변수에 원시 값을 할당할 경우, 변수에는 원시 값이 저장된 메모리의 주소가 저장된다.  메모리에 값이 직접 저장된다.

 

var origin = '오리지널'; // 변수 origin에 원시 값(문자열) '오리지널' 할당.
var copy = origin; // 변수 copy에 변수 origin 의 값이 복사되어 할당.

origin = '오리지널이야.'; // 변수 origin에 새로운 원시 값(문자열) '오리지널이야.' 를 재할당.

console.log(origin); // '오리지널이야.'
console.log(copy); // '오리지널'

 

원시 값을 가진 변수(origin)를 다른 변수(copy)에 할당하여 origin 변수가 갖는 원시 값인 '오리지널'이 복사되어 전달된다.

이런 경우를 값에 의한 전달이라고 한다. copy변수에는 origin의 원시 값 '오리지널'이 복사되어 origin 변수에 새로운 값을 재할당 하더라도 copy 변수에 저장된 원시 값 '오리지널'은 바뀌지 않는다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

객체 (Object)

 

 

MDN - 객체 설명

JavaScript 객체 기본 - Web 개발 학습하기 | MDN

 

자바스크립트에서 객체는 원시 값을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 모두 객체이다.

객체는 변경 가능한 값으로, 식별자인 변수에 할당할 때 참조 값을 받아서 실제 객체에 접근한다. (원시 값은 참조 값이 아닌 값을 받음.) 또한 원시 값은 변경 불가능하지만 객체는 동적으로 값을 추가하거나 삭제가 가능하기 때문에 값을 변경할 때 기존의 메모리 주소 그대로 사용한다. 

 

 

 

const objA = { name : 'Lee' };

 

 위와 같이 객체를 objA 변수에 할당하면 objA에 저장된 메모리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근할 수있고 이 참조 값을 통해 실제 객체에 접근한다. 

 

 

 

 

 

const objA = { name : 'Lee' };
const objB = objA; 

console.log(objB); // { name : 'Lee'};

console.log(objA === objB); // true

objB.name = 'Kim';

console.log(objA); // { name : 'Kim'}

 

objB는 objA가 실제 객체에 접근할 때 필요한 참조 값이 복사 되었다. objB와 objA의 메모리 주소는 다르지만 동일한 참조 값을 갖기 때문에 두 개의 식별자가 하나의 객체를 공유하고 있다.

 

 

 

 

 

 

 

 

 

 

 

 

원시 값과 객체의 차이점 간단 비교

 

원시 값	객체
변경 불가능한 값(immutable value)이다.	변경 가능한 값(mutable value)이다.
변수에 할당하면 변수에는 실제 값이 저장된다.	변수에 할당하면 변수에는 참조 값이 저장된다.
다른 변수에 할당하면 원시 값이 복사되어 전달된다. 👉 값에 의한 전달	다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 👉 참조에 의한 전달

 

 

 

 

 

 

 

 

 

출처

- MDN

- 모던 자바스크립트 Deep Dive - 이웅모(위키북스)