호이스팅(hoisting) 이란?

Hoist 라는 사전적 정의는 "(흔히 밧줄이나 장비를 이용하여) 들어 올리다, 끌어 올리다" 입니다. Javascript에서 호이스팅은 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다. 클러저(Closuer)같은 문법들의 효용성을 이해하기 위해서 고전 Javascript가 가졌던 특징입니다. var 이나 let, const 로 정의된 변수나 함수선언문, 함수표현식이 유효범위의 최상단으로 끌어올려지는 것처럼 보여지는 현상인데, 실행 컨텍스트가 활성화 되었을때 해당 영역에서 변수의 이름을 메모리에 먼저 수집하는 현상으로 인해 발생하는 현상이라고 합니다. 

이렇게 이야기하니 너무 어렵네요. 간단하게 '유효범위 코드가 실행되기 전 메모리에 먼저 저장했던 선언문을 사용할 수 있다'는 의미입니다. 간단한 예제를 확인해 보겠습니다.

Javascript가 어떤 코드 구분을 실행하기 전에 함수 선언을 메모리에 저장하는 방식의 장점 중 하나는 코드에 선언하기 전에 함수를 사용할 수 있다는 것입니다. 간단한 예제를 만들어 보았습니다. 아래는 정상적으로 동작하는 코드입니다.

      function printName(name){
        console.log("My name is " + name);
      }

      printName("typiler");

이제, 함수를 작성하기 전에 함수를 호출하면 어떤 일이 있는지 살펴봅시다.

      printName("typiler2222");
      
      function printName(name){
        console.log("My name is " + name);
      }

비록 함수를 작성하기 전에 함수를 호출하였지만, 코드는 여전히 동작합니다. 이는 Javascript에서 컨텍스트 실행이 작동하는 방식 때문입니다. 

호이스팅은 다른 데이터 타입 및 변수와도 잘 작동합니다. 변수는 선언하기 전에 초기화하여 사용될 수 있습니다. 그러나 초기화 없이는 사용할 수 없습니다.

    cnt = 6;
    cnt += 5;
    var cnt;
    console.log(cnt);

cnt가 선언되지 않더라도 에러를 내지 않습니다. Javacript는 초기화가 아닌 선언만 끌어올립니다(Hoist). 만약 변수를 선언한 뒤 나중에 초기화시켜 사용한다면 그 값은 undefined로 지정됩니다. 아래 두 예제는 같은 동작을 보여줍니다.

    var i = 0;
    console.log(i + " " + j);
    var j = 0;

    var x = 7;
    var y;
    console.log(x + " " + y);
    y = 3;

이와 같은 호이스팅 때문에 의도한 결과가 나오지 않을 수도 있으니 개발 시 이부분에 대한 이해가 필요합니다.

더 많은 정보는 아래 사이트를 참고하여 주십시오. 여기까지 간단한 호이스팅에 대한 설명이였습니다. 

 

참고사이트

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

Hoisting - 용어 사전 | MDN

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

https://namu.wiki/w/%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85