자바스크립트 함수의 핵심 개념: 익명 함수와 화살표 함수 완벽 정리

자바스크립트에서 함수는 코드의 재사용성을 높이고, 유지보수를 쉽게 만들어 주는 필수적인 요소입니다. 특히 익명 함수(Anonymous Function) 와 화살표 함수(Arrow Function) 는 현대적인 자바스크립트 코드에서 자주 사용되는 중요한 기능입니다.

이 글에서는 익명 함수와 화살표 함수의 차이점, 주요 특징, 활용 방법을 깊이 있게 살펴보고, 어떤 상황에서 어떤 함수를 사용해야 할지에 대한 가이드를 제공합니다.

---

🔹 익명 함수(Anonymous Function)란?

익명 함수의 개념

익명 함수는 이름 없이 정의되는 함수를 의미합니다. 주로 한 번만 사용되거나 특정 로직에서만 필요한 함수들을 작성할 때 활용됩니다. 일반적으로 변수에 할당되거나 콜백 함수로 전달되어 사용됩니다.

익명 함수의 기본 예제

const add = function(a, b) {
    return a + b;
};

console.log(add(5, 3)); // 출력: 8

위 코드에서 function(a, b) { return a + b; }는 익명 함수이며, add 변수에 저장하여 호출할 수 있도록 했습니다. 이 방식은 주로 재사용이 필요한 경우에 유용합니다.

익명 함수의 주요 특징

• 재사용 가능: 변수에 저장할 수 있어 여러 번 호출이 가능함
• 이벤트 핸들러에 적합: 브라우저 이벤트에서 즉시 실행되도록 설정할 수 있음
• 콜백 함수로 활용: 특정 동작이 끝난 후 실행되도록 설정할 수 있음

익명 함수의 활용 예제

📌 이벤트 핸들러에서의 활용

document.getElementById("btn").addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});

위 코드는 버튼이 클릭될 때 실행되는 익명 함수를 이벤트 리스너에 전달하는 방식입니다.

📌 setTimeout에서의 활용

setTimeout(function() {
    console.log("3초 후 실행됩니다.");
}, 3000);

이 코드에서는 3초 후 실행되는 익명 함수를 setTimeout에 전달했습니다.

---

🔹 화살표 함수(Arrow Function)란?

화살표 함수의 개념

화살표 함수는 ES6(ECMAScript 2015)에서 도입된 함수 표현 방식으로, function 키워드를 생략하고 더 간결한 문법으로 함수를 작성할 수 있도록 도와줍니다.

화살표 함수의 기본 예제

const multiply = (a, b) => a * b;

console.log(multiply(4, 5)); // 출력: 20

위 코드에서는 화살표(=>) 문법을 사용하여 간결하게 함수를 정의했습니다.

화살표 함수의 주요 특징

• 간결한 문법: function 키워드 없이 작성 가능
• 암시적 반환(Implicit Return): 중괄호 없이 한 줄로 작성하면 return 키워드를 생략할 수 있음
• this 바인딩 방식의 차이: 기존 함수와 달리, 화살표 함수는 자신만의 this를 가지지 않고, 상위 스코프의 this를 그대로 상속함

---

🔥 화살표 함수와 일반 함수의 this 차이점

일반 함수에서의 this

const obj = {
    value: 10,
    regularFunction: function() {
        console.log(this.value); // 10
    }
};

obj.regularFunction(); // 10

위 코드에서 regularFunction은 객체 내에서 호출되므로 this가 obj를 가리킵니다.

화살표 함수에서의 this

const obj = {
    value: 10,
    arrowFunction: () => {
        console.log(this.value);
    }
};

obj.arrowFunction(); // undefined

화살표 함수는 자신만의 this를 가지지 않고, 상위 스코프(window 또는 global 객체)의 this를 그대로 사용하기 때문에 undefined가 출력됩니다.

➡ 즉, 화살표 함수는 객체의 메서드로 사용하기에 적합하지 않습니다.

---

🔹 화살표 함수의 활용 예제

📌 배열 메서드에서의 활용

화살표 함수는 배열 메서드(map, filter, reduce 등)에서 매우 유용하게 사용됩니다.

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

console.log(doubled); // 출력: [2, 4, 6]

📌 setTimeout에서의 활용

화살표 함수는 setTimeout과 함께 사용할 때 유용합니다.

function Timer() {
    this.seconds = 0;

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

const myTimer = new Timer();

위 코드에서 setInterval 내부의 함수는 화살표 함수로 작성되었기 때문에 this가 Timer 객체를 유지할 수 있습니다. 만약 function을 사용했다면 this가 window를 가리키는 문제가 발생했을 것입니다.

---

🔹 익명 함수 vs 화살표 함수 비교

비교 항목	익명 함수	화살표 함수
문법	function 키워드 필요	=> 사용
this 바인딩	호출 방식에 따라 this가 결정됨	this가 상위 스코프를 참조
가독성	긴 코드 작성 시 복잡할 수 있음	간결한 코드 작성 가능
활용 사례	콜백 함수, 이벤트 핸들러 등	배열 메서드, setTimeout, setInterval 등

---

✅ 결론: 언제 어떤 함수를 써야 할까?

• 이벤트 핸들러나 콜백 함수가 필요하다면?
  ➝ 익명 함수를 사용하는 것이 일반적

• 배열 메서드를 사용할 때 간결한 코드가 필요하다면?
  ➝ 화살표 함수가 최적

• 객체의 메서드를 정의할 때?
  ➝ 일반 함수를 사용하는 것이 바람직
  (화살표 함수는 this를 상속받기 때문에 메서드 정의에는 적절하지 않음)

• this가 유지되어야 하는 상황에서 콜백 함수를 사용할 때?
  ➝ 화살표 함수를 활용하면 this가 상위 스코프를 유지할 수 있음

자바스크립트를 더욱 깊이 이해하고 효율적으로 활용하기 위해서는 익명 함수와 화살표 함수의 특성을 정확히 이해하고, 적절한 상황에서 적절한 방식을 선택하는 것이 중요합니다.