[basics] ES5 function 사용 방법과 비교

ES5 function 사용 방법

1. 함수 선언식 (Function Declaration)

console.log(addDec(1, 2));	// 3 정상 출력 확인

function (addDec(n1, n2) {
	return n1 + n2;
}

2. 함수 표현식 (Function Expression)

• 변수에 function 할당
• 익명 함수

console.log(addExp(3, 4));	// Uncaught TypeError: funcExp is not a function

var addExp = function(n3, n4) {
	return n3 + n4;
}

함수 선언식, 표현식 비교

• 공통점 : 둘 다 호이스팅 되어 scope 최상단에 선언문 수행
• 차이점 : 표현식의 경우, 변수에 function이 할당되기 전에 console.log를 통해 접근을 시도하여 TypeError 발생

• 브라우저는 변수와 함수에 호이스팅을 적용하여 아래와 같이 해석한다.

// 호이스팅 : 블럭 내 최상단에 선언 (변수, 함수)
var addExp;
function (addDec(n1, n2) {
	return n1 + n2;
}

console.log(addDec(1, 2));	// 3 정상 출력 확인
console.log(addExp(3, 4));	// function 할당 전에 변수 접근 : TypeError 발생!

addExp = function(n3, n4) {
	return n3 + n4;
}

결론

• function과 var 키워드를 통한 선언은 호이스팅의 영향을 받는다.
• ES5에서 함수 사용 방법에는 함수 선언식과 표현식이 있으며, 표현식의 경우 반드시 변수에 function을 할당한 후에 호출해야한다.

참고

• 호이스팅 참고