자바스크립트 호이스팅

자바스크립트를 배우다면 호이 스팅이라는 단어가 필수적으로 등장을 합니다 면접을 볼 때도 호이 스팅이 무엇이냐고 질문이 들어올 수도 있습니다

 

오늘은 자바스크립트에서 중요한 호이 스팅에 대해서 알아보도록 하겠습니다

 

호이스팅

호이스팅에 대해 정의를 하자면 '자바스크립트 코드가 실행되기 전 변수 선언/함수 선언이 해당 스코프의 최상단으로 올려진 거 같은 현상'을 의미합니다. 여기서 중요한 부분은 최상단으로 올려진 것 이 아니라 최상단으로 올려진 것 같은 현상이 중요합니다

 

이런 정의로는 이해하기가 쉽지는 않기 때문에 코드로 보도록 하겠습니다

var test = "abc";
console.log(test); //abc

위와 같은 자바스크립트 코드를 실행하면 콘솔에 정상적으로 abc가 찍히게 됩니다

하지만 아래와 같이 작성된 코드를 실행하면 어떻게 될까요?

console.log(test); //undefined
var test = "abc";
console.log(test); //abc

자바스크립트가 아닌 다른 언어에서 이렇게 코드를 작성한다면 이게 뭐냐고 반박이 들어올 겁니다 test변수가 선언이 안되었는데 왜 test변수를 호출하는지에 대해 말이죠

 

하지만 자바스크립트에서 이 코드를 실행을 하면 에러가 발생하지 않고 undefined -> abc 순으로 출력하게 됩니다

이러한 변수 선언/함수 선언이 최상단으로 올려진 거 같은 현상이 호이스팅 입니다

 

호이스팅이 발생하는 원인에 대해서 알아보기 위해 우선 '실행컨텍스트' 와 '변수 선언 단계'에 대해서 알아보도록 하겠습니다

 

 

실행컨텍스트

자바스크립트 코드를 실행을 하는 순간 실행한 코드에 제공할 환경 정보들을 모아 놓은 객체가 생성이 됩니다

쉽게 설명을 하자만 코드가 실행되기 위한 하나의 공간이 생성이 된다고 생각해주시면 됩니다

 

이러한 실행 컨텍스트는 모든 것을 관리하는 전역 컨텍스트 와 함수마다 생성이 되는 함수컨텍스트가 있습니다 그러나 이문서에서는 전역컨텍스트 기준으로 설명드리겠습니다

 

 

변수 선언 단계

다음으로 변수 선언 단계에 대해서 알아보도록 하겠습니다, 변수 선언 단계를 3단계로 구분되어있습니다

1. 선언 단계 : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계입니다 쉽게 말에 A라는 변수를 선언하면 실행컨텍스트에 A라는 객체가 등록됩니다

2. 초기화 단계 : 실행컨텍스트에 등록되어있는 변수를 위하여 이 변수에 대한 메모리를 할당해주는 단계입니다 이때 변수는 undefined라는 값으로 초기화됩니다

3. 할당 단계 : 선언한 변수에 실제로 값을 할당하는 단계입니다

 

호이스팅이 발생하는 원인

이제 어느 정도 감이 잡힐 수도 있으십니다. 자바스크립트에서 호이 스팅이 발생하는 원인은 변수를 선언하는 단계에서

선언 단계와 초기화 단계가 같이 이루어지기 때문에 변수 선언/함수 선언이 최상단에 올려진 거 같은 현상이 발생하는 것입니다

 

하지만 이러한 호이스팅에도 예외가 있습니다 이러한 부분은 좀 더 알기 위해 변수 호이스팅에 대해서 알아보도록 하겠습니다

 

 

변수 호이스팅(var,let,const)

자바 스크립트에 모든 선언에는 호이스팅이 일어납니다. 하지만 let, const, class를 이용한 선언문에서는 호이스팅이 발생하지 않습니다

console.log(test); //ReferenceError: test is not defined
let test = "abc";
console.log(test);

위에 코드에서 var를 let로만 변경했을 뿐인데 ReferenceError 가 발생하였습니다

이러한 원인은 아래와 같습니다

 

var : var키워드로 선언한 변수는 선언 단계와 초기화 단계가 한 번에 이루어집니다 즉 실행컨텍스트에 변수 객체가 등록이 되면서 undefined로 초기화가 같이 이루어집니다 따라서 변수 선언문 이전에 변수에 접근하더라도 에러가 발생하지 않습니다. 다만 변수에 실제 값이 할당된 것은 아니기 때문에 undefined가 발생합니다

 

let,const : let 혹은 const로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행이 됩니다 즉 실행컨텍스트에 변수 객체를 등록을 하고 코드상에 변수 선언문 부분에 도달을 했을 때 초기화 단계가 이루어집니다. 이 때문에 초기화 이전에 변수에 접근하려고 했기 때문에 변수 참조 에러가 발생합니다

따라서 스코프의 시작 지점부터 초기화 지점까지의 변수를 참조할 수 없고, 스코프의 시작 시점부터 초기화 지점까지의 구간을 일시적 사각지대(TDZ)라고 합니다

console.log(test); //일시적 사각지대(TDZ)
let test = "abc";
console.log(test);