Стрелочные функции появились начиная с ES6 и очень сильно изменили качество написания кода. Так чем же они хороши? Главная причина появления стрелочных функций в стандарте ES6 - это упростить синтаксис и уменьшить количество символов при объявлении функции.
Стрелочные функции появились начиная с ES6 и очень сильно изменили качество написания кода. Так чем же они хороши? Главная причина появления стрелочных функций в стандарте ES6 - это упростить синтаксис и уменьшить количество символов при объявлении функции.
Как вызвать стрелочную функцию
Для сравнения напишем две одинаковые функции по функционалу, но с разным синтаксисом. Обе функции будут выводить строку в консоль. В первом случае, объявление обычной функции всегда начинается со слова function() и круглых скобок для передачи параметров. Для объявления стрелочной функции, вместо слова function пишется блок, состоящий из знака равно и стрелки.
// ES5 Обычная функция
function title() {
console.log('Классическая функция');
}
title();
// ES6 Стрелочная функция
let title2 = () => {
console.log('Функция стрелка');
}
title2();
Отличия стрелочных функций от обычных
Отличие №1
Если передается только один параметр, то круглые скобки писать не обязательно.
let sum = x => {
console.log(x+10);
}
sum(5); // результат 15
Отличие №2
Упрощенная форма записи возврата (return) из функции, что в определенных случаях позволяет прописывать короткие функции в одну строчку. Обратите внимания, что во втором способе, мы опустили ключевое слово return и функция все равно сработала.
// Первый способ
let summa = z => {
return(z+2);
}
console.log(summa(8)); // результат 10
// Второй способ с краткой формой записи
let summ = z => z+2;
console.log(summa(8)); // результат 10
Когда не нужно использовать стрелочные функции
Стрелочная функция по сути является удобной записью обычной функции, с которой мы привыкли иметь дело. Но хочу отметить, что стрелочные функции не заменили классический формат декларирования функций и никак с ним не конкурирует. У них теперь немного разные области применения, своеобразное разделение труда и вместе они делают жизнь разработчика гораздо проще.
- При вызове метода объекта
- При написании функции обратного вызова с динамическим контекстом
Пример динамического создания функции
В alert окне предлагается посетителю ввести свой вес. Если введенный вес меньше 70, то в окне появится надпись "Можете пройти!". При весе больше 70, пользователь увидит "Вход запрещен!".
let weight = prompt("Сколько вы весите?", 70);
let welcome = (weight < 70) ?
() => alert('Можете пройти!') :
() => alert("Вход запрещен!");
welcome();
Примеры ES5 против ES6
// раньше
let add = function(x, y) {
return x + y;
};
// сейчас
let add = (x, y) => x + y;
