Function

Повне пояснення

Що це і навіщо

• Функція‑декларація (function foo() {}) створює іменовану функцію, що піднімається до початку блоку. Функціональний вираз (const bar = function() {}) створює анонімну функцію, що зберігається у змінній.

Ключові принципи/терміни

• Hoisting: декларації піднімаються, вирази — ні.
• Scope: обидва працюють у лексичному контексті, але доступність різна.

Як це працює

• Під час фазування парсера декларації розпізнаються і створюються в середовищі виконання. Вирази залишаються у коді і створюються лише під час виконання.

Практика та реалізація

• У випадку, коли потрібна рання доступність функції, використовуйте декларацію. Якщо потрібно передати функцію як аргумент або зберегти її у змінній, використовуйте вираз.

Тестування

• При написанні юніт‑тестів можна перевірити, що декларація доступна до виклику:

test('declaration hoisting', () => {
  expect(typeof foo).toBe('function');
});

• Для виразу треба викликати після оголошення:

test('expression after declaration', () => {
  const result = bar();
  expect(result).toBeDefined();
});

Оптимізація, типові помилки та edge cases

• Помилка «Cannot access 'bar' before initialization» виникає, коли викликають вираз до його оголошення.
• Декларація не піддається «temporal dead zone» і тому безпечніша для раннього виклику.

Диагностика та відладка

• Якщо функція не працює, перевірте порядок оголошень: декларація має бути доступна до виклику, вираз — після.
• Використовуйте console.log(typeof foo) і typeof bar для перевірки типу.

Часті помилки

1. Виклик виразу до оголошення → «ReferenceError».
2. Заміна декларації на вираз у глобальному контексті → «undefined».
3. Неочікуване підняття декларації у функційному блоці → «hoisting».
4. Перевантаження імені функції та змінної → «conflict».
5. Використання var замість const/let у виразі → «function expression hoisted».
6. Забудь про return у функціональному виразі → «undefined».
7. Неправильне використання this у анонімній функції → «wrong context».
8. Перевантаження глобального об’єкта Function → «security risk».

Повне пояснення

Що це і навіщо Анонімна функція (anonymous function) — блок коду, який не має імені. Вона дозволяє передавати логіку як значення, зберігати її у змінній або викликати одразу.

Ключові принципи

• Функція визначається як вираз, а не декларація.
• Може бути використана в колбеках, замиканнях, таймерах.
• Підтримується як традиційний синтаксис function, так і arrow‑функція.

Як це працює При створенні функціонального виразу JS‑рушій (V8) виділяє пам’ять для коду, а змінна отримує посилання на цей блок. Коли викликається, контекст this визначається за правилами колбеку.

Практика і реалізація

// Функціональний вираз
const multiply = function(x, y){ return x * y; };
// Arrow‑функція
const add = (x, y) => x + y;

Тестування

import { describe, it, expect } from 'vitest';
describe('anonymous functions', () => {
  it('should multiply correctly', () => {
    const fn = (a: number, b: number) => a * b;
    expect(fn(2, 3)).toBe(6);
  });
});

Оптимізація та edge cases

• У випадку великих замикань варто уникати зайвих зовнішніх залежностей.
• Arrow‑функції не мають власного this, що зменшує ризик помилок у колбеках.

Часті помилки

1. Використання function замість arrow‑функції в контексті, де потрібен лексичний this.
2. Забудова параметрів у функціональному виразі, що призводить до undefined.
3. Перевантаження змінної, що містить функцію, іншим типом.

Follow‑up питання

• Як працює замикання у анонімних функціях?
• Чому arrow‑функції не мають власного arguments об’єкта?

Повне пояснення

Що це і навіщо Arrow function (стрілкова функція) — коротка форма оголошення функцій у JavaScript/TypeScript, що забезпечує лексичне this і не створює власного контексту виконання. Використовується переважно в колбеках, реактивних підписах та однострочних обчисленнях.

Ключові принципи/терміни

• Лексичне this: значення береться з оточуючого блоку.
• Немає власного arguments, super, new.target.
• Підтримує implicit return для однострочних виразів.

