호이스팅(hoisting)이란?

 

호이스팅(hoisting)이란? 자바스크립트에서 변수와 함수의 선언이 해당 범위의 최상단으로 끌어올려지는 동작을 말한다

해당 범위는 스코프를 말한다

작성 위치와 상관 없이 변수 선언과 함수 선언이 먼저 처리된다

 

1. 변수 호이스팅
   • var로 선언된 변수는 선언만 호이스팅되고, 초기화는 호이스팅되지 않는다
     선언과 초기화가 동시에 일어난 경우에도 선언만 호이스팅된다
     초기화는 선언 위치에서 이루어지며 그 전에 해당 변수는 자동으로 undefined로 초기화된다
   • let과 const로 선언된 변수도 호이스팅되지만, 이들은 일시적 사각지대(TDZ : Temporal Dead Zone)에 들어가므로 초기화되기 전에는 사용할 수 없다.
     해당 변수를 사용하려 하면 일시적 사각지대에 있으므로 참조 오류(ReferenceError)가 발생한다 
   • 예시

     console.log(x); // undefined (var는 선언만 호이스팅됨)
     var x = 5; // 선언과 초기화가 동시에 이루어짐
     
     console.log(y); // ReferenceError (let은 초기화 전 사용 불가)
     let y = 5;

     
     
     
   • 일시적 사각지대
     • let과 const 변수가 호이스팅은 되지만, 초기화되기 전까지 접근할 수 없는 영역
     • 선언된 변수에 잘못된 방식으로 접근하는 실수를 방지하고, 코드를 더 안전하게 작성하도록 돕는 역할을 한다
     • var와 달리 let과 const가 더 명확한 스코프 제어를 제공하는 이유 중 하나
       
       
   • 변수 호이스팅은 코드 가독성 향상시킨다는 장점을 가지고 있다
     변수 선언을 함수의 최상단에 배치하는 것은, 함수의 흐름을 이해하는 데 도움을 준다
     변수들이 최상단에서 선언된다는 것을 알면, 코드가 실행될 때 어떤 변수가 사용될 것인지 쉽게 예측할 수 있다
     

     function example() {
         console.log(a); // undefined
         var a = 10;
         console.log(a); // 10
     }
     example();

     
     그 외 선언 순서와 관계없이 사용 가능하다는 점, 전역 변수를 쉽게 다를 수 있다는 점 등 장점이 존재하지만, 예상치 못한 변수값으로 혼란을 초래할 수 있다
     현대 자바스크립트에서는 let과 const를 사용하여 더 명확한 스코프 제어를 제공하기 때문에 새로운 자바스크립트 코드는 let과 const를 사용하는 것이 더 좋은 관행으로 권장된다 !
     
     
2. 함수 호이스팅
   • 함수 선언이 코드 최상단으로 끌어올려지기 때문에 함수 선언문은 코드 어디에서든 호출할 수 있다
   • 예시

     myFunction(); // 정상적으로 호출됨
     
     function myFunction() {
       console.log("Hello, world!");
     }

   • 함수 표현식은 호이스팅 되지 않고, 변수 선언 방식에 따라 다르게 동작한다

---

012

공부한 흔적이 너무 난잡해서

다시 볼 때 편하게 정리해야겠다고 생각했다

분홍색으로 표시한 부분들은 다른 게시글로 정리할 예정...💫