Categories: JavaScript

JavaScript 자바스크립트 화살표 함수(Arrow Function) 사용법

javascript

자바스크립트 화살표 함수란?

자바스크립트 화살표 함수는 ES6에서 도입된 새로운 함수 선언 방식 중 하나입니다. 화살표 함수는 기존의 함수 표현식보다 간결하고 가독성이 뛰어나며, 함수 스코프와 this 바인딩에 대한 독특한 특징을 가지고 있습니다.

화살표 함수 장단점

화살표 함수의 장점

간결한 문법: 화살표 함수는 함수의 선언과 반환을 간결하게 만들어줍니다. 특히 단일 표현식의 경우 중괄호와 return키워드를 생략할 수 있어 코드를 간소화합니다.
가독성 향상: 간결한 문법으로 인해 코드의 가독성이 향상됩니다. 특히 간단한 함수나 콜백 함수의 경우, 화살표 함수를 사용하면 코드를 더 쉽게 이해할 수 있습니다.
this 바인딩: 화살표 함수는 자신만의 this를 생성하지 않고, 상위 스코프의 this를 그대로 사용합니다. 이로써 this 관련 문제를 해결하고 예측 가능한 동작을 제공합니다.
짧은 함수 작성 용이성: 한 줄짜리 함수나 간단한 콜백 함수를 작성할 때, 중괄호와 return을 생략할 수 있어 편리하게 코드를 작성할 수 있습니다.

화살표 함수의 단점

메소드로의 사용 제한: 화살표 함수는 생성자 함수로 사용할 수 없고, 프로토타입 메소드로도 사용할 수 없습니다. 따라서 메소드로서의 사용이 필요한 경우에는 일반 함수 표현식을 사용해야 합니다.
가독성 감소 가능성: 화살표 함수를 과용하면 가독성이 감소할 수 있습니다. 특히 복잡한 로직이 있는 함수의 경우, 간결함이 가독성을 떨어뜨릴 수 있습니다.
디버깅 어려움: 일반 함수 표현식과는 달리, 화살표 함수는 이름이 없는 익명 함수로 정의되기 때문에 디버깅 시 함수의 이름이 나타나지 않을 수 있습니다.
this 바인딩의 한계: 상위 스코프의 this를 그대로 사용하는 특성은 항상 이점이 되지 않을 수 있습니다. 때때로 동적인 this가 필요한 경우에는 일반 함수 표현식을 고려해야 할 수 있습니다.

화살표 함수 예제

기본 구문

JavaScript

const add = (a, b) => {
  return a + b;
};

JavaScript

여기서 (a, b) =>가 화살표 함수의 시작 부분이며, 함수의 내용은 중괄호{}로 감싸져 있습니다. 위의 예제는 두 개의 매개변수를 받아서 더한 값을 반환하는 함수입니다.

기본 예제

JavaScript

const numbers = [1, 2, 3, 4, 5];

// 일반적인 함수 표현식
const squared1 = numbers.map(function (x) {
  return x * x;
});

// 화살표 함수
const squared2 = numbers.map(x => x * x);

console.log(squared1); // [1, 4, 9, 16, 25]
console.log(squared2); // [1, 4, 9, 16, 25]

JavaScript

화살표 함수를 사용해 배열의 각 요소를 제곱하는 예제입니다.

this 사용 예제

화살표 함수의 this 사용 예제를 통해 어떻게 동작하는지 자세히 알아보겠습니다.

JavaScript

const person = {
  name: "John",
  age: 30,

  // 일반 함수 표현식
  greetRegular: function() {
    console.log("안녕하세요, 저는 " + this.name + "이고, " + this.age + "살입니다.");
  },

  // 화살표 함수
  greetArrow: () => {
    console.log("안녕하세요, 저는 " + this.name + "이고, " + this.age + "살입니다.");
  },
};

// 객체 메소드 호출
person.greetRegular(); // 안녕하세요, 저는 John이고, 30살입니다.
person.greetArrow();   // 안녕하세요, 저는 undefined이고, undefined살입니다.

JavaScript

설명

greetRegular은 일반 함수 표현식으로 정의되었습니다. 함수 내부에서 this는 호출 시점에 동적으로 결정되며, 해당 객체를 가리킵니다.
greetArrow는 화살표 함수로 정의되었습니다. 화살표 함수는 자체적으로 this를 생성하지 않고, 상위 스코프의 this를 그대로 사용합니다. 따라서 greetArrow 함수 내에서의 this는 person 객체가 아니라 상위 스코프의 this를 참조하므로, undefined가 출력됩니다.

추가 설명

greetRegular의 경우, 함수가 호출되는 컨텍스트에 따라 this가 동적으로 바인딩되기 때문에 person 객체를 가리킵니다. 함수를 객체의 메소드로 사용할 때, 일반적인 함수 표현식을 사용하는 것이 적합합니다.
greetArrow의 경우, 화살표 함수는 상위 스코프의 this를 그대로 사용하므로 객체 메소드로는 사용하기에 적합하지 않습니다. 화살표 함수는 주로 간단한 콜백 함수나 함수 표현식을 간결하게 작성할 때 활용됩니다.

this 사용 예제2

JavaScript

function Counter() {
  this.count = 0;

  // 일반 함수 표현식
  this.incrementRegular = function() {
    this.count++;
    console.log("Regular Increment:", this.count);
  };

  // 화살표 함수
  this.incrementArrow = () => {
    this.count++;
    console.log("Arrow Increment:", this.count);
  };
}

const counter = new Counter();

// Regular Increment 호출
counter.incrementRegular(); // Regular Increment: 1

// Arrow Increment 호출
counter.incrementArrow(); // Arrow Increment: 2

JavaScript

설명

incrementRegular은 일반 함수 표현식으로 정의되었습니다. 이 함수 내에서 this는 호출 시점에 동적으로 결정되며, 호출한 객체에 바인딩됩니다. 따라서 this.count는 counter 객체의 count를 가리킵니다.
incrementArrow는 화살표 함수로 정의되었습니다. 화살표 함수는 자체적으로 this를 생성하지 않고, 상위 스코프의 this를 그대로 사용합니다. 따라서 this.count는 Counter 객체의 count를 가리킵니다.

결론

화살표 함수는 간결한 문법과 특별한 this 바인딩 규칙으로 인해 많은 상황에서 효율적으로 사용됩니다. 그러나 사용하는 상황과 개발 스타일에 따라서 적절한 사용법을 선택해야 합니다. 코드의 가독성과 유지보수성을 고려하여 일반 함수 표현식과 함께 적절하게 사용하는 것이 중요합니다.

suover