5 نصائح لكتابة وظائف سهم الجودة

1. استخدم عرض أسماء وظائف الأسهم

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

const increaseNumber = number => number + 1;

increaseNumber.name; // => 'increaseNumber'

• يشير اسم الوظيفة handleButtonClickإلى استدعاء معالج الأحداث click.
• increaseCounterيشير الاسم إلى استدعاء الوظيفة التي تزيد العداد.

2. كلما كان ذلك ممكنا ، جاهد لكتابة وظائف مضمنة

const array = [1, 2, 3];

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

const array = [1, 2, 3];

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

3. استخدم بعناية وظائف الأسهم وعوامل المقارنة.

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

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

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

4. استخدم الأقواس أو الهياكل متعددة الأسطر عند إنشاء كائنات بسيطة في وظائف الأسهم

const array = [1, 2, 3];

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

const array = [1, 2, 3];

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

const array = [1, 2, 3];

// !
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);
      });
    });
});

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);

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);

ملخص