함수 표현식과 선언문의 차이에 대해서 알아봄

• 함수 선언문 : 함수는 주요 코드 흐름 중간에 독자적인 구문 현태로 존재합니다.

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

• 함수 표현식 : 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다. 아래 예시에선 함수가 할당 연산자 = 를 이용해 만든 '할당 표현식' 우측에 생성되었습니다.

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

두 번째 차이는 자바스크립트 엔진이 언제 함수를 생성하는지에 있다.

<aside> 💡 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있습니다.

</aside>

함수 선언문은 함수선언문이 정의되기 전에 호출할 수도 있다.

이게 가능한 이유는 자바스크립트의 내부 알고리즘 때문입니다. 자바스크립트는 스크립트를 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성합니다. 스크립트가 진짜 실행되기 전 "초기화 단계"에서 함수 선언 방식으로 정의한 함수가 생성되는 것이죠.

스크립트는 함수 선언문이 모두 처리된 이후에서야 실행됩니다. 따라서 스크립트 어디서든 함수 선언문으로 선언한 함수에 접근할 수 있는 것입니다.

함

이건 되는 거

sayHi("John"); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}

이건 안되는거

sayHi("John"); // error!

let sayHi = function(name) {  // (*) 마술은 일어나지 않습니다.
  alert( `Hello, ${name}` );
};

또 다른 차이점은 스코프이다.

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

let age = 16; // 16을 저장했다 가정합시다.

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

} else {

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

// 여기는 중괄호 밖이기 때문에
// 중괄호 안에서 선언한 함수 선언문은 호출할 수 없습니다.

welcome(); // Error: welcome is not defined