[JavaScript] 변수와 호이스팅

 

변수란?

10 + 20

 

위와 같이 10 + 20을 연산한 후, 그 결과값을 활용하고 싶다고 해보자. CPU가 10+20을 계산해서 그 결과인 30을 메모리 어딘가에 저장했겠지만, 개발자 입장에서는 그것을 활용할 방법이 없다. 이럴 때 필요한 것이 바로 변수(variable)다. 변수는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 제공하는 메커니즘이다.

 

즉, 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 그 자체 혹은 그 메모리 공간을 식별하기 위해 붙인 이름이다. 쉽게 말해 어떠한 값의 위치를 가리키는 상징적인 이름인 것이다.

let result = 10 + 20;
console.log(result); // 30

 

위와 같이 result라는 변수를 사용해서 계산된 값을 저장하고, 그 값을 다시 활용할 수 있게 되었다. 이렇게 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수 이름(변수명, 예제에서 result)이라 하고, 변수에 저장된 값을 변수 값(예제에서 30)이라고 한다.

 

식별자

변수 이름은 식별자(identifier)라고도 한다. 식별자란 어떤 값을 구별해서 식별할 수 있는 고유한 이름이다. 값은 메모리 공간에 저장되므로, 식별자는 값을 구별하기 위해 그 값이 저장되어 있는 메모리 주소를 기억(저장)한다. 따라서 식별자는 어떤 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺고, 그 매핑 관계 역시 메모리에 심볼 테이블 형태로 저장되어 관리된다.

 

변수 선언

변수 선언(variable declaration)이란 변수를 생성하는 것으로, 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간의 주소를 연결해 값을 저장할 수 있도록 준비하는 것이다. 변수 선언 시 확보된 메모리 공간은 해제되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호된다.

 

변수를 선언할 때는 var, let, const 키워드를 사용할 수 있다. let과 const는 ES6에서 도입된 키워드로, 먼저 var 키워드에 대해 살펴보자.

var score; // 변수 선언(변수 선언문)

 

위와 같은 변수 선언문은 이름 score를 실행 컨텍스트에 등록하고 값을 저장할 메모리 공간을 확보한다. 이때 변수에 값이 할당되지 않았기 때문에 확보된 메모리 공간은 비어있다고 생각할 수 있지만, 해당 메모리 공간에는 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다.  

 

자바스크립트 엔진은 변수 선언을 ①선언 단계, ②초기화 단계 이렇게 2단계에 걸쳐 수행한다. 선언 단계에는 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알리고, 초기화 단계에는 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당한다. var 키워드는 이러한 선언 단계와 초기화 단계가 동시에 진행된다.

 

변수 선언의 실행 시점과 호이스팅

console.log(score); // undefined
var score; // 변수 선언문

 

위와 같이 코드를 작성하고 실행하면, 변수 선언문 보다 변수를 참조하는 코드가 앞에 있음에도 참조 에러(ReferenceError, 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러)가 발생하지 않고, undefined가 출력된다.

 

그 이유는 변수 선언이 소스코드가 한줄씩 실행되는 시점인 런타임이 아닌, 그 이전 단계에서 먼저 실행되기 때문이다. 자바스크립트 엔진은 소스코드를 한줄씩 실행하기 앞서, 소스코드의 평가 과정을 거치면서 소스코드를 실행할 준비를 한다. 평과 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 찾아내 먼저 실행한다. 그리고 평과 과정이 끝난 후에 모든 선언문을 제외한 소스코드를 순차적으로 실행한다.

 

이렇게 변수 선언문이 마치 코드의 맨 위로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅(variable hoisting)이라 한다. 변수 선언 뿐만 아니라, var, let, const, function, function*, class 키워드를 사용해 선언하는 모든 식별자는 호이스팅 된다.\

 

값의 할당

변수에 값을 할당(대입, 저장)할 때는 할당 연산자 =을 사용하여 우변의 값을 좌변의 변수에 할당한다.

var score; // 변수 선언
score = 80; // 값의 할당

var score = 80; // 변수 선언과 값의 할당을 하나의 문으로 단축 표현

 

마지막 코드와 같이 변수 선언과 값의 할당을 하나의 문으로 표현해도, 자바스크립트 엔진은 2개의 문으로 나누어 각각 실행한다. 따라서 변수 선언은 런타임 이전에 먼저 실행되고, 값의 할당은 런타임에 실행된다.

console.log(score);
var score = 80;
console.log(score);

 

위와 같은 코드의 경우, 실제로는 아래와 같이 동작하게 된다.

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

 

변수에 80이라는 값을 할당할 때는 undefined가 저장되어 있던 메모리 공간을 비우고 그 공간에 80을 저장하는 것이 아니라, 새로운 메모리 공간을 확보하고 그곳에 값을 저장한다.

 

score에 80을 할당한 후, 이전 값인 undefined는 어떤 변수도 값으로 갖고 있지 않으므로, 더 이상 필요하지 않다. 이러한 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제되며, 메모리에서 언제 해제될지는 예측할 수 없다.

 

 

---

참고

 

모던 자바스크립트 Deep Dive

범용 애플리케이션 개발 언어로 성장했습니다. 따라서 자바스크립트를 학습하는 방식도 이에 걸맞게 변화해야 하며, 이 책은 자바스크립트의 기본 개념과 동작 원리를 깊이 있게 학습하고자 하는 독자를 위해 기획되었습니다. 《모던 자바스크립트 Deep Dive》에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤칩니다. 따라서 여러분이 작성한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측하고

저자

이웅모

출판

위키북스

출판일

2020.09.25