(JS) 함수 선언식과 함수 표현식의 차이점 및 요약

함수 선언식과 함수 표현식의 차이점

 

1. 문법

 

함수 선언문

• 주요 코드 흐름 중간에 독자적인 구문 형태로 존재한다.

function add(a, b) {
    return a + b;
}

 

함수 표현식

• 표현식이나 구문 구성(syntax constract) 내부에 생성되며, 할당연산자(=)를 통해 생성된다.

const exp = function add(a, b) {
    return a + b;
}

 

---

 

2. 자바스크립트 엔진이 언제 함수를 생성하는지에 따른 차이

 

함수 선언문

• 함수 선언문이 정의되기 전의 코드에도 함수를 호출할 수 있다.

console.log(add(1, 2)) // 3이 출력된다.

function add(a, b) {
    return a + b;
}

 

 

함수 표현식

• 실제 흐름이 해당 함수에 도달했을 때 함수가 생성된다.
• 즉 함수가 생성되기 전에는 함수를 호출할 수 없다.

console.log(exp(1, 2));  // 에러가 난다.

const exp = function add(a, b) {
    return a + b;
}

 

이유

• 자바스크립트 내부 알고리즘은 스크립트를 실행하기 전 함수 선언문을 찾고 함수를 생성한다.
  즉, 초기화 단계(initialization)에서 선언 방식으로 정의한 함수가 생성이 된다.
• 함수표현식은 순차적으로 진행하며 생성된다.

 

---

 

요약

• 함수는 값이다. 따라서 값처럼 할당, 복사, 선언할 수 있다.
• 함수 선언 방식으로 함수를 생성하면 함수가 독립된 구문 형태로 존재하게 된다.
• 함수 표현식 방식으로 함수를 생성하면 함수가 표현식의 일부로 존재하게 된다.
• 함수 선언문은 코드 블럭이 실행되기 전에 처리되어 블럭 내 어디서든 활용이 가능하다.
• 함수 표현식은 실행 흐름이 표현식에 다다랐을 때 생성된다.

 

https://ko.javascript.info/function-expressions

함수 표현식