JS 원시타입과 참조타입

 

 

 

 

 

배열과 객체를 배우면서 알아야 할 아주 중요한 개념이 있다. 

바로 원시타입(primitive type)과 참조타입(reference type)이다 . 

 

 

 

 

 

원시타입이란?

 

method를 가지지 않는 6가지 타입을 뜻한다. 이름에서 유추 할 수 있듯이 아주 먼 컴퓨터 조상분들 때 부터 사용된 타입이다.

 

• string
• number
• bigint
• boolean
• undefined
• symbol
• (null)

 

 

 

원시타입의 작동원리

 

원시타입의 작동원리는 우편함에 편지를 넣는것과 비슷하다.  

let a = 'swimming in dev';

위와 같은 선언과 할당을 했다고 하자. 

이는 a씨가 사는 우편함에 'swimming in dev'라는 편지를 넣는 것과 같다.

그리고 이후 변수 a를 사용할 때 마다 안에 있는 편지를 꺼내오는 방식!

 

let a = 'swimming in dev';
let b = a;

만약에 위와 같은 코드를 추가했다고 하자. 

변수 b에는 과연 어떤 편지가 들어있을까? a와 마찬가지로 'swimming in dev'편지가 들어있다. 

즉 a우편함에 'swimming in dev' 편지 하나, 그리고 b우편함에 'swimming in dev' 편지가 또 하나 들어가 있다고 보면된다. 

당연하게도, a우편함의 편지를 없애더라도 b우편함의 편지는 그대로 우편함에 남아있게 된다. 

 

문제는 이런 작동원리가 밑에 나올 참조타입과는 다소 다르기 때문에 코딩에 주의를 요하게 된다.  

 

 

 

참조타입이란?

 

자바스크립트에서 원시 자료형이 아닌 모든 것은 참조 자료형이다. 배열, 객체, 함수가 대표적인 참조타입니다. 

 

 

 

 

참조타입의 작동원리

 

참조타입 작동원리는 원시타입과는 약간의 차이가 있다. 

원시타입이 편지를 우편함에 넣는 방식이었다면,

참조타입은 편지를 찾으러 우체국으로 오라는 편지를 우편함에 넣는다는 개념이다. 

 

 

뭔 소리여... 

 

 

예제를 통해 알아보자.

let a = ['swimming','in','dev'];
let b = a;

위의 코드가 뜻하는 바는 무엇일까?

 

a 우편함에는 ['swimming','in','dev'] 편지가 들어간 것이 아니라, ['swimming','in','dev'] 편지를 어떤 우체국에 가면 찾을 수 있는지가 담겼다. 즉 값이 저장되었다기 보다는 값을 어디서 찾을 수 있는 지 주소값이 저장된 것이다. 그리고 컴퓨터는 이 값을 찾기위해 주소를 따라 편지를 찾는 여정을 시작한다. 이러한 이유로 "참조"타입이라고 하는 것이다. 

 

b 우편함은 어떨까?

b 우편함에도 마찬가지로 주소값이 저장되어 있을 것이고 그 주소값은 a 우편함과 동일할 것이다. 즉 a와 b 모두 참조할 때 같은 주소를 가르치게 되고 컴퓨터는 같은 주소를 탐색하게 된다. 

 

그런데 만약 우체국에서 ['swimming','in','dev'] 편지를 없애버린다면 어떻게 될까? a와 b 모두 주소를 통해 편지를 찾으려고 해도 찾지 못하는 상황이 벌어질 것이다. 그렇기 때문에 참조타입의 경우 변수를 통해 원래의 값을 조작하면 그 주소값을 공유하고 있는 모든 변수에 영향을 미치게 된다.