함수 표현식 vs 함수 선언문

난 함수를 선언문 먼저 배웠기 때문에 선언문이 편해서 그냥 다 선언문으로 코드를 작성하곤 했다. 

오늘 모던 JS 튜토리얼로 공부하는데 그게 굉..장히 잘못된 방법이란걸 알게됐다...너무 충격

방법이 잘 못됐다고 말해도 되나? 여튼... 내가 몰랐던 차이들이 있었다. 좀 창피 ㅠ 

 

둘의 차이는 여러 가지가 있다. 내가 오늘 배운건 3가지! 

 

차이 1. 문법

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

// 함수 선언문
function sum(a, b) {
  return a + b;
}
함수 표현식: 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다. 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 “할당 표현식” 우측에 생성되었습니다.

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

출처 : https://ko.javascript.info/function-expressions#ref-867

함수 표현식

일단 생긴 것 부터 다르다. 나는 그래서 그냥 함수를 만드는 더 간편한 방법?이 생긴건가 하고 

둘이 별 차이가 없겠거니 썼던 것 같다.... 아이고 

 

차이 2. 함수 사용 시기 

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

함수 표현식은 실행흐름이 표현식에 도달 했을 때 함수가 생성된다. 

 

따라서 전역 함수 선언문은 스크립트 어디에 있든지 어디서나 사용 가능하다! 

 

함수 선언문은 호이스팅 되는 듯 하다. 표현식은 안된다! 

 

차이3. 스코프 

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

선언문은 블록 밖에선 접근하지 못한다. 

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

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

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

} else {

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

}

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

이렇게 오류를 발생 시킴 

하지만 표현식은 가능하다.