본문 바로가기
웹 프론트/HTML | CSS | JS

자바스크립트 - 함수 호이스팅이란??

by 번데기 개발자 2018. 6. 8.
반응형

함수 호이스팅이란?


함수 호이스팅이란 변수를 선언하고 초기화했을때 선언 부분이 최상단으로 끌어 올려지는 현상을 의미합니다.
(초기화 또는 대입부분은 그대로 남아있습니다.)

아래의 sayWow를 보면 알 수 있습니다.

sayWow처럼 함수 표현식이아니라 함수 선언식일 때는 식 자체가 통째로 끌어올려집니다.







위의 코드는 선언보다 호출을 먼저 하기 때문에 얼핏 보기에 잘 동작하지 않을 것 처럼 보입니다.

그렇지만 에러 없이 정상적으로 동작합니다.

왜냐하면 함수 선언식이 최 상단으로 끌어올려졌기 때문입니다. 

위의 코드는 다음과 같습니다.








하지만 같은 함수여도 함수 표현식으로 선언한 경우에는 에러가 발생합니다.

다음 예시를 한번 살펴보겠습니다.







일단 처음 실행 시에는 전역 컨텍스트가 먼저 생성됩니다.

sayWow 함수는 함수 선언식이므로 컨텍스트 생성 후 바로 대입됩니다.








컨텍스트 생성 및 코드가 순차적으로 실행됩니다.

sayYeah 는 대입되기 전에 호출되기 때문에 에러가 발생합니다.

즉 sayYeah 에 할당될 function 로직은 호출된 이후에 선언됩니다.

따라서  sayeah 는 함수로 인식하지 않고 변수로 인식하기 때문에 에러가 발생합니다..




함수 표현식과 함수 선언식 예제


  • 함수 선언식 -  Function Declarations


일반적인 함수 선언과 비슷한 형식입니다.





  • 함수 표현식 - Function Expressions


유연한 자바스크립트 언어의 특징을 활용한 선언 방식입니다.


























반응형