Як це працює При створенні arrow function компілятор генерує функцію, яка захоплює this з зовнішнього контексту. Це означає, що внутрішня функція не змінює this, навіть якщо викликається як метод.

Практика і реалізація

// Класичний функціональний колбек
setTimeout(function(){ console.log(this); }, 1000);
// Arrow function з лексичним this
setTimeout(()=>{ console.log(this); }, 1000);

У React‑компонентах часто пишуть:

const handleClick = () => setCount(c=>c+1);

Тестування

import { describe, it, expect } from 'vitest';
describe('arrow function', () => {
  it('should preserve this', () => {
    const obj = { val: 42, getVal: () => this.val };
    expect(obj.getVal()).toBe(42);
  });
});

Особливості в контексті JS / TS Core

• Підтримка у всіх сучасних браузерах і Node.js.
• У TypeScript типи визначаються автоматично, але можна явно вказати: (a:number,b:number)=>number.

Оптимізація, типові помилки та edge cases

• Не використовуйте arrow function для конструктора, бо new не працює.
• У циклі forEach arrow function зберігає зовнішнє this, що може бути корисним, але іноді треба явно прив’язати контекст.

Диагностика і отладка

• Якщо this не відповідає очікуваному, перевірте чи використовується arrow function.
• Для колбеків у бібліотеках, що очікують this, використовуйте звичайну функцію або .bind(this).

Часті помилки

1. Використання arrow function як конструктора.
2. Очікування arguments у arrow function.
3. Неправильне розуміння лексичного this у вкладених функціях.
4. Забудова implicit return при використанні блоку {}.
5. Перетворення arrow function у метод класу без bind.
6. Втрата контексту при передачі колбеку в сторонні API, що очікують this.
7. Неправильне використання arrow function у setTimeout з параметром this.
8. Змішування arrow function і new.target у модульних функціях.

Повне пояснення

Що це і навіщо IIFE (Immediately Invoked Function Expression) – самовикликаючася функція, що створює новий лексичний контекст. Використовується для ізоляції змінних, запобігання колізій у глобальному просторі та виконання коду одразу після оголошення.

Ключові принципи/терміни

• Scope – локальний контекст, створений функцією.
• Execution – негайне виконання після оголошення.
• Closure – доступ до зовнішніх змінних, якщо потрібен.

Як це працює

1. Функція оголошується як вираз.
2. Після оголошення додається () для негайного виклику.
3. Код всередині функції виконується у власному scope, після чого він зникає.

Практика і реалізація

(function(){
  const secret = 'hidden';
  console.log(secret);
})();

У TypeScript можна додати типи:

(() => {
  const count: number = 0;
  console.log(count);
})();

Тестування Для перевірки, що IIFE не створює глобальних змінних, можна використати Jest:

test('IIFE does not leak globals', () => {
  expect(() => { globalThis.secret }).toThrow();
});

Особливості в контексті JS/TS Core

• Підтримується у всіх сучасних браузерах і Node.js.
• Часто використовується в старих бібліотеках, де ES6 modules недоступні.
• У сучасному коді замінюється на модулярність (ESM, CommonJS).

Оптимізація та edge cases

• Якщо функція містить довгий код, варто розбити її на окремі модулі.
• У випадку використання eval всередині IIFE, код все одно виконується у локальному scope.

Часті помилки

1. Забути () після оголошення → функція не виконується.
2. Використовувати var замість let/const → колізії у локальному scope.
3. Не враховувати, що IIFE створює новий контекст, тому внутрішні змінні не доступні зовні.

Cheatsheet

• Оголошення: (function(){ … })();
• TypeScript: (() => { … })();
• Підтримка: ES5+, Node.js 4+.

Повне пояснення

Що це і навіщо Hoisting – механізм, що дозволяє JavaScript‑рушію «підняти» декларації до початку блоку, що полегшує доступ до функцій і змінних var у будь‑якому місці коду.

Ключові принципи/терміни

