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

JavaScript에서 함수를 정의하는 방법에는 함수 선언식과 함수 표현식 두 가지가 있습니다. 함수 선언식과 함수 표현식의 주요 차이점은, 선언식은 정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것입니다.

 

함수 선언식과 함수 표현식 중 어떤 스타일을 사용하던 맞거나 잘못된 선택이 있는것은 아닙니다. 단지 두 방식이 다르게 동작하기 때문에 하나의 방식을 선택하여 일관적으로 사용을 하는 것이 좋습니다. 예를 들어 airbnb에서는 함수 선언식 대신에 함수 표현식만 사용하도록 권장하고 있습니다. 이유는 함수 선언식이 호이스트되어 파일에 정의되기 전에 함수를 참조하게 되면 가독성과 유지 보수성을 저해한다고 판단했기 때문입니다.

 

그럼 함수 선언식과 함수 표현식의 예시를 살펴보겠습니다.

 

 

 

1. 함수 선언식(Function Declarations)

function 함수명() {
    // 구현 로직
}

// 예시
function foo() {
    console.log('foo');
}

---

 

2. 함수 표현식(Function Expressions)

var 함수명 = function () {
    // 구현 로직
}

// 예시
var foo = function () {
    console.log('foo');
}

---

 

그 외, 생성자로 호출하기

추가적으로 new 키워드를 사용해서 함수 객체를 생성할 수도 있지만 문자열로 함수 body를 작성해야 하기 때문에 불편합니다.  그래서 거의 사용되지 않는 방법입니다.

var foo = new Function("str", "console.log('foo')");

---

 

호출 결과

위의 세 가지 방법 모두 아래와 같은 방법으로 호출할 수 있습니다.

foo();

// 실행결과
foo

---

 

 

함수 표현식의 장점

1. 호이스팅에 영향을 받지 않는다

2. 클로져로 사용될 수 있다.
3. 콜백으로 사용될 수 있다. (다른 함수의 인자로 넘길 수 있음)

4. 즉시 실행함수(IIFE)로 사용될 수 있다.

 

 

 

 

 

참고문서

• eslint.org/docs/rules/func-style
• joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/