[기초]JavaScript 화살표 함수(Arrow Function)

화살표 함수(Arrow Function)는 ES6(ECMAScript 2015)에서 도입된 JavaScript의 새로운 함수 작성 방식입니다. 기존의 함수 선언 방식보다 간결한 문법을 제공하며, this 키워드의 바인딩 방식이 다르다는 점에서 중요한 차이점이 있습니다.

 

1. 기본 문법

화살표 함수는 다음과 같이 정의할 수 있습니다:

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

매개변수가 하나뿐인 경우에는 괄호를 생략할 수 있습니다. 그리고 함수 본문이 단일 표현식인 경우 중괄호와 return 키워드도 생략할 수 있습니다.

// 매개변수가 하나인 경우 괄호 생략 가능
const square = x => x * x;

// 매개변수가 없는 경우 괄호 필수
const greet = () => 'Hello!';

// 여러 매개변수가 있는 경우 괄호 사용
const add = (a, b) => a + b;

 

 

2. 화살표 함수의 주요 특징

1) 간결한 문법

화살표 함수는 기존의 함수 표현보다 훨씬 간결한 문법을 제공합니다. 특히 짧은 함수를 작성할 때 유용합니다.

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

// 화살표 함수 표현식
const add = (a, b) => a + b;

 

2) this 바인딩

화살표 함수는 this 키워드의 바인딩이 다릅니다. 전통적인 함수는 호출 시점에 this가 동적으로 바인딩되는 반면, 화살표 함수는 this가 정의될 때의 정의된 스코프에서 상속받습니다. this뿐만 아니라 arguments, super, new.target도 상위 스코프에서 상속받습니다. 이러한 특징을 "lexical this"라고 부릅니다. 화살표 함수는 this를 자신이 정의된 위치에서 상속받기 때문에, 콜백 함수나 이벤트 핸들러 내에서 this 문제를 해결하는 데 매우 유용합니다.

 

3) arguments 객체

화살표 함수는 arguments 객체를 지원하지 않습니다. 화살표 함수 내부에서 arguments를 사용하면 상위 스코프의 arguments 객체에 접근하게 됩니다. 따라서 필요한 경우 Rest 파라미터(...args)를 사용해야 합니다.

// 일반 함수에서 arguments 사용
function sum() {
  return Array.from(arguments).reduce((total, num) => total + num, 0);
}

// 화살표 함수에서 arguments 사용
function outer() {
  const arrowFunc = () => {
    console.log(arguments); // outer 함수의 arguments를 참조함
  };
  arrowFunc(3); // 이 경우 outer 함수의 arguments를 출력함
}
outer(1, 2); // [1, 2]

// 화살표 함수에서 arguments 사용 (2)
const arrowFunc = () => {
  console.log(arguments); // 에러 발생: arguments는 정의되지 않음
};


// 화살표 함수에서 Rest 파라미터 사용
const sum = (...args) => args.reduce((total, num) => total + num, 0);

 

4) new 키워드 사용 불가

화살표 함수는 생성자 함수로 사용할 수 없으며, 화살표 함수는 프로토타입이 없기 때문에 new 키워드를 사용할 수 없습니다.

const Person = (name) => {
  this.name = name;
};

// 오류 발생: 화살표 함수는 생성자 함수로 사용할 수 없습니다.
const john = new Person('John');

 

5) 메서드로 사용하기 적합하지 않음

화살표 함수는 this가 상위 컨텍스트에 바인딩되므로, 객체의 메서드로 정의할 경우 의도한 대로 동작하지 않을 수 있습니다. 이 때문에 메서드로는 전통적인 함수 표현식을 사용하는 것이 일반적으로 더 적절합니다.

const obj = {
  name: 'Alice',
  greet() {		
    console.log(this.name); // 'Alice'
  }
};

obj.greet(); // 'Alice'

 

 

 

6) return 문

단일 표현식만 반환하는 경우 return 문과 중괄호를 생략할 수 있습니다. 그러나 여러 줄의 함수 본문이 있는 경우 중괄호와 return을 사용해야 합니다.

// 단일 표현식 반환
const multiply = (a, b) => a * b;

// 여러 줄의 함수 본문
const multiplyAndLog = (a, b) => {
  const result = a * b;
  console.log(result);
  return result;
};

 

 

3. 화살표 함수의 사용 사례

• 배열 메서드와의 조합: 화살표 함수는 map, filter, reduce 등 배열 메서드와 함께 사용하기에 매우 적합합니다.

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(n => n * n);

 

• 간단한 콜백 함수: 이벤트 핸들러나 비동기 함수의 콜백으로 사용할 때 매우 유용합니다.

setTimeout(() => console.log('Hello!'), 1000);

 

 

4. 결론

화살표 함수는 코드의 가독성을 높이고 this 바인딩 문제를 해결하는 데 매우 유용합니다. 하지만 모든 상황에서 적합한 것은 아니며, this 바인딩이나 생성자 함수가 필요한 경우에는 전통적인 함수 표현식을 사용하는 것이 적절합니다. 화살표 함수의 장단점을 이해하고 적절한 상황에서 사용하는 것이 중요합니다.