JavaScript 함수를 생성하는 3가지 방식 그리고 함수 hoisting

JavaScript에는 함수를 생성하는 방법에 3가지 방법이 있습니다. 함수 선언문, 함수 표현식, 생성자 사용입니다. 각각 어떻게 생성하는지 보겠습니다.

// 함수 선언문(function statement)
function add_statement(x,y) {
 return x+y
}
// 함수 표현식(function expression)
var add_expression = function(x,y) {
 return x+y
};
// 함수 생성자(arg1,arg2,..,argN,본문)
var add_construction = new Function(‘x’,’y’,’return x+y’)
console.log(add_statement(1,2))
console.log(add_expression(1,2))
console.log(add_construction(1,2))

함수 선언문의 경우 우리가 아는 C언어 스타일(물론 자료형은 제외되지만)로 함수를 선언하고 함수이름을 호출하는 방법입니다. 함수 표현식은 함수를 변수에 저장하고 변수를 통해 함수를 사용하는 방법입니다. 함수 생성자는 우리가 보통 사용하진 않지만 요런 방법도 있다고 알고 넘어가면 될 것 같습니다.

함수 선언문과 함수 표현식은 함수 호이스팅에 의해 다른 결과가 나옵니다. 호이스팅의 의미는 “끌어올린다” 라는 의미로 JS에서 함수 호이스팅은 함수를 선언하면 JS 엔진에 의해 실행 전에 코드의 맨 위로 함수 선언 위치가 이동됩니다. 따라서 아래 코드가 에러 없이 실행됩니다.

// 자바스크립트 엔진에 의해 함수 호이스팅되어 여기에 실제로 위치
console.log(add_statement(1,2)) // 3
// 함수 선언문(function statement)
function add_statement(x,y) {
 return x+y
}

편하다(?) 라고 생각할 수도 있지만 일반적으로 함수가 선언되기 전 함수가 호출되면 에러가 발생하는게 맞습니다. 따라서 함수 표현식 사용을 권장합니다. 함수 표현식은 함수 호이스팅이 일어나지 않습니다.

console.log(add_statement(1,2))
console.log(add_expression(1,2)) // TypeError : add_expression is not a function
// 함수 선언문(function statement)
function add_statement(x,y) {
 return x+y
}
// 함수 표현식(function expression)
var add_expression = function(x,y) {
 return x+y
};