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

 

함수를 생성하는 3가지 방법이 있다. 코드는 약간씩 다르지만 모두 같은 기능의 함수를 생성함을 확인할 수 있다.

하지만 이들 사이에는 동작 방식이 약간 차이가 있다. 그중의 하나가 바로 함수 호이스팅이다.

 

add(2,3);		// 5

// 함수 선언문 형태로 add() 함수 정의
function add(x,y){
	return x + y;
}

add(3,4);		// 7

• 위의 코드를 실행해보면 아직 add() 함수가 정의되지 않았음에도 add() 함수를 호출하는 것이 가능하다.
• 이 것은 함수가 자신이 위치한 코드에 상관없이 함수 선언문 형태로 정의한 함수의 유효한 범위는 코드의 맨 처음부터 시작한다는 것이다. 이것이 바로 함수 호이 스팅이다.

이에 자바스크립트 Guru로 알려진 더글러스 크락 포드는 이러한 함수 호이 스팅은 함수를 사용하기 전에 반드시 선언해야 한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들 수도 있다고 지적하며 , 함수 표현식 사용을 권장한다.

 

add(2,3);		// uncaught type error

// 함수 표현식 형태로 add() 함수 정의
varr add = function add(x,y){
	return x + y;
}

add(3,4);		// 7

• add() 함수는 함수 표현식 형태로 정의되어 있어 호이 스팅이 일어나지 않는다.
• 따라서 함수가 생성된 이후에 호출이 가능하다.

이러한 함수 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성(instantiation)과 초기화(Initialization)의 작업이 분리돼서 진행되기 때문이다.

 

이후의 이야기는 추후에 ( 작성 중 )...

 

출처

인사이드 자바스크립트(송형주, 고현준 지음) - 한빛미디어