Skip to content
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

update(JS): web/javascript/guide/expressions_and_operators #3564

Merged
merged 1 commit into from
Dec 24, 2024
Merged

update(JS): web/javascript/guide/expressions_and_operators #3564

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
97 changes: 68 additions & 29 deletions files/uk/web/javascript/guide/expressions_and_operators/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ const [one, two, three] = foo;

### Обчислення та вкладеність

Загалом, присвоєння вживаються в межах оголошень змінних (тобто вкупі з [`const`][], [`let`][] чи [`var`][]) або ж як окремі інструкції).
Загалом, присвоєння вживаються в межах оголошень змінних (тобто вкупі з [`const`](/uk/docs/Web/JavaScript/Reference/Statements/const), [`let`](/uk/docs/Web/JavaScript/Reference/Statements/let) чи [`var`](/uk/docs/Web/JavaScript/Reference/Statements/var)) або ж як окремі інструкції.

```js
// Оголошується змінна x, а потім ініціалізується результатом f().
Expand All @@ -150,10 +150,6 @@ let x = f();
x = g(); // Повторно присвоює змінній x результат g().
```

[`const`]: /uk/docs/Web/JavaScript/Reference/Statements/const
[`let`]: /uk/docs/Web/JavaScript/Reference/Statements/let
[`var`]: /uk/docs/Web/JavaScript/Reference/Statements/var

А проте, подібно до інших виразів, вирази присвоєння виду `x = f()` обчислюються до значення результату. Хоч зазвичай цей результат не використовується, він може бути використаний іншим виразом.

