[Javascript] 기본형과 참조형

자바스크립트에서 데이터 타입은 크게 2가지로 나뉘는데 기본형(원시형)과 참조형이 있다.

1. 기본형 or 원시형 (Primitive Type)

• 기본형 데이터가 할당된 변수는 자기 자신만의 고유한 값을 가진다.
• 기본형 데이터는 변경 불가능한 값으로 한 번 생성된 기본형 데이터는 변경할 수 없다. (불변성)
• 기본형 데이터를 할당한 변수는 재할당 이외에는 변수값을 변경할 수 없다.
• call-by-value (값에 의한 호출)의 형태로 전달된다.

기본형 종류

 

• Number
• String
• Boolean
• null
• undefined
• Symbol (ES6 추가됨)

기본형 예시

 

1️⃣ 변수 생성 과정

 

변수 a를 선언하면 컴퓨터는 메모리 안에 데이터가 담길 공간을 확보한다. 아래의 이미지에서는 임의로 주소 1003의 공간을 확보하였다. 확보한 주소 공간에 식별자 a를 저장한 후 변수 a에 값 "abc"를 할당하면 비어있는 별도의 메모리 공간 5004에 "abc"가 저장된다. (자바스크립트는 식별자 메모리 공간과 할당하려는 값의 메모리 공간을 따로 만드는데 메모리 공간을 효율적으로 관리하기 위해서이다)

 

 

이후에 메모리 주소 5004를 가지고 데이터가 들어있는 공간을 검색하다가 식별자 a를 찾게되고 a의 주소 1003의 값을 5004로 지정한다.

 

 

2️⃣ 변수 재할당 과정

 

이후에 변수 a에 다른 값을 재할당하게 될 경우 임의의 공간 5005에 문자열 "abcdef"를 저장하고, 메모리 주소 5005를 가지고 식별자 a를 검색한다. a를 찾으면 a의 주소 1003의 데이터를 주소 5004 대신에 5005로 변경한다.

 

 

즉, 기본형 데이터는 변경이 불가능하기 때문에(불변성) 변수값 변경을 위해 기본형 데이터를 재할당하면 새로운 메모리 공간을 확보 후 값을 저장한 뒤 변수가 참조하던 메모리 공간의 주소를 변경한다.

 

3️⃣ 변수 동일한 값 할당

 

만약 변수 b를 선언하고 동일한 값 "abcdef"를 할당하면 메모리에서 어떠한 일이 발생할까? 새로운 메모리 공간을 확보하고 값을 저장할까? 아니다! 이전에 변수 a에서 "abcdef"를 할당하며 해당값이 이미 메모리에 저장되어 있기때문에 동일한 메모리 주소를 참조하게 된다.

 

 

❓ 그렇다면 기존의 메모리 공간은 어떻게 될까?
자바스크립트 엔진은 가비지 컬렉터라는 자동 메모리 최적화 프로그램이 탑재되어 있기때문에
더 이상 참조되지 않는 가비지 데이터는 가비지 컬렉터의 의해 적절한 시점에 메모리에서 자동 해제된다.

💡 typeof 메서드

이 메서드를 사용하면 기본형 데이터의 종류를 알 수 있다.
추가적으로 null의 타입은 object로 출력되는데 이것은 자바스크립트 개발 단계의 실수이다.

 

---

2. 참조형 (Reference Type)

• 자바스크립트 객체를 나타낸다.
• 참조형 데이터는 변수에 값을 직접 저장하지 않는다.
• 변수에 저장되는 것은 메모리 안에서 객체의 위치를 가리키는 `포인터` 이다.
• call-by-reference (참조에 의한 호출)로 전달된다.

참조형 종류

 

• Array
• Function
• RegExp
• Set / WeakSet
• Map / WeakMap

var obj = { a: 1 };
var obj2 = { b: 2 };

obj2 = obj;

obj2.a = 3;
console.log(obj); // result : { a: 3 }
console.log(obj2); // result : { a: 3 }

 

obj2에 obj를 할당하면 객체가 아닌 주소를 참조하게 된다. 때문에 obj2의 a 프로퍼티 값을 수정했을 때 obj 또한 같은 주소를 공유하고 있으므로 obj의 a 프로퍼티 값이 바뀌게 된다.

 

 

참조형 예시

 

1️⃣ 변수 생성 과정

 

변수 obj를 선언 후 비어있는 임의의 메모리 공간 1002를 확보한 후 식별자 obj를 등록, 값을 저장하기 위해 주소 5002 공간을 확보한다. 그런데 객체는 여러개의 변수와 값을 모아놓은 그룹이기 때문에 5002에 전부 저장할 수 없어 변수(프로퍼티)들을 위한 별도의 메모리 공간(주소 7103 ~ ?)을 확보하고 이 공간의 주소를 5002에 저장한다. 그리고 주소 7103, 7104에 a, b 프로퍼티를 식별자로 등록

 

 

 

데이터 영역에 1 과 "bbb"가 있는지 검색하는데 없으므로 임의의 공간 5003과 5004에 1과 "bbb"를 저장한다.

 

 

2️⃣ 참조형 데이터가 가변적인 이유

 

기본형 데이터와의 차이점은 참조형 데이터의 경우 별도의 객체의 변수(프로퍼티) 영역이 존재한다는 점이다.

obj에 a 프로퍼티에 값 2를 할당하면 데이터 영역에 2가 있는지 검색하고 없으면 빈 공간 주소 5005에 2를 저장, 주소 5005를 가지고 obj.a 를 검색한다. obj가 가리키고 있는 주소 5002로 이동하고 여기서 가리키고 있는 @7103 ~ ? 위치로 이동, 7103에 a 프로퍼티가 있으므로 5003에서 5005로 변경한다. 즉, 변수 obj가 가리키고 있는 주소 5002는 동일하고 객체 내부 프로퍼티의 값이 변경된 것이다.

 

 

---

 

 

참고

인프런 - 코어 자바스크립트 강의