← 목록

ES6 화살표 함수의 활용 🎯

작성: 2024년 05월 30일읽기: 약 2분

자바스크립트를 배우는 여러분, ES6의 화살표 함수에 대해 들어보셨나요? 이 기능은 코드를 더 간결하고 이해하기 쉽게 만들어 줍니다. 오늘은 화살표 함수가 무엇이며, 어떻게 사용하는지 알아보겠습니다.

화살표 함수란?

화살표 함수는 기존의 함수 표현식을 더 짧게 쓸 수 있는 새로운 방식입니다. function 키워드 없이도 함수를 만들 수 있죠. 이는 코드를 더욱 깔끔하게 만들어 줍니다.

기본 사용법

화살표 함수는 () => 기호를 사용합니다. 간단한 예제를 통해 살펴보겠습니다.

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

위 코드에서 볼 수 있듯이, add 함수는 두 개의 매개변수를 받아 그 합을 반환합니다. function 키워드를 사용하지 않고도 함수를 선언했네요!

매개변수가 하나뿐인 경우

매개변수가 하나만 있는 경우, 괄호를 생략할 수 있습니다.

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

square 함수는 하나의 매개변수를 받아 그 제곱을 반환합니다. 간단하죠?

함수 본문이 여러 줄인 경우

함수의 본문이 한 줄보다 많은 코드를 포함해야 한다면, 중괄호 {}를 사용하고 return 문을 명시적으로 써야 합니다.

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

화살표 함수의 장점

화살표 함수는 단순히 문법을 간결하게 만드는 것 이상의 이점을 제공합니다. this 키워드의 바인딩 방식이 다르기 때문에, 특히 이벤트 핸들러나 메서드에서 유용하게 사용됩니다.

결론

ES6의 화살표 함수는 자바스크립트 코드를 더욱 간결하고 읽기 쉽게 만들어 줍니다. 기존 함수 표현식보다 짧은 문법으로 함수를 선언할 수 있으며, this 키워드와 관련된 편리한 특징도 있습니다. 화살표 함수를 사용하여 코드를 더 깔끔하고 효율적으로 만들어 보세요!