18. 화살표 함수 (Arrow Functions)

화살표 함수는 ES6에서 도입된 문법으로, 함수 표현식보다 간결하고 단순한 방식으로 함수를 작성할 수 있습니다.

일반적인 함수 표현식과 비교하여 문법에 차이가 있습니다.

---

1. 기본 문법

화살표 함수는 function 키워드를 제거하고, 파라미터 리스트와 함수 본문 사이에 화살표(⇒)를 추가한 형태입니다.

기본 형태

// 함수 표현식
let func = function(arg1, arg2, ...argN) {
  return expression;
};

// 화살표 함수
let func = (arg1, arg2, ...argN) => expression;

• function 키워드 제거: 화살표로 대체.
• 자동 반환: 중괄호 없이 표현식으로 작성하면 return이 없어도 결과값이 자동으로 반환됩니다.

예제

// 일반 함수 표현식
let sum = function(a, b) {
  return a + b;
};

// 화살표 함수
let sumArrow = (a, b) => a + b;

console.log(sum(3, 5));       // 8
console.log(sumArrow(3, 5));  // 8

---

2. 파라미터 개수에 따른 작성법

1) 파라미터가 하나인 경우

• 소괄호 생략 가능

let double = n => n * 2; 
console.log(double(4)); // 8

2) 파라미터가 없거나 두 개 이상인 경우

• 소괄호 필수

let greet = () => "Hello!";
console.log(greet()); // Hello!

let add = (x, y) => x + y;
console.log(add(10, 20)); // 30

---

3. 본문이 여러 줄인 화살표 함수

중괄호와 return 사용

• 본문에 여러 구문이 있을 경우, 중괄호를 사용해야 하며 반환값이 있다면 return을 명시해야 합니다.

let sum = (a, b) => {
  let result = a + b;
  return result; // 반환값 명시
};

console.log(sum(5, 7)); // 12

---

4. 화살표 함수의 활용

1) 동적으로 함수 생성

• 화살표 함수는 함수 표현식처럼 값처럼 사용 가능하므로, 동적으로 함수를 생성할 때 유용합니다.

let age = 18;

let welcome = (age < 18) 
  ? () => console.log("안녕!") 
  : () => console.log("안녕하세요!");

welcome(); // 안녕하세요!

2) 배열 메서드와의 조합

• 화살표 함수는 간결한 문법 덕분에 배열 메서드와 함께 자주 사용됩니다.

let numbers = [1, 2, 3, 4];
let squared = numbers.map(n => n ** 2); // 각 요소를 제곱
console.log(squared); // [1, 4, 9, 16]

---

5. 화살표 함수와 this

화살표 함수는 고유한 this를 가지지 않습니다. 이는 일반 함수와의 가장 큰 차이점 중 하나입니다.

일반 함수와의 차이점

• 일반 함수: 호출 컨텍스트에 따라 this가 동적으로 결정.
• 화살표 함수: 상위 스코프의 this를 그대로 사용.

function regularFunction() {
  console.log(this); // 호출된 객체에 따라 달라짐
}

let arrowFunction = () => {
  console.log(this); // 상위 스코프의 this
};

let obj = {
  method: regularFunction,
  arrow: arrowFunction,
};

obj.method(); // obj (호출한 객체가 this로 결정)
obj.arrow();  // 글로벌 객체 (window, undefined in strict mode)

화살표 함수의 this 활용 예제

let user = {
  name: "Bora",
  greet: function () {
    let arrow = () => console.log(`Hello, ${this.name}!`);
    arrow();
  },
};

user.greet(); // Hello, Bora!

---

6. 실무 활용 예제

예제 1: 필터링 함수

let students = [
  { name: "John", score: 85 },
  { name: "Jane", score: 92 },
  { name: "Jim", score: 78 },
];

let topStudents = students.filter(student => student.score > 80);
console.log(topStudents);
// [{ name: "John", score: 85 }, { name: "Jane", score: 92 }]

예제 2: 이벤트 핸들러

document.getElementById("btn").addEventListener("click", () => {
  console.log("Button clicked!");
});

예제 3: 기본값과 동적 함수 생성

let createMultiplier = multiplier => n => n * multiplier;

let double = createMultiplier(2);
let triple = createMultiplier(3);

console.log(double(4)); // 8
console.log(triple(4)); // 12