[JS] 원시 자료형과 참조 자료형

홍다희·2022년 7월 11일
0

앞서 type에 대해서 배울 때 자료형들의 종류를 찾아 보다가 원시 자료형과 참조 자료형이라고 나뉘는 것을 알게 되어서 간단하게 블로그에 정리했었다. 그런데 오늘 수업에서 원시 자료형과 참조 자료형에 대해서 더 자세히 배워서, 다시 추가적으로 정리하게 됐다!

원시 자료형 (primitive data type)

고정된 저장 공간을 차지하는 데이터.
변수에는 데이터의 크기와는 관계없이 하나의 데이터만 담을 수 있고,
원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수는 있다.

ex) 
let word = "hello world!"
word = "hello codestates!" 처럼 변수에 값 재할당 가능(const일 경우엔 재할당 불가능)

원시 자료형의 종류

객체가 아니면서 method를 가지지 않는 7가지의 타입이 원시 자료형이다.

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

참조 자료형 (reference data type)

참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장.
만약에 변수에 넣을 수 있는 데이터 크기가 제한되어 있다면 큰 데이터를 넣을 때 번거롭다. 이를 보완하기 위해 자기 마음대로 사이즈를 늘렸다가 줄였다가 하는(동적(dynamic)으로 변하는) 특별한 데이터 보관함이 필요해진 것이다.
그래서 참조 자료형의 데이터는 특별한 데이터 보관함에 저장되고, 이 특별한 데이터 보관함을 heap이라고 한다. 참조 자료형이 할당된 변수에는 값이 저장된 게 아니라
이 데이터가 위치한 곳(메모리 상 주소)을 가리키는 주소가 변수에 저장되어 있다.

ex) 
let first = [10, 20, 30, 40];
let second = first; // second 변수엔 first의 값이 아닌 주소값이 할당된다.
second[0] = 5; // second의 0번째 인덱스 값을 5로 할당하면 주소값이 같은 first[0]의 값도 5가 된다.

참조 자료형의 종류

원시 자료형을 제외한 모든 것이 참조 자료형이다.
대표적으로는 배열([])과 객체({}), 함수(function(){})가 있다.

헷갈렸던 퀴즈

Q. 다음 코드가 실행된 후, score 의 값은 무엇인지 고르세요.

let score = 80;
function doStuff(value) {
  value = 90;
}
doStuff(score)

A. 80
변수가 재할당이 가능하기 때문에 이 문제의 답이 왜 90이 아닌지 헷갈렸다.
다시 살펴보니까 함수 값을 리턴한 게 아니고 함수에서만 값을 할당하고 끝났기 때문에 원래 초기값인 80으로 유지됐다는 것을 알 수 있었다.

해설: 변수 score의 값 80은, 참조 자료형이 아니기 때문에 주소값을 전달하지 않고, 값 자체를 복사하여 전달하게 됩니다. 그래서 함수에서 어떤 일이 발생했던가와 관련이 없이 score는 초기에 할당된 값 80이 그대로 유지됩니다. 정답은 A입니다.

profile
프론트엔드 개발자

0개의 댓글