함수 선언문과 함수 표현식 차이

함수 선언문 (Function Declaration)

• 어디서든 함수에 접근 가능(스크립트 실행 준비단계에서 전역에 선언된 함수 선언문을 찾아 해당 함수를 생성하기 때문)
• 그래서 코드 구성이 더 자유로움

sum(2, 3);

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

• 엄격 모드에서 함수가 선언된 코드 블록 안에서만 유효

let age = 16; 

if (age < 18) {
  welcome();               // \   (실행)
                           //  |
  function welcome() {     //  |
    alert("안녕!");        //  |  함수 선언문은 함수가 선언된 블록 내
  }                        //  |  어디에서든 유효합니다
                           //  |
  welcome();               // /   (실행)

} else {

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

// 여기는 중괄호 밖이기 때문에 중괄호 안에서 선언한 함수 선언문은 호출할 수 없습니다.
welcome(); // Error: welcome is not defined

 

함수 표현식(Function Expression)

• 함수가 선언되기 전에 접근하게는 불가능(실행 흐름이 let sum = function…의 우측에 도달했을 때 함수가 생성되기 때문에)

sum(2, 5); // error!

let sum = function(a, b) {
  return a + b;
};

• 함수 표현식으로 하면 블록 바깥에서도 함수 호출이 가능

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

let welcome;

if (age < 18) {

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

} else {

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

}

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