ES6의 화살표 함수와 콜백 함수 이해하기

웹 개발을 배우는 여정에서 자바스크립트는 피할 수 없는 중요한 부분입니다. 특히 ES6에서 소개된 화살표 함수는 코드를 더 간결하고 이해하기 쉽게 만들어줍니다. 오늘은 화살표 함수와 콜백 함수에 대해 알아보겠습니다.

화살표 함수란?

화살표 함수는 기존의 함수 표현식을 더 짧게 쓸 수 있는 새로운 문법입니다. function 키워드 없이도 함수를 선언할 수 있죠. 화살표(=>)가 사용되어, 이를 화살표 함수라고 부릅니다.

기본 문법

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

예시: 화살표 함수 사용하기

const add = (a, b) => {
  return a + b;
}

console.log(add(5, 3)); // 8

화살표 함수는 반환할 값이 한 줄이라면 중괄호({})와 return 키워드도 생략할 수 있습니다.

const add = (a, b) => a + b;

console.log(add(10, 5)); // 15

콜백 함수와 함께 화살표 함수 사용하기

콜백 함수는 다른 함수의 인자로 전달되는 함수입니다. 이를 통해 비동기 처리, 이벤트 처리 등에서 많이 사용됩니다. 화살표 함수를 콜백 함수로 사용하면 코드가 더욱 깔끔해집니다.

예시: 콜백 함수로 화살표 함수 사용하기

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

const doubledNumbers = numbers.map((number) => number * 2);

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

위 예시에서 map 메소드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 결과를 새로운 배열로 반환합니다. 여기서 화살표 함수가 콜백 함수로 사용되었습니다.

정리

화살표 함수는 자바스크립트에서 함수를 더 간결하게 작성할 수 있게 해주며, 특히 콜백 함수와 함께 사용할 때 그 장점이 더욱 돋보입니다. ES6의 이러한 기능을 활용하면 코드의 가독성을 크게 향상시킬 수 있습니다.

웹 개발을 배우는 여정에서 이러한 최신 기능들을 익히는 것은 매우 중요합니다. 오늘 배운 내용을 실습해보면서 화살표 함수와 콜백 함수에 더 익숙해지시길 바랍니다. Happy coding!