자바스크립트 Arrow Function: 간단한 문법, 강력한 기능

Arrow Function이란 무엇인가요?

자바스크립트에서 Arrow Function은 ES6에서 도입된 새로운 함수 문법입니다. 기존의 함수 표현식보다 더 간단한 문법을 사용할 수 있고, this의 값이 고정되어 헷갈리는 문제를 해결할 수 있습니다.

const multiply = (a, b) => {
  return a * b;
}

Arrow Function은 위와 같이 함수 이름 대신 화살표(=>)를 사용합니다. 인자가 하나인 경우, 괄호를 생략할 수 있습니다. 함수 내부가 한 줄인 경우 return 문도 생략할 수 있습니다.

this와 Arrow Function

Arrow Function에서 this는 함수가 생성된 위치의 외부 스코프에서 상속됩니다. 이것은 다음과 같은 코드에서 유용합니다.

const person = {
  name: 'John',
  age: 30,
  sayHello: function() {
    setTimeout(function() {
      console.log(`Hello, my name is ${this.name}.`);
    }, 1000);
  }
}

위 코드에서 this는 함수 내부의 스코프에서 사용할 수 없기 때문에, setTimeout 함수가 실행될 때 undefined가 출력됩니다. 이 문제를 Arrow Function으로 해결할 수 있습니다.

const person = {
  name: 'John',
  age: 30,
  sayHello: function() {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}.`);
    }, 1000);
  }
}

위 코드에서 Arrow Function을 사용하면 this가 person 객체에서 상속되기 때문에, 정상적으로 ‘Hello, my name is John.’이 출력됩니다.

Arrow Function의 장점

Arrow Function은 짧은 함수 표현식에서 특히 유용합니다. 예를 들어, 배열의 요소를 제곱하여 새로운 배열을 만들어내는 코드를 작성해보겠습니다.

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

const squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

위 코드를 Arrow Function을 사용하면 간단하게 변경할 수 있습니다.

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

const squaredNumbers = numbers.map(number => number * number);

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

Arrow Function을 사용하면 함수 내부에 return 문이 필요 없어지고, 코드가 더욱 간결해집니다.

결론

Arrow Function은 간단한 문법과 강력한 기능으로, 자바스크립트 코드를 더욱 깔끔하게 작성할 수 있습니다. 특히 this의 값이 고정되어 헷갈리는 문제를 해결하여 개발자들에게 편의를 제공합니다.

키워드: 자바스크립트 Arrow function