Что такое стрелочная функция? — Часть 1


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

Анонимные функции — это стрелочные функции (функции, которые не имеют имени и не связаны с идентификатором). Они не производят никакого вывода и могут использоваться без ключевого слова function. Стрелочные функции нельзя использовать в качестве конструкторов. Контекст стрелочных функций может быть задан лексически или статически. В других языках они известны как Lambda.

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

От функции к стрелочной функции

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

Пример:

function multiply(a, b) {
   return a * b;
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Можно записать как:

const multiply = function(a, b){
   return a * b;
}
Ввести полноэкранный режим Выйти из полноэкранного режима

Обратите внимание, как мы определили переменную multiply, а затем присвоили ее функции с двумя параметрами, a и b.

Давайте перепишем с помощью функции стрелки, выполнив следующие два шага:

  1. удалить ключевое слово function
  2. добавить стрелочную функцию, также называемую жирной стрелкой => между параметрами (a, b) и открывающей фигурной скобкой {

Пример:

const multiply = (a, b) => {
   return a * b;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Стрелочные функции всегда начинаются с параметров, затем стрелка => и, наконец, тело функции.

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

// ES5
function show(value){
return value/2

// ES6
let show = value => value/2;
console.log(show(50));
Вход в полноэкранный режим Выход из полноэкранного режима

Array.forEach() с использованием функции стрелки

// Without the fat arrow
const ages = [10, 15, 22, 45];

ages.forEach(function(ages) {
   console.log(ages);
});

// With the fat arrow
ages.forEach((grade) => {
   console.log(ages);
});
Вход в полноэкранный режим Выход из полноэкранного режима

Поскольку функция arrow имеет только один параметр, круглые скобки () вокруг параметра не нужны.

ages.forEach(grade => {
  console.log(grade);
});
Вход в полноэкранный режим Выход из полноэкранного режима

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

//ES5
this.num.forEach(function(num) {
  if(num < 20)
   this.child.push(num);
}.bind(this));

//ES6
this.num.forEach(num => {
  if(num < 20)
    this.child.push(num);
});
Вход в полноэкранный режим Выйти из полноэкранного режима

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

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

Array.filter() с использованием функции стрелки

// Without the fat arrow
const ages = [10, 15, 22, 25];

let agesAboveTwentyOne = ages.filter(function(age) {
    return age > 21;
});
console.log(agesAboveTwentyOne); //[22, 25]

// With the fat arrow
let agesAboveTwentyOne = ages.filter(age => {
    return age > 21;
});
console.log(agesAboveTwentyOne); //[22, 25]
Вход в полноэкранный режим Выход из полноэкранного режима

Поскольку функция arrow имеет только один параметр, круглые скобки () вокруг параметра не нужны.

Пожалуйста, поделитесь своими мыслями в разделе комментариев ниже. Я с удовольствием выслушаю ваши мысли. Или, пожалуйста, загляните ко мне и скажите «👋».

Оцените статью
devanswers.ru
Добавить комментарий