5 рекомендаций по написанию качественных стрелочных функций

[ht-pro]

— Фу, статья про стрелочный функции!
— Фу, опять статья про стрелочные функции!
— Вау, статья про стрелочные функци!
©

[AriesUa]

Небольшие ремарки по коду.

— Зачем объявлять проперти объекта как строка? Это не JSON файл. Убираем строку и получаем

array.map(number => ({ number: number }))

— Используем возможности ES6 и переписываем строку выше

array.map(number => ({ number }))

— На дворе уже 2020 год можно и не использовать цепочки вызовов в промисах.

myButton.addEventListener('click', async () => {
  let response;

  try {
    response = await fetch('/items.json');
  } catch (err) {
    // do something to check err
    console.log('error ->', err);
    throw err;
  }

  response = await response.json();

  console.log(response.name);
});

[dmitryredkin]

Плохо знаю JavaScript, поэтому просто спрошу, т.к. глаз резануло:

 fetch('/items.json')
    .then(response => response.json()); <===
    .then(readItemsJson);

Это нормально, так писать цепочку?

[k12th]

Это явно опечатка, в таком виде это синтаксическая ошибка.

[nikakoy131]

Не вижу ошибки. И да нормально

[mayorovp]

Оператор (который statement) в JavaScript не может начинаться с точки.

[enavermate]

Нет, опечатка

[fomenkogregory]

Абсолютно нормально, в этом случае readItemsJson будет вызван с json из предыдущего thena в качестве аргумента.

[Ogoun]

Интересно, зачем было придумывать новое название анонимным функциям, или в стрелочных есть какое то отличие? Маркетинговый ход?

[mayorovp]

Разумеется, есть: у стрелочной функции, в отличии от анонимной, нет своих this и arguments.

[RomanPokrovskij]

Какое рассуждение стоит за рекомендацией использовать стерлочные функции cостоящие из одного выражения? Оптимизация компилирования? Памяти? Назначенная семантика какая-то?

[ratijas]

Конкретно к стрелочным функциям тут относится только первая рекомендация, которая как бы объяснение очередной черной магии JavaScript. Остальное — общеприменимый здравый смысл, и стрелочки тут ни при чем.

А надо было… уделить больше внимания отличию стрелочных от старых анонимных, и в особенности автоматической привязке this. Я как-то спорил с однокурсником на тему какой синтаксис использовать; пришлось хорошенько погуглить и разобраться в теме, чтобы понять, что не просто так из прихоти в реактах пишут

const callback = (ev) => {
   ...
}

вместо старого всем понятного

function callback(ev) {
    ...
}

(или как это было бы внутри класса)

class A {
    callback(ev) {
        ...
    }
}

А вот и сама заметка: https://t.me/ratijas_life/16