# Розділ 4. Функція
Щоб зрозуміти що таке функція створимо вже по шаблону нову **папку** (тека укр.) та два файли **index.html** :
```markup
Document
```
та **script.js** :
```javascript
'use strict';
function name () {
};
```
Функція, це комбінація дій над значенням. Складається з:
* слова **function -** що позначає даний код як функцію;
* **name -** назва функції, може бути будь яке слово латинськими літерами але відрізнятись від системних слів чи вже написаних раніше імен функцій;
* **круглі дужки** () - сюди пишуть **аргументи -** зовнішні змінні над яким можна зробити дії;
* **фігурні дужки {}** - сюди пишуть самі дії, також називають **тілом функції**
Щоб виконати функцію пишуть її назву та ставлять круглі дужки:
```javascript
'use strict';
function name () {
};
name();
```
Зовнішні змінні в якості аргументів передаються у функцію наступним чином:
```javascript
'use strict';
function name (a) { // 2
console.log(a); // 3
};
name(5); // 1
```
1. Виконуємо функцію **name** та передаємо в неї число 5
2. Число 5 надсилається у функцію в якості аргументу **а** (по суті а = 5)
3. Виводимо у консоль будь-яке **а**, яке буде отримано функцією
Як результат виконання функції - нам покаже у консолі число 5. Щоб вивести у консоль інше значення наприклад текст "Привіт всім" :
```javascript
'use strict';
function name (a) {
console.log(a);
};
name('Привіт всім');
```
Функція також може повертати результат своїх дій за допомогою слова **return :**
```javascript
'use strict';
function name (a) {
return a;
};
var result = name('Привіт всім');
console.log(result);
// Або
function name2 (a) {
return a;
};
console.log(name2('Привіт всім'));
```
Давайте спробуємо написати функцію, яка повертатиме нам квадрат переданого числа :
```javascript
'use strict';
function name (a) {
return a * a;
};
console.log(name(6));
```
Тобто ми передали у функцію **name** число 6, вона помножила його саме на себе і повернула назад число 36 і ми його вивели у консолі.
Існують наступні види написання функції.
1.**Function Declaration:**
```javascript
'use strict';
function name () {
};
name();
```
2.**Function Expression** - її ще називають анонімною, так як в неї немає імені і в його ролі виступає сама змінна (в даному прикладі **name2**) :
```javascript
'use strict';
var name2 = function () {
};
name2();
```
Мінусом даного написання є те що ви не зможете викликати функцію поки їй не буде присвоєно змінну :
```javascript
'use strict';
name2(); // буде помилка, бо змінна name2 відома але ще знаємо чому дорівнює
var name2 = function () { // тепер name2 дорівнює функції і її можна виконати
};
name2(); // name2 відома і ми знаємо що це функція - тому виконається
```
3.**Shorthand method definition** - або ж простими словами функції, які розташовані в об'єктах мають спрощену систему написання:
```javascript
'use strict';
// БУЛО
var obj = {
name: 'Test',
func: function() {
console.log('test');
}
}
obj.func(); // 'test'
// СТАЛО
var obj2 = {
name: 'Test',
func() {
console.log('test');
}
}
obj2.func(); // 'test'
```
4.**Стрілочні функції** - спрощене написання **Function Expression:**
```javascript
'use strict';
var name = function(el) {
return el + 5;
}
// Можна записати так
var name2 = (el) => el + 5;
/* Якщо в круглих дужках лише 1 аргумент
то дужки можна не писати */
var name3 = el => el + 5;
```
5.**Функція-генератор** - суть даної функції виконувати дії по порядку за допомогою методу **next()**:
```javascript
'use strict';
function* gen() {
yield 'Привіт';
yield 'Я функція-генератор';
yield 'Гарно попрацювали!';
}
var generator = gen();
console.log(generator);
var firstStep = generator.next();
console.log(firstStep); // {value: "Привіт", done: false}
console.log( generator.next().value ); // Я функція-генератор
console.log( generator.next().value ); // Гарно попрацювали!
console.log( generator.next().value ); // undefined
console.log( generator.next() ); // {value: undefined, done: true}
```
Як бачимо з даного прикладу після слова **function** ставлять **знак зірочка**, запущену функцію прирівнюють до змінної, яку вже потім використовують для переходів між **yield** з допомогою методу **next()** - він в свою чергу завжди повертає об'єкт в якому є дві властивості :
**value** - значення яке несе в собі даний yield;
**done** - статус про закінчення роботи генератора.
6.**new Function** - якщо у Вас є вільний час то замість написання звичайної **Function Expression** можна написати це через створення об'єкту функції, шляхом передачі двох аргументів :
```javascript
'use strict';
var name = function (a) {
console.log(a);
}
var name2 = new Function('a', 'console.log(a)');
```
Першим аргументом будуть параметри функції, а другим аргументом - тіло функції. І не забувайте, що потрібно їх писати у лапках.
Отож ми дізнались що таке функція, що їх є на даний момент 6 видів, що функція крім виконання ще може повернути результат своїх дій за допомогою слова **return** і ми можемо далі з ним працювати. У наступному розділі ми розглянемо що ж таке масиви.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://angularlessons.gitbook.io/javascriptiseasy/rozdil-4.-funkciya.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.