run-dev

Стрелочные функции в JavaScript: arrow function в JS

Стрелочные функции (Arrow Functions) — это короткий синтаксис для объявления функций в JavaScript, введенный в ES6. Они позволяют писать компактный код и автоматически сохраняют значение this из окружающего контекста.

Синтаксис стрелочных функций

Стрелочная функция записывается с помощью => (функциональной стрелки):

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

Стрелочные функции могут иметь разное количество параметров, а их синтаксис зависит от этого.

Без параметров

const greet = () => console.log('Привет!');
greet(); // 'Привет!'

Один параметр (скобки можно опустить)

const square = x => x * x;
console.log(square(4)); // 16

Несколько параметров

const multiply = (a, b) => a * b;
console.log(multiply(3, 4)); // 12

Тело функции с фигурными скобками

Если тело функции содержит несколько выражений, используются {} и return (если нужно вернуть значение):

const getUser = (name, age) => {
    return { name, age };
};

console.log(getUser('Alice', 25)); // { name: 'Alice', age: 25 }

Возвращение объекта без return

Если объект возвращается без return, его нужно обернуть в круглые скобки:

const getUser = (name, age) => ({ name, age });
console.log(getUser('Bob', 30)); // { name: 'Bob', age: 30 }

Отличия стрелочных функций от обычных

1. Нет собственного this

В стрелочных функциях this всегда берется из окружающего контекста.

function User(name) {
    this.name = name;

    this.sayHi = function() {
        setTimeout(() => {
            console.log(`Привет, я ${this.name}`);
        }, 1000);
    };
}

const user = new User('Alice');
user.sayHi(); // Привет, я Alice

2. Нельзя использовать arguments

Стрелочные функции не имеют собственного arguments, но можно использовать rest параметры.

const sum = (...numbers) => numbers.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3)); // 6

3. Нельзя вызывать с new

Стрелочные функции не могут быть конструкторами.

const Person = (name) => {
    this.name = name;
};
const person = new Person('Alice'); // Ошибка

4. Нельзя использовать super

При использовании super внутри методов классов стрелочные функции не подходят.

Когда использовать стрелочные функции

Для коротких функций, например, обработчиков событий и колбэков:

document.addEventListener('click', () => console.log('Клик!'));

При работе с методами массивов:

const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n);
console.log(squared); // [1, 4, 9]

При передаче функций как параметров:

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

Больше записей