Skip to content

Fix functions basics #686

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix functions basics #686

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 23 additions & 23 deletions 1-js/02-first-steps/15-function-basics/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function showMessage() {
}
```

Спочатку ми пишемо `function` — це ключове слово (keyword), яке дає зрозуміти комп’ютеру, що далі буде оголошення функції. Потім — *назву функції* та список її *параметрів* в дужках (розділені комою). Якщо параметрів немає, ми залишаємо *пусті дужки*. І нарешті, код функції, який також називають *тілом функції* між фігурними дужками.
Спочатку ми пишемо `function` — це ключове слово (англ. keyword), яке дає зрозуміти комп’ютеру, що далі буде оголошення функції. Потім — *назву функції* та в дужках список з назвами *параметрів* які наша функція має приймати (розділяючи їх комою). Якщо ми не хочемо щоб наша функція приймала параметри, ми залишаємо *пусті дужки*. І нарешті, код функції, який також називають *тілом функції* між фігурними дужками.

```js
function name(parameter1, parameter2, ... parameterN) {
Expand Down Expand Up @@ -71,7 +71,7 @@ alert( message ); // <-- Помилка! Змінна недоступна по

## Зовнішні змінні

Функція може використовувати зовнішні змінні, наприклад:
Функція може використовувати змінні, які оголошені за її межами (зовнішні змінні), наприклад:

```js run no-beautify
let *!*userName*/!* = 'Іван';
Expand Down Expand Up @@ -184,7 +184,7 @@ alert( from ); // Анна
Дехто може сказати, що в прикладі вище "функцію `showMessage` оголошено з двома параметрами, потім викликано з двома аргументами: `from` і `"Привіт"`".


## Типові значення
## Значення за замовчуванням

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

Expand All @@ -196,7 +196,7 @@ showMessage('Анна');

Помилки не виникне. Такий виклик виведе `"*Анна*: undefined"`. Оскільки значення для змінної `text` не задане, воно стане `undefined`.

Ми можемо задати так зване "типове" значення параметра, яке використовуватиметься, якщо не задати аргумент. Для цього потрібно написати значення через `=`:
Ми можемо задати для параметра значення за замовчуванням, яке використовуватиметься, якщо не задати аргумент. Для цього потрібно написати значення через `=`:

```js run
function showMessage(from, *!*text = "текст не задано"*/!*) {
Expand All @@ -208,7 +208,7 @@ showMessage("Анна"); // Анна: текст не задано

Тепер, якщо параметр `text` не задано, його значення стане `"текст не задано"`.

Типове значення також додається, якщо параметр існує, але суворо дорівнює `undefined`, наприклад:
Значення за замовчуванням також застосовується, якщо параметр існує, але суворо дорівнює `undefined`, наприклад:

```js
showMessage("Анна", undefined); // Анна: текст не задано
Expand All @@ -224,15 +224,15 @@ function showMessage(from, text = anotherFunction()) {
```

```smart header="Обчислення типових параметрів"
В JavaScript, типовий параметр обчислюється кожного разу, коли викликається функція без відповідного параметру.
В JavaScript, типовий параметр обчислюється не один раз при оголошенні функції, а кожного разу, коли функція викликається без відповідного параметра.

В прикладі вище, функція `anotherFunction()` не викличеться, якщо буде задано параметр `text`.

З іншого боку, вона буде викликатися кожного разу, коли `text` відсутній.
```

````smart header="Типові параметри у старому JavaScript коді"
Кілька років тому JavaScript не підтримував синтаксис типових значень для параметрів. Тому люди використовували інші способи їх визначення.
Кілька років тому JavaScript не підтримував синтаксис значень за замовчуванням для параметрів. Тому люди використовували інші способи їх визначення.

Нині ми можемо зустріти їх у старих скриптах.

Expand All @@ -254,18 +254,18 @@ function showMessage(from, text) {

```js
function showMessage(from, text) {
// Якщо значення у змінній text дає false, призначається типове значення
// це передбачає, що text == "" це те саме, що і його повна відсутність
// Якщо значення у змінній text при перетворенні на булевий тип буде false, їй призначається значення за замовчуванням
// в цій ситуації скрипт сприймає `""` як те саме, що і його повна відсутність.
text = text || 'текст повідомлення відсутній';
...
}
```
````


### Альтернативні типові параметри
### Альтернативні параметри за замовчуванням

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

Під час виконання функції, ми можемо перевірити, чи параметр надано, порівнюючи його з `undefined`:

Expand Down Expand Up @@ -295,7 +295,7 @@ function showMessage(text) {
}
```

Сучасні рушії JavaScript підтримують [оператор null-злиття](info:nullish-coalescing-operator) `??`. Його краще використовувати, коли "майже false" значення, типу `0`, мають вважатися за "нормальні":
Сучасні рушії JavaScript підтримують [оператор об’єднання з null](info:nullish-coalescing-operator) `??`. Його краще використовувати, коли "майже false" значення, типу `0` або `""`, мають вважатися за "нормальні":

```js run
function showCount(count) {
Expand All @@ -310,7 +310,7 @@ showCount(); // невідомо

## Повернення значення

Як результат функція може повертати назад значення в код, який викликав цю функцію.
Функція може повертати значення в код, який викликав цю функцію.

Найпростіший приклад — функція, яка сумує два значення:

Expand All @@ -323,7 +323,7 @@ let result = sum(1, 2);
alert( result ); // 3
```

Директива `return` може бути в будь-якому місці функції. Коли виконання досягає цієї директиви, функція зупиняється, і в код, який викликав цю функцію, повертається значення (в прикладі вище, це значення надається змінній `result`).
Директива `return` може бути в будь-якому місці функції. Коли виконання досягає цієї директиви, функція зупиняється, і в код, який викликав цю функцію, повертається значення (в прикладі вище, це значення присвоюється в змінну `result`).

В одній функції може бути декілька директив `return`. Наприклад:

Expand Down Expand Up @@ -368,13 +368,13 @@ function showMovie(age) {

В коді вище, якщо `checkAge(age)` поверне `false`, тоді функція `showMovie` не дійде до виконання `alert`.

````smart header="Функція з порожнім `return`, або без `return` повертає `undefined`"
Якщо функція не повертає значення, тоді "повернене" значення буде `undefined`:
````smart header="Функція з порожнім `return`, або без вказаного в ній `return` повертає `undefined`"
Функція буде повертати значення навіть якщо ви не вкажете їй явно що вона повинна повертати. Просто значення це буде `undefined`:

```js run
function doNothing() { /* порожньо */ }

alert( doNothing() === undefined ); // true
alert( doNothing() ); // undefined
```

Порожній `return` це те саме, що `return undefined`:
Expand Down Expand Up @@ -402,7 +402,7 @@ return*!*;*/!*
('деякий' + 'довгий' + 'вираз' + 'або' + 'що' * f(a) + f(b))
```

Тобто, повернеться порожній результат.
Тобто, результат буде як ніби ми взагалі не вказали ніякого виразу після `return`.

Якщо ми хочемо повернути довгий вираз, який займе декілька рядків, ми повинні писати його на одному рядку з `return`. Або обгорнути його в дужки. Ось так:

Expand All @@ -413,7 +413,7 @@ return (
'що' * f(a) + f(b)
)
```
Такий варіант працюватиме так, як ми задумали.
От такий варіант працюватиме так, як ми задумали.
````

## Найменування функції [#function-naming]
Expand All @@ -438,7 +438,7 @@ showMessage(..) // показує повідомлення
getAge(..) // повертає вік (якось його отримує або обчислює)
calcSum(..) // обчислює суму і повертає результат
createForm(..) // створює форму (і зазвичай її повертає)
checkPermission(..) // перевіряє доступ, повертає true/false
checkPermission(..) // перевіряє дозвіл, повертає true/false
```

Якщо є префікси, погляд на ім’я функції дає зрозуміти, яку роботу вона виконує і яке значення повертає.
Expand Down Expand Up @@ -508,7 +508,7 @@ function isPrime(n) {
}
```

Другий варіант легше зрозуміти, чи не так? Замість частини коду ми бачимо назву дії (`isPrime`). Іноді розробники називають такий код *само документованим*.
Другий варіант легше зрозуміти, чи не так? Замість частини коду ми бачимо назву дії (`isPrime`). Іноді розробники називають такий код *самодокументованим*.

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

Expand All @@ -524,7 +524,7 @@ function ім’я(параметри, розділені, комою) {

- Значення, які передаються в функцію як параметри, копіюються в локальні змінні.
- Функції мають доступ до зовнішніх змінних. Але це працює тільки зсередини назовні. Код поза функцією не має доступу до локальних змінних функції.
- Функція може повертати значення. Якщо цього не відбувається, результат буде `undefined`.
- Функція завжди повертає значення. Якщо не вказати яке саме, то повертатиме `undefined`.

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

Expand All @@ -533,7 +533,7 @@ function ім’я(параметри, розділені, комою) {
Найменування функцій:

- Ім’я функції повинне бути коротким і чітко відображати, що робить функція. Побачивши виклик функції в коді, ви повинні зразу зрозуміти, що функція робить, і що повертає.
- Функція -- це дія, тому її ім’я зазвичай складається з дієслова.
- Функція -- це дія, тому її ім’я зазвичай починається з дієслова.
- Є багато загальноприйнятих префіксів, такі як `create…`, `show…`, `get…`, `check…` тощо. Використовуйте їх, щоб пояснити, що робить функція.

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