원시값(Primitive value) vs 참조값(Reference value)

자바스크립트 튜토리얼을 공부하면서 번역한 글입니다.

부족한 점이나 오류가 있으면 댓글 달아주세요.

https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/

---

값과 참조에 의한 접근

자바스크립트에서는 변수를 원시타입, 참조타입 두가지 타입으로 값을 저장한다.

 

원시타입과 참조타입 비교

	종류	사이즈 고정 여부	저장 공간
원시타입	undefined, null, boolean, number, string, symbol	고정 ( fixed )	스텍 ( stack )
참조타입	object	유동적 ( dynamic )	힙 ( heap )

값을 변수에 할당할때 자바스크립트 엔진은 원시타입의 값인지 참조타입의 값인지를 결정한다.

만약 값이 원시타입이라면 변수에 저장된 실제 값에 접근하고 다룬다. ( access by value ).

반면에 객체를 다룰때는 객체의 실제 값이 아니라 주소값을 가지고 한다. ( access by reference ).

 

원시값의 타입을 알고 싶을때는 typeof 연산자를 사용한다.

let numberX = 10;
let stringY = 'JS';

console.log(typeof(numberX)); // number
console.log(typeof(stringY)); // string

참조값의 타입을 알고 싶을때는 instanceof 연산자를 사용한다.

let rgb = ['red', 'green', 'blue'] // 배열 객체

console.log(rgb instanceof Array) // true

원시값 복사

원시값 ( alpha ) 을 저장하고 있는 변수 ( X ) 가 새로운 변수 ( Y ) 에 할당할때,

변수 ( X ) 에 담겨있던 원시값 ( alpha ) 이 새로 만들어지고 복사되어 변수 ( Y ) 에 담긴다.

 

예시로 한번 살펴보자.

// 변수 a에 10을 할당한다.
let a = 10; 

// 변수 a에 담겨있는 원시값 10을 b에 할당한다. 내부적으로 자바엔진은 10을 새로 복사하여서 b에 넣는것이다.
let b = a; 

// 변수 b에 새로운 값 20을 할당한다.
b = 20;

// a, b는 서로 전혀 관계가 없기때문에 변수 b의 값을 바뀌었다고 하더라도 a는 변함이 없다.
console.log(a); // 10;
console.log(b); // 20;

 

참조값 복사

참조값 ( alpha ) 을 저장하고 있는 변수 ( X ) 를 새로운 변수 ( Y ) 에 할달할때,

원시값과 다르게 이번에는 참조값 ( alpha ) 의 위치(주소값)를 변수 ( Y ) 가 복사해서 가지고 있다.

결과적으로 변수 ( X ) 와 변수 ( Y ) 는 같은 alpha 를 참조하고 있는것이다.

 

예시로 살펴보자.

// name 의 프로포티가 'James'인 object 를 변수에 x 에 넣는다. 정확히는 참조하는 것이다.
var x = {name: 'James'};

// 또다른 변수 y를 선언하고 변수 x 를 할당한다. 
// x, y 모두 같은 object 를 참조하고 있다.
var y = x;

// 변수 y 를 이용해서 object 의 name property 를 변경해준다.
y.name = 'David';

// x, y 모두 같은 object 를 참조하기 때문에 변화된 property 가 x에도 반영됩니다.
console.log(x.name) // 'David'