Функція у JavaScript - це блок коду, який виконує певне завдання або обчислення. Вона може приймати нуль або більше аргументів, обробляти їх і може повертати результат за допомогою ключового слова return. Функції можуть бути оголошені за допомогою ключового слова function, або вони можуть бути виразами, присвоєними змінним. Функції в JavaScript можуть також бути передані як аргументи в інші функції, збережені у змінних, створювати замикання, викликати самих себе (рекурсія) та мати інші потужні властивості, які роблять їх ключовим елементом мови програмування JavaScript.
Створення функції
Функції можна створити за допомогою ключового слова function. Вони можуть бути оголошені як звичайні функції або як функціональні вирази.
// Оголошення функції
function greet(){
console.log("Привіт, світ!"); }
// Функціональний вираз
const sayHello = function() { console.log("Привіт, світ!"); };
Виклик функцій
Функції можна викликати за їх ім'ям з допомогою круглих дужок:
//виклик функції greet
greet();
sayHello(); //виклик функції sayHello
Параметри та аргументи
Параметри дозволяють функціям приймати дані при їх виклику, а аргументи - це конкретні значення, передані функції під час виклику.
Параметри
Параметри оголошуються у дужках під час оголошення функції та використовуються для приймання значень.
Параметри можуть бути будь-якого типу даних, такого як числа, рядки, об'єкти чи функції. Функція може мати будь-яку кількість параметрів, а також немати параметрів.
function greet(name) {
console.log("Привіт, " + name + "!");
}
Аргументи
Аргументи - це конкретні значення, передані функції під час виклику:
greet("Джон");
У JavaScript є об'єкт arguments який містить аргументи, передані функції у момент її виклику. Цей об'єкт подібний до масиву, але не є ним повністю. Він дозволяє отримувати доступ до аргументів функції за їхнім індексом та має властивість length, яка вказує на кількість переданих аргументів.
Повернення значень
Функції можуть повертати значення за допомогою ключового слова return.
Повернення значень
Функція може повертати значення, використовуючи ключове слово return:
function add(a, b) {
return a + b;
}
Використання повернених значень
Повернені значення можна використовувати в інших частинах коду:
const result = add(3, 5);
console.log(result); // 8
Типи функцій
У JavaScript функції можуть бути оголошені та використовуватися у різних формах. Давайте розглянемо декілька типів функцій:
Функції як об'єкти
У JavaScript функції є об'єктами першого класу, тобто їх можна присвоювати змінним, передавати як аргументи та повертати як значення із інших функцій.
const greet = function(){
console.log("Привіт!");
};
Стрілкові функції
Стрілкові функції - це новий синтаксис для визначення функцій в ECMAScript 6. Вони коротші та зручніші для використання, особливо при використанні з функціональним програмуванням.
const add = (a, b) => {
return a + b;
};
Функції-конструктори
У JavaScript можна використовувати функції-конструктори для створення об'єктів. Вони використовують ключове слово new для створення нового екземпляру об'єкта.
function Person(name, age){
this.name = name;
this.age = age;
}
const john = new Person("Джон", 30);
Методи об'єктів
Функції, які є властивістю об'єкта, називаються методом об'єкта. Вони можуть отримувати доступ до властивостей та методів об'єкта через ключове слово this.
const person = {
name: "Джон",
greet: function() {
console.log("Привіт, " + this.name + "!");
}
};
person.greet();
Самовикликаючі функції
Самовикликаючі функції - це функції, які викликаються автоматично після того, як їх оголошено. Вони дозволяють виконати код та ізолювати його від глобального об'єкту.
(function() {
console.log("Ця функція викликається автоматично!");
})();
Замикання
Замикання - це потужний механізм у JavaScript, який дозволяє створювати приватні змінні та зберігати доступ до них у функції.
Замикання
У JavaScript функції мають доступ до змінних, оголошених у більш вищому контексті. Це називається замиканням:
function counter(){
let count = 0;
return function(){
return ++count;
};
}
const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2
function outerFunction(){
let outerVariable = 'I am outer';
function innerFunction(){
console.log(outerVariable); // Внутрішня функція має доступ до outerVariable навіть після закінчення роботи outerFunction
}
return innerFunction;
}
const closureExample = outerFunction();
closureExample(); // Виведе "I am outer"
У вище наведеному прикладі innerFunction - це замикання, оскільки вона має доступ до змінної outerVariable, яка знаходиться в області видимості зовнішньої функції outerFunction.
Рекурсія
Рекурсія - це техніка, коли функція викликає саму себе.
Рекурсивні функції
Рекурсивні функції викликають самих себе, доки не буде виконана певна умова:
function factorial(n){
if(n === 0){
return 1;
}else{
return n * factorial(n-1);
}
}
console.log(factorial(5)); // 120
Контекст виклику (this)
Ключове слово this у JavaScript вказує на поточний об'єкт, на якому викликалася функція. Його значення залежить від того, як саме була викликана функція.
Глобальний контекст
У глобальному контексті this вказує на глобальний об'єкт (у веб-середовищі - це об'єкт window).
console.log(this === window); // true
Методи об'єктів
У випадку методів об'єктів this вказує на сам об'єкт, на якому викликаний метод.
const person = {
name: "Джон",
greet: function() {
console.log("Привіт, " + this.name + "!");
}
};
person.greet(); // Виведе: Привіт, Джон!
Контекст виклику функцій
У випадку виклику функцій без об'єкта, this зазвичай вказує на глобальний об'єкт (у строгому режимі - на undefined).
function greet(){
console.log("Привіт, " + this.name + "!");
}
greet(); // Виведе: Привіт, undefined! (у строгому режимі: TypeError)
Зміна контексту виклику
Контекст виклику функції можна змінити за допомогою методів call(), apply() або bind().
const person1 = {
name: "Іванка"
};
const person2 = {
name: "Петро"
};
function greet() {
console.log("Привіт, " + this.name + "!");
}
greet.call(person1); // Виведе: Привіт, Іванка!
greet.apply(person2); // Виведе: Привіт, Петро!
const greetAnna = greet.bind(person1);
greetAnna(); // Виведе: Привіт, Іванка!