📝자바스크립트 1 | 기본형 데이터와 참조형 데이터

 

 

 

기본형과 참조형을 구분하는 기준

데이터 타입의 종류는 크게 기본형과 참조형 2가지로 나뉜다. 

기본형과 참조형을 구분 짓는 가장 큰 점은 실제 값 전체 복사 vs 실제 값이 들어있는 주소 값 복사이다. 

 

- 기본형 (copy value of a)

let a = 1;
let b = a;

a += 10;
console.log(a) //11
console.log(b) //1

 

위의 코드를 살펴보면 a의 값이 변하더라도 b의 값은 그대로 인 것을 볼 수 있다. 

let b = a; 코드를 통해 a값 전체가 복사되어 b라는 변수에 담겼다. 

a, b는 서로 영향을 받지 않고 독립적으로 존재하는 것을 볼 수 있다. 

 

 

기본형 데이터가 저장될 때는 아래와 같은 순서로 저장된다. 

1. 변수 영역에서 빈 공간(@1003 : 임의의 주소 값)을 확보한다. 

2. 확보한 공간의 식별자(변수명)를 a로 지정한다. 

3. 일단 데이터 영역에서 1을 찾고, 없으면 데이터 공간을 하나 만들어(@5004)에 숫자 1을 저장한다. 
4. 변수 영역에서 a라는 식별자를 검색한다.(@1003).

5. 앞서 저장한 문자열의 주소(@5004)를 @1003의 공간에 연결한다. 

 

a += 10 코드 처리

6. 1이 저장된 공간에 11을 할당하는 대신 데이터 영역에서 11을 찾고, 없으면 새로 만들어 별도의 공간에 저장한다. 

7. 그 주소를 1003의 공간에 연결한다. 

 

 

 

- 불변값(immutable)

위의 처리 과정에서 한 번 만든 값은 다른 값으로 변경되지 않는다. 대신 새로 만드는 과정을 통해서만 변경이 일어나고 있다. 이것이 불변 값의 성질이다. 한 번 만들어진 값은 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않는다.

 

 

 

- 참조형 ( a has address of  "{ x : 1}" )

let a = { x : 1 };
let b = a;

a.x += 10;
console.log(a.x); //11
console.log(b.x) //11

기본형과 다르게 let b = a; 코드를 통해 {x : 1} 의 주소 값이 b라는 변수에 담겼다. 

a, b를 콘솔로 찍어보면 a값만 변화시켰지만, b값도 +10이 된 것을 알 수 있다.

즉 a, b는 서로 영향을 받고 있는 것을 볼 수 있다. 

 

 

 

참조형 데이터가 저장될 때는 아래와 같은 순서로 저장된다. 

1. 변수 영역에서 빈 공간(@1002 : 임의의 주소 값)을 확보한다. 

2. 확보한 공간의 식별자(변수명)를 a로 지정한다. 

3. 임의의 데이터 저장 공간(@5001) 에 데이터를 저장하려고 보니 여러 개의 프로퍼티로 이뤄진 데이터 그룹이다. 이 그룹 내부의 프로퍼티(x) 들을 저장하기 위해 별도의 변수 영역을 마련하고, 그 영역의 주소(@7103~ ?)를 @5001에 저장한다. 

4. @7103 에 x라는 프로퍼티 이름을 지정한다. 
5. 데이터 영역에서 숫자 1을 검색하고 없으면, 임의로 @5003에 저장하고, 이 주소를 다시 @7103에 저장한다. 

 

 

a.x += 10 코드 처리

6. 데이터 영역에서 숫자 11을 검색한다. 검색 결과가 없으면 빈 공간인 @5005에 저장하고 그 주소를 @7103에 저장한다. 

 

 

- 가변값(mutable)

위의 처리 과정에서 10을 더하기 전과 더한 후 변수 a가 바라보고 있는 주소는 여전히 @5001로 변하지 않는 것을 볼 수 있다. 즉 '새로운 객체'가 만들어진 것이 아니라 기존의 객체 내부의 값만 1에서 11로 바뀐 것이다. 데이터 영역에 저장된 값은 모두 불변값이지만(1,11), 변수(@7103)에는 다른 값을 얼마든지 대입할 수 있다. 

 

 

 

그렇다면 왜 참조형은 주소 값을 복사하는 것일까?

항상 그렇듯 성능의 문제이다. 참조형에는 어떤 값이 들어갈지 모른다. 그 말인즉슨, 주소 값이 아닌 값 전체를 복사하게 되면 용량이 어마어마하게 커질 수도 있다는 뜻이다. 

 

 

 

 

✅ 기본형 데이터 (primitive type)                           

- Number                                                                                                 
- String                                                                                            
- Boolean                                                                                            
- Null                                                                                                
- Undefined                                                                                 
- Symbol                                                                                                  
- .etc

 

 

✅ 참조형 데이터(reference type)

- Object
- Array
- Function
- Date
- regexp
- Map, WeakMap
- Set, WeakSet

 

- 변수 호이스팅 

 

자바스크립트는 변수 호이스팅이라는 특징을 갖고 있다. 

console.log(val1);
var val1;

 

콘솔창에 변수 val1을 출력하는 코드를 입력했다. 그런데 변수 val1은 아직 선언되기 전이다. 원래대로라면 자바스크립트 코드는 순차적으로 위에서 아래로 실행되기 때문에 참조할 수 없다는 에러가 뜰 것이다.

 

 

하지만 결과적으로는 undefined가 뜬다. 자바스크립트 엔진이 변수 선언 코드는 어디에 있든 가장 먼저 실행시키기 때문이다. 그리고 그 후에 다시 순차적으로 코드를 실행시킨다. 

 

이렇게 변수 선언문이 다른 코드들보다 위로 끌어올려져 먼저 실행되는 것을 변수 호이스팅이라고 한다. 

 

 

 

 

 

 

[참고자료]

https://www.youtube.com/watch?v=vMsK5f_0938