JavaScript 화살표 함수(Arrow Function) 소개

JavaScript 화살표 함수란?

자바스크립트에서는 함수의 정의를 위해 주로 function 키워드를 사용해 왔으나, ECMAScript 2015(ES6)부터는 화살표 함수(Arrow Function)라는 새로운 문법이 도입되었습니다. 화살표 함수는 짧고 간결한 문법으로 코드를 작성할 수 있어, 많은 개발자들이 선호하고 있습니다.

화살표 함수의 기본 문법

화살표 함수를 선언하는 방식은 다음과 같습니다:

const 함수명 = (매개변수1, 매개변수2, ...) => { 
  // 함수 본문 
}

이와 같이 하여 화살표 함수를 정의할 수 있습니다. 또한, 화살표 함수는 매개변수가 하나일 경우 괄호를 생략할 수 있으며, 본문이 한 줄로 구성된다면 중괄호와 return 키워드도 생략할 수 있습니다.

화살표 함수의 다양한 표현

• 매개변수가 없는 경우: () => { ... }
• 매개변수가 하나인 경우: x => { ... }
• 매개변수가 여러 개인 경우: (x, y) => { ... }

또한, 함수 본문이 단순한 값의 반환만으로 구성될 경우, 아래와 같이 간결하게 작성할 수 있습니다:

const 제곱 = x => x * x;

화살표 함수의 특징

화살표 함수는 일반 함수와는 몇 가지 중요한 차이점을 가지고 있습니다. 이러한 특징들은 개발자에게 유용함을 더할 수 있지만, 때때로 혼란을 초래할 수 있습니다.

1. this의 동작 방식

가장 큰 특징 중 하나는 화살표 함수에서 this가 상위 스코프에서 결정된다는 점입니다. 즉, 화살표 함수는 자신만의 this를 가지지 않으며, 이를 사용하면 외부의 this를 그대로 참조하게 됩니다.

var 이름 = "글로벌";
let 사용자 = {
  이름: "인파",
  인사하기: function() {
    console.log(this.이름); 
  }
};
사용자.인사하기(); // 인파

var 이름 = "글로벌";
let 사용자 = {
  이름: "인파",
  인사하기: () => { 
    console.log(this.이름); 
  }
};
사용자.인사하기(); // 글로벌

위의 예시에서 볼 수 있듯이 일반 함수와 화살표 함수는 this를 다르게 처리합니다. 화살표 함수는 외부 스코프의 this를 참조하기 때문에, 정확히 어떤 객체의 this를 바라보는지에 대해 주의해야 합니다.

2. arguments 객체의 부재

화살표 함수는 일반 함수와 달리 내장된 arguments 객체를 가지지 않습니다. 따라서 매개변수 목록을 통해 전달된 인수들에 접근하기 위해서는 나머지 매개변수(rest parameter)를 활용해야 합니다.

let 인수함수 = (...args) => { 
  console.log(args); 
}
인수함수(1, 2, 3); // [1, 2, 3]

3. 생성자 함수로 사용할 수 없음

화살표 함수는 생성자 함수로 사용할 수 없으며, new 키워드와 함께 호출할 수 없기 때문에 객체 인스턴스를 생성할 수 없습니다. 이는 화살표 함수가 자신의 this를 가지지 않기 때문입니다.

let 사용자 = (이름) => {
  this.이름 = 이름;
};
let 유저 = new 사용자("앨리스"); // TypeError: 사용자 is not a constructor

화살표 함수를 언제 사용해야 할까?

화살표 함수를 사용하는 것이 적절한 경우는 다음과 같습니다:

• 짧고 간결한 함수를 작성하고자 할 때
• 콜백 함수로 사용할 때
• 일반 함수의 복잡성을 피하고 싶을 때

특히, 화살표 함수는 비동기 작업이나 반복문에서 콜백 함수로 사용할 때 매우 유용합니다. 예를 들어 setTimeout을 사용할 때 화살표 함수를 통해 this의 참조를 유지할 수 있습니다.

class 도형 {
  constructor(너비, 높이) {
    this.너비 = 너비;
    this.높이 = 높이;
  }
  면적출력() {
    return this.너비 * this.높이;
  }
  지연출력() {
    setTimeout(() => {
      console.log(this.면적출력());
    }, 2000);
  }
}
let 사각형 = new 도형(20, 10);
사각형.지연출력(); // 200

화살표 함수 사용 시 주의사항

화살표 함수를 사용할 때는 몇 가지 주의할 점이 있습니다:

• 객체 메서드로 사용할 때 주의하기
• addEventListener의 콜백에서 this 사용 시 유의하기
• 프로토타입 메서드를 통해 객체를 참조할 경우 일반 함수를 사용하기

화살표 함수는 간결한 문법과 유용한 기능으로 인해 많은 경우에 권장되지만, 서로 다른 문법과 특성을 갖는 일반 함수와의 차이점을 이해하고 적절한 상황에 맞춰 사용하는 것이 중요합니다.

자주 찾는 질문 Q&A