[Javascript] 화살표 함수(Arrow Function) 이해하기

자바스크립트 화살표 함수 이해하기

자바스크립트의 화살표 함수(Arrow Function)는 코드를 더 간결하게 작성할 수 있게 해주는 ES6의 새로운 기능입니다. 기존의 함수 선언 방식과 비교할 때, 문법이 더 간단해지며 this 키워드의 바인딩이 달라지는 등 몇 가지 중요한 차이점이 있습니다. 이번 글에서는 화살표 함수의 문법과 특징, 그리고 사용 예제에 대해 알아보겠습니다.

화살표 함수 문법

화살표 함수의 기본 문법은 다음과 같습니다.

const functionName = (parameter1, parameter2) => {
  // 함수 내용
  return result;
};

인자가 하나일 때는 괄호를 생략할 수 있고, 함수 본문이 단일 표현식일 때는 중괄호와 return 키워드를 생략할 수 있습니다.

// 인자가 하나인 경우 괄호 생략 가능
const square = x => x * x;

// 중괄호와 return 생략 가능
const add = (a, b) => a + b;

기존 함수와의 차이점

1. 간결한 문법:
   • 화살표 함수는 함수 선언을 더 간단하게 할 수 있습니다. 특히 짧은 함수나 콜백 함수를 작성할 때 유용합니다.

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

2. this 바인딩:
   • 화살표 함수는 자신만의 this 컨텍스트를 가지지 않고, 상위 스코프의 this를 사용합니다. 이는 메서드 내부나 콜백 함수에서 유용하게 사용할 수 있습니다.

   // 기존 함수에서의 this
   function Person() {
     this.age = 0;
   
     setInterval(function growUp() {
       this.age++;
     }, 1000);
   }
   
   const p = new Person();
   // p.age는 증가하지 않습니다. this가 전역 객체를 참조하기 때문입니다.
   
   // 화살표 함수에서의 this
   function Person() {
     this.age = 0;
   
     setInterval(() => {
       this.age++;
     }, 1000);
   }
   
   const p = new Person();
   // p.age는 화살표 함수의 this가 Person 인스턴스를 참조하므로 증가합니다.

3. arguments 객체:
   • 화살표 함수는 arguments 객체를 가지지 않습니다. 필요할 경우 상위 함수의 arguments 객체를 참조합니다.

   function regularFunction() {
     console.log(arguments);
   }
   
   const arrowFunction = () => {
     console.log(arguments);
   };
   
   regularFunction(1, 2, 3); // [1, 2, 3]
   arrowFunction(1, 2, 3); // ReferenceError: arguments is not defined

사용 예제

1. 배열 메서드와 콜백:
   • 화살표 함수는 map, filter, reduce와 같은 배열 메서드에서 콜백 함수로 자주 사용됩니다.

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

2. 객체 메서드:
   • 객체 메서드에서 화살표 함수를 사용할 때 주의가 필요합니다. 화살표 함수는 자신만의 this를 가지지 않기 때문에 객체의 메서드로는 적절하지 않을 수 있습니다.

   const obj = {
     value: 10,
     increment: function() {
       setTimeout(() => {
         console.log(this.value);
       }, 1000);
     }
   };
   
   obj.increment(); // 10

3. 함수 내의 짧은 함수:
   • 짧은 함수 표현식이나 콜백 함수로 사용하기에 적합합니다.

   const numbers = [1, 2, 3, 4, 5];
   const evenNumbers = numbers.filter(n => n % 2 === 0);
   
   console.log(evenNumbers); // [2, 4]

주의사항

• 생성자 함수로 사용할 수 없음: 화살표 함수는 new 키워드를 사용할 수 없습니다. 생성자 함수로는 적합하지 않습니다.
• const MyClass = () => {}; const instance = new MyClass(); // TypeError: MyClass is not a constructor
• this 바인딩 주의: 객체 메서드로 사용할 때는 기존 함수 선언 방식을 사용하는 것이 더 적절할 수 있습니다.
• const obj = { value: 10, increment: () => { this.value++; } }; obj.increment(); // this는 obj가 아닌 상위 스코프를 참조합니다.

결론

자바스크립트의 화살표 함수는 코드의 가독성을 높이고, 특히 콜백 함수나 짧은 함수 표현식에서 유용합니다. 그러나 this 바인딩 방식이 기존 함수와 다르므로, 사용 시 주의가 필요합니다. 화살표 함수를 적절히 활용하면 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.