Утворення ланцюжків присвоєнь або присвоєнь, вкладених в інші вирази, може призвести до неочікуваної поведінки. Через це частина посібників зі стилю JavaScript коду [не радить утворювати з присвоєнь ланцюжки або вкладеність](https://github.com/airbnb/javascript/blob/master/readme.md#variables--no-chain-assignment).
Expand All @@ -179,7 +175,7 @@ console.log(f(0, x = f(), 0));

Що до логічних присвоєнь, `x &&= f()`, `x ||= f()` і `x ??= f()`, то повернене значення – значення логічної операції без присвоєння, тобто `x && f()`, `x || f()` та `x ?? f()` відповідно.

При утворенні ланцюжків з таких виразів без дужок, або інакшого групування операторів – наприклад, в літералах масивів, вирази присвоєння **групуються справа наліво** (вони мають [праву асоціативність](https://en.wikipedia.org/wiki/Operator_associativity)), але **обчислюються зліва направо**.
При утворенні ланцюжків з таких виразів без дужок, або інакшого групування операторів – наприклад, в літералах масивів, вирази присвоєння **групуються справа наліво** (вони мають [праву асоціативність](/uk/docs/Web/JavaScript/Reference/Operators/Operator_precedence#priorytet-ta-asotsiatyvnist)), але **обчислюються зліва направо**.

Зверніть увагу на те, що для всіх операторів присвоєння, крім самого `=`, результівне значення – завжди засноване на значеннях операндів _до_ операції.

Expand Down Expand Up @@ -207,7 +203,7 @@ x[f()] = g();

#### Приклад обчислення №1

Запис `y = x = f()` – рівносильний щодо `y = (x = f())`, адже оператор присвоєння `=` має [праву асоціативність](https://en.wikipedia.org/wiki/Operator_associativity).
Запис `y = x = f()` – рівносильний щодо `y = (x = f())`, адже оператор присвоєння `=` має [праву асоціативність](/uk/docs/Web/JavaScript/Reference/Operators/Operator_precedence#priorytet-ta-asotsiatyvnist).
Проте обчислюється він зліва направо:

1. Починається обчислення виразу присвоєння `y = x = f()`.
Expand Down Expand Up @@ -254,7 +250,7 @@ x[f()] = g();

Ланцюжки присвоєнь і вкладання присвоєнь в інші вирази можуть призводити до дивної поведінки. Через це [заведено уникати ланцюжків присвоєння в межах однієї інструкції](https://github.com/airbnb/javascript/blob/master/readme.md#variables--no-chain-assignment).

Якщо конкретніше, то постановка ланцюжка змінних в інструкціях [`const`][], [`let`][] і [`var`][] нерідко _не_ працює. Лише зовнішня (найлівіша) змінна оголошується; решта змінних в межах такого ланцюжка присвоєння _не_ оголошуються інструкцією `const`, `let` чи `var`.
Якщо конкретніше, то постановка ланцюжка змінних в інструкціях [`const`](/uk/docs/Web/JavaScript/Reference/Statements/const), [`let`](/uk/docs/Web/JavaScript/Reference/Statements/let) і [`var`](/uk/docs/Web/JavaScript/Reference/Statements/var) нерідко _не_ працює. Лише зовнішня (найлівіша) змінна оголошується; решта змінних в межах такого ланцюжка присвоєння _не_ оголошуються інструкцією `const`, `let` чи `var`.
Наприклад:

```js-nolint
Expand Down Expand Up @@ -383,7 +379,9 @@ const var2 = 4;
</tbody>
</table>

> **Примітка:** `=>` – це не оператор порівняння, а запис у [стрілкових функціях](/uk/docs/Web/JavaScript/Reference/Functions/Arrow_functions).
> [!NOTE]
>
> `=>` – це не оператор порівняння, а запис у [стрілкових функціях](/uk/docs/Web/JavaScript/Reference/Functions/Arrow_functions).

## Арифметичні оператори

Expand Down Expand Up @@ -577,7 +575,7 @@ const var2 = 4;
## Логічні оператори

Логічні оператори здебільшого застосовуються на булевих (логічних) значеннях; коли це так, то вони повертають булеві значення.
Проте оператори `&&` і `||` фактично повертають значення одного з переданих операндів, тож коли ці оператори застосовуються до небулевих значень, то ці оператори можуть повернути небулеві значення.
Проте оператори `&&`, `||` і `??` фактично повертають значення одного з переданих операндів, тож коли ці оператори застосовуються до небулевих значень, то ці оператори можуть повернути небулеві значення. Отже, їх більш доречно було б звати "операторами вибору значення".
Логічні оператори описані в наступній таблиці.

<table class="fullwidth-table">
Expand All @@ -603,13 +601,23 @@ const var2 = 4;
</tr>
<tr>
<td>
<a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_OR">Логічна диз'юнкція </a>(<code>||</code>)
<a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_OR">Логічна диз'юнкція</a> (<code>||</code>)
</td>
<td><code>expr1 || expr2</code></td>
<td>
Повертає <code>expr1</code>, якщо це значення може бути перетворено на <code>true</code>, інакше повертає <code>expr2</code>. Таким чином, бувши застосованим до булевих значень, оператор <code>||</code> повертає <code>true</code>, якщо будь-який з операндів – true, якщо ж обидва вони – false, то повертає <code>false</code>.
</td>
</tr>
<tr>
<td>
<a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing">Оператор null-злиття</a> (<code>??</code>)
</td>
<td><code>expr1 ?? expr2</code></td>
<td>
Повертає <code>expr1</code>, якщо цей вираз не є ані <code>null</code>, ані
<code>undefined</code>; інакше – повертає <code>expr2</code>.
</td>
</tr>
<tr>
<td>
<a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_NOT">Логічне заперечення</a> (<code>!</code>)
Expand All @@ -622,7 +630,7 @@ const var2 = 4;
</tbody>
</table>

Прикладами виразів, котрі можуть бути перетворені на `false`, є ті вирази, котрі обчислюються в null, 0, NaN, порожній рядок ("") та undefined.
Прикладами виразів, котрі можуть бути перетворені на `false`, є ті вирази, котрі обчислюються в `null`, `0`, `0n`, `NaN`, порожній рядок (`""`) та undefined.

Наступний код демонструє приклади застосування оператора `&&` (логічної кон'юнкції).

Expand All @@ -636,7 +644,7 @@ const a6 = false && "Кіт"; // f && t повертає false
const a7 = "Кіт" && false; // t && f повертає false
```

Наступний код демонструє приклади застосування оператора || (логічної диз'юнкції).
Наступний код демонструє приклади застосування оператора `||` (логічної диз'юнкції).

```js
const o1 = true || true; // t || t повертає true
Expand All @@ -648,7 +656,18 @@ const o6 = false || "Кіт"; // f || t повертає Кіт
const o7 = "Кіт" || false; // t || f повертає Кіт
```

Наступний код демонструє приклади застосування оператора ! (логічного заперечення).
Наступний код демонструє приклади оператора `??` (null-злиття).

```js
const n1 = null ?? 1; // 1
const n2 = undefined ?? 2; // 2
const n3 = false ?? 3; // false
const n4 = 0 ?? 4; // 0
```

Зверніть увагу на те, що `??` працює подібно до `||`, але повертає другий вираз лише тоді, коли перший є "[нульовим](/uk/docs/Glossary/Nullish)", тобто [`null`](/uk/docs/Web/JavaScript/Reference/Operators/null) або [`undefined`](/uk/docs/Web/JavaScript/Reference/Global_Objects/undefined). `??` кращий за `||` для задання усталених значень там, де може бути `null` або `undefined`, особливо коли значення штибу `''` і `0` є дійсними значеннями, що не повинні замінюватися на усталені.

Наступний код демонструє приклади застосування оператора `!` (логічного заперечення).

```js
const n1 = !true; // !t повертає false
Expand All @@ -660,14 +679,12 @@ const n3 = !"Кіт"; // !t повертає false

Оскільки логічні вирази обчислюються зліва направо, то вони перевіряються на змогу "закоротити" обчислення, згідно з наступними правилами:

- `false && щось` – із закороченням обчислюється в false.
- `true || щось` – із закороченням обчислюється в true.
- `хибне && щось` – із закороченням обчислюється в хибне значення.
- `істинне || щось` – із закороченням обчислюється в істинне значення.
- `неНульове ?? щось` – із закороченням обчислюється в ненульове значення.

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

Зверніть увагу на те, що в сучасному коді можна застосувати [оператор null-злиття](/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) (`??`), котрий працює подібно до `||`, але повертає другий вираз лише тоді, коли перший вираз є "[null-подібним](/uk/docs/Glossary/Nullish)", тобто [`null`](/uk/docs/Web/JavaScript/Reference/Operators/null) або [`undefined`](/uk/docs/Web/JavaScript/Reference/Global_Objects/undefined).
Таким чином, це кращий варіант для надання усталених значень у тих випадках, коли `''` і `0` є дійсними значеннями першого виразу.

## Оператори BigInt

Більшість операторів, котрі можуть бути застосовані до двох чисел, може бути застосована також до значень [`BigInt`](/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt).
Expand Down Expand Up @@ -722,8 +739,8 @@ console.log("my " + "string"); // консоль виводить рядок "my
Наприклад,

```js
let mystring = "alpha";
mystring += "bet"; // обчислюється в "alphabet" й присвоює це значення mystring.
let myString = "alpha";
myString += "bet"; // обчислюється в "alphabet" й присвоює це значення myString.
```

## Умовний (тернарний) оператор
Expand Down Expand Up @@ -907,20 +924,20 @@ const myString = new String("coral");
"length" in myString; // повертає true

// Власні об'єкти
const mycar = { make: "Honda", model: "Accord", year: 1998 };
"make" in mycar; // повертає true
"model" in mycar; // повертає true
const myCar = { make: "Honda", model: "Accord", year: 1998 };
"make" in myCar; // повертає true
"model" in myCar; // повертає true
```

### instanceof

[Оператор `instanceof`](/uk/docs/Web/JavaScript/Reference/Operators/instanceof) повертає `true`, якщо даний об'єкт належить до даного об'єктного типу. Запис – наступний:

```js-nolint
objectName instanceof objectType
object instanceof objectType
```

де `objectName` – це назва об'єкта до порівняння з `objectType`, а `objectType` – об'єктний тип, наприклад, {{jsxref("Date")}} або {{jsxref("Array")}}.
де `object` – це об'єкт для перевірки щодо `objectType`, а `objectType` – конструктор, що представляє тип, наприклад, {{jsxref("Date")}} або {{jsxref("Array")}}.

Використовувати `instanceof` слід тоді, коли необхідно перевірити тип об'єкта під час виконання.
Наприклад, при перехопленні винятків, може бути потреба обробляти по-різному викинуті винятки, залежно від їх типу.
Expand Down Expand Up @@ -952,8 +969,8 @@ this.propertyName;
Припустімо, що функція під назвою `validate` валідує властивість `value` об'єкта, отримавши об'єкт та межі допустимого діапазону для `value`:

```js
function validate(obj, lowval, hival) {
if (obj.value < lowval || obj.value > hival) {
function validate(obj, lowVal, highVal) {
if (obj.value < lowVal || obj.value > highVal) {
console.log("Недійсне значення!");
}
}
Expand All @@ -968,7 +985,7 @@ function validate(obj, lowval, hival) {

### Оператор групування

Оператор групування `( )` контролює пріоритет обчислення у виразах. Наприклад, можна відкинути першість множення й ділення перед додаванням і відніманням - і обчислити спершу додавання.
Оператор групування `( )` контролює пріоритет обчислення у виразах. Наприклад, можна відкинути першість множення й ділення перед додаванням і відніманням – і обчислити спершу додавання.

```js-nolint
const a = 1;
Expand All @@ -988,6 +1005,28 @@ a + (b * c) // 7
a * c + b * c // 9
```

### Аксесор властивості

Синтаксис [аксесора властивості](/uk/docs/Web/JavaScript/Reference/Operators/Property_accessors) отримує значення властивостей на об'єктах, користуючись або крапковим, або дужковим записом.

```js
object.property;
object["property"];
```

Посібник [роботи з об'єктами](/uk/docs/Web/JavaScript/Guide/Working_with_objects) вміщає більше подробиць про властивості об'єктів.

### Необов'язковий ланцюжок

Синтаксис [необов'язкового ланцюжка](/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining) (`?.`) виконує операцію в ланцюжку на об'єкті, якщо він визначений і не є `null`, а інакше – закорочує операцію та повертає `undefined`.
Це дає змогу працювати зі значенням, що може бути `null` або `undefined`, не спричиняючи `TypeError`.

```js
maybeObject?.property;
maybeObject?.[property];
maybeFunction?.();
```

### new

[Оператор `new`](/uk/docs/Web/JavaScript/Reference/Operators/new) можна використовувати для створення примірника власного об'єктного типу або одного із вбудованих об'єктних типів. Робиться це так:
Expand Down
Loading