JavaScript의 화살표 함수: 함수를 더 간단하게 작성하는 방법

Source: Dev.to

소개

안녕하세요 독자 여러분 👋, 이 JavaScript 시리즈의 8번째 블로그에 오신 것을 환영합니다.

여행을 위해 가방을 꾸린다고 상상해 보세요. 두 가지 선택지가 있습니다:

때때로 신중한 포장이 필요합니다 (예: 긴 휴가). 다른 때는 그냥 넣고 바로 가고 싶을 때도 있습니다 (예: 짧은 운동 세션).

JavaScript에서도 함수와 비슷한 개념이 있습니다.

• 이전 블로그에서 regular functions에 대해 배웠습니다 – 이것은 신중한 포장과 같습니다: 완벽히 동작하지만 더 많은 코드를 작성해야 합니다.
• Arrow functions는 빠른 포장과 같습니다 – 더 적은 코드로 같은 작업을 수행합니다. 이것은 JavaScript에서 현대적이고 간단한 함수 작성 방법입니다.

화살표 함수란?

화살표 함수는 JavaScript에서 함수를 작성하는 더 짧은 문법입니다. ES6에서 도입된 이후, 다음과 같은 이유로 빠르게 인기를 얻었습니다:

• 작성해야 하는 코드 양을 줄여줍니다
• 코드를 더 깔끔하고 읽기 쉽게 만들어 줍니다
• 몇 가지 특별한 기능을 가지고 있습니다(복잡한 부분은 나중에 다루겠습니다)

화살표 함수를 일반 함수의 익스프레스 버전이라고 생각하면 됩니다 – A 지점에서 B 지점까지 더 빠르게 이동할 수 있게 해 줍니다.

일반 함수 vs 화살표 함수

일반 함수

function greet(name) {
    return "Hello " + name;
}

console.log(greet("Satya")); // Hello Satya

화살표 함수 (동일 결과)

const greet = (name) => {
    return "Hello " + name;
};

console.log(greet("Satya")); // Hello Satya

무엇이 바뀌었나요?

• function 키워드가 제거되었습니다.
• 매개변수 뒤에 화살표 =>가 추가되었습니다.
• 함수가 변수에 저장됩니다 (보통 const 사용).

기본 화살표 함수 구문

전체 화살표 함수 구문

const functionName = (parameter1, parameter2) => {
    // function body
    return result;
};

단계별 분석

일반 함수

function add(x, y) {
    return x + y;
}

화살표 함수

const add = (x, y) => {
    return x + y;
};

변환 과정

1. function이라는 단어를 제거합니다.
2. 매개변수 목록과 함수 본문 사이에 =>를 삽입합니다.
3. 함수를 변수에 저장합니다 (const add).

하나의 매개변수를 가진 화살표 함수

화살표 함수에 매개변수가 정확히 하나만 있을 경우, 괄호 ()는 선택 사항입니다.

괄호 사용

const double = (num) => {
    return num * 2;
};

console.log(double(5)); // 10

괄호 없이 (짧게)

const double = num => {
    return num * 2;
};

console.log(double(5)); // 10

두 버전 모두 동일하게 작동합니다. 많은 개발자들이 일관성을 위해 괄호를 유지하지만, 괄호를 생략할 수 있다는 것을 알면 다른 사람의 코드를 읽을 때 도움이 됩니다.

Arrow Functions with Multiple Parameters

여러 여러 개의 매개변수(또는 0개의 매개변수)를 사용할 때는 괄호를 반드시 사용해야 합니다.

Two Parameters

const add = (x, y) => {
    return x + y;
};

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

Zero Parameters

const sayHello = () => {
    return "Hello World";
};

console.log(sayHello()); // Hello World

Source: …

암시적 반환 vs 명시적 반환

명시적 반환

return 키워드를 직접 작성합니다:

const add = (x, y) => {
    return x + y;
};

암시적 반환

함수 본문이 단일 표현식으로만 이루어진 경우, 중괄호와 return 키워드를 생략할 수 있습니다. 표현식의 값이 자동으로 반환됩니다.

const add = (x, y) => x + y;

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

return도 없고, 중괄호도 없고—그냥 표현식만 남습니다.

암시적 반환의 추가 예시

예시 1 – 숫자 두 배 만들기

const double = num => num * 2;

console.log(double(4)); // 8

예시 2 – 인사하기

const greet = name => "Hello " + name;