• declaration – оголошення (var, let, const, function)
• execution context – контекст виконання
• temporal dead zone (TDZ) – період, коли let/const недоступні
• hoisted entity – переміщена декларація

Як це працює

1. Під час створення execution context JavaScript‑рушій проходить через фазу creation.
2. У цій фазі збирає всі декларації функцій і змінних var, розміщуючи їх у верхній частині блоку.
3. Для функцій створюється повний function object; для var – лише змінна з початковим значенням undefined.
4. Після завершення фази creation запускається фаза execution, де виконуються інструкції.

Практика і реалізація

var a;
console.log(a); // undefined – hoisted declaration
function foo() { return 42; }
console.log(foo()); // 42 – hoisted function

let b = 10;
// console.log(b); // ReferenceError: Cannot access 'b' before initialization

Тестування

• Unit: перевірка, що функція доступна перед викликом.

test('foo hoisted', () => {
  expect(typeof foo).toBe('function');
});

• Integration: перевірка, що var‑змінна не викликає помилки.

Особливості в контексті JS/TS Core

• У TypeScript типи не змінюють поведінку hoisting; лише синтаксис var/let/const визначає його.
• При використанні export декларації функцій також підлягають hoisting у модулі.

Оптимізація, типові помилки та edge cases

• Не використовуйте var у нових проектах; він піддається непередбачуваним побічним ефектам.
• Помилки TDZ часто виникають, коли намагаються звернутися до let/const перед їх оголошенням.
• Функції, оголошені як arrow functions (const fn = () => {}), не підлягають hoisting.

Диагностика і отладка

• Якщо отримуєте ReferenceError: Cannot access 'x' before initialization, перевірте, чи не використовується let/const перед оголошенням.
• Якщо undefined повертається замість очікуваного значення, перевірте, чи не оголошено змінну через var і чи присвоєння відбувається після використання.

Часті помилки

1. Виклик функції, оголошеної arrow‑функцією, до її декларації.
2. Застосування var у глобальному просторі, що створює глобальні змінні.
3. Змішування var і let/const у одному блоці без чіткого розуміння їх поведінки.

Cheatsheet

• var – hoisted, value = undefined.
• let/const – not hoisted, TDZ.
• Function declarations – fully hoisted.
• Arrow functions (const fn = () => {}) – not hoisted.

Follow‑up питання

• Як впливає hoisting на модульні системи (ESM, CommonJS)?
• Чому варто уникати var у сучасному JavaScript?

Повне пояснення

1. Що це і навіщо Замикання (closure) — механізм, що дозволяє функції «запам’ятовувати» контекст виконання. Це корисно для створення приватних даних, фабрик функцій і оптимізації через мемоізацію.

2. Ключові принципи/терміни

   • scope – лексичний контекст, у якому оголошено змінну.
   • hoisting – підняття декларацій, що впливає на доступність.
   • this у замиканні залишається прив’язаним до зовнішньої функції, якщо не використано bind/arrow.

3. Як це працює Коли внутрішня функція повертається, вона зберігає посилання на об’єкт Environment Record, що містить всі локальні змінні зовнішньої функції. Після завершення виконання зовнішньої функції цей об’єкт не видаляється, бо на нього посилаються замикання.

4. Практика і реалізація

   // Фабрика логера з приватним рівнем
   function createLogger(level: string) {
     const prefix = `[${level}]`;
     return (msg: string) => console.log(prefix, msg);
   }
   const info = createLogger('INFO');
   info('Запуск сервера'); // [INFO] Запуск сервера
   

   // Меморизація функції
   const memo = (fn) => {
     const cache = new Map();
     return (...args) => {
       const key = JSON.stringify(args);
       if (cache.has(key)) return cache.get(key);
       const result = fn(...args);
       cache.set(key, result);
       return result;
     };
   };
   const fib = memo((n) => (n < 2 ? n : fib(n - 1) + fib(n - 2)));
   

5. Тестування Unit – перевірка, що замикання зберігає стан:

   test('counter preserves state', () => {
     const counter = createCounter();
     expect(counter()).toBe(1);
     expect(counter()).toBe(2);
   });
   

