화살표 함수(Arrow Function)

화살표 함수란?

화살표 함수(Arrow Function)는 ES6(ECMAScript 2015)에서 도입된 JavaScript의 기능으로, 함수를 작성하는 새로운 간결한 문법입니다.

등장 배경

1. 간결한 문법의 필요성
   기존의 function 키워드를 사용한 함수 선언 방식은 코드가 길어지고 가독성이 떨어질 수 있었습니다. 특히 콜백 함수나 익명 함수가 자주 사용되는 상황에서 더더욱 간단한 방식이 필요했습니다.
2. this 바인딩 문제 해결
   JavaScript에서의 this는 함수가 호출되는 방식에 따라 달라집니다. 그러나 화살표 함수는 this를 작성된 위치에서 상속받아 사용합니다(렉시컬 스코프). 이로 인해 복잡한 상황에서의 this 문제를 해결하기 위해 추가 코드(예: .bind()나 self = this 패턴)를 작성하지 않아도 됩니다.

---

화살표 함수의 문법

기본 형식

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

특징

간결한 문법

• 중괄호 {}와 return 키워드를 생략 가능 (단, 표현식이 단일 구문인 경우).
• 매개변수가 하나라면 괄호 ()도 생략 가능.
• const square = x => x * x;

블록 본문

• 복잡한 로직이 필요한 경우 중괄호를 사용하며, 명시적으로 return을 작성해야 합니다.

const multiply = (a, b) => {
    const result = a * b;
    return result;
};

---

화살표 함수의 장점

간결성

• 콜백 함수 작성 시 훨씬 짧고 읽기 쉬운 코드 작성 가능.

const numbers = [1, 2, 3];
const squared = numbers.map(num => num * num);

this 바인딩 문제 해결

• 화살표 함수는 자신의 this를 소유하지 않고, 상위 스코프의 this를 상속받습니다.
• 위 예제에서 화살표 함수를 사용하지 않으면 setInterval의 this는 Timer 인스턴스가 아니라 전역 객체를 가리키게 됩니다.

function Timer() {
    this.seconds = 0;
    setInterval(() => {
        this.seconds++;
        console.log(this.seconds);
    }, 1000);
}
new Timer();

---

일반 함수와의 차이

특성	일반함수(function)	화삼표 함수(=>)
this 바인딩	호출 컨텍스트에 따라 달라짐	상위 스코프의 this를 상속
arguments 객체	사용할 수 있음	사용할 수 없음
문법	더 길고 가독성이 낮을 수 있음	간결하고 읽기 쉬움
생성자 호출 가능 여부	new 키워드를 사용해 객체 생성 가능	생성자 호출 불가

---

사용하지 말아야 할 상황

객체 메서드
객체의 메서드로 사용할 경우 this가 객체를 가리키지 않으므로 일반 함수가 더 적합합니다.

const person = {
    name: 'Hyun',
    greet: () => {
        console.log(`Hello, ${this.name}`); // undefined
    }
};
person.greet();

이벤트 핸들러
DOM 이벤트 핸들러에서 화살표 함수를 사용하면 this가 이벤트 대상(DOM 요소)을 가리키지 않습니다.

const button = document.querySelector('button');
button.addEventListener('click', () => {
    console.log(this); // undefined 또는 Window
});

---

결론

• 화살표 함수는 간결한 콜백 함수 작성이나 this 바인딩 문제를 해결하는 데 매우 유용합니다.
• 그러나 메서드나 이벤트 핸들러와 같이 this가 동적으로 설정되어야 하는 상황에서는 적합하지 않을 수 있으므로 상황에 맞게 사용해야 합니다.