JavaScript · Синтаксис · Продвинутый уровень

Замыкания и область видимости

10 задач

Лексическая область, замыкания, приватное состояние и паттерны замыканий

Краткое введение в тему и пояснения перед упражнениями (упражнения ниже):

Замыкания, лексическая область и баг в цикле

#
**Что такое замыкание?** Замыкание — это функция которая *помнит* переменные из своей внешней области даже после того как внешняя функция вернулась. В JavaScript каждая функция создаёт замыкание над scope где она была определена: ```js function makeGreeter(greeting) { // 'greeting' находится в scope makeGreeter return function(name) { // внутренняя функция замыкается над 'greeting' — оно всё ещё доступно return `${greeting}, ${name}!`; }; } const sayHello = makeGreeter('Hello'); const sayHi = makeGreeter('Hi'); sayHello('Alice'); // 'Hello, Alice!' — greeting всё ещё 'Hello' sayHi('Bob'); // 'Hi, Bob!' — отдельное замыкание, greeting это 'Hi' ``` Каждый вызов `makeGreeter` создаёт *новое* замыкание с собственным `greeting`. Замыкания не разделяются — каждое захватывает свою копию внешней области. **Лексическая область — scope определяется при написании, не при вызове** JavaScript использует *лексическое* (статическое) определение scope: область видимости функции определяется там где она *написана* в коде, а не откуда она *вызывается*: ```js const x = 'global'; function outer() { const x = 'outer'; function inner() { console.log(x); // 'outer' — определено при написании } return inner; } const fn = outer(); fn(); // 'outer' — даже если вызывается из глобального scope ``` **Классический баг в цикле — `var` vs `let`** `var` имеет область видимости функции; все итерации цикла `for` разделяют один `i`. К тому моменту как callbacks срабатывают, цикл уже завершился и `i` равен конечному значению: ```js // БАГ с var: for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); // логирует 3, 3, 3 } // ИСПРАВЛЕНИЕ 1: использовать let (block-scoped — каждая итерация получает свой i): for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); // логирует 0, 1, 2 } // ИСПРАВЛЕНИЕ 2: IIFE чтобы захватить i для каждой итерации (паттерн до ES6): for (var i = 0; i < 3; i++) { (function(j) { setTimeout(() => console.log(j), 0); })(i); } ```

Приватное состояние, once и memoize паттерны

#
**Замыкание для приватного состояния — модульный паттерн** ```js function makeBankAccount(initial) { let balance = initial; // приватная — не на возвращённом объекте return { deposit(amount) { balance += amount; return balance; }, withdraw(amount) { if (amount > balance) throw new Error('Insufficient funds'); balance -= amount; return balance; }, getBalance() { return balance; }, }; } const acc = makeBankAccount(100); acc.deposit(50); // 150 acc.balance; // undefined — истинно приватная ``` **`once` — выполнить ровно один раз** ```js function once(fn) { let called = false; let result; return function(...args) { if (!called) { called = true; result = fn(...args); } return result; }; } ``` **`memoize` — кэшировать результаты** ```js function memoize(fn) { const cache = new Map(); return function(...args) { const key = JSON.stringify(args); if (!cache.has(key)) cache.set(key, fn(...args)); return cache.get(key); }; } ```

partial, debounce, compose/pipe и справочник паттернов замыканий

#
**`partial` — предварительно заполнить аргументы** ```js function partial(fn, ...presetArgs) { return function(...laterArgs) { return fn(...presetArgs, ...laterArgs); }; } const double = partial((a, b) => a * b, 2); double(5); // 10 ``` **`debounce` — задержать до остановки вызовов** ```js function debounce(fn, delay) { let timerId; return function(...args) { clearTimeout(timerId); timerId = setTimeout(() => fn(...args), delay); }; } ``` **`compose` / `pipe` — цепочка функций** ```js const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x); const process = pipe( s => s.trim(), s => s.toLowerCase(), s => s.replace(/\s+/g, '-'), ); process(' Hello World '); // 'hello-world' ``` **Справочник — паттерны замыканий** | Паттерн | Что замыкает | Для чего | |---|---|---| | Счётчик | мутабельный `count` | сохранение состояния | | Приватное состояние | переменные данных | инкапсуляция | | `once` | флаг `called` + `result` | одноразовая инициализация | | `memoize` | Map кэша | дорогие чистые функции | | `partial` | начальные аргументы | специализация функций | | `debounce` | `timerId` | ограничение частоты событий |