6. Дизайн‑решення

   • Використовувати замикання для створення приватних полів у класах, коли #private недоступний.
   • У React hooks замикання допомагає зберігати попереднє значення у useRef.

7. Оптимізація, типові помилки

   • Перевантаження пам’яті: великі замикання з великими об’єктами можуть утримувати зайві дані.
   • this‑проблеми: arrow functions або bind потрібні, коли контекст важливий.

8. Часті помилки

   • Неочікуваний доступ до змінної після її видалення: замикання зберігає посилання, тому змінна не стирається.
   • Застосування замикання в циклі без let/const: всі функції отримують одне й те саме значення.

9. Cheatsheet

   • const fn = () => {} – arrow, зберігає this.
   • function fn() {} – звичайна функція, this залежить від виклику.
   • const counter = () => { let i=0; return () => ++i; } – простий приклад приватного стану.

10. Follow‑up питання

• Як замикання впливають на збірку сміття в V8?
• Чому setTimeout(() => console.log(i), 1000) в циклі може вестися неочікувано без let?

Повне пояснення

Що це і навіщо Замикання (closure) — механізм, який дозволяє внутрішній функції доступатися до змінних зовнішньої. Це корисно для

• створення приватних полів;
• фабрик функцій;
• обробки асинхронних колбеків.

Ключові принципи

• Функція створюється в контексті іншої функції.
• Внутрішня функція зберігає лексичне середовище.
• Змінні не видаляються, поки існує посилання на функцію.

Як це працює При виклику зовнішньої функції створюється новий лексичний контекст. Якщо внутрішня функція повертається, вона зберігає посилання на цей контекст. Після завершення зовнішньої функції, її локальні змінні не видаляються, бо вони «захоплені» замиканням.

Практика і реалізація

