[JS] 함수 표현식과 함수 선언식

 

 

 

 

 

 

자바스크립트에서 함수를 정의하는 방법에는 선언식과 표현식이 있다.

 

 

 

1. 함수 선언식

함수 선언은 function으로 시작하며 선언 된 함수는 call 될 때 실행된다.

function foo() { 
   return "함수 선언식"; 
}

foo(); // "함수 선언식"

 

 

 

 

2. 함수 표현식

함수 표현식은 변수에 저장할 수 있고 해당 변수는 함수처럼 사용할 수 있게 된다.

 

또한, 변수에 저장된 함수는 함수명이 필요 없고 변수 이름을 통하여 호출된다.

var x = function (a, b) {
   return a * b
};

 

 

 

3. 함수 표현식과 함수 선언식

▶ 함수 표현식

alert(foo()); // Error

var foo = function() { 
   return 5; 
}

함수 표현식은 호이스팅되지 않으므로 에러가 발생한다.

 

 

▶ 함수 선언식

alert(foo()); // 5

function foo() { 
   return 5; 
}

함수 선언식은 호이스팅되어 에러없이 잘 실행된다

 

 

 

4. 함수 표현식의 장점

 

4-1 클로저

var list = ['item1', 'item2', 'item3']
var i
var doSomethingHandler = function (itemIndex) {
        return function doSomething(evt) {
            // 클로저가 생성되어, itemIndex를 인자로 참조 할 수 있게 된다.
            console.log(list[itemIndex]);
        };
    };

for (i = 0; i < list.length; i += 1) {
    list[i].onclick = doSomethingHandler(i);
}

 

4-2 인자 전달

함수 표현식은 익명 함수의 형태로 중간 임시 변수에 할당 할 필요없이 함수에 직접 전달할 수 있다.

 

 

4-3 IIFE ( Immediately Invoked Function Expression : 즉시 실행 함수)

var myModule = (function () {
    var privateMethod = function () {
        console.log('A private method');
    },
    someMethod = function () {
        console.log('A public method');
    },
    anotherMethod = function () {
        console.log('Another public method');
    };

    return {
        someMethod: someMethod,
        anotherMethod: anotherMethod
    };
}());

 

 

 

 

 

 

#참고사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function

https://developer.mozilla.org/ko/docs/Glossary/IIFE