변수 선언
- 변수 선언이란 변수를 생성하는 것을 말한다.
- 좀 더 자세히 말하면 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.
- 변수 선언에 의해 확보된 메모리 공간은 확보가 해제되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전하게 사용할 수 있다.
- 변수를 선언하려면 반드시 선언이 필요하다. 자바스크립트에서 변수를 선언할 때에는
var,let,const키워드를 사용한다. - ES6에서
let,const키워드가 도입되기 이전까지var키워드는 자바스크립트에서 변수를 선언할 수 있는 유일한 키워드였다.var키워드는 여러 단점이 있다.- 대표적인 것이 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다는 것이다. 이로 인해 의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생하기도 한다.
- ES6에서
let,const키워드를 도입한 이유가 바로var키워드의 여러 단점을 보완하기 위해서이다.
자바스크립트의 변수 선언 특징
- 자바스크립트에서는 다음과 같이 변수 선언 이후 변수에 값을 할당하지 않을 경우 자바스크립트 엔진에 의해 메모리 공간에는
undifined라는 값이 암묵적으로 할당되어 초기화된다.
var score;- 이것은 자바스크립트의 독특한 특징이다.
- 즉, 자바스크립트 엔진은 변수 선언을 다음과 같은 2단계에 거쳐 수행한다.
- 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
- 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로
undifined를 할당해 초기화한다.
- 변수의 선언과 값의 할당을 하나의 문장으로 단축 표현해도 자바스크립트 엔진은 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다. 따라서 변수에
undefined가 할당되어 초기화되는 것은 변함 없다.
var score; // undifined
score = 80;
// 위 코드와 동일하게 동작한다.
var score = 80;변수 이름은 어디에 등록되는가?
- 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다.
- 실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역으로, 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다.
- 변수 이름과 변수 값은 실행 컨텍스트 내에 키(Key)/값(Value)의 형식인 객체로 등록되어 관리된다.
변수 선언의 실행 시점과 변수 호이스팅
- 다음 예제를 살펴보자.
console.log(score); // ?
var score; // 변수 선언문- 변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로
console.log(score);가 가장 먼저 실행되고 순차적으로 다음 줄에 있는 코드를 실행한다. - 따라서
console.log(score);가 실행되는 시점에는 아직score변수의 선언이 실행되지 않았으므로 참조 에러(ReferenceError)가 발생할 것처럼 보인다. - 하지만 참조 에러가 발생하지 않고
undefined가 출력된다. - 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.
- 즉, 자바스크립트 엔진이 소스코드를 실행하는 과정은 다음과 같다.
- 소스코드를 한 줄씩 실행하기에 앞서 먼저 소스코드 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 한다.
- 이때 소스코드 실행을 위한 준비 단계인 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아내 먼저 실행한다.
- 소스코드의 평가 과정이 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.
- 즉 자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.
- 이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유한 특징을 변수 호이스팅(Variable Hoisting)이라고 한다.
- 사실 변수 선언뿐 아니라
var,let,const,function,function*,class키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스)는 호이스팅된다.
📌 Reference
- 모던자바스크립트 Deep Dive
Easy come Easy go