JavaScript: 화살표 함수

소개

화살표 함수는 JavaScript에서 함수를 만드는 대체 형식입니다. ES6에서 도입되었습니다.

화살표 기호arrow functions로 생성되기 때문에 이름이 => 입니다.

화살표 함수의 주요 이점은 대부분의 경우 코드 가독성을 높이는 짧은 구문입니다. 다른 함수의 인수인 함수를 빠르게 만들어야 할 때 매우 유용합니다.

대부분의 경우 일반 함수와 상호 교환하여 사용할 수 있지만 몇 가지 차이점을 기억해야 합니다.

화살표 함수는 익명 함수입니다. 그것은 그들이 이름을 가질 수 없다는 것을 의미합니다. 변수에 할당하여 이를 우회하고 이 변수 ​​이름으로 호출할 수 있습니다.

일반 함수에서 화살표 함수로의 간단한 변환을 살펴보겠습니다.

function add(x, y) {
  return x + y;
}

// we assign an anonymous function to a variable
const add = function (x, y) {
  return x + y;
};

// we remove "function" keyword and add an arrow after arguments
const add = (x, y) => {
  return x + y;
};

화살표 함수를 사용하면 더 짧은 구문을 사용할 수 있습니다.

// returns x + y
// the same function in one line
const add = (x, y) => x + y;

// you can skip parentheses when using only one argument
const add1 = (x) => x + 1;

함수에 반환만 포함된 경우 짧은 형식의 화살표 함수를 사용할 수 있습니다.
{ }를 생략할 수 있으며 return 키워드와 => 뒤의 표현식이 이 함수에서 반환되는 값이 됩니다.

객체를 반환할 때 추가( )에 대해 기억해야 합니다.

// this won't work
const createUser = (id, name) => {
    id: id,
    name: name
}

개체를 반환하도록 하려면 괄호를 추가해야 합니다.

const createUser = (id, name) => ({
  id: id,
  name: name,
});

짧은 형식을 사용하여 코드 가독성 향상

짧은 형태의 화살표 함수를 사용하면 다른 함수에서 함수를 반환할 때 코드 가독성이 어떻게 향상되는지 살펴보겠습니다.

function createAddFunction(number) {
  return function (x) {
    return x + number;
  };
}

createAddFunction는 다른 기능을 생성하는 기능입니다. 이 패턴을 currying라고 합니다. 예를 들어 숫자를 1씩 증가시키는 함수를 만드는 데 사용할 수 있습니다.

const add1 = createAddFunction(1);
add1(5); // 6

방금 배운 화살표 함수의 특징을 이용하여 createAddFunction 정의를 짧게 할 수 있습니다. 한 줄로 줄이는 단계를 살펴보겠습니다.

// Initial version
function createAddFunction(number) {
  return function (x) {
    return x + number;
  };
}

// changing the inner function to arrow function
function createAddFunction(number) {
  return (x) => x + number;
}

// changing the outer function to arrow function
const createAddFunction = (number) => (x) => x + number;

// Arrow function version
const createAddFunction = (number) => (x) => x + number;

일반 함수와 화살표 함수의 차이점

화살표 함수에서 this

가장 중요한 차이점은 두 가지 함수 선언 유형 내에서 이것이 어떻게 작동하는지입니다.

화살표 함수는 자체 this를 생성하지 않고 정의된 위치의 값을 사용합니다. 차이점을 설명하는 몇 가지 예를 보여 드리겠습니다.

const logThisOutside = () => {
  console.log(this);
};

function Button() {
  this.name = "My Button";
  function logThis() {
    console.log(this);
  }
  const logThisArrow = () => {
    console.log(this);
  };

  logThis(); // Window
  logThisArrow(); // { name: 'My Button' }
  logThisOutside(); // Window
}

new Button();

보시다시피 logThisArrow 및 logThisOutside는 정의된 위치에서 this의 값을 사용합니다. 일반 함수와 달리 화살표 함수do not create its own this에서 발생하지만 outer scope의 값을 사용합니다. .

화살표 기능에서 이것을 사용하여 이점을 얻으십시오.

function Button() {
  this.name = "My Button";

  const that = this;
  document.querySelector("button").addEventListener("click", function () {
    console.log("click", this); // Button DOM Element
    console.log("that", that); // { name: 'My Button' }
    this.name = "Button Clicked"; // won't work as expected
    that.name = "Button Clicked"; // name value changed
  });

  document.querySelector("button").addEventListener("click", () => {
    console.log("click arrow", this); // { name: 'My Button' }
    this.name = "Button Clicked"; // name value changed
  });
}

new Button();

두 개의 이벤트 리스너를 만들었습니다. 그 중 하나에서는 정규 함수를 사용했고 다른 하나에서는 화살표 함수를 사용했습니다.

이벤트 리스너의 일반 함수의 경우 버튼을 클릭하면 클릭한 DOM 요소의 값을 갖게 됩니다. this.name의 값을 변경하려면 먼저 변수 const that = this를 만든 다음 that.name = 'Button Clicked로 수정해야 합니다. 외부 범위에서 이것을 수정하는 데 사용되는 일반적인 해킹입니다.

앞에서 언급했듯이 화살표 함수는 자체 this를 생성하지 않으므로 this.name = Button Clicked 로 name 값을 안전하게 변경할 수 있습니다.

화살표 함수의 인수에 액세스

화살표 함수의 다른 기능은 함수 본문 내부에 특수 변수arguments를 생성하지 않는다는 것입니다.

일반 함수에서 arguments가 어떻게 작동하는지 살펴보겠습니다.

function add() {
  console.log(arguments);
}

add(1, 2, 3); // console: [1, 2, 3]

일반 함수는 괄호 사이에 정의되지 않은 경우에도 함수가 호출된 모든 인수를 저장하는 특수arguments variable에 액세스할 수 있습니다.

화살표 함수는 인수 변수를 생성하지 않지만 동일한 나머지 매개변수를 달성하는 데 사용할 수 있는 다른 솔루션이 있습니다.

const add = (...args) => {
  console.log(args);
};

add(1, 2, 3); // console: [1, 2, 3]