기억을 지배하는 자

자바스크립트는 함수 선언도 hoisting 기능이 적용된다.

다음 예를 보자.

//전역 함수 선언
function foo1() {
	alert('global foo1');
}
function foo2() {
	alert('global foo2');
}
function hoistMe() {
	foo1();
	foo2();

	function foo1() {
		alert('local foo1');
	}
	var foo2 = function() {
		alert('local foo2');
	}
}
hoistMe();

결과는 어떻게 될까......

의도된 결과는

'global foo1'

'global foo2'

였을 것이다.

하지만 자바스크립트의 hoisting 기능으로 인해 결과는

'local foo1'

Type Error

가 된다.

어째서?

자바스크립트는 hoistMe() 함수 내부에 선언된 변수 및 함수를 hoisting 하는데

foo1()은 함수 선언이므로 함수 정의 자체도 같이 hoisting되어서

전역 foo1() 함수를 가린다.

따라서 호출 결과 global이 아닌 local 이 불리게 되는것이다.

그럼 왜 foo2는 global도 local도 아닌 Type error 일까?

foo2()는 hoistMe 함수 내부에서 함수표현식으로 함수를 정의 했다.

hoist 기능은 선언문만 유효범위 맨 위로 올려지기 때문에

var foo2; 만 hoisting되고 함수 정의는 그 위치 그대로 남게 된다.

따라서 foo2()를 호출 하였을 때엔 

var foo2; 는 선언이 되어있지만 정의가 안된 undefined 값이어서,

즉 foo2라는 객체가 isCallerble이 아니기 때문에 Type Error 예외를 발생시킨다.

local 안에서 새로 정의한 함수를 호출 할 의도였으면

함수 선언문으로 선언을 하자.

자바스크립트의 함수를 정의하는 방법은 두가지가 있다.

함수 선언문, 함수 표현식

함수 선언문

function foo() {}

를 evaluation 하게되면

foo.name 은 "foo" 가 된다.

기명 함수 표현식

var fun = function add (a, b) {
	return a+b;
};

를 evaluation 하게되면

name 프로퍼티에 "add"라는 값을 가지는 함수 객체를 f에 리턴해 준다.

즉, fun.name 은 "add" 가 된다.

익명 함수

var fun = function (a, b) {
	return a+b;
};

는 fun.name 은 "" 이다. (IE에서는 undefined)

표현식에는 마지막 세미콜론을 꼭 써줘야 한다.