2025년 1월 11일

[JS] 원시 타입과 참조 타입

JavaScript의 데이터 타입에 대해 알아봅니다.

변수 vs 값

먼저 변수와 값의 구분을 명확히 하자.

변수는 임의의 값을 ‘저장’하기 위한 메모리 공간이며
값은 변수에 ‘저장’된 데이터로서 표현식이 평가된 결과이다.

let x = 10;

위 코드에서 변수는 x이고 값은 10이다.

JavaScript에서 변수 선언 시 var, let, const 키워드를 사용할 수 있다.

var 키워드로 변수를 선언할 경우 함수 스코프를 가진다.

function fun() {
  if (true) { var x: number = 10; }
  console.log(x); // 10
}

fun();

let 키워드로 변수를 선언할 경우 블록 스코프를 가진다.

function fun() {
  if (true) { let x: number = 10; }
  console.log(x); // error
}

fun();

const 키워드로 변수를 선언할 경우 상수를 선언한다.
마찬가지로 블록 스코프를 가진다.

const x = 10;
x = 20; // error

원시 타입 값이 변수에 할당될 때 변수에는 값 자체가 저장된다.
이는 변수가 해당 값의 메모리 주소를 가리킴과 상통한다.

이 값은 객체가 아니기에 메서드를 가지지 않는다.

한편 원시 타입 값은 불변성을 가진다.
따라서 변수의 값을 변경하면 새로운 메모리 주소에 새로운 값을 저장하게 된다.

let x = 10;
x = 20;

이번엔 변수의 값을 복사하는 상황을 생각해보자.

let x = 10;
let y = x;

즉 변수 x와 y는 서로 다른 메모리 주소를 가리키지만 같은 값을 가진다.

대표적인 원시 타입은 다음과 같다.

Q. string의 메서드가 없어야 하는 것 아닌가?

우리가 사용하는 string 메서드는 String 객체의 메서드이다.
string 값이 메서드를 사용할 때 자동으로 String 객체로 변환되어 메서드를 사용한다.

참조 타입 값은 Heap 메모리 공간에 저장된고 변수에는 값이 저장된 Heap 메모리 주소가 저장된다.
이는 let 키워드로 선언한 배열의 경우 메모리 주소의 재할당이 가능하다는 것을 의미한다.

따라서 다른 참조 타입 값을 재할당하고자 하는 경우가 아닌 경우 const 키워드로 배열을 선언하는 것이 바람직하다.
참조 타입 값을 변경하더라도 Heap의 메모리 주소는 변하지 않기 때문이다.

대표적인 참조 타입은 다음과 같다.

const obj = {
  name: 'John',
  age: 20
};

const arr = [1, 2, 3];