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

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

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

journey
    title Your JavaScript Functions Adventure
    section Foundation
      Function Syntax: 5: You
      Calling Functions: 4: You
      Parameters & Arguments: 5: You
    section Advanced Concepts
      Return Values: 4: You
      Default Parameters: 5: You
      Function Composition: 4: You
    section Modern JavaScript
      Arrow Functions: 5: You
      Anonymous Functions: 4: You
      Higher-Order Functions: 5: You

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

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

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

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

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

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

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

mindmap
  root((JavaScript Functions))
    Basic Concepts
      Declaration
        Traditional syntax
        Arrow function syntax
      Calling
        Using parentheses
        Parentheses required
    Parameters
      Input Values
        Multiple parameters
        Default values
      Arguments
        Values passed in
        Can be any type
    Return Values
      Output Data
        return statement
        Exit function
      Use Results
        Store in variables
        Chain functions
    Advanced Patterns
      Higher-Order
        Functions as parameters
        Callbacks
      Anonymous
        No name needed
        Inline definition

Функції

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

Замість написання одного й того ж коду кілька разів у програмі, ви можете упакувати його у функцію і викликати її, коли це потрібно. Такий підхід допомагає зберігати код чистим і значно спрощує оновлення. Уявіть, як складно було б змінити логіку, розкидану по 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!" у консолі вашого браузера. Ви можете викликати цю функцію повторно.

🧠 Перевірка основ функцій: Створення ваших перших функцій

Давайте перевіримо, як ви розумієте основи функцій:

• Чому ми використовуємо фігурні дужки {} у визначеннях функцій?
• Що станеться, якщо написати displayGreeting без круглих дужок?
• Чому може знадобитися викликати одну й ту ж функцію кілька разів?

flowchart TD
    A["✏️ Define Function"] --> B["📦 Package Code"]
    B --> C["🏷️ Give it a Name"]
    C --> D["📞 Call When Needed"]
    D --> E["🔄 Reuse Anywhere"]
    
    F["💡 Benefits"] --> F1["No code repetition"]
    F --> F2["Easy to maintain"]
    F --> F3["Clear organization"]
    F --> F4["Easier testing"]
    
    style A fill:#e3f2fd
    style E fill:#e8f5e8
    style F fill:#fff3e0

Примітка: Ви використовували методи протягом цих уроків. 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!"

flowchart LR
    A["🎯 Function Call"] --> B["📥 Parameters"]
    B --> C["⚙️ Function Body"]
    C --> D["📤 Result"]
    
    A1["displayGreeting('Alice')"] --> A
    B1["name = 'Alice'"] --> B
    C1["Template literal\n\`Hello, \${name}!\`"] --> C
    D1["'Hello, Alice!'"] --> D
    
    E["🔄 Parameter Types"] --> E1["Strings"]
    E --> E2["Numbers"]
    E --> E3["Booleans"]
    E --> E4["Objects"]
    E --> E5["Functions"]
    
    style A fill:#e3f2fd
    style C fill:#e8f5e8
    style D fill:#fff3e0
    style E fill:#f3e5f5

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

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

Наприклад, ми хочемо, щоб люди могли налаштувати слово привітання, але якщо вони не вкажуть його, ми просто використаємо "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". Така гнучкість робить функції адаптивними до різних сценаріїв.

🎛️ Перевірка параметрів: Робимо функції гнучкими

Перевірте своє розуміння параметрів:

• У чому різниця між параметром і аргументом?
• Чому значення за замовчуванням корисні в реальному програмуванні?
• Чи можете ви передбачити, що станеться, якщо передати більше аргументів, ніж параметрів?

stateDiagram-v2
    [*] --> NoParams: function greet() {}
    [*] --> WithParams: function greet(name) {}
    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
    
    NoParams --> Static: Same output always
    WithParams --> Dynamic: Changes with input
    WithDefaults --> Flexible: Optional customization
    
    Static --> [*]
    Dynamic --> [*]
    Flexible --> [*]
    
    note right of WithDefaults
        Most flexible approach
        Backwards compatible
    end note

Порада: Значення за замовчуванням роблять ваші функції більш зручними для користувачів. Користувачі можуть швидко почати роботу з розумними значеннями за замовчуванням, але все ще мають можливість налаштування!

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

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

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

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

return myVariable;

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

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

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

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

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

const greetingMessage = createGreetingMessage('Christopher');

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

flowchart TD
    A["🔧 Function Processing"] --> B{"return statement?"}
    B -->|Yes| C["📤 Return Value"]
    B -->|No| D["📭 Return undefined"]
    
    C --> E["💾 Store in Variable"]
    C --> F["🔗 Use in Expression"]
    C --> G["📞 Pass to Function"]
    
    D --> H["⚠️ Usually not useful"]
    
    I["📋 Return Value Uses"] --> I1["Calculate results"]
    I --> I2["Validate input"]
    I --> I3["Transform data"]
    I --> I4["Create objects"]
    
    style C fill:#e8f5e8
    style D fill:#ffebee
    style I fill:#e3f2fd

