Web-Dev-For-Beginners/translations/uk/2-js-basics/2-functions-methods

Основи JavaScript: Методи та функції

Скетчноут від Tomomi Imura

Тест перед лекцією

Тест перед лекцією

Коли ми думаємо про написання коду, завжди важливо забезпечити його читабельність. Хоч це може здатися нелогічним, код читається набагато більше разів, ніж пишеться. Одним із основних інструментів у наборі розробника для забезпечення підтримуваного коду є функція.

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

Ви можете пройти цей урок на Microsoft Learn!

Функції

У своїй основі функція — це блок коду, який ми можемо виконати за запитом. Це ідеально підходить для ситуацій, коли потрібно виконати одну й ту ж задачу кілька разів; замість дублювання логіки в різних місцях (що ускладнює оновлення в майбутньому), ми можемо централізувати її в одному місці та викликати, коли нам потрібно виконати операцію — функції навіть можна викликати з інших функцій!

Не менш важливою є можливість назвати функцію. Хоч це може здатися дрібницею, назва забезпечує швидкий спосіб документування частини коду. Ви можете уявити це як мітку на кнопці. Якщо я натисну кнопку з написом "Скасувати таймер", я знаю, що вона зупинить годинник.

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

Синтаксис функції виглядає наступним чином:

function nameOfFunction() { // function definition
 // function definition/body
}

Якщо я хочу створити функцію для відображення привітання, це може виглядати так:

function displayGreeting() {
  console.log('Hello, world!');
}

Коли ми хочемо викликати (або активувати) нашу функцію, ми використовуємо її назву, а потім (). Варто зазначити, що функцію можна визначити як до, так і після її виклику; компілятор JavaScript знайде її для вас.

// calling our function
displayGreeting();

NOTE: Існує особливий тип функції, відомий як метод, який ви вже використовували! Насправді, ми бачили це в нашій демонстрації вище, коли використовували console.log. Що відрізняє метод від функції, так це те, що метод прикріплений до об'єкта (console у нашому прикладі), тоді як функція є незалежною. Ви часто почуєте, як розробники використовують ці терміни взаємозамінно.

Найкращі практики для функцій

Є кілька найкращих практик, які варто пам'ятати при створенні функцій:

• Як завжди, використовуйте описові назви, щоб знати, що робить функція.
• Використовуйте camelCasing для об'єднання слів.
• Зосереджуйте функції на виконанні конкретного завдання.

Передача інформації у функцію

Щоб зробити функцію більш універсальною, часто потрібно передавати їй інформацію. Якщо ми розглянемо наш приклад displayGreeting вище, він буде відображати лише Hello, world!. Не найкорисніша функція, яку можна створити. Якщо ми хочемо зробити її трохи більш гнучкою, наприклад, дозволити комусь вказати ім'я людини, яку потрібно привітати, ми можемо додати параметр. Параметр (іноді також називається аргументом) — це додаткова інформація, яка передається функції.

Параметри перераховуються в частині визначення в дужках і розділяються комами, як показано нижче:

function name(param, param2, param3) {

}

Ми можемо оновити наш displayGreeting, щоб приймати ім'я та відображати його.

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Коли ми хочемо викликати нашу функцію та передати параметр, ми вказуємо його в дужках.

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

Значення за замовчуванням

Ми можемо зробити нашу функцію ще більш гнучкою, додавши більше параметрів. Але що, якщо ми не хочемо вимагати, щоб кожне значення було вказане? Залишаючись у нашому прикладі привітання, ми можемо залишити ім'я обов'язковим (нам потрібно знати, кого ми вітаємо), але хочемо дозволити налаштувати саме привітання за бажанням. Якщо хтось не хоче його налаштовувати, ми надаємо значення за замовчуванням. Щоб надати значення за замовчуванням параметру, ми встановлюємо його так само, як встановлюємо значення для змінної — parameterName = 'defaultValue'. Повний приклад:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Коли ми викликаємо функцію, ми можемо вирішити, чи хочемо встановити значення для salutation.

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

Значення, що повертаються

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

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

Якщо функція повертає щось, то використовується ключове слово return. Ключове слово return очікує значення або посилання на те, що повертається, як показано нижче:

return myVariable;

Ми можемо створити функцію для створення повідомлення привітання та повернення значення назад до виклику.

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

Коли ми викликаємо цю функцію, ми зберігаємо значення у змінній. Це дуже схоже на те, як ми встановлюємо змінну на статичне значення (наприклад, const name = 'Christopher').

const greetingMessage = createGreetingMessage('Christopher');

Функції як параметри для функцій

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

Наприклад, розглянемо setTimeout, який запускає таймер і виконує код після його завершення. Нам потрібно сказати йому, який код ми хочемо виконати. Звучить як ідеальна робота для функції!

Якщо ви запустите код нижче, через 3 секунди ви побачите повідомлення 3 секунди минуло.

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Анонімні функції

Давайте ще раз поглянемо на те, що ми створили. Ми створюємо функцію з назвою, яка буде використана лише один раз. У міру ускладнення нашого додатка ми можемо побачити, що створюємо багато функцій, які будуть викликані лише один раз. Це не ідеально. Як виявляється, нам не завжди потрібно надавати назву!

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

Давайте перепишемо код вище, щоб використовувати анонімну функцію:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

Якщо ви запустите наш новий код, ви помітите, що отримуєте ті ж результати. Ми створили функцію, але не довелося давати їй назву!

Функції зі стрілками

Одним із скорочень, поширених у багатьох мовах програмування (включаючи JavaScript), є можливість використовувати так звану стрілкову або жирну стрілкову функцію. Вона використовує спеціальний індикатор =>, який виглядає як стрілка — звідси і назва! Використовуючи =>, ми можемо пропустити ключове слово function.

Давайте перепишемо наш код ще раз, щоб використовувати функцію зі стрілкою:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

Коли використовувати кожну стратегію

Тепер ви бачили три способи передати функцію як параметр і, можливо, задаєтеся питанням, коли використовувати кожен. Якщо ви знаєте, що будете використовувати функцію більше одного разу, створіть її звичайним способом. Якщо ви будете використовувати її лише в одному місці, зазвичай краще використовувати анонімну функцію. Чи використовувати функцію зі стрілкою або більш традиційний синтаксис function — залежить від вас, але ви помітите, що більшість сучасних розробників віддають перевагу =>.

---

🚀 Виклик

Чи можете ви сформулювати в одному реченні різницю між функціями та методами? Спробуйте!

Тест після лекції

Тест після лекції

Огляд і самостійне навчання

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

Завдання

Розваги з функціями

---

Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.