[Javascript] 함수 선언문 vs 함수 표현식 (Javascript 제대로 알고 쓰자) - 3

이번에는 어찌보면 아무생각없이 당연한거 아냐? 하고 넘어갈 수 있는 함수 선언문과 함수 표현식에 대해서 알아보고자 한다.

함수선언문? 표현식?

함수 선언문은 다음과 같은 형태를 말한다.

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

그리고 함수 표현식은 다음과 같다.

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

뭐가 다른데?

자바스크립트 엔진이 언제 함수를 생성하는지가 다르다.
함수표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다.
함수선언문은 함수 선언문이 정의되기 전에도 호출이 가능하다.

sum(1, 2); // 3

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

sum(1, 2); // error!

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

또 다른점은, 엄격모드일 때 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있으나 블록밖에서는 함수에 접근이 불가능하다.

if (true) {
  function welcome(){
    console.log('Welcome!');
  }
}
welcome(); // error!

당연하게도 함수 표현식은 블록 밖에 해당 변수를 미리 선언해놓으면 가능하다.

let welcome;
if (true) {
  welcome = function() {
    console.log('Welcome!');
  }
}
welcome(); // Welcome!