Что такое стрелочные функции? Руководство для начинающих по написанию лаконичного кода JavaScript

Что это? =>🤔

=> упоминается как толстая стрелка, которая представляет синтаксис функции стрелки.

Стрелочные функции JavaScript — это лаконичный и удобный способ написания функций на JavaScript.

Стрелочные функции были представлены в ES6 (ECMAScript 6) и быстро стали популярными среди разработчиков благодаря своей простоте и удобочитаемости.

Ниже мы быстро рассмотрим стрелочные функции, как они используются в JavaScript и как мы можем их эффективно использовать.

Синтаксис стрелочных функций

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

Параметры: это значения, которые передаются в функцию. Они заключаются в круглые скобки и разделяются запятыми. Например, (параметр 1, параметр 2) и т. д.…
Стрелка: представлена толстой стрелкой => и отделяет параметры от тела функции.
Тело функции: это код, который выполняется при вызове функции. Он заключен в фигурные скобки {} для многострочных функций или может быть записан в одну строку без фигурных скобок {}.

Ниже приведен пример стрелочной функции, которая принимает два параметра, перемножает их и возвращает их сумму:

const multipleNumbers = (a, b) => a * b;

В этом примере функция принимает два параметра (a, b), разделенных запятыми, заключенными в круглые скобки.

Стрелка =>отделяет параметры от тела функции, которое представляет собой одну строку, умножающую значения a и b.

Что такое стрелочные функции?

Стрелочные функции — это тип функций в JavaScript, который позволяет писать более короткий и лаконичный код.

Выражение стрелочных функций — это компактная альтернатива традиционным функциональным выражениям.

Лучший способ показать это на примере кода.

Ниже приведен пример традиционного функционального выражения в JavaScript.

function getRandomNumber() {
    return Math.random()
}

Эту функцию getRandomNumber() можно переписать с помощью функции стрелки следующим образом:

const getRandomNumber = () => {
  return Math.random()
}

Как видите, стрелочная функция намного короче и лаконичнее, чем традиционная функция.

Функция стрелки не требует ключевого слова function.

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

У стрелочных функций есть несколько интересных функций, давайте рассмотрим некоторые из них ниже:

Неявные возвраты

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

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

const getRandomNumber = () => Math.random()

Теперь Math.random() находится в той же строке, что и объявление функции, и немедленно возвращается всякий раз, когда вызывается getRandomNumber().

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

Стрелочные функции только с одним параметром не требуют круглых скобок вокруг параметра.

const getUser = user => console.log(`...Getting username for ${user}`)

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

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

Вот несколько сценариев, в которых стрелочные функции особенно полезны:

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

Анонимные функции: если вам нужно передать функцию в качестве аргумента другой функции, стрелочные функции — отличный выбор. Они позволяют вам быстро и легко писать анонимные функции. Примером этого может быть передача функции для функции Array.filter:

Ниже приведен пример традиционного выражения анонимной функции в JavaScript для функции Array.filter().

const arrayOfNumbers = [2, 4, 6, 8, 10]

const getGreaterThanFive = arrayOfNumbers.filter(function (element) {
    return element >= 5
})

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

const arrayOfNumbers = [2, 4, 6, 8, 10]

const getGreaterThanFive = arrayOfNumbers.filter(element => element >= 5)

Область действия стрелочной функции с этимключевым словом

Область действия стрелочных функций для thiskeyword отличается от обычных функциональных выражений.

Обычные функции охватывают ключевое слово thisв зависимости от контекста, в котором вызывается функция.

Стрелочные функции не предоставляют свои собственные thisbinding.

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

class User {
    constructor(name) {
        this.name = name
    }
    
    printNameWithFunction() {
        setTimeout(function() {
            console.log(`Function: ${this.name}`)
        }, 100)
    }
    
    printNameWithArrow() {
        setTimeout(() => console.log(`Arrow: ${this.name}`), 100)
    }
}

const user1 = new User('Goku')
user1.printNameWithFunction()
// Expected Output: Function:
user1.printNameWithArrow()
// Expected Output: Arrow: Goku

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

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

Инженеру-программисту важно знать, когда использовать правильные инструменты в вашем наборе инструментов JavaScript.

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

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

Краткое содержание

Выше мы рассмотрели стрелочную функцию JavaScript =>.

Выражение стрелочных функций — это компактная альтернатива традиционным функциональным выражениям.

Как таковые, их можно использовать для создания лаконичного читаемого кода.

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

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

Дальнейшее чтение

Выражения стрелочных функций — JavaScript | MDN
Выражение со стрелкой — это компактная альтернатива традиционному функциональному выражению с некоторой семантикой…developer.mozilla.org

Ссылки

Если у вас есть какие-либо вопросы/предложения, вы можете связаться со мной ниже:

Линкедлн

Твиттер

Следуйте за мной на Medium: Люк Слоан-Балджер