function makeCounter() {
  let count = 0;
  return function () { // замикання
    return ++count;
  };
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

У TypeScript типи автоматично підказуються, але можна явно вказати:

function makeAdder(x: number) {
  return (y: number): number => x + y; // замикання
}

Тестування

import { describe, it, expect } from 'vitest';

describe('closure counter', () => {
  it('increments correctly', () => {
    const c = makeCounter();
    expect(c()).toBe(1);
    expect(c()).toBe(2);
  });
});

Особливості в контексті JS / TS Core

• Замикання працюють з будь‑якими типами даних, включаючи об’єкти та функції.
• У ES6+ можна використовувати let/const, що забезпечує блочну область видимості.
• Під час дебагу важливо розуміти, що змінні в замиканні живуть довше.

Оптимізація та edge cases

• Не створюйте зайвих замикань у циклах без потреби, це може призвести до витоку пам’яті.
• Якщо замикання використовує великі об’єкти, розгляньте WeakMap для зберігання.

Часті помилки

1. Очікування, що змінна буде «свіжою» після виклику зовнішньої функції.
2. Використання var замість let/const, що призводить до неочікуваних результатів.
3. Забудова замикання в асинхронних колбеках, що викликає «запізнаний» доступ.

Cheatsheet

• function outer() { let a = 1; return function inner() { console.log(a); }; }
• const fn = outer(); fn(); // 1

Follow‑up питання

• Як замикання впливають на збірку пам’яті?
• Чи можна створити «мутоване» замикання, і що це означає?

Повне пояснення

Що це і навіщо

Рекурсія — механізм, коли функція викликає саму себе. Це корисно для задач, що мають ітеративну структуру: дерев’яні об’єкти, графи, пошук у бінарному дереві тощо.

Ключові принципи

• Базовий випадок (base case) – умова, при якій рекурсія завершується.
• Рекурсивний крок – виклик функції з новим аргументом, що наближає до базового випадку.
• Стек викликів – кожен рекурсивний виклик додає новий кадр до call stack.

Як це працює

1. Функція перевіряє базовий випадок.
2. Якщо умова не виконана, виконується рекурсивний крок і функція знову викликає саму себе.
3. Коли базовий випадок досягається, стек розпаковується, повертаючи значення.

Практика і реалізація

JavaScript / TypeScript

function factorial(n: number): number {
  return n <= 1 ? 1 : n * factorial(n - 1);
}

function sumArray(arr: number[], idx = 0): number {
  if (idx >= arr.length) return 0;
  return arr[idx] + sumArray(arr, idx + 1);
}

Тестування

import { describe, it, expect } from 'vitest';

describe('factorial', () => {
  it('returns 120 for 5', () => {
    expect(factorial(5)).toBe(120);
  });
});

Оптимізація

• Тейл‑рекурсія (tail recursion) дозволяє компілятору оптимізувати стек, але в JavaScript це ще не підтримується.
• Мемоізація зменшує кількість повторних обчислень, особливо у функціях Фібоначчі.

Часті помилки

1. Відсутність базового випадку → StackOverflowError.
2. Неправильна зміна аргументу → нескінченний цикл.
3. Перевищення глибини рекурсії у великих даних → використання ітераційного підходу.

Дизайн‑рішення

• Для обчислення великих факторіалів використовуйте BigInt.
• У випадку обходу графа застосуйте DFS рекурсивно, але з обмеженням глибини.

Cheatsheet

• Базовий випадок: if (condition) return value;
• Рекурсивний крок: return expression + recursiveCall(newArg);
• Мемоізація:

const memo = new Map();
function fib(n: number): number {
  if (memo.has(n)) return memo.get(n)!;
  const result = n < 2 ? n : fib(n - 1) + fib(n - 2);
  memo.set(n, result);
  return result;
}

Follow‑up питання

• Як обмежити глибину рекурсії у JavaScript?
• Чому tail recursion не працює в сучасних браузерах?

Повне пояснення

Що це і навіщо

• this — ключове слово, що посилається на об’єкт, у контексті якого виконується код. Воно дозволяє доступ до властивостей і методів цього об’єкта.

Ключові принципи

• У звичайних функціях this визначається під час виклику: глобальний об’єкт у браузері, window/global, або об’єкт, що викликав функцію.
• У класах this завжди посилається на екземпляр класу, що створює об’єкт.
• У стрілкових функціях (=>) this не створюється, а береться з лексичного оточення.

Як це працює

• При виклику obj.method() JavaScript встановлює this = obj перед виконанням тіла функції.
• Якщо функція викликається без об’єкта (func()), this в режимі нестрогого режиму стає глобальним об’єктом, а у строгому — undefined.

Практика і реалізація

class Person {
  constructor(name) { this.name = name; }
  greet() { console.log(`Hi, ${this.name}`); }
}
const p = new Person('Anna');
p.greet(); // Hi, Anna

const obj = { value: 42, get() { return this.value; } };
console.log(obj.get()); // 42

const arrow = () => console.log(this);
arrow(); // this from surrounding scope

Тестування

• У Jest можна перевірити контекст, використовуючи мок-функції:

const mock = jest.fn();
obj.method = mock;
obj.method();
expect(mock).toHaveBeenCalledWith(expect.objectContaining({ name: 'Anna' }));

Особливості в контексті JS/TS Core

• У TypeScript можна явно типізувати this у функціях: function foo(this: HTMLElement) { … }.
• У React‑компонентах класових компонентів this прив’язується до екземпляру компонента, що дозволяє використовувати this.state і this.setState.

Оптимізація та типові помилки

• Не використовуйте this у функціях, що передаються як колбеки без прив’язки (bind, arrow function) — це призведе до undefined.
• У строгому режимі ('use strict';) виклик функції без об’єкта повертає undefined, що допомагає уникнути небажаних глобальних змінних.

Диагностика

• Якщо this не відповідає очікуваному об’єкту, перевірте спосіб виклику функції (метод, колбек, arrow function) і використайте bind або стрілкову функцію.

Часті помилки

1. Виклик методу як колбек без прив’язки → this стає undefined.
2. Використання this у функції, що оголошена як arrow → береться з зовнішнього контексту.
3. Зміна this у строгому режимі → помилка.
4. Неочікуваний глобальний this у браузері → небезпечне використання.
5. Перевантаження this у класах без правильного конструктору.
6. Втрата контексту при передачі методу у setTimeout → використайте bind.
7. Неправильне типізування this у TS → помилки компіляції.
8. Зміна this через call/apply без необхідності → заплутаність коду.

Повне пояснення

Що це і навіщо

Втрата контексту – явище, коли в момент виконання функції значення this не збігається з об’єктом, у якому вона була оголошена. Це часто призводить до помилок типу Cannot read property 'x' of undefined.

Ключові принципи/терміни

• this – контекст виконання
• callback – функція, передана як аргумент
• bind, call, apply – методи прив’язки контексту
• arrow function – лямбда, що захоплює this з зовнішнього блоку

Як це працює Коли функція передається без прив’язки, JavaScript встановлює this як глобальний об’єкт (в браузері – window) або undefined у strict mode. Якщо функція очікує доступ до полів об’єкта, результат – помилка.

Практика і реалізація

const obj = {
  x: 42,
  show(){ console.log(this.x); }
};

// Втрата контексту
setTimeout(obj.show, 0); // → TypeError: Cannot read property 'x' of undefined

// Запобігання через bind
setTimeout(obj.show.bind(obj), 0); // → 42

// Запобігання через arrow‑функцію
setTimeout(() => obj.show(), 0); // → 42

Тестування У Jest можна перевірити, що this прив’язано:

test('bind preserves this', () => {
  const obj = { val: 1, fn() { return this.val; } };
  const bound = obj.fn.bind(obj);
  expect(bound()).toBe(1);
});

Оптимізація, типові помилки та edge cases

• Не забувайте про use strict – у ньому this буде undefined, що допомагає виявити помилки.
• У React‑компонентах класів використовуйте this.handleClick = this.handleClick.bind(this) у конструкторі або arrow‑функції.
• У функціональних компонентах useCallback з правильним списком залежностей запобігає зайвим ре‑прив’язкам.

Часті помилки

1. Передача методу без bind у setInterval.
2. Використання this в arrow‑функції, коли треба контекст класу.
3. Забудьте про useCallback у React – створюється нова функція щоразу.

Cheatsheet

• bind(obj) – створює нову функцію з прив’язаним this.
• Arrow‑функція – захоплює this з зовнішнього блоку.
• У strict mode this у звичайній функції – undefined.

Follow‑up питання

• Як працює call і apply?
• Чому arrow‑функції не мають власного this?

Повне пояснення

Що це і навіщо

• Методи bind, call та apply дозволяють явно встановити контекст (this) при виконанні функції. Це корисно, коли потрібно передати метод об’єкта як колбек або змінити контекст у функціях, що працюють із this.

Ключові принципи/терміни

• bind(thisArg, ...args) повертає нову функцію з прив’язаним контекстом thisArg і попередньо заданими аргументами.
• call(thisArg, arg1, arg2, ...) викликає функцію одразу з контекстом thisArg і списком аргументів.
• apply(thisArg, argsArray) викликає функцію одразу з контекстом thisArg і масивом аргументів.

Як це працює

• При виклику bind створюється замикання, яке зберігає посилання на оригінальну функцію і контекст. Коли нова функція викликається, вона передає збережений this і аргументи до оригіналу.
• call та apply працюють одразу: вони змінюють контекст виконання функції на момент виклику.

Практика і реалізація

const obj = { value: 42, get() { return this.value; } };
const boundGet = obj.get.bind(obj); // new function
console.log(boundGet()); // 42

function sum(a, b) { return a + b; }
sum.call(null, 1, 2); // 3
sum.apply(null, [3, 4]); // 7

Тестування

• У Jest можна перевірити контекст:

test('bind preserves this', () => {
  const obj = { x: 10, fn() { return this.x; } };
  const fn = obj.fn.bind(obj);
  expect(fn()).toBe(10);
});

Особливості в контексті JS/TS Core

• У TypeScript типи this можна явно оголосити, що допомагає уникнути помилок при використанні bind.
• У функціях, що не використовують this, ці методи надлишкові.

Оптимізація, типові помилки та edge cases

• bind створює нову функцію, що може впливати на пам’ять при великій кількості викликів.
• apply приймає масив, тому при великому кількості аргументів варто розглянути call.
• Якщо передати null або undefined як thisArg, контекст буде встановлено на глобальний об’єкт (Node.js – global, браузер – window).

Повне пояснення

Що це і навіщо Currying дозволяє створювати частково застосовані функції, що полегшує композицію та повторне використання коду. Це корисно в функціональному стилі, коли потрібна гнучкість у передачі параметрів.

Ключові принципи

• Функція повертає іншу функцію, яка приймає наступний аргумент.
• Кожна повернута функція може бути викликана окремо, зберігаючи контекст.
• Працює лише з синхронними функціями, але можна комбінувати з промісами.

Як це працює

1. Вхідна функція приймає перший аргумент і повертає нову функцію.
2. Новий виклик приймає другий аргумент і повертає результат або ще одну функцію.
3. Процес повторюється, доки не будуть передані всі аргументи.

Практика і реалізація (JavaScript / TypeScript)

// Currying у TS з типами
function curry<A, B, C>(fn: (a: A, b: B) => C): (a: A) => (b: B) => C {
  return a => b => fn(a, b);
}
const multiply = (x: number, y: number) => x * y;
const curriedMultiply = curry(multiply);
const timesThree = curriedMultiply(3);
console.log(timesThree(4)); // 12

Тестування

import { describe, it, expect } from 'vitest';
describe('curry', () => {
  it('should return a curried function', () => {
    const add = (a: number, b: number) => a + b;
    const curriedAdd = curry(add);
    expect(curriedAdd(2)(3)).toBe(5);
  });
});

Оптимізація та edge cases

• Якщо функція приймає більше аргументів, можна розширити curry для довільної кількості.
• Для асинхронних функцій можна використовувати async/await у внутрішніх функціях.

Часті помилки

1. Забудьте про контекст this у класах – використовуйте arrow-функції.
2. Не передавайте undefined як аргумент, якщо функція не очікує.
3. Перевірте, що типи аргументів збігаються з очікуваними.

Follow‑up питання

• Як currying відрізняється від partial application?
• Чи можна застосувати currying до функцій, що повертають проміси?

Повне пояснення

Що це і навіщо Мемоізація зберігає результати функції у кеші, що дозволяє швидко повернути значення при повторному виклику з тими ж аргументами. Це корисно для дорогих обчислень, рекурсивних алгоритмів (наприклад, факторіал), або при рендерингу компонентів у React.

Ключові принципи

• Кеш зберігається у Map або об’єкті.
• Аргументи функції перетворюються у ключ (часто через JSON.stringify).
• Якщо ключ існує, повертається кешований результат.

Як це працює

1. Функція memoized приймає іншу функцію fn.
2. Створюється локальний кеш Map.
3. Повертається нова функція, що перевіряє кеш перед викликом fn.

Практика і реалізація

const memoized = <T extends (...args: any[]) => any>(fn: T): T => {
  const cache = new Map<string, ReturnType<T>>();
  return ((...args: Parameters<T>) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key) as ReturnType<T>;
    const result = fn(...args);
    cache.set(key, result);
    return result;
  }) as T;
};

