node

코어 자바스크립트 데이터 타입

bonschicken 2025. 4. 7. 13:44
728x90


자바스크립트의 데이터 타입은 크게 두 가지로 나눌 수 있습니다.
바로 기본형(Primitive Type) 과 참조형(Reference Type) 입니다.

1. 기본형 (Primitive Type)

기본형은 하나의 값만을 가지며, 변경 불가능한(immutable) 타입입니다.
아래와 같은 타입들이 여기에 속합니다:

  • number (숫자)
  • string (문자열)
  • boolean (불리언)
  • null
  • undefined
  • symbol

2. 참조형 (Reference Type)

참조형은 여러 값들을 묶어서 저장할 수 있으며, 변경 가능한(mutable) 타입입니다.
다음과 같은 타입들이 참조형에 해당합니다:

  • object (객체)
  • array (배열)
  • function (함수)
  • Date (날짜)
  • RegExp (정규표현식)
  • Map
  • WeakMap
  • Set
  • WeakSet

 

기본형과 참조형을 구분하는 이유

기본형과 참조형의 차이는 메모리에 데이터를 저장하고 복사하는 방식에서부터 시작됩니다.

  • 기본형은 변수에 실제 값이 저장되며, 값을 복사하면 값 자체가 복제됩니다.
  • 참조형은 변수에 값이 저장된 메모리 주소(참조값) 가 저장됩니다. 이를 복사하면 실제 값이 아니라 메모리 주소를 참조하는 포인터가 복제됩니다.

즉, 기본형은 독립된 값을 가지지만, 참조형은 동일한 객체를 여러 변수가 공유하게 될 수 있습니다.

 

기본형의 불변성 (Immutability)

기본형은 불변성(immutable)을 가집니다.
즉, 한 번 생성된 값은 변경할 수 없습니다.

예를 들어:

let a = 'hello';
a[0] = 'H'; // 작동하지 않음
console.log(a); // 'hello'

 

문자열은 변경되지 않으며, 새로운 문자열을 만들지 않는 이상 값은 그대로 유지됩니다.

 

메모리 구조와 식별자, 변수

자바스크립트의 변수 개념을 정확히 이해하려면 메모리와 식별자에 대한 이해가 필요합니다.

  • 비트는 가장 작은 데이터 단위이며, 이들이 모여 바이트를 구성합니다.
  • 각 데이터는 메모리 상의 고유한 주소(Address) 를 가지고 있습니다.
  • 이 주소를 통해 식별할 수 있으며, 데이터를 효율적으로 읽고 쓸 수 있습니다.

변수와 식별자의 차이

  • 변수는 데이터를 담는 그릇입니다. 여기서 데이터는 숫자, 문자열, 객체, 배열 등 모든 값을 포함합니다.
  • 식별자는 변수에 이름을 붙인 것입니다. 즉, 우리가 작성하는 변수명은 데이터를 식별하기 위한 이름입니다.

변수 선언 동작 원리

자바스크립트에서 변수를 선언한다는 것은 단순히 어떤 값을 저장하는 것을 넘어, 메모리 공간을 확보하고, 식별자를 통해 접근할 수 있게 만드는 과정입니다

예시로 다음 코드를 보겠습니다:

let a = 10;

 

위 코드는 다음과 같은 과정을 거쳐 실행됩니다:

 

 

변수 선언의 단계

1. 메모리 공간 확보

먼저, a라는 이름의 변수에 값을 저장하기 위한 메모리 공간을 확보합니다.

이때, 메모리는 크게 변수 영역과 데이터 영역으로 나뉘어 사용됩니다.

2. 식별자와 메모리 주소 연결

변수명 a는 메모리 주소와 연결됩니다.
이 주소는 데이터(10) 가 저장되어 있는 위치를 가리킵니다.

3. 값을 저장

메모리 공간에 값 10이 저장됩니다.
이때, a를 통해 이 값을 참조할 수 있습니다.

 

 

정리

  • 변수는 데이터를 담는 컨테이너입니다.
  • 식별자는 그 데이터를 참조할 수 있게 해주는 이름입니다.
  • 변수 선언 시, 자바스크립트는 메모리 공간을 만들고 해당 공간에 값을 저장한 뒤 식별자와 연결합니다.

 

 

왜 변수 영역과 데이터 영역을 분리해서 사용하는가?

✅ 이유 1. 변수 이름(식별자)은 짧고 고정, 데이터는 크고 유동적이기 때문

  • 변수명은 보통 아주 짧고, 크기가 작습니다. (a, username, price 등)
  • 반면, 데이터 값은 작을 수도 있지만 객체, 배열, 문자열처럼 클 수도 있고 크기가 가변적입니다.

➡️ 그래서 변수는 가볍게 따로 저장하고, 데이터는 따로 큰 공간에 저장하는 게 메모리 효율적이에요.

 

 

✅ 이유 2. 참조 기반 데이터(객체, 배열 등)를 효율적으로 다루기 위해

 

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

 

  • 변수 a, b는 같은 주소값을 참조합니다.
  • 데이터 영역에 { x: 1 } 객체는 한 번만 저장되고,
  • 변수 영역에서는 그 객체를 참조하는 주소만 저장하면 돼요.

➡️ 이렇게 하면 데이터를 복사하지 않고도 여러 변수에서 공유할 수 있어서 성능에 유리합니다.

 

 

✅ 이유 3. 가비지 컬렉션을 위한 추적이 쉬워짐

  • 자바스크립트는 가비지 컬렉터(GC) 가 존재해서, 더 이상 참조되지 않는 데이터를 자동으로 제거합니다.
  • 변수 영역에서 참조가 끊긴 주소는 데이터 영역에서 제거할 수 있어요.

➡️ 변수와 데이터를 분리하면 참조 유무 판단이 명확해지고 자동 메모리 관리(GC) 가 쉬워집니다.

 

 

 

✅ 이유 4. 스코프(변수의 생존 범위) 관리가 명확해짐

  • 변수는 함수 스코프나 블록 스코프를 따릅니다.
  • 데이터는 해당 스코프와 별개로 존재할 수 있습니다.

➡️ 변수의 수명과 데이터의 수명을 분리할 수 있어 더 유연한 메모리 관리가 가능합니다

 

 

✅ null vs undefined 차이점 요약

항목nullundefined
의미 개발자가 명시적으로 "값이 없음" 을 표현 초기화되지 않음, 시스템이 자동으로 설정
타입 object (버그로 인한 타입) undefined
누가 설정? 개발자가 직접 설정 자바스크립트 엔진(브라우저) 가 자동 설정
사용 예시 의도적으로 비어 있는 값을 나타낼 때 변수를 선언했지만 아직 값을 할당하지 않았을 때
비교 시 특징 null == undefined → true (느슨한 동등) null === undefined → false (엄격한 동등)