ES6의 화살표 함수 활용하기 ➡️

작성: 2025년 11월 05일읽기: 약 3분

ES6에서 소개된 화살표 함수는 자바스크립트에서 함수를 더 간결하고, 더 직관적으로 작성할 수 있게 해줍니다. 특히 웹 개발을 배우는 주니어 개발자들에게는 코드를 더 쉽게 이해하고 사용할 수 있는 강력한 도구입니다. 화살표 함수의 기본 구조부터 시작해 보겠습니다.

화살표 함수의 기본

화살표 함수는 function 키워드 없이 함수를 선언할 수 있게 해주며, => 기호를 사용합니다. 가장 간단한 형태는 다음과 같습니다:

const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

이 예제에서 add는 두 숫자를 받아 그 합을 반환하는 화살표 함수입니다. 기존의 함수 선언 방식에 비해 훨씬 간결하죠?

매개변수가 하나뿐인 경우, 괄호를 생략할 수 있습니다. 이는 코드를 더욱 간결하게 만들어 줍니다:

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

함수의 몸체가 단 한 줄로 이루어져 있고, 그 한 줄이 반환 값인 경우, 중괄호와 return 키워드를 생략할 수 있습니다. 위의 예제들이 이에 해당합니다.

함수의 몸체가 여러 줄로 이루어져 있는 경우, 중괄호를 사용해야 하며, 반환 값을 위해서는 return 키워드를 명시적으로 사용해야 합니다:

const complexFunction = (a, b) => {
  const result = a + b;
  return result * 2;
};
console.log(complexFunction(2, 3)); // 10

간결성: 코드가 더 짧고 읽기 쉬워집니다.
this 바인딩: 화살표 함수는 자신만의 this를 생성하지 않습니다. 따라서, 외부 함수에서 this를 그대로 사용할 수 있어서 특히 이벤트 핸들러나 클래스 메서드에서 유용합니다.

화살표 함수는 자바스크립트에서 함수를 작성하는 더 간결하고 효율적인 방법을 제공합니다. 주니어 개발자 여러분, 이제 여러분도 화살표 함수를 활용하여 코드를 더 깔끔하고 효율적으로 작성해 보세요!