Назад Вперед Зміст

Оголошення функцій

Розрізняють функції виду "function declaration statement"і "function definition expression".

Оголошення функції (function declaration statement) складається з наступних частин:

1. ключового слова function;
2. далі через пропуск слідує ім'я функції та круглі дужки;
3. круглі дужки можуть бути порожніми, або в них можуть бути вказані параметри, які приймає функція. Параметри – це звичайні змінні JavaScript. Скільки можливо параметрів: один, кілька (у цьому випадку вони вказуються через кому), жодного (у цьому випадку круглі дужки все одно потрібні, хоч вони й будуть порожніми).

function func(param){  тіло функції
} //'func' - це ім'я функції, їй передається один параметр param:

function func(param1, param2) { тіло функції
}//Передаємо функції два параметри - param1 і param2:

function func() {тіло функції
}//Взагалі не передаємо жодних параметрів:

Функція виду "function declaration statement" за синтаксисом є інструкцією (statement), ще функція може бути виду "function definition expression".

Оголошення функції ("function definition expression"). Така функція може бути анонімною (Вона не має імені). Функції виду "function definition expression" зручні, коли функція передається аргументом іншої функції.

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

Функція типу "function declaration statement"

function имя_функции(тут перераховуються параметри через кому)
{ Тут написано команди, які виконує функція. }

Функція типу "function definition expression"

var ім'я_змінної=function ім'я_функції(тут перераховуються параметри через кому)
{ Тут написано команди, які виконує функція. }

Стрілкові функції

Є ще один дуже простий та лаконічний синтаксис для створення функцій, який часто краще, ніж функціональні вирази.

Це називається "стрілочні функції", тому що виглядає так: let func = (arg1, arg2, ...argN) => expression

Це створює функцію, func яка приймає аргументи arg1..argN, потім оцінює expression їх використання праворуч і повертає свій результат.

let sum = (a, b) => a + b;

Найбільш коротка форма для: let sum = function(a, b) { return a + b; };

«Стрілкові функції» бувають двох типів:

1. Без фігурних дужок: (...args) => expression – правий бік виразу: функція обчислює його та повертає результат. Дужки можна не ставити, якщо аргумент лише один: n=>n*2.
2. З фігурними дужками: (...args) => { body } – дужки дозволяють нам писати кілька інструкцій усередині функції, але при цьому необхідно явно викликати return, щоб повернути значення.

Оператор розповсюдження (... spread) або він же оператор залишку (...rest) з'явився у стандарті ECMAScript у 2015-му році. Він спростив ряд типових дій по роботі з масивами, параметрами функцій і став дуже корисним при деструктуризації об'єктів і масивів.

Приклад 1

Замініть код Function Expression стрілочною функцією:

Приклад 2

Функція друкує 10 випадкових чисел від 1 до 100:

Як викликати функцію в коді?

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

/*	Ми написали функцію,яка виводить на екран 'Привіт, мир!'.Назвемо її 'hello':*/
function hello() {
/*У цьому місці нічого не виведеться саме по собі,а виводиться лише за виклику функції.*/
alert('Привіт, мир!');
}
/* Тепер ми хочемо викликати нашу функцію,щоб вона вивела на екран свою фразу.Звернемося до неї на ім'я: */
hello(); //От і все! Функція виведе на екран фразу 'Привіт, мир!'.

/* Ми можемо вивести нашу фразу кілька разів -для цього достатньо написати функцію не один раз, а кілька:*/
hello();
hello();
hello();

Докладніше про параметри

У прикладах ми викликали функцію 'hello()' без параметрів.

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

