ES6 화살표 함수와 콜백 함수의 활용 🎯

작성: 2024년 07월 25일읽기: 약 2분

JavaScript ES6는 개발자들에게 많은 새로운 기능을 제공합니다. 그 중에서도 화살표 함수는 가독성을 높이고 코드를 간결하게 만드는 데 큰 도움을 줍니다. 오늘은 화살표 함수와 콜백 함수를 어떻게 활용할 수 있는지 알아보겠습니다.

화살표 함수란?

화살표 함수는 function 키워드 대신 화살표(=>)를 사용하여 보다 간결한 방법으로 함수를 선언할 수 있습니다. 이는 특히 콜백 함수를 다룰 때 코드를 더욱 깔끔하게 만들어 줍니다.

const functionName = (parameters) => {
  // 함수 본문
}

const greet = (name) => {
  return `Hello, ${name}!`;
}

console.log(greet('World')); // "Hello, World!"

콜백 함수는 다른 함수의 인자로 전달되는 함수입니다. 이를 화살표 함수와 함께 사용하면, 코드가 더욱 간결하고 이해하기 쉬워집니다.

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

console.log(doubled); // [2, 4, 6, 8, 10]

위 예제에서 map 메소드는 배열의 각 요소에 대해 주어진 함수를 호출하고, 결과를 새로운 배열로 반환합니다. 여기서 화살표 함수를 사용하여 각 요소를 두 배로 만드는 콜백 함수를 간단히 정의했습니다.

간결성: function 키워드, 중괄호, return 문 등을 생략할 수 있어 코드가 더 간결해집니다.
this 바인딩: 화살표 함수는 자신만의 this를 가지지 않고, 외부 함수의 this 값을 상속받습니다. 이는 특히 이벤트 핸들러나 콜백 함수에서 유용하게 사용됩니다.

화살표 함수는 JavaScript ES6에서 소개된 강력한 기능 중 하나입니다. 콜백 함수와 함께 사용하면 코드를 더욱 간결하고 이해하기 쉽게 만들 수 있습니다. 이번 기회에 화살표 함수를 적극적으로 활용해 보세요!