Вчитися та розуміти React – практичний урок.

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

Усі відео з уроку Вивчайте та розумійте React - практичний посібник.

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

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

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

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

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

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

Щоб зрозуміти, що таке стрілочні функції, можна використовувати традиційні функції як гарну відправну точку. Якщо ви оголошуєте функцію за допомогою ключового слова 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. Ви повинні використовувати стрілочні функції насамперед тоді, коли вам потрібні функції зворотного виклику або коротші функціональні вирази.

Поширені запитання

Що таке стрілочні функції? Стрілочніфункції - це скорочений синтаксис функцій у JavaScript, який було представлено в ES6.

Коли слід використовувати стрілочніфункції? Використовуйте стрілочні функції переважно у сценаріях зворотного виклику або коли вам потрібні анонімні функції.

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