Hoisting(호이스팅)

✨ JavaScript에서 Hoisting이란, 변수 또는 함수 사용을 선언 전에 할 수 있다는 것(?)이다.

w3schools에서는 변수나 함수 선언부를 코드 최상위에 위치시키는 것이라고 말하고 있으며,
MDN에서는 위의 말처럼 가르치고 있지만, 실제로는 그렇지 않다고 한다.

https://www.w3schools.com/js/js_hoisting.asp

JavaScript Hoisting

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

Hoisting

📢 예제 1(변수 - var)

예제 1(변수 var)

위의 코드처럼 할당(assign)을 먼저 하고, 실행 한 후, 선언(declare)을 해줘도 문제 없이 작동한다.

예제 1 결과

위 화면을 보면 문제 없이 7이 출력된 것을 볼 수 있다.

📢 예제 2(함수 - function)

이번에는 함수를 위와 같은 방식으로 실행해 보겠다.

예제 2(함수 function)

위 코드처럼 실행을 먼저 해주고, 나중에 선언을 해줘도 문제 없이 작동한다.

예제 2 결과

위 화면을 보면 문제 없이 'Hello'가 출력된 것을 볼 수 있다.

ES2015전에 정확히 명시된 문서는 없지만, ES2015에서 Hoisting을 정의하고 있다.
어렵게 생각하지 말고, 선언부를 코드 최상위로 끌어올린다고 생각하면 될 것 같다.
사실 위처럼 곤란한 상황은 var과 function을 사용해서 생기는 문제다.

위의 문제로 머리가 복잡해지기 싫다면 ES2015의 const와 let을 사용해주면 된다.
(function은 const functionName = () => {}로 사용)
그럼 debugging이 훨씬 수월할 것이다.

결론적으로

hoist의 사전적 정의

선언부를 코드 최상위로 '끌어올린다'라고 생각해주면 되고, 해당 버그를 방지하기 위해 const와 let을 사용하자!