Функції

Last updated 1 year ago

Функції

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

Функція приймає на вході параметри та повертає результат виконання коду.

Оголошення функцій (function declaration)

Функції:

Оголошують за допомогою ключового слова function.
Після нього вказують імʼя функції - описове дієслово про те, що виконує ця функція.
Далі у круглих дужках передають параметри, якщо такі необхідні.
Далі у фігурних дужках прописують інструкції які виконуватиме функція.

Щоб викликати виконання функції пишуть її імʼя і далі пара круглих дужок всередині яких можна передавати параметри.

function greeting() {
    console.log('Привіт!');
}

greeting(); // Виведе: "Привіт!"

Параметри та аргументи функції

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

function greeting(name) {
  console.log(`Привіт, ${name}!`);
}

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

function summ(a, b) {
  console.log(a + b);
}

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

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

// Оголошення функції з параметром name
function greeting(name) {
  console.log(`Привіт, ${name}!`);
}

// Виклик функції і передача різних аргументів
greeting("Alex"); // Виведе: "Привіт, Alex!"
greeting("Max"); // Виведе: "Привіт, Max!"

// Оголошення функції з параметрами a і b
function summ(a, b) {
  console.log(a + b);
}

// Виклик функції і передача різних аргументів
summ(1, 3); // Виведе: 4
summ(5, 6); // Виведе: 11

Аргументи передають в порядку оголошення параметрів. Перший аргумент присвоюється першому параметру і тд.

Якщо параметрів більше ніж передано аргументів, то значення параметрів будуть undefined.

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

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

function summ(a, b) {
  return a + b;
  console.log('Цей код ніколи не виконається');
}

let result1 = summ(3, 5);
console.log(result1); // Виведе: 8

let result2 = summ(100, 14);
console.log(result2); // Виведе: 114

Оператор return без явно вказаного значення повертає спеціальне значення undefined. За відсутності return в тілі функції, вона все одно поверне undefined.

Порядок виконання коду

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

function greeting() {
  console.log("Переривання на виконання функції");
}

console.log("Код програми до виклику функції");
greeting();
console.log("Код програми після виклику функції");

Параметри за замовчуванням

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

function greeting(name = "Гість") {
  console.log(`Привіт, ${name}!`);
}

greeting(); // Виведе: "Привіт, Гість!"
greeting("Олександр"); // Виведе: "Привіт, Олександр!"

Можна встановити значення за замовчанням і якщо параметрів більше ніж аргументів, щоб не було присвоєно значення undefined.

function invitation(name = "Guest", tickets = 2, date = "today") {
  console.log(`Hello, ${name}! You have ${tickets} tickets for ${date}!`);
}

invitation("Alex", 3, "tomorrow"); // `Hello, Alex! You have 3 tickets for tomorrow!`
invitation("Max", 4); // `Hello, Max! You have 4 tickets for today!`
invitation("John"); // `Hello, John! You have 2 tickets for today!`
invitation(); // `Hello, Guest! You have 2 tickets for today!`

Псевдомасив arguments

arguments - є псевдомасивом, який доступний всередині всіх функцій і містить всі передані аргументи у вигляді списку. Цей об'єкт не є справжнім масивом, але виглядає подібно до масиву і дозволяє отримувати доступ до переданих параметрів. Цей псевдомасив має властивість length, але йому недоступні більшість методів масивів.

function myFunc() {
  for (const el of arguments) {
    console.log(el);
  }
}

myFunc("arg1", "arg2", "arg3"); // Виведе в циклі: "arg1", "arg2", "arg3"
myFunc("Red", "Green", "Blue"); // Виведе в циклі: "Red", "Green", "Blue"

Перетворення псевдомасиву arguments

Вище було зазначено, що псевдомасиву arguments недоступні деякі методи (наприклад slice() або includes()). Відтак, щоб мати змогу обробляти ці аргументи їх потрібно перетворити в повноцінний масив.

Можна створити новий масив за допомогою методу Array.from().

function myFunc() {
  // створення повноцінного масиву
  const myArray = Array.from(arguments);
  console.log(myArray);
}

myFunc("Red", "Green", "Blue"); // Виведе: ["Red", "Green", "Blue"]

Можна створити новий масив за допомогою операції ... (rest). Вона збирає аргументи в масив і зберігає його у змінну. Збирають всі аргументи, за допомогою операції rest безпосередньо в підписі функції.

function myFunc(...args) {
  console.log(args);
}

myFunc("Red", "Green", "Blue"); // Виведе: ["Red", "Green", "Blue"]

Патерн «Раннє повернення»

Патерн "Раннього повернення" (англ. Early Return Pattern) використовується для оптимізації коду функцій шляхом використання оператора return для завершення функції раніше, ніж досягнута її кінцева частина. Це дозволяє зменшити вкладеність умовних операторів та покращити читабельність коду.

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

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

function myFunc(age) {
    if (age >= 18) {
        return "Користувач повнолітній";
    } else {
        return "Користувач не повнолітній";
    }
}

У патерні "Раннього повернення" ми можемо переписати цю функцію таким чином:

function myFunc(age) {
    if (age >= 18) {
        return "Користувач повнолітній";
    }
    
    return "Користувач не повнолітній";
}

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

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

Функціональний вираз

Функціональний вираз - це спосіб оголошення функції в JavaScript через присвоєння функції змінній.

// function declaration
function greeting(name) {
     return `Привіт, ${name}!`;
}

console.log(greeting('Світ')); // Виведе: "Привіт, Світ!"

// function expression
let greeting = function(name) {
    return `Привіт, ${name}!`;
};

console.log(greeting('Світ')); // Виведе: "Привіт, Світ!"

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

Функціональні вирази можна використовувати в різних ситуаціях, наприклад:

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

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

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

console.log(greeting('Світ')); // Помилка!

let greeting = function(name) {
    return `Привіт, ${name}!`;
};

console.log(greeting('Світ')); //Працює - Виведе: "Привіт, Світ!"

На противагу при оголошенні функції її можна викликати до місця її створення в коді.

console.log(greeting('Світ')); // Виведе: "Привіт, Світ!"

function greeting(name) {
     return `Привіт, ${name}!`;
}

console.log(greeting('Світ')); // Виведе: "Привіт, Світ!"

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

Покликання:

PreviousФункції NextСтек викликів