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

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

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

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

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

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

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

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

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

Далее через имя переменной мы можем вызвать данную функцию.

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

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

const print = (mes)=> console.log(mes);

print("Hello Metanit.com");
print("Welcome to JavaScript");

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

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

const print = mes=> console.log(mes);

print("Hello Metanit.com");
print("Welcome to JavaScript");

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

const sum = (x, y)=> console.log("Sum =", x + y);

sum(1, 2);		// Sum = 3
sum(4, 3);		// Sum = 7
sum(103, 2);	// Sum = 105

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

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

const sum = (x, y)=> x + y;

console.log(sum(1, 2));		// 3
console.log(sum(4, 3));		// 7
console.log(sum(102, 5));	// 107

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

const hello = name => `Hello, ${name}`;

console.log(hello("Tom"));				// Hello, Tom
console.log(hello("Bob"));				// Hello, Bob
console.log(hello("Frodo Baggins"));	// Hello, Frodo Baggins

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

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

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

const user = (userName, userAge) => ({name: userName, age: userAge});

let tom = user("Tom", 34);
let bob = user("Bob", 25);

console.log(tom.name, tom.age);		// "Tom", 34
console.log(bob.name, bob.age);		// "Bob", 25

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

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

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

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

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

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