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

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

이번 포스트에서는 함수 선언식(function declaration/function statement)과 함수 표현식(function expression)에 대해 알아보도록 하겠습니다.

 

 

 

함수 선언식

코드

function foo() {
    return 3;
}

 

호이스팅

호이스팅된다.

 

재선언

가능하다.

 

사용처

일반 함수를 정의하는 경우.

 

용례

• 일반 함수
• 조건부 생성 함수 (브라우저별 동작이 다르므로 권장하지 않음)

 

 

함수 표현식

코드

// 익명 함수 표현식
const foo = function () {
    return 3;
};

// 이름 있는 함수 표현식
const bar = function barbar() {
    return 4;
};

 

호이스팅

var를 사용하는 경우 호이스팅은 되지만, 할당은 되지 않으므로 undefined가 뜬다.

let이나 const를 사용하는 경우, 호이스팅되지 않는다.

 

재할당

var를 사용하는 경우 가능하다.

 

사용처

표현식 내부에 함수를 정의하는 경우 ex)콜백 함수로 익명 함수 표현식을 전달

 

name속성

const foo = function() {};
foo.name // foo

const bar = function barbar() {};
bar.name // barbar

이름 있는 함수 표현식의 경우, 함수가 할당된 변수에 name속성이 자동으로 설정된다.

익명 함수 표현식의 경우엔 변수명으로 할당되며(암시적), 이름 있는 함수 표현식의 경우엔 함수명으로 할당된다.(명시적)

 

용례

• 클로저
• 일회용 함수 (보통 콜백 함수를 전달하는 경우)
• 이름있는 함수 표현식
• IIFE(immediately invoked function expression)