[JS] Arrow function

화살표 함수(Arrow Function)는 JavaScript에서 간결하게 함수를 작성할 수 있도록 도와주는 문법

=> 기호를 사용하여 정의하며, 일반 함수 표현식보다 코드가 짧아지고 가독성이 높아지는 장점

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

// 화살표 함수
const add = (a, b) => {
    return a + b;
};

 

주요 특징

1. 간결한 문법: 코드가 짧고 간결
2. this 바인딩: 화살표 함수는 자신만의 this를 가지지 않으며, 선언된 위치의 this를 상속. 즉, 이러한 특징 때문에 function 키워드를 사용할 때 발생하는 this 관련 문제를 방지
3. 암묵적 반환: 함수 본문에 중괄호({})가 없으면 표현식의 결과가 자동으로 반환

예제 1

// 일반 함수
const square = function(x) {
    return x * x;
};

// 화살표 함수
const square = x => x * x;

console.log(square(3)); // 9

 

 

예제 2

// 일반 함수
const greet = function() {
    return 'Hello!';
};

// 화살표 함수
const greet = () => 'Hello!';

console.log(greet()); // Hello!

 

예제3 (돌려보기)

// 일반 함수에서의 this
function Person1() {
    this.age = 0;
    let count = 0; // 출력 횟수를 제한하기 위한 변수
    const intervalId = setInterval(function() {
        this.age++;
        count++;
        console.log(this.age); // NaN (this가 전역 객체를 가리킴)

        if (count >= 5) {
            clearInterval(intervalId); // 5번 출력 후 중지
        }
    }, 50);
}

// 화살표 함수에서의 this
function Person2() {
    this.age = 0;
    let count = 0; // 출력 횟수를 제한하기 위한 변수
    const intervalId = setInterval(() => {
        this.age++;
        count++;
        console.log(this.age); // 1, 2, 3... (this가 Person 인스턴스를 가리킴)

        if (count >= 5) {
            clearInterval(intervalId); // 5번 출력 후 중지
        }
    }, 50);
}

// 실행
console.log("일반 함수에서의 this:");
new Person1(); // NaN 출력

setTimeout(() => {
    console.log("화살표 함수에서의 this:");
    new Person2(); // 1, 2, 3... 출력
}, 300);

 

예제 3 실행 결과

Person1

• 출력: NaN (전역 객체 참조 문제)
• 원인: this.age가 undefined로 시작하여 NaN을 출력.

Person2

• 출력: 1, 2, 3, 4, 5 (정상적으로 작동)
• 원인: 화살표 함수가 this를 생성자 함수의 컨텍스트로 바인딩.
• 렉시컬 스코프를 따르므로 this 바인딩 문제를 피할 수 있어 더 직관적.