JavaScript 화살표 함수 완벽 가이드: 기초 문법부터 실전 활용까지

JavaScript 화살표 함수(arrow function)는 함수를 선언하는 방식 중 하나입니다. 화살표 함수를 사용하면 더 간결한 문법으로 효율적으로 JavaScript 함수를 작성할 수 있으며, 단일 표현식에 대해서는 암시적 반환(implicit return)도 지원합니다.

함수(function)는 특정 동작을 수행하거나 값을 반환하는 코드 블록입니다. 개발자는 함수를 활용해 여러 번 재사용할 수 있는 코드를 만들며, 이를 통해 프로그램의 코드 줄 수를 줄이고 효율성을 높일 수 있습니다.

전통적으로 JavaScript에서 함수를 선언하는 유일한 방법은 function 키워드를 사용하는 것이었습니다. 하지만 ES6부터 화살표 함수가 도입되면서 더 효율적으로 함수를 정의할 수 있게 되었습니다.

이 가이드에서는 JavaScript 함수의 기본 개념을 살펴보고, 화살표 함수를 사용하는 방법을 단계별로 알아봅니다. 또한 화살표 함수를 활용하면 좋은 상황과 실제 예제도 함께 다룹니다.

JavaScript 함수 기본 복습

JavaScript에서 함수를 선언하는 가장 일반적인 방법은 function 키워드를 사용하는 것입니다. function 키워드를 사용하면 코드 전체에서 참조할 수 있는 함수를 선언할 수 있습니다.

JavaScript 함수의 기본 문법은 다음과 같습니다:

function nameOfTheFunction() {
   // 코드
}

함수는 여러 부분으로 구성됩니다. 먼저 function 키워드로 함수를 선언한다는 사실을 프로그램에 알립니다. 그다음 함수의 이름을 지정하는데, 위 예제에서는 nameOfTheFunction입니다. 함수 이름은 변수와 동일한 명명 규칙을 따르므로 캐멀 케이스(camelCase)로 작성하는 것이 좋습니다.

함수 이름 뒤에는 매개변수(parameter)를 받을 수 있는 소괄호가 오고, 실행할 코드는 중괄호({}) 안에 작성됩니다.

예제를 통해 JavaScript에서 함수가 어떻게 동작하는지 살펴보겠습니다. 다음 코드는 아침 인사 메시지를 콘솔에 출력하는 wakeUpRoutine이라는 함수를 만듭니다:

function wakeUpRoutine() {
   console.log("좋은 아침입니다! 오늘은 멋진 하루가 될 거예요.");
}

지금 이 상태로 프로그램을 실행하면 아무 일도 일어나지 않습니다. 함수가 선언되기만 했을 뿐, 아직 호출하지 않았기 때문입니다. 함수를 실행하려면 함수 이름을 호출하면 됩니다:

wakeUpRoutine();

프로그램은 다음과 같이 출력합니다:

좋은 아침입니다! 오늘은 멋진 하루가 될 거예요.

이렇게 선언한 함수는 원하는 위치에서 몇 번이든 호출하여 재사용할 수 있습니다.

JavaScript 함수는 매개변수를 받을 수도 있습니다. 매개변수는 함수에 전달되는 입력값으로, 함수 내부에서 지역 변수처럼 동작합니다. 예를 들어 아침 인사 메시지에 이름을 포함하고 싶다면 다음과 같이 코드를 작성할 수 있습니다:

function wakeUpRoutine(name) {
   console.log(`좋은 아침입니다, ${name}! 오늘은 멋진 하루가 될 거예요.`);
}

위 코드에서 name 매개변수의 값을 미리 정의하지 않았습니다. 함수를 호출할 때 값을 할당하기 때문입니다. 이름이 Peter라고 가정해 보겠습니다. 메시지에 이름을 함께 출력하려면 다음과 같이 호출합니다:

wakeUpRoutine("Peter");

프로그램은 다음과 같이 출력합니다:

좋은 아침입니다, Peter! 오늘은 멋진 하루가 될 거예요.

name 매개변수에 전달된 값(여기서는 Peter)이 wakeUpRoutine 함수로 넘어가고, 함수 내부에서는 name 변수를 통해 해당 이름을 참조하게 됩니다.

JavaScript 화살표 함수란?

JavaScript 화살표 함수는 '팻 애로우(fat arrow)' 함수라고도 불리며, ES6에서 도입된 가장 인기 있는 기능 중 하나입니다. 이 함수 표현식을 사용하면 더 간결한 문법으로 효율적으로 함수를 작성할 수 있습니다.

JavaScript 화살표 함수의 문법은 다음과 같습니다:

functionName = (parameters) => {
   // 코드
}

