Стрелочные функции — это анонимные функции, предлагающие множество преимуществ. Они появляются как новая функция Javascript (версия ES6) и представляют собой более компактную альтернативу обычным функциям. Проще говоря, они делают наши функции более лаконичными.

Краткий пример

Давайте сравним нормальную функцию со стрелочной функцией. Для этого мы создаем тот, который суммирует два элемента и возвращает их сумму. В качестве обычной функции мы бы написали это так:

function createSum(a,b){

return a + b

};

Функция стрелки становится:

const createSum = (a,b) => a + b;

Видите ли, стрелочные функции более лаконичны и компактны. Их также называют толстыми функциями, потому что они используют токен =›, который выглядит как толстая стрелка. По мнению более 5000 разработчиков Javascript, это наиболее часто используемая функция ES6. (Опрос разработчиков JavaScript)

Как написать стрелочную функцию

То, как мы пишем стрелочные функции, отличается от обычных функций. Давайте посмотрим на некоторые примеры.

Стрелочная функция без параметров

Вы можете написать стрелочную функцию следующим образом:

const sayHello = () => {
console.log("Hello World!");
}

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

function sayHello() {
console.log("Hello World!");
}

Но если внутри стрелочной функции только одна строка, вы можете сделать ее еще короче. Итак, наша функция sayHello становится такой:

const sayHello = () => console.log("Hello");

По умолчанию возвращаются стрелочные функции.
Например:

const sayHello = () => "Hello World";

Это вернет строку «Hello World».

Стрелочная функция с параметрами

Если у вас есть параметр внутри функции, вы заключаете его в круглые скобки. Например:

const sayHello = (name) => `Hello ${name}!`;
sayHello("Mouha") //=> will return "Hello Mouha!"

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

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

Например:
const calculateSum(a,b,c) => a + b + c ;

Это по умолчанию возвращает сумму a, b и c.

Использование литерального синтаксиса объекта

Использовать стрелочные функции просто. Но что, если вместо этого вы хотите вернуть объект? Давайте посмотрим на это, применив нашу логику.
Допустим, мы хотим вернуть объект с именем и адресом электронной почты следующим образом:

{
имя: Мо,
электронная почта: «[email protected]»
}

Если вы хотите вернуть этот объект из функции стрелки, вы должны заключить его в круглые скобки.
Иначе не получится. Например, это вернет синтаксическую ошибку:
const createUser = (name, email) => {
name: name,
email: email
}
Почему? Потому что ваша функция стрелки будет рассматривать скобки как скобки функции. Не скобки объекта. Итак, тело функции здесь не объект, а это:

name: name,
email: email

Поэтому вам нужно заключить объект в круглые скобки, чтобы он работал, например:
const createUser = (name, email) => ({name: name, email: email});

Таким образом, ваша функция будет знать, что она должна вернуть то, что находится внутри скобок, а значит, и объект.

Первоначально опубликовано на https://codewithmo.com 8 января 2020 г.