const heavyCalc = (x: number) => { /* дорогий код */ return x * 2; };
const memoHeavy = memoized(heavyCalc);

Тестування

import { describe, it, expect } from 'vitest';
describe('memoized', () => {
  it('caches results', () => {
    const fn = jest.fn((x) => x + 1);
    const memoFn = memoized(fn);
    expect(memoFn(5)).toBe(6);
    expect(memoFn(5)).toBe(6); // не викликає fn
    expect(fn).toHaveBeenCalledTimes(1);
  });
});

Коли застосовувати

• Дорогі обчислення (алгоритми, запити до API).
• Функції з ідемпотентними результатами.
• Рендеринг компонентів, що залежать від стабільних пропсів (React useMemo).

Переваги

• Зменшує час виконання.
• Підвищує продуктивність UI.

Недоліки

• Додає пам’яті для кешу.
• Потрібно обробляти випадки зміни аргументів (наприклад, об’єктів з новими властивостями).

Повне пояснення

Що це і навіщо

Чейнінг функцій (method chaining) — патерн, що дозволяє викликати кілька методів послідовно, кожен з яких повертає об’єкт, що дозволяє продовжувати ланцюг. Це зменшує кількість проміжних змінних і робить код більш читабельним.

Ключові принципи

• Кожен метод повертає this (або інший об’єкт), що дозволяє продовжувати виклик.
• Підходить для API, які модифікують стан об’єкта або збирають результати.

