자바스크립트 어플리케이션에서 값에 상징적인 이름으로 변수를 사용합니다. 변수명은 식별자(identifier)라고 불리며 특정 규칙을 따릅니다.
- MDN 문법과 자료형
변수는 쉽게 말해 프로그램 실행 도중 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
따라서 컴퓨터에 변수의 정체를 알리고, 공간을 확보하고, 원하는 값을 주는 과정이 변수 선언, 초기화, 할당 과정이다.
변수 선언과 할당은 세 가지 단계로 이루어진다.
선언 단계에서는 const
, let
, var
중 필요한 선언 키워드를 통해 이루어진다.
이 때, 선언 키워드에 따라 해당 변수의 특성이 결정된다.
변수들의 특징은 이전에 쓴 const || let || var 글을 통해 확인을 해보자.
자바스크립트는 우리가 쓴 코드를 실행하기 전, 코드를 전체를 훑으면서 문제가 없는지 확인하는 과정을 거친다. 이를 실행 컨텍스트 Execution phase(실행 단계)라고 하는데, 선언 단계는 자바스크립트의 실행 컨텍스트 Execution phase(실행 단계)에서 진행된다.
이 과정에서 실행 컨텍스트를 생성하고, 변수와 함수를 등록한다.
쉽게 말해 컴퓨터에 내가 쓴 변수, 함수의 존재를 알리는 역할을 하는 과정이다.
(소스코드, 실행 컨텍스트에 대한 내용은 후에 업로드 해보겠다.)
초기화 단계에서는 선언 키워드를 통해 이름이 정해진 변수에 값을 저장하기 위한 메모리 공간을 확보하고, 암묵적으로 undefined
를 할당한다.
초기화 단계는 어느 선언 키워드를 사용하느냐에 따라 다른데,
먼저 var
키워드를 사용한 선언 방식의 경우,
- 실행 컨텍스트 Execution phase(실행 단계)에서 실행 컨텍스트에 변수를 등록한다.
- 콜 스택의 메모리 저장 공간에 해당 변수를 위한 메모리 공간을 확보한다.
- 그 공간의 주소 값을 실행 컨텍스트에 등록된 변수에 저장한다.
- 해당 저장 공간에
undefined
를 할당하는 것으로 초기화를 진행한다.
var
키워드의 경우 선언과 초기화가 함께 일어나기 때문에, 메모리를 갖고 있는 변수로 간주되어 선언문 앞에서도 해당 변수는 참조가 가능하게 된다.
참조가 가능해진 var
로 선언한 변수는 실행 컨텍스트 최상위로 이동하게 되고,
var
키워드로 선언한 변수가 호이스팅이 일어나는 과정이라고 볼 수 있다.
const
와 let
키워드를 사용한 선언 방식의 경우,
실행 컨텍스트 Execution phase(실행 단계)에서 실행 컨텍스트에 변수를 등록하는 선언 단계를 거치고 난 후
해당 과정에서는 아무런 작업이 일어나지 않는다.
이 둘의 초기화 단계는 런 타임 과정에서 발생한다.
let byeonSu = 10; // 실제 코드
// 실제 코드를 런타임 과정 시점으로 살펴본다면,
let byeonSu // 초기화 (1)
byeonSu = 10; // 할당 (2)
해당 코드를 통해 대충 알 수 있듯, let
, const
의 초기화 단계는 런 타임 과정에서 이루어진다.
먼저 초기화 부분 (1) 런타임에서 발견하면,
- 콜 스택 메모리 저장 영역에 해당 변수를 위한 메모리를 확보하여
undefined
를 할당한다.- 해당 메모리 주소값을 변수에 저장한다.
그리고,
하던 설명을 마저 하자면,
- 할당 부분 (2) 부분을 콜 스택 메모리 저장 영역에 메모리를 확보하여 할당한다.(let, const만 해당)
- 해당 메모리 주소값을 기존
undefined
가 저장 되어 있는 변수에 교체하여 저장한다.(var, let, const 모두 해당)
할당 단계는 할당연산자 =
를 통해 이루어지며 모든 선언 키워드의 할당은 런 타임 과정에서 이루어진다.
다시 정리하자면,
var
: 실행 컨텍스트 Execution phase(실행 단계)에서 선언과 초기화 단계가 이루어지고, 런 타임 과정에서 할당이 이루어진다.
let
, const
: 실행 컨텍스트 Execution phase(실행 단계)에서 선언 단계만 이루어지고, 런 타임 과정에서 초기화 단계 후 새로운 메모리를 확보하여 할당할 값을 저장한다.
그리고 초기화 단계에서 undefined
가 저장 되어있는 주소값을 할당값이 저장된 주소값으로 교체하여 할당 단계가 이루어진다.
이를 실행 컨텍스트 Execution phase(실행 단계)라고 하는데, 선언 단계는 자바스크립트의 실행 컨텍스트 Execution phase(실행 단계)에서 진행된다.
이 과정에서 실행 컨텍스트를 생성하고, 변수와 함수를 등록한다.
"선언 단계는 자바스크립트의 실행 컨텍스트 Execution phase(실행 단계)에서 진행된다."
이 문장에서 Execution phase(실행 단계) 아니라, 생성단계입니다.