Які відмінності Arrow function від звичайної?

Питання про функцію звичайну та стрілкову(Arrow Function) ви можете почути майже на кожному інтервʼю. Існує декілька відмінностей і зараз ми детально їх розберемо:

Syntactic sugar

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

// Лаконічно описуємо в одну строку - не пишемо {} i return

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

// Не пишемо дужки(), якщо параметр один

const square = x => x * x;

// При поверненні обʼєкту можемо не вказувати return

const createUser = (name) => ({ name: name, active: true });

Arguments

Arrow Function не має свого псевдомасиву arguments. Це повʼязано з тим що стрілкові функції використовують філософію Lambda і створені, щоб бути легковісними і максимально простими. Окрім цього, arguments вважається застарілим API i зараз ви можете використовувати більш сучасний підхід - Rest parameters.

// Використання сучасного підходу - Rest parameters

const restParamArgs = (...args) => {

console.log(args);

};

restParamArgs(1, 2, 3);

Hoisting

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

// Через Hoisting ми можемо звертатись до функції, перед тим як її оголосили

sayHi();

function sayHi() {

console.log('Hi');

}

Arrow Function створюється як значення змінної і не хоститься наверх. Тому звернутись до неї можна тільки після того, як ми її визначили. Якщо ж ви звернетесь до неї перед оголошенням, ви отримаєте помилку.

New

Звичайні функції можна викликати як конструктор з new, тоді як з Arrow Function це не спрацює, і буде помилка. Це повʼязано з тим що стрілкова функція не має внутрішнього поля [[Construct]] тому і не може бути конструктором.

Контекст виконання(this)

Остання і найважливіша відмінність це відсутність контексту виконання в Arrow Function. Це зроблено по тій самі причині, як і відсутність arguments і робить функцію максимально простою, згідно з філософією Lambda.

В звичайній функції оголошеній через ключове слово function, this буде залежати від місця її виклику(call-site). Тоді як в Arrow Function, this береться ззовні - де вона була оголошена(лексична область). Це робить стрілкову функцію більш безпечною з точки зору передбачуваності контексту виконання.

Syntactic sugar

Arguments

Hoisting

New

Контекст виконання(this)

Коментарі (0)