Упражнения:

01

Реализуйте счётчик на основе замыкания

#

Реализуйте `makeCounter()` возвращающий объект с методами `increment()`, `decrement()`, `reset()` и `value()`. Состояние счётчика должно быть приватным — недоступным напрямую на возвращённом объекте.

function makeCounter() {
  // return object with increment, decrement, reset, value
}
Решение 
function makeCounter() {
  let count = 0;
  return {
    increment() { return ++count; },
    decrement() { return --count; },
    reset()     { count = 0; },
    value()     { return count; },
  };
}

const c = makeCounter();
c.increment(); // 1
c.increment(); // 2
c.decrement(); // 1
c.value();     // 1
c.reset();
c.value();     // 0
02

Исправьте баг замыкания в цикле с var

#

Код ниже логирует `3, 3, 3` вместо `0, 1, 2`. Объясните почему, и предоставьте два исправления: одно с `let`, одно с IIFE.

// This logs 3, 3, 3 — fix it to log 0, 1, 2
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
Решение 
// Fix 1: use let (each iteration gets its own block-scoped i)
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); // 0, 1, 2
}

// Fix 2: IIFE to capture i per iteration
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(() => console.log(j), 0);
  })(i);
}
03

Реализуйте функцию высшего порядка once()

#

Реализуйте `once(fn)` возвращающую функцию-обёртку. Обёртка вызывает `fn` только при первом вызове, затем возвращает кэшированный результат без повторного вызова `fn`.

function once(fn) {
  // fn should only be called the first time
  // subsequent calls return the cached result
}
Решение 
function once(fn) {
  let called = false;
  let result;
  return function(...args) {
    if (!called) {
      called = true;
      result = fn(...args);
    }
    return result;
  };
}

const init = once(() => { console.log('initialising'); return 42; });
init(); // logs 'initialising', returns 42
init(); // returns 42, no log
04

Реализуйте memoize()

#

Реализуйте `memoize(fn)` возвращающую мемоизированную версию `fn`. При первом вызове с данными аргументами результат вычисляется и кэшируется. При последующих вызовах с теми же аргументами возвращается кэшированное значение.

function memoize(fn) {
  // cache results keyed by arguments
}
Решение 
function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (!cache.has(key)) {
      cache.set(key, fn(...args));
    }
    return cache.get(key);
  };
}

const slowSquare = memoize(n => { console.log('computing'); return n * n; });
slowSquare(5); // 'computing' → 25
slowSquare(5); // → 25 (no log, from cache)
slowSquare(6); // 'computing' → 36
05

Реализуйте частичное применение

#

Реализуйте `partial(fn, ...presetArgs)` возвращающую новую функцию с предварительно заполненными `presetArgs`. При вызове возвращённой функции с дополнительными аргументами они добавляются после preset-аргументов.

function partial(fn, ...presetArgs) {
  // return a function with presetArgs pre-filled
}
Решение 
function partial(fn, ...presetArgs) {
  return function(...laterArgs) {
    return fn(...presetArgs, ...laterArgs);
  };
}

const multiply = (a, b) => a * b;
const double   = partial(multiply, 2);
const triple   = partial(multiply, 3);

double(5);  // 10
triple(5);  // 15

const greet = (greeting, name) => `${greeting}, ${name}!`;
const sayHi = partial(greet, 'Hi');
sayHi('Alice'); // 'Hi, Alice!'
06

Создайте банковский счёт с приватным балансом

#

Реализуйте `makeBankAccount(initialBalance)` используя замыкание чтобы `balance` оставался приватным. Верните объект с `deposit(amount)`, `withdraw(amount)` и `getBalance()`. `deposit` должен бросать если amount ≤ 0; `withdraw` — если amount превышает баланс.

