[JS] Hoisting

👀 Hoisting

함수 안에 있는 선언을 종합하여 최상단으로 끌어올려 최상단에 선언하는 Hoisting에 대해 알아본다

✔ 실행방식

자바스크립트 Parser가 함수 실행 전 해당 함수를 훑는다

1. 함수 안에 존재하는 변수 및 함수선언을 해당 유효 범위의 최상단에 선언한다

* 실제로 코드가 최상단에 위치하도록 변경되는것은 아니며, 내부적으로 처리하는 것

✔ 대상

1. var 변수 선언과 함수선언문에서만 호이스팅이 일어난다
   • var의 선언과 함수선언문만 호이스팅되며, 할당은 호이스팅되지 않는다
   • let 또는 const의 경우에는 호이스팅이 발생하지 않는다

1. var vs let

``` //선언 let name = 'dooddi'; var name2 = 'dooddi'; //호이스팅 결과 var name2; // var 호이스팅 let name = 'dooddi'; name2 = 'dooddi'; ```

1. 함수선언문 vs 함수표현식

``` //선언 dooddi(); dooddi2(); function dooddi(){ // 함수선언문 console.log('dooddi'); } var dooddi2 = function(){ console.log('dooddi2'); } //호이스팅 결과 var dooddi2; // var 호이스팅, 변수 선언이 함수 선언보다 위에 위치 function dooddi(){ // 함수표현식 호이스팅 console.log('dooddi'); } dooddi(); dooddi2(); // 에러! dooddi2 = function(){ // 함수표현식은 호이스팅되지 않는다. console.log('dooddi2'); } ```

✔ 주의사항

1. 가독성과 유지보수를 위해 호이스팅 사용 지양
   • 가급적 변수 및 함수를 코드 상단부에 선언
   • let과 const 사용

👍 참고 사이트

1. [JavaScript] 호이스팅(Hoisting)이란