console.log(greet("Satya")); // Hello Satya

예시 3 – 숫자가 짝수인지 확인하기

const isEven = num => num % 2 === 0;

console.log(isEven(4)); // true
console.log(isEven(5)); // false

언제 어떤 것을 사용할까?

• Explicit return (중괄호와 return 사용) → 함수에 여러 줄의 코드가 있을 때 사용합니다.
• Implicit return (중괄호 없이) → 함수가 값을 반환하는 한 줄일 때 사용합니다.

Happy coding! 🚀

기본 차이점: 화살표 함수 vs 일반 함수

1. 문법 길이

일반 함수

function multiply(a, b) {
    return a * b;
}

화살표 함수

const multiply = (a, b) => a * b;

화살표 함수는 더 짧고 깔끔합니다.

2. 함수 키워드

• 일반 함수는 function 키워드를 사용합니다.
• 화살표 함수는 화살표 =>를 사용합니다.

3. 암시적 반환

• 일반 함수는 무언가를 반환하려면 항상 return 키워드가 필요합니다.
• 화살표 함수는 단일 표현식으로 구성될 때 return 없이 암시적으로 반환할 수 있습니다.

4. 변수로서의 사용

// Normal function – function declaration
function square1(x) {
    return x * x;
}

// Normal function – stored in a variable
const square2 = function (x) {
    return x * x;
};

// Arrow function – always stored in a variable
const square3 = x => x * x;

피해야 할 일반적인 실수

1. 매개변수가 없을 때 괄호를 빼먹기

// Wrong – Syntax Error
const greet = => "Hello";

// Correct
const greet = () => "Hello";

2. return 없이 중괄호 사용하기

// Wrong – returns undefined
const add = (x, y) => { x + y };

// Correct – explicit return needed with curly braces
const add = (x, y) => { return x + y; };

// Correct – no curly braces, implicit return
const add = (x, y) => x + y;

기억하세요: {}는 return이 필요함을 의미합니다. {}가 없으면 암시적 반환입니다.

3. 여러 줄에 암시적 반환을 사용하려고 시도하기

// Wrong – cannot have multiple lines without {}
const process = num => 
    let squared = num * num
    "Result: " + squared;   // This won't work

// Correct
const process = num => {
    let squared = num * num;
    return "Result: " + squared;
};

4. 화살표 함수를 변수에 저장하는 것을 잊기

// Wrong – arrow functions need to be assigned
(x, y) => x + y;   // Does nothing

// Correct
const add = (x, y) => x + y;

화살표 함수를 사용해야 할 때

화살표 함수는 다음과 같은 경우에 적합합니다:

• 짧고 간단한 함수로, 한 가지 일을 할 때.
• 콜백 함수 (다른 함수에 전달되는 함수, 예: map, filter, forEach).
• 코드를 더 깔끔하고 가독성 있게 만들고 싶을 때.

// Perfect use case: Array methods
let numbers = [1, 2, 3, 4, 5];

let squares = numbers.map(n => n * n);
let evens   = numbers.filter(n => n % 2 === 0);
let sum     = numbers.reduce((total, n) => total + n, 0);

console.log(squares); // [1, 4, 9, 16, 25]
console.log(evens);   // [2, 4]
console.log(sum);     // 15

결론

• 화살표 함수는 JavaScript에서 함수를 더 짧게 작성하는 방법입니다.
• 기본 구문: const functionName = (params) => { body }.
• 한 개 매개변수일 경우, 괄호는 선택 사항입니다: num => num * 2.
• 여러 개 또는 매개변수가 없을 때는 괄호가 필요합니다: (x, y) => x + y.
• 암시적 반환은 {}를 생략할 때 발생합니다 – 표현식이 자동으로 반환됩니다.
• 명시적 반환은 {}와 return 키워드를 사용합니다.

• 화살표 함수는 짧은 함수와 콜백에 적합합니다.
• 보일러플레이트 코드를 줄이고 JavaScript를 더 현대적이고 가독성 있게 만듭니다.

화살표 함수는 이제 현대 JavaScript에서 함수를 작성하는 표준 방식입니다. 익숙해지면 어디서든 사용하게 될 것입니다.

이 블로그가 마음에 들었길 바랍니다. 오류가 있거나 개선할 점이 있으면 알려 주세요. LinkedIn과 X에서 저를 찾을 수 있습니다; 거기에 더 많은 글을 올립니다.