자바스크립트에서의 변수 선언, 호이스팅, 동작 방식과 그 원리

변수 선언

• 변수 선언이란, 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결하여 값을 저장할 수 있도록 준비하는 것이다.
• 변수 선언에 의해 확보된 메모리 공간은 확보가 해제되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호된다.
• var, let, const 키워드를 사용하여 변수 선언 한다.
• let, const 키워드는 var 키워드의 여러 단점을 보완하기 위해서 ES6에서 도입되었다.

변수 선언을 할 때 자바스크립트 엔진에서 하는 일

var score;

1. 선언 단계 : 변수 이름을 실행 컨텍스트에 키/값 형식인 객체로 등록한다. 자바스크립트 엔진에 변수의 존재를 알린다.
2. 초기화 단계 : 값을 저장하기 위해 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

초기화 단계를 거치는 이유?
이전에 다른 애플리케이션이 사용했던 쓰레기 값이 나올 수 있다.

변수 호이스팅

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

 

자바스크립트 코드에서는 score 변수의 선언이 실행되기 전에 console.log를 하여도 참조 에러가 발생하지 않는다.
변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점인 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.

 

자바스크립트 엔진에서는 소스코드를 실행하기 전에 먼저 소스코드의 평가 과정을 거친다.
이 때 변수 선언을 포함한 모든 선언문 (함수 선언문 등)을 소스코드에서 찾아 먼저 실행한다.
이후에 소스코드를 한 줄씩 순차적으로 실행한다.

 

변수 선언뿐 아니라 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅된다.

값의 할당

값을 할당 시점

변수 선언은 런타임 이전에 먼저 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

값의 재할당

 

변수에 값을 80에서 90으로 재할당하면, 80이 저장되어 있던 메모리 공간은 지우고, 그 메모리 공간에 재할당 값 90을 저장하는 것이 아니라, 새로운 메모리 공간을 확보하고 그 메모리 공간에 숫자 값 90을 저장한다.

 

사용하지 않는 공간은 갈비지 컬렉터에 의해서 자동으로 해제되도록 한다. 개발자가 명시적으로 메모리 할당/해제를 관여할 수 없어 일정한 생산성을 확보할 수 있다는 장점은 있지만 성능 면에서 어느 정도의 손실을 감수할 수밖에 없다.

 

* 모던 자바스크립트 Deep Dive 4장 변수 내용을 참고하여 작성한 글입니다.