자바스크립트 값 타입 vs 참조 타입: 스택과 힙 메모리로 완벽 이해

 

이 글은 자바스크립트 개발자라면 알아야 할 33가지 개념(33 JavaScript Concepts) 중 값 타입과 참조 타입을 정리한 글입니다.

자바스크립트 개발자라면 알아야 할 33가지 개념

값 타입과 참조 타입(Value Types and Reference Types)

ECMAScript 명세에 따르면 값 타입은 변수가 접근하는 위치에 직접 저장됩니다.

여기에는 Null, Undefined, Boolean, Number, BigInt, String, Symbol이 포함됩니다.

변수에 값 타입을 할당하면 값 자체가 저장됩니다.

반면, 참조 타입은 힙에 저장된 객체입니다. 참조 타입에 할당된 변수는 실제로 객체 자체가 아니라 객체에 대한 참조(포인터)를 저장합니다.

참조 타입을 다른 변수에 할당하면 두 변수 모두 메모리에 있는 동일한 객체를 참조합니다.

스택과 힙 메모리

변수를 선언하면 자바스크립트 엔진은 스택과 힙이라는 두 개의 메모리 위치에 해당 변수에 대한 메모리를 할당합니다.

정적 데이터는 컴파일 시점에 크기가 고정된 데이터이며, 정적 데이터에는 다음이 포함됩니다.

• 원시 값(Primitive values) - Null, Undefined, Boolean, Number, BigInt, String, Symbol
• 객체를 참조하는 참조 값(Reference values)

정적 데이터는 크기가 변하지 않으므로 자바스크립트 엔진은 정적 데이터에 고정된 양의 메모리 공간을 할당하여 스택에 저장합니다.

let name = "John";
let age = 25;

name와 age는 원시 값이므로 자바스크립트 엔진은 변수를 스택에 저장합니다.

block-beta
  block
    columns 1
    a["Stack"] b["\n"] c["\n"] d["age=25"] e["name='John'"]
  end

스택과 달리 자바스크립트는 객체 및 함수를 힙에 저장합니다. 자바스크립트 엔진은 이러한 객체에 고정된 양의 메모리를 할당하지 않습니다.

let name = "John";
let age = 25;

let person = {
  name: "John",
  age: 25,
};

block-beta
  block
    columns 1
    a["Stack"] b["\n"] c["person"] d["age=25"] e["name='John'"]
  end
  space
  block
    columns 1
    f["Heap"] g["{ name: 'John', age: 25 }"]
  end
  c --> g
  

자바스크립트는 스택에 세 개의 변수 name, age, person에 대한 메모리를 할당합니다.

자바스크립트 엔진은 힙 메모리에 새로운 객체를 생성하고, 스택 메모리의 person 변수를 힙 메모리의 객체에 연결합니다.

동적 속성

참조 값을 사용하면 언제든지 속성을 추가, 변경 또는 삭제할 수 있습니다.

let person = {
  name: "John",
  age: 25,
};

// ssn 속성 추가
person.ssn = "123-45-6789";

// name 속성 변경
person.name = "John Doe";

// age 속성 삭제
delete person.age;

console.log(person); // { name: 'John', ssn: '123-45-6789' }

참조 값과 달리 원시 값은 속성을 가질 수 없습니다.

원시 값에 속성을 추가하려고 하면 아무런 일도 일어나지 않습니다.

let name = "John";

name.alias = "Knight";

console.log(name.alias); // undefined

값 복사

한 변수에서 다른 변수로 원시 값을 할당하면 자바스크립트 엔진은 해당 값의 복사본을 생성하여 해당 변수에 할당합니다.

// age 변수를 선언하고 25로 초기화합니다.
let age = 25;
// newAge 변수를 선언하고 age값을 할당합니다.
let newAge = age;

내부적으로 자바스크립트 엔진은 원시 값의 복사본을 생성하여 변수 newAge에 25를 할당합니다.

block-beta
  block
    columns 1
    a["Stack"] b["\n"] c["\n"] d["newAge=26"] e["age=25"]
  end

스택 메모리에서 newAge와 age는 별도의 변수입니다.

즉, 한 변수의 값을 변경해도 다른 변수에는 영향을 미치지 않습니다.

let age = 25;
let newAge = age;

newAge = newAge + 1;

console.log(age, newAge);

block-beta
  block
    columns 1
    a["Stack"] b["\n"] c["\n"] d["newAge=26"] e["age=25"]
  end

한 변수에서 다른 변수로 참조 값을 할당하면 자바스크립트 엔진은 두 변수가 힙 메모리에 있는 동일한 객체를 참조하도록 참조를 생성합니다.

즉, 한 변수의 값을 변경하면 다른 변수에도 영향을 미칩니다.

let person = {
  name: "John",
  age: 25,
};

let member = person;

member.age = 26;

console.log(person);
console.log(member);

block-beta
  block
    columns 1
    a["Stack"] b["\n"] c["person"] d["member"]
  end
  space
  block
    columns 1
    e["Heap"] f["{ name: 'John', age: 25 }"]
  end
  c --> f
  d --> f

요약

• 자바스크립트에는 원시 값과 참조 값의 두 가지 타입이 있습니다.
• 참조 값에는 속성을 추가, 변경 또는 삭제할 수 있지만 원시 값에서는 이를 수행할 수 없습니다.
• 한 변수에서 다른 변수로 원시 값을 복사하면 별도의 복사본이 생성됩니다. 즉 한 변수의 값을 변경해도 다른 변수에는 영향을 미치지 않습니다.
• 한 변수에서 다른 변수로 참조 값을 복사하면 두 변수가 동일한 객체를 참조하는 참조가 생성됩니다. 즉, 한 변수를 통해 객체를 변경하면 다른 변수에도 영향을 미칩니다.

👉 이전 글 보기

자바스크립트 개발자라면 알아야 할 33가지 개념 - 2. 원시 타입

👉 다음 글 보기

자바스크립트 개발자라면 알아야 할 33가지 개념 - 4. 암묵적, 명시적, Nominal, 구조적 및 덕 타이핑