[JavaScript] 함수 선언식과 표현식에 따른 호이스팅, 화살표 함수

함수의 선언이 호이스팅되지 않게 하고, 함수의 이름을 명시하기 위해 함수 표현식-기명 함수를 사용하라는 Airbnb 가이드를 확인했다.
함수 선언식과 표현식의 차이, 호이스팅, 화살표 함수에 대해 간단히 알아보았다.

함수 (Function)

JavaScript의 모든 함수는 Fucntion 객체이다.

함수 선언식 (Function Declaration)

function 키워드를 사용하여 함수를 정의한다.

함수 선언식은 호이스팅 되어, 함수를 정의하기 전에 참조할 수 있다. 이것은 가독성과 유지관리성을 해친다.

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

console.log(sayHello.name) // sayHello

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.
반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. - MDN

함수 표현식 (Function Expression)

함수의 선언을 변수에 할당하고, 변수를 호출하여 함수를 사용할 수 있다.
함수의 이름을 명시하느냐에 따라 기명 함수/익명 함수로 나눈다.

함수 표현식은 변수만 호이스팅 되고, 함수 선언은 초기화 되지 않는다.
따라서 함수를 정의하기 전에 참조할 수 없다.

기명 함수

함수 표현식에서 함수의 이름을 지정하면, 함수 내에서 자신을 참조하거나 디버거 내 스택 추적에서 함수를 식별할 수 있다.

const sayHello = function hello(name) {
  console.log(`Hello, ${name}!`);
};

console.log(sayHello.name) // hello
hello('Amy'); // hello is not defined -> 함수명은 외부에서 호출할 수 없다.

익명 함수

콜백함수(이벤트 핸들러)에 주로 쓰인다.

const sayHello = function (name) {
  console.log(`Hello, ${name}!`);
};

console.log(sayHello.name) // sayHello

화살표 함수 (Arrow Function)

화살표 함수를 사용해도 두 가지 조건(함수의 선언이 호이스팅되지 않고, 함수의 이름을 명시)을 만족시킬 수 있다.

sayHello('Amy'); // Cannot access 'sayHello' before initialization

const sayHello = (name) => {
    console.log(`Hello, ${name}!`);
}

console.log(sayHello.name) // sayHello

• 함수를 참조하는 변수 선언만 호이스팅 되고, 초기화되지 않는다. → 원치 않는 에러를 방지할 수 있다.
• 함수의 이름을 명시할 수 있다.
• 생성자 함수, argument, this 바인딩 등 일반적인 함수와 다른 특징이 있으니 상황에 따라 적절한 방법으로 함수를 정의해야 한다.

Medium - 함수 Function
MDN - 함수