Part 3. Javascript 핵심 개념과 주요 문법 Ch 1. 원시 자료형과 참조 자료형 입니다.
현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
학습목표
- 원시 자료형(primitive data type)과 참조 자료형(reference data type)의 구분이 왜 필요한지에 대해서 이해할 수 있다.
- 원시 자료형과 참조 자료형의 차이를 이해하고, 각자 맞는 상황에서 사용할 수 있다.
- 원시 자료형이 할당될 때는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다는 개념을 코드로 설명할 수 있다.
- 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함을 사용한다는 것을 이해할 수 있다.
1. 원시 자료형과 참조 자료형 기초
- 원시 자료형이 할당될 때에는 변수에 값(value)자체가 담기고, 참조 자료형이 할당될 때는 메모리의 주소(reference)가 담깁니다.
- 그래서 참조 자료형은 메모리 heap 영역에 원시 자료형은 메모리 stack 영역에 데이터를 보관합니다.
자바스크립트에서 원시 타입의 데이터(원시 자료형(primitive data types))는 객체가 아니면서 method를 가지지 않는 6가지의 타입을 말합니다.
string,number,boolean,undefined,symbol,bigint, (null)
- 원시 자료형이라고 부르는 이유
원시 자료형은 모두 데이터 보관함(메모리)에 저장할 때 '하나'의 정보, 즉, '하나'의 데이터를 담고 있습니다.
다양하고 많은 정보를 담을 수 있는 배열과 객체와는 달리 원시적으로, 하나의 값만 가질 수 있어서 원시 자료형이라고 부릅니다.
'string', 42, true, false, undefined..
자바스크립트에서 원시 자료형이 아닌 모든 것은 참조 자료형(참조 타입(reference data type))입니다.
배열([]), 객체({}), 함수(function(){})가 대표적입니다.
참조 자료형에는 데이터 보관함(메모리)에 저장할 때 하나의 데이터가 아니라 '여러' 데이터를 담을 수 있습니다.
이때 '여러' 데이터는 데이터 보관함(메모리)의 동적으로 크기가 변하는 heap이라는 공간에 저장됩니다. 변수에는 실제 데이터가 위치한 곳(메모리 상 주소)을 가리키는 주소가 저장됩니다.
이처럼 데이터는 heap이라는 메모리 공간에서 별도로 관리되고, 우리가 직접 다루는 변수에는 메모리 주소가 저장되기 때문에 reference data type이라고 불립니다.
참조 자료형의 ===(strict equality)는 주소값이 같은지 확인합니다.
따라서, 아래의 값은 각각 다른 메모리 주소값을 가지고 있기 때문에 모두 false가 나옵니다.
// 메모리 heap 영역에서는 두 개의 저장 공간이 할당된 상태 입니다.
console.log([1,2,3] === [1,2,3]); // false
console.log({foo: 'bar'} === {foo: 'bar'}); // false
const nums1 = [1, 2, 3]; // [1, 2, 3]이 heap에 저장되고, 이 위치의 주소가 변수 num1에 저장됩니다.
const nums2 = [1, 2, 3]; // [1, 2, 3]이 heap에 저장되고, 이 위치의 주소가 변수 num2에 저장됩니다.
// 이제 heap에는 두 개의 [1, 2, 3]이 저장되어 있고, 각각에 대한 주소가 변수 num1, num2에 저장되어 있습니다.
console.log(num1 === num2); // false