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

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

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

Стрілкова функція - це скорочений синтаксис для оголошення функцій у JavaScript. Вона записується через стрілку =>.

javascript

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

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

Робить те саме, але коротше і читається як:

"прийми a і b, поверни їхню суму".

Особливість	Опис
Короткий синтаксис	Не потрібні ключові слова `function`, `return` (якщо 1 вираз) і фігурні дужки.
Не має власного `this`	Успадковує `this` із зовнішньої області (лексично).
Не має `arguments`	Якщо потрібні аргументи - використовуй rest-параметри (`...args`).
Не може бути конструктором	Не можна викликати через `new`.
Не має `prototype`	Не підходить для створення класів або методів з прототипом.

javascript

const double = x => x * 2;

javascript

const add = (a, b) => a + b;

javascript

const sayHi = () => console.log("Hello!");

javascript

const sum = (a, b) => {
  const result = a + b;
  return result;
};

Потрібно обгорнути об'єкт у дужки, інакше {} сприйметься як тіло функції.

javascript

const createUser = (name, age) => ({ name, age });

Стрілкова функція не має свого this. Вона успадковує this із зовнішнього контексту, в якому була створена.

javascript

function Timer() {
  this.seconds = 0;
  setInterval(function () {
    this.seconds++; // 'this' вказує на window / undefined
  }, 1000);
}

javascript

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++; // 'this' вказує на сам об'єкт Timer
  }, 1000);
}

Стрілка "захоплює" контекст зовнішньої функції, тому this працює очікувано.

javascript

const user = {
  name: 'Alex',
  sayHi: () => console.log(`Hi, I'm ${this.name}`) // 'this' не вкаже на user!
};
user.sayHi(); // Hi, I'm undefined

javascript

const User = (name) => { this.name = name; }; // Помилка
const u = new User('Tim'); // TypeError

javascript

const log = () => console.log(arguments); // ReferenceError

Використовуй rest:

javascript

const log = (...args) => console.log(args);

Колбеки (наприклад, у map, filter, forEach):

javascript
const doubled = [1, 2, 3].map(n => n * 2);
Асинхронні ланцюжки (then, catch, finally):

javascript
fetch('/api') .then(res => res.json()) .then(data => console.log(data));
Вкладені функції, де потрібно зберегти this:

javascript
class User { constructor(name) { this.name = name; } greetLater() { setTimeout(() => console.log(`Hi, ${this.name}`), 1000); } }

Властивість	`function`	`=>` (стрілка)
Має свій `this`	Так	Ні
Має `arguments`	Так	Ні
Можна викликати через `new`	Так	Ні
Можна використовувати як метод	Так	Не рекомендується
Синтаксис	Довший	Короткий, лаконічний

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

Premium

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