[JavaScript 최신 기능 시리즈] 4일차: JavaScript 화살표 함수 이해하기

4. 화살표 함수

화살표 함수란 무엇인가?

화살표 함수(Arrow Function)는 ES6에서 도입된 새로운 함수 선언 방식으로, 보다 간결한 문법과 함께 this 바인딩의 차이를 가지고 있습니다. 화살표 함수는 특히 콜백 함수나 간단한 함수를 작성할 때 유용합니다.

화살표 함수의 기본 문법

화살표 함수는 function 키워드 대신 => (화살표)를 사용하여 선언합니다.

1. 기본 문법

// 일반 함수
function add(a, b) {
  return a + b;
}

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

// 더 간결한 형태 (단일 표현식)
const add = (a, b) => a + b;

console.log(add(2, 3));  // 출력: 5

2. 매개변수가 하나인 경우

매개변수가 하나인 경우 괄호를 생략할 수 있습니다.

const square = x => x * x;
console.log(square(4));  // 출력: 16

3. 매개변수가 없는 경우

매개변수가 없는 경우 빈 괄호를 사용합니다.

const greet = () => console.log('Hello, World!');
greet();  // 출력: Hello, World!

화살표 함수와 this

화살표 함수는 자신만의 this 바인딩을 가지지 않습니다. 대신, 화살표 함수가 정의된 위치에서 this를 상속받습니다. 이는 특히 콜백 함수에서 유용합니다.

1. 일반 함수에서의 this

function Person() {
  this.age = 0;

  setInterval(function() {
    this.age++;  // 일반 함수의 this는 전역 객체를 가리킴
    console.log(this.age);
  }, 1000);
}

let person = new Person();
// NaN (this.age가 undefined이기 때문)

2. 화살표 함수에서의 this

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++;  // 화살표 함수의 this는 Person 인스턴스를 가리킴
    console.log(this.age);
  }, 1000);
}

let person = new Person();
// 1초마다 1씩 증가하는 age 값 출력

화살표 함수와 arguments

화살표 함수는 arguments 객체를 가지지 않습니다. 대신, 상위 함수의 arguments를 참조할 수 있습니다.

1. 일반 함수에서의 arguments

function sum() {
  return Array.from(arguments).reduce((acc, val) => acc + val, 0);
}

console.log(sum(1, 2, 3, 4));  // 출력: 10

2. 화살표 함수에서의 arguments (오류 발생)

const sum = () => {
  return Array.from(arguments).reduce((acc, val) => acc + val, 0);
};

// console.log(sum(1, 2, 3, 4));  // 오류 발생: arguments is not defined

3. 해결 방법: 나머지 매개변수

화살표 함수에서는 arguments 대신 나머지 매개변수(Rest Parameter)를 사용할 수 있습니다.

const sum = (...args) => {
  return args.reduce((acc, val) => acc + val, 0);
};

console.log(sum(1, 2, 3, 4));  // 출력: 10

화살표 함수의 사용 사례

1. 배열 메서드와의 결합

화살표 함수는 배열 메서드와 함께 사용할 때 매우 유용합니다.

let numbers = [1, 2, 3, 4, 5];

// 배열 요소의 제곱을 구함
let squared = numbers.map(x => x * x);
console.log(squared);  // 출력: [1, 4, 9, 16, 25]

2. 이벤트 핸들러

화살표 함수는 이벤트 핸들러에서도 사용될 수 있습니다.

document.getElementById('myButton').addEventListener('click', () => {
  console.log('Button clicked');
});

결론

화살표 함수는 간결한 문법과 함께 this 바인딩의 차이로 인해 강력하고 유용한 도구입니다. 이를 적절히 활용하면 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다.

다음 글에서는 클래스와 상속에 대해 알아보겠습니다.

다음 글에서 만나요!