Javascript Function 표현 정리
들어가며
Javascript에서 함수를 쓰기 위해서는 변수에 저장을 하고 호출하거나, 저장하지 않고 바로 실행하거나 하는 등의 방법이 있고 함수를 선언, 할당하는 방식에도 여러 방식이 있다. 이번 글에서는 함수 선언, 함수 표현식, 즉시실행함수 등에 대해서 적어보도록 하겠다.
함수 선언(Function declaration)
함수 선언 은, 다른 말로 함수 문장, 함수 구문 형태라고도 불리는데 함수를 특정 변수에 담는 대신, 바로 function 키워드로 선언하는 것을 말한다. 이 방식의 특징은 add 함수가 선언된 위치보다 먼저 사용을 하더라도 함수가 정상적으로 동작 한다. 함수 선언으로 함수를 만들게 되면, 해당 함수는 함수가 위치한 곳과 관계 없이 함수가 정의된 곳의 유효범위의 가장 상위로 이동하게 된다. 따라서, 함수를 선언하기 전에 사용해도 쓸 수 있게 되는 것이다. 이 방식으로 함수를 선언하면 뒤에 ;을 붙이지 않는다.
// 예제 1 - 함수 선언
add(5, 2); // 7
function add(a, b) {
return a + b;
} // 여기에 ; 붙이지 않는다
add(3, 5); // 8
함수 표현식(Function Expression)
함수 표현식을 통해서
다음은 일반 변수에 함수 표현식을 할당하는 경우다.
add라는 변수에 두 매개변수를 받아서 더해 리턴해주는 함수를 할당했다. 이러한 함수는 익명함수로 만들 수도 있고, 기명함수로 만들 수도 있다.
예제 2의 경우가 익명함수 로 만든 예이고, 예제 3의 경우가 기명함수 로 만든 예이다.
이렇게 함수 표현식을 통해서 함수를 만들게 되면, 함수 표현식 위에서 함수에 접근하려고 하면, undefined가 되어 사용할 수가 없게 된다. 이것이, 함수 선언과 함수 표현식의 제일 큰 차이점이다.
// 예제 2 - 함수 표현식. 익명 함수 사용
add(5, 2) // undefined -> add is not a function
var add = function(a, b) {
return a + b;
};
add(3, 5); // 8
// 예제 3 - 함수 표현식. 기명 함수 사용
add(5, 2) // undefined -> add is not a function
var add = function addFn(a, b) {
return a + b;
};
add(3, 5); // 8
위의 예제 3에서는 예제 2와 같은 함수인데, 익명함수 대신 기명함수를 사용했다. addFn이라는 함수를 add 변수에 할당했다. 실제로 함수 표현식에서는 보통 익명함수를 주로 사용하는데, 기명함수를 쓰는 경우는 해당 함수 안에서 재귀적으로 자신을 다시 호출하고자 할 때, 사용된다…고 한다.
// 예제 4 - factorial 함수 예제
var fact = function factorial(n) {
if (n < 2) {
return 1;
}
return n * factorial(n - 1);
};
fact(5); // 120
위의 예제 4에서 자신의 함수를 재귀적으로 부르기 위해서 익명함수 대신 기명함수로 함수 표현식을 작성하였다. 그런데, 여기서 실제로…
return n * factorial(n - 1) 대신에 return n * fact(n - 1)을 해도 정상적으로 동작하기는 한다. 단순히 재귀로 불러주기 위해서는 익명함수나, 기명함수나 상관 없긴 하지만, 둘의 차이점은 기명함수의 이름인 factorial은 해당 함수 내에서의 지역 변수로 바인딩 되어, 해당 함수 내에서만 접근할 수 있다. 즉, 해당 함수 밖에서는 factorial()을 사용하지 못하고, fact()만 사용할 수 있다.
이러한 점만 보면, 재귀 함수를 쓰기 위해서 굳이 기명함수를 쓸 필요까지는 없어 보인다.
즉시 실행 함수(IIFE)
즉시 실행 함수는 영어로는 IIFE(Immediately Invoked Function Expression)이며, 함수를 선언과 동시에 실행 하는 것이다. 이러한 즉시 실행 함수는 단, 한번만 실행될 수 있다. 형식은 함수 선언 처럼 함수를 만든 후(익명함수, 기명함수 둘다 가능), 그 자체를 ( )로 감싸준 후, ( )를 이용해서 호출하면 된다. 호출하는 ( )는 감싼 괄호의 뒤에 넣어도 되고, 감싼 괄호의 마지막 ) 의 앞에 넣어도 무방하다. 이렇게 즉시 실행 함수를 이용하면, 블록 scope가 없는 javascript에서도(es5까지는…) 블록 scope 처럼 사용할 수도 있고, 자바스크립트의 모듈 패턴을 나타낼 수도 있다.
// 예제 5 - 즉시 실행 함수 예제
(function () {
console.log('IIFE');
})();
(function () {
console.log('IIFE2');
}());
최종 정리
- 함수 선언은 선언된 위치와 상관 없이, 함수가 정의된 곳의 유효범위의 가장 상위로 이동하므로, 선언 보다 먼저 사용할 수 있다.
- 함수 표현식을 통한 함수는 정의 이후에 사용해야 한다.
- 즉시 실행 함수는 함수를 선언과 동시에 실행한다.