변수 선언, 초기화, 할당

Taeseon Kim·2021년 8월 12일
9
post-thumbnail

자바스크립트 어플리케이션에서 값에 상징적인 이름으로 변수를 사용합니다. 변수명은 식별자(identifier)라고 불리며 특정 규칙을 따릅니다.
- MDN 문법과 자료형

변수는 쉽게 말해 프로그램 실행 도중 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

따라서 컴퓨터에 변수의 정체를 알리고, 공간을 확보하고, 원하는 값을 주는 과정이 변수 선언, 초기화, 할당 과정이다.

변수 선언과 할당은 세 가지 단계로 이루어진다.

첫 번째, 선언 단계이다.

선언 단계에서는 const, let, var 중 필요한 선언 키워드를 통해 이루어진다.
이 때, 선언 키워드에 따라 해당 변수의 특성이 결정된다.
변수들의 특징은 이전에 쓴 const || let || var 글을 통해 확인을 해보자.

자바스크립트는 우리가 쓴 코드를 실행하기 전, 코드를 전체를 훑으면서 문제가 없는지 확인하는 과정을 거친다. 이를 실행 컨텍스트 Execution phase(실행 단계)라고 하는데, 선언 단계는 자바스크립트의 실행 컨텍스트 Execution phase(실행 단계)에서 진행된다.
이 과정에서 실행 컨텍스트를 생성하고, 변수와 함수를 등록한다.
쉽게 말해 컴퓨터에 내가 쓴 변수, 함수의 존재를 알리는 역할을 하는 과정이다.
(소스코드, 실행 컨텍스트에 대한 내용은 후에 업로드 해보겠다.)

두 번째, 초기화 단계이다.

초기화 단계에서는 선언 키워드를 통해 이름이 정해진 변수에 값을 저장하기 위한 메모리 공간을 확보하고, 암묵적으로 undefined를 할당한다.

초기화 단계는 어느 선언 키워드를 사용하느냐에 따라 다른데,
먼저 var 키워드를 사용한 선언 방식의 경우,

  1. 실행 컨텍스트 Execution phase(실행 단계)에서 실행 컨텍스트에 변수를 등록한다.
  2. 콜 스택의 메모리 저장 공간에 해당 변수를 위한 메모리 공간을 확보한다.
  3. 그 공간의 주소 값을 실행 컨텍스트에 등록된 변수에 저장한다.
  4. 해당 저장 공간에 undefined를 할당하는 것으로 초기화를 진행한다.

var 키워드의 경우 선언과 초기화가 함께 일어나기 때문에, 메모리를 갖고 있는 변수로 간주되어 선언문 앞에서도 해당 변수는 참조가 가능하게 된다.
참조가 가능해진 var로 선언한 변수는 실행 컨텍스트 최상위로 이동하게 되고,
var 키워드로 선언한 변수가 호이스팅이 일어나는 과정이라고 볼 수 있다.

constlet 키워드를 사용한 선언 방식의 경우,
실행 컨텍스트 Execution phase(실행 단계)에서 실행 컨텍스트에 변수를 등록하는 선언 단계를 거치고 난 후
해당 과정에서는 아무런 작업이 일어나지 않는다.

이 둘의 초기화 단계는 런 타임 과정에서 발생한다.

let byeonSu = 10; // 실제 코드

// 실제 코드를 런타임 과정 시점으로 살펴본다면,
let byeonSu // 초기화 (1)
byeonSu = 10; // 할당 (2)

해당 코드를 통해 대충 알 수 있듯, let, const 의 초기화 단계는 런 타임 과정에서 이루어진다.

먼저 초기화 부분 (1) 런타임에서 발견하면,

  1. 콜 스택 메모리 저장 영역에 해당 변수를 위한 메모리를 확보하여 undefined를 할당한다.
  2. 해당 메모리 주소값을 변수에 저장한다.

그리고,

세 번째, 할당 단계이다.

하던 설명을 마저 하자면,

  1. 할당 부분 (2) 부분을 콜 스택 메모리 저장 영역에 메모리를 확보하여 할당한다.(let, const만 해당)
  2. 해당 메모리 주소값을 기존 undefined 가 저장 되어 있는 변수에 교체하여 저장한다.(var, let, const 모두 해당)

할당 단계는 할당연산자 =를 통해 이루어지며 모든 선언 키워드의 할당은 런 타임 과정에서 이루어진다.

다시 정리하자면,
var : 실행 컨텍스트 Execution phase(실행 단계)에서 선언과 초기화 단계가 이루어지고, 런 타임 과정에서 할당이 이루어진다.

let, const : 실행 컨텍스트 Execution phase(실행 단계)에서 선언 단계만 이루어지고, 런 타임 과정에서 초기화 단계 후 새로운 메모리를 확보하여 할당할 값을 저장한다.
그리고 초기화 단계에서 undefined가 저장 되어있는 주소값할당값이 저장된 주소값으로 교체하여 할당 단계가 이루어진다.

profile
공부하여 이해가 된 것만 정리합니다.

1개의 댓글

comment-user-thumbnail
2023년 4월 15일

이를 실행 컨텍스트 Execution phase(실행 단계)라고 하는데, 선언 단계는 자바스크립트의 실행 컨텍스트 Execution phase(실행 단계)에서 진행된다.
이 과정에서 실행 컨텍스트를 생성하고, 변수와 함수를 등록한다.

"선언 단계는 자바스크립트의 실행 컨텍스트 Execution phase(실행 단계)에서 진행된다."
이 문장에서 Execution phase(실행 단계) 아니라, 생성단계입니다.

답글 달기