[mjt] 함수 선언식, 표현식, 화살표 함수 비교

December 4, 2024

함수 선언식, 표현식, 화살표 함수 비교

JavaScript에서 함수는 핵심적인 역할을 한다. 이를 선언하고 사용하는 방식은 크게 함수 선언식, 함수 표현식, 그리고 화살표 함수로 나눌 수 있으며, 각 방식은 작성 방법과 동작 방식에서 차이가 있으므로 적절히 사용하는 것이 중요하다

함수 선언식은 function 키워드를 사용하여 독립적인 형태로 함수를 정의하는 방식이다.

// 문법
function 함수이름(매개변수1, 매개변수2) {
  // 함수 본문
  return 값;
}

함수 표현식은 변수에 익명 함수 또는 이름을 가진 함수를 할당하는 방식이다.

// 문법
const 변수이름 = function (매개변수1, 매개변수2) {
  // 함수 본문
  return 값;
};

화살표 함수는 ES6에서 도입된 간결한 함수 작성 방식이다.

this 바인딩 없음: 화살표 함수는 자신만의 this를 가지지 않고, 선언된 위치의 this를 상속받는다. 따라서 객체 메서드로 사용하기에는 적합하지 않음
간결한 문법: 본문이 한 줄이면 {}와 return 키워드를 생략할 수 있다.
익명 함수: 항상 이름이 없는 함수로 사용된다.

// 문법
const 변수이름 = (매개변수1, 매개변수2) => {
  // 함수 본문
  return 값;
};

특징	함수	선언식 함수	표현식 화살표 함수
호이스팅	지원됨	지원되지 않음	지원되지 않음
this 바인딩	고유 바인딩	고유 바인딩	상위 스코프 상속
문법 간결성	일반적	일반적	매우 간결
사용 시점	독립적인 함수	변수에 할당된 함수	콜백, 간단한 함수

일반적으로 함수를 선언해야 한다면 함수가 선언되기 이전에도 함수를 활용할 수 있기 때문에, 함수 선언문 방식을 따르는 게 좋다. 함수 선언 방식은 코드를 유연하게 구성할 수 있도록 해주고, 가독성도 좋기 때문이다.