Как использовать стрелочные функции в JS (JavaScript)

После выхода спецификаций ECMAScript 6 стрелочные функции в JS (JavaScript) стали самыми популярными по сравнению с другими. Их синтаксис позволяет быстро задавать функции как с параметрами, так и без них. Их ключевое преимущество — возможность отказаться от фигурных скобок и ключевых слов function и return.

На первый взгляд такой синтаксис может показаться странным, но с ним стоит ознакомиться. Это не только экономит время написания кода, но и позволяет сделать его более читабельным.

Базовый синтаксис согласно Mozilla Developer Network:

( param1, param2, ..., paramN ) => { statements }

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

Стрелочные функции в JS и их отличия от обычных

Самый простой вариант синтаксиса таких функций — это когда в функции отсутствуют параметры. В приведённом ниже примере синтаксис ECMAScript 5 демонстрирует объявление функционального выражения (function expression) и присваивает его переменной birthday. Код выводит в консоль простую текстовую строку со словами «С днём рождения!».

var birthday = function() {
 return "С днём рождения!";
}

console.log( birthday() );

В синтаксисе стрелочных функций ключевые слова function и return не используются. Он занимает только одну строку. Пустые круглые скобки указывают на то, что функция не имеет никаких параметров, а стрелка привязывает тело функции к параметрам (отсутствуют в настоящем примере).

var birthday = () => "С днём рождения!";

console.log( birthday() );

Один параметр

Давайте расширим предыдущий пример одним параметром name. Старый синтаксис ES5 предусматривает присвоение его значения к возвращаемой строке.

var birthday = function( name ) {
   return 'Happy birthday, ' + name + '!';
}

console.log( birthday( 'John' ) );

Синтаксис стрелочной функции в JavaScript, по сути, делает то же самое. Нужно заключить в круглые скобки параметр name, разместив его перед стрелкой, и опустив ключевое слово return в функциональном блоке.

var birthday = ( name ) => 'Happy birthday, ' + name + '!' ;

console.log( birthday( 'Jane' ) );

Два параметра

Стрелочные функции в JavaScript можно использовать с любым количеством параметров. Например, если взять тот же пример с двумя параметрами (age и name). Теперь функция birthday() требует двух входных данных для возврата строки. Сначала давайте используем ECMAScript 5.

var birthday = function( age, name) {
   return 'Happy ' + age + 'th birthday, ' + name + '!';
}

console.log( birthday( 30, 'John' ) );

Аналогичный код согласно спецификации ES6.

var birthday = ( age, name ) => 'Happy ' + age + 'th birthday, "'+ name + '!';

console.log( birthday( 32, 'Jane' ) );

Если объявление функции (function declaration) слишком длинное или занимает несколько строк, то его также можно заключить в фигурные скобки. Однако, в этом случае всегда приходится добавлять ключевое слово return в функциональный блок.

var birthday = ( age, name ) => {
   return 'Happy ' + age + 'th birthday, ' + name + '!'
};

console.log( birthday( 34, 'James' ) );

Стрелочные функции в JavaScript и условные операторы

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

var switcher = function( state ) {
   if( state == 'on' ) {
      return 'Switched on!';
   } else if ( state == 'off' ) {
      return 'Switched off!';
   } else {
      return 'Switcher not working!';
   }
}

console.log( switcher( 'on' ) );

Поскольку блок if-else занимает несколько строк, нужно использовать ключевое слово return внутри каждой части блока. Кроме этого, можно написать стрелочную функцию таким же образом, как и раньше.

var switcher = ( state ) => {
   if( state == 'on' ) {
      return 'Switched on!';
   } else if ( state == 'off' ) {
      return 'Switched off!';
   } else {
      return 'Switcher not working!';
   }
}

console.log( switcher( 'off' ) );

Объектные литералы

Вы также можете использовать синтаксис стрелочных функций в JavaScript, который позволяет пользователям устанавливать значение объектных литералов. Функция setBirthday(), приведённая ниже, позволяет пользователям устанавливать имя и возраст человека, у которого день рождения.

var setBirthday = function( name, age ) {
   return {
      name: name,
      age: age
   }
}

console.log( setBirthday( 'John', 30 ) );

Стрелочная функция в этом случае потребует всего лишь одной строки кода.

var setBirthday = ( name, age ) => ({ name: name, age: age });

console.log( setBirthday( 'Jane', 32 ) );

Работа с массивами

Можно использовать функции со стрелками для манипулирования массивами в JavaScript. Например, давайте взглянем на массив persons, который включает в себя три объектных литерала, каждый из которых имеет свойство name и age.

var persons = [
   { name: 'John', age: 30 },
   { name: 'Jane', age: 32 },
   { name: 'James', age: 34 }
];

Встроенный в JavaScript метод map() позволяет вызывать одну и ту же функцию для каждого элемента массива. Используя спецификацию ES5, можно вернуть свойство name каждого пользователя следующим образом.

var haveBirthday = persons.map( function(person) {
   return person.name;
});

console.log( haveBirthday );

С помощью стрелочной функции эта задача выполнима одной строкой.

var haveBirthday = persons.map( person => person.name );

console.log( haveBirthday );

Когда не стоит применять стрелочные функции в JavaScript

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

Во-первых, с их помощью нельзя создавать конструкторы. Использование ключевого слова new вместе с синтаксисом стрелочных функций приведёт к ошибке в консоли. Это происходит потому, что JavaScript обрабатывает такие функции так же, как и методы объекта. В результате, у них не может быть собственных методов, что является характеристикой объектов в JS.

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

Читайте также: Как удалить пустую строку из массива в JavaScript.

Заключение

Функции со стрелками предоставляют разработчикам полезный вариант сокращённого написания функциональных выражений в JavaScript. Их синтаксис имеет множество вариантов использования, поэтому он быстро стал любимым способом написания функций среди разработчиков. При правильном использовании они могут сэкономить много времени написания кода и улучшить его читаемость.