Хабрахабр

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

image

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

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

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

let fe = function named(...) ;

Только изнутри функции и перезаписать имя нельзя! Вся суть в том, что изнутри функции, на которую ссылается переменная 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);

Почему не setInterval? Здесь NFE мы используем литералом в качестве аргумента вместо объявления ненужной переменной. Вместо 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, действующая во множестве натуральных чисел. Такое себе? Примером такой функции могут быть f(x) = 3 * x + 5 или f(x) = 2^x + 11. Найти крайнюю точку x, при которой значение функции не превышает заданного y.

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);
};

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

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

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

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть