[Javascript] 변수 선언 시 메모리 할당 과정

let title = "어린왕자";

위와 같이 변수가 할당됐을 때, 메모리에 어떤 과정을 통해 저장이 되는지 알아보았다.

 

변수 선언 및 메모리 할당 과정

1. 변수 선언 

• let 키워드로 title 변수 선언한다.
• 자바스크립트 엔진은 title 변수를 메모리의 특정 위치에 저장한다.
• 이 시점에 변수는 undefined 로 초기화된다! 😄

2. 메모리 할당

• "어린왕자" 를 별도의 메모리 영역에 저장한다.
• 그 메모리는 힙(Heap) 영역!

3. 변수 값 할당

• title 변수에 "어린왕자" 문자열의 메모리 주소를 할당한다.
• 위의 과정을 통해 드디어..! title 변수는 힙 영역에 저장된 문자열 "어린왕자"를 가리키게 된다.

 

메모리 구조

스택(Stack) 메모리

• 변수 title 의 선언과 초기화가 스택 메모리에 저장한다.
• * 참고로 스택 메모리는 함수 호출, 지역 변수 등을 저장하는 메모리이다!
• 아래는 스택 메모리에 title 변수가 저장된 모습이다. 변수명과 메모리 주소이다.

Stack:
┌────────────┐
│  title     │
│ 0x1f8a74d2 │
└────────────┘

 

힙 메모리

• 실제 문자열 값인 "어린왕자" 가 힙 메모리에 저장된다.
• * 참고로 힙 메모리는 동적으로 생성된 객체나 원시 값을 저장하는데 사용된다.
• 아래는 힙 메모리에 "어린왕자" 가 저장된 모습이다

Heap:
┌────────────┐
│ 0x1f8a74d2 │ (메모리 주소)
│ "어린왕자"   │
└────────────┘

 

변수명은 어디에 저장되는가?

위의 예제에서 title 이라는 변수는 어디에 저장하는지 궁금증이 들어서 찾아보았다. 

 

자바스크립트에서 변수명을 따로 저장하지는 않지만, 변수명과 관련된 정보는 스코프 및 환경 레코드(Execution context and Environment Record)에 저장된다고한다. 이를 통해 자바스크립트 엔진이 변수명과 해당 변수의 메모리 주소를 연관 지을 수 있는 것이다.

→ 무슨 말인지 모르겠다 단계별로 알아보자. 단계별로 알아보기 전에 알아야할 개념 먼저 짚고 넘어가야된다. 바로 실행 컨텍스트, 환경 레코드, 변수환경, 렉시컬 환경 등 이다. 이를 알아보고 예시를 통해 단계별로 알아보자.

 

실행 컨텍스트

실행 컨텍스트는 코드가 실행되는 환경을 말한다. 자바스크립트에서 실행 컨텍스트는 세 가지 중요한 요소를 포함한다. 

변수환경(Variable Environment), 렉시컬 환경(Lexical Environment), this 바인딩

이 중에서 변수 선언과 관련된 부분은 변수 환경과 렉시컬 환경이다.

 

환경 레코드(Environment Record)

• 자바스크립트는 코드 실행 시 실행 컨텍스트(Execution Context) 를 생성한다.
• 이 실행 컨텍스트 안에 환경 레코드 라는 구조가 있다.
• 환경 레코드에 변수명과 그에 대응하는 값 혹은 메모리 주소를 저장한다(변수와 값의 매핑 정보)

 

변수 환경

변수의 선언 및 초기화가 저장된다.

 

렉시컬 환경

코드 실행 시 참조할 수 있는 변수와 관련된 환경 정보가 저장된다.

 

예시

function example() {
    let title = "어린왕자";
    console.log(arr);
}

example();

위의 예시에서 example 함수가 호출되면 다음과 같은 과정이 일어난다.

 

1. 실행 컨텍스트 생성

• example 함수가 호출되면 새로운 실행 컨텍스트가 생성되며 변수 환경과 렉시컬 환경이 설정된다.
• 이 실행 컨텍스트에는 환경 레코드가 포함되어있음!!

2. 변수명과 메모리 주소 저장

• 변수 환경의 환경 레코드에 title 변수가 undefined 로 초기화된다.
• 코드 실행이 시작되면 title 변수에 "어린왕자" 문자열이 할당된다.

ExecutionContext = {
  VariableEnvironment: {
    EnvironmentRecord: {
      title: "어린왕자"
    },
    OuterEnvironmentReference: null // 글로벌 컨텍스트의 경우
  },
  LexicalEnvironment: {
    EnvironmentRecord: {
      title: "어린왕자"
    },
    OuterEnvironmentReference: null // 글로벌 컨텍스트의 경우
  },
  ThisBinding: globalThis
}

// 변수 환경과 렉시컬 환경이 동일한 환경 레코드를 공유한다고 이해하면 된다.

3. 환경 레코드 구조

• 실행 컨텍스트의 환경 레코드 구조는 다음과 같다.

Environment Record:
┌────────────┬───────────────┐
│ Variable   │ Value         │
├────────────┼───────────────┤
│ arr        │ 0x1f8a74d2    │ (메모리 주소)
└────────────┴───────────────┘

 

4. 변수 값 접근

• console.log(title) 을 호출하면 자바스크립트 엔진은 환경 레코드에서 title 변수명을 찾고 그에 대응하는 값을 가져온다.

 

즉, 변수명 자체는 메모리에 직접 저장되지 않지만, 실행 컨텍스트의 환경 레코드에 저장되어 변수명과 해당 값을 관리한다. 자바스크립트 엔진은 환경 레코드를 통해 변수명과 값을 연결하고 관리하는 것!!!