210802 개발기록 : 화살표 함수와 호이스팅

 

🏗  화살표 함수는 호이스팅이 안된다!

33번 라인을 보면, ToggleNav 변수는 하이라이팅이 되지 않는다. 바로 아래 ToggleNav 라는 화살표 함수가 있지만 말이다. 

 

 

그렇다면 ToggleNav 를 화살표 함수가 아닌, 일반 함수로 선언해보자.

화살표 함수와 달리, 일반함수로 선언한 경우, addEventListener 의 콜백함수 ToggleNav 는 하이라이팅이 된다. 즉 바로 아래에서 선언한 ToggleNav 와 동일한 함수임을 뜻한다.

 

이는 일반함수로 선언한 ToggleNav가 호이스팅 됐기 때문에 가능한 일이다. 

화살표 함수는 호이스팅이 되지 않는다. 그렇기 때문에 첫번째 이미지의 ToggleNav 변수에 마우스를 올리면, 

Variable might not have been intialized => 즉 해당 변수는 초기화되지 않았다는 메시지가 뜬다.

개발자가 아무리 화살표 함수의 형태로 ToggleNav 를 초기화해봤자  1) 33번줄 보다 뒤에서 선언했기 때문에, 2) 화살표 함수는 호이스팅이 되지 않기 때문이다. 

 

 

✅  정리

함수 선언문(function ToggleNav())는 호이스팅 되어 함수가 선언된 시점의 앞, 뒤에서 호출이 가능하다.

하지만 함수 표현식(화살표 함수)은 호이스팅 되지 않기 때문에 함수 선언 전에 호출해도, 원하는 결과를 낼 수 없다.