Функции JavaScript Arrow могут сделать вас лучшим разработчиком

JavaScript ES6 принес захватывающие изменения в мир веб-разработки. Новые дополнения к языку JavaScript принесли новые возможности.

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

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

Что такое JavaScript Arrow Функции?

Функции со стрелками – это новый способ написания выражений функций, которые были включены в выпуск JavaScript ES6

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

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

Эти функции используют новый токен стрелки:

=>

Если вы когда-либо работали в Python, эти функции очень похожи на лямбда-выражения Python

,

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

• Ключевое слово функции удалено
• Ключевое слово return не обязательно
• Фигурные скобки не являются обязательными

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

Как использовать функции со стрелками

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

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

 let addnum = function(num1,num2){
    return num1 + num2;
};

addnum(1,2);
>>3

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

Вот выражение, измененное на функцию стрелки:

let addnum = (num1,num2) => { return num1 + num2;};

addnum(1,2);
>>3

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

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

let addnum = (num1,num2) => num1 + num2;

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

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

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

Функции со стрелками имеют много разных применений и функций.

Регулярные функции

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

let square = x => x * x

square(2);
>>4

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

let helloFunction = () => Console.log("Hello reader!");

helloFunction();
>>Hello reader!

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

становится, когда у вас есть более простой способ написания функций.

Используя это

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

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

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

function Person() {
  var that = this; //You have to assign 'this' to a new variable
  that.age = 0;

  setInterval(function growUp() {
    that.age++;
  }, 1000);
}

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

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // Now you can use 'this' without a new variable declared
  }, 1000);
}

Хотя они отлично подходят для функций, их не следует использовать для создания методов внутри объекта. Функции стрелок не используют правильную область видимости для this,

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

let pizza = {
toppings: 5,
removeToppings: () => {
     this.toppings--;
   }
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}

pizza.removeToppings(); //The method will not do anything to the object

>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings

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

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

так что вы будете их часто использовать.

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

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});

>> [2,3,4,5]

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

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});

>> [2,3,4,5]

Теперь намного легче читать.

Создание литералов объектов

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

let createObject = function createName(first,last) {
     return {
        first: first,
        last: last
     };
};

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

let createArrowObject = (first,last) => ({first:first, last:last});

Функции JavaScript Arrow и не только

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

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

Хотите узнать больше о JavaScript? Наш чит-лист JavaScript

предоставляет ценную информацию и узнает больше о том, как работает JavaScript

может сделать вас лучшим разработчиком.