Стрелочные функции JavaScript могут сделать вас лучшим разработчиком
Программирование

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

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

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

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

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

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

Стрелочные функции – это новый способ написания функциональных выражений, который был включен в релиз 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

Синтаксис функции при использовании стрелочной функции совершенно иной. Ключевое слово function удаляется; маркер стрелки дает 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

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

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, поэтому вы будете часто их использовать

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

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 и не только

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

this

, облегчают создание объектов и дают новый способ работы с методами массивов

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

Хотите узнать больше о JavaScript? Изучите эти фреймворки JavaScript. Кроме того, наша шпаргалка по JavaScript содержит ценную информацию, а узнав больше о том, как работает JavaScript, вы станете лучшим разработчиком

Теги

Об авторе

Алексей Белоусов

Привет, меня зовут Филипп. Я фрилансер энтузиаст . В свободное время занимаюсь переводом статей и пишу о потребительских технологиях для широкого круга изданий , не переставая питать большую страсть ко всему мобильному =)

Комментировать

Оставить комментарий