Функції

Функції — це можливість створювати власні команди.

Часто буває ситуація, коли якийсь блок коду повторюється в програмі більше одного разу. Так ось, ви можете цьому блоку коду дати ім'я, і це буде називатися функцією. Потім можна буде викликати цю функцію багато разів, так само як ви викликаєте функції console.log, alert, prompt і т.д.

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

Наприклад, функція console.log приймає параметр, який вона виводить на екран. Функція Math.min (1,2) приймає два параметри, і повертає найменше число з переданих їй.

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

function funcName(arg1, arg2, ...) {
    // do something
}

Приклад функції, яка робить щось корисне:

function good(name) {
   console.log("YOU ARE COOL, " + name + "! :-)");
}

Цей код створить функцію (команду) з назвою good, але не викличе її. Тепер, якщо раптово нам треба вивести на екран якесь мотиваційне повідомлення, ми можемо просто сказати:

good("Vasya") // виведе на екран: YOU ARE COOL, Vasya! :-)

Команда return потрібна для того, щоб функція повернула значення туди, звідки вона була викликана. Як prompt наприклад. Або синус якогось кута в тригонометрії, теж повертає власне число.

function sum(a, b) {
    return a + b;
}

console.log(sum(1, 2)); // 3

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

function sum(a, b) {
    if (a == 0 && b == 0) {
        return 1; // ха-ха
    }
    return a + b;
}

console.log(sum(0, 0)); // що буде?

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

function f() {
  // пусте тіло функції з ім'ям f
}
console.log(f()); // undefined

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

console.log(sum(2, 3)); // 5
console.log(sum(3, 3)); // 6
console.log(sum(3, 7)); // 10

Як аргументи у функцію можна передавати будь-які допустимі в js вирази.

console.log(sum(2 + 3, 3)); // 8

let a = 10, b = -10;

console.log(sum(a, b)); // 0
console.log(sum(sum(5, 3), 2)); // 10

Тепер з'ясуйте, чому:

function wow(b) {
    b = b + 1;
}

let a = 10;
wow(a);
console.log(a); // ??????

Щоб перевірити себе, передбачте:

function wow(a) {
    a = a + 1;
}

let a = 10;
wow(a);
console.log(a); // ??????

Якщо з'ясували чому так, передбачте:

function wow(a) {
    a = a + 1;
    return a;
}

let a = 10;
wow(a);
console.log(a); // ??????

... вам треба добре розуміти, як працюють функції.

Якщо ви вже пройшли масиви, то читайте наступний блок, інакше можете пропустити:

Передача масивів у функції

Як ви пам'ятаєте з теми про масиви, коли ми пишемо A = B і при цьому B це масив, то ми скопіюємо не масив, а тільки посилання на нього, в змінну A. Те ж саме при передачі масиву в функцію — ми передамо посилання на нього, і якщо функція змінить вміст масиву, то ... він зміниться :) Детальніше ви з цим розберетесь тільки після вступу в Ш++, для складання вступного тестування вам ця інформація не знадобиться :)

Оголошення та виклик функцій

Оголошення — це первинний опис функції. Оголошення == створення. Виклик — це коли, власне, викликаємо функцію будь-де. Виклик == використання.

Все як зі змінними, тільки для оголошення —function замість let

// це оголошення функції myFunction
function myFunction (arg) {
    console.log(arg); // це те, що функція робить (її тіло)
}

myFunction("якийсь текст"); // а це виклик
myFunction(12345); // і це виклик
myFunction(); // і це

Функції в функціях

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

Сильно заморочуватись на цьому поки не варто. Просто знайте, що така можливість є.

Ось код:

function foo () {
    console.log("foo");
    function bar () {
        console.log("bar in foo()");
    }
    bar();
}

function bar () {
    console.log("bar");
}

foo();
bar();

Закоментуйте по черзі оголошення bar() — внутрішню, зовнішню та обидві разом. Всі три варіанта запустіть і дивіться, що буде. Подумайте, чому саме так.

Додаткові матеріали

Про функції (uk.javascript.info)

Ще про функції (яваскрипт.укр)

Для вас ми записали власне відео про функції:

Вирішили залишити посилання і на це відео, можливо різні підходи допоможуть краще розібратись в темі:

Обов'язкові задачі

Увага! Тепер і серед обов'язкових задач цього розділу є задачі з Codewars. Тож, якщо ви ще не встигли — саме час розібратись. Інструкції з Codewars.

Hello world (Codewars)Найбільше числоМасив у зворотному порядку

Виникли питання або труднощі? Зверніться за допомогою до Ш++.