From cece07c8085112412c514986c78ba440cae8c369 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Sun, 24 Jul 2022 17:26:08 +0300 Subject: [PATCH] update(JS): web/javascript/reference/functions/arrow_functions (#486) * update(JS): web/javascript/reference/functions/arrow_functions * update(JS): web/javascript/reference/functions/arrow_functions --- .../functions/arrow_functions/index.md | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/files/uk/web/javascript/reference/functions/arrow_functions/index.md b/files/uk/web/javascript/reference/functions/arrow_functions/index.md index e5dd756efa..60f7d5860a 100644 --- a/files/uk/web/javascript/reference/functions/arrow_functions/index.md +++ b/files/uk/web/javascript/reference/functions/arrow_functions/index.md @@ -113,6 +113,8 @@ const bob = (a) => a + 100; Єдиний аргумент. З простим виразом явний `return` не потрібен: ```js + +param => expression; (param) => expression; ``` @@ -125,6 +127,7 @@ const bob = (a) => a + 100; Наявність декількох рядків інструкцій потребує дужок навколо тіла функції та явного `return`: ```js +// Дужки необов'язкові, коли параметр лише один (param) => { const a = 1; return a + param; @@ -148,19 +151,19 @@ const bob = (a) => a + 100; (params) => ({ foo: 'a' }); // повертає об'єкт { foo: "a" } ``` -Підтримуються [залишкові параметри](/uk/docs/Web/JavaScript/Reference/Functions/rest_parameters), причому в такому випадку обов‘язкові дужки: +Підтримуються [залишкові параметри](/uk/docs/Web/JavaScript/Reference/Functions/rest_parameters), причому в такому випадку обов'язкові дужки: ```js (a, b, ...r) => expression; ``` -Підтримуються [усталені параметри](/uk/docs/Web/JavaScript/Reference/Functions/Default_parameters), причому в такому випадку обов‘язкові дужки: +Підтримуються [усталені параметри](/uk/docs/Web/JavaScript/Reference/Functions/Default_parameters), причому в такому випадку обов'язкові дужки: ```js (a = 400, b = 20, c) => expression; ``` -Підтримується [деструктуризація](/uk/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) всередині параметрів, причому в такому випадку обов‘язкові дужки: +Підтримується [деструктурування](/uk/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) всередині параметрів, причому в такому випадку обов'язкові дужки: ```js ([a, b] = [10, 20]) => a + b; // результатом є 30 @@ -185,8 +188,8 @@ const obj = { }, }; -obj.b(); // друкує undefined, Window {...} (або глобальний об'єкт) -obj.c(); // друкує 10, Object {...} +obj.b(); // друкує undefined, Window { /* … */ } (або глобальний об'єкт) +obj.c(); // друкує 10, Object { /* … */ } ``` Стрілкові функції не мають свого власного `this`. Ось іще один приклад, цього разу із застосуванням {{jsxref("Object.defineProperty()")}}: @@ -200,13 +203,13 @@ const obj = { Object.defineProperty(obj, 'b', { get: () => { - console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (або глобальний об'єкт) + console.log(this.a, typeof this.a, this); // undefined 'undefined' Window { /* … */ } (або глобальний об'єкт) return this.a + 10; // звертається до глобального об'єкту 'Window', а отже – 'this.a' поверне 'undefined' }, }); ``` -Через те, що тіло [класу](/uk/docs/Web/JavaScript/Reference/Classes) має контекст `this`, стрілкові функції як [поля класу](/uk/docs/Web/JavaScript/Reference/Classes/Public_class_fields) замикаються на контекст `this` класу, і `this` всередині тіла стрілкової функції коректно вказуватиме на примірник (чи, для [статичних полів](/uk/docs/Web/JavaScript/Reference/Classes/static), на сам клас). Втім, через те, що це [замикання](/uk/docs/Web/JavaScript/Closures), а не власна прив‘язка функції, значення `this` не змінюватиметься залежно від контексту виконання. +Через те, що тіло [класу](/uk/docs/Web/JavaScript/Reference/Classes) має контекст `this`, стрілкові функції як [поля класу](/uk/docs/Web/JavaScript/Reference/Classes/Public_class_fields) замикаються на контекст `this` класу, і `this` всередині тіла стрілкової функції коректно вказуватиме на примірник (чи, для [статичних полів](/uk/docs/Web/JavaScript/Reference/Classes/static), на сам клас). Втім, через те, що це [замикання](/uk/docs/Web/JavaScript/Closures), а не власна прив'язка функції, значення `this` не змінюватиметься залежно від контексту виконання. ```js class C { @@ -222,7 +225,7 @@ autoBoundMethod(); // 1 // Якби це був звичайний метод, мало б бути undefined ``` -Властивості зі стрілковими функціями часто звуть "автоматично прив‘язаними методами", бо еквівалентом зі звичайними методами є: +Властивості зі стрілковими функціями часто звуть "автоматично прив'язаними методами", бо еквівалентом зі звичайними методами є: ```js class C { @@ -236,7 +239,7 @@ class C { } ``` -> **Примітка:** Поля класу визначаються на _примірнику_, не на прототипі, тож кожне створення примірника створить нову функцію та виділить нове замикання, потенційно призводячи до більшого використання пам‘яті, ніж звичайний, неприв‘язаний метод. +> **Примітка:** Поля класу визначаються на _примірнику_, не на прототипі, тож кожне створення примірника створить нову функцію та виділить нове замикання, потенційно призводячи до більшого використання пам'яті, ніж звичайний, неприв'язаний метод. ### Функції `call`, `apply` та `bind` @@ -414,7 +417,7 @@ const func2 = (x, y) => { ### Повернення об'єктних літералів -Слід мати на увазі, що повернення об'єктних літералів в скороченому записі тіла функції `params => {object:literal}` не працюватиме так, як очікується. +Слід мати на увазі, що повернення об'єктних літералів в скороченому записі тіла функції `(params) => {object:literal}` не працюватиме так, як очікується. ```js const func = () => { foo: 1 }; @@ -494,7 +497,7 @@ simple(10); // 10 const max = (a, b) => (a > b ? a : b); -// Проста фільтрація, перебирання масиву, тощо... +// Прості фільтрування, відображення масиву тощо. const arr = [5, 6, 13, 0, 1, 18, 23]; @@ -510,10 +513,10 @@ const double = arr.map((v) => v * 2); // Більш лаконічні ланцюги промісів promise .then((a) => { - // ... + // … }) .then((b) => { - // ... + // … }); // Безпараметрові стрілкові функції, які простіше розібрати візуально