JavaScript의 Arrow Functions: 함수를 더 간단하게 작성하는 방법

Source: Dev.to

전통적인 함수 구문

function greet(name) {
  return "hello" + name;
}

화살표 함수 구문

const greet = (name) => {
  return "hello" + name;
};

const greet = name => "hello" + name;

구문 분석

const functionName = (parameters) => {
  // code
};

• const → 보통 화살표 함수를 정의할 때 사용됩니다
• (parameters) → 입력값
• => → 화살표 기호
• {} → 함수 본문

하나의 매개변수를 갖는 화살표 함수

const greet = name => "hello" + name;

함수가 반환값을 반환하는 단일 문장만 포함할 경우, 중괄호와 return 키워드를 생략할 수 있습니다.

여러 매개변수를 갖는 화살표 함수

const add = (a, b) => a + b;

여러 문장을 포함하는 화살표 함수

함수 본문에 여러 문장이 포함될 때는 중괄호와 명시적인 return이 필요합니다:

const sumAndLog = (a, b) => {
  const result = a + b;
  console.log(result);
  return result;
};

화살표 함수와 this 키워드

일반 함수

const User = {
  name: "Tony",
  greet: function () {
    return this.name;
  }
};

User.greet(); // returns "Tony"

화살표 함수

const User = {
  name: "Tony",
  greet: () => {
    return this.name;
  }
};

User.greet(); // returns undefined

화살표 함수는 자체 this를 가지지 않으며, 주변 렉시컬 스코프에서 this를 상속받습니다.

중요한 포인트

• 화살표 함수는 사용되기 전에 정의되어야 합니다 (함수 선언처럼 호이스팅되지 않음).
• 자체 this, arguments, super, new.target을 갖지 않습니다.
• 렉시컬 this가 필요한 비메서드 함수와 콜백에 가장 적합합니다.