В последнее время я видел много сообщений на Medium, в которых провозглашалось, что они хранят секреты хорошего программиста. В этих статьях часто утверждается, что использование «функций ES6» просто лучше и что, если вы не используете их, вы не являетесь «опытным разработчиком JavaScript».

Я считаю, что использование функций ES6, не задумываясь о последствиях этого для всего вашего приложения, может быть вредным. Также как люди изучают математические доказательства, не понимая, что происходит на самом деле.

Читаемость

Обменять простоту письма на утомление от чтения - не выход. Кодирование не только говорит вашему компьютеру, что делать, оно, очевидно, сообщает остальной части вашей команды, как что-то делается. Это делает удобочитаемость ключевым понятием при написании программы. Рассмотрим этот пример:

Вы смотрите на этот блок кода и думаете: «Хорошо». давайте попробуем понять, что здесь происходит. Что, если бы я сказал вам, что НЕ использование функций ES6 облегчило бы нашу жизнь? Вместо этого подумайте об этом:

Мы дали функции имя enrichPeopleWithPurchasesGreaterThan10Dollars, конечно, много слов, но теперь нам не нужно перечитывать весь этот фрагмент кода, чтобы узнать, что происходит. Мы можем пролистать его, не вкладывая слишком много умственной энергии, чтобы проверить, делает ли он то, что мы ожидаем. Мы сообщили о намерениях нашей команде, чтобы облегчить им чтение.

Возможно, это не идеальный пример, поскольку мы здесь вне контекста, но есть много примеров, которые я встречал во многих кодовых базах, и это может быть то, что вы захотите применить в некоторых частях вашего кода.

Отладка

Когда вы работаете с Node.js, у вас обычно есть какая-то система журналов. Это может быть внешний сервис, простое ведение журнала консоли или их потоковая передача в текстовые файлы.

Когда мы сталкиваемся с исключениями в нашем коде, мы хотим знать, где они происходят. Неспособность определить точную причину проблемы может вызвать у вас и вашей команды некоторое разочарование. Вот почему вы можете захотеть переосмыслить использование функций жирной стрелки ES6 в некоторых частях вашего кода.

В консоли браузера напишите что-то вроде этого:

(() => { throw Error })();

По сути, мы выполняем функцию, которая вызывает исключение. Результат будет примерно таким:

Большой. (анонимно). Представьте, что это выдается кодом на вашем сервере. Удачи в выявлении причины вашего исключения.

Теперь в консоли вашего браузера напишите это:

(function thisWillFail() { throw Error })();

Это приведет к следующей ошибке:

Заметили разницу? Мы знаем, что что-то пошло не так в функции thisWillFail. Вот почему я рекомендую использовать выражения функций в сценариях, где важна отладка. Поверьте, это не позволит вам биться головой об стену каждый раз, когда вы сталкиваетесь с одной из этих неприятных анонимных ошибок.

Функции обратного вызова

this - сложное ключевое слово в JavaScript, и если вы в некоторой степени являетесь разработчиком JavaScript, у вас возникли проблемы с ним. ключевое слово this очень мощно, поскольку позволяет изменять контекст в зависимости от способа вызова функции.

Однако с функцией жирной стрелки контекст привязывается статически, когда ваша функция объявляется, и его нельзя изменить. Иногда вы можете захотеть использовать ключевое слово this в глобальной области действия, однако с функциями обратного вызова событий это может быть не всегда.

Рассмотреть возможность:

const btn = document.getElementById('example-btn');
btn.addEventListener('click', () => {
    this.innerHTML = 'Clicked button';
});

Это не сработает. в функции ES6 ключевое слово this относится к окну, если функция зарегистрирована в глобальном контексте. В этом примере это означает, что this.innerHTML равно window.innerHTML, а это не совсем то, что нам нужно.

В этом случае мы хотим использовать выражение функции:

const btn = document.getElementById('example-btn');
btn.addEventListener('click', function changeText() {
    this.innerHtml = 'Clicked button';
});

Это будет работать! контекст нашей функции обратного вызова теперь указывает на нашу кнопку как this, запуск this.innerHTML приведет к изменению текста кнопки.

Вы можете возразить, что мы могли бы использовать объект события, переданный нашим функциям, однако нам нужно будет проанализировать нашу правильную цель, и, как вы могли заметить, могут поддерживаться другие крайние случаи.

Заключение

В этой статье я поделился 3 причинами, по которым использование функции ES6 не всегда может быть лучше. Нет лучшего способа писать код. Приложения сильно различаются. Возможно, вы не захотите использовать выражения функций в react-native для целей отладки, поскольку они малоценны. Однако он может иметь большое значение в приложении Node.js.

Обсудите эти темы со своей командой и попытайтесь найти золотую середину, в которой удобочитаемость, отладка и производительность являются ключевыми показателями.

Больше контента на plainenglish.io