Стрелочные функции ES6 в JavaScript - начало работы
В ES6 JavaScript появились стрелочные функции. В этой статье мы рассмотрим их основы и их преимущества.
Функции ES5
В редакции JavaScript ES5 для определения функции используется ключевое слово function. Например, определение функции, которая умножает число на два:
function multiplyByTwo(num){
return num * 2;
}Мы также можем определить функцию и присвоить ее переменной.
const multiplyByTwo = function(num){
return num * 2;
}Но в обоих вариантах используется ключевое слово function.
Первая стрелочная функция ES6
Чтобы создать стрелочную функцию, ключевое слово function не нужно. Для ее объявления нужно добавить стрелку сразу после перечисления параметров.
const multiplyByTwo = (num) => {
return num * 2;
}Удаление ненужных скобок
Скобки вокруг параметров обязательны, если функция не имеет параметров или имеет более одного параметра. Но если стрелочная функция принимает только один параметр, то можно не использовать скобки.
const multiplyByTwo = num => {
return num * 2;
}Неявный возврат результата
При использовании неявного возврата результата выполнения функции не нужны фигурные скобки или ключевое слово return. Это будет выглядеть следующим образом.
const multiplyByTwo = num => num * 2;Вы можете использовать этот синтаксис, даже если вам не нужно ничего возвращать.
Например, если бы я просто хотел что-то вывести на консоль, я мог бы использовать неявный возврат, чтобы сократить длину функции.
const printName = (first, last) => console.log(`${first} ${last}`);Использование стрелочных функций
Чаще всего стрелочные функции используются в методах массива JavaScript: map(), Reduce(), Filter() и т. д. Используя стрелочные функции, вы можете выполнять преобразования массива в одну строку кода.
Предположим, что нужно преобразовать массив путем умножения каждого числа на два. Это будет выглядеть следующим образом.
const twodArray = [1,2,3,4].map( num => num * 2);С помощью этой стрелочной функции я избавился от скобок (потому что задан только один параметр) и использовал неявный возврат. Это позволило выполнить преобразования в одну строку.
Теперь рассмотрим пример с методом Filter(). Допустим, мы хотим отфильтровать из массива все числа, которые не являются четными.
const filteredArray = [1,2,3,4].filter( num => num % 2 == 0);Ключевое слово this, связанное со стрелочными функциями
Начнем с примера определением функции ES5 внутри объекта person.
const person = {
first: "James",
last: "Quick",
getName: function() {
this.first + " " + this.last
}
}Мы создали объект person с именем и фамилией, а также функцию getName(). Она возвращает полное имя человека. Внутри функции мы пытаемся ссылаться на свойства first и last, вызывая this.first и this.last.
Когда функции ES5 определены в объекте, «this» относится к самому объекту. Следовательно, с помощью функций ES5 мы все еще можем ссылаться на свойства объекта, используя «this».
Стрелочные функции ничего не связывают с ключевым словом this. Поэтому, если бы мы изменили определение функции на стрелочную функцию, это бы не сработало.
const person = {
first: "James",
last: "Quick",
getName: () => {
this.first + " " + this.last
}
}В этом случае значение undefined будет выведено как для первого, так и для последнего свойства. Потому что ключевое слово this не привязано к объекту person и у него нет переменных first и last, на которые можно ссылаться.
Заключение
Стрелочные функции все чаще используются в примерах и документации. Поэтому стоит изучить, как они работают. Не говоря уже о том, что они могут уменьшить объемы создаваемого вами кода.