Value Types and Reference Types

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 세 번째인 Value Types and Reference Types 항목을 공부하면서 간단하게 작성한 글이다.

 

자바스크립트에 존재하는 데이터 타입은 Value(값) 또는 Primitive Type과 Reference(참조) Type으로 나뉜다.

Primitive Type에는 총 7가지가 존재한다.

 

• boolean
• number
• bigint
• string
• undefined
• null
• Symbol

Reference Type은 다음과 같다.

 

• Object
• Function
• Array

두 Type의 차이점을 다음 예제들을 통해 알아보자.

let a = 10;
let b = a;

위 코드가 메모리에 어떤 식으로 저장되는지 간단히 그림으로 표현하면 다음과 같다.

 

두 변수 모두 같은 주소를 가리키고 해당 주소의 값은 10이다.

a = 20;
console.log(b); // 10

변수 a의 값을 바꾸면 다음과 같아진다.

 

변수 a는 새로운 주소를 가리키고 그 값은 20이다. 그러므로 변수 b의 값은 변경되지 않는다. 이렇듯 Primitive Type은 값을 그대로 메모리에 저장하고 복사될 때도 값 자체가 복사되기 때문에 원본 변수의 값을 변경해도 사본 변수의 값은 변경되지 않는다.

 

Reference Type의 경우에는 조금 다르다. 주소 값을 참조한다는 뜻에서 Reference Type이라고 하는데 메모리에 저장이 될 때 값이 아닌 주소 값이 저장이 된다.

let a = {id: 10};
let b = a;

위 코드와 같이 Object를 하나 생성해서 a에 할당하고 b에 a를 복사하면 메모리는 다음과 같은 형태가 된다.

 

다른 메모리 주소에 Object { id: 10 } 이 생성되고 변수 a와 b가 가리키는 메모리 주소에는 해당 주소 값이 저장된다.

a.id = 20;
console.log(b); // { id : 20 }

여기서 a의 id 값을 20으로 변경하고 b를 출력하면 b의 id 값이 20으로 출력된다. 왜냐하면 두 변수가 같은 메모리 주소 값을 가지고 있기 때문이다.

 

Reference Type은 복사가 될 때 메모리 주소 값이 복사가 되기 때문에 원본과 사본 변수 둘 다 동일한 메모리 주소를 참조한다. 그러므로 한 곳에서 데이터를 변경하면 다른 곳에서도 바뀐 데이터를 가지게 된다.