JavaScript (Hoisting)

1. 📌Hoisting이란

자바스크립트에서 변수 선언과 함수 선언이 코드의 맨 위로 끌어올려지는 동작을 말한다.

변수와 함수를 선언하기 전에도 사용할 수 있는 것처럼 보이게 하는 메커니즘이다.

호이스팅의 개념을 잡기전에 이것부터 알고가자.

2. 📌자바스크립트의 변수 생성 단계

자바스크립트에서는 총 3단계에 걸쳐서 변수를 생성한다.

📖선언 : 스코프와 변수 객체가 생성되고, 스코프가 변수 객체를 참조한다. 초기화 전까지는 TDZ 상태이다.

<script>
ex) let name;
</script>

📖초기화 : 변수 객체 값을 위한 공간을 메모리에 할당한다. 이 때 할당되는 값은 undefined다.

<script>
ex) let name = '유광진';
</script>

📖할당 : 변수에 새로운 값을 할당할 때마다 할당 단계가 실행된다. 변수의 값이 변경되면 해당 값이 메모리에 업데이트 된다.

<script>
ex) name = '홍길동';
</script>

그럼 이제 호이스팅에 대해 자세히 알아보자.

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

1. var 호이스팅

<script>
   document.write('<br>a:',a);
   var a = 10; // undefined, 호이스팅 기능이 자동 발생. 비권장
</script>

var는 선언과 동시에 초기화가 이루어진다. 즉, 선언과 동시에 undefined가 할당된다. 또한,

var로 선언한 변수는 변수 선언이 해당 스코프의 맨 위로 끌어올려지는 호이스팅이 자동으로 발생한다.

따라서 변수를 선언하기 전에 사용하더라도 오류가 발생하지 않는다. 대신 값은 undefined으로 된다.

2. let, const 호이스팅

<script>
  document.write('<br>a:',ab);
  let ab = 10; 
  // Uncaught ReferenceError: Cannot access 'ab' before initialization
  document.write('<br>a:',abc);
  const abc = 10; 
  // Uncaught ReferenceError: Cannot access 'abc' before initialization
</script>

let, const 로 선언된 변수를 선언문 이전에 작성하면 참조 에러(ReferenceError)가 발생한다.

let, const 로 선언된 변수는 var 로 선언된 변수와는 달리 선언 단계와 초기화 단계가 분리되어 진행되기 때문이다.

그러면 현대 JavaScript에서 많이 사용되고 있는 let, const들이 호이스팅을 발생되지 않기 위해서는 어떻게 해야할까?

방법은 간단하다.

먼저 출력하기 전에 먼저 변수를 선언과, 초기화를 먼저 해주면 된다.

<script>
  const abc = 10;
  document.write('<br>a:',abc);
</script>

두번째 방법은 함수 선언문을 사용하여 호이스팅을 제어하는 방법이다.

<script>
   academytwo(); // "에이콘아카데미"

   function academytwo () {
     console.log("에이콘아카데미");
   };
</script>