ES6 Arrow Functions의 기본 사용법과 예제 코드

ES6에서 소개된 화살표 함수(Arrow Functions)는 JavaScript에서 함수를 더 간결하게 작성할 수 있는 방법을 제공합니다. 특히 웹 개발을 배우는 주니어 개발자들에게 이해하기 쉽고 사용하기 편리한 기능입니다. 이 글에서는 화살표 함수의 기본 사용법과 몇 가지 예제 코드를 함께 살펴보겠습니다.

화살표 함수란?

화살표 함수는 기존의 function 키워드 대신 => 기호를 사용하여 더 짧은 구문으로 함수를 선언할 수 있습니다. 이는 코드를 더 깔끔하고 읽기 쉽게 만들어 줍니다.

기본 문법

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

예제 1: 파라미터가 없는 화살표 함수

const sayHello = () => {
  console.log("Hello!");
};

sayHello(); // 출력: Hello!

이 예제에서 sayHello 함수는 파라미터가 없으며, 간단히 "Hello!"를 콘솔에 출력합니다.

예제 2: 하나의 파라미터를 가진 화살표 함수

const greet = name => {
  console.log(`Hello, ${name}!`);
};

greet("Alice"); // 출력: Hello, Alice!

하나의 파라미터를 받는 경우, 괄호(())를 생략할 수 있습니다.

예제 3: 반환값이 있는 화살표 함수

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

예제 4: 객체 리터럴 반환하기

화살표 함수에서 객체 리터럴을 반환할 때는 객체를 괄호(())로 감싸야 합니다.

const createPerson = (name, age) => ({name: name, age: age});

console.log(createPerson("Alice", 30)); // 출력: { name: 'Alice', age: 30 }

화살표 함수는 JavaScript에서 함수를 작성하는 더 간결하고 효율적인 방법을 제공합니다. 이 글에서 살펴본 기본 사용법과 예제들을 통해 화살표 함수에 대한 이해를 높이고, 자신의 프로젝트에 적용해 보세요.