변수 선언

• var 키워드의 단점?
  • 블록 레벨 스코프가 아닌 함수 레벨 스코프를 지원한다.
  • 따라서 의도와 다르게 전역 변수가 선언되어 심각한 부작용이 발생하기도 한다.
• 변수 이름은 어디에 등록되는가?
  • 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다.
    • 식별자: 변수, 함수, 클래스 등의 이름
  • 실행 컨텍스트는 자바스크립트 엔진에게 변수의 존재를 알리고, 자바스크립트 엔진은 해당 변수를 참조하거나 값을 바꾸는 등 관리할 수 있다.
• 실행 컨텍스트가 뭔데?
  • 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.
  • 자바스크립트 엔진이 변수를 관리할 수 있도록
  • 함수가 실행되면 함수 실행에 해당하는 실행 컨텍스트가 생성되고, 자바스크립트 엔진에 있는 콜 스택에 쌓인다.

호이스팅

• 변수 선언문이 코드의 맨 위로 끌어 올려진 것처럼 동작하는 특징을 말한다.
  • 사실 변수 선언 뿐만 아니라 var, let, const, function, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅 된다.
• 호이스팅이 발생하는 이유는 소스코드 실행 전에 소스코드 평가 단계를 거치기 때문이다. 소스코드 평가 단계에서 선언문을 찾아서 실행하게 되며, 이 과정을 통해 실행 컨텍스트에 변수가 등록된다.

값의 할당

• 변수 선언과 값의 할당 실행 시점은 다르다.
• 소스코드 평가 단계에서 변수 선언이 실행되고, 런타임에 값이 할당된다.

console.log(score); // (1) undefined 

var score;          // (2) 실행 컨텍스트에 변수 등록
score = 80;         // (3) 런타임에 실행되어 80으로 값 할당

console.log(score); // (4) 80

• (1) 은 score가 호이스팅 되기 때문에 오류가 발생하지 않는다.
• (4) 는 런타임에 실행되며, score = 80; 이후에 실행되므로 score에 80이 할당된 상태다.

console.log(score); // (1) undefined 

var score = 80;     // (2) 실행 컨텍스트에 변수 등록
                    // (3) 런타임에 실행되어 80으로 값 할당

console.log(score); // (4) 80

• 위 코드는 선언과 할당을 동시에 하고 있지만, 자바스크립트 엔진은 이를 동일하게 두 가지(평가와 실행)로 나눠서 처리한다.

값의 재할당

• 변수에 값을 재할당하면 이전 값이 저장되어 있던 메모리 공간이 아닌 새로운 메모리 공간을 확보하고 그 메모리 공간에 새로운 값을 저장한다. 쓸모 없어진 이전 메모리 공간은 가비지 콜렉터에 의해 메모리에서 자동 해제된다.