자바스크립트 화살표 함수

JavaScript에서 화살표 기능이란 무엇입니까?
화살표 함수는 JavaScript에서 함수를 작성하는 또 다른 방법입니다. 이 기사에서 논의할 전통적인 기능에 비해 몇 가지 제한 사항이 있습니다.

// Traditional function declaration
function myFunc(myParam) {
  return myParam + 1;
}

// Arrow function declaration
const myFunc = (myParam) => {
  return myParam + 1;
}

화살표 기능은 종종 크게 단축될 수 있습니다.

// If there is one parameter, then you do not need to include
// the parenthesis. 
const myFunc = myParam => { return myParam + 1; }

// If the functions contents can fit on one line, then you can
// remove the 'return' keyword and '{}'. 
// In this case, the 'return' is implied.
const myFunc = myParam => myParam + 1;

기본 제공 배열 메서드와 함께 화살표 함수를 사용하는 것이 일반적입니다.

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

const arrMap = arr.map(v => v + 1);

const arrFiltered = arr.filter(v => v > 3);

arr.forEach(v => console.log(v));

화살표 기능의 한계.

화살표 함수에는 this 에 대한 자체 바인딩이 없습니다. 결과적으로 일반적으로 개체에서 methods로 사용하고 싶지 않을 것입니다. 몇 가지 더 알아야 할 사항:

arguments 또는 super에 대한 자체 바인딩이 없습니다.

클래스 내에서 constructors로 사용할 수 없습니다.

키워드가 call , apply 및 bind 인 경우 예상대로 작동하지 않을 수 있습니다.

화살표 함수에는 this 의 자체 바인딩이 없기 때문에 개체의 다른 특성이나 메서드를 참조할 수 없습니다. this 화살표 함수에서 항상 전역 범위를 참조합니다.

const obj = {
  value: 1,
  myFunc1: function () {
    console.log(this.value, this);
  },
  myFunc2: () => {
    console.log(this.value, this);
  },
};

obj.myFunc1(); // 1, obj{...}
obj.myFunc2(); // undefined, Window{...} or the Global object

자세한 내용은 MDN 설명서MDN Docs를 참조하세요.

질문이나 피드백이 있으면 댓글을 남겨주세요.