Як це працює

1. Викликається перший метод на об’єкті.
2. Метод повертає сам об’єкт (або новий), що дозволяє викликати наступний.
3. Процес повторюється, доки не завершиться ланцюг.

Практика і реалізація (JavaScript/TypeScript)

class Builder {
  private value = 0;
  add(n: number) { this.value += n; return this; }
  mul(n: number) { this.value *= n; return this; }
  getResult() { return this.value; }
}
const result = new Builder().add(5).mul(3).getResult(); // 15

Тестування

import { describe, it, expect } from 'vitest';
describe('Builder', () => {
  it('chains correctly', () => {
    const res = new Builder().add(2).mul(4).getResult();
    expect(res).toBe(8);
  });
});

Оптимізація та edge cases

• Переконайтеся, що методи не повертають undefined або інший тип.
• Якщо потрібен новий об’єкт, поверніть його замість this.

Часті помилки

1. Забуваєте повернути this → ланцюг розривається.
2. Метод змінює стан, але повертає новий об’єкт → неочікувані результати.
3. Використання асинхронних методів без await → ланцюг не працює.

Cheatsheet

• return this; → продовжити ланцюг.
• getResult() або інший «getter» → завершити ланцюг і отримати результат.
• Для асинхронних операцій використовуйте async/await у кожному методі.

