Розкодуй свою кар’єру: знижка 20% на курси у форматі менторингу від FoxmindEd весь грудень 🎄
Дізнатися більше
02.04.2024
10 хвилин читання

Про стрілочні функції в JavaScript

JavaScript – це мова програмування для створення інтерактивних веб-сторінок. Функції в JavaScript дають змогу створювати блоки коду, які можна повторно використовувати для виконання різних завдань. У мові JS функції є об’єктами першого класу, що дає змогу передавати їх як аргументи, привласнювати змінним, повертати з інших функцій і зберігати в структурах даних. Але відтоді як з’явилася стрілочна функція js, підхід до написання функцій отримав нову перспективу.

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

А навчитися програмування на JS з нуля можна на курсі JavaScript Start від компанії FoxmindED.

Наш онлайн курс JavaScript з нуля полегшує студентам процес підготовки до основних курсів Front End Developer або Node.js Developer.
Почніть свій шлях у програмування з нами!
Деталі курсу

Що таке стрілочні функції?

Стрілочні функції є новим синтаксисом для визначення функцій у JavaScript, введеним у ECMAScript 6 (ES6). Вони надають більш коротку і виразну альтернативу традиційним функціям. Однією з їхніх ключових особливостей є те, що вони не мають свого власного контексту this (вони його беруть з оточуючого (батьківського) контексту, що спрощує розуміння та запобігає помилкам, пов’язаним зі зміною значення this), а також їхній коротший синтаксис (це робить код компактнішим і легшим для сприйняття, особливо для простих операцій або функцій).

Приклад синтаксису стрілочних функцій:

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

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

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

Основні відмінності від звичайних функцій

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

У цьому прикладі всередині функції зворотного виклику setTimeout традиційна функція втратить зв’язок із контекстом this, і тому this.name буде undefined.

А в цьому прикладі, використовуючи стрілочну функцію, ми зберігаємо контекст this, і код виводить очікуваний результат.

Переваги та використання 

Стрілочні функції надають кілька переваг:

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

Приклади використання стрілочних функцій у реальних задачах:

  • Обробники подій

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

  • Колбеки

Використання стрілочних функцій як колбеків робить код коротшим і зменшує необхідність створення анонімних функцій.

  • Методи об’єктів

У цьому прикладі використання стрілочної функції всередині методу об’єкта дає змогу зберегти контекст this і звернутися до властивостей об’єкта.

Таким чином, стрілочні функції широко використовуються в різних аспектах веб-розробки, де стислість і зручність синтаксису є важливими, а також, де потрібне управління контекстом this. Їхнє застосування робить код більш чистим, читабельним і підтримуваним.

Обмеження та недоліки

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

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

Таким чином, під час використання стрілочних функцій необхідно пам’ятати про їхні обмеження і ретельно аналізувати контекст, у якому вони будуть застосовані. У деяких випадках, особливо коли потрібен доступ до аргументів функції або використання оператора new, краще віддати перевагу традиційним функціям.

Міжсайтовий скриптинг (XSS) 

Під час проектування безпечного веб-додатка важливо пам’ятати, що використання стрілочних функцій може розширити сферу видимості змінних і збільшити складність контролю над доступними всередині них змінними та функціями. Це може збільшити ризик XSS атак, якщо не буде проведено достатнього аналізу безпеки і не буде вжито відповідних запобіжних заходів.

Як впливає використання стрілочних функцій на безпеку?

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

Які існують заходи щодо захисту від XSS атак?

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

Найкращі практики роботи

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

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

2. Уникайте їх використання для методів об’єктів через відсутність власного this. Це може призвести до проблем з контекстом. Замість цього використовуйте традиційний синтаксис функцій.

Підпишіться на наш Ютуб-канал! Корисні відео для програмістів чекають на вас! YouTube
Оберіть свій курс програмування! Шлях до кар’єри програміста починається тут! Подивитись

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

4. Будьте обережні під час їх використання в колбеках. Хоча вони можуть бути зручними у функціях вищого порядку або методах масивів, переконайтеся, що їхнє застосування не спричиняє плутанини або необхідності в доступі до контексту this.

5. Проводьте тестування та аудит коду, щоб виявити потенційні проблеми з контекстом this, доступом до змінних та іншими можливими вразливостями.

6. Будьте послідовні в стилі коду. І якщо ви працюєте в команді, переконайтеся, що всі учасники проєкту дотримуються єдиних стандартів використання стрілочних функцій, щоб уникнути плутанини та невідповідності в коді.

Висновок

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

FAQ
Що таке стрілочні функції в JavaScript?

Це скорочений синтаксис для написання функцій, який також лексично пов'язує контекст this.

У чому перевага стрілочних функцій?

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

Чи можу я використовувати this у стрілочних функціях?

Так, але this у стрілочних функціях пов'язаний із контекстом, у якому функцію було створено, а не викликано.

Чи можна використовувати стрілочні функції як конструктори?

Ні, стрілочні функції не можуть використовуватися як конструктори і викинуть помилку при використанні з оператором new.

Як стрілочні функції працюють з аргументами?

Стрілочні функції не мають власного об'єкта arguments, але можуть отримувати аргументи через список параметрів.

Чи можу я визначити методи об'єкта за допомогою стрілочних функцій?

Так, але будьте обережні з контекстом this, оскільки він буде пов'язаний з оточенням, де функція була визначена.

Залишилися запитання про стрілочні функції в JS? Запитуйте в коментарях нижче!

Додати коментар

Ваш імейл не буде опубліковано. Обов'язкові поля відзначені *

Зберегти моє ім'я, імейл та адресу сайту у цьому браузері для майбутніх коментарів