자바스크립트 핵심 개념 : 데이터 타입 기본형/참조형

 

 

1. 자바스크립트의 데이터 타입은 두 가지 종류이다.

Primitive type(기본형) : Number, String, Boolean, null, undefined (+ES6 symbol) Reference type(참조형) : Object (Array, Function, RegExp)

참고로 이전 글에서 자바스크립트는 값에는 타입이 있으나, 변수에는 타입이 없다.

라는 명언을 되새기자!

var a = 10; 같은 애들이 기본형
var obj = {a:1, b: 2}; 같은 애들이 참조형(a:1, b:'b'는 참조형 데이터이다. 이들은 키,밸류로 묶여있다.)

뭔가 차이가 있어서 나눴을텐데 그렇다면 이 두가지의 차이가 뭘까?

"기본형은 값을 그대로 할당하고, 참조형은 값이 저장된 주소값을 할당한다는 점"이다.

 

2. 그 이론을 눈으로 확인하고 외우자.

 

2-1. 기본형이 값을 할당했을 때  ( var a = 10; )

(1) var a;를 선언하면 우선 데이터가 담길 공간을 따로 확보한다.(임의의 주소1000) 

(2) a는 주소 1000을 가리킨다.

(3) a = 10;을 할당하면 1000이라는 공간에 10이 생긴다.

(4) 만약 a = 2;으로 변경하면 a가 가리킨 주소가 있어서 1000이라는 공간을 2로 덮는다.

쉽게 생각해서 var a = 10;이라면
공간 2개가 생기고 다른 공간에 10이 들어간 주소를 a가 가리킨다고 생각하면 된다!
그림만 봐도 10을 그대로 할당하는 것을 확인할 수 있다.

 

2-2. 참조형이 값을 할당했을 때 ( var obj = {a:1, b: 'b'} )

(1) var obj = {a:1, b:'b'}를 선언하면 우선 데이터가 담길 공간을 따로 확보한다.

(2) 1과 'b'는 각각 1012, 1013라는 주소의 다른 공간에 들어간다.

(3) 그리고 그 두개의 공간을 가리키는 1011이라는 집합 공간이 따로 생긴다.

(4) 그리고 주소 400은 주소 1011을 참조한다.

(5) 마지막으로 obj는 주소 400을 가리키게 된다.

(6) 만약 var obj2 = obj;를 한다면 obj가 가리키는 주소를 같이 바라보므로 1011을 참조한다.

(7) 만약 obj2.a = 10;으로 변경하면 그대로 이동해서 1012의 값이 바뀌고 obj.a도 10이 된다.

좀 어렵지만, 앞서 는 걸 되새기면서 기억하자.
그림을 보면 기본형과 달리 값이 아닌 주소를 할당하는 것을 확인할 수 있다.

 

3. 이 글의 핵심부분

'자바스크립트에는 두 가지 형태의 데이터 타입이 있다.'는 사실을 인식한다.

'기본형은 값을, 참조형은 값이 저장된 주소값을 할당한다.'는 사실을 그림으로 직접 확인하고

어떤식으로 할당하는지 이해한다. 실무나 프로젝트시에 얕은 복사, 깊은 복사의 뼈대를 완성할 수 있다. 

 

 

- 정재남님의 자바스크립트 핵심 개념강의를 이해후 풀어쓴 것