변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
변수를 선언하면 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비한다.
변수의 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되어 undefined로 먼저 초기화된다. 그리고 변수를 초기화하는 코드를 읽을 때 해당 값이 2진수로 저장된 메모리가 확보되고 변수는 확보한 메모리 공간을 가리키게 된다.
값이 2진수로 저장되는 이유
컴퓨터는 모든 데이터를 2진수로 처리한다. 따라서 메모리에 저장되는 데이터는 데이터의 종류(숫자, 텍스트, 이미지, 동영상 등)와 상관없이 모두 2진수로 저장된다.
변수의 초기화는 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다. 만약 변수를 재할당할 시 초깃값이 저장된 메모리 공간은 가비지 콜렉터로 인해 사라지고 변수는 새로 할당하는 값이 저장된 메모리 공간을 가리키게 된다.
console.log(score); // undefined
var score; // 변수 선언문
score = 80;
console.log(score); // 80위에 코드는 변수를 참조하는 코드가 변수 선언문 보다 앞에 있는데 오류를 발생시키지 않고 undefined를 출력한다. 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다. 이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.
사실 변수 선언뿐 아니라 var, let, const, funciton, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅 된다. 모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문이다.
var store = 10 + 20;위에 코드는 이렇게 해석된다.
1. 메모리 공간을 확보하고 10, 20을 확보한 메모리 공간에 2진수로 각각 저장한다.
2. 메모리 공간을 확보하고 CPU가 연산을 하여 10과 20의 더한 값인 30을 확보한 메모리 공간에 2진수로 저장한다.
3. store 변수가 2.에서 확보한 메모리 공간을 가리키게 된다.
4. 10, 20이 2진수로 저장된 메모리 공간은 가비지콜렉터로 인해 사라진다.
변수 이름은 어디에 등록되는가?
변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다. 실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다.
참고
모던 자바스크립트 Deep Dive
let TDZ
