Стрілкові функції проти звичайних

JavaScriptMiddle~2 хв читання

1. Синтаксис

Звичайна функція:

javascript

function sayHello(name) {
  return `Hello, ${name}!`;
}

Стрілкова функція:

javascript

const sayHello = (name) => `Hello, ${name}!`;

Короткий синтаксис стрілок робить код коротшим і особливо зручний у колбеках (map, filter, reduce тощо).

2. Основні відмінності

Особливість	`function`	`=>` (стрілкова функція)
`this`	Має свій `this` (залежить від контексту виклику)	Не має власного `this` - бере `this` із зовнішнього контексту
`arguments`	Є об'єкт `arguments`	Немає `arguments`
`new` / конструктор	Можна використовувати з `new`	Не можна використовувати з `new`
`prototype`	Має	Не має
`return`	Потрібен явно (окрім короткого запису)	Можна писати без `return`, якщо однорядкова
Підтримка `super` / `this` у класах	Працює як зазвичай	Захоплює `this` батька (зручно для обробників)

Приклад 1. Різниця в `this`

Звичайна функція

javascript

const user = {
  name: 'Tim',
  sayHi: function() {
    console.log(this.name);
  }
};

user.sayHi(); // 'Tim'

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

Стрілкова функція

javascript

const user = {
  name: 'Tim',
  sayHi: () => {
    console.log(this.name);
  }
};

user.sayHi(); // undefined

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

Приклад 2. Використання `this` всередині методу з `setTimeout`

javascript

const user = {
  name: 'Tim',
  sayHi: function() {
    setTimeout(function() {
      console.log(this.name);
    }, 1000);
  }
};

user.sayHi(); // undefined (this вказує на window)

Виправлено за допомогою стрілкової функції:

javascript

const user = {
  name: 'Tim',
  sayHi: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

user.sayHi(); // 'Tim'

Тут стрілкова функція не створює власний this, тому бере його з sayHi() - і це потрібний нам об'єкт user.

Приклад 3. Не можна використовувати `new` зі стрілкою

javascript

function User(name) {
  this.name = name;
}
const u1 = new User('Tim'); // працює

const ArrowUser = (name) => {
  this.name = name;
};
const u2 = new ArrowUser('Tim'); // TypeError: ArrowUser is not a constructor

Стрілкові функції не мають прототипу і не можуть бути конструкторами.

Приклад 4. Немає `arguments`

javascript

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

javascript

const showArgsArrow = () => {
  console.log(arguments);
};
showArgsArrow(1, 2, 3); // ReferenceError: arguments is not defined

Використовуй rest-параметри замість arguments:

javascript

const showArgsArrow = (...args) => console.log(args);
showArgsArrow(1, 2, 3); // [1, 2, 3]

Приклад 5. Короткий запис без `return` і `{}`

javascript

const double = x => x * 2;
console.log(double(4)); // 8

Якщо функція однорядкова, можна не писати return і фігурні дужки.

Коли використовувати

Сценарій	Що обрати
Методи об'єкта / класів (потрібен `this`)	`function`
Колбеки (`map`, `filter`, `reduce`, `forEach`)	`=>`
Обробники подій у класах React (щоб не втратити `this`)	`=>`
Конструктори, прототипи	`function`
Короткі утилітарні функції	`=>`

Коротко:

function - універсальний інструмент із власним контекстом, може бути конструктором. => - компактна форма, без this, arguments і prototype, ідеальна для вкладених функцій і колбеків.

Швидкий підсумок у таблиці:

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

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

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

Premium

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