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

Стрелочные функции (arrow functions) позоляют сократить определение обычных функций. Стрелочные функции образуются с помощью знака стрелки =>, перед которым в скобках идут параметры функции, а после - собственно тело функции:

(параметры) => действия_функции

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

function hello(){
console.log("Hello");
}
// вызываем функцию
hello();

Теперь переделаем ее в стрелочную функцию:

let hello = ()=> console.log("Hello");
hello();

В данном случае стрелочная функция присваивается переменной hello, через которую затем можно вызвать данную функцию. Здесь мы не используем параметры, поэтому указываются пустые скобки ()=> console.log("Hello");, далее через имя переменной мы можем вызвать данную функцию.

Передача параметров

Теперь определим стрелочную функцию, которая принимает один параметр:

let print = (mes)=> console.log(mes);
print("Hello Metanit.com");
print("Welcome to JavaScript");

Здесь стрелочная функция принимает один параметр mes, значение которого выводится на консоль браузера.

Если стрелочная функция имеет только один параметр, то скобки вокруг списка параметров можно опустить:

let print = mes=> console.log(mes);
print("Hello Metanit.com");
print("Welcome to JavaScript");

Другой пример - передадим два параметра:

let sum = (x, y)=> console.log("Sum =", x + y);
// Sum = 3
sum(1, 2);      
// Sum = 7
sum(4, 3);      
// Sum = 105
sum(103, 2);

Возвращение результата

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

let sum = (x, y)=> x + y;
// 3
console.log(sum(1, 2));   
// 7  
console.log(sum(4, 3));  
// 105   
console.log(sum(102, 5));

Другой пример - возвратим отфарматированную строку:

const hello = name => `Hello, ${name}`;
// Hello, Tom
console.log(hello("Tom"));   
// Hello, Bob           
console.log(hello("Bob"));    
// Hello, Frodo Baggins          
console.log(hello("Frodo Baggins"));

В данном случае функция hello принимает один параметр name - условное имя и создает на его основе сообщение с приветствием.

Возвращение объекта

Особо следует остановиться на случае, когда стрелочная функция возвращает объект:

let user = (userName, userAge) => ({name: userName, age: userAge});
let tom = user("Tom", 34);
let bob = user("Bob", 25);
// "Tom", 34
console.log(tom.name, tom.age);   
// "Bob", 25  
console.log(bob.name, bob.age);

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

Функция из нескольких инструкций

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

const square = n => {
let result = n * n;
console.log(result);
}
// 25
square(5);     
// 36
square(6);

А если надо возвратить результат, применяется оператор return, как в обычной функции:

const square = n => {
let result = n * n;
return result;
}
// 25
console.log(square(5));