Перегрузка функций в JavaScript: как реализовать без TypeScript

[hannadev]

В JavaScript нет встроенной перегрузки функций, как в языках со статической типизацией. Но это не значит, что нельзя добиться похожего поведения. Мы разберем, как эмулировать перегрузку с помощью arguments, проверки типов и других трюков - это упростит код и сделает его гибче.

Такая техника полезна для библиотек и утилит, где одна функция должна работать с разными наборами данных. Вместо кучи if-else или отдельных методов вы получаете единый интерфейс. Это решает проблему дублирования кода и улучшает читаемость.

Почему JavaScript не поддерживает перегрузку нативно

JavaScript - динамический язык, где функции не привязаны к конкретным типам параметров. Вы можете передать в функцию сколько угодно аргументов любого типа, и она их примет. Компилятор не проверяет сигнатуры, как в TypeScript или C#.

Поэтому разработчики эмулируют перегрузку вручную. Основной инструмент - объект arguments, который содержит все переданные аргументы. Его длина (.length) и типы (typeof, instanceof) помогают выбрать нужную логику. Это работает для обычных функций, методов объектов и даже конструкторов.

Например, простая функция для логирования может выводить просто число, строку или объект с деталями. Без проверки arguments она сломается на неожиданных входах. Такие подходы используются в популярных библиках вроде Lodash.

Вот базовый пример эмуляции:

function log(item) {
  if (arguments.length === 1) {
    if (typeof item === 'number') {
      console.log('Число:', item);
    } else {
      console.log('Строка или объект:', item);
    }
  } else {
    console.log('Детали:', ...arguments);
  }
}

log(42); // Число: 42
log('текст'); // Строка или объект: текст
log('ошибка', {code: 500}); // Детали: ошибка {code: 500}

• Проверка длины: arguments.length определяет, сколько параметров передано.
• Проверка типов: typeof arg или arg instanceof Array отличает string от number.
• Проверка порядка: Первый аргумент как строка - одна ветка, как объект - другая.

Продвинутые техники с фабрикой функций

Более элегантный способ - создать фабрику перегруженных функций. Идея в том, чтобы передать в polymorph несколько версий функции, и она выберет подходящую по аргументам. Это позволяет комбинировать логику по количеству и типам параметров.

Такой подход масштабируется: добавляете новую версию - и готово. Нет нужды переписывать основную функцию. Пример из практики показывает, как это работает с RegExp, функциями и булевыми значениями.

Смотрите код фабрики:

function polymorph() {
  var len2func = [];
  for (var i = 0; i < arguments.length; i++) {
    if (typeof(arguments[i]) == "function") {
      len2func[arguments[i].length] = arguments[i];
    }
  }
  return function() {
    return len2func[arguments.length].apply(this, arguments);
  };
}

var PolyFunc = polymorph(
  function(a, b, c) { return "Three arguments version"; },
  function(i, str) { return "Number and string passed"; },
  function(re, a) { return "RegExp and something"; }
);

PolyFunc(1, 2, 3); // Three arguments version
PolyFunc(1, "qq"); // Number and string passed

Ситуация	Аргументы	Результат
3 параметра	1,2,3	Универсальная версия
Число + строка	1,‘qq’	Специфическая логика
RegExp + любой	/a/,1	RegExp-ветка

• Фабрика анализирует .length переданных функций для маппинга.
• Масштабируемо: Добавьте еще одну функцию с нужным .length.
• Подходит для методов классов и конструкторов.

Перегрузка в TypeScript и как это связано с JS

Хотя запрос про чистый JavaScript, стоит упомянуть TypeScript - там перегрузка нативная. Вы объявляете несколько сигнатур, а компилятор генерирует JS с проверками. После транспиляции получается похожий на наши примеры код с typeof и if.

В TS это выглядит так:

type MakeDate = {
  (timestamp: number): Date;
  (m: number, d: number, y: number): Date;
};

const makeDate: MakeDate = (mOrTimestamp: number, d?: number, y?: number): Date => {
  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d);
  }
  return new Date(mOrTimestamp);
};

Это удобно для больших проектов, но в ванильном JS приходится писать реализацию вручную. TypeScript просто добавляет типобезопасность сверху.

• Сигнатуры перегрузки: Несколько деклараций с разными типами.
• Реализация: Одна функция с unknown или any, плюс проверки.
• Работает с стрелочными функциями и методами классов.

JS эмуляция	TypeScript	Преимущества TS
Ручные if/typeof	Сигнатуры	IntelliSense, ошибки на компиляции
arguments.length	Кол-во параметров	Типобезопасность

Когда перегрузка упрощает реальный код

Перегрузка shines в утилитах вроде калькулятора калорий или API-хелперов. Представьте функцию, которая парсит дату: timestamp или m,d,y. Вместо двух функций - одна с ветвлением.

В практике это экономит строки и делает API интуитивным. Но не переусердствуйте: если логика разная, лучше отдельные функции. Перегрузка хороша для похожих задач с вариациями входов.

Код для калорий:

function calcCalories(weight, height, age, gender) {
  if (arguments.length === 3) {
    // Базовая формуза
    return 10 * weight + 6.25 * height - 5 * age + 5;
  }
  // С гендером
  return arguments=== 'male' ? /* формула */ : /* женская */;
}

Это делает код короче и удобнее в использовании. Главное - документировать ожидаемые аргументы.

Продвинутые нюансы перегрузки

В JS перегрузка не заменяет дженерики или unions из TS - там есть лучшие альтернативы. Но для динамических сценариев, как обработка user input, это must-have. Подумайте о throttle/debounce как о частных случаях: они тоже ‘перегружают’ поведение по контексту. Если копать глубже, смотрите на Proxy для магических overloads, но это уже для экспериментов.