WEB/javascript

변수 호이스팅

일상코더 2023. 3. 13. 18:01

호이스팅이란?

              

       - 호이스팅은 코드가 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다.

       - 호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다. 

       - 자바스크립튼 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다.

       - 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서

          모든 선언(var, let, const, function, class)을 스코프에 등록한다. 

       - 코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이

         먼저 나와도 오류 없이 동작한다. 

       - 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경을 의미하고 실행되기전

          이러한 실행 컨텍스트 과정을 거친다.

 

       => 호이스팅이라는 용어는 자바스크립트 *실행 컨텍스트에 의한 위에 설명한

               현상을 호이스팅이라 고 부른다는 것으로 이해하면 됨

 

             *실행 컨텍스트 (scope, hoisting, this, function, closure등의 동작원리를 담고있는 자바스크립트 핵심원리)

 

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

               - 자바스크립트의 모든 선언에는 호이스팅이 일어난다. 

              - let, const, class를 이용한 선언문은 호이스팅이 발생하지 않는 것 처럼 동작한다. 

              - var 키워드로 선언된 변수와는 달리 let키워드로 선언된 변수를 선언문 이전에 참조하면

                참조 에러 (RefernecError)가 발생함

              - let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적

                 사각지대(Temporal Dead Zone;TDZ)에 빠지기때문

 

 

// 변수 호이스팅에 의해 이미 foo 변수가 선언되었다. (1단계)
// 변수 foo는 undefined로 초기화 된다.(2단계)
console.log(hoist); // undefined

//변수에 값을 할당
hoist = 123;

console.log(123); // 123 출력

// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.
var hoist;