JavaScript 원시타입 & 참조타입(Primitive & Reference)

JavsScript 원시타입 & 참조타입(Primitive & Reference)

 : 기본자료형에 대해서 이전에 정리했던 부분에 대해서 추가 정리를 하겠습니다. 자료형은 크게 원시타입과 참조타입으로 나뉩니다. 

2020/12/13 - [JavaScript] - JavaScript 자료형(Data Type)

JavaScript 원시타입(Primitive)

 : 원시타입은 모두 하나의 '값'을 담고 있습니다. string, number, boolean, undefined, (null) 등의 원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 데이터를 재할당할 수 있습니다. 하나의 메모리에 하나의 데이터를 보관합니다. 변수를 재할당 해도 이전 변수의 할당 값에 영향을 주지 않습니다.

let num = 'goodNews'
num = 'badNews';

// num을 출력시 badNews가 출력.

num[0]= 'B'

// BadNews로 변경불가. num을 출력시 원래와 동일한 badNews가 출력됨

num = 'BadNews'

// num을 출력시 BadNews가 재할당되어 출력.

let num2 = num;

// num2는 값이 그대로 복사되어 'BadNews'가 출력

num = 21;

console.log(num2) // 'BadNews'

console.log(num) // 21

 

JavaScript 참조타입(Reference)

 : 참조타입은 변수에 할당할 때에는 값이 아닌 '주소'를 저장합니다. 배열, 객체, 함수가 대표적입니다. 변수는 주소를 저장하고. 주소는 특별한 동적인 데이터 보관함에 보관되는데 이 데이터 보관함을 heap(힙)이라고 합니다. 값을 재할당 할 경우 주소를 참조한 모든 값이 영향을 받습니다. 즉, 값이 공유됩니다.

let obj = {
    a: 1,
    b: 2,
    c: 3
}

let newObj = obj;

newObj.a = 100; // a에 값 100을 재할당

console.log(obj.a) // 100.
console.log(newObj.a) // 100

두 객체는 동일한 주소를 참조하기 때문에 a값이 바뀌게 되고 반환하는 a 값이 둘다 변경됨.

정리

• 원시타입은 값을 저장
• 참조타입은 주소를 저장(값은 heap에 저장)
• 원시타입은 할당된 값을 재할당 해도 이전 변수의 할당값에 영향을 주지 않는다.
• 참조타입은 주소를 참조하기 때문에 값을 재할당하면 해당 주소를 참조한 모든 참조타입이 영향을 받는다. 

참고

MDN 원시값

TCPSCHOOL.COM 메모리의 구조

모던 자바스크립트 튜토리얼 - 참조에 의한 객체 복사