[JavaScript] 화살표 함수와 일반 함수의 차이

📚 화살표 함수(Arrow Functions)와 일반 함수의 차이는 무엇인가요?

자바스크립트에서 화살표 함수(Arrow Functions)는 ES6에서 도입된 새로운 함수 정의 방식이에요. 기존의 일반 함수 표현식과 달리, 더 간결한 문법을 제공하며, this 바인딩과 관련된 중요한 차이점이 있어요.

 

비유를 들어보면, 일반 함수는 새로운 맥락을 형성하여 독립적인 행동을 하는 주체라면, 화살표 함수는 그저 주변 환경을 따라가는 형태의 행동을 해요. 이 때문에 this를 다루는 방식에 큰 차이가 있답니다.

---

🖥️ 화살표 함수와 일반 함수의 차이점

1. 문법의 차이

• 일반 함수는 function 키워드를 사용해 정의하고, 화살표 함수는 =>를 사용해 정의해요.

// 일반 함수
function greet(name) {
    return "Hello, " + name;
}

// 화살표 함수
const greet = (name) => {
    return "Hello, " + name;
};

// 화살표 함수 - 더 간결한 형태
const greet = name => "Hello, " + name;

화살표 함수는 더 짧고 간결하게 쓸 수 있어요.
특히 단일 인수와 단일 반환문을 가질 때는 중괄호와 return 키워드도 생략할 수 있어요.

2. this 바인딩의 차이

• 일반 함수는 호출되는 시점에 this가 동적으로 결정돼요. 즉, this가 실행 컨텍스트에 따라 달라질 수 있어요.
• 화살표 함수는 정적으로 상위 스코프의 this를 그대로 가져와서 사용해요. 즉, 화살표 함수 내에서의 this는 항상 외부 환경을 따르게 됩니다.

