댓글 검색 목록

[javascript] 화살표 함수 작성을 위한 5 가지 모범 사례

페이지 정보

작성자 운영자 작성일 20-02-01 22:23 조회 522 댓글 0

화살표 함수는 인기가 있습니다. 문법은 간결하고, 어휘적으로 바인딩하며, 콜백으로 적합합니다.

이 게시물에서는 5 가지 모범 사례를 읽고 화살표 함수를 통해 더 많은 장점을 얻을 수 있습니다.

https://dmitripavlutin.com/javascript-arrow-functions-best-practices/

1. 화살표 함수 이름 유추

JavaScript의 화살표 함수는 익명입니다. 함수의 name 속성은 빈 문자열 ''입니다.

( number => number + 1 ).name; // => ''

익명 함수는 디버그 세션 또는 호출 스택 분석 중에 익명으로 표시됩니다.

불행하게도, 익명은 실행되는 코드에 대한 실마리를 제공하지 않습니다.

익명 함수를 실행하는 코드의 디버그 세션은 다음과 같습니다.

오른쪽의 호출 스택은 익명으로 표시된 2 개의 기능으로 구성됩니다. 이러한 호출 스택 정보에서 유용한 정보를 얻을 수 없습니다.

다행히도 함수 이름 유추 (ES2015의 기능)는 특정 조건에서 함수 이름을 감지 할 수 있습니다.

이름 추론의 아이디어는 JavaScript가 구문 기능 위치에서 화살표 함수 이름을 결정할 수 있다는 것입니다. 함수 객체를 보유한 변수 이름에서

함수 이름 유추가 어떻게 작동하는지 봅시다 :

const increaseNumber = number => number + 1;

increaseNumber.name; // => 'increaseNumber'

increaseNumber 변수는 화살표 함수를 보유하기 때문에 JavaScript는 'increaseNumber'가 해당 함수에 적합한 이름 일 수 있다고 결정합니다. 따라서 화살표 함수는 'increaseNumber'라는 이름을 받습니다.

함수 이름 유추를 사용하여 화살표 함수 이름을 지정하는 것이 좋습니다.

이제 이름 유추를 사용하는 코드로 디버그 세션을 확인하겠습니다.

화살표 함수에는 이름이 있으므로 호출 스택은 실행 중인 코드에 대한 자세한 정보를 제공합니다.

handleButtonClick 함수 이름은 클릭 이벤트가 발생했음을 나타냅니다.
incrementCounter는 카운터 변수를 증가시킵니다.

2. 가능하면 인라인

인라인 함수는 식이 하나만 있는 함수입니다. 화살표 함수는 짧은 인라인 함수를 구성하는 기능이 마음에 듭니다.

예를 들어, 긴 형식의 화살표 함수를 사용하는 대신 :

const array = [1, 2, 3];

array.map((number) => { 
  return number * 2;
});

화살표 함수에 하나의 표현식이 있으면 중괄호 {} 및 return 문을 쉽게 제거 할 수 있습니다.

const array = [1, 2, 3];

array.map(number => number * 2);

내 조언은 다음과 같습니다.

함수에 하나의 표현식이 있는 경우 화살표 함수를 인라인 하는 것이 좋습니다.

3. 팻 화살표 및 비교 연산자 (Fat arrow and comparison operators)

비교 연산자 >, <, <= 및 >=는 화살표 함수를 정의하는 fat arrow =>와 유사합니다.

이러한 비교 연산자를 인라인 화살표 함수에 사용하면 혼동이 발생합니다.

<= 연산자를 사용하는 화살표 함수를 정의 해 봅시다 :

const negativeToZero = number => number <= 0 ? 0 : number;

같은 줄에 => 및 <= 기호가 모두 존재하면 잘못된 것입니다.

뚱뚱한 화살표를 비교 연산자와 명확하게 구별하기 위해 첫 번째 옵션은 표현식을 한 쌍의 괄호로 묶는 것입니다.

const negativeToZero = number => (number <= 0 ? 0 : number);

두 번째 옵션은 더 긴 형식을 사용하여 화살표 기능을 의도적으로 정의하는 것입니다.

const negativeToZero = number => {
  return number <= 0 ? 0 : number;
};

이러한 리팩토링은 Fat 화살표 기호와 비교 연산자 사이의 혼동을 제거합니다.

화살표 함수에 연산자>, <, <= 및> =가 포함되어 있으면 표현식을 괄호로 묶거나 더 긴 화살표 함수 형식을 사용하는 것이 좋습니다.

4. 일반 객체 구성

인라인 화살표 함수 내부의 객체 리터럴은 구문 오류를 트리거 합니다.

const array = [1, 2, 3];

// throws SyntaxError!
array.map(number => { 'number': number });

JavaScript는 중괄호를 객체 리터럴이 아닌 코드 블록으로 간주합니다.

객체 리터럴을 괄호로 묶으면 문제가 해결됩니다.

const array = [1, 2, 3];

// Works!
array.map(number => ({ 'number': number }));

객체 리터럴에 많은 속성이 있는 경우 화살표 함수를 인라인으로 유지하면서 줄 바꿈을 사용할 수도 있습니다.

const array = [1, 2, 3];

// Works!
array.map(number => ({
  'number': number
  'propA': 'value A',
  'propB': 'value B'
}));

내 추천 :

인라인 화살표 함수 내에서 사용될 때 객체 리터럴을 한 쌍의 괄호로 묶습니다.

5. 과도한 중첩에 주의하십시오

화살표 함수 구문이 짧습니다. 그러나 부작용으로 많은 화살표 함수가 중첩되면 암호가 될 수 있습니다.

다음 시나리오를 생각해 봅시다. 버튼을 클릭하면 서버에 대한 요청이 시작됩니다. 응답이 준비되면 항목이 콘솔에 기록됩니다.

myButton.addEventListener('click', () => {
  fetch('/items.json')
    .then(response => response.json());
    .then(json => {
      json.forEach(item => {
        console.log(item.name);
      });
    });
});

화살표 함수는 3 단계 중첩입니다. 코드의 기능을 이해하려면 노력과 시간이 필요합니다.

중첩 함수의 가독성을 높이기 위해 첫 번째 방법은 각각 화살표 함수를 보유하는 변수를 도입하는 것입니다.

변수는 함수가 무엇을 하는지 간결하게 설명해야 합니다 (화살표 함수 이름 유추 모범 사례 참조).

const readItemsJson = json => {
  json.forEach(item => console.log(item.name));
};

const handleButtonClick = () => {
  fetch('/items.json')
    .then(response => response.json());
    .then(readItemsJson);
};

myButton.addEventListener('click', handleButtonClick);

리팩토링은 화살표 함수를 변수 readItemsJson 및 handleButtonClick으로 추출합니다.

중첩 수준이 3에서 2로 감소합니다.

이제 스크립트의 기능을 이해하기가 더 쉬워졌습니다.

async / await 구문을 사용하도록 전체 함수를 리팩터링 하는 것이 더 좋습니다.

이는 함수 중첩을 해결하는 좋은 방법입니다.

const handleButtonClick = async () => {
  const response = await fetch('/items.json');
  const json = await response.json();
  json.forEach(item => console.log(item.name));
};

myButton.addEventListener('click', handleButtonClick);