8. Функції
8.1. скрипт [func-01]
Скрипт аналізує спосіб передачі параметрів функції:
- передача за значенням для чисел, рядків та логічних значень;
- передача за посиланням для масивів, літеральних об’єктів та функцій;
'use strict';
// спосіб передачі параметрів функції
// -----------------------число — передача за значенням
function doSomethingWithNumber(param) {
param++;
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === count);
}
// код виклику
let count = 10;
doSomethingWithNumber(count);
console.log("[count outside function]=", count);
// --------------------- рядок — передача за значенням
function doSomethingWithString(param) {
param += " xyz"
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === text);
}
// код виклику
let text = "abcd";
doSomethingWithString(text);
console.log("[text outside function]=", text);
// --------------------- логічне значення — передача за значенням
function doSomethingWithBoolean(param) {
param = !param;
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === bool);
}
// код виклику
let bool = true;
doSomethingWithBoolean(bool);
console.log("bool [outside function]=", bool);
// --------------------- масив — передача за посиланням
function doSomethingWithArray(param) {
param.push(1000);
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === tab);
}
// код виклику
const tab = [10, 20, 30];
doSomethingWithArray(tab);
console.log("[tab outside function]=", tab);
// --------------------- об’єкт — передача за посиланням
function doSomethingWithObject(param) {
param.unePropriétéNouvelle = "xyz";
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === obj);
}
// код виклику
const obj = [10, 20, 30];
doSomethingWithObject(obj);
console.log("[obj outside function]=", obj);
// --------------------- функція — передача за посиланням
function doSomethingWithFunction(param) {
// щось досить дивне, але все ж працює
param.unePropriétéNouvelle = "xyz";
console.log("[param inside function]=", param, "[type]=", typeof (param), "[passage par référence]=", param === f);
}
// код виклику
const f = x => x + 4;
doSomethingWithFunction(f);
console.log("[f outside function]=", f, f.unePropriétéNouvelle, typeof (f));
Виконання
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\fonctions\func-01.js"
[param inside function]= 11 [type]= number [passage par référence]= false
[count outside function]= 10
[param inside function]= abcd xyz [type]= string [passage par référence]= false
[text outside function]= abcd
[param inside function]= false [type]= boolean [passage par référence]= false
bool [outside function]= true
[param inside function]= [ 10, 20, 30, 1000 ] [type]= object [passage par référence]= true
[tab outside function]= [ 10, 20, 30, 1000 ]
[param inside function]= [ 10, 20, 30, 'unePropriétéNouvelle': 'xyz' ] [type]= object [passage par référence]= true
[obj outside function]= [ 10, 20, 30, 'unePropriétéNouvelle': 'xyz' ]
[param inside function]= x => x + 4 [type]= function [passage par référence]= true
[f outside function]= x => x + 4 xyz function
8.2. скрипт [func-02]
Наступний скрипт демонструє, що тип [function] є типом даних, як і будь-який інший, і що змінна може мати цей тип. Він також показує два способи визначення функції:
- один із використанням ключового слова [function];
- інший — за допомогою нотації «стрілка» =>;
'use strict';
// функцію можна присвоїти змінній
const variable1 = function (a, b) {
return a + b;
};
console.log("typeof(variable1)=", typeof (variable1));
// після цього змінну можна використовувати як функцію
console.log("variable1(10,12)=", variable1(10, 12));
// функцію можна визначити за допомогою нотації =>
const variable2 = (a, b, c) => {
return a - b + c;
};
console.log("variable2(10,12,14)=", variable2(10, 12, 14));
// можна не вказувати фігурні дужки, якщо в коді функції є лише один вираз
// тоді цей вираз є значенням, яке повертає функція
const variable3 = (a, b, c) => a + b + c;
console.log("variable3(10,12,14)=", variable3(10, 12, 14));
Виконання
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\fonctions\func-02.js"
typeof(variable1)= function
variable1(10,12)= 22
variable2(10,12,14)= 12
variable3(10,12,14)= 36
8.3. скрипт [func-03]
Цей скрипт присвячений можливості передачі функції як параметра іншій функції. Цей підхід широко використовується у фреймворках JavaScript.
'use strict';
// параметри функції можуть бути типу [fonction]
// функція f1
function f1(param1, param2) {
return param1 + param2 + 10;
}
// функція f2
function f2(param1, param2) {
return param1 + param2 + 20;
}
// функція g з функцією f як параметром
function g(param1, param2, f) {
return f(param1, param2) + 100;
}
// використання функції g
console.log(g(0, 10, f1));
console.log(g(0, 10, f2));
// фактичний параметр типу функції можна передавати безпосередньо — форма 1
console.log(g(0, 10, (param1, param2) => {
return param1 + param2 + 30;
}));
// фактичний параметр типу функції можна передавати безпосередньо — форма 2
console.log(g(0, 10, function (param1, param2) {
return param1 + param2 + 40;
}));
Виконання
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\fonctions\func-03.js"
120
130
140
150
8.4. скрипт [func-04]
Наступний скрипт демонструє, що функція JavaScript може поводитися як клас:
'use strict';
// функцію можна використовувати як об’єкт
// порожня оболонка
function f() {
}
//, якому ззовні присвоюються властивості
f.prop1 = "val1";
f.show = function () {
console.log(this.prop1);
}
// використання f
f.show();
// функція g, що працює як клас
function g() {
this.prop2 = "val2";
this.show = function () {
console.log(this.prop2);
}
}
// інстанціювання функції за допомогою [new]
new g().show();
Коментарі
- рядки 5–7: тіло функції f не визначає жодних властивостей;
- рядки 9–12: ззовні функції f присвоюються властивості;
- рядок 14: використання функції (об’єкта) f. Зверніть увагу, що ми пишемо не [f()], а просто [f]. Це нотація об’єкта;
- рядки 17–22: визначається функція [g] так, ніби це клас із властивостями та методами;
- рядок 24: функція [g] інстанціюється за допомогою [new g()];
Результати виконання
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\classes\class-00.js"
val1
val2
ES6 запровадила поняття класу, що відтепер дозволяє нам уникати використання функцій для створення класів.
8.5. скрипт [func-05]
Скрипт [func-05] демонструє використання оператора під назвою [rest operator]:
'use strict';
// оператор rest
function f(arg1, ...otherArgs) {
// перший аргумент
console.log("arg1=", arg1);
// інші аргументи
let i = 0;
otherArgs.forEach(element => {
console.log("otherArguments[", i, "]=", element);
i++;
});
}
// виклик
f(1, "deux", "trois", { x: 2, y: 3 })
- рядок 3: запис [...otherArgs] означає, що при виклику типу f(param1, param2, param3) ми отримаємо рядок 3:
- arg1=param1
- otherArgs=[param2, param3]. Отже, [otherArgs] — це масив, що містить усі фактичні параметри, передані за [param1];
Результати роботи програми такі: