자바스크립트 화살표 함수: 무엇이며, 왜 사용하는가? | JavaScript Arrow Functions: What Are They and Why Use Them?

Scroll down for English version | 영어 버전은 아래로 스크롤하세요.

1. 화살표 함수란 무엇인가?

자바스크립트 화살표 함수(Arrow Function)는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 선언 방식입니다. 기존의 function 키워드를 사용하는 함수 선언 방식보다 더 간결하고 직관적인 문법을 제공하며, 특히 this 바인딩에 대한 중요한 차이점을 가집니다.

화살표 함수는 이름 그대로 화살표(=>)를 사용하여 함수를 정의합니다. 기본 문법은 다음과 같습니다.

// 기본 문법
(parameters) => { function body }

// 매개변수가 하나일 경우 괄호 생략 가능
parameter => { function body }

// 매개변수가 없을 경우 빈 괄호 사용
() => { function body }

// 단일 표현식일 경우 중괄호 및 return 생략 가능
(parameters) => expression
        

예시:

// 기존 함수 표현식
const add = function(a, b) {
  return a + b;
};

// 화살표 함수 (기본)
const addArrow = (a, b) => {
  return a + b;
};

// 화살표 함수 (단일 표현식, 암시적 반환)
const multiply = (a, b) => a * b;

// 매개변수가 하나일 경우
const square = num => num * num;

// 매개변수가 없을 경우
const greet = () => "안녕하세요!";
        

2. 화살표 함수를 왜 사용하는가?

화살표 함수는 주로 다음과 같은 이유로 사용됩니다.

2.1. 코드의 간결성

가장 큰 장점 중 하나는 코드를 훨씬 간결하게 작성할 수 있다는 점입니다. 특히 콜백 함수나 고차 함수와 함께 사용될 때 그 이점이 더욱 두드러집니다.

예시:

// 기존 방식
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(num) {
  return num * 2;
});

// 화살표 함수 사용
const numbersArrow = [1, 2, 3, 4, 5];
const doubledNumbersArrow = numbersArrow.map(num => num * 2);
        

2.2. this 바인딩의 차이

화살표 함수는 this 바인딩 방식이 기존 함수와 다릅니다. 기존 함수는 호출 방식에 따라 this가 동적으로 결정되지만, 화살표 함수는 선언된 스코프의 this를 정적으로 바인딩합니다.

문제 상황 (기존 함수):

function Counter() {
  this.count = 0;
  setInterval(function() {
    // this는 window 또는 undefined (strict mode)
    console.log(this.count++);
  }, 1000);
}
        

해결책 (화살표 함수):

function CounterArrow() {
  this.count = 0;
  setInterval(() => {
    // this는 CounterArrow 인스턴스
    console.log(this.count++);
  }, 1000);
}
        

2.3. 생성자 함수로 사용 불가

화살표 함수는 new 키워드와 함께 호출할 수 없습니다.

const MyArrow = () => {};
// new MyArrow(); // TypeError
        

2.4. arguments 객체 없음

화살표 함수는 자체적인 arguments 객체를 가지지 않습니다. 나머지 매개변수를 사용해야 합니다.

const showArgs = () => {
  // console.log(arguments); // Error
};

const showRestArgs = (...args) => {
  console.log(args); // [1, 2, 3]
};
showRestArgs(1, 2, 3);
        

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

• 콜백 함수: map, filter, setTimeout 등에 사용 시 간결하고 유용.
• 간단한 함수: 한두 줄로 표현 가능한 함수에 적합.
• this 유지: 상위 스코프의 this를 사용할 때 이상적.

4. 언제 화살표 함수를 피해야 할까?

• 메서드: 객체 메서드 정의 시 this가 객체를 가리키지 않음.

  
  const myObject = {
    value: 10,
    getValueArrow: () => {
      console.log(this.value); // undefined
    },
    getValueFunction() {
      console.log(this.value); // 10
    }
  };
                  

• 생성자 함수: 생성자로 사용 불가.
• 동적 this: 이벤트 핸들러에서 event.target을 this로 참조 시 부적합.

결론

화살표 함수는 코드 간결성과 this 문제를 해결하여 개발자 편의성을 높입니다. 콜백 함수나 간단한 함수에 유용하지만, 메서드나 생성자 함수에는 부적합하므로 적절히 사용해야 합니다.

---

1. What Are Arrow Functions?

JavaScript Arrow Functions, introduced in ES6, offer a concise syntax and a key difference in this binding.

The basic syntax uses an arrow (=>):

// Basic syntax
(parameters) => { function body }

// Single parameter
parameter => { function body }

// No parameters
() => { function body }

// Single expression (implicit return)
(parameters) => expression
        

Examples:

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

// Arrow function
const addArrow = (a, b) => {
  return a + b;
};

// Implicit return
const multiply = (a, b) => a * b;

// Single parameter
const square = num => num * num;

// No parameters
const greet = () => "Hello!";
        

2. Why Use Arrow Functions?

Arrow functions are used for:

2.1. Conciseness of Code

They make code more concise, especially for callbacks.

// Traditional
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(num) {
  return num * 2;
});

// Arrow function
const numbersArrow = [1, 2, 3, 4, 5];
const doubledNumbersArrow = numbersArrow.map(num => num * 2);
        

2.2. this Binding

Arrow functions use lexical this, avoiding context issues.

function Counter() {
  this.count = 0;
  setInterval(function() {
    console.log(this.count++); // NaN or error
  }, 1000);
}
        

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

2.3. Cannot Be Constructors

Arrow functions cannot be used with new.

const MyArrow = () => {};
// new MyArrow(); // TypeError
        

2.4. No arguments Object

Use rest parameters instead.

const showArgs = () => {
  // console.log(arguments); // Error
};

const showRestArgs = (...args) => {
  console.log(args); // [1, 2, 3]
};
showRestArgs(1, 2, 3);
        

3. When to Use Arrow Functions?

• Callbacks: Ideal for map, filter, etc.
• Simple functions: For short, readable code.
• Preserving this: When lexical this is needed.

4. When to Avoid Arrow Functions?

• Methods: this may not refer to the object.

  
  const myObject = {
    value: 10,
    getValueArrow: () => {
      console.log(this.value); // undefined
    },
    getValueFunction() {
      console.log(this.value); // 10
    }
  };
                  

• Constructors: Not usable as constructors.
• Dynamic this: Avoid in event handlers needing event.target.

Conclusion

Arrow functions improve code readability and solve this issues, but are unsuitable for methods or constructors requiring dynamic this.