функція-обгортка

JavaScriptMiddle~1 хв читання

функція-обгортка (wrapper function) - це функція, яка обгортає іншу функцію або код, щоб додати додаткову поведінку, контроль або спростити виклик.

Простіше кажучи:

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

Основна ідея

Ти береш уже наявну функцію (або операцію) і створюєш нову, яка викликає її всередині себе, але з чимось "зверху".

Наприклад:

додати логування перед викликом;
виміряти час виконання;
додати перевірку аргументів;
або, наприклад, обробляти помилки через try/catch.

Приклад 1 - проста обгортка з логуванням

javascript

function greet(name) {
  return `Привіт, ${name}!`;
}

function withLogging(fn) {
  return function(...args) {
    console.log(`Виклик функції ${fn.name} з аргументами:`, args);
    const result = fn(...args);
    console.log(`Результат:`, result);
    return result;
  };
}

const loggedGreet = withLogging(greet);
loggedGreet('Tim');

Вивід:

javascript

Виклик функції greet з аргументами: [ 'Tim' ]
Результат: Привіт, Tim!

Тут withLogging - це функція-обгортка, яка додає "поверх" звичайної функції greet додаткову поведінку.

Приклад 2 - обгортка для обробки помилок

javascript

function riskyOperation() {
  throw new Error('Щось пішло не так!');
}

function safeWrapper(fn) {
  return function(...args) {
    try {
      return fn(...args);
    } catch (err) {
      console.error('Помилка при виклику функції:', err.message);
      return null;
    }
  };
}

const safeOp = safeWrapper(riskyOperation);
safeOp(); // Помилка при виклику функції: Щось пішло не так!

Тепер навіть якщо внутрішня функція падає - код не ламається.

Приклад 3 - вимірювання часу виконання

javascript

function heavyTask() {
  for (let i = 0; i < 1e7; i++) {}
}

function measureTime(fn) {
  return function(...args) {
    const start = performance.now();
    fn(...args);
    const end = performance.now();
    console.log(`Час виконання: ${(end - start).toFixed(2)}ms`);
  };
}

const measuredTask = measureTime(heavyTask);
measuredTask(); // Час виконання: 12.34ms

Приклад 4 - функція-обгортка в асинхронному коді

javascript

async function fetchData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

function withErrorHandling(fn) {
  return async function(...args) {
    try {
      return await fn(...args);
    } catch (e) {
      console.error('Помилка при запиті:', e);
      return null;
    }
  };
}

const safeFetch = withErrorHandling(fetchData);
safeFetch();

Це вже асинхронна обгортка, яка автоматично ловить помилки.

Приклад 5 - обгортка для "декораторів" (схожий патерн)

javascript

function authWrapper(fn) {
  return function(user, ...args) {
    if (!user.isAdmin) {
      throw new Error('Доступ заборонено');
    }
    return fn(user, ...args);
  };
}

function deletePost(user, postId) {
  console.log(`Пост ${postId} видалено`);
}

const deletePostWithAuth = authWrapper(deletePost);

deletePostWithAuth({ isAdmin: true }, 42); // Пост 42 видалено
deletePostWithAuth({ isAdmin: false }, 42); // Помилка: Доступ заборонено

Навіщо потрібні функції-обгортки

Мета	Приклад
Розширення функціоналу	Додати логування, метрики, кешування
Безпека	Перевірити права доступу або токен
Обробка помилок	Обгорнути ризиковані операції в try/catch
Перевикористання	Створити шаблон "поведінки" для багатьох функцій
Функціональне програмування	Використовувати функції вищого порядку (higher-order functions)

Підсумок

Властивість	Опис
Що це	Функція, яка викликає іншу всередині себе
Мета	Додати або змінити поведінку без зміни оригіналу
Тип	Функція вищого порядку (higher-order function)
Типові приклади	Логування, кеш, валідація, try/catch, метрики
Плюси	Перевикористовується, безпечно, читабельно

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.