Code Monkey

🖇 Логирование в стрелочных функциях

▪️ Стрелочные функции

Как мы помним, в ES6 появился новый вид функций - стрелочные функции. Стрелочные функции сразу завоевали популярность среди разработчиков, и не зря.

Во-первых, они имеют короткий и понятный синтаксис.
Во-вторых, они имеют лексическую привязку к значению this.

Будем честны, это довольно удобно:

 calcSum = (a, b) => a + b

Но, как говорится, функции функциями, а логирование по расписанию. Ведь все мы с вами любим разводить ошибки, чтобы потом их устранять. А как можно представить себе дебаг без console.log (кхе-кхе)?

▪️Как же быть с логированием в стрелочных функциях?

Встал вопрос, как же быть с логированием в стрелочных функциях?

▫️ Первое, что приходит в голову, это переписать функцию в таком виде:

 calcSum = (a, b) => {
   console.log(a, b);
   return a + b;
}

▫️Если немного подумать, можно прийти ко второму варианту. Он красивее, но все еще не идеал:

 calcSum = (a, b) => (console.log(a, b), (a + b));

Оператор запятая слева направо выполняет каждый из его операндов, а затем возвращает значение последнего операнда.

▫️Третий вариант, как по мне, самый удобный:

 calcSum = (a, b) => console.log(a, b) || (a + b);

Оператор || (ИЛИ) вычисляет операнды слева направо до первого true, а затем возвращает его. Причём, не преобразованное к логическому типу.

console.log слева возвратит undefined, что приведет к выполнению правой части и возврату значения из правой части.

▪️Послесловие

Идею поста я черпал из статьи Александра Майорова "Логируем в стрелках". Там, помимо логирования в стрелочных функциях, рассказывается про логирование в map. Будет полезно прочитать для расширения кругозора

#WebDev

Medium

Логируем в стрелках

Как вызвать console.log в arrow functions

2.39K viewsedited 08:32