1. Оголошення і виклик функції
2. функціональні літерали
3. аргументи функції
4. Передача аргументів за посиланням і за значенням

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

У цьому уроці ми зосередимося на оголошенні і виклику власних функцій. Не забувайте, що в js є безліч вбудованих функцій. Деякі з них ми побіжно торкнулися в одному з попередніх уроків .

Оголошення і виклик функції

Оголосити функцію можна за допомогою ключового слова function, за яким слідує ім'я функції і список її аргументів, розділених комою і ув'язнений в дужки.

function funcName (arg1, arg2, / * ... * / argN) {// do something}

function funcName (arg1, arg2, / * ... * / argN) {// do something}

Будь-яка гілка коду функції може містити інструкцію return, яка припиняє виконання функції. Зазначене після цієї інструкції значення повертається функцією.

function sum (a, b) {return a + b; } Console. log (sum (1, 2)); // 3

function sum (a, b) {return a + b; } Console.log (sum (1, 2)); // 3

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

function f () {} console. log (f ()); // undefined

function f () {} console. log (f ()); // undefined

Будучи один раз певної, функція може викликатися як завгодно багато разів з різними параметрами, тому функції допомагають не дублювати код і робити його більш гнучким.

console. log (sum (2, 3)); // 5 console. log (sum (3, 3)); // 6 console. log (sum (3, 7)); // 10

console.log (sum (2, 3)); // 5 console.log (sum (3, 3)); // 6 console.log (sum (3, 7)); // 10

В якості аргументів функції можна передавати не тільки літерали, а й будь-які допустимі в js вираження.

console. log (sum (2 + 3, 3)); // 8 var a = 10, b = - 10; console. log (sum (a, b)); // 0 console. log (sum (sum (5, 3), 2)); // 10

console.log (sum (2 + 3, 3)); // 8 var a = 10, b = -10; console.log (sum (a, b)); // 0 console.log (sum (sum (5, 3), 2)); // 10

функціональні літерали

В JavaScript функції іноді можуть вести себе як звичайні змінні і, так само як і змінну, функцію можна визначити за допомогою литерала. Функціональний літерал визначає неіменованого, іноді її ще називають анонімної, функцію. Функціональним літералом можна проинициализировать змінну.

var sum = function (a, b) {return a + b; };

var sum = function (a, b) {return a + b; };

Тепер можна викликати функцію sum так само, як було описано раніше.

console. log (sum (1, 2)); // 3

console.log (sum (1, 2)); // 3

Одним з істотних особливостей такого оголошення функції є те, що виклик функції оголошеної таким чином до її оголошення викличе помилку

f (); // помилка! var f = function () {};

f (); // помилка! var f = function () {};

При виконанні функції оголошеної звичайним чином подібної помилки не відбудеться.

console. log (f ()); // undefined function f () {};

console.log (f ()); // undefined function f () {};

Функціональні літерали зручно використовувати, якщо ми хочемо динамічно визначити яку-небудь функцію в залежності від будь-яких умов. В такому випадку ініціалізацію функції можна помістити в блок коду після оператора розгалуження. Також функціональний літерал зручно передавати як аргумент функції.

аргументи функції

Важливою особливістю функцій в js є те, що функція може викликатися з будь-якою кількістю аргументів незалежно від того, скільки їх було вказано при її оголошенні.

Якщо кількість аргументів, переданих функції при її виклику менше, ніж було вказано при оголошенні, то не були подані параметри будуть рівні undefined. Подібна поведінка зручно використовувати, якщо деякі аргументи функції необов'язкові і можуть опускатися.

function someFunc (arg1, arg2, arg3) {console. log (arg1, arg2, arg3); } SomeFunc ( 'arg1', 'arg2'); // arg1, arg2, undefined someFunc ( 'arg1'); // arg1, undefined, undefined someFunc (); // undefined, undefined, undefined

function someFunc (arg1, arg2, arg3) {console.log (arg1, arg2, arg3); } SomeFunc ( 'arg1', 'arg2'); // arg1, arg2, undefined someFunc ( 'arg1'); // arg1, undefined, undefined someFunc (); // undefined, undefined, undefined

Список переданих значень аргументів міститься в об'єкті arguments. Цей об'єкт дуже схожий на масив і до переданим в якості аргументів значенням можна звертатися по їх номеру. Кількість переданих аргументів можна дізнатися за допомогою властивості length.

function someFunc () {console. log ( 'Кількість аргументів функції:' + arguments. length); } SomeFunc ( 'arg1', 'arg2'); // Кількість аргументів функції: 2 someFunc ( 'arg1'); // Кількість аргументів функції: 1 someFunc (); // Кількість аргументів функції: 0

function someFunc () {console.log ( 'Кількість аргументів функції:' + arguments.length); } SomeFunc ( 'arg1', 'arg2'); // Кількість аргументів функції: 2 someFunc ( 'arg1'); // Кількість аргументів функції: 1 someFunc (); // Кількість аргументів функції: 0

function someFunc () {var str = ''; for (var i = 0; i <arguments. length; i ++) {str + = "" + arguments [i]; } Console. log ( 'Аргументи функції:' + str); } SomeFunc ( 'arg1', 'arg2'); // Аргументи функції: arg1 arg2 someFunc ( 'arg1'); // Аргументи функції: arg1 someFunc (); // Аргументи функції:

function someFunc () {var str = ''; for (var i = 0; i <arguments.length; i ++) {str + = "" + arguments [i]; } Console.log ( 'Аргументи функції:' + str); } SomeFunc ( 'arg1', 'arg2'); // Аргументи функції: arg1 arg2 someFunc ( 'arg1'); // Аргументи функції: arg1 someFunc (); // Аргументи функції:

Об'єкт arguments зручно використовувати для написання функції зі змінним кількістю параметрів, наприклад для написання функції, яка повертає суму своїх аргументів.

function sum () {var s = 0; for (var i = 0; i <arguments. length; i ++) {s + = arguments [i]; } Return s; } Sum (1, 2, 10, 4); // 17 sum (); // 0

function sum () {var s = 0; for (var i = 0; i <arguments.length; i ++) {s + = arguments [i]; } Return s; } Sum (1, 2, 10, 4); // 17 sum (); // 0

Важливо пам'ятати про одну особливість об'єкта arguments. Коли у функції є іменовані аргументи, їх зміни з використанням об'єкта arguments змінює значення аргументу отримується за допомогою імені аргументу і навпаки. Наступний код виведе на консоль в стовпчик числа 10, 0, 10, 0.

function someFunc (a, b) {console. log (a); arguments [0] = 0; console. log (a); console. log (b); b = 0; console. log (arguments [1]); } SomeFunc (10, 10);

function someFunc (a, b) {console.log (a); arguments [0] = 0; console.log (a); console.log (b); b = 0; console.log (arguments [1]); } SomeFunc (10, 10);

Передача аргументів за посиланням і за значенням

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

Передача в якості аргументу функції змінної за значенням означає, що зміни, зроблені зі значенням цієї змінної не зберігатися після виклику функції. В цьому випадку в функцію передається копія змінної.

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

Розглянемо код, який ілюструє передачу значення за посиланням.

var point = {x: 1, y: 2}; function offset (p1, p2) {p1. x + = p2. x; p1. y + = p2. y; } Offset (point, {x: 1, y: 2}); console. log (point. x, point. y); // 2, 4

var point = {x: 1, y: 2}; function offset (p1, p2) {p1.x + = p2.x; p1.y + = p2.y; } Offset (point, {x: 1, y: 2}); console.log (point.x, point.y); // 2, 4

Зауважимо, що після виклику функції offset значення координат точки змінилися. При передачі по значенню подібного не відбудеться.

var a = 0; function inc (a) {return ++ a; } Var a = 0; inc (a); console. log (a); // як і раніше 0

var a = 0; function inc (a) {return ++ a; } Var a = 0; inc (a); console.log (a); // як і раніше 0

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

Перейти до змісту курсу «Javascript для початківців»