Красота НЕ-безымянных функций в JavaScript

Анонимные стрелочные функции в JavaScript, согласно некоторым опросам — самая популярная фича ES-2015, что также подчеркнуто исчерпывающим числом туториалов в интернете. Они бесспорно очень полезны, но в этой небольшой статье мы рассмотрим примеры использования обделенных вниманием не менее замечательных выражений с именованными функциями — NFE.

Короткая справка

Named Function Expression — расширение функциональных выражений в JavaScript, позволяющее именовать функцию, созданную как часть выражения (FunctionExpression):

let fe = function named(...) { /* function body */ };

Вся суть в том, что изнутри функции, на которую ссылается переменная fe, есть доступ к самой функции через имя named. Только изнутри функции и перезаписать имя нельзя!

Как это можно использовать

Например, нам нужно написать декорирующую функцию, которая будет считать количество вызовов какой-то функции. Это можно сделать весьма изящно с помощью NFE:

const count = f => function df() {
    df.calls = (df.calls || 0) + 1;
    return f(...arguments);
};

Здесь мы получили доступ к возвращаемой функции df, чтобы при ее вызове сохранять счетчик в свойство calls, которое будет доступно для чтения при необходимости:

const csum = count((x, y) => x + y);
csum(5, 10); // 15
csum(50, 1); // 51
csum.calls; // 2

Или сохраняем все результаты вызова функции:

const accum = f => function df() {
    let res = f(...arguments);
    (df.results = (df.results || [])).push(res);
    return res;
};

В любом случае мы пользуемся тем, что функция в JavaScript — это объект, и мы можем дополнить его нужными свойствами в наших локальных задачах.

Очевидно, функцию мы можем и вызывать. Использовать NFE для рекурсии особенно приятно. Допустим, мы хотим найти n-ый член последовательности Фибоначчи (каждый почему-то рано или поздно этого хочет):

const rf = function getfn(n) {
    return n > 2 ? getfn(n - 2) + getfn(n - 1) : 1;
};
rf(1); // 1
rf(10); // 55

Не стоит здесь обращать внимание на "нехвостоватость". А вот на возможность сделать то же самое через FunctionDeclaration — да. Но у функции-выражения есть одно преимущество: если вам захочется перенести функцию из rf в другую переменную, не потребуется править рекурсивный вызов внутри.

Аккуратный пример реализации таймера:

const ping = (callback, t) => setTimeout(function pf() {
    callback();
    setTimeout(pf, t);
}, t);

Здесь NFE мы используем литералом в качестве аргумента вместо объявления ненужной переменной. Почему не setInterval? Вместо callback'а здесь может быть ожидание резолва промиса перед следующим тиком таймера.

Интересным примером будет комбинация NFE и IIFE (Immediately-Invoked Function Expression), когда по-месту необходим только результат рекурсивной функции. Всего один раз:

let data = {
    f10: function fact(n) {
        return n > 1 ? n * fact(n - 1) : 1;
    }(10)
};
data.f10; // 3628800

Такое себе? ну хорошо, вот реальная задачка: Есть некоторая строго-возрастающая функция f, действующая во множестве натуральных чисел. Найти крайнюю точку x, при которой значение функции не превышает заданного y. Примером такой функции могут быть f(x) = 3 * x + 5 или f(x) = 2^x + 11.

const find = (f, y) => function bs(a, b) {
    if (a + 1 === b) return a;
    let m = Math.ceil((a + b) / 2);
    return f(m) <= y ? bs(m, b) : bs(a, m);
}(-1, y + 1);

find(x => 3 * x + 5, 200); // 65
find(x => Math.pow(2, x) + 11, 1000); // 9

Вдаваться в математические детали не будем. Рассмотрим реализацию:

1. Требуемая функция find имеет два наших параметра f, y и возвращает результат IIFE.
2. Немедленно-вызываемая функция реализует бинарный поиск решения, первый вызов получает начальный диапазон.
3. Сам поиск реализован через рекурсию, что использует имя NFE для последующих вызовов. Мы не декларируем функцию поиска и не создаем новую переменную.

Конечно, подобная задача может быть решена и через простой цикл с предусловием, но это слишком императивно для консольного кодинга.

Наконец пара слов про трассировку стека. У нас есть некоторая NFE-функция, в теле которой вылетело исключение:

const fe = function named() {
    throw new Error('Something went wrong');
};

Так как в выражении функция у нас именованная, мы увидим ее в стек-трейсе:

Uncaught Error: Something went wrong
    at named (<anonymous>:2:11)

Однако, начиная с ES-2015 многие анонимные выражения функций создают на самом деле функцию с именем, выводя его из контекста:

const unnamed = function() {
    throw new Error('Something went wrong');
};

Функция в правой части выражения ассоциируется с переменной в левой:

Uncaught Error: Something went wrong
    at unnamed (<anonymous>:2:7)

Но не всегда это возможно. Классический пример — инициализация скрипта внешней библиотеки через IIFE, как вариант:

/**
 * @license
 * @description
 */
;(function() {
    // some awesome code
}.call(this));

Или частый пример функции, возвращающей другую функцию:

const bind = (f, ctx) => function() {
    return f.apply(ctx, arguments);
};

Тут нет переменной для вывода, поэтому в случае исключения мы увидим anonymous. NFE может немного помочь в разбирательствах.

Короткий вывод

NFE хорошо помогает писать лаконичный и неподдерживаемый код для быстрого прототипирования широкого спектра задач. Использовать их красоту в конечном коде следует пару раз подумав: JavaScript и без того перегружен интересными спецификами.

Автор: cerberus_ab

Источник