C2C Dev

화살표 함수 [ = ( ) => ]

ES6에서 도입된 함수 정의 방식

기존의 함수 표현식보다 간결하고, this 키워드의 동작 방식이 달라지는 것이 특징

문법

// 기본 함수 표현식
const 함수명 = (매개변수1, 매개변수2, ...) => {
  // 함수의 내용
  return 값;
};

• 매개변수가 하나일 때는 괄호를 생략 가능
• 함수 본문이 한 줄일 경우, 중괄호와 return 문도 생략 가능하다.

예시

1. 매개변수가 없는 경우

const sayHello = () => {
  console.log("Hello!");
};

sayHello(); // 출력: Hello!

2. 매개변수가 있는 경우

const greet = (name) => {
  return `Hello, ${name}!`;
};

console.log(greet("Alice")); // 출력: Hello, Alice!

3. 매개변수가 하나인 경우(괄호 생략 가능)

const double = x => x * 2;

console.log(double(5)); // 출력: 10

4. 매개변수가 여러개인 경우

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

console.log(add(3, 7)); // 출력: 10

5. 객체 반환하는 경우

const createPerson = (name, age) => ({ name, age });

console.log(createPerson("Alice", 25)); 
// 출력: { name: "Alice", age: 25 }

화살표 함수는 특히 간결한 표현과 this 바인딩이 중요한 상황에서 유용하게 사용