function makeBankAccount(initialBalance) {
  // balance must be private
  // return { deposit, withdraw, getBalance }
}
Решение 
function makeBankAccount(initialBalance) {
  let balance = initialBalance;
  return {
    deposit(amount) {
      if (amount <= 0) throw new Error('Deposit must be positive');
      balance += amount;
      return balance;
    },
    withdraw(amount) {
      if (amount > balance) throw new Error('Insufficient funds');
      balance -= amount;
      return balance;
    },
    getBalance() { return balance; },
  };
}

const acc = makeBankAccount(100);
acc.deposit(50);   // 150
acc.withdraw(30);  // 120
acc.getBalance();  // 120
acc.balance;       // undefined — private
07

Реализуйте фабрику makeAdder()

#

Реализуйте `makeAdder(n)` возвращающую функцию. Возвращённая функция принимает аргумент `x` и возвращает `x + n`. Каждый вызов `makeAdder` должен создавать независимый сумматор помнящий свой `n`.

function makeAdder(n) {
  // return a function that adds n to its argument
}
Решение 
function makeAdder(n) {
  return function(x) {
    return x + n;
  };
}

const add5  = makeAdder(5);
const add10 = makeAdder(10);

add5(3);   // 8
add5(7);   // 12
add10(3);  // 13
add10(add5(2)); // 17  (add5(2)=7, add10(7)=17)
08

Реализуйте debounce()

#

Реализуйте `debounce(fn, delay)` возвращающую откложенную версию `fn`. Откложенная функция задерживает вызов `fn` пока не пройдёт `delay` миллисекунд после последнего вызова. Если вызывается снова до истечения задержки — таймер сбрасывается.

function debounce(fn, delay) {
  // return a debounced version of fn
  // fn should only be called delay ms after the last invocation
}
Решение 
function debounce(fn, delay) {
  let timerId;
  return function(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), delay);
  };
}

const handleInput = debounce((value) => {
  console.log('searching for:', value);
}, 300);

// Fast typing — only the last call fires after 300ms:
handleInput('h');
handleInput('he');
handleInput('hel');
handleInput('hell');
handleInput('hello');
// After 300ms: 'searching for: hello'
09

Реализуйте compose() и pipe()

#

Реализуйте `compose(...fns)` применяющую функции справа налево: `compose(f, g, h)(x)` эквивалентно `f(g(h(x)))`. Затем реализуйте `pipe(...fns)` делающую то же слева направо.

// compose(f, g)(x) === f(g(x))
// compose(f, g, h)(x) === f(g(h(x)))
function compose(...fns) {
  // right-to-left execution
}
Решение 
function compose(...fns) {
  return function(x) {
    return fns.reduceRight((v, f) => f(v), x);
  };
}

const double = x => x * 2;
const addOne = x => x + 1;
const square = x => x * x;

const transform = compose(double, addOne, square);
// square(3)=9, addOne(9)=10, double(10)=20
transform(3); // 20

// pipe: left-to-right
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
const clean = pipe(s => s.trim(), s => s.toLowerCase());
clean('  HELLO  '); // 'hello'
10

Предскажите вывод замыканий и объясните

#

Что выведет этот код? Объясните почему каждое замыкание даёт свой результат независимо не мешая другим. ```js function makeMultiplier(x) { return function(y) { return x * y; }; } const triple = makeMultiplier(3); const quadruple = makeMultiplier(4); console.log(triple(5)); console.log(quadruple(5)); console.log(triple(quadruple(2))); ```

function makeMultiplier(x) {
  return function(y) {
    return x * y;
  };
}

const triple    = makeMultiplier(3);
const quadruple = makeMultiplier(4);

console.log(triple(5));
console.log(quadruple(5));
console.log(triple(quadruple(2)));
Решение 
// triple(5)           → 3 * 5 = 15
// quadruple(5)        → 4 * 5 = 20
// quadruple(2) = 8; triple(8) = 3 * 8 = 24
// Output: 15, 20, 24

// Why: each call to makeMultiplier creates a new closure
// capturing its own 'x'. triple closes over x=3,
// quadruple closes over x=4. They don't share state.