call-apply-decorators (#200)

Author: MykolaSopiha

1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md

@@ -1 +1 @@
-The wrapper returned by `spy(f)` should store all arguments and then use `f.apply` to forward the call.
+Обгортка, що повертається за допомогою `spy(f)`, повинна зберігати всі аргументи, а потім використовувати `f.apply`, щоб переадресувати виклик.

1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md

@@ -2,17 +2,17 @@ importance: 5
 
 ---
 
-# Spy decorator
+# Декоратор-шпигун
 
-Create a decorator `spy(func)` that should return a wrapper that saves all calls to function in its `calls` property.
+Створіть декоратор `spy(func)`, який повинен повернути обгортку, яка зберігає всі виклики функції у властивості `calls`.
 
-Every call is saved as an array of arguments.
+Кожен виклик зберігається як масив аргументів.
 
 For instance:
 
 ```js
 function work(a, b) {
-  alert( a + b ); // work is an arbitrary function or method
+  alert( a + b ); // працює як довільна функція або метод
 }
 
 *!*
@@ -23,8 +23,8 @@ work(1, 2); // 3
 work(4, 5); // 9
 
 for (let args of work.calls) {
-  alert( 'call:' + args.join() ); // "call:1,2", "call:4,5"
+  alert( 'виклик:' + args.join() ); // "виклик:1,2", "виклик:4,5"
 }
 ```
 
-P.S. That decorator is sometimes useful for unit-testing. Its advanced form is `sinon.spy` in [Sinon.JS](http://sinonjs.org/) library.
+P.S. Цей декоратор іноді корисний для unit-тестування. Його просунута форма -- `sinon.spy` у бібліотеці [Sinon.JS](http://sinonjs.org/).

1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md

@@ -1,4 +1,4 @@
-The solution:
+Рішення:
 
 ```js run demo
 function delay(f, ms) {
@@ -11,22 +11,22 @@ function delay(f, ms) {
 
 let f1000 = delay(alert, 1000);
 
-f1000("test"); // shows "test" after 1000ms
+f1000("тест"); // показує "тест" після 1000 мс
 ```
 
-Please note how an arrow function is used here. As we know, arrow functions do not have own `this` and `arguments`, so `f.apply(this, arguments)` takes `this` and `arguments` from the wrapper.
+Зверніть увагу, як тут використовується стрілочна функція. Як відомо, стрілочні функції не мають власних `this` та `arguments`, тому `f.apply(this, arguments)` бере `this` та `arguments` з обгортки.
 
-If we pass a regular function, `setTimeout` would call it without arguments and `this=window` (assuming we're in the browser).
+Якщо ми передамо звичайну функцію, `setTimeout` буде викликати її без аргументів, а `this=window` (припускаючи, що ми знаходимося в браузері).
 
-We still can pass the right `this` by using an intermediate variable, but that's a little bit more cumbersome:
+Ми все ще можемо передати право `this` за допомогою проміжної змінної, але це трохи більше громіздко:
 
 ```js
 function delay(f, ms) {
 
   return function(...args) {
-    let savedThis = this; // store this into an intermediate variable
+    let savedThis = this; // зберігаємо this в проміжну змінну
     setTimeout(function() {
-      f.apply(savedThis, args); // use it here
+      f.apply(savedThis, args); // використовуємо її тут
     }, ms);
   };
 

1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md

@@ -2,25 +2,25 @@ importance: 5
 
 ---
 
-# Delaying decorator
+# Затримуючий декоратор
 
-Create a decorator `delay(f, ms)` that delays each call of `f` by `ms` milliseconds.
+Створіть декоратор `delay(f, ms)`, яка затримує кожен виклик `f` на `ms` мілісекунд.
 
-For instance:
+Наприклад:
 
 ```js
 function f(x) {
   alert(x);
 }
 
-// create wrappers
+// створюємо обгортки
 let f1000 = delay(f, 1000);
 let f1500 = delay(f, 1500);
 
-f1000("test"); // shows "test" after 1000ms
-f1500("test"); // shows "test" after 1500ms
+f1000("тест"); // показує "test" після 1000 мс
+f1500("тест"); // показує "test" після 1500 мс
 ```
 
-In other words, `delay(f, ms)` returns a "delayed by `ms`" variant of `f`.
+Іншими словами, `delay(f, ms)` повертає варіант `f` з "затримкою на `ms`".
 
-In the code above, `f` is a function of a single argument, but your solution should pass all arguments and the context `this`.
+У коді вище, `f` є функцією одного аргументу, але ваше рішення повинно передавати всі аргументи та контекст `this`.

1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg

@@ -9,5 +9,5 @@ function debounce(func, ms) {
 
 ```
 
-A call to `debounce` returns a wrapper. When called, it schedules the original function call after given `ms` and cancels the previous such timeout.
+Виклик `debounce` повертає обгортку. Коли він викликається, він відкладає виклик оригінальної функції після даного `ms` і скасовує попередній подібний тайм-аут.
 

1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md

@@ -2,50 +2,50 @@ importance: 5
 
 ---
 
-# Debounce decorator
+# Декоратор debounce
 
-The result of `debounce(f, ms)` decorator is a wrapper that suspends calls to `f` until there's `ms` milliseconds of inactivity (no calls, "cooldown period"), then invokes `f` once with the latest arguments.
+Результат `debounce(f, ms)` декоратору -- це обгортка, що призупиняє виклики до `f`, поки не пройде `ms` мілісекунд бездіяльності (без викликів, "cooldown period"), а потім викликає `f` один раз з останніми аргументами.
 
-In other words, `debounce` is like a secretary that accepts "phone calls", and waits until there's `ms` milliseconds of being quiet. And only then it transfers the latest call information to "the boss" (calls the actual `f`).
+Іншими словами, `debounce` -- це як секретар, який приймає "телефонні дзвінки", і чекає, поки не закінчаться `ms` мілісекунди тиші. І лише тоді він передає останню інформацію про виклик до "боса" (викликає фактичну `f`).
 
-For instance, we had a function `f` and replaced it with `f = debounce(f, 1000)`.
+Наприклад, у нас була функція `f` і замінили її на `f = debounce(f, 1000)`.
 
-Then if the wrapped function is called at 0ms, 200ms and 500ms, and then there are no calls, then the actual `f` will be only called once, at 1500ms. That is: after the cooldown period of 1000ms from the last call.
+Тоді, якщо загорнута функція викликається при 0 мс, 200 мс та 500 мс, а потім викликів немає, то фактична `f` буде викликатися лише один раз, при 1500 мс. Тобто: після закінчення періоду 1000 мс від останнього виклику.
 
 ![](debounce.svg)
 
-...And it will get the arguments of the very last call, other calls are ignored.
+...І вона отримає аргументи самого останнього виклику, а інші виклики будуть ігноруватися.
 
-Here's the code for it (uses the debounce decorator from the [Lodash library](https://lodash.com/docs/4.17.15#debounce)):
+Ось код для цього (використовує декоратор debounce з [Lodash library](https://lodash.com/docs/4.17.15#debounce)):
 
 ```js
 let f = _.debounce(alert, 1000);
 
 f("a");
 setTimeout( () => f("b"), 200);
 setTimeout( () => f("c"), 500);
-// debounced function waits 1000ms after the last call and then runs: alert("c")
+// повернута з debounced функція чекає 1000 мс після останнього виклику, а потім запускає: alert("c")
 ```
 
-Now a practical example. Let's say, the user types something, and we'd like to send a request to the server when the input is finished.
+Тепер практичний приклад. Скажімо, користувач друкує щось, і ми хотіли б надіслати запит на сервер, коли ввід закінчиться.
 
-There's no point in sending the request for every character typed. Instead we'd like to wait, and then process the whole result.
+Немає сенсу надсилати запит на кожен набраний символ. Замість цього ми хотіли б почекати, а потім обробляти весь результат.
 
-In a web-browser, we can setup an event handler -- a function that's called on every change of an input field. Normally, an event handler is called very often, for every typed key. But if we `debounce` it by 1000ms, then it will be only called once, after 1000ms after the last input.
+У веббраузері ми можемо налаштувати обробник подій -- функцію, яка викликається при кожній зміні поля введення.Зазвичай, обробник подій викликається дуже часто, для кожного друкованого символу. Але якщо ми використаємо `debounce` на 1000 мс, то він буде викликатися лише один раз, через 1000 мс після останнього введення.
 
 ```online
 
-In this live example, the handler puts the result into a box below, try it:
+У цьому реальному прикладі обробник ставить результат у поле нижче, спробуйте це:
 
 [iframe border=1 src="debounce" height=200]
 
-See? The second input calls the debounced function, so its content is processed after 1000ms from the last input.
+Бачите? Другий ввід викликає функцію, що була повернута з `debounce`, тому цей вміст обробляється через 1000 мс з останнього введення.
 ```
 
-So, `debounce` is a great way to process a sequence of events: be it a sequence of key presses, mouse movements or something else.
+Отже, `debounce` -- це чудовий спосіб обробки послідовності подій: будь то послідовність натискання клавіш, рухів миші або щось інше.
 
-It waits the given time after the last call, and then runs its function, that can process the result.
+Він чекає певного часу після останнього дзвінка, а потім запускає свою функцію, яка може обробити результат.
 
-The task is to implement `debounce` decorator.
+Завдання полягає в тому, щоб реалізувати декоратор `debounce`.
 
-Hint: that's just a few lines if you think about it :)
+Підказка: Це лише кілька рядків, якщо ви думаєте про це :)