[ JavaScript ] 원시타입(primitive type)과 참조타입(reference type)

원시타입(primitive type)과 참조타입(reference type)

JavaScript의 자료형에는 두가지 형태가 존재한다.
원시타입 (primitive type)과 참조타입(reference type) 두가지 타입이 존재하는데. 이 두가지 타입을 자세히 알아보자.

원시타입(primitive type)

String, Number, Boolean, Null, Undefined와 같은 타입이며 ES6(ECMAScript 2015)에서Symbol타입이 추가되어
총 6개의 로 이루어진 타입이다. 원시타입은 메모리에 값을 그대로 저장한다.

const a = 3100; 
let b = a; 
b = 3; 
console.log(a); // result 3100

참조 없이 값이 변동되었을때 메모리에 값을 그대로 저장한다. 헷갈릴게 없다.

참조타입(reference type)

객체, 배열, 함수 ... 등과 같은 Object형식의 타입이며,
메모리에 값을 주소로 저장하고, 출력시 메모리주소와 일치하는 값을 출력한다.

const origin = { 
  a: 1, 
  b: 2, 
  c: 3, 
  d: { 
    q:1, 
    w:2, 
    e:3, 
  }, 
} 
const copy = origin; 
copy.b = 1000; 
console.log(origin.b); // result 1000

copy라는 변수에 할당된것은 origin의 메모리 주소이다. 그로인해 copy의 값을 바꿨지만
사실은 origin의 메모리 주소에 들어있는 값을 바꾼것이므로 origin의 값도 변경된다.

추가 정보

위 글에서 원시타입(primitive type)과 참조타입(reference type)을 자세히 보았다면,
아래 코드를 보면 의문점이 생긴다.

const origin = { 
  a: 1, 
  b: 2, 
  c: 3, 
  d: { 
    q:1, 
    w:2, 
    e:3, 
  },
} 
const changed = origin; // changed에 origin의 메모리 주소가 할당되었다. 
for(let k in origin){
  changed[k] = origin[k];
} 
changed.a = 4; 
console.log(origin.a); // reuslt 1 
console.log(changed.a) // result 4 
changed.d.e = 50; 
console.log(origin.d.e); // result 50

위 코드를 잘보면 객체는 레퍼런스 타입인데 어째서 changed.a의 값은 원시타입처럼 변경되면서 changed.d의 값은 참조타입 처럼 되는것일까?

for in 문은 object 안쪽의 키를 순서대로 반복한다.

벨류값인 origin[k]는 origin에서 벗겨진 프리미티브 타입 값이 기존 changed의 키값에 새롭게 할당될것이다.

loop를 한번 자세히 까서 살펴보면

• loop 1 a = 1 프리미티브 타입

• loop 2 b = 2 프리미티브 타입

• loop 3 c = 3 프리미티브 타입

• loop 4 d = { 레퍼런스 타입 }

4번째 루프에서 origin.d는 객체이다 레퍼런스 타입으로 origin.d의 메모리 주소가 changed에 할당될것이다.

그리하여 changed.d.e의 값을 변경하면 origin.d.e의 값도 변경되어서 origin.d.e의 결과는 50이 출력된다.