Коли краще не використовувати стрілкові функції?

JavaScriptJunior~1 хв читання

Стрілкові функції (=>) - зручний синтаксис, але вони не завжди підходять. Є ситуації, де потрібно використовувати звичайні function, інакше код буде працювати неправильно або неочевидно.

1. Коли потрібен власний `this`

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

Погано:

javascript

const user = {
  name: 'Тим',
  sayHi: () => {
    console.log(`Привіт, ${this.name}`); // this = undefined
  }
};

user.sayHi(); // "Привіт, undefined"

Добре:

javascript

const user = {
  name: 'Тим',
  sayHi() {
    console.log(`Привіт, ${this.name}`);
  }
};

user.sayHi(); // "Привіт, Тим"

2. Коли функція має бути конструктором

Стрілкові функції не можна викликати через new - у них немає внутрішнього [[Construct]].

Помилка:

javascript

const Person = (name) => {
  this.name = name;
};
const p = new Person('Тим'); // TypeError: Person is not a constructor

Правильно:

javascript

function Person(name) {
  this.name = name;
}
const p = new Person('Тим');

3. Коли потрібен об'єкт `arguments`

Стрілкові функції не мають власного arguments.

Помилка:

javascript

const sum = () => {
  console.log(arguments); // ReferenceError
};
sum(1, 2, 3);

Правильно:

javascript

function sum() {
  console.log(arguments); // [1, 2, 3]
}
sum(1, 2, 3);

(Або використовувати rest-параметри: (...args) => {})

4. Коли функція використовується як обробник події (`addEventListener`)

Іноді потрібно, щоб this посилався на сам елемент, який викликав подію.

Не спрацює:

javascript

button.addEventListener('click', () => {
  this.classList.add('active'); // this = window або undefined
});

Правильно:

javascript

button.addEventListener('click', function() {
  this.classList.add('active'); // this = сам button
});

5. Коли потрібна динамічна прив'язка `this` (`call`, `apply`, `bind`)

Стрілкові функції ігнорують методи на кшталт .call() і .bind().

Не спрацює:

javascript

const greet = () => console.log(this.name);
greet.call({ name: 'Тим' }); // undefined

Робочий варіант:

javascript

function greet() {
  console.log(this.name);
}
greet.call({ name: 'Тим' }); // Тим

6. Коли читабельність важливіша за стислість

Якщо функція складна, довга або містить багато логіки - стрілкова може погіршити читабельність. Краще використовувати звичайну function із зрозумілим тілом і іменем.

Підсумок - не використовувати стрілкові функції, якщо:

Ситуація	Чому
Потрібен свій `this`	У стрілкових його немає
Потрібен `arguments`	У стрілкових його немає
Функція має бути конструктором (`new`)	У стрілкових немає `[[Construct]]`
Використовується як обробник DOM-події	Втратиться `this`
Потрібна динамічна прив'язка (`call`, `apply`, `bind`)	Ігнорується
Функція велика і складна	Втрачається читабельність

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.