앞서 살펴본 아침 인사 예제를 화살표 함수로 바꿔 보겠습니다. 기존 코드에서는 반드시 "function" 키워드를 사용해야 했지만, 화살표 함수에서는 => 문법을 대신 사용합니다. 아침 인사 함수를 화살표 함수로 작성하면 다음과 같습니다:

wakeUpRoutine = (name) => {
   console.log(`좋은 아침입니다, ${name}! 오늘은 멋진 하루가 될 거예요.`);
}

화살표 함수를 호출하는 방법은 기존 함수와 동일합니다:

wakeUpRoutine("Sophia")

함수는 다음과 같이 출력합니다:

좋은 아침입니다, Sophia! 오늘은 멋진 하루가 될 거예요.

화살표 함수의 구조는 전통적인 함수와 매우 유사합니다. 차이점은 function 키워드를 사용하지 않고 대신 => 화살표를 사용한다는 점입니다.

또한 화살표 함수에서는 return 키워드 없이도 값을 반환할 수 있어 코드가 더욱 간결해집니다.

암시적 반환(Implicit Return)

화살표 함수는 함수 본문이 단일 표현식일 때 특히 유용합니다. 함수 본문이 한 줄이라면 중괄호를 제거하고 암시적 반환을 사용해 함수를 더 간단하게 만들 수 있습니다. 이는 전통적인 함수와 다른 점으로, 전통적인 함수에서는 코드 줄 수가 함수 정의 방식에 영향을 주지 않았습니다.

한 줄짜리 화살표 함수의 예는 다음과 같습니다:

const multiplyNumbers = (a, b) => a * b;
multiplyNumbers(2, 2);

이 코드는 4를 반환합니다. 두 숫자가 곱셈 처리된 것을 확인할 수 있습니다.

암시적 반환 문법은 위 예제처럼 값을 반환할 때 주로 사용됩니다. 하지만 값을 반환하지 않는 코드를 실행할 때도 활용할 수 있습니다. 암시적 문법으로 아침 인사 함수를 다시 작성하면 다음과 같습니다:

const wakeUpRoutine = name => console.log(`좋은 아침입니다, ${name}! 오늘은 멋진 하루가 될 거예요.`);
wakeUpRoutine("Ava");

이 코드는 다음과 같이 출력합니다:

좋은 아침입니다, Ava! 오늘은 멋진 하루가 될 거예요.

괄호 생략하기

JavaScript 화살표 함수에서 매개변수를 감싸는 괄호는 매개변수가 없거나 두 개 이상일 때만 필요합니다. 따라서 매개변수가 하나뿐이라면 다음과 같이 괄호를 생략할 수 있습니다:

wakeUpRoutine = name => {
   console.log(`좋은 아침입니다, ${name}! 오늘은 멋진 하루가 될 거예요.`);
}

name 매개변수가 더 이상 괄호로 감싸져 있지 않은 것을 확인할 수 있습니다.

map, filter, reduce와 함께 사용하는 화살표 함수

화살표 함수는 JavaScript 배열 메서드인 map, filter, reduce와 함께 자주 사용됩니다. 화살표 함수를 활용하면 배열을 단 한 줄의 코드로 변환할 수 있기 때문입니다.

예를 들어 학생 성적 배열이 있다고 가정해 보겠습니다. 최근 시험에서 특정 문제에 오류가 있어 어떤 학생도 만점인 30점을 받을 수 없었기 때문에, 모든 성적에 1점씩을 더해 주려고 합니다. 시험 점수를 수정하는 데 사용할 수 있는 화살표 함수의 예는 다음과 같습니다:

const grades = [25, 26, 22, 28];
const fixStudentGrades = grades.map(score => score + 1);
console.log(fixStudentGrades);

이 코드는 다음을 출력합니다:

[26, 27, 23, 29]

코드가 grades 배열의 모든 성적에 1을 더한 것을 확인할 수 있습니다.

마무리

화살표 함수는 ES6 JavaScript에서 도입된 기능으로, 더 효율적이고 간결한 코드를 작성할 수 있게 해줍니다. 화살표 함수를 사용하면 function 문 대신 => 화살표를 사용할 수 있으며, 특정 상황에서는 한 줄짜리 함수도 손쉽게 작성할 수 있습니다.

이 튜토리얼에서는 JavaScript에서 함수가 동작하는 기본 원리를 살펴보고, 화살표 함수를 작성하는 방법을 배웠습니다. 또한 암시적 반환, 괄호 생략, 그리고 map, filter, reduce와 함께 화살표 함수를 사용하는 방법도 알아보았습니다.

이제 여러분도 전문가처럼 화살표 함수를 작성할 준비가 되었습니다!