arrow_function

JavaScript: Стрелочные Функции

Если вы когда-нибудь увлекались JavaScript, вы, вероятно, сталкивались со стрелочным обозначением => в некотором коде и задавались вопросом, что это значит.

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

const convertString = (s) => {
return s.replace(" ","_").toLowerCase();
}
console.log(convertString("Hello World"));
// prints hello_world
// convertString is the name
// (s)is the parameter list
// the curly braces define the body of the function
 

Но как на самом деле работают стрелочные функции? Как они появились? Зачем переходить от обычного определения функций? И самое главное, как я могу начать их использовать?

Чтобы ответить на эти вопросы, давайте не будем говорить о них, как будто мы новички в JavaScript, а скорее, как если бы у нас был существующий код, который мы хотели бы преобразовать в новейшую и лучшую версию ES6.

Стрелочные функции. Что же это?

Стрелочная функция - это сжатое представление анонимной функции, которая не имеет независимого объявления.

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

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

Как работают “анонимные” функции?

“Анонимные” функции чаще всего используются, когда метод принимает функцию в качестве параметра и эта функция не предназначена для повторного использования.

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

// the map method performs a function on each element in the array
const numbers = [1,2,3,4]
const squares = numbers.map((n) => {
return n ** 2;
});
console.log(squares); // 1,4,9,16
 

Если этот код вызывает косоглазие, приходиться присматриваться или чесать затылок, вот тот же пример только с “традиционно определенной” функцией:

function calcSquare(n) {
return n ** 2;
}
// the map method performs a function on each element in the array
const numbers = [1,2,3,4]
const squares = numbers.map(calcSquare);
console.log(squares); // 1,4,9,16
 

Итак, зачем что-то менять, если “традиционные” функции все еще работают?

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

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

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

Вот список изменений синтаксиса для вашей справки:

Нет ключевого слова функции

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

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

Не надо называть функцию, если не хотите

В чем разница между “анонимной” и “именованной” функциями? Ну, это имя.

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

Пропустить фигурные скобки для одного параметра

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

Пропустить фигурные скобки и слово “return”

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

Это как и опущение пропущенных скобок для одного параметра, поначалу это может быть слишком сжатым, но намного меньше синтаксиса, чтобы печатать и читать, когда появится больше опыта.

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

Если вы новичок в JavaScript, просто используйте обозначение стрелки для определения функций. Попадая в этот лагерь, реальные вопросы, которые вам нужно задать, это: «Что такое функции и как их использовать?»

Если вы уже писали JS и пытаетесь преобразовать свои методы работы с кодом, тогда вам нужно перевести старое на новое.

Давайте продемонстрируем перевод, взяв функцию calcSquare() ранее и оптимизировав ее с помощью стрелочных обозначений.

function calcSquare(n) {
let result = n ** 2;
return result;
}
let numbers = [1,2,3,4];
console.log(numbers.map(calcSquare));
 

Итак, наша функция используется только один раз для возведения в квадрат каждого значения в массиве. Мы удалим автономное определение и создадим “анонимную” функцию в методе .map().

let numbers = [1,2,3,4];
console.log(numbers.map((n) => {
let result = n ** 2;
return result;
}));
 

Но что, если функция будет переиспользовать? Давайте вытащим её из нашего метода .map(), но только теперь перепишем её на стрелочный синтаксис.

const calcSquares = (n) => {
result = n ** 2;
return result;
};
let numbers = [1,2,3,4];
console.log(numbers.map(calcSquares));
let numbers2 = [5,6,7,8];
console.log(numbers2.map(calcSquares));
 

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

const calcSquares = n => {
result = n ** 2;
return result;
}
 

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

const calcSquares = n => n ** 2;
 

Сделайте паузу на секунду здесь и посмотрите, насколько мы сократили нашу функцию. Вау…

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

const functionName = () => {};

• Если ваша функция “анонимна”, пропустите присвоение переменной.

• Если ваша функция имеет один параметр, удалите скобки.

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

Вывод

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