gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i18n,curriculum): processed translations - new ukrainian (#44447)

Browse Source
This commit is contained in:
camperbot
2021-12-10 11:14:24 +05:30
committed by GitHub
parent 8651ee1797
commit 0473dedf47
1663 changed files with 156692 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md Normal file
View File

@@ -0,0 +1,134 @@
---
id: 587d7b87367417b2b2512b40
title: Порівняйте можливості ключових слів var та let
challengeType: 1
forumTopicId: 301195
dashedName: compare-scopes-of-the-var-and-let-keywords
---
# --description--
Якщо ви ще не знаєте про `let`, то перегляньте [це завдання](/learn/javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords).
Коли ви задаєте змінну з ключовим словом `var`, вона стане глобальною або локальною, якщо буде оголошена у рамках функції.
Ключове слово `let` функціонує схожим чином, але з додатковими можливостями. Коли ви задаєте змінну з ключовим словом `let` у блоці, команді чи виразі, її можливості обмежуються цим блоком, виразом чи виразом.
Наприклад:
```js
var numArray = [];
for (var i = 0; i < 3; i++) {
numArray.push(i);
}
console.log(numArray);
console.log(i);
```
У такому разі консоль показуватиме значення `[0, 1, 2]` та `3`.
Якщо ключове слово — `var`, значення `i` оголошується глобальним. Отже, коли виконується `i++`, глобальна змінна теж оновлюється. Цей код виглядає наступним чином:
```js
var numArray = [];
var i;
for (i = 0; i < 3; i++) {
numArray.push(i);
}
console.log(numArray);
console.log(i);
```
У такому разі консоль показуватиме значення `[0, 1, 2]` та `3`.
Така поведінка спричиняє проблеми при створенні функції та її збереженні для подальшого використання в циклі `for`, що використовує змінну `i`. Це пояснюється тим, що збережена функція завжди посилатиметься на значення оновленої глобальної змінної `i`.
```js
var printNumTwo;
for (var i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
```
У такому разі консоль показуватиме значення `3`.
Як бачите, `printNumTwo()` показує 3, а не 2. Це пояснюється тим, що значення для `i` оновилося, а `printNumTwo()` повертає глобальне значення `i`, а не те значення, яке `i` мало при створенні функції для циклу. Ключове слово `let` діє інакше:
```js
let printNumTwo;
for (let i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
console.log(i);
```
У такому разі консоль показуватиме значення `2`, і помилку: `i is not defined`.
`i` не визначено (not defined), оскільки змінну не було оголошено в глобальному масштабі. Вона стає оголошеною лише у команді циклу `for`. `printNumTwo()` повернув правильне значення, оскільки було створено три різних змінних `i` з унікальними значеннями (0, 1, та 2) завдяки ключовому слову `let` в рамках команди циклу.
# --instructions--
Виправте код так, щоб `i`, оголошена в команді `if`, була окремою змінною, на відміну від `i`, оголошеної у першому рядку функції. Не використовуйте у вашому коді ключове слово `var`.
Ця вправа створена для того, щоб показати відмінність між тим, як ключові слова `var` і `let` задають можливості оголошеної змінної. При програмуванні схожої функції на ту, що використовувалася у цій вправі, нерідко слід використовувати різні назви для змінних, щоб уникнути плутанини.
# --hints--
`var` має бути відсутнім у коді.
```js
assert(!code.match(/var/g));
```
Змінна `i`, оголошена в операторі `if`, має дорівнювати рядку `block scope`.
```js
assert(code.match(/(i\s*=\s*).*\s*.*\s*.*\1('|")block\s*scope\2/g));
```
`checkScope()` має повернути рядок `function scope`
```js
assert(checkScope() === 'function scope');
```
# --seed--
## --seed-contents--
```js
function checkScope() {
var i = 'function scope';
if (true) {
i = 'block scope';
console.log('Block scope i is: ', i);
}
console.log('Function scope i is: ', i);
return i;
}
```
# --solutions--
```js
function checkScope() {
let i = 'function scope';
if (true) {
let i = 'block scope';
console.log('Block scope i is: ', i);
}
console.log('Function scope i is: ', i);
return i;
}
```

77
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md Normal file
View File

@@ -0,0 +1,77 @@
---
id: 5cdafbc32913098997531680
title: Виконайте Promise за допомогою команд resolve та reject
challengeType: 1
forumTopicId: 301196
dashedName: complete-a-promise-with-resolve-and-reject
---
# --description--
Promise має три стани: `pending`, `fulfilled` та `rejected`. Promise, який ви створили у попередньому завданні, буде завжди знаходитися у стані `pending`, оскільки ви не передбачили можливості завершити Promise. Для цього використовуються параметри `resolve` і `reject`, що належать аргументу Promise. `resolve` використовується для виконання Promise, а `reject` використовується для відхилення Promise. При таких методах з'являється аргумент, як показано нижче.
```js
const myPromise = new Promise((resolve, reject) => {
if(condition here) {
resolve("Promise was fulfilled");
} else {
reject("Promise was rejected");
}
});
```
Попередній приклад використовує рядки для аргументу цих функцій, але можливі й інші варіанти. Часто це може також бути об'єкт, дані якого ви використаєте для розміщення на своєму сайті чи в іншому місці.
# --instructions--
Запрограмуйте Promise так, щоб він самостійно обробляв виконання або відхилення. Якщо `responseFromServer` виявляється `true`, викличте метод `resolve`, щоб успішно виконати Promise. Додайте до `resolve` рядок зі значенням `We got the data`. Якщо `responseFromServer` виявляється `false`, використайте метод `reject` і додайте рядок `Data not received`.
# --hints--
`resolve` має викликатися за допомогою очікуваного рядка, а значення `if` має бути `true`.
```js
assert(
code.match(/if\s*\(\s*responseFromServer\s*\)\s*{\s*resolve\s*\(\s*('|"|`)We got the data\1\s*\)(\s*|\s*;\s*)}/g)
);
```
`reject` має викликатися за допомогою очікуваного рядка, а значення `if` має бути `false`.
```js
assert(
code.match(/}\s*else\s*{\s*reject\s*\(\s*('|"|`)Data not received\1\s*\)(\s*|\s*;\s*)}/g)
);
```
# --seed--
## --seed-contents--
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer represents a response from a server
let responseFromServer;
if(responseFromServer) {
// Change this line
} else {
// Change this line
}
});
```
# --solutions--
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer represents a response from a server
let responseFromServer;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
```

55
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md Normal file
View File

@@ -0,0 +1,55 @@
---
id: 5cdafbb0291309899753167f
title: Створіть Promise у JavaScript
challengeType: 1
forumTopicId: 301197
dashedName: create-a-javascript-promise
---
# --description--
У JavaScript Promise (з англ. «обіцянка») має пряме значення: цей термін використовується для того, щоб «пообіцяти» щось зробити, зазвичай асинхронно. Коли завдання звершується, ви або виконуєте Promise, або відхиляєте його. `Promise` - це функція конструктора, тож необхідно використати ключове слово `new`, щоб створити новий Promise. Для цього потрібні функція, як його аргумент, з двома параметрами: `resolve` та `reject`. Такі методи використовуються для визначення результату Promise. Синтаксис виглядає наступним чином:
```js
const myPromise = new Promise((resolve, reject) => {
});
```
# --instructions--
Створіть новий Promise під назвою `makeServerRequest`. У функції перейдіть до параметрів конструктора `resolve` та `reject`.
# --hints--
Призначте Promise до оголошеної змінної під назвою `makeServerRequest`.
```js
assert(makeServerRequest instanceof Promise);
```
Ваш Promise має отримати функцію з параметрами `resolve` та `reject`.
```js
assert(
code.match(
/Promise\(\s*(function\s*\(\s*resolve\s*,\s*reject\s*\)\s*{|\(\s*resolve\s*,\s*reject\s*\)\s*=>\s*{)[^}]*}/g
)
);
```
# --seed--
## --seed-contents--
```js
```
# --solutions--
```js
const makeServerRequest = new Promise((resolve, reject) => {
});
```

73
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.md Normal file
View File

@@ -0,0 +1,73 @@
---
id: 5cddbfd622f1a59093ec611d
title: Створіть модульний скрипт
challengeType: 6
forumTopicId: 301198
dashedName: create-a-module-script
---
# --description--
Спочатку мова JavaScript відігравала незначну роль на веб-сторінках HTML, створених по-іншому. Сьогодні вона має величезне значення. Деякі сайти навіть створюються майже повністю за допомогою JavaScript. Для того, щоб мова JavaScript була більш модульною, точною і зручною у користуванні, ES6 створив новий спосіб для доступної передачі коду між файлами JavaScript. Таким чином, ви можете експортувати частини файлу і використати їх в більше ніж одному іншому файлі, а також імпортувати потрібні вам уривки. Щоб скористатися таким функціоналом, необхідно створити скрипт у вашому HTML-документі з `module` `type`. Наприклад:
```html
<script type="module" src="filename.js"></script>
```
Скрипт, що використовує тип `module`, відтепер може використовувати функції `import` і `export`, про які ви дізнаєтеся більше у наступних завданнях.
# --instructions--
Додайте скрипт до HTML-документа типу `module` та зробіть його вихідним файлом `index.js`
# --hints--
Ви маєте створити тег `script`.
```js
assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g));
```
Ваш тег `script` повинен мати атрибут `type` зі значенням `module`.
```js
assert(
code.match(
/<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g
)
);
```
Ваш тег `script` повинен мати `index.js` `src`.
```js
assert(
code.match(
/<\s*script\s+[^s]*src\s*=\s*('|")index\.js\1[^>]*>\s*<\/\s*script\s*>/g
)
);
```
# --seed--
## --seed-contents--
```html
<html>
<body>
<!-- Only change code below this line -->
<!-- Only change code above this line -->
</body>
</html>
```
# --solutions--
```html
<html>
<body>
<script type="module" src="index.js"></script>
</body>
</html>
```

63
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md Normal file
View File

@@ -0,0 +1,63 @@
---
id: 587d7b8c367417b2b2512b58
title: Створіть резервне значення з експортом за замовчуванням
challengeType: 1
forumTopicId: 301199
dashedName: create-an-export-fallback-with-export-default
---
# --description--
В уроці про `export` ви дізналися про синтаксис під назвою <dfn>named export</dfn>. Це дозволило вам створювати чисельні функції та змінні, які можуть використовуватися і в інших файлах.
Існує інший важливий синтаксис `export`, який називається <dfn>export default</dfn>. Як правило, такий синтаксис використовується, якщо з файлу експортується лише одне значення. Він також слугує для створення резервного значення для файлу або модуля.
Нижче наведено приклади, де використовується `export default`:
```js
export default function add(x, y) {
return x + y;
}
export default function(x, y) {
return x + y;
}
```
Перший приклад - названа функція, а другий - анонімна функція.
Оскільки `export default` використовується для оголошення резервного значення для модуля або файлу, лише одне значення може бути експортоване за замовчуванням у кожному модулі або файлі. Крім того, використання `export default` з `var`, `let` або `const` є неможливим
# --instructions--
Наступна функція має бути резервним значенням для модуля. Для цього необхідно додати відповідний код.
# --hints--
Ваш код має використовувати резервне значення `export`.
```js
assert(
code.match(
/export\s+default\s+function(\s+subtract\s*|\s*)\(\s*x,\s*y\s*\)\s*{/g
)
);
```
# --seed--
## --seed-contents--
```js
function subtract(x, y) {
return x - y;
}
```
# --solutions--
```js
export default function subtract(x, y) {
return x - y;
}
```

116
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md Normal file
View File

@@ -0,0 +1,116 @@
---
id: 587d7b8a367417b2b2512b4e
title: Створіть рядки за допомогою шаблонних літералів
challengeType: 1
forumTopicId: 301200
dashedName: create-strings-using-template-literals
---
# --description--
Нова особливість ES6 полягає у <dfn>template literal</dfn>. Вона означає особливий тип рядка, що полегшує процес створення складних рядків.
Шаблонні літерали дозволяють нам створювати багатолінійні рядки та використовувати можливості інтерполяції для створення рядків.
Розгляньмо наступний код:
```js
const person = {
name: "Zodiac Hasbro",
age: 56
};
const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;
console.log(greeting);
```
Консоль показуватиме рядки `Hello, my name is Zodiac Hasbro!` та `I am 56 years old.`.
Тут відбувається багато процесів. По-перше, у прикладі вживаються зворотні лапки (`` ` ``), а не одинарні чи подвійні (`'` чи `"`), щоб обрамити рядок. По-друге, зверніть увагу, що рядок залишається багатолінійним як у коді, так і в кінцевому вигляді. Завдяки цьому, `\n` вставляється у самі рядки. Наведений вище синтаксис `${variable}` є заповнювачем місця (placeholder). Це означає, що більше не потрібно використовувати конкатенацію з оператором `+`. Для додання змінних до рядків варто видалити змінну в шаблонному рядку та розмістити її у конструкцію `${` і `}`. Інші вирази також можуть додаватися до літералу у рядку схожим чином, наприклад `${a + b}`. Такий новий спосіб створення рядків надає більше можливостей створювати функціональні рядки.
# --instructions--
Використовуйте синтаксис шаблонних літералів зі зворотними лапками для створення масиву елемента списку - рядків (`li`). Текст кожного елемента списку має бути одним з елементів масиву зі значенням `failure` на об'єкті `result` та мати атрибут `class` зі значенням `text-warning`. Функція `makeList` повинна повернути масив елементів списку у рядках.
Завдяки методу, що використовує ітератор (будь-який цикл), ми можемо отримати бажаний результат (наведений нижче).
```js
[
'<li class="text-warning">no-var</li>',
'<li class="text-warning">var-on-top</li>',
'<li class="text-warning">linebreak</li>'
]
```
# --hints--
`failuresList` має бути масивом, що містить повідомлення `result failure`.
```js
assert(
typeof makeList(result.failure) === 'object' && failuresList.length === 3
);
```
`failuresList` має дорівнювати вказаному результату.
```js
assert(
makeList(result.failure).every(
(v, i) =>
v === `<li class="text-warning">${result.failure[i]}</li>` ||
v === `<li class='text-warning'>${result.failure[i]}</li>`
)
);
```
Варто також використовувати шаблонні рядки та інтерполяцію виразу.
```js
(getUserInput) => assert(getUserInput('index').match(/(`.*\${.*}.*`)/));
```
Варто використовувати ітератор.
```js
(getUserInput) =>
assert(getUserInput('index').match(/for|map|reduce|forEach|while/));
```
# --seed--
## --seed-contents--
```js
const result = {
success: ["max-length", "no-amd", "prefer-arrow-functions"],
failure: ["no-var", "var-on-top", "linebreak"],
skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
// Only change code below this line
const failureItems = [];
// Only change code above this line
return failureItems;
}
const failuresList = makeList(result.failure);
```
# --solutions--
```js
const result = {
success: ["max-length", "no-amd", "prefer-arrow-functions"],
failure: ["no-var", "var-on-top", "linebreak"],
skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
return arr.map(val => `<li class="text-warning">${val}</li>`);
}
const failuresList = makeList(result.failure);
```

92
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/handle-a-fulfilled-promise-with-then.md Normal file
View File

@@ -0,0 +1,92 @@
---
id: 5cdafbd72913098997531681
title: Вирішіть проблему Promise у стані Fulfilled за допомогою then
challengeType: 1
forumTopicId: 301203
dashedName: handle-a-fulfilled-promise-with-then
---
# --description--
Promises надзвичайно корисні, коли у вашому коді відбувається процес, що займає невизначений період часу (тобто асинхронний процес), наприклад, запит до сервера. Створення запиту до сервера займає певний час, а після його завершення, зазвичай, передбачаються подальші дії з відповіддю сервера. Цього можна досягти за допомогою методу `then`. Метод `then` виконується одразу після того, як ваш Promise входить у стан Fulfilled `resolve`. Наприклад:
```js
myPromise.then(result => {
});
```
`result` отримується за допомогою аргументу та методу `resolve`.
# --instructions--
Додайте до вашого Promise метод `then`. Використовуйте `result` як параметр для функції зворотного виклику та зазначте `result` у консолі.
# --hints--
Слід викликати метод `then` для Promise.
```js
assert(
__helpers.removeWhiteSpace(code).match(/(makeServerRequest|\))\.then\(/g)
);
```
Ваш метод `then` повинен мати функцію зворотного виклику з `result` у якості параметра.
```js
assert(resultIsParameter);
```
Ви маєте зазначити `result` у консолі.
```js
assert(
resultIsParameter &&
__helpers
.removeWhiteSpace(code)
.match(/\.then\(.*?result.*?console.log\(result\).*?\)/)
);
```
# --seed--
## --after-user-code--
```js
const resultIsParameter = /\.then\((function\(result\){|result|\(result\)=>)/.test(__helpers.removeWhiteSpace(code));
```
## --seed-contents--
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer is set to true to represent a successful response from a server
let responseFromServer = true;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
```
# --solutions--
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer is set to true to represent a successful response from a server
let responseFromServer = true;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
makeServerRequest.then(result => {
console.log(result);
});
```

100
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md Normal file
View File

@@ -0,0 +1,100 @@
---
id: 5cdafbe72913098997531682
title: Обробка винятків відхиленої Promise
challengeType: 1
forumTopicId: 301204
dashedName: handle-a-rejected-promise-with-catch
---
# --description--
`catch` - це метод, який використовується коли ваша Promise була відхилена. Це буде виконано одразу після запуску алгоритму `reject`. Ось синтаксис:
```js
myPromise.catch(error => {
});
```
`error` передана в метод `reject`.
# --instructions--
Додайте до вашого Promise метод `catch`. Використовуйте `error` у якості параметра для функції зворотного виклику та зазначте `error` у консолі.
# --hints--
Слід використати метод `catch` для Promise.
```js
assert(
__helpers.removeWhiteSpace(code).match(/(makeServerRequest|\))\.catch\(/g)
);
```
Ваш метод `catch` повинен мати функцію зворотнього виклику з `error` у якості параметра.
```js
assert(errorIsParameter);
```
Ви маєте зазначити `error` у консолі.
```js
assert(
errorIsParameter &&
__helpers
.removeWhiteSpace(code)
.match(/\.catch\(.*?error.*?console.log\(error\).*?\)/)
);
```
# --seed--
## --after-user-code--
```js
const errorIsParameter = /\.catch\((function\(error\){|error|\(error\)=>)/.test(__helpers.removeWhiteSpace(code));
```
## --seed-contents--
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer is set to false to represent an unsuccessful response from a server
let responseFromServer = false;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
makeServerRequest.then(result => {
console.log(result);
});
```
# --solutions--
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer is set to false to represent an unsuccessful response from a server
let responseFromServer = false;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
makeServerRequest.then(result => {
console.log(result);
});
makeServerRequest.catch(error => {
console.log(error);
});
```

48
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.md Normal file
View File

@@ -0,0 +1,48 @@
---
id: 587d7b8d367417b2b2512b59
title: Імпорт модуля Default Export за змовчуванням
challengeType: 1
forumTopicId: 301205
dashedName: import-a-default-export
---
# --description--
У вашому останньому завданні ви дізнались про `xportdefault` та його використання. Для імпорту default export необхідно використовувати інший синтаксис `import`. У наступному прикладі `add` є експорт за змовчуванням файлу `math_functions.js`. Ось як потрібно імпортувати:
```js
import add from "./math_functions.js";
```
Є одна ключова відмінність синтаксису. Імпортоване значення `add` не обрамлене фігурними дужками (`{}`). `add` це назва змінної для будь-якого експорту за змовчуванням в файл `math_functions.js`. Файл за змовчуванням можна називати в довільному порядку.
# --instructions--
У наступному коді імпортуйте експорт за замовчуванням з файлу `math_functions.js`, знайдений в тій же папці, що і цей файл. Назвіть імпорт `subtract`.
# --hints--
Належним чином імпортуйте `subtract` з `math_functions.js`.
```js
assert(code.match(/import\s+subtract\s+from\s+('|")\.\/math_functions\.js\1/g));
```
# --seed--
## --seed-contents--
```js
// Only change code above this line
subtract(7,4);
```
# --solutions--
```js
import subtract from "./math_functions.js";
subtract(7,4);
```

91
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md Normal file
View File

@@ -0,0 +1,91 @@
---
id: 587d7b87367417b2b2512b42
title: Видозмінюйте наданий масив за допомогою змінної
challengeType: 1
forumTopicId: 301206
dashedName: mutate-an-array-declared-with-const
---
# --description--
Якщо ви ще не знаєте про `const`, то перегляньте [це завдання](/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword).
Є багато значень змінної `const` у сучасній JavaScript.
Деякі розробники надають перевагу привласненню усіх змінних за допомогою `const`, доки вони не дізнаються про можливу необхідність перепризначення змінної. Тоді вони використовують `let`.
Проте варто розуміти, що об'єкти (включаючи масиви та функції), призначенні змінній за допомогою `const`, все ще можна змінювати. Правильне використання `const` запобігає зміненню ідентифікатора змінної.
```js
const s = [5, 6, 7];
s = [1, 2, 3];
s[2] = 45;
console.log(s);
```
`s = [1, 2, 3]` призведе до помилки. Виклик `console.log` відображає `[5, 6, 45]`.
Як ви помітили, можна змінювати об'єкт `[5, 6, 7]`. Змінна `s` все ще вказуватиме на змінений масив `[5, 6, 45]</code. Як і усі масиви, елементи масиву в <code>s` є незмінними, бо було використано `const`. Ви не можете використовувати ідентифікатор змінної `s`, щоб вказувати на інший масив оператору призначення.
# --instructions--
Масив оголошується як `const s = [5, 7, 2]`. Змініть масив на `[2, 5, 7]` використовуючи різні призначення елементів.
# --hints--
Вам не слід замінювати ключове слово `const`.
```js
(getUserInput) => assert(getUserInput('index').match(/const/g));
```
`s` має бути постійно змінною (використовуйте `const`).
```js
(getUserInput) => assert(getUserInput('index').match(/const\s+s/g));
```
Не слід змінювати початковий масив.
```js
(getUserInput) =>
assert(
getUserInput('index').match(
/const\s+s\s*=\s*\[\s*5\s*,\s*7\s*,\s*2\s*\]\s*;?/g
)
);
```
`s` повинен дорівнювати `[2, 5, 7]`.
```js
assert.deepEqual(s, [2, 5, 7]);
```
# --seed--
## --seed-contents--
```js
const s = [5, 7, 2];
function editInPlace() {
// Only change code below this line
// Using s = [2, 5, 7] would be invalid
// Only change code above this line
}
editInPlace();
```
# --solutions--
```js
const s = [5, 7, 2];
function editInPlace() {
s[0] = 2;
s[1] = 5;
s[2] = 7;
}
editInPlace();
```

104
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.md Normal file
View File

@@ -0,0 +1,104 @@
---
id: 598f48a36c8c40764b4e52b3
title: Запобігання мутаціям об'єкта
challengeType: 1
forumTopicId: 301207
dashedName: prevent-object-mutation
---
# --description--
З попереднього завдання бачимо, що `const` насправді не захищає ваші дані від змін. Щоб ваші дані не змінилися, JavaScript надає функцію `Object.freeze` для запобігання мутації даних.
Будь -яка спроба змінити об'єкт буде відхилена, з помилкою, якщо тег працює в строгому режимі.
```js
let obj = {
name:"FreeCodeCamp",
review:"Awesome"
};
Object.freeze(obj);
obj.review = "bad";
obj.newProp = "Test";
console.log(obj);
```
The `obj.review` and `obj.newProp` призначення призведе до помилок, тому що наш редактор за замовчуванням працює в строгому режимі,і консоль покаже значення `{ name: "FreeCodeCamp", review: "Awesome" }`.
# --instructions--
У цьому завданні вам доведеться використовувати `Object.freeze` для запобігання зміни математичних констант. Вам необхідно заморозити об'єкт `MATH_CONSTANTS` так, щоб ніхто не зміг змінити значення `PI`, додати або видалити властивості.
# --hints--
Вам не слід замінювати ключове слово `const`.
```js
(getUserInput) => assert(getUserInput('index').match(/const/g));
```
`MATH_CONSTANTS` має бути постійною змінною (використовуйте `const`).
```js
(getUserInput) =>
assert(getUserInput('index').match(/const\s+MATH_CONSTANTS/g));
```
Вам не слід змінювати початкове значення `MATH_CONSTANTS`.
```js
(getUserInput) =>
assert(
getUserInput('index').match(
/const\s+MATH_CONSTANTS\s+=\s+{\s+PI:\s+3.14\s+};/g
)
);
```
`PI` має дорівнювати `3.14`.
```js
assert(PI === 3.14);
```
# --seed--
## --seed-contents--
```js
function freezeObj() {
const MATH_CONSTANTS = {
PI: 3.14
};
// Only change code below this line
// Only change code above this line
try {
MATH_CONSTANTS.PI = 99;
} catch(ex) {
console.log(ex);
}
return MATH_CONSTANTS.PI;
}
const PI = freezeObj();
```
# --solutions--
```js
function freezeObj() {
const MATH_CONSTANTS = {
PI: 3.14
};
Object.freeze(MATH_CONSTANTS);
try {
MATH_CONSTANTS.PI = 99;
} catch(ex) {
console.log(ex);
}
return MATH_CONSTANTS.PI;
}
const PI = freezeObj();
```

70
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md Normal file
View File

@@ -0,0 +1,70 @@
---
id: 587d7b8c367417b2b2512b55
title: Повторне використання коду JavaScript за допомогою імпорту
challengeType: 1
forumTopicId: 301208
dashedName: reuse-javascript-code-using-import
---
# --description--
`import` дозволяє вибрати, які частини файлу або модуля завантажувати. В попередньому уроці, приклади експортуються `add` з `math_functions.js` файлу. Ось як ви можете імпортувати його та використовувати в іншому файлі:
```js
import { add } from './math_functions.js';
```
`import` знайде `add` у `math_functions.js`, і імпортує саме цю функцію для використання, а решту ігнорує. `./` повідомляє про імпорт для пошуку файлу `math_functions.js` у тій же папці, що і поточний файл. При використанні імпорту таким чином необхідний відносний шлях до файлу (`./`) та розширення файлу (`.js`).
Ви можете імпортувати кілька елементів з файлу, додавши їх у інструкцію `import` так:
```js
import { add, subtract } from './math_functions.js';
```
# --instructions--
Додайте відповідну інструкцію `import`, яка дозволить поточному файлу використовувати функції `uppercaseString` та `lowercaseString`, які ви експортували в попередньому уроці. Ці функції знаходяться у файлі під назвою `string_functions.js`, які знаходиться і тій самій папці, що і поточний файл.
# --hints--
Варто здійснити імпорт належним чином `uppercaseString`.
```js
assert(
code.match(
/import\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g
)
);
```
Потрібно імпортувати `lowercaseString`належним чином.
```js
assert(
code.match(
/import\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g
)
);
```
# --seed--
## --seed-contents--
```js
// Only change code above this line
uppercaseString("hello");
lowercaseString("WORLD!");
```
# --solutions--
```js
import { uppercaseString, lowercaseString } from './string_functions.js';
uppercaseString("hello");
lowercaseString("WORLD!");
```

64
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.md Normal file
View File

@@ -0,0 +1,64 @@
---
id: 587d7b88367417b2b2512b46
title: Виставлення параметрів за замовчуванням для ваших функцій
challengeType: 1
forumTopicId: 301209
dashedName: set-default-parameters-for-your-functions
---
# --description--
Для допомоги у створенні більш гнучких функцій, ES6 пропонує <dfn>default parameters</dfn> для функцій.
Погляньте на цей код:
```js
const greeting = (name = "Anonymous") => "Hello " + name;
console.log(greeting("John"));
console.log(greeting());
```
Консоль буде відображати рядки `Hello John` та `Hello Anonymous`.
Параметр за замовчуванням спрацьовує, коли аргумент не вказано (не визначено). Як можна побачити у прикладі вище, параметр `name` отримає за замовчуванням значення `Anonymous`, якщо ви не вказали значення цього параметру. Ви можете додати значення за замовчуванням будь-якій кількості параметрів.
# --instructions--
Модифікуйте функцію `increment`, додавши параметри за замовчуванням, щоб одиниця була додана до `number`, якщо `value` не вказано.
# --hints--
Результатом `increment(5, 2)` повинен бути `7`.
```js
assert(increment(5, 2) === 7);
```
Результатом `increment(5)` повинен бути `6`.
```js
assert(increment(5) === 6);
```
Значення параметру за замовчуванням `1` слід використовувати для `value`.
```js
assert(code.match(/value\s*=\s*1/g));
```
# --seed--
## --seed-contents--
```js
// Only change code below this line
const increment = (number, value) => number + value;
// Only change code above this line
```
# --solutions--
```js
const increment = (number, value = 1) => number + value;
```

60
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.md Normal file
View File

@@ -0,0 +1,60 @@
---
id: 587d7b8c367417b2b2512b57
title: Використання * для імпорту всієї інформації з файлу
challengeType: 1
forumTopicId: 301210
dashedName: use--to-import-everything-from-a-file
---
# --description--
Припустимо, у вас є файл і ви хочете імпортувати весь його вміст у поточний файл. Це можна зробити за допомогою `import * as` синтаксису. Ось приклад, де вміст файлу з назвою `math_functions.js` імпортується до файлу в тому ж каталозі:
```js
import * as myMathModule from "./math_functions.js";
```
Наведена вище команда `import` створить об’єкт під назвою `myMathModule`. Це змінна назва, ви можете обрати власну. Об'єкт буде містити всю експортовану інформацію з `math_functions.js`, тому ви зможете отримати доступ як до функцій, так і до інших властивостей об'єкта. Ось як ви можете використовувати функції `add` і `subtract`, які були імпортовані:
```js
myMathModule.add(2,3);
myMathModule.subtract(5,3);
```
# --instructions--
Для коду у цьому файлі необхідний вміст файлу: `string_functions.js`, який є в тому ж каталозі, що і поточний файл. Використовуйте синтаксис `import * as`, щоб імпортувати всі файли до об'єкта під назвою `stringFunctions`.
# --hints--
У вашому коді повинен правильно використовуватись синтаксис `import * as`.
```js
assert(
code.match(
/import\s*\*\s*as\s+stringFunctions\s+from\s*('|")\.\/string_functions\.js\1/g
)
);
```
# --seed--
## --seed-contents--
```js
// Only change code above this line
stringFunctions.uppercaseString("hello");
stringFunctions.lowercaseString("WORLD!");
```
# --solutions--
```js
import * as stringFunctions from "./string_functions.js";
// add code above this line
stringFunctions.uppercaseString("hello");
stringFunctions.lowercaseString("WORLD!");
```

91
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md Normal file
View File

@@ -0,0 +1,91 @@
---
id: 587d7b87367417b2b2512b43
title: Використовуйте функцію Arrow для опису анонімної функції
challengeType: 1
forumTopicId: 301211
dashedName: use-arrow-functions-to-write-concise-anonymous-functions
---
# --description--
У JavaScript, нам часто не потрібно називати функцію, особливо при передачі функції в якості аргументу іншої функції. Натомість створюються вбудовані функції. Їх не потрібно називати, бо вони більш ніде не використовуються.
Щоб досягнути цього, використовується наступний синтаксис:
```js
const myFunc = function() {
const myVar = "value";
return myVar;
}
```
ES6 надає нам синтаксичні можливості, щоб не використовувати анонімних функцій таким чином. Саме тому варто використовувати **синтаксичну функцію arrow**:
```js
const myFunc = () => {
const myVar = "value";
return myVar;
}
```
Коли відсутнє тіло функції, а є лише повернене значення, то синтаксична функція arrow дозволяє опустити ключове слово `return`, а також дужки, що стосуються коду. Це допомагає спростити невелику функцію в однорядковий вираз:
```js
const myFunc = () => "value";
```
Цей код все це поверне рядок `value` за змовчуванням.
# --instructions--
Перепишіть функцію, призначеній змінній `magic`, що перетворюється на`new Date()` використовуючи синтаксичну функцію arrow. Також переконайтесь, що ще нічого не визначено за допомогою ключового слова `var`.
# --hints--
Вам слід замінити ключове слово `var`.
```js
(getUserInput) => assert(!getUserInput('index').match(/var/g));
```
`magic` має бути постійною змінною (використовуйте `const`).
```js
(getUserInput) => assert(getUserInput('index').match(/const\s+magic/g));
```
`magic` має бути `function`.
```js
assert(typeof magic === 'function');
```
`magic()` повинна повернути правильну дату.
```js
assert(magic().setHours(0, 0, 0, 0) === new Date().setHours(0, 0, 0, 0));
```
Не використовуйте ключове слово `function`.
```js
(getUserInput) => assert(!getUserInput('index').match(/function/g));
```
# --seed--
## --seed-contents--
```js
var magic = function() {
return new Date();
};
```
# --solutions--
```js
const magic = () => {
return new Date();
};
```

100
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md Normal file
View File

@@ -0,0 +1,100 @@
---
id: 587d7b8b367417b2b2512b53
title: Використовуйте клас синтаксису для визначення функції Constructor
challengeType: 1
forumTopicId: 301212
dashedName: use-class-syntax-to-define-a-constructor-function
---
# --description--
ES6 забезпечує новий синтаксис для створення об'єктів, використовуючи ключове слово <dfn>class</dfn>.
Варто зазначити, що синтаксис `class` є просто синтаксисом, а не повноцінною реалізацією об'єктно-орієнтованої парадигми, на відміну від таких мов як Java, Python, Ruby, і т.д.
В ES5 зазвичай визначається функція `constructor` та використовується ключове слово `new` для створення об'єкта.
```js
var SpaceShuttle = function(targetPlanet){
this.targetPlanet = targetPlanet;
}
var zeus = new SpaceShuttle('Jupiter');
```
Синтаксис `class` просто замінює створення функції `constructor`:
```js
class SpaceShuttle {
constructor(targetPlanet) {
this.targetPlanet = targetPlanet;
}
}
const zeus = new SpaceShuttle('Jupiter');
```
Варто зазначити, що ключове слово `class` оголошує нову функцію, до якої додається конструктор. Конструктор викликається, коли ключове слово `new` використовується для створення нового об'єкту.
**Примітка:** UpperCamelCase слід використовувати в конвенції для назв класів ES6, як і в `SpaceShuttle` використаного вище.
Метод `constructor` це спеціальний метод для створення та ініціалізації об'єкта, створений за допомогою класу. Ви можете дізнатись про це більше у розділі "Об"єктно-орієнтоване програмування" JavaScript алгоритми та структура даних.
# --instructions--
Використайте ключове слово `class` та напишіть `constructor` для створення класу `Vegetable`.
Клас `Vegetable` дозволяє створити об'єкт vegetable з параметром `name`, що опускає `constructor`.
# --hints--
`Vegetable` має бути `class` визначений методом `constructor`.
```js
assert(
typeof Vegetable === 'function' && typeof Vegetable.constructor === 'function'
);
```
Використовуйте ключове слово `class`.
```js
assert(code.match(/class/g));
```
`Vegetable` має бути інстальовано.
```js
assert(() => {
const a = new Vegetable('apple');
return typeof a === 'object';
});
```
`carrot.name` повинен повертатись як `carrot`.
```js
assert(carrot.name == 'carrot');
```
# --seed--
## --seed-contents--
```js
// Only change code below this line
// Only change code above this line
const carrot = new Vegetable('carrot');
console.log(carrot.name); // Should display 'carrot'
```
# --solutions--
```js
class Vegetable {
constructor(name) {
this.name = name;
}
}
const carrot = new Vegetable('carrot');
```

71
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays.md Normal file
View File

@@ -0,0 +1,71 @@
---
id: 587d7b89367417b2b2512b4b
title: Використовуйте деструктивне привласнення для визначення змінних із масивів
challengeType: 1
forumTopicId: 301213
dashedName: use-destructuring-assignment-to-assign-variables-from-arrays
---
# --description--
ES6 створює деструктивні масиви так само легко, як і деструктивні об'єкти.
Однією з ключових відмінностей між спред оператором та деструктивним масивом є те, що спред оператор розпаковує весь вміст масиву в список, розділений комою. Отже, ви не можете вибрати, які елементи ви бажаєте призначити змінним.
Деструкція масиву дозволяє нам зробити це:
```js
const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b);
```
В консолі відображатимуться значення `a` та `b` як `1, 2`.
Змінна `a` призначає перше значення масиву, а `b` присвоюється друге значення масиву. Також ми можемо отримати доступ до значення у масиві з деструкцією за допомогою коми для досягнення бажаного індексу:
```js
const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c);
```
В консолі відображатимуться значення `a`, `b`, та `c` як `1, 2, 5`.
# --instructions--
Використайте привласнення для заміни значень `a` and `b`, так, що `a` отримує значення, збережене в `b`, і `b` отримує значення, збережене в `a`.
# --hints--
Значення `a` має бути `6`, після перегортання.
```js
assert(a === 6);
```
Значення `b` має бути `8`, після перегортання.
```js
assert(b === 8);
```
Ви повинні використовувати деструктивний масив, щоб замінити `a` та `b`.
```js
assert(/\[\s*(\w)\s*,\s*(\w)\s*\]\s*=\s*\[\s*\2\s*,\s*\1\s*\]/g.test(code));
```
# --seed--
## --seed-contents--
```js
let a = 8, b = 6;
// Only change code below this line
```
# --solutions--
```js
let a = 8, b = 6;
[a, b] = [b, a];
```

106
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.md Normal file
View File

@@ -0,0 +1,106 @@
---
id: 587d7b89367417b2b2512b4a
title: Використовуйте деструктивне привласнення для визначення змінних із масивів
challengeType: 1
forumTopicId: 301214
dashedName: use-destructuring-assignment-to-assign-variables-from-nested-objects
---
# --description--
Слідуйте тим самим принципам, що і у попередніх 2 уроках, які були присвячені визначенню змінних із масивів.
Використовуйте змінну схожу до попередніх масивів:
```js
const user = {
johnDoe: {
age: 34,
email: 'johnDoe@freeCodeCamp.com'
}
};
```
Розглянемо приклад, як отримати значення властивостей об'єкта та призначити їх змінним із таким самим ім'ям:
```js
const { johnDoe: { age, email }} = user;
```
Приклад того, як ви можете призначити значення з різними іменами:
```js
const { johnDoe: { age: userAge, email: userEmail }} = user;
```
# --instructions--
Замініть два визначення еквівалентами з деструктивного привласнення. Ви все ще призначаєте змінним `lowToday` та `highToday` значення `today.low` та `today.high` з об'єкту `LOCAL_FORECAST`.
# --hints--
Видаліть призначення синтаксису ES5.
```js
assert(
!code.match(/lowToday = LOCAL_FORECAST\.today\.low/g) &&
!code.match(/highToday = LOCAL_FORECAST\.today.high/g)
);
```
Використовуйте деструкцію, щоб створити змінну `lowToday`.
```js
assert(
code.match(
/(var|const|let)\s*{\s*today\s*:\s*{\s*(low\s*:\s*lowToday[^}]*|[^,]*,\s*low\s*:\s*lowToday\s*)}\s*}\s*=\s*LOCAL_FORECAST(;|\s+|\/\/)/g
)
);
```
Використовуйте деструкцію, щоб створити змінну `highToday`.
```js
assert(
code.match(
/(var|const|let)\s*{\s*today\s*:\s*{\s*(high\s*:\s*highToday[^}]*|[^,]*,\s*high\s*:\s*highToday\s*)}\s*}\s*=\s*LOCAL_FORECAST(;|\s+|\/\/)/g
)
);
```
`lowToday` повинна дорівнювати `64` та `highToday</code має бути рівний <code>77`.
```js
assert(lowToday === 64 && highToday === 77);
```
# --seed--
## --seed-contents--
```js
const LOCAL_FORECAST = {
yesterday: { low: 61, high: 75 },
today: { low: 64, high: 77 },
tomorrow: { low: 68, high: 80 }
};
// Only change code below this line
const lowToday = LOCAL_FORECAST.today.low;
const highToday = LOCAL_FORECAST.today.high;
// Only change code above this line
```
# --solutions--
```js
const LOCAL_FORECAST = {
yesterday: { low: 61, high: 75 },
today: { low: 64, high: 77 },
tomorrow: { low: 68, high: 80 }
};
const { today: { low: lowToday, high: highToday }} = LOCAL_FORECAST;
```

97
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.md Normal file
View File

@@ -0,0 +1,97 @@
---
id: 587d7b89367417b2b2512b49
title: Використовуйте деструктивне привласнення для визначення змінних із масивів
challengeType: 1
forumTopicId: 301215
dashedName: use-destructuring-assignment-to-assign-variables-from-objects
---
# --description--
Деструктуризація дозволяє вам призначити нове ім'я змінної при вилученні. Щоб зробити це, поставте нове ім'я після двокрапки при призначенні.
Використовуйте то й же об'єкт що і в останньому прикладі:
```js
const user = { name: 'John Doe', age: 34 };
```
Розглянемо, як ви можете дати нові імена змінним у призначенні:
```js
const { name: userName, age: userAge } = user;
```
Ви можете прочитати це як "отримати значення `user.name` та та назначити нову змінну з назвою `userName`" і т.д. Значення `userName` буде `John Doe`, і значення `userAge` буде числом `34`.
# --instructions--
Замініть два визначення еквівалентами з деструктивного привласнення. Ви все ще призначаєте змінним `highToday` та `highTomorrow` значення `today` та </code>and `tomorrow` з об'єкту `HIGH_TEMPERATURES`.
# --hints--
Видаліть призначення синтаксису ES5.
```js
assert(
!code.match(/highToday = HIGH_TEMPERATURES\.today/g) &&
!code.match(/highTomorrow = HIGH_TEMPERATURES\.tomorrow/g)
);
```
Використовуйте деструкцію, щоб створити змінну `highToday`.
```js
assert(
code.match(
/(var|const|let)\s*{\s*(today\s*:\s*highToday[^}]*|[^,]*,\s*today\s*:\s*highToday\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
)
);
```
Використовуйте деструкцію, щоб створити змінну `highTomorrow`.
```js
assert(
code.match(
/(var|const|let)\s*{\s*(tomorrow\s*:\s*highTomorrow[^}]*|[^,]*,\s*tomorrow\s*:\s*highTomorrow\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
)
);
```
`highToday` повинна дорівнювати `77` та `highTomorrow` має бути рівний `80`.
```js
assert(highToday === 77 && highTomorrow === 80);
```
# --seed--
## --seed-contents--
```js
const HIGH_TEMPERATURES = {
yesterday: 75,
today: 77,
tomorrow: 80
};
// Only change code below this line
const highToday = HIGH_TEMPERATURES.today;
const highTomorrow = HIGH_TEMPERATURES.tomorrow;
// Only change code above this line
```
# --solutions--
```js
const HIGH_TEMPERATURES = {
yesterday: 75,
today: 77,
tomorrow: 80
};
const { today: highToday, tomorrow: highTomorrow } = HIGH_TEMPERATURES;
```

101
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.md Normal file
View File

@@ -0,0 +1,101 @@
---
id: 5cfa550e84205a357704ccb6
title: Використовуйте деструктивне привласнення для визначення змінних із масивів
challengeType: 1
forumTopicId: 301216
dashedName: use-destructuring-assignment-to-extract-values-from-objects
---
# --description--
<dfn>Призначення деструктуризації</dfn> є спеціальним синтаксисом, запровадженим у ES6, для чіткого призначення параметрів, взятих безпосередньо з об'єкта.
Розглянемо наступний приклад коду ES5:
```js
const user = { name: 'John Doe', age: 34 };
const name = user.name;
const age = user.age;
```
`name` матиме значення рядка `John Doe`, and `age` матиме значення числа `34`.
Ось аналогічна інструкція з використання синтаксису деструкції ES6:
```js
const { name, age } = user;
```
Отже, `name` стане рядком `John Doe`, and `age` матиме значення числа `34`.
Тут змінні `name` та `age` будуть створені і призначені значення їх відповідних значень об'єкта `user`. Ви можете побачити наскільки стало простіше.
Ви можете отримати потрібну кількість значень з потрібного вам об'єкта.
# --instructions--
Замініть два визначення еквівалентами з деструктивного привласнення. Ви все ще призначаєте змінним `today` and `tomorrow` значення `today` та `tomorrow` з об'єкту `HIGH_TEMPERATURES`.
# --hints--
Видаліть призначення синтаксису ES5.
```js
assert(
!code.match(/today\s*=\s*HIGH_TEMPERATURES\.(today|tomorrow)/g)
);
```
Використовуйте деструкцію, щоб створити змінну `today`.
```js
assert(
code.match(/(var|let|const)\s*{\s*(today[^}]*|[^,]*,\s*today)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g)
);
```
Використовуйте деструкцію, щоб створити змінну `tomorrow`.
```js
assert(
code.match(/(var|let|const)\s*{\s*(tomorrow[^}]*|[^,]*,\s*tomorrow)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g)
);
```
`today` буде рівним `77` та `tomorrow` дорівнюватиме `80`.
```js
assert(today === 77 && tomorrow === 80);
```
# --seed--
## --seed-contents--
```js
const HIGH_TEMPERATURES = {
yesterday: 75,
today: 77,
tomorrow: 80
};
// Only change code below this line
const today = HIGH_TEMPERATURES.today;
const tomorrow = HIGH_TEMPERATURES.tomorrow;
// Only change code above this line
```
# --solutions--
```js
const HIGH_TEMPERATURES = {
yesterday: 75,
today: 77,
tomorrow: 80
};
const { today, tomorrow } = HIGH_TEMPERATURES;
```

94
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md Normal file
View File

@@ -0,0 +1,94 @@
---
id: 587d7b8a367417b2b2512b4d
title: Використовуйте призначення за рахунок деструктуризації, щоб передати об'єкт як параметри функції
challengeType: 1
forumTopicId: 301217
dashedName: use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters
---
# --description--
У деяких випадках ви можете деструктурувати об'єкт в самому аргументі функції.
Розглянемо наступний код:
```js
const profileUpdate = (profileData) => {
const { name, age, nationality, location } = profileData;
}
```
Ефективний спосіб деструктуризації об'єкта в функцію. Це можна виконати шляхом аналізу:
```js
const profileUpdate = ({ name, age, nationality, location }) => {
}
```
Коли `profileData` переходить у функцію, значення деструктуруються з параметра функції в використання функції.
# --instructions--
Використовуйте деструктивне привласнення в межах аргументу `half` щоб відправити лише `max` та `min` всередині функції.
# --hints--
`stats` має бути `object`.
```js
assert(typeof stats === 'object');
```
`half(stats)` має бути `28.015`
```js
assert(half(stats) === 28.015);
```
Деструкція є важливим елементом.
```js
assert(__helpers.removeWhiteSpace(code).match(/half=\({\w+,\w+}\)/));
```
Необхідно використовувати деструктивний параметр.
```js
assert(!code.match(/stats\.max|stats\.min/));
```
# --seed--
## --seed-contents--
```js
const stats = {
max: 56.78,
standard_deviation: 4.34,
median: 34.54,
mode: 23.87,
min: -0.75,
average: 35.85
};
// Only change code below this line
const half = (stats) => (stats.max + stats.min) / 2.0;
// Only change code above this line
```
# --solutions--
```js
const stats = {
max: 56.78,
standard_deviation: 4.34,
median: 34.54,
mode: 23.87,
min: -0.75,
average: 35.85
};
const half = ( {max, min} ) => (max + min) / 2.0;
```

85
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.md Normal file
View File

@@ -0,0 +1,85 @@
---
id: 587d7b8a367417b2b2512b4c
title: >-
Використовуйте решту параметрів з деструктивним призначенням для перепризначення масиву елементів
challengeType: 1
forumTopicId: 301218
dashedName: >-
use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements
---
# --description--
У деяких ситуаціях нам потрібно зберегти елементи в окремий масив.
Результат схожий на `Array.prototype.slice()`, як показано нижче:
```js
const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b);
console.log(arr);
```
У такому разі консоль відображатиме значення `1, 2` та `[3, 4, 5, 7]`.
Змінні `a` та `b` приймають перші та другі значення з масиву. Після цього, завдяки параметру `arr` решта значень подаються у масиві. Решта елементів працює тільки-но у вигляді останньої змінної списку. Як і в даних, ви не можете використовувати інший параметр для охоплення підмасиву, який залишає останній елемент вихідного масиву.
# --instructions--
Використовуйте деструктивне привласнення з рештою параметрів `Array.prototype.slice()`, так як `arr` є підмасивом оригінального масиву `source` з опущеними двома елементами.
# --hints--
`arr` має бути `[3,4,5,6,7,8,9,10]`
```js
assert(arr.every((v, i) => v === i + 3) && arr.length === 8);
```
`source` має бути `[1,2,3,4,5,6,7,8,9,10]`
```js
assert(source.every((v, i) => v === i + 1) && source.length === 10);
```
`Array.slice()` не варто використовувати.
```js
(getUserInput) => assert(!getUserInput('index').match(/slice/g));
```
Необхідно використовувати деструктуризацію `list`.
```js
assert(
__helpers
.removeWhiteSpace(code)
.match(/\[(([_$a-z]\w*)?,){1,}\.\.\.arr\]=list/i)
);
```
# --seed--
## --seed-contents--
```js
const source = [1,2,3,4,5,6,7,8,9,10];
function removeFirstTwo(list) {
// Only change code below this line
const arr = list; // Change this line
// Only change code above this line
return arr;
}
const arr = removeFirstTwo(source);
```
# --solutions--
```js
const source = [1,2,3,4,5,6,7,8,9,10];
function removeFirstTwo(list) {
const [, , ...arr] = list;
return arr;
}
const arr = removeFirstTwo(source);
```

85
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md Normal file
View File

@@ -0,0 +1,85 @@
---
id: 587d7b8c367417b2b2512b56
title: Використання експорту для спільного використання блоку коду
challengeType: 1
forumTopicId: 301219
dashedName: use-export-to-share-a-code-block
---
# --description--
Уявіть файл під назвою `math_functions.js`, який містить декілька функцій, пов'язаних із математичними операціями. Один із них зберігається у змінній, `add`, яка приймає два числа і виводить їх суму. Ви захочете використовувати цю функцію в декількох різних JavaScript файлах. Для того, щоб поділитися цим з іншими файлами вам спочатку потрібно `export` його.
```js
export const add = (x, y) => {
return x + y;
}
```
Зверху - звичайний спосіб експортування однієї функції, але ви можете досягти того ж результату так:
```js
const add = (x, y) => {
return x + y;
}
export { add };
```
При експорті змінної або функції, ви можете імпортувати їх в інший файл і використовувати без необхідності переписувати код. Ви можете експортувати декілька речей, повторюючи перший приклад для кожного файлу, який хочете експортувати, або ж розмістивши їх усіх в експортній команді другого прикладу:
```js
export { add, subtract };
```
# --instructions--
У редакторі є дві функції рядка. Експортуйте обидві, використовуючи один з методів на ваш вибір.
# --hints--
Слід належним чином експортувати `uppercaseString`.
```js
assert(
code.match(
/(export\s+const\s+uppercaseString|export\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)})/g
)
);
```
Слід належним чином експортувати `lowercaseString`.
```js
assert(
code.match(
/(export\s+const\s+lowercaseString|export\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)})/g
)
);
```
# --seed--
## --seed-contents--
```js
const uppercaseString = (string) => {
return string.toUpperCase();
}
const lowercaseString = (string) => {
return string.toLowerCase()
}
```
# --solutions--
```js
export const uppercaseString = (string) => {
return string.toUpperCase();
}
export const lowercaseString = (string) => {
return string.toLowerCase()
}
```

174
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md Normal file
View File

@@ -0,0 +1,174 @@
---
id: 587d7b8c367417b2b2512b54
title: Використовуйте ґетери й сетери для Управління доступом до об'єкта
challengeType: 1
forumTopicId: 301220
dashedName: use-getters-and-setters-to-control-access-to-an-object
---
# --description--
Ви можете отримати значення від об'єкта й встановити значення властивості без об'єкта.
Це має назву <dfn>getters</dfn> й <dfn>setters</dfn>.
Функції ґетерів призначені для повернення (або отримання) значення приватної змінної без користувача, що безпосередньо має доступ до приватної змінної.
Функції сетерів призначені для змінення (або встановлення) значення приватної змінної об'єкту, що надалі використовується в функції сетерів. У складі цієї змінної може бути обчислення або навіть перезаписування попереднього значення.
```js
class Book {
constructor(author) {
this._author = author;
}
// getter
get writer() {
return this._author;
}
// setter
set writer(updatedAuthor) {
this._author = updatedAuthor;
}
}
const novel = new Book('anonymous');
console.log(novel.writer);
novel.writer = 'newAuthor';
console.log(novel.writer);
```
Ця консоль буде зображати рядки `anonymous` й `newAuthor`.
Зверніть увагу на синтаксис, що використовується для виклику ґетерів й сетерів. Вони навіть не схожі на функції. Ґетери і сетери мають велике значення, бо вони приховують внутрішні деталі реалізації.
**Примітка:** Важливо використовувати підкреслювання (`_`) перед назвою приватної змінної. Однак сама практика не створює приватні змінні.
# --instructions--
Використовуйте `class` ключове слово для створення `Thermostat` класу. Конструктор `constructor` припускає температуру Фаренгейту.
На занятті створіть `getter` для отримання температури Цельсія й `setter` для її встановлення.
Пам'ятайте, що `C = 5/9 * (F - 32)` й`F = C * 9.0 / 5 + 32`, де `F` це значення температури за Фаренгейтом, а `C` значення тієї ж самої температури, але за Цельсієм.
**Примітка:** Під час виконання ви можете дослідити температуру в класі за Фаренгейтом або за Цельсієм.
У цьому сила ґетерів й сетерів. Ви створюєте API для іншого користувача, що може отримати правильний результат, незалежно від того, що саме ви досліджуєте.
Інакше кажучи, ви приховуєте деталі реалізації від користувача.
# --hints--
`Thermostat` має бути `class` визначеним за допомогою `constructor`.
```js
assert(
typeof Thermostat === 'function' &&
typeof Thermostat.constructor === 'function'
);
```
Використовуйте ключове слово `class`.
```js
assert(code.match(/class/g));
```
Має бути встановлено `Thermostat`.
```js
assert(
(() => {
const t = new Thermostat(122);
return typeof t === 'object';
})()
);
```
Після встановлення змінної за Фаренгейтом `Thermostat` має встановити правильну `temperature`.
```js
assert(
(() => {
const t = new Thermostat(122);
return t.temperature === 50;
})()
);
```
`getter` має бути визначеним.
```js
assert(
(() => {
const desc = Object.getOwnPropertyDescriptor(
Thermostat.prototype,
'temperature'
);
return !!desc && typeof desc.get === 'function';
})()
);
```
`setter` має бути визначеним.
```js
assert(
(() => {
const desc = Object.getOwnPropertyDescriptor(
Thermostat.prototype,
'temperature'
);
return !!desc && typeof desc.set === 'function';
})()
);
```
Виклик `setter` зі значенням за Цельсієм має встановити `temperature`.
```js
assert(
(() => {
const t = new Thermostat(32);
t.temperature = 26;
const u = new Thermostat(32);
u.temperature = 50;
return t.temperature === 26 && u.temperature === 50;
})()
);
```
# --seed--
## --seed-contents--
```js
// Only change code below this line
// Only change code above this line
const thermos = new Thermostat(76); // Setting in Fahrenheit scale
let temp = thermos.temperature; // 24.44 in Celsius
thermos.temperature = 26;
temp = thermos.temperature; // 26 in Celsius
```
# --solutions--
```js
class Thermostat {
constructor(fahrenheit) {
this._tempInCelsius = 5/9 * (fahrenheit - 32);
}
get temperature(){
return this._tempInCelsius;
}
set temperature(newTemp){
this._tempInCelsius = newTemp;
}
}
const thermos = new Thermostat(76); // Setting in Fahrenheit scale
let temp = thermos.temperature; // 24.44 in Celsius
thermos.temperature = 26;
temp = thermos.temperature; // 26 in Celsius
```

80
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md Normal file
View File

@@ -0,0 +1,80 @@
---
id: 587d7b88367417b2b2512b47
title: Використання параметру скидання і параметру функцій
challengeType: 1
forumTopicId: 301221
dashedName: use-the-rest-parameter-with-function-parameters
---
# --description--
Щоб створити гнучкіші функції, ES6 пропонує <dfn>параметр скидання</dfn> для параметрів функцій. За допомогою параметра скидання можна створити функції зі змінною кількістю аргументів. Ці аргументи зберігаються в масиві, який буде доступний пізніше з внутрішньої функції.
Погляньте на цей код:
```js
function howMany(...args) {
return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2));
console.log(howMany("string", null, [1, 2, 3], { }));
```
Консоль відображатиме рядки `You have passed 3 arguments.` і `You have passed 4 arguments.`.
Параметр скидання усуває потребу в перевірці `args` масиву і дає змогу застосувати `map()`, `filter()` і `reduce()` у масиві параметрів.
# --instructions--
Змініть функції `sum` за допомогою параметру скидання у такий спосіб, щоб функція `sum` могла прийняти будь-яку кількість аргументів і повернути їх суму.
# --hints--
Результатом `sum(0,1,2)` має бути 3
```js
assert(sum(0, 1, 2) === 3);
```
Результатом `sum(1,2,3,4)` має бути 10
```js
assert(sum(1, 2, 3, 4) === 10);
```
Результатом `sum(5)` має бути 5
```js
assert(sum(5) === 5);
```
Результатом `sum()` має бути 0
```js
assert(sum() === 0);
```
`sum` має бути функцією зі стрілкою, що використовує синтаксис параметру скидання (`...`) у параметрі `args`.
```js
assert(__helpers.removeWhiteSpace(code).match(/sum=\(\.\.\.args\)=>/));
```
# --seed--
## --seed-contents--
```js
const sum = (x, y, z) => {
const args = [x, y, z];
return args.reduce((a, b) => a + b, 0);
}
```
# --solutions--
```js
const sum = (...args) => {
return args.reduce((a, b) => a + b, 0);
}
```

84
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md Normal file
View File

@@ -0,0 +1,84 @@
---
id: 587d7b89367417b2b2512b48
title: Використовуйте спред оператор для оцінки аналізу масиву
challengeType: 1
forumTopicId: 301222
dashedName: use-the-spread-operator-to-evaluate-arrays-in-place
---
# --description--
ES6 представляє собою <dfn>spread operator</dfn>, який дозволяє розширювати масиви та інші елементи.
Код ES5 нижче використовує `apply()` для розрахунку максимального значення в масиві:
```js
var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr);
```
`maximus` повинен мати значення `89`.
Ми використали `Math.max.apply(null, arr)` тому що `Math.max(arr)` повертає `NaN`. `Math.max()` виконується через спільний аргумент, а не масив. Спред оператор робить синтаксис більш читабельним та зручним в обслуговуванні.
```js
const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr);
```
`maximus` повинен мати значення `89`.
`...arr` перетворюється в відкритий масив. Іншими словами, це *поширює* масив. Проте, спред оператор працює тільки всередині, як аргумент в функції або літери в масиві. Наступний код не буде працювати:
```js
const spreaded = ...arr;
```
# --instructions--
Скопіюйте весь вміст `arr1` в інший масив `arr2` використовуючи спред оператор.
# --hints--
Масив `arr2` має бути правильною копією `arr1`.
```js
assert(arr2.every((v, i) => v === arr1[i]) && arr2.length);
```
`...` спред оператор використовується для дублювання `arr1`.
```js
assert(code.match(/Array\(\s*\.\.\.arr1\s*\)|\[\s*\.\.\.arr1\s*\]/));
```
`arr2` має залишатися без змін, в той час як `arr1` було змінено.
```js
assert((arr1, arr2) => {
arr1.push('JUN');
return arr2.length < arr1.length;
});
```
# --seed--
## --seed-contents--
```js
const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
let arr2;
arr2 = []; // Change this line
console.log(arr2);
```
# --solutions--
```js
const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
let arr2;
arr2 = [...arr1];
```

94
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/write-arrow-functions-with-parameters.md Normal file
View File

@@ -0,0 +1,94 @@
---
id: 587d7b88367417b2b2512b44
title: Запис функції Arrow з параметрами
challengeType: 1
forumTopicId: 301223
dashedName: write-arrow-functions-with-parameters
---
# --description--
Так само, як і у звичайній функції, ви можете передавати аргументи в функцію Arrow.
```js
const doubler = (item) => item * 2;
doubler(4);
```
`doubler(4)` повинен перетворюватись на `8`.
Якщо функція arrow має один параметр, то дужки можуть бути опущені.
```js
const doubler = item => item * 2;
```
Функція може вміщати в себе більше одного аргументу.
```js
const multiplier = (item, multi) => item * multi;
multiplier(4, 2);
```
`multiplier(4, 2)` повинен перетворюватись на `8`.
# --instructions--
Перепишіть функцію `myConcat`, яка додає вміст `arr2` до `arr1`, щоб функція використовувала синтаксис функції arrow.
# --hints--
Вам слід замінити ключове слово `var`.
```js
(getUserInput) => assert(!getUserInput('index').match(/var/g));
```
`myConcat` має бути постійною змінною (використовуйте `const`).
```js
(getUserInput) => assert(getUserInput('index').match(/const\s+myConcat/g));
```
`myConcat` має бути функцією з 2 параметрами
```js
assert(
/myConcat=\(\w+,\w+\)=>/.test(code.replace(/\s/g, '')) &&
typeof myConcat === 'function'
);
```
`myConcat()` перетворюється на `[1, 2, 3, 4, 5]`.
```js
assert.deepEqual(myConcat([1, 2], [3, 4, 5]), [1, 2, 3, 4, 5]);
```
Не використовуйте ключове слово `function`.
```js
(getUserInput) => assert(!getUserInput('index').match(/function/g));
```
# --seed--
## --seed-contents--
```js
var myConcat = function(arr1, arr2) {
return arr1.concat(arr2);
};
console.log(myConcat([1, 2], [3, 4, 5]));
```
# --solutions--
```js
const myConcat = (arr1, arr2) => {
return arr1.concat(arr2);
};
console.log(myConcat([1, 2], [3, 4, 5]));
```

86
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/write-concise-declarative-functions-with-es6.md Normal file
View File

@@ -0,0 +1,86 @@
---
id: 587d7b8b367417b2b2512b50
title: Напишіть стислі декларативні функції за допомогою ES6
challengeType: 1
forumTopicId: 301224
dashedName: write-concise-declarative-functions-with-es6
---
# --description--
При визначенні функцій у об’єктах у ES5 ми маємо використовувати ключове слово `function` наступним чином:
```js
const person = {
name: "Taylor",
sayHello: function() {
return `Hello! My name is ${this.name}.`;
}
};
```
За допомогою ES6 ви можете взагалі видалити ключове слово `function` і двокрапку під час визначення функцій в об’єктах. Ось приклад такого синтаксису:
```js
const person = {
name: "Taylor",
sayHello() {
return `Hello! My name is ${this.name}.`;
}
};
```
# --instructions--
Реорганізуйте функцію `setGear` всередині об’єкта `bicycle`, щоб використати скорочений синтаксис, описаний вище.
# --hints--
Традиційні вираження функцій не повинні використовуватися.
```js
(getUserInput) => assert(!code.match(/function/));
```
`setGear` повинна бути декларативною функцією.
```js
assert(
typeof bicycle.setGear === 'function' && code.match(/setGear\s*\(.+\)\s*\{/)
);
```
`bicycle.setGear(48)` повинен змінити значення `gear` для 48.
```js
assert(new bicycle.setGear(48).gear === 48);
```
# --seed--
## --seed-contents--
```js
// Only change code below this line
const bicycle = {
gear: 2,
setGear: function(newGear) {
this.gear = newGear;
}
};
// Only change code above this line
bicycle.setGear(3);
console.log(bicycle.gear);
```
# --solutions--
```js
const bicycle = {
gear: 2,
setGear(newGear) {
this.gear = newGear;
}
};
bicycle.setGear(3);
```

75
curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md Normal file
View File

@@ -0,0 +1,75 @@
---
id: 587d7b8a367417b2b2512b4f
title: Давайте напишемо точні декларації об'єкта за допомогою Object Property Shorthand
challengeType: 1
forumTopicId: 301225
dashedName: write-concise-object-literal-declarations-using-object-property-shorthand
---
# --description--
ES6 надає гарну підтримку для легкого визначення літералів об'єкта.
Розглянемо наступний код:
```js
const getMousePosition = (x, y) => ({
x: x,
y: y
});
```
`getMousePosition` це проста функція, яка повертає об'єкт з двома властивостями. ES6 втілює синтаксичний цукор (синтаксичний прийом, який полегшує сприйняття тексту програми), щоб не доводилось багато писати `x: x`. Можна просто написати `x` один раз, і він конвертується у `x: x` (або еквівалент) автоматично. Ось та ж сама функція, переписана під новий синтаксис:
```js
const getMousePosition = (x, y) => ({ x, y });
```
# --instructions--
Скористайтеся скороченням властивостей об'єкта з його літералами, щоб створити і звернутися до об'єкта з такими властивостями: `name`, `age` і `gender`.
# --hints--
`createPerson("Zodiac Hasbro", 56, "male")` має стати `{name: "Zodiac Hasbro", age: 56, gender: "male"}`.
```js
assert.deepEqual(
{ name: 'Zodiac Hasbro', age: 56, gender: 'male' },
createPerson('Zodiac Hasbro', 56, 'male')
);
```
Ваш код не має містити `key:value`.
```js
(getUserInput) => assert(!getUserInput('index').match(/:/g));
```
# --seed--
## --seed-contents--
```js
const createPerson = (name, age, gender) => {
// Only change code below this line
return {
name: name,
age: age,
gender: gender
};
// Only change code above this line
};
```
# --solutions--
```js
const createPerson = (name, age, gender) => {
return {
name,
age,
gender
};
};
```