21 KiB

Raw Blame History Unescape Escape

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

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

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

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

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

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

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

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

Функції

Функція – це автономний блок коду, який виконує певне завдання. Вона інкапсулює логіку, яку можна виконати за потреби.

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

Дуже важливо давати функціям описові назви. Добре названі функції чітко передають свою мету – коли ви бачите cancelTimer(), ви одразу розумієте, що вона робить, так само як чітко позначена кнопка повідомляє, що станеться при її натисканні.

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

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

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

Розберемо це:

Ключове слово function повідомляє JavaScript: "Гей, я створюю функцію!"
nameOfFunction – це місце, де ви даєте функції описову назву
Круглі дужки () – це місце, де можна додати параметри (ми скоро до цього дійдемо)
Фігурні дужки {} містять фактичний код, який виконується при виклику функції

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

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

Ця функція виводить "Hello, world!" у консоль. Після того, як ви її визначили, ви можете використовувати її стільки разів, скільки потрібно.

Щоб виконати (або "викликати") вашу функцію, напишіть її назву, а потім круглі дужки. JavaScript дозволяє визначати функцію до або після її виклику – двигун JavaScript самостійно впорається з порядком виконання.

// calling our function
displayGreeting();

Коли ви виконаєте цей рядок, він виконає весь код всередині вашої функції displayGreeting, відображаючи "Hello, world!" у консолі вашого браузера. Ви можете викликати цю функцію повторно.

Примітка: Протягом цих уроків ви використовували методи. console.log() – це метод, тобто функція, яка належить об'єкту console. Основна різниця полягає в тому, що методи прив'язані до об'єктів, тоді як функції існують незалежно. Багато розробників використовують ці терміни взаємозамінно в неформальних розмовах.

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

Ось кілька порад, які допоможуть вам писати чудові функції:

Давайте функціям чіткі, описові назви – ваш майбутній "я" буде вам вдячний!
Використовуйте camelCasing для назв із кількох слів (наприклад, calculateTotal замість calculate_total)
Зосередьте кожну функцію на виконанні однієї задачі добре

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

Наша функція displayGreeting обмежена – вона може показувати "Hello, world!" для всіх. Параметри дозволяють зробити функції більш гнучкими та корисними.

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

Ви перераховуєте параметри всередині круглих дужок при визначенні функції, розділяючи кілька параметрів комами:

function name(param, param2, param3) {

}

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

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

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

Зверніть увагу, як ми використовуємо зворотні лапки (`) і ${} для вставки імені прямо в наше повідомлення – це називається шаблонним літералом, і це дуже зручний спосіб створення рядків із змінними.

Тепер, коли ми викликаємо нашу функцію, ми можемо передати будь-яке ім'я:

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

JavaScript бере рядок 'Christopher', присвоює його параметру name і створює персоналізоване повідомлення "Hello, Christopher!"

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

Що, якщо ми хочемо зробити деякі параметри необов'язковими? Тут стануть у нагоді значення за замовчуванням!

Припустимо, ми хочемо, щоб люди могли налаштовувати слово привітання, але якщо вони не вкажуть його, ми просто використаємо "Hello" як запасний варіант. Ви можете встановити значення за замовчуванням, використовуючи знак рівності, так само як при встановленні змінної:

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

Тут name все ще обов'язковий, але salutation має резервне значення 'Hello', якщо ніхто не надасть іншого привітання.

Тепер ми можемо викликати цю функцію двома різними способами:

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

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

У першому виклику JavaScript використовує значення за замовчуванням "Hello", оскільки ми не вказали привітання. У другому виклику він використовує наше власне "Hi". Така гнучкість робить функції адаптивними до різних сценаріїв.

Повернення значень

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

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

Щоб повернути значення, використовуйте ключове слово return, за яким слідує те, що ви хочете повернути:

return myVariable;

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

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

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

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

Щоб використовувати повернене значення, ми можемо зберегти його у змінній, як будь-яке інше значення:

const greetingMessage = createGreetingMessage('Christopher');

Тепер greetingMessage містить "Hello, Christopher", і ми можемо використовувати його будь-де в нашому коді – для відображення на веб-сторінці, включення в електронний лист або передачі іншій функції.

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

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

Цей шаблон дуже поширений, коли ви хочете сказати: "коли щось станеться, виконайте інший код". Наприклад, "коли таймер закінчиться, виконайте цей код" або "коли користувач натисне кнопку, викличте цю функцію".

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

Спробуйте цей код – через 3 секунди ви побачите повідомлення:

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

Зверніть увагу, як ми передаємо displayDone (без круглих дужок) у setTimeout. Ми не викликаємо функцію самі – ми передаємо її setTimeout і кажемо: "викличте це через 3 секунди".

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

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

JavaScript дозволяє створювати анонімні функції – функції без назви, які можна визначити прямо там, де вони потрібні.

Ось як ми можемо переписати наш приклад таймера, використовуючи анонімну функцію:

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

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

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

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

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

Ось наш приклад таймера, використовуючи стрілкову функцію:

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

() – це місце для параметрів (порожнє в цьому випадку), потім йде стрілка =>, і нарешті тіло функції у фігурних дужках. Це забезпечує ту ж функціональність з більш компактним синтаксисом.

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

Коли слід використовувати кожен підхід? Практичне правило: якщо ви будете використовувати функцію кілька разів, дайте їй назву і визначте її окремо. Якщо вона потрібна для одного конкретного використання, розгляньте анонімну функцію. Обидва стрілкові функції та традиційний синтаксис є допустимими варіантами, хоча стрілкові функції широко використовуються в сучасних кодових базах JavaScript.

🚀 Виклик

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

Виклик GitHub Copilot Agent 🚀

Використовуйте режим Agent, щоб виконати наступний виклик:

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

Завдання: Створіть файл JavaScript під назвою mathUtils.js, який містить наступні функції:

Функція add, яка приймає два параметри і повертає їх суму
Функція multiply зі значеннями параметрів за замовчуванням (другий параметр за замовчуванням дорівнює 1)
Стрілкова функція square, яка приймає число і повертає його квадрат
Функція calculate, яка приймає іншу функцію як параметр і два числа, а потім застосовує функцію до цих чисел
Продемонструйте виклик кожної функції з відповідними тестовими випадками

Дізнайтеся більше про режим Agent тут.

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

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

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

Завдання

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

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

21 KiB Raw Blame History Unescape Escape