[JavaScript] 함수 선언문 vs 함수 표현식

함수 선언문과 함수 표현식을 사용하는 방식에 혼란이 있어 간략하게 정리를 했다.

 

1. 문법

함수 선언문

독자적인 구문 형태로 존재

// 함수 선언문
function sum(a, b) {
  return a + b;
}

함수 표현식

표현식이나 구문 구성(syntax construct) 내부에 생성

// 함수 표현식
let sum = function(a, b) {
  return a + b;
};

 

2. 함수의 생성 시기

함수 선언문

함수 선언문으로 작성된 함수는 함수 선언문이 정의되기 전에도 호출할 수 있다.

자바스크립트는 스크립트를 실행하기 전 준비단계에서 전역으로 선언된 함수 선언문을 찾고, 그에 해당하는 함수를 생성한다. 즉 "초기화"단계에서 함수를 생성한다.

sayHi("John");

function sayHi(name) {
  console.log(`Hello, ${name}`);
}

함수 표현식

함수 표현식으로 작성된 함수는 실행 흐름이 해당 함수에 도달했을 때부터 사용할 수 있다.

왜냐하면 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성하기 때문이다.

sayHi("John"); // error!
 
let sayHi = function(name) {
  console.log(`Hello, ${name}`); 
}

 

3. 스코프

함수 선언문

엄격모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있다.

하지만, 블록 밖에서는 함수에 접근하지 못한다.

let age = prompt("나이를 알려주세요.", 18);

// 조건에 따라 함수를 선언함
if (age < 18) {

  function welcome() {
    alert("안녕!");
  }

} else {

  function welcome() {
    alert("안녕하세요!");
  }

}

// 함수를 나중에 호출합니다.
welcome(); // Error: welcome is not defined

함수 표현식

함수 표현식이 코드 블록 내에 위치하더라도 블록 밖에서 함수에 접근할 수 있다.

변수의 개념으로 생각하면 좀 더 이해하기 쉽다.

let age = prompt("나이를 알려주세요.", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("안녕!");
  };

} else {

  welcome = function() {
    alert("안녕하세요!");
  };

}

welcome(); // 제대로 동작합니다.

 

---

참고

ko.javascript.info/function-expressions