Пошук уроків, статей та іншого контенту
Познайомтеся зі стрілковими функціями та їх компактним синтаксисом. Навчіться використовувати різні форми запису arrow functions і дізнайтеся про їх ключові відмінності від звичайних функцій.
Стрілкова функція — це компактний спосіб записати функцію в JavaScript. Вона отримала назву через оператор =>, який нагадує стрілку.
Звичайна функція:
function greet(name) {
return `Привіт, ${name}!`;
}
console.log(greet("Олена"));Та сама функція у стрілковому синтаксисі:
const greet = (name) => {
return `Привіт, ${name}!`;
};
console.log(greet("Олена"));Стрілкова функція є функціональним виразом, тому її часто зберігають у змінній за допомогою const.
Загальна форма запису:
const functionName = (parameters) => {
// тіло функції
};Наприклад:
const add = (a, b) => {
return a + b;
};
console.log(add(2, 3)); // 5Ліва частина містить параметри, оператор => відділяє параметри від тіла функції, а права частина містить код, який виконується під час виклику.
Якщо функція має лише один параметр, круглі дужки можна не писати:
const double = number => {
return number * 2;
};
console.log(double(4)); // 8Але такий запис також правильний:
const double = (number) => {
return number * 2;
};Круглі дужки часто залишають для єдиного стилю коду або щоб зробити синтаксис зрозумілішим.
Якщо параметрів два або більше, круглі дужки обов’язкові:
const multiply = (a, b) => {
return a * b;
};
console.log(multiply(3, 4)); // 12Якщо функція не має параметрів, потрібно використовувати порожні круглі дужки:
const getMessage = () => {
return "Функція виконана";
};
console.log(getMessage());Якщо тіло стрілкової функції складається з одного виразу, фігурні дужки та return можна опустити.
Такий запис:
const square = (number) => {
return number * number;
};можна скоротити до:
const square = number => number * number;
console.log(square(5)); // 25У цьому випадку результат виразу повертається автоматично. Це називається неявним поверненням.
Порівняйте два варіанти:
const subtract = (a, b) => {
return a - b;
};
const divide = (a, b) => a / b;Обидві функції повертають результат обчислення.
Використовуються фігурні дужки та ключове слово return:
const isAdult = age => {
return age >= 18;
};Фігурних дужок і return немає:
const isAdult = age => age >= 18;Якщо після => поставити фігурні дужки, JavaScript сприйматиме їх як тіло функції. У такому разі return потрібно написати самостійно:
const getNumber = () => {
10;
};
console.log(getNumber()); // undefinedУ прикладі вираз 10 не повертається, тому результатом буде undefined.
Правильний варіант:
const getNumber = () => {
return 10;
};або:
const getNumber = () => 10;Щоб неявно повернути об’єкт, його потрібно взяти в круглі дужки:
const createUser = (name, age) => ({
name: name,
age: age
});
console.log(createUser("Іван", 25));Круглі дужки допомагають JavaScript відрізнити об’єкт від блоку коду.
Скорочений запис властивостей дозволяє написати ще компактніше:
const createUser = (name, age) => ({ name, age });
console.log(createUser("Іван", 25));Стрілкові функції часто передають як аргументи в інші функції. Особливо це поширено під час роботи з масивами.
mapМетод map створює новий масив, застосовуючи функцію до кожного елемента:
const prices = [10, 20, 30];
const doubledPrices = prices.map(price => price * 2);
console.log(doubledPrices); // [20, 40, 60]filterМетод filter залишає елементи, для яких функція повертає true:
const ages = [12, 18, 25, 15, 30];
const adultAges = ages.filter(age => age >= 18);
console.log(adultAges); // [18, 25, 30]forEachМетод forEach виконує функцію для кожного елемента масиву:
const names = ["Анна", "Олег", "Марія"];
names.forEach(name => {
console.log(`Привіт, ${name}!`);
});Якщо функція має кілька інструкцій, використовують фігурні дужки:
const calculateTotal = (price, quantity) => {
const total = price * quantity;
const message = `Загальна сума: ${total}`;
console.log(message);
return total;
};
calculateTotal(100, 3);У такому варіанті return потрібно вказати явно, якщо функція має повернути значення.
thisНайважливіша особливість стрілкових функцій — вони не створюють власного this.
Звичайна функція отримує значення this залежно від способу виклику:
const user = {
name: "Олена",
sayName: function () {
console.log(this.name);
}
};
user.sayName(); // ОленаУ методі sayName значення this посилається на об’єкт user.
Стрілкова функція бере this із зовнішнього контексту:
const user = {
name: "Олена",
sayName: () => {
console.log(this.name);
}
};
user.sayName(); // undefinedТому стрілкові функції зазвичай не використовують як методи об’єктів, якщо всередині методу потрібно звертатися до властивостей через this.
Правильний варіант для методу об’єкта:
const user = {
name: "Олена",
sayName() {
console.log(this.name);
}
};
user.sayName(); // ОленаСтрілкові функції особливо зручні для коротких callback-функцій:
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]Якби використовувалася звичайна функція, код був би довшим:
const evenNumbers = numbers.filter(function (number) {
return number % 2 === 0;
});Обидва варіанти працюють однаково, але стрілкова функція робить короткий callback читабельнішим.
argumentsСтрілкові функції не мають власного об’єкта arguments. Якщо потрібно отримати всі передані аргументи, краще використати rest-параметр:
const sum = (...numbers) => {
return numbers.reduce((total, number) => total + number, 0);
};
console.log(sum(1, 2, 3, 4)); // 10...numbers збирає всі аргументи в масив numbers.
Для більшості сучасного коду rest-параметр є зрозумілішим і зручнішим, ніж arguments.
newСтрілкові функції не можуть бути конструкторами. Тобто їх не можна викликати з оператором new.
Для створення об’єктів-конструкторів використовують звичайні функції або класи:
function User(name) {
this.name = name;
}
const user = new User("Олег");
console.log(user.name); // ОлегСтрілкові функції призначені переважно для коротких операцій, callback-функцій і функцій, яким не потрібен власний this.
const products = [
{ name: "Книга", price: 250, inStock: true },
{ name: "Зошит", price: 50, inStock: false },
{ name: "Ручка", price: 30, inStock: true }
];
const availableProducts = products
.filter(product => product.inStock)
.map(product => ({
name: product.name,
priceWithTax: product.price * 1.2
}));
availableProducts.forEach(product => {
console.log(`${product.name}: ${product.priceWithTax} грн`);
});У цьому прикладі:
filter отримує стрілкову функцію для перевірки наявності товару;
map отримує стрілкову функцію, яка створює новий об’єкт;
forEach отримує стрілкову функцію для виведення даних;
об’єкт у map повертається неявно завдяки круглим дужкам.
Стрілкові функції добре підходять для:
коротких обчислень;
callback-функцій;
операцій із масивами;
функцій без власного контексту this;
невеликих функціональних виразів.
Звичайна функція може бути кращим вибором, коли:
функція є методом об’єкта і використовує this;
потрібен власний arguments;
функція використовується як конструктор;
складне тіло функції краще читається з ключовим словом function.
returnЯкщо використовуються фігурні дужки, результат потрібно повернути явно:
const numbers = [1, 2, 3];
const doubled = numbers.map(number => {
number * 2;
});
console.log(doubled); // [undefined, undefined, undefined]Правильно:
const doubled = numbers.map(number => {
return number * 2;
});Або коротше:
const doubled = numbers.map(number => number * 2);Такий код не повертає об’єкт:
const getUser = () => {
name: "Олена";
};JavaScript сприймає фігурні дужки як тіло функції. Правильний варіант:
const getUser = () => ({
name: "Олена"
});thisНе слід замінювати звичайний метод об’єкта на стрілкову функцію, якщо метод використовує this:
const person = {
name: "Іван",
introduce: () => `Мене звати ${this.name}`
};Правильно:
const person = {
name: "Іван",
introduce() {
return `Мене звати ${this.name}`;
}
};Цей запис некоректний:
const add = a, b => a + b;Потрібно використати круглі дужки:
const add = (a, b) => a + b;Створіть стрілкову функцію greet, яка приймає ім’я та повертає рядок "Привіт, ім’я!".
Створіть функцію isPositive, яка перевіряє, чи є число додатним.
За допомогою map створіть новий масив квадратів чисел [2, 4, 6, 8].
За допомогою filter залиште з масиву [5, 12, 8, 20, 3] лише числа, більші за 10.
Створіть об’єкт із методом, який використовує this для виведення імені.
Стрілкова функція використовує оператор =>.
Для одного параметра круглі дужки можна опустити.
Для відсутності параметрів потрібні порожні круглі дужки.
Одновиразна функція може повертати значення неявно.
Якщо використовуються фігурні дужки, для повернення значення потрібен return.
Об’єкт для неявного повернення потрібно взяти в круглі дужки.
Стрілкові функції не мають власного this, arguments і не можуть використовуватися з new.
Вони особливо зручні для callback-функцій і роботи з масивами.