const person = {
    name: "철수",
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

person.greet(); // "Hello, 철수"

// 일반 함수에서의 this 문제
const personWithIssue = {
    name: "철수",
    greet: function() {
        setTimeout(function() {
            console.log("Hello, " + this.name); // 여기서 this는 전역 객체를 가리킴
        }, 1000);
    }
};

personWithIssue.greet(); // "Hello, undefined"

// 화살표 함수에서의 this 해결
const personWithArrowFunction = {
    name: "철수",
    greet: function() {
        setTimeout(() => {
            console.log("Hello, " + this.name); // 여기서 this는 상위 스코프인 personWithArrowFunction을 가리킴
        }, 1000);
    }
};

personWithArrowFunction.greet(); // "Hello, 철수"

일반 함수에서는 this가 전역 객체를 참조하게 되어 문제가 발생할 수 있어요.
그러나 화살표 함수는 상위 스코프의 this를 그대로 사용하므로, 이런 문제를 방지할 수 있어요.

3. arguments 객체

• 일반 함수에서는 암묵적으로 arguments 객체를 사용할 수 있어요. 이는 함수로 전달된 모든 인수들의 배열과 비슷한 객체예요.
• 화살표 함수는 arguments 객체를 갖지 않아요. 대신, 필요하다면 rest 파라미터( ...args )를 사용해야 해요.

// 일반 함수의 arguments
function sum() {
    console.log(arguments); // [1, 2, 3]
    return Array.from(arguments).reduce((acc, curr) => acc + curr);
}
console.log(sum(1, 2, 3)); // 6

// 화살표 함수에서는 arguments 사용 불가
const sumArrow = () => {
    console.log(arguments); // 오류 발생
};
sumArrow(1, 2, 3); // Uncaught ReferenceError: arguments is not defined

// 화살표 함수에서 rest 파라미터 사용
const sumArrowWithRest = (...args) => {
    return args.reduce((acc, curr) => acc + curr);
};
console.log(sumArrowWithRest(1, 2, 3)); // 6

화살표 함수에는 arguments 객체가 없기 때문에, 전달된 인수들을 다루기 위해서는 rest 파라미터를 사용해야 해요.

---

🤔 화살표 함수와 일반 함수, 언제 사용해야 할까요?

화살표 함수와 일반 함수는 각각 다른 용도에 적합해요. 주로 this의 동작과 관련된 상황에서 어떤 함수를 사용할지 결정하게 돼요.

• 화살표 함수는 주로 콜백 함수나 this 바인딩이 필요 없는 경우에 유용해요. 상위 스코프의 this를 유지하기 때문에, 이벤트 처리기나 비동기 함수 내에서 this가 고정되어야 할 때 유용하게 사용할 수 있어요. setTimeout, 배열 메서드 (map, filter, forEach 등)에서 자주 사용되며, 짧은 코드 블록을 표현할 때 특히 효과적이에요.
• 일반 함수는 동적으로 this를 바인딩해야 하는 경우에 사용돼요. 또한 함수가 호출될 때의 맥락에 따라 this가 달라지는 경우나, arguments 객체를 사용할 필요가 있을 때 유리해요. 객체의 메서드를 정의할 때는 일반 함수가 적합해요.

1. 배열 메서드에서 화살표 함수 사용하기

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

// 화살표 함수로 간단하게 작성
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

배열의 각 요소를 변환하는 과정에서는 화살표 함수가 코드의 간결함을 유지하는 데 매우 효과적이에요.
this가 필요하지 않은 순수한 연산을 수행할 때, 화살표 함수가 깔끔한 해결책이 됩니다.

2. 객체 메서드에서 일반 함수 사용하기

const person = {
    name: "지민",
    age: 28,
    greet: function() {
        console.log("안녕하세요, 저는 " + this.name + "이고, 나이는 " + this.age + "살입니다.");
    }
};

person.greet(); 
// 안녕하세요, 저는 지민이고, 나이는 28살입니다.

이 예제에서는 일반 함수를 사용하여 객체의 메서드를 정의했어요.
일반 함수는 호출되는 컨텍스트에 따라 this를 다르게 바인딩하기 때문에, 이 함수는 person 객체의 name과 age 속성에 접근할 수 있어요.
객체의 속성에 접근하려면 일반 함수를 사용하는 것이 적절해요.

3. 이벤트 처리기에서 화살표 함수 사용하기

class Button {
    constructor() {
        this.label = "Click Me!";
    }

    handleClick = () => {
        console.log(this.label);
    }
}

const button = new Button();
document.querySelector("#myButton").addEventListener("click", button.handleClick);

이 예제에서는 화살표 함수를 사용해 이벤트 처리기를 정의했어요.
화살표 함수는 this가 상위 스코프에 바인딩되므로, 이벤트 핸들러에서도 Button 클래스의 label 속성을 올바르게 참조할 수 있어요.
일반 함수였다면, this가 이벤트 타겟인 버튼 요소를 가리켜 문제가 발생할 수 있었을 거예요.

4. this 바인딩이 필요한 경우 일반 함수 사용하기

const car = {
    brand: "Tesla",
    getBrand: function() {
        return this.brand;
    }
};

console.log(car.getBrand()); // Tesla

const getCarBrand = car.getBrand;
console.log(getCarBrand()); // undefined

일반 함수는 호출된 맥락에 따라 this가 달라져요.
car.getBrand 메서드를 호출할 때는 this가 car 객체를 가리키지만, 함수 참조를 다른 변수에 할당해서 호출하면 this가 전역 객체를 가리키기 때문에 undefined가 출력돼요.
이런 문제를 방지하기 위해서는 this를 고정하는 바인딩이나, 화살표 함수 또는 bind 메서드를 사용해야 해요.

---

🚨 주의할 점

• 화살표 함수는 생성자로 사용할 수 없어요. new 키워드와 함께 사용할 수 없으며, 인스턴스를 생성하는 역할을 하지 않아요.
• 화살표 함수는 this를 동적으로 바인딩하지 않아요. 따라서 this가 고정되어야 하는 상황에서는 화살표 함수를 사용해야 하지만, this가 동적으로 변해야 하는 상황에서는 일반 함수를 사용해야 해요.

---

📖 결론

화살표 함수는 간결한 문법과 상위 스코프의 this를 사용하는 특성 덕분에 콜백 함수나 배열 메서드와 같은 상황에서 자주 사용돼요. 반면, 일반 함수는 동적인 this 바인딩이 필요할 때나 arguments 객체를 다뤄야 할 때 유용해요. 상황에 따라 적절하게 선택하여 사용하는 것이 중요해요.

---

🔗 추가 정보

• 자바스크립트의 화살표 함수에 대한 더 깊은 이해를 원하신다면, MDN Web Docs에서 자세한 정보를 찾아볼 수 있어요.