JS 기본형 데이터와 참조형 데이터의 차이

자바스크립트의 타입은 크게 2가지로 나뉩니다. 기본형 데이터(Primitive) 와 참조형 데이터(Reference) 입니다.

 

기본형 데이터에는 string, number, bigint, boolean, undefined, symbol, null 이 있습니다.

참조형 데이터에는 object 가 있고, 거게에 포함이 되는 array, function, RegExp(정규표현식), map, set 등이 있습니다.

 

두 타입의 가장 큰 차이는 값을 저장하는 방식입니다.

기본형 데이터는 바로 값을 메모리에 할당하지만, 참조형 데이터는 값이 들어 있는 메모리의 주소를 할당합니다.

 

예를 들어보면,

먼저 a 에 1 을 넣습니다.

 

let a = 1;
let b = a;

 

a의 값을 받은 b를 출력하면 1이 나옵니다. 이것을 Copy by Value 라고 합니다
그렇다면 b의 값을 변경하고 출력하겠습니다.

b = 2;

b를 출력하니 이제 2가 나왔습니다. 다시 a를 출력해 보니 여전히 1이 나왔습니다.
당연히 b의 값만 바꿨으니까요.
그러나 이 당연한 이야기 참조형 데이터에서는 다른 결과를 보여 줍니다!

 

참조형의 예시로 object 를 하나 만들었습니다. cat 이라는 object 를 만들어서 dog 에 넣어 줍니다.

 

let cat = {
	name : 'cat';
}

let dog = cat;

 

dog 를 출력해보면, { name : 'cat' } 이 나옵니다.

이렇게 보면, 위와 다를 것이 없는 것 같죠? 값이 똑같이 복사가 되니까요.

 

하지만, 이렇게 해보면 어떨까요?

 

dog.name = 'dog';

 

dog 의 name 값을 바꿨습니다. dog 를 출력하니 { name : 'dog' } 가 나왔습니다.

그리고 cat 을 출력해보니 dog 과 동일하게 { name : 'dog' } 가 나왔습니다.

 

아니, cat 의 name 은 바꾼 적이 없는데 왜 cat 의 객체도 변경된 것일까요?

 

그 이유는 object 는 위의 첫 번째 예시(Copy by Value)와 달리 참조 값! 즉, 값을 가지고 있는 주소의 값이 할당 되기 때문입니다. 이것을 Copy by Reference 라고 합니다.

 

위의 코드 중 let dog = cat; <- 이 부분이 { name : 'cat' } 이 값을 dog 에 넣는 것이 아니라, 이 값이 들어가 있는 주소! 0x0000001 같은 주소를 넘겨 주는 거랍니다.

 

때문에 dog.name = 'dog'; 이 순간에 아까 cat 한테 받은 주소로 가서 cat 이랑 함께 사용하고 있는 데이터를 수정한 것입니다.

(집 주인 허락도 없이 주소를 공유한다는 이유만으로 이렇게 데이터를 바꿀 수 있다니..)

 

때문에 object 같은 참조형 데이터를 사용할 때는 주의 해야 합니다.

 

 

 

참고 자료 👍

https://webclub.tistory.com/638

JS Basics #1 - JS 기본형과 참조형 차이점 정리

https://developer.mozilla.org/en-US/docs/Glossary/Primitive

Primitive - MDN Web Docs Glossary: Definitions of Web-related terms | MDN