diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/uk/web/javascript/reference/operators/function/index.html | |
parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip |
initial commit
Diffstat (limited to 'files/uk/web/javascript/reference/operators/function/index.html')
-rw-r--r-- | files/uk/web/javascript/reference/operators/function/index.html | 154 |
1 files changed, 154 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/operators/function/index.html b/files/uk/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..8e8760660b --- /dev/null +++ b/files/uk/web/javascript/reference/operators/function/index.html @@ -0,0 +1,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 <= 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> |