본문으로 건너뛰기

데이터 타입

· 약 4분
준열
준열
프론트엔드 개발자

코어 자바스크립트 스터디 1주차 내용을 정리했습니다. 이번 주제는 데이터 타입입니다.

📊 데이터 타입의 변화​

ES6 전후 데이터 타입 비교​

기본형 (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 ← 🆕

🆕 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될 수 있음

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될 수 있음

🚨 중요한 오해 바로잡기​

일반적인 오해: "기본형은 할당이나 연산 시 복제되고 참조형은 참조된다"

실제: 엄밀히 말하면 둘 모두 복제를 한다! 차이점은 무엇을 복제하느냐에 있습니다.

💾 메모리와 데이터 할당​

JavaScript vs 정적 타입 언어​

정적 타입 언어 (C, C++, Java)JavaScript
• 메모리 낭비 최소화를 위해 데이터 타입별로 할당 메모리 영역을 정해놓음
• 2바이트, 4바이트 등으로 구분
• 사용자가 직접 형변환 필요		• 메모리 관리 압박에서 자유로움
• 메모리 공간을 넉넉하게 할당
• 숫자는 모두 64비트(8바이트) 확보

메모리 관리의 효율성​

비트 단위로 위치를 확인하는 것은 매우 비효율적이므로 몇 개씩 묶어 하나의 단위로 여기면 표현할 수 있는 값도 늘어나면서 동시에 검색 시간을 줄일 수 있습니다.

🏷️ 변수와 식별자​

구분정의설명
변수'변할 수 있는 수'컴퓨터 용어로는 변할 수 있는 무언가(데이터)를 의미
숫자, 문자열, 객체, 배열 모두 데이터
식별자변수명어떤 데이터를 식별하는 데 사용하는 이름

🔄 변수 선언과 데이터 할당​

// 1. 변수 선언
var a;
// 2. 데이터 할당
a = "abc";
// 3. 선언과 할당을 동시에
var a = "abc";

메모리 구조​

변수영역데이터 영역
주소: 1002
데이터: a
값: @5002		주소: 5002
데이터: 'abc'

분리된 영역을 사용하는 이유​

굳이 변수영역에 직접 데이터를 저장하지 않고 데이터영역에 저장하는 이유는 메모리 효율성 때문입니다.

🔒 불변성과 가변성​

구분대상설명
변수와 상수변수 영역 메모리한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재할당할 수 있는지 여부
불변값과 가변값데이터 영역 메모리데이터 영역의 값 자체를 변경할 수 있는지 여부

📦 참조형 데이터의 메모리 구조​

var obj1 = {
  a: 1,
  b: "bbb",
};

메모리 할당 구조​

변수영역

주소데이터값
1001obj1@5001

데이터 영역

주소데이터
5001@7103 ~ ?

객체 변수 영역

주소데이터값
7103a@5003
7104b@5004

데이터 영역 (실제 값)

주소데이터
50031
5004'bbb'

🔄 참조형 데이터의 재할당​

참조형 데이터가 가변값이 될 수 있는 이유는 변수를 재할당하는 과정에서 볼 수 있습니다.

obj1.a = 2;

재할당 과정:

  1. 데이터 영역에 숫자 2가 있는지 검색하고 없다면 새로운 데이터 영역(예: 5005)에 할당
  2. 객체 변수 영역인 주소값 7103인 공간에 주소값 5005를 저장
  3. 변수 obj1이 가리키고 있는 주소(5001)는 변화하지 않음
  4. 데이터영역은 불변이지만, 객체의 변수 영역에는 다른 값을 얼마든지 대입할 수 있기 때문에 참조형 데이터는 가변값

🎯 중첩된 참조형 데이터​

var obj1 = {
  a: 1,
  arr: [3, 4, 5],
};

중첩된 참조형 데이터의 프로퍼티 할당은 객체의 변수 영역을 따로 선언했던 것처럼 해당하는 배열이나 데이터에 대한 변수 영역을 따로 선언하여 주소값을 할당하는 방식으로 사용합니다.

배열 재할당 예시​

obj1.arr = "str";

재할당 과정:

  1. 문자열 'str'이 없기 때문에 데이터영역에 새로운 주소로 데이터를 할당
  2. 객체의 변수영역이 새로운 주소를 참조하게 됨
  3. 더 이상 참조하지 않는 데이터는 가비지 컬렉터의 대상이 됨

📝 기본형 데이터 복사​

var a = 10;
var b = a;

기본형 데이터는 값 자체가 복사되어 완전히 독립적인 값이 됩니다.

📚 정리​

  • ES6에서 Symbol, Map, WeakMap, Set, WeakSet이 추가
  • 기본형과 참조형 모두 복사를 하지만, 복사하는 대상이 다름
  • 메모리는 변수영역과 데이터영역으로 분리되어 효율적으로 관리
  • 참조형 데이터는 변수영역의 재할당으로 인해 가변값이 됨
  • 가비지 컬렉터가 더 이상 참조되지 않는 데이터를 정리

스터디: 코어 자바스크립트 1주차