JavaScript의 화살표 함수와 일반 함수 비교. 어느 것을 사용할 것인가?

JavaScript는 함수를 정의하는 두 가지 주요 방법, 즉 화살표 함수와 일반 함수를 제공합니다. 언뜻 보기에는 유사해 보일 수 있지만 코드 실행 방식과 구조화 방식에 영향을 미칠 수 있는 몇 가지 주요 차이점이 있습니다. 각 유형을 언제 사용해야 하는지 더 잘 이해할 수 있도록 이러한 차이점을 분석해 보겠습니다.

구문 차이

화살표 함수는 더 짧으며 => 상징. 일반 함수와 비교하면 다음과 같습니다.

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

화살표 함수를 사용하면 단일 표현식을 반환하는 경우 return 키워드를 건너뛸 수 있습니다. 이로 인해 화살표 기능은 더 짧고 간단한 기능으로 널리 사용됩니다.

이 바인딩

일반 함수에서는 함수를 호출하는 객체를 말합니다. 그러나 화살표 함수에는 자체 this 컨텍스트가 없습니다. 대신, 정의된 주변 코드에서 이를 상속받습니다.

다음은 이러한 차이가 행동에 어떤 영향을 미치는지 보여주는 예입니다.

const object = {
  name: 'JavaScript',
  regularFunction: function() {
    console.log(this.name); // 'JavaScript'
  },
  arrowFunction: () => {
    console.log(this.name); // undefined
  }
};

obj.regularFunction(); // 'JavaScript'
obj.arrowFunction();   // undefined

이 기능은 이벤트 리스너에 함수를 전달할 때 유용할 수 있습니다. 다음을 살펴보세요.

document.querySelector('button').addEventListener('click', function() {
  console.log(this); // refers to the button element!
});

인수 객체

일반 함수는 함수에 전달된 모든 인수를 보유하는 인수 객체에 액세스할 수 있습니다. 화살표 함수에는 이것이 없습니다. 대신 나머지 매개변수 ...args를 사용합니다.

// regular function with arguments
function sum() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

// arrow function with rest parameters
const sum = (...args) => args.reduce((a, b) => a + b);

콜백에서의 사용법

화살표 함수는 특히 콜백이 필요한 작업(예: .map() 및 .filter()과 같은 배열 메서드 또는 Promise)을 처리할 때 코드를 단순화할 수 있습니다.

// using arrow functions in array methods
const numbers = [1, 2, 3];
const squares = numbers.map(number => number * n); // [1, 4, 9]

화살표 함수와 일반 함수를 사용하는 경우

일반적으로 화살표 기능은 다음과 같은 경우에 적합합니다.

• 배열 메서드나 콜백과 같은 짧고 간결한 함수
• 클래스 메서드나 클로저처럼 일관성을 유지해야 하는 상황

일반 함수는 다음과 같은 경우에 유용합니다.

• 객체 메서드나 이벤트 리스너와 같은 특정 바인딩이 필요합니다
• 나머지 매개변수를 정의하지 않고 인수 객체를 사용하고 싶습니다

여기서 흥미로운 점을 살펴보겠습니다. 보시다시피, 차이점은 매우 미묘합니다. 대부분의 경우 코드베이스에서 this 또는 인수를 과도하게 사용하지 않는 한(가능성 없음) 어느 것을 선택하는지는 중요하지 않습니다.

결론은 원하는 것을 선택하고 프로젝트 전반에 걸쳐 일관성을 유지하라는 것입니다.

이 접근 방식에 동의하시나요?

위 내용은 JavaScript의 화살표 함수와 일반 함수 비교. 어느 것을 사용할 것인가?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!