//Задамо нашу функцію:
function hello(text) { //вкажемо тут параметр text
//Виведемо на екран значення змінної text:
alert(text);
//Тепер викличемо нашу функцію:
hello('Привіт, Земляни!'); //вона виведе саме ту фразу, яку ми їй передали

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

Як JavaScript знає, що текст 'Привіт, Земляни!' Чи потрібно покласти в змінну text? Ми сказали йому про це, коли створювали нашу функцію, ось тут: 'function hello(text)'.

Якщо ми поставимо кілька параметрів -то кожен із них лежатиме у своїй змінній усередині функції.

Інструкція return

Найчастіше функція не повинна виводити щось через alert на екран, а повертати.

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

//Задамо функцію:
function hello(text) {
/*Вкажемо функції за допомогою інструкції 'return',що ми хочемо, щоб вона ПОВЕРНУЛА текст, а не вивела на екран:*/
return text;
}
//Тепер викличемо нашу функцію і запишемо значення змінну message:
var message = hello('Привіт, Земляни!'); //поки виведення на екран немає
//І тепер у змінній message лежить 'Привіт, Земляни!':
alert(message); //переконаємося у цьому
//Можна не вводити проміжну змінну message, а зробити так:
alert(hello('Привіт, Земляни!'));

В принципі, практичної користі від того, що ми зробили - ніякої, оскільки функція повернула нам те, що ми їй передали. Модернізуємо наш приклад так, щоб функція приймала ім'я людини, а виводила рядок 'Привіт, %ім'я_людини_передане_функції%!':

//Задамо функцію:
function hello(name) { //вкажемо тут параметр name, у якому лежатиме ім'я людини
//Введемо змінну text, у якому запишемо всю фразу:
var text = 'Привіт, '.name.'!';
/*Вкажемо функції за допомогою інструкції 'return',що ми хочемо, щоб вона ПОВЕРНУЛА вміст змінної text:*/
	return text;
	}
//Тепер викличемо нашу функцію та запишемо значення у змінну message:
var message = hello("Вася");
//І тепер у змінній text лежить 'Привіт, Васю!':
alert(message); //переконаємося у цьому
//Привітаємося разом із групою людей із трьох человек:
alert(hello('Вася').' '.hello('Петя').' '.hello('Коля'));

Часта помилка з return

Після виконання інструкції return – функція закінчить свою роботу. Тобто: після виконання return більше жодного коду не виконається.

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

Дивіться приклад:

function func(param){
/*Якщо змінна param має значення true, то повернемо 'Правильно!'.
Нагадую, що конструкція if(param) еквівалентна if(param === true)!
*/
if (param) return 'Вірно!';
/*Далі новачок JavaScript хоче зробити ще якісь операції,
але якщо змінна param має значення true – спрацює інструкція return,
та код нижче працювати не буде!
Навпаки, якщо param === false – інструкція return не виконається
і код далі працюватиме!
*/
alert('Привіт, мир!');
}

Прийоми роботи з return

Існують деякі прийоми роботи з return, які спрощують код. Як зробити найпростіше:

function func(param) {
/*Що робить код:якщо param має значення true – то змінну result запишемо 'Вірно!',інакше 'Невірно!':*/
if (param) {
var result = 'Правильно!'
} else {
var result = 'Неправильно!';
}
//Повернемо вміст змінної result:
	return result;
}

Тепер спростимо нашу функцію, використовуючи прийом роботи з return:

function func(param) {
/*Що робить код:якщо param має значення true – поверне 'Правильно!',інакше поверне 'Невірно!'.*/
if (param) {
return 'Правильно!'
} else {
return = 'Неправильно!';
	}
}

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

Зворотні функції (Callback) в JavaScript

Зворотні функції (callback functions) - це функції, які передаються в інші функції як аргументи і викликаються після завершення певної операції.

Що таке callback-функції?

Callback-функції дозволяють JavaScript обробляти асинхронні операції. Вони є фундаментальною частиною мови і широко використовуються для:

• Обробки подій
• Асинхронних операцій (наприклад, запитів до сервера)
• Таймерів
• Методів масивів (наприклад, forEach, map, filter)

Простий приклад callback-функції

function greet(name, callback) {
    console.log('Привіт, ' + name + '!');
    callback(); // Викликаємо callback-функцію
}
function sayGoodbye() {
    console.log('До побачення!');
}
greet('Анна', sayGoodbye);
// Виведе:
// Привіт, Анна!
// До побачення!

Зайдіть в браузері інструменти розробника, консоль- там побачите цей результат!!!

Callback в методах масивів

const numbers = [1, 2, 3, 4, 5];
// Використання callback у методі forEach
numbers.forEach(function(number) {
    console.log(number * 2);
});
// Виведе: 2, 4, 6, 8, 10

Зайдіть в браузері інструменти розробника, консоль- там побачите цей результат!!!

Callback у методі map

const squared = numbers.map(function(num) {
    return num * num;
});
console.log(squared); // Виведе: [1, 4, 9, 16, 25]

Зайдіть в браузері інструменти розробника, консоль- там побачите цей результат!!!

Callback в асинхронних операціях

// Імітація асинхронного запиту до сервера
function fetchData(callback) {
    setTimeout(function() {
        const data = { id: 1, name: 'Тестовий об\'єкт' };
        callback(data);
    }, 1000);
}
fetchData(function(result) {
    console.log('Отримані дані:', result);
});
console.log('Запит відправлено...');
// Виведе:
// Запит відправлено...
// (через 1 секунду) Отримані дані: {id: 1, name: "Тестовий об'єкт"}

Помилки в callback-функціях

Часто в Node.js використовується патерн "error-first callback", де перший параметр callback-функції - це об'єкт помилки.

function divide(a, b, callback) {
    if (b === 0) {
        callback(new Error('Ділення на нуль неможливе'));
    } else {
        callback(null, a / b);
    }
}
divide(10, 2, function(err, result) {
    if (err) {
        console.error('Помилка:', err.message);
    } else {
        console.log('Результат:', result);
    }
});
divide(10, 0, function(err, result) {
    if (err) {
        console.error('Помилка:', err.message);
    } else {
        console.log('Результат:', result);
    }
});

Висновок

Callback-функції - це потужний інструмент в JavaScript, який дозволяє:

• Реалізовувати асинхронну логіку
• Обробляти події
• Створювати більш гнучкий і модульний код

Однак при роботі з багатьма callback-функціями може виникнути "callback hell" (пекло callback-ів). Для боротьби з цим існують проміси (Promises) та async/await.

Ще приклади зворотніх функцій.

Приклад. Демонстрація використання callback – функцій

Функція changeWord(str,fn) приймає два параметри: рядок, який вона перетворює на масив слів і функцію, яка перетворює слова за алгоритмом функції-параметра, наприклад, переводить літери слів у верхній режим.

Або можна записати код, використовуючи функції-стрілки.

Функція як результат

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

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

САМОСТІЙНА РОБОТА НА CALLBACK-ФУНКЦІІ, ТА ФУНКЦІЇ СТРІЛКИ.

У вирішенні завдань використовувати callback-функції та функції - стрілки.

Варіант 1

Дан рядок,який містить тільки однозначні числа (число обмежене пробілами):

• знайти їх факторіали,
• знайти їх куби.

Варіант 2

Дан рядок,який містить числа(число обмежене пробілами)знайти:

• знайти їх цифрове коріння,
• знайти їх суму цифр.

Варіант 3

Дан рядок,який містить не тільки числа (слова обмежені пробілами):

• для чисел знайти їх коріння квадратні, слова перевести у верхній регістр;
• для чисел знайти кількість їх цифр, для слів додати символ "?".

Варіант 4

Дан рядок,який містить не тільки числа (слова обмежені пробілами):

• для чисел знайти їх цифрове коріння,слова перевести в нижній регістр;
• для чисел знайти їх добуток цифр, до слів додати символ "*".

Назад Вперед Зміст