Повне пояснення

Що це і навіщо

• function – традиційний спосіб оголошення функції, підтримує hoisting і власне this.
• Arrow function – компактний синтаксис, захоплює зовнішнє this, не створює власного контексту, підходить для колбеків і лямбда-операцій.

Ключові принципи/терміни

• this binding: у функції – динамічний, у arrow – лексичний.
• Hoisting: function hoisted; arrow не hoisted, треба оголосити перед використанням.
• Параметри: arrow може опускати круглі дужки при одному параметрі.

Як це працює

• При виклику function створюється новий контекст виконання, що включає власне this.
• Arrow function просто копіює значення this з оточуючого блоку, тому не створює новий контекст.

Практика і реалізація

• У React‑компонентах класові методи часто переписують на arrow, щоб уникнути bind(this).
• У Redux‑middleware або async/await колбеках arrow забезпечує чистий синтаксис.

Тестування

• При Jest можна перевірити поведінку this:

test('function this', () => {
  function f(){ return this.x; }
  const obj = {x:1, f};
  expect(obj.f()).toBe(1);
});

test('arrow this', () => {
  const f = () => this.x;
  const obj = {x:1, f};
  expect(obj.f()).toBeUndefined(); // arrow не береться
});

Оптимізація, типові помилки та edge cases

• Не використовувати arrow для конструктора (new), бо this не буде прив’язаний.
• У випадку колбеків, що потребують this, залишайте звичайну функцію.
• Перевіряйте hoisting: оголошення arrow після виклику призведе до ReferenceError.

Часті помилки

1. Виклик arrow як конструктора → TypeError.
2. Очікування hoisting для arrow → ReferenceError.
3. Неправильне використання this у колбеку → undefined.
4. Забудьте про круглі дужки при одному параметрі, що може спричинити синтаксичну помилку.

Cheatsheet

• function foo(){} – hoisted, own this.
• const foo = () => {} – не hoisted, лексичний this.
• const foo = (a,b)=>a+b – короткий синтаксис.

Follow‑up питання

• Як arrow function працює з arguments?
• Чому arrow не можна використовувати як метод у класі, якщо потрібен this?