[JavaScript] 화살표 함수

화살표 함수란

화살표 함수는 기존의 함수 표현식보다 간결하게 작성할 수 있는 문법입니다.

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

위 코드에서 인수를 받아 오른쪽의 표현식의 결과가 자동으로 반환합니다.

매개 변수 처리

단일 매개변수

매개변수가 단 한 개라면 괄호를 생략할 수 있습니다.

const double = n => n * 2;

console.log(double(3)); // 6

매개변수가 없을 경우

매개변수가 없다면 빈 괄호를 사용해야 합니다.

const greet = () => console.log('안녕하세요!');

여러 문장이 있는 함수

함수 본문에 여러 줄의 문장이 포함되거나 추가적인 로직이 필요한 경우, 중괄호 {}를 사용하여 블록을 구성하고 명시적으로 return 문을 사용해 값을 반환해야합니다.

const numbers = [1, 2, 3, 4, 5];

const total = numbers => {
  let sum = 0;
  for (let num of numbers) {
    sum += num;
  }
  return sum;
};

조건 연산자와 함께 사용

const age = 22;

const message = age >= 18
  ? () => console.log('성인입니다.')
  : () => console.log('미성년자입니다.');

message();

화살표 함수의 특징

this 바인딩

화살표 함수는 자체적인 this를 가지지 않고, 상위 스코프의 this를 참조합니다.

arguments 객체

화살표 함수는 arguments 객체를 지원하지 않아서 필요한 경우 rest 파라미터를 사용해야합니다.

arguments 객체란

자바스크립트에서 함수 내에서 사용되는 유사 배열 객체입니다. 함수를 호출할 때 전달된 인자들이 arguments 객체에 배열 형태로 저장됩니다.
rest 파라미터

spread(...) 문법을 사용하여 매개변수를 배열로 받을 수 있습니다.

const func = (...args) => {
  console.log(args);
};

func(1, 2, 3); // 출력: [1, 2, 3]