aboutsummaryrefslogtreecommitdiff
path: root/files/uk/web/javascript/reference/operators/function/index.html
blob: 8e8760660b771a1558f78abd694fa67290887353 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
---
title: Функціональний вираз
slug: Web/JavaScript/Reference/Operators/function
tags:
  - Function
  - JavaScript
  - Оператор
translation_of: Web/JavaScript/Reference/Operators/function
---
<div>{{jsSidebar("Operators")}}</div>

<p>Ключове слово <strong><code>function</code></strong> може використовуватись для визначення функції всередині виразу.</p>

<p>Ви також можете визначати функції за допомогою конструктора <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> та <a href="/uk/docs/Web/JavaScript/Reference/Statements/function"><code>оголошення функції</code></a>.</p>

<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div>



<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox">var myFunction = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
   <em>statements</em>
};</pre>

<p>Починаючи з ES2015 ви також можете скористатись <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілковими функціями</a>.</p>

<h3 id="Параметри">Параметри</h3>

<dl>
 <dt><code>name</code></dt>
 <dd>Ім'я функції. Можна пропустити, в цьому випадку функція буде <em>анонімною</em>. Ім'я доступне лише у тілі функції.</dd>
 <dt><code>paramN</code></dt>
 <dd>Ім'я аргументу, який передається у функцію.</dd>
 <dt><code>statements</code></dt>
 <dd>Інструкції, що складають тіло функції.</dd>
</dl>

<h2 id="Опис">Опис</h2>

<p>Функціональний вираз дуже схожий на оголошення функції та має майже такий самий синтаксис (дивіться <a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошення функції</a>). Головна відмінність між функціональним виразом та оголошенням функції - це <em>ім'я функції</em>, яке може бути пропущене у функціональних виразах для створення <em>анонімних</em> функцій. Функціональний вираз можна використовувати як <a href="/uk/docs/Glossary/IIFE">НВФВ (Негайно виконуваний функціональний вираз)</a>, який запускається одразу після визначення. Дивіться також главу про <a href="/uk/docs/Web/JavaScript/Reference/Functions">функції</a>, щоб дізнатись більше.</p>

<h3 id="Підняття_функціонального_виразу">Підняття функціонального виразу</h3>

<p>Функціональні вирази у JavaScript не піднімаються, на відміну від {{jsxref("Statements/function", "оголошень функцій", "#Підняття_оголошення_функції")}}. Не можна використовувати функціональний вираз до його визначення:</p>

<pre class="brush: js">console.log(notHoisted) // undefined
//хоча імена змінних піднімаються, визначення не піднімається і дорівнює undefined.
notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function() {
   console.log('bar');
};
</pre>

<h3 id="Іменований_функціональний_вираз">Іменований функціональний вираз</h3>

<p>Якщо бажаєте посилатись на поточну функцію всередині тіла функції, то вам потрібно створити іменований функціональний вираз. <u><strong>Це ім'я є локальним і доступне тільки всередині тіла (області видимості) функції</strong></u>. Це також дозволяє не використовувати нестандартну властивість <code><a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code>.</p>

<pre class="brush: js">var math = {
  'factit': function factorial(n) {
    console.log(n)
    if (n &lt;= 1) {
      return 1;
    }
    return n * factorial(n - 1);
  }
};

math.factit(3) //3;2;1;
</pre>

<p>Змінна, якій присвоюється функціональний вираз, матиме властивість <code>name</code> (ім'я). Ім'я не змінюється, якщо вираз присвоюється іншій змінній. Якщо ім'я функції пропущене, це буде ім'я змінної (неявне ім'я). Якщо ім'я функції присутнє, це буде ім'я функції (явне ім'я). Це також стосується <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функцій </a>(стрілкові функції не мають імені, тому ви можете задати лише неявне ім'я змінної).</p>

<pre class="brush: js">var foo = function() {}
foo.name // "foo"

var foo2 = foo
foo2.name // "foo"

var bar = function baz() {}
bar.name // "baz"

console.log(foo === foo2); // true
console.log(typeof baz); // undefined
console.log(bar === baz); // false (помилка, тому що baz == undefined)
</pre>

<h2 id="Приклади">Приклади</h2>

<p>Наступний приклад визначає неіменовану функцію та присвоює її <code>x</code>. Функція вертає квадрат свого аргументу:</p>

<pre class="brush: js">var x = function(y) {
   return y * y;
};
</pre>

<p>Найчастіше вони використовуються як <a href="/uk/docs/Glossary/Callback_function">функції зворотного виклику</a>:</p>

<pre class="brush: js">button.addEventListener('click', function(event) {
    console.log('кнопка натиснута!')
})</pre>

<h2 id="Специфікації">Специфікації</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Специфікація</th>
   <th scope="col">Статус</th>
   <th scope="col">Коментар</th>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td>Початкове визначення. Реалізоване у JavaScript 1.5.</td>
  </tr>
 </tbody>
</table>

<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>



<p>{{Compat("javascript.operators.function")}}</p>

<h2 id="Див._також">Див. також</h2>

<ul>
 <li>{{jsxref("Functions/Стрілкові_функції", "Стрілкові функції")}}</li>
 <li>{{jsxref("Functions", "Функції та область видимості функції")}}</li>
 <li>{{jsxref("Function")}}</li>
 <li>{{jsxref("Statements/function", "оголошення функції")}}</li>
 <li>{{jsxref("Statements/function*", "оголошення function*")}}</li>
 <li>{{jsxref("Operators/function*", "вираз function*")}}</li>
 <li>{{jsxref("GeneratorFunction")}}</li>
 <li>{{jsxref("Statements/async_function", "async function")}}</li>
 <li>{{jsxref("Operators/async_function", "вираз async function")}}</li>
</ul>