자바스크립트 화살표 함수(Arrow Function) 완전 정복!

 

📌 1. 함수 정의의 다양한 방법

자바스크립트에서 함수를 정의하는 방식은 다양합니다. 아래는 대표적인 세 가지 방식입니다.

---

✅ 일반적인 함수 선언식

가장 전통적이고 우리가 자주 보던 방식이죠.

function multiply(a, b) {
  return a * b;
}

console.log(multiply(2, 4)); // 8

• function 키워드로 시작하고, 함수명 뒤에 괄호와 매개변수를 받습니다.
• 함수 내부에서 연산을 처리한 뒤 return을 통해 결과를 반환합니다.
• 위 예제에서 a, b는 매개변수(Parameter), 2, 4는 **인자(Argument)**입니다.

---

✅ 함수 표현식 (Function Expression)

이번에는 함수를 변수에 할당하는 방식입니다.

let multiply2 = function(a, b) {
  return a * b;
};

console.log(multiply2(2, 4)); // 8

• 이 방식은 익명 함수를 변수에 할당하는 구조입니다.
• 함수명을 생략하고 변수명으로 호출합니다.
• 주로 콜백 함수나 일회성 함수에 자주 쓰입니다.

---

✅ 화살표 함수 (Arrow Function)

그리고 오늘의 주인공, 바로 화살표 함수입니다!

let multiply3 = (a, b) => a * b;

console.log(multiply3(2, 4)); // 8

• function 키워드가 사라지고, 매개변수 뒤에 => 화살표가 붙습니다.
• 본문이 한 줄이면 중괄호 {}와 return도 생략할 수 있어 짧고 간결합니다.

---

🔎 2. 화살표 함수의 문법 상세 정리

🎯 기본형

const add = (a, b) => a + b;
console.log(add(3, 5)); // 8

• 중괄호 없이 한 줄로 작성 가능
• 자동으로 return됨

🎯 중괄호와 return 사용

본문에 여러 줄의 코드가 있을 경우에는 {}를 쓰고 return도 명시해야 합니다.

const subtract = (a, b) => {
  console.log('두 수를 뺍니다');
  return a - b;
};
console.log(subtract(10, 4)); // 6

🎯 매개변수가 하나일 경우

매개변수가 하나뿐이라면 괄호도 생략할 수 있습니다.

const square = a => a * a;
console.log(square(5)); // 25

🎯 매개변수가 없을 경우

반드시 소괄호 ()를 써야 합니다.

const hello = () => 'Hello, world!';
console.log(hello()); // Hello, world!

---

🧠 3. 화살표 함수와 일반 함수의 this 차이

자바스크립트에서 this는 함수가 어떻게 호출되었는지에 따라 달라집니다. 그런데 화살표 함수는 자신만의 this를 가지지 않고, 외부 스코프의 this를 그대로 상속합니다. 이것이 가장 중요한 차이점 중 하나입니다.

---

✅ 일반 함수에서의 this

const obj1 = {
  name: 'Yeopo',
  getName: function() {
    return this.name;
  }
};

console.log(obj1.getName()); // Yeopo

• 일반 함수는 호출된 객체(obj1)를 this로 인식합니다.

---

❌ 화살표 함수에서의 this

const obj2 = {
  name: 'Yeopo',
  getName: () => {
    return this.name;
  }
};

console.log(obj2.getName()); // undefined

• 화살표 함수는 자신만의 this를 가지지 않습니다.
• this는 바깥 스코프인 전역 객체(window)를 참조하게 됩니다.
• 이 경우 window.name이 없기 때문에 undefined가 출력됩니다.

---

💡 4. 실전 예제들

예제 1: 배열 요소 제곱하기

const numbers = [1, 2, 3, 4];
const squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9, 16]

• map() 함수와 화살표 함수는 찰떡궁합입니다.
• 짧은 문법으로 배열 요소 변형 가능

---

예제 2: this 문제 해결

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

new Timer();

• setInterval 내부에서 일반 함수를 쓰면 this가 Window가 되어버립니다.
• 화살표 함수를 사용하면 외부 this인 Timer 인스턴스를 그대로 사용 가능합니다.

---

예제 3: 이벤트 핸들러

document.getElementById('btn').addEventListener('click', () => {
  console.log(this); // window
});

• 이벤트 핸들러에 화살표 함수를 쓰면 this가 버튼이 아닌 전역 객체가 됩니다.
• 이 경우 일반 함수 사용이 권장됩니다.

---

🚫 5. 화살표 함수의 한계와 주의사항

1. this, arguments, super, new.target은 바인딩되지 않습니다.
2. **생성자 함수(constructor)**로 사용할 수 없습니다.
3. const Person = (name) => { this.name = name; }; const p = new Person('John'); // TypeError
4. 메서드 정의에는 적절하지 않을 수 있음
   객체의 메서드로 사용할 경우 this 문제 발생 가능

---

📘 6. 마무리 및 요약

구분 일반 함수 화살표 함수

선언 방법	function 키워드 사용	=> 사용
this	호출 방식에 따라 달라짐	상위 스코프의 this를 상속
사용처	메서드, 이벤트, 생성자	콜백, 짧은 표현식, 반복문 등
arguments	존재함	없음
new 키워드 사용	가능	불가능

---

📝 오늘의 정리

• function 키워드 대신 =>를 사용하는 화살표 함수는 간결하고 가독성 있는 코드 작성에 유용합니다.
• 단, this와의 관계에 있어서 주의할 점이 많기 때문에 적재적소에 사용하는 것이 중요합니다.
• 콜백, map/filter/reduce 등에서 빛을 발하며, 이벤트 핸들러나 생성자에는 일반 함수가 더 적합할 수 있습니다.