🔄 Перевірка значень, що повертаються: Отримання результатів

Оцініть своє розуміння значень, що повертаються:

• Що відбувається з кодом після оператора return у функції?
• Чому повернення значень часто краще, ніж просто виведення в консоль?
• Чи може функція повертати різні типи значень (рядок, число, булеве значення)?

pie title "Common Return Value Types"
    "Strings" : 30
    "Numbers" : 25
    "Objects" : 20
    "Booleans" : 15
    "Arrays" : 10

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

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

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

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

Давайте розглянемо 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);

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

flowchart LR
    A["📝 Function Styles"] --> B["Traditional"]
    A --> C["Arrow"]
    A --> D["Anonymous"]
    
    B --> B1["function name() {}"]
    B --> B2["Hoisted"]
    B --> B3["Named"]
    
    C --> C1["const name = () => {}"]
    C --> C2["Concise syntax"]
    C --> C3["Modern style"]
    
    D --> D1["function() {}"]
    D --> D2["No name"]
    D --> D3["One-time use"]
    
    E["⏰ When to Use"] --> E1["Traditional: Reusable functions"]
    E --> E2["Arrow: Short callbacks"]
    E --> E3["Anonymous: Event handlers"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1

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

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

🎨 Перевірка стилів функцій: Вибір правильного синтаксису

Перевірте своє розуміння синтаксису:

• Коли ви можете віддати перевагу стрілковим функціям над традиційним синтаксисом функцій?
• У чому основна перевага анонімних функцій?
• Чи можете ви придумати ситуацію, коли іменована функція краще за анонімну?

quadrantChart
    title Function Choice Decision Matrix
    x-axis Simple --> Complex
    y-axis One-time use --> Reusable
    quadrant-1 Arrow Functions
    quadrant-2 Named Functions
    quadrant-3 Anonymous Functions
    quadrant-4 Traditional Functions
    
    Event Handlers: [0.3, 0.2]
    Utility Functions: [0.7, 0.8]
    Callbacks: [0.2, 0.3]
    Class Methods: [0.8, 0.7]
    Mathematical Operations: [0.4, 0.6]

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

---

🚀 Виклик

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

Виклик GitHub Copilot Agent 🚀

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

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

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

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

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

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

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

Огляд і самост

• Спробуйте перетворити традиційну функцію на синтаксис стрілкової функції
• Практикуйте завдання: поясніть різницю між функціями та методами

🎯 Що Ви Можете Зробити За Цю Годину

• Завершіть тест після уроку та перегляньте будь-які незрозумілі концепції
• Створіть бібліотеку математичних утиліт із виклику GitHub Copilot
• Напишіть функцію, яка використовує іншу функцію як параметр
• Практикуйте написання функцій із параметрами за замовчуванням
• Експериментуйте з шаблонними літералами у значеннях, які повертають функції

📅 Ваш Тижневий Майстер-Клас Функцій

• Завершіть завдання "Розваги з функціями" творчо
• Переробіть повторюваний код, який ви написали, у багаторазові функції
• Створіть невеликий калькулятор, використовуючи лише функції (без глобальних змінних)
• Практикуйте стрілкові функції з методами масивів, такими як map() і filter()
• Створіть колекцію утиліт-функцій для поширених завдань
• Вивчайте функції вищого порядку та концепції функціонального програмування

🌟 Ваш Місячний Ривок

• Опануйте складні концепції функцій, такі як замикання та область видимості
• Створіть проєкт, який активно використовує композицію функцій
• Внесіть вклад у відкритий код, покращуючи документацію функцій
• Навчіть когось іншого функціям та різним стилям синтаксису
• Досліджуйте парадигми функціонального програмування в JavaScript
• Створіть особисту бібліотеку багаторазових функцій для майбутніх проєктів

🏆 Фінальна Перевірка Чемпіона Функцій

Відсвяткуйте своє опанування функцій:

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

journey
    title Your Function Confidence Evolution
    section Today
      Confused by Syntax: 3: You
      Understanding Basics: 4: You
      Writing Simple Functions: 5: You
    section This Week
      Using Parameters: 4: You
      Returning Values: 5: You
      Modern Syntax: 5: You
    section Next Month
      Function Composition: 5: You
      Advanced Patterns: 5: You
      Teaching Others: 5: You

🎉 Ви опанували одну з найпотужніших концепцій програмування! Функції є основою для створення великих програм. Кожен застосунок, який ви коли-небудь створите, буде використовувати функції для організації, повторного використання та структурування коду. Тепер ви розумієте, як упакувати логіку в багаторазові компоненти, що робить вас більш ефективним і продуктивним програмістом. Ласкаво просимо у світ модульного програмування! 🚀

---

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