Розділ 4. Функція

Щоб зрозуміти що таке функція створимо вже по шаблону нову папку (тека укр.) та два файли index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

та script.js :

'use strict';

function name () {

};

Функція, це комбінація дій над значенням. Складається з:

слова function - що позначає даний код як функцію;
name - назва функції, може бути будь яке слово латинськими літерами але відрізнятись від системних слів чи вже написаних раніше імен функцій;
круглі дужки () - сюди пишуть аргументи - зовнішні змінні над яким можна зробити дії;
фігурні дужки {} - сюди пишуть самі дії, також називають тілом функції

Щоб виконати функцію пишуть її назву та ставлять круглі дужки:

'use strict';

function name () {

};

name();

Зовнішні змінні в якості аргументів передаються у функцію наступним чином:

'use strict';

function name (a) {  // 2
   console.log(a);   // 3
};

name(5);             // 1

Виконуємо функцію name та передаємо в неї число 5
Число 5 надсилається у функцію в якості аргументу а (по суті а = 5)
Виводимо у консоль будь-яке а, яке буде отримано функцією

Як результат виконання функції - нам покаже у консолі число 5. Щоб вивести у консоль інше значення наприклад текст "Привіт всім" :

'use strict';

function name (a) {
   console.log(a);
};

name('Привіт всім');

Функція також може повертати результат своїх дій за допомогою слова return :

'use strict';

function name (a) {
   return a;
};

var result = name('Привіт всім');

console.log(result);

// Або

function name2 (a) {
   return a;
};

console.log(name2('Привіт всім'));

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

'use strict';

function name (a) {
   return a * a;
};

console.log(name(6));

Тобто ми передали у функцію name число 6, вона помножила його саме на себе і повернула назад число 36 і ми його вивели у консолі.

Існують наступні види написання функції.

1.Function Declaration:

'use strict';

function name () {

};

name();

2.Function Expression - її ще називають анонімною, так як в неї немає імені і в його ролі виступає сама змінна (в даному прикладі name2) :

'use strict';

var name2 = function () {

};

name2();

Мінусом даного написання є те що ви не зможете викликати функцію поки їй не буде присвоєно змінну :

'use strict';

name2();    // буде помилка, бо змінна name2 відома але ще знаємо чому дорівнює

var name2 = function () {     // тепер name2 дорівнює функції і її можна виконати

};

name2();    // name2 відома і ми знаємо що це функція - тому виконається

3.Shorthand method definition - або ж простими словами функції, які розташовані в об'єктах мають спрощену систему написання:

'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:

'use strict';

var name = function(el) {
    return el + 5;
}

// Можна записати так

var name2 = (el) => el + 5;


/* Якщо в круглих дужках лише 1 аргумент
то дужки можна не писати */

var name3 = el => el + 5;

5.Функція-генератор - суть даної функції виконувати дії по порядку за допомогою методу next():

'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 можна написати це через створення об'єкту функції, шляхом передачі двох аргументів :

'use strict';

var name = function (a) {
    console.log(a);
}

var name2 = new Function('a', 'console.log(a)');

Першим аргументом будуть параметри функції, а другим аргументом - тіло функції. І не забувайте, що потрібно їх писати у лапках.

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

PreviousРозділ 3.Типи даних NextРозділ 5. Масиви

Last updated 5 years ago

Was this helpful?

'use strict'; function name (a) { return a; }; var result = name('Привіт всім'); console.log(result); // Або function name2 (a) { return a; }; console.log(name2('Привіт всім'));

'use strict'; name2(); // буде помилка, бо змінна name2 відома але ще знаємо чому дорівнює var name2 = function () { // тепер name2 дорівнює функції і її можна виконати }; name2(); // name2 відома і ми знаємо що це функція - тому виконається

'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'

'use strict'; var name = function(el) { return el + 5; } // Можна записати так var name2 = (el) => el + 5; /* Якщо в круглих дужках лише 1 аргумент то дужки можна не писати */ var name3 = el => el + 5;

'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}