Стрілочна функції в JavaScript: швидко, просто і без проблем

JavaScript постійно розвивається, і одна з найулюбленіших сучасних фішок розробників — це стрілочні функції (arrow functions). Їх легко писати, вони виглядають лаконічно і дають кілька важливих переваг над традиційними функціональними виразами. Давайте розберемося, що це таке, коли їх використовувати і як уникнути типових помилок.

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

Це коротший синтаксис для запису функції, представлений у ECMAScript 6 (ES6):

// Звичайна функція
function add(a, b) {
  return a + b;
}

// Стрілочна функція
const add = (a, b) => a + b;

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

Основні переваги

1. Лаконічність

Ви можете зменшити кількість коду, що особливо зручно для однорядкових виразів.

const square = x => x * x;

2. Не мають власного this

Це найважливіша відмінність. Стрілочні функції не створюють нового контексту this, а “успадковують” його від оточення. Це корисно в колбеках і методах:

class Timer {
  seconds = 0;
  start() {
    setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
}

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

3. Не мають arguments

У стрілочних функціях немає власного об’єкта arguments. Якщо вам потрібно працювати з аргументами, краще використати rest-параметри:

const sum = (...args) => args.reduce((a, b) => a + b);

Потенційні проблеми

Не можна використовувати як методи об’єкта

const user = {
  name: "Анна",
  sayHi: () => {
    console.log(`Привіт, я ${this.name}`); // undefined
  }
};

this тут не буде вказувати на об’єкт user. Використовуйте звичайну функцію для методів класів або об’єктів.

Не підходять для конструкторів

Стрілочні функції не мають власного this, тому їх не можна використовувати як конструктори:

const Person = (name) => {
  this.name = name; // Помилка
};

Де їх варто використовувати

• В коротких функціях з простим обчисленням
• У методах масивів: map, filter, reduce
• У колбеках таймерів, обробників подій (якщо не потрібен власний this)
• У React-компонентах як функції без стану

Висновок

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

Пишіть коротко, пишіть чисто — обирайте стрілочки!