📚 Core-JavaScript 1주차 정리본
📋 목차
- 1. 데이터 타입
- 2. ES6에서 추가된 새로운 타입들
- 3. 기본형 vs 참조형
- 4. 메모리 저장 방식
- 5. 변수 vs 식별자
- 6. 변수 선언과 데이터 할당
- 7. 기본형 데이터와 참조형 데이터
- 8. 참조형 데이터의 할당 과정
- 9. 중첩된 참조형 데이터
- 10. 변수 복사 비교
1. 데이터 타입
🔹 기본형(원시형, Primitive Type)
| ES6 전 | ES6 후 |
|---|---|
| • 숫자(number) • 문자열(string) • 불리언(boolean) • null, undefined | • 숫자(number) • 문자열(string) • 불리언(boolean) • null, undefined • 심볼(symbol) ← 🆕 |
🔸 참조형(Reference Type)
| ES6 전 | ES6 후 |
|---|---|
| • 객체(object) • 배열(Array) • 함수(function) • 날짜(date) • 정규표현식(regexp) | • 객체(object) • 배열(Array) • 함수(function) • 날짜(date) • 정규표현식(regexp) • Map ← 🆕 • WeakMap ← 🆕 • Set ← 🆕 • WeakSet ← 🆕 |
2. ES6에서 추가된 새로운 타입들
🔺 심볼(Symbol)
const sym1 = Symbol('description');
const sym2 = Symbol('description');
console.log(sym1 === sym2); // false - 항상 유일함- 유일한 식별자를 만드는 원시타입이다.
🗺️ Map
const map = new Map();
map.set('string', 'value1');
map.set(42, 'value2');
map.set(true, 'value3');- 키-값 쌍을 저장하는 컬렉션으로, 객체와 달리 모든 타입을 키로 사용할 수 있다.
🗺️ WeakMap
const wm = new WeakMap();
let obj = {};
wm.set(obj, 'some value');
obj = null; // 객체가 GC될 수 있음- Map과 비슷하지만 키는 반드시 객체여야 하고, 키에 대한 참조가 없어지면 가비지 컬렉션이 된다. 크기를 알 수 없고 순회할 수 없다.
📦 Set
const set = new Set([1, 2, 2, 3, 3]);
console.log(set); // Set {1, 2, 3}- 중복되지 않는 값들의 컬렉션이다.
📦 WeakSet
const ws = new WeakSet();
let obj1 = {};
ws.add(obj1);
obj1 = null; // 객체가 GC될 수 있음- Set과 비슷하지만 객체만 저장할 수 있고, 참조가 없어지면 가비지 컬렉션이 된다. 크기를 알 수 없고 순회할 수 없다.
3. 기본형 vs 참조형
🚨 중요한 오해 바로잡기
기본형은 할당이나 연산 시 복제되고 참조형은 참조 된다고 알려져 있다.
하지만, 엄밀히 말하면 둘 모두 복제를 하긴 한다!
차이점:
- 기본형: 값이 담긴 주소값을 바로 복제
- 참조형: 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제
⚡ 기본형은 불변성을 띈다
4. 메모리 저장 방식
💾 기본 개념
- 컴퓨터는 모든 데이터를 0 또는 1로 바꿔 기억한다.
- 0 또는 1만 표현할 수 있는 하나의 메모리 조각을 비트(bit)라고 한다.
- 메모리는 매우 많은 비트들로 구성되어 있고, 각 비트는 고유한 식별자를 통해 위치를 확인한다.
📊 바이트(Byte)
비트 단위로 위치를 확인하는 것은 매우 비효율적이므로 몇 개씩 묶어 하나의 단위로 여기면 표현할 수 있는 값도 늘어나면서 동시에 검색 시간을 줄일 수 있다.
- 1바이트 = 8개의 비트
- 1바이트 = 256개(2^8)의 값 표현 가능
🆚 정적 타입 언어 vs JavaScript
| 정적 타입 언어 (C, C++, Java) | JavaScript |
|---|---|
| • 메모리 낭비 최소화를 위해 데이터 타입별로 할당 메모리 영역을 정해놓음 • 2바이트, 4바이트 등으로 구분 • 사용자가 직접 형변환 필요 | • 메모리 관리 압박에서 자유로움 • 메모리 공간을 넉넉하게 할당 • 숫자는 모두 64비트(8바이트) 확보 |
5. 변수 vs 식별자
| 구분 | 정의 | 설명 |
|---|---|---|
| 변수 | '변할 수 있는 수' | 컴퓨터 용어로는 변할 수 있는 무언가(데이터)를 의미 숫자, 문자열, 객체, 배열 모두 데이터 |
| 식별자 | 변수명 | 어떤 데이터를 식별하는 데 사용하는 이름 |
6. 변수 선언과 데이터 할당
📝 선언과 할당 과정
// 1. 변수 선언
var a;
// 2. 데이터 할당
a = 'abc';
// 3. 선언과 할당을 동시에
var a = 'abc';🧠 메모리 구조
| 변수영역 | 데이터 영역 |
|---|---|
| 주소: 1002 | 주소: 5002 |
| 데이터: a | 데이터: 'abc' |
| 값: @5002 |
✅ 선언과 할당의 정의
- 선언: 공간을 확보하고 변수명과 주소를 매칭시키는 과정
- 할당: 해당 변수가 가리키는 주소의 공간에 데이터를 저장하는 과정
🤔 분리된 저장 방식의 이유
굳이 변수영역에 직접 데이터를 저장하지 않고 데이터영역에 저장하는 이유:
- JavaScript에서 숫자형 데이터는 8바이트 공간을 미리 확보하지만 문자열에 대한 특별히 정해진 규격은 없다
- 영어는 1바이트, 한글은 2바이트 등으로 각각 필요한 메모리 용량이 가변적
- 데이터 변환을 자유롭게 하고 메모리를 더욱 효율적으로 관리하기 위해서
7. 기본형 데이터와 참조형 데이터
🔄 불변값 vs 가변값
| 구분 | 대상 | 설명 |
|---|---|---|
| 변수와 상수 | 변수 영역 메모리 | 한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재할당할 수 있는지 여부 |
| 불변값과 가변값 | 데이터 영역 메모리 | 데이터 영역의 값 자체를 변경할 수 있는지 여부 |
🔒 기본형 데이터의 불변성
- 변수에 값을 할당할 때는 먼저 데이터 영역에 해당하는 데이터가 있다면 주소값을 참조하여 사용
- 해당하는 데이터가 없다면 새로 공간을 확보하여 데이터를 할당하고 변수 영역에서 해당하는 주소값을 참조
- 문자열이나 숫자 모두 한 번 만든 값을 바꿸 수 없고, 변경은 새로 만드는 동작을 통해서만 이루어진다
- 이것이 바로 불변성의 성질이다
8. 참조형 데이터의 할당 과정
기본적인 특성
- 기본적인 성질은 가변값이지만 설정에 따라 변경이 불가능한 경우도 있고, 아예 불변값으로 활용하는 방안도 있다.
할당 과정 예시
var obj1 = {
a: 1,
b: 'bbb'
};메모리 할당 과정 상세 설명
1단계: 변수 영역 할당
| 변수영역 |
|---|
| 주소: 1001 |
| 데이터: obj1 |
| 값: @5001 |
2단계: 데이터 영역 할당
| 데이터 영역 |
|---|
| 주소: 5001 |
| 데이터: @7103 ~ ? |
3단계: 객체 변수 영역 할당
| 객체 변수 영역 |
|---|
| 주소: 7103 - 데이터: a, 값: @5003 |
| 주소: 7104 - 데이터: b, 값: @5004 |
4단계: 실제 값들이 저장되는 데이터 영역
| 데이터 영역 |
|---|
| 주소: 5003 - 데이터: 1 |
| 주소: 5004 - 데이터: 'bbb' |
참조형 데이터가 가변값인 이유
참조형 데이터가 가변값이 될 수 있는 이유는 변수를 재할당하는 과정에서 볼 수 있다.
만약 obj1.a = 2;라는 코드를 실행한다면:
1. 데이터 영역에 숫자 2가 있는지 검색하고 없다면 새로운 데이터 영역(예: 5005)에 할당한다.
2. 객체 변수 영역인 주소값 7103인 공간에 주소값 5005를 저장한다.
3. 변수 obj1이 가리키고 있는 주소(5001)는 변화하지 않는다.
4. 데이터영역은 불변이지만, 객체의 변수 영역에는 다른 값을 얼마든지 대입할 수 있기 때문에 참조형 데이터는 가변값이다.
9. 중첩된 참조형 데이터
var obj1 = {
a: 1,
arr: [3, 4, 5]
};중첩된 참조형 데이터의 메모리 할당 과정
1단계: 변수 영역
| 변수영역 |
|---|
| 주소: 1001 |
| 데이터: obj1 |
| 값: @5001 |
2단계: 데이터 영역
| 데이터 영역 |
|---|
| 주소: 5001 - 데이터: @7103 ~ ? |
| 주소: 5002 - 데이터: 'aba' |
| 주소: 5003 - 데이터: @8103 ~ ? (배열 arr의 변수영역 주소) |
| 주소: 5004 - 데이터: 'bbb' |
| 주소: 5005 - 데이터: 5 |
3단계: 객체 변수 영역
| 객체 변수 영역 |
|---|
| 주소: 7103 - 데이터: a, 값: @5003 |
| 주소: 7104 - 데이터: arr, 값: @5003 |
4단계: 배열 arr 변수 영역
| 배열 arr 변수 영역 |
|---|
| 주소: 8103 - 데이터: 0, 값: @5002 |
| 주소: 8104 - 데이터: 1, 값: @5004 |
| 주소: 8105 - 데이터: 2, 값: @5005 |
중첩된 참조형 데이터의 프로퍼티 할당은 객체의 변수 영역을 따로 선언했던 것처럼 해당하는 배열이나 데이터에 대한 변수 영역을 따로 선언하여 주소값을 할당하는 방식으로 사용한다.
가비지 컬렉션
만약 obj1.arr = 'str';이라는 코드를 실행하여 재할당하면:
1. 문자열 'str'이 없기 때문에 데이터영역에 새로운 주소로 데이터를 할당한다.
2. 객체의 변수영역이 새로운 주소를 참조하게 된다.
3. 더 이상 참조하지 않는 데이터는 가비지 컬렉터의 대상이 된다.
참조 카운트
- 데이터를 참조하는 변수의 개수를 참조 카운트라고 한다.
- 참조 카운트가 0인 메모리 주소는 가비지 컬렉터의 대상이 된다.
- 가비지 컬렉터는 런타임 환경에 따라 특정 시점이나 메모리 사용량이 포화 상태에 임박할 때마다 자동으로 수거 대상들을 수거한다.
10. 변수 복사 비교
기본형 데이터 복사
var a = 10;
var b = a;- a와 b 각각 변수 영역의 공간을 차지한다.
- 10이 데이터영역에 존재하는지 확인 후 없다면 새로 공간을 할당한다.
- b는 a에 할당되어 있는 데이터 영역의 주소값을 복사하여 할당받는다.
- 값을 변경하면 서로 다른 주소값을 가지게 된다.
참조형 데이터 복사
- 먼저 선언한 참조형 데이터의 주소값들을 똑같이 가지게 된다.
- 참조형 데이터 같은 경우는 데이터 영역의 주소값은 변하지 않고 참조형 데이터의 변수의 데이터 영역을 참조하여 사용한다.
- 결과적으로 저장되어 있는 주소값은 변하지 않는다.
- 변하는 경우는 객체 자체를 변경했을 때 일어난다.
핵심 차이점
- 기본형: 값 변경 시 새로운 주소값을 가짐
- 참조형: 프로퍼티 변경 시에는 같은 주소값, 객체 자체 변경 시에만 새로운 주소값을 가짐
천천히