From 9a53256e1da6e009af4020c3803aff369588fa2e Mon Sep 17 00:00:00 2001 From: Tetiana Hordiienko Date: Sun, 21 Nov 2021 14:00:15 +0200 Subject: [PATCH 1/8] Destructuring assignment --- .../1-destruct-user/solution.md | 4 +- .../1-destruct-user/task.md | 22 +- .../6-max-salary/task.md | 12 +- .../10-destructuring-assignment/article.md | 372 +++++++++--------- 4 files changed, 205 insertions(+), 205 deletions(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md index cc226e7c5..a5e64935f 100644 --- a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md +++ b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md @@ -1,13 +1,13 @@ ```js run let user = { - name: "John", + name: "Джон", years: 30 }; let {name, years: age, isAdmin = false} = user; -alert( name ); // John +alert( name ); // Джон alert( age ); // 30 alert( isAdmin ); // false ``` \ No newline at end of file diff --git a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md index b68db5c59..852167554 100644 --- a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md +++ b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md @@ -2,32 +2,32 @@ importance: 5 --- -# Destructuring assignment +# Деструктуроване присвоєння -We have an object: +У нас є об’єкт: ```js let user = { - name: "John", + name: "Джон", years: 30 }; ``` -Write the destructuring assignment that reads: +Напишіть деструктуроване присвоєння, яке зчитує: -- `name` property into the variable `name`. -- `years` property into the variable `age`. -- `isAdmin` property into the variable `isAdmin` (false, if no such property) +- властивість `name` до змінної `name`. +- властивість `years` до змінної `age`. +- властивість `isAdmin` до змінної `isAdmin` (false, якщо така властівість відсутня) -Here's an example of the values after your assignment: +Ось приклад значень після вашого присвоєння: ```js -let user = { name: "John", years: 30 }; +let user = { name: "Джон", years: 30 }; -// your code to the left side: +// ваш код зліва: // ... = user -alert( name ); // John +alert( name ); // Джон alert( age ); // 30 alert( isAdmin ); // false ``` diff --git a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md index 9f33de089..4ad537a7e 100644 --- a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md +++ b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# The maximal salary +# Максимальна зарплата -There is a `salaries` object: +Є об’єкт `salaries`: ```js let salaries = { @@ -14,9 +14,9 @@ let salaries = { }; ``` -Create the function `topSalary(salaries)` that returns the name of the top-paid person. +Створіть функцію `topSalary(salaries)` яка повертає ім’я найбільш високооплачуваної особи. -- If `salaries` is empty, it should return `null`. -- If there are multiple top-paid persons, return any of them. +- Якщо об’єкт `salaries` пустий, функція повинна повернути `null`. +- Якщо є кілька високооплачуваних осіб, поверніть будь-якого з них. -P.S. Use `Object.entries` and destructuring to iterate over key/value pairs. +P.S. Використовуйте `Object.entries` і деструктурування для перебору пар ключ/значення. diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md index fb9346aa2..ec2d31e24 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -1,51 +1,51 @@ -# Destructuring assignment +# Деструктуроване присвоєння -The two most used data structures in JavaScript are `Object` and `Array`. +Двома найбільш вживаними структурами даних у JavaScript є `Object` та `Array`. -- Objects allow us to create a single entity that stores data items by key. -- Arrays allow us to gather data items into an ordered list. +- Об’єкти дозволяють нам створити єдину сутність, яка зберігатиме дані за ключем. +- Масиви дозволяють нам зібрати елементи даних у впорядкований список. -Although, when we pass those to a function, it may need not an object/array as a whole. It may need individual pieces. +Хоча, коли ми передаємо їх у функції, їй може знадобитися не об’єкт/масив в цілому, а тільки окремі їх елементи. -*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient. +*Деструктуроване присвоєння* -- це спеціальний синтаксис, що дозволяє нам "розпаковувати" масиви чи об’єкти в купу змінних, оскільки іноді це зручніше. -Destructuring also works great with complex functions that have a lot of parameters, default values, and so on. Soon we'll see that. +Деструктурування також чудово працює зі складними функціями, які мають багато параметрів, типових значень тощо. Незабаром ми це побачимо. -## Array destructuring +## Деструктурування масиву -Here's an example of how an array is destructured into variables: +Ось приклад того, як масив деструктурується на змінні: ```js -// we have an array with the name and surname -let arr = ["John", "Smith"] +// у нас є масив з іменем та прізвищем +let arr = ["Джон", "Сміт"] *!* -// destructuring assignment -// sets firstName = arr[0] -// and surname = arr[1] +// деструктуроване присвоєння +// встановлює firstName = arr[0] +// та surname = arr[1] let [firstName, surname] = arr; */!* -alert(firstName); // John -alert(surname); // Smith +alert(firstName); // Джон +alert(surname); // Сміт ``` -Now we can work with variables instead of array members. +Тепер ми можемо працювати зі змінними замість елементів масиву. -It looks great when combined with `split` or other array-returning methods: +Це чудово виглядає в поєднанні зі `split` або іншими методами повернення масиву: ```js run -let [firstName, surname] = "John Smith".split(' '); -alert(firstName); // John -alert(surname); // Smith +let [firstName, surname] = "Джон Сміт".split(' '); +alert(firstName); // Джон +alert(surname); // Сміт ``` -As you can see, the syntax is simple. There are several peculiar details though. Let's see more examples, to better understand it. +Як бачите, синтаксис простий. Хоча є кілька особливих деталей. Давайте розглянемо більше прикладів, щоб краще це зрозуміти. -````smart header="\"Destructuring\" does not mean \"destructive\"." -It's called "destructuring assignment," because it "destructurizes" by copying items into variables. But the array itself is not modified. +````smart header="\"Деструктурування\" не означає \"руйнування\"." +Це називається "деструктуроване присвоєння", оскільки воно "деструктурує" шляхом копіювання елементів у змінні. Але сам масив не змінюється. -It's just a shorter way to write: +Це просто коротший спосіб написати: ```js // let [firstName, surname] = arr; let firstName = arr[0]; @@ -53,141 +53,141 @@ let surname = arr[1]; ``` ```` -````smart header="Ignore elements using commas" -Unwanted elements of the array can also be thrown away via an extra comma: +````smart header="Ігноруйте елементи за допомогою коми" +Небажані елементи масиву також можна викинути за допомогою додаткової коми: ```js run *!* -// second element is not needed -let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; +// другий елемент не потрібен +let [firstName, , title] = ["Юлій", "Цезар", "Консул", "Римської республіки"]; */!* -alert( title ); // Consul +alert( title ); // Консул ``` -In the code above, the second element of the array is skipped, the third one is assigned to `title`, and the rest of the array items is also skipped (as there are no variables for them). +У наведеному вище коді другий елемент масиву пропускається, третій присвоюється `title`, а решта елементів масиву також пропускається (оскільки для них немає змінних). ```` -````smart header="Works with any iterable on the right-side" +````smart header="Працює з будь-якими типами даних, що перебираються у правій стороні" -...Actually, we can use it with any iterable, not only arrays: +...Насправді, ми можемо використовувати його з будь-якими даними, які перебираються, а не тільки з масивами: ```js let [a, b, c] = "abc"; // ["a", "b", "c"] let [one, two, three] = new Set([1, 2, 3]); ``` -That works, because internally a destructuring assignment works by iterating over the right value. It's kind of syntax sugar for calling `for..of` over the value to the right of `=` and assigning the values. +Це спрацьовує, оскільки зсередини деструктуроване присвоєння працює шляхом ітерації правого значення. Це свого роду синтаксичний цукор для виклику `for..of` над значенням праворуч від `=` та присвоєння значень. ```` -````smart header="Assign to anything at the left-side" -We can use any "assignables" at the left side. +````smart header="Присвоюйте до будь-чого зліва" +Ми можемо використовувати будь-яке "присвоюване" з лівої сторони. -For instance, an object property: +Наприклад, присвоїти властивості об’єкта: ```js run let user = {}; -[user.name, user.surname] = "John Smith".split(' '); +[user.name, user.surname] = "Джон Сміт".split(' '); -alert(user.name); // John -alert(user.surname); // Smith +alert(user.name); // Джон +alert(user.surname); // Сміт ``` ```` -````smart header="Looping with .entries()" -In the previous chapter we saw the [Object.entries(obj)](mdn:js/Object/entries) method. +````smart header="Цикл з .entries()" +У попередньому розділі ми бачили метод [Object.entries(obj)](mdn:js/Object/entries). -We can use it with destructuring to loop over keys-and-values of an object: +Ми можемо використовувати його з деструктуруванням для циклічного перебору ключів-та-значень об’єкта: ```js run let user = { - name: "John", + name: "Джон", age: 30 }; -// loop over keys-and-values +// перебрати циклом ключі-та-значення *!* for (let [key, value] of Object.entries(user)) { */!* - alert(`${key}:${value}`); // name:John, then age:30 + alert(`${key}:${value}`); // name:Джон, потім age:30 } ``` -The similar code for a `Map` is simpler, as it's iterable: +Подібний код для `Map` простіший, оскільки він є струтктурою даних, яка перебирається: ```js run let user = new Map(); -user.set("name", "John"); +user.set("name", "Джон"); user.set("age", "30"); *!* -// Map iterates as [key, value] pairs, very convenient for destructuring +// Map ітерує як пари [key, value], що дуже зручно для деструктурування for (let [key, value] of user) { */!* - alert(`${key}:${value}`); // name:John, then age:30 + alert(`${key}:${value}`); // name:Джон, then age:30 } ``` ```` -````smart header="Swap variables trick" -There's a well-known trick for swapping values of two variables using a destructuring assignment: +````smart header="Трюк обміну змінними" +Існує відомий трюк для обміну значень двох змінних за допомогою деструктурованого присвоєння: ```js run -let guest = "Jane"; -let admin = "Pete"; +let guest = "Джейн"; +let admin = "Пітер"; -// Let's swap the values: make guest=Pete, admin=Jane +// Давайте обміняємо значення: зробімо guest=Пітер, admin=Джейн *!* [guest, admin] = [admin, guest]; */!* -alert(`${guest} ${admin}`); // Pete Jane (successfully swapped!) +alert(`${guest} ${admin}`); // Пітер Джейн (успішно обмінялися!) ``` -Here we create a temporary array of two variables and immediately destructure it in swapped order. +Тут ми створюємо тимчасовий масив з двох змінних і негайно деструктуруємо його в порядку обміну. -We can swap more than two variables this way. +Таким методом ми можемо поміняти місцями більше двох змінних. ```` -### The rest '...' +### Залишкові параметри '...' -Usually, if the array is longer than the list at the left, the "extra" items are omitted. +Зазвичай, якщо масив довший від списку зліва, "зайві" елементи опускаються. -For example, here only two items are taken, and the rest is just ignored: +Наприклад, тут береться лише два елементи, а решта просто ігнорується: ```js run -let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; +let [name1, name2] = ["Юлій", "Цезар", "Консул", "Римської Республіки"]; -alert(name1); // Julius -alert(name2); // Caesar -// Further items aren't assigned anywhere +alert(name1); // Юлій +alert(name2); // Цезар +// Інші пункти ніде не присвоєні ``` -If we'd like also to gather all that follows -- we can add one more parameter that gets "the rest" using three dots `"..."`: +Якщо ми хочемо також зібрати все наступне -- ми можемо додати ще один параметр, який отримує "решту", використовуючи три крапки `"..."`: ```js run -let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*]; +let [name1, name2, *!*...rest*/!*] = ["Юлій", "Цезар", *!*"Консул", "Римської Республіки"*/!*]; *!* -// rest is array of items, starting from the 3rd one -alert(rest[0]); // Consul -alert(rest[1]); // of the Roman Republic +// rest -- це масив елементів, починаючи з 3-го +alert(rest[0]); // Консул +alert(rest[1]); // Римської Республіки alert(rest.length); // 2 */!* ``` -The value of `rest` is the array of the remaining array elements. +Значенням `rest` є масив з решти елементів масиву. -We can use any other variable name in place of `rest`, just make sure it has three dots before it and goes last in the destructuring assignment. +Ми можемо використовувати будь-яку іншу назву змінної замість `rest`, просто переконайтесь, що перед нею є три точки і вона залишається останньою у деструктурованому присвоєнні. ```js run -let [name1, name2, *!*...titles*/!*] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; -// now titles = ["Consul", "of the Roman Republic"] +let [name1, name2, *!*...titles*/!*] = ["Юлій", "Цезар", "Консул", "Римської Республіки"]; +// тепер titles = ["Консул", "Римської Республіки"] ``` -### Default values +### Типові значення -If the array is shorter than the list of variables at the left, there'll be no errors. Absent values are considered undefined: +Якщо масив коротший за список змінних зліва, помилок не буде. Відсутні значення вважаються невизначеними: ```js run *!* @@ -198,49 +198,49 @@ alert(firstName); // undefined alert(surname); // undefined ``` -If we want a "default" value to replace the missing one, we can provide it using `=`: +Якщо ми хочемо, щоб "типове" значення замінило б відсутнє, ми можемо надати його за допомогою `=`: ```js run *!* -// default values -let [name = "Guest", surname = "Anonymous"] = ["Julius"]; +// типове значення +let [name = "Гість", surname = "Анонім"] = ["Юлій"]; */!* -alert(name); // Julius (from array) -alert(surname); // Anonymous (default used) +alert(name); // Юлій (з масиву) +alert(surname); // Анонім (використовується типове значення) ``` -Default values can be more complex expressions or even function calls. They are evaluated only if the value is not provided. +Початкові значення можуть бути більш складними виразами або навіть викликами функцій. Вони визначаються, лише якщо значення не надано. -For instance, here we use the `prompt` function for two defaults: +Наприклад, тут ми використовуємо функцію `prompt` для двох типових значень: ```js run -// runs only prompt for surname -let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"]; +// запускає prompt тільки для surname +let [name = prompt("Ім'я?"), surname = prompt('Прізвище?')] = ["Юлій"]; -alert(name); // Julius (from array) -alert(surname); // whatever prompt gets +alert(name); // Юлій (визначено з масиву) +alert(surname); // значення, отримане з prompt ``` -Please note: the `prompt` will run only for the missing value (`surname`). +Зверніть увагу: `prompt` буде спрацьовувати лише для відсутнього значення (`surname`). -## Object destructuring +## Деструктурування об’єктів -The destructuring assignment also works with objects. +Деструктуроване присвоєння також працює з об’єктами. -The basic syntax is: +Основний синтаксис такий: ```js let {var1, var2} = {var1:…, var2:…} ``` -We should have an existing object at the right side, that we want to split into variables. The left side contains an object-like "pattern" for corresponding properties. In the simplest case, that's a list of variable names in `{...}`. +Ми повинні мати існуючий об’єкт праворуч, який ми хочемо розділити на змінні. Ліва частина містить об’єктоподібний "шаблон" для відповідних властивостей. У найпростішому випадку це список імен змінних у `{...}`. -For instance: +Наприклад: ```js run let options = { - title: "Menu", + title: "Меню", width: 100, height: 200 }; @@ -249,27 +249,27 @@ let options = { let {title, width, height} = options; */!* -alert(title); // Menu +alert(title); // Меню alert(width); // 100 alert(height); // 200 ``` -Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables. +Властивості `options.title`,` options.width` та `options.height` призначені відповідним змінним. -The order does not matter. This works too: +Порядок не має значення. Це теж працює: ```js -// changed the order in let {...} -let {height, width, title} = { title: "Menu", height: 200, width: 100 } +// змінили порядок у let {...} +let {height, width, title} = { title: "Меню", height: 200, width: 100 } ``` -The pattern on the left side may be more complex and specify the mapping between properties and variables. +Шаблон з лівого боку може бути більш складним і визначати зіставлення властивостей та змінних. -If we want to assign a property to a variable with another name, for instance, make `options.width` go into the variable named `w`, then we can set the variable name using a colon: +Якщо ми хочемо присвоїти властивість змінній з іншим іменем, наприклад, зробити так, щоб `options.width` переходив до змінної з назвою `w`, то ми можемо встановити ім’я змінної за допомогою двокрапки: ```js run let options = { - title: "Menu", + title: "Меню", width: 100, height: 200 }; @@ -283,144 +283,144 @@ let {width: w, height: h, title} = options; // height -> h // title -> title -alert(title); // Menu +alert(title); // Меню alert(w); // 100 alert(h); // 200 ``` -The colon shows "what : goes where". In the example above the property `width` goes to `w`, property `height` goes to `h`, and `title` is assigned to the same name. +Двокрапка показує "що: куди йде". У наведеному вище прикладі властивість `width` переходить у `w`, властивість `height` переходить у `h`, а `title` присвоюється тому самому імені. -For potentially missing properties we can set default values using `"="`, like this: +Для потенційно відсутніх властивостей ми можемо встановити типові значення за допомогою `"="`, наприклад: ```js run let options = { - title: "Menu" + title: "Меню" }; *!* let {width = 100, height = 200, title} = options; */!* -alert(title); // Menu +alert(title); // Меню alert(width); // 100 alert(height); // 200 ``` -Just like with arrays or function parameters, default values can be any expressions or even function calls. They will be evaluated if the value is not provided. +Так само, як і з масивами або параметрами функцій, типові значення можуть бути будь-якими виразами або навіть викликами функцій. Вони будуть оцінені, якщо значення не надано. -In the code below `prompt` asks for `width`, but not for `title`: +У коді нижче `prompt` запитує `width`, але не `title`: ```js run let options = { - title: "Menu" + title: "Меню" }; *!* -let {width = prompt("width?"), title = prompt("title?")} = options; +let {width = prompt("Ширина?"), title = prompt("Заголовок?")} = options; */!* -alert(title); // Menu -alert(width); // (whatever the result of prompt is) +alert(title); // Меню +alert(width); // (будь-який результат з prompt) ``` -We also can combine both the colon and equality: +Ми також можемо поєднати двокрапку та рівність: ```js run let options = { - title: "Menu" + title: "Меню" }; *!* let {width: w = 100, height: h = 200, title} = options; */!* -alert(title); // Menu +alert(title); // Меню alert(w); // 100 alert(h); // 200 ``` -If we have a complex object with many properties, we can extract only what we need: +Якщо у нас є складний об’єкт з багатьма властивостями, ми можемо витягти лише те, що нам потрібно: ```js run let options = { - title: "Menu", + title: "Меню", width: 100, height: 200 }; -// only extract title as a variable +// вибирає тільки title як змінну let { title } = options; -alert(title); // Menu +alert(title); // Меню ``` -### The rest pattern "..." +### Залишок об’єкту "..." -What if the object has more properties than we have variables? Can we take some and then assign the "rest" somewhere? +Що робити, якщо об’єкт має більше властивостей, ніж ми маємо змінних? Чи можемо ми взяти частину, а потім призначити кудись «залишок»? -We can use the rest pattern, just like we did with arrays. It's not supported by some older browsers (IE, use Babel to polyfill it), but works in modern ones. +Ми можемо використовувати шаблон залишкового оператору, так само, як ми робили з масивами. Він не підтримується деякими старішими браузерами (IE, використовуйте Babel для поліфілу), але працює в сучасних. -It looks like this: +Це виглядає наступним чином: ```js run let options = { - title: "Menu", + title: "Меню", height: 200, width: 100 }; *!* -// title = property named title -// rest = object with the rest of properties +// title = властивість з назвою title +// rest = об’єкт з залишковими властивостями let {title, ...rest} = options; */!* -// now title="Menu", rest={height: 200, width: 100} +// тепер title="Меню", rest={height: 200, width: 100} alert(rest.height); // 200 alert(rest.width); // 100 ``` -````smart header="Gotcha if there's no `let`" -In the examples above variables were declared right in the assignment: `let {…} = {…}`. Of course, we could use existing variables too, without `let`. But there's a catch. +````smart header="Зверніть увагу, якщо `let` відсутній" +У наведених вище прикладах змінні були оголошені прямо в присвоєнні: `let {…} = {…}`. Звичайно, ми також можемо використовувати існуючі змінні без `let`. Але тут може бути підступ. -This won't work: +Це не спрацює: ```js run let title, width, height; -// error in this line -{title, width, height} = {title: "Menu", width: 200, height: 100}; +// помилка в цьому рядку +{title, width, height} = {title: "Меню", width: 200, height: 100}; ``` -The problem is that JavaScript treats `{...}` in the main code flow (not inside another expression) as a code block. Such code blocks can be used to group statements, like this: +Проблема в тому, що JavaScript розглядає `{...}` в основному потоці коду (а не всередині іншого виразу) як блок коду. Такі блоки коду можна використовувати для групування операторів, наприклад: ```js run { - // a code block - let message = "Hello"; + // блок коду + let message = "Привіт"; // ... alert( message ); } ``` -So here JavaScript assumes that we have a code block, that's why there's an error. We want destructuring instead. +Отже, тут JavaScript припускає, що у нас є блок коду, тому і виникає помилка. Натомість ми хочемо деструктурування. -To show JavaScript that it's not a code block, we can wrap the expression in parentheses `(...)`: +Щоб показати JavaScript, що це не блок коду, ми можемо загорнути вираз у дужки `(...)`: ```js run let title, width, height; -// okay now +// тепер працює *!*(*/!*{title, width, height} = {title: "Menu", width: 200, height: 100}*!*)*/!*; -alert( title ); // Menu +alert( title ); // Меню ``` ```` -## Nested destructuring +## Вкладене деструктурування -If an object or an array contain other nested objects and arrays, we can use more complex left-side patterns to extract deeper portions. +Якщо об’єкт або масив містять інші вкладені об’єкти та масиви, ми можемо використовувати більш складні шаблони з лівого боку для вилучення більш глибоких частин. -In the code below `options` has another object in the property `size` and an array in the property `items`. The pattern at the left side of the assignment has the same structure to extract values from them: +У наведеному нижче коді `options` містить інший об'єкт у властивості `size` та масив у властивості `items`. Шаблон у лівій частині присвоєння має ту саму структуру для вилучення з них значень: ```js run let options = { @@ -428,40 +428,40 @@ let options = { width: 100, height: 200 }, - items: ["Cake", "Donut"], + items: ["Торт", "Пончик"], extra: true }; -// destructuring assignment split in multiple lines for clarity +// деструктурування розподілене на кілька рядків для наочності let { - size: { // put size here + size: { // помістимо тут size width, height }, - items: [item1, item2], // assign items here - title = "Menu" // not present in the object (default value is used) + items: [item1, item2], // тут призначимо items + title = "Меню" // немає в об’єкті (використовується типове значення) } = options; -alert(title); // Menu +alert(title); // Меню alert(width); // 100 alert(height); // 200 -alert(item1); // Cake -alert(item2); // Donut +alert(item1); // Торт +alert(item2); // Пончик ``` -All properties of `options` object except `extra` that is absent in the left part, are assigned to corresponding variables: +Усі властивості об’єкта `options`, окрім `extra`, яке відсутнє у лівій частині, призначаються відповідним змінним: ![](destructuring-complex.svg) -Finally, we have `width`, `height`, `item1`, `item2` and `title` from the default value. +Нарешті, ми маємо `width`, `height`, `item1`, `item2` та `title` з типовим значенням. -Note that there are no variables for `size` and `items`, as we take their content instead. +Зауважте, що для `size` та `items` немає змінних, оскільки ми беремо їх вміст. -## Smart function parameters +## Розумні параметри функції -There are times when a function has many parameters, most of which are optional. That's especially true for user interfaces. Imagine a function that creates a menu. It may have a width, a height, a title, items list and so on. +Бувають випадки, коли функція має багато параметрів, більшість з яких є необов’язковими. Особливо це стосується користувацьких інтерфейсів. Уявіть собі функцію, яка створює меню. Вона може мати ширину, висоту, назву, список елементів тощо. -Here's a bad way to write such function: +Нижче наведено поганий спосіб написати таку функцію: ```js function showMenu(title = "Untitled", width = 200, height = 100, items = []) { @@ -469,32 +469,32 @@ function showMenu(title = "Untitled", width = 200, height = 100, items = []) { } ``` -In real-life, the problem is how to remember the order of arguments. Usually IDEs try to help us, especially if the code is well-documented, but still... Another problem is how to call a function when most parameters are ok by default. +У реальному житті проблема полягає в тому, як запам’ятати порядок аргументів. Зазвичай IDE намагаються нам допомогти, особливо якщо код добре задокументований, але все ж... Інша проблема полягає в тому, як викликати функцію, коли більшість параметрів типово в порядку. -Like this? +Можливо так? ```js -// undefined where default values are fine +// undefined де підходять типові значення showMenu("My Menu", undefined, undefined, ["Item1", "Item2"]) ``` -That's ugly. And becomes unreadable when we deal with more parameters. +Це негарно. І стає нечитабельним, коли ми маємо справу з більшою кількістю параметрів. -Destructuring comes to the rescue! +На допомогу приходить деструктурування! -We can pass parameters as an object, and the function immediately destructurizes them into variables: +Ми можемо передати параметри як об’єкт, і функція негайно деструктурує їх на змінні: ```js run -// we pass object to function +// ми передаємо об’єкт до функції let options = { title: "My menu", items: ["Item1", "Item2"] }; -// ...and it immediately expands it to variables +// ...і вона негайно розгортає його до змінних function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []}*/!*) { - // title, items – taken from options, - // width, height – defaults used + // title, items – взяті з options, + // width, height – використовуються типові значення alert( `${title} ${width} ${height}` ); // My Menu 200 100 alert( items ); // Item1, Item2 } @@ -502,7 +502,7 @@ function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []} showMenu(options); ``` -We can also use more complex destructuring with nested objects and colon mappings: +Ми також можемо використовувати більш складне деструктурування з вкладеними об’єктами та двокрапками: ```js run let options = { @@ -513,9 +513,9 @@ let options = { *!* function showMenu({ title = "Untitled", - width: w = 100, // width goes to w - height: h = 200, // height goes to h - items: [item1, item2] // items first element goes to item1, second to item2 + width: w = 100, // width стає w + height: h = 200, // height стає h + items: [item1, item2] // перший елемент items йде до item1, другий - до item2 }) { */!* alert( `${title} ${w} ${h}` ); // My Menu 100 200 @@ -526,7 +526,7 @@ function showMenu({ showMenu(options); ``` -The full syntax is the same as for a destructuring assignment: +Повний синтаксис такий самий, як і для деструктурованого присвоєння: ```js function({ incomingProperty: varName = defaultValue @@ -534,17 +534,17 @@ function({ }) ``` -Then, for an object of parameters, there will be a variable `varName` for property `incomingProperty`, with `defaultValue` by default. +Тоді для об’єкта параметрів буде змінна `varName` для властивості `incomingProperty` з типовим значенням `defaultValue`. -Please note that such destructuring assumes that `showMenu()` does have an argument. If we want all values by default, then we should specify an empty object: +Зверніть увагу, що таке деструктурування передбачає, що `showMenu()` має аргумент. Якщо ми хочемо, щоб усі значення були типовими, ми повинні вказати порожній об’єкт: ```js -showMenu({}); // ok, all values are default +showMenu({}); // так добре, усі значення типові -showMenu(); // this would give an error +showMenu(); // це дасть помилку ``` -We can fix this by making `{}` the default value for the whole object of parameters: +Ми можемо виправити це, зробивши `{}` типовим значенням для всього об’єкта параметрів: ```js run function showMenu({ title = "Menu", width = 100, height = 200 }*!* = {}*/!*) { @@ -554,26 +554,26 @@ function showMenu({ title = "Menu", width = 100, height = 200 }*!* = {}*/!*) { showMenu(); // Menu 100 200 ``` -In the code above, the whole arguments object is `{}` by default, so there's always something to destructurize. +У наведеному вище коді весь об’єкт аргументів є типовим значенням `{}`, тому завжди є що деструктурувати. -## Summary +## Підсумки -- Destructuring assignment allows for instantly mapping an object or array onto many variables. -- The full object syntax: +- Деструктуруване присвоєння дозволяє миттєво зіставити об’єкт або масив з багатьма змінними. +- Повний синтаксис для об’єкта: ```js let {prop : varName = default, ...rest} = object ``` - This means that property `prop` should go into the variable `varName` and, if no such property exists, then the `default` value should be used. + Це означає, що властивість `prop` має входити до змінної `varName` і, якщо такої властивості не існує, слід використовувати `типове значення`. - Object properties that have no mapping are copied to the `rest` object. + Властивості об’єкта, які не мають зіставлення, копіюються в об’єкт `rest`. -- The full array syntax: +- Повний синтаксис для масиву: ```js let [item1 = default, item2, ...rest] = array ``` - The first item goes to `item1`; the second goes into `item2`, all the rest makes the array `rest`. + Перший елемент переходить до `item1`; другий переходить до `item2`, усі інші утворюють масив `rest`. -- It's possible to extract data from nested arrays/objects, for that the left side must have the same structure as the right one. +- Можна витягувати дані з вкладених масивів/об’єктів, для цього ліва сторона повинна мати ту ж структуру, що й права. From 0d62da3bcc1e536f090e99cc50d7e0992eff1e55 Mon Sep 17 00:00:00 2001 From: Taras Date: Mon, 22 Nov 2021 12:18:39 +0200 Subject: [PATCH 2/8] Update 1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md --- .../10-destructuring-assignment/1-destruct-user/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md index a5e64935f..5c1c78ef7 100644 --- a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md +++ b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md @@ -1,7 +1,7 @@ ```js run let user = { - name: "Джон", + name: "Іван", years: 30 }; From a4c5b0c75bd8da730232cc4f8298c65403b796e8 Mon Sep 17 00:00:00 2001 From: Taras Date: Mon, 22 Nov 2021 12:19:33 +0200 Subject: [PATCH 3/8] Update 1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md --- .../10-destructuring-assignment/1-destruct-user/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md index 852167554..580a6e15b 100644 --- a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md +++ b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md @@ -8,7 +8,7 @@ importance: 5 ```js let user = { - name: "Джон", + name: "Іван", years: 30 }; ``` From f1b715d9d812aa1078f32f6c350e1e4aea90c086 Mon Sep 17 00:00:00 2001 From: hordiienko-tatiana <49336627+hordiienko-tatiana@users.noreply.github.com> Date: Sat, 27 Nov 2021 17:21:29 +0200 Subject: [PATCH 4/8] Update 1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md Co-authored-by: Taras --- .../10-destructuring-assignment/1-destruct-user/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md index 5c1c78ef7..5182475f2 100644 --- a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md +++ b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md @@ -7,7 +7,7 @@ let user = { let {name, years: age, isAdmin = false} = user; -alert( name ); // Джон +alert( name ); // Іван alert( age ); // 30 alert( isAdmin ); // false ``` \ No newline at end of file From 0256c5043603760ca41f3316e469c7cde54b5789 Mon Sep 17 00:00:00 2001 From: hordiienko-tatiana <49336627+hordiienko-tatiana@users.noreply.github.com> Date: Sat, 27 Nov 2021 17:23:59 +0200 Subject: [PATCH 5/8] Apply suggestions from code review Co-authored-by: Taras --- .../1-destruct-user/task.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md index 580a6e15b..f4d9741e1 100644 --- a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md +++ b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md @@ -15,19 +15,19 @@ let user = { Напишіть деструктуроване присвоєння, яке зчитує: -- властивість `name` до змінної `name`. -- властивість `years` до змінної `age`. -- властивість `isAdmin` до змінної `isAdmin` (false, якщо така властівість відсутня) +- властивість `name` у змінну `name`. +- властивість `years` у змінну `age`. +- властивість `isAdmin` у змінну `isAdmin` (false, якщо така властивість відсутня) Ось приклад значень після вашого присвоєння: ```js -let user = { name: "Джон", years: 30 }; +let user = { name: "Іван", years: 30 }; // ваш код зліва: // ... = user -alert( name ); // Джон +alert( name ); // Іван alert( age ); // 30 alert( isAdmin ); // false ``` From e3a18d4ed0c1349ca6cb9893aa51396d34a6237b Mon Sep 17 00:00:00 2001 From: hordiienko-tatiana <49336627+hordiienko-tatiana@users.noreply.github.com> Date: Sat, 27 Nov 2021 17:26:04 +0200 Subject: [PATCH 6/8] Apply changes from code review - 2 --- .../10-destructuring-assignment/6-max-salary/task.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md index 4ad537a7e..23adc8601 100644 --- a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md +++ b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md @@ -8,9 +8,9 @@ importance: 5 ```js let salaries = { - "John": 100, - "Pete": 300, - "Mary": 250 + "Іван": 100, + "Петро": 300, + "Марія": 250 }; ``` From a1bd9c7e7b8de77aa7c8e106e5dca76f1e7e5a40 Mon Sep 17 00:00:00 2001 From: Tetiana Hordiienko Date: Sat, 27 Nov 2021 17:46:08 +0200 Subject: [PATCH 7/8] Apply code review changes - 3 --- .../10-destructuring-assignment/article.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md index ec2d31e24..3e5cd429d 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -17,7 +17,7 @@ ```js // у нас є масив з іменем та прізвищем -let arr = ["Джон", "Сміт"] +let arr = ["Іван", "Петренко"] *!* // деструктуроване присвоєння @@ -26,8 +26,8 @@ let arr = ["Джон", "Сміт"] let [firstName, surname] = arr; */!* -alert(firstName); // Джон -alert(surname); // Сміт +alert(firstName); // Іван +alert(surname); // Петренко ``` Тепер ми можемо працювати зі змінними замість елементів масиву. @@ -35,9 +35,9 @@ alert(surname); // Сміт Це чудово виглядає в поєднанні зі `split` або іншими методами повернення масиву: ```js run -let [firstName, surname] = "Джон Сміт".split(' '); -alert(firstName); // Джон -alert(surname); // Сміт +let [firstName, surname] = "Іван Петренко".split(' '); +alert(firstName); // Іван +alert(surname); // Петренко ``` Як бачите, синтаксис простий. Хоча є кілька особливих деталей. Давайте розглянемо більше прикладів, щоб краще це зрозуміти. @@ -86,10 +86,10 @@ let [one, two, three] = new Set([1, 2, 3]); Наприклад, присвоїти властивості об’єкта: ```js run let user = {}; -[user.name, user.surname] = "Джон Сміт".split(' '); +[user.name, user.surname] = "Іван Петренко".split(' '); -alert(user.name); // Джон -alert(user.surname); // Сміт +alert(user.name); // Іван +alert(user.surname); // Петренко ``` ```` @@ -101,7 +101,7 @@ alert(user.surname); // Сміт ```js run let user = { - name: "Джон", + name: "Іван", age: 30 }; @@ -109,7 +109,7 @@ let user = { *!* for (let [key, value] of Object.entries(user)) { */!* - alert(`${key}:${value}`); // name:Джон, потім age:30 + alert(`${key}:${value}`); // name:Іван, потім age:30 } ``` @@ -117,14 +117,14 @@ for (let [key, value] of Object.entries(user)) { ```js run let user = new Map(); -user.set("name", "Джон"); +user.set("name", "Іван"); user.set("age", "30"); *!* // Map ітерує як пари [key, value], що дуже зручно для деструктурування for (let [key, value] of user) { */!* - alert(`${key}:${value}`); // name:Джон, then age:30 + alert(`${key}:${value}`); // name:Іван, then age:30 } ``` ```` From 5dff09d4c0f6c6b61962015337f9f4f46ce29cb6 Mon Sep 17 00:00:00 2001 From: Taras Date: Sun, 28 Nov 2021 15:56:13 +0200 Subject: [PATCH 8/8] Apply suggestions from code review --- 1-js/05-data-types/10-destructuring-assignment/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md index 3e5cd429d..9da78372b 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -254,7 +254,7 @@ alert(width); // 100 alert(height); // 200 ``` -Властивості `options.title`,` options.width` та `options.height` призначені відповідним змінним. +Властивості `options.title`, `options.width` та `options.height` призначені відповідним змінним. Порядок не має значення. Це теж працює: pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy