Функції стрілок в JavaScript - ефективне використання

Функції лежать в основі JavaScript. Якщо раніше вони були пов'язані з використанням ключового слова function, то в ES6 з'явився новий, більш елегантний спосіб написання за допомогою так званих стрілочних функцій. Цей новий синтаксис не тільки робить ваш код коротшим, але й вирішує деякі проблеми, пов'язані з цим контекстом. У цьому посібнику ви дізнаєтеся все, що вам потрібно знати про стрілочні функції.

Основні висновки

• Стрілочні функції мають коротший синтаксис у порівнянні зі звичайними функціями.
• Вони не мають власного контексту, що робить їх особливо практичними для використання у функціях зворотного виклику.
• Видалення фігурних дужок і оператора повернення можливе, якщо функція повертає лише вираз.

Вступ до стрілочних функцій

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

Щоб зрозуміти, що таке стрілочні функції, можна використовувати традиційні функції як гарну відправну точку. Якщо ви оголошуєте функцію за допомогою ключового слова function, вона зазвичай трохи довша і менш елегантна. Ось приклад стандартної функції в JavaScript:

function doIt() { console.log("Виконую"); }

Це відправна точка, з якої ми перейдемо до функцій-стрілок.

Крок 1: Оголошення стрілочної функції

Замість ключового слова function ви можете просто помістити параметри в дужки, а потім використовувати стрілку, за якою слідує тіло функції. Ось як виглядає попередня функція у вигляді стрілочної функції:

const doIt = () => { console.log("Виконую"); };

Як бачите, синтаксис набагато компактніший. Після першої спроби ви можете перевірити, чи працює функція коректно.

Крок 2: Використання стрілочних функцій з масивами

Ще одна велика перевага стрілочних функцій проявляється при використанні їх з масивами. Розглянемо приклад. Припустимо, у вас є масив чисел, і ви хочете знайти позицію певного числа. Тут ми використовуємо метод findIndex для знаходження індексу:

const numbers = [2, 3, 4, 5]; const index = numbers.findIndex((element) => element === 3); console.log(index);

Функція Arrow значно спрощує читабельність коду і зменшує потребу в додатковому ключовому слові функції.

Крок 3: Скорочення функцій зі стрілками

Якщо функція Arrow має лише один вираз, ви можете опустити фігурні дужки і ключове слово return. Ось як це виглядає, коли ми ще більше скоротимо функцію findIndex:

const index = numbers.findIndex(елемент => елемент === 3);

Це не тільки коротше, але й елегантніше. Ви можете протестувати функцію і переконатися, що вона все ще працює коректно.

Крок 4: Робота з ключовим словом this

Вирішальною перевагою функцій зі стрілками є робота з контекстом this. У класичних функціях це часто стає непередбачуваним, особливо коли функція використовується як зворотний виклик. Стрілочні функції, з іншого боку, прив'язують її до контексту, в якому вона була визначена.

Погляньте на наступний приклад:

const obj = { text: "Text", print: function() { console.log(this.text); } };

obj.print(); // Виводить "Текст"

Однак, якщо ви використовуєте setTimeout зі звичайною функцією, контекст цього змінюється:

setTimeout(function() { console.log(this.text); }, 1000); // Вивід невизначений

Використовуючи функцію Arrow всередині setTimeout, ви отримуєте той самий результат, що і з класичною функцією, але без втрати контексту:

setTimeout(() => { console.log(this.text); }, 1000); // Виводиться "text"

Крок 5: Збереження присвоєння this

Ви також можете прив'язати this до змінної, щоб забезпечити доступ до неї. Однак цей патерн часто менш елегантний, ніж використання стрілочних функцій.

const self = this; setTimeout(function() { console.log(self.text); }, 1000);

Переваги стрілочних функцій

• Вони коротші та елегантніші у порівнянні зі звичайними оголошеннями функцій.
• Вони не мають власного контексту this, що спрощує їх використання у функціях зворотного виклику.
• Синтаксис дозволяє зробити код набагато більш читабельним.

Підсумок

Функції зі стрілками пропонують практичний спосіб ефективного оголошення функцій JavaScript. Новий синтаксис не тільки покращує читабельність, але й значно спрощує роботу з контекстом this. Ви повинні використовувати стрілочні функції насамперед тоді, коли вам потрібні функції зворотного виклику або коротші функціональні вирази.