EN | KR

FxJS - Functional Extensions for Javascript

FxJS is a functional Javascript library based on Iterable / Iterator, Generator, and Promise in ECMAScript 6.

• Getting Started
  • Installation
  • Iteration protocols
  • Iterable programming
  • Lazy evaluation
  • FRP style
  • Promise/async/await
  • Concurrency
  • Error handling
• API
  • Function
  • Strict
  • Predicates
  • Lazy
  • Concurrency
  • Stoppable
  • String
• Extension Libraries
  • FxSQL
  • FxDOM

Getting Started

Installation

In the browser environment

• Modern Browser (>= 2% and last 2 versions)

  <script src="https://unpkg.com/fxjs/dist/fx.js"></script>

• Legacy Browser (IE11)

  <script src="https://unpkg.com/fxjs/dist/fx.es5.js"></script>

• Usage

  <script>
  const { L, C } = window._;
  _.go(
    [1, 2, 3],
    L.map(a => a * a),
    L.map(_.delay(300)),
    C.takeAll,
    _.reduce(_.add),
    console.log
  );
  // '14' output after about 300 ms
  </script>

  Note: When the browser loads the fx.js script file, _ is used as a global variable.

In the node.js environment

FxJS is a Dual Module Package that supports both CommonJS and ES6 Module. Among the two module types of the fxjs package, commonjs support node.js v6 or higher, and ESM is available from node.js v12 or higher.

npm install fxjs

• CommonJS (>= node v6)

  const FxJS = require("fxjs");
  const _ = require("fxjs/Strict");
  const L = require("fxjs/Lazy");
  const C = require("fxjs/Concurrency");
  
  // The module object that exported as default has all the functions in fxjs, including Lazy and Concurrency.
  const { reduce, mapL, takeAllC } = FxJS;
  
  // You can also import the functions individually.
  const rangeL = require("fxjs/Lazy/rangeL");
  _.go(
    rangeL(1, 4),
    L.map(a => a * a),
    L.map(_.delay(300)),
    C.takeAll,
    _.reduce(_.add),
    console.log
  );

• ES6 Module (>= node v12)

  import { add, delay, go, reduce, rangeL } from "fxjs";
  import * as L from "fxjs/Lazy";
  import * as C from "fxjs/Concurrency";
  
  go(
    rangeL(1, 4),
    L.map(a => a * a),
    L.map(delay(300)),
    C.takeAll,
    reduce(add),
    console.log
  );

Dual Package Hazard

FxJS adopted the Isolate state approach in two ways to support the Dual Module Package, which was introduced in the official Node.js document. Therefore, when using both CommonJS and ES modules, care must be taken to compare the equivalence of modules or function objects as shown below. For more information, see Node.js Document.

import { createRequire } from "module";
import * as fxjs_mjs from "fxjs";
import go_mjs from "fxjs/Strict/go.js";

const require = createRequire(import.meta.url);
const fxjs_cjs = require('fxjs');
const go_cjs = require('fxjs/Strict/go');

console.log(fxjs_mjs === fxjs_cjs); // false
console.log(go_mjs === go_cjs); // false
console.log(fxjs_cjs.go === go_cjs); // true
console.log(fxjs_mjs.go === go_mjs); // true

Iteration protocols

You can evaluate the iterator as a function of FxJS.

function* fibonacci() {
  let a = 0,
    b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const f = pipe(
  fibonacci,
  L.filter((n) => n % 2 == 0),
  L.takeWhile((n) => n < 10)
);

const iterator = f();
console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 8, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

reduce((a, b) => a + b, f());
// 10

Iterable programming

Any value can be used with FxJS if it has a [Symbol.iterator]() method.

const res = go(
  [1, 2, 3, 4, 5],
  filter((a) => a % 2),
  reduce(add)
);

log(res); // 9

Lazy evaluation

You can do 'lazy evaluation' as a function of the L namespace.

const res = go(
  L.range(Infinity),
  L.filter((a) => a % 2),
  L.take(3),
  reduce(add)
);

log(res); // 9

FRP style

Functional reactive programming style.

go(
  L.range(Infinity),
  L.map(delay(1000)),
  L.map((a) => a + 10),
  L.take(3),
  each(log)
);
// After 1 second 10
// After 2 seconds 11
// After 3 seconds 12

Promise/async/await

Asynchronous control is easy.

// L.interval = time => L.map(delay(time), L.range(Infinity));

await go(
  L.interval(1000),
  L.map((a) => a + 30),
  L.takeUntil((a) => a == 33),
  each(log)
);
// After 1 second 30
// After 2 seconds 31
// After 3 seconds 32
// After 4 seconds 33

const res = await go(
  L.interval(1000),
  L.map((a) => a + 20),
  L.takeWhile((a) => a < 23),
  L.map(tap(log)),
  reduce(add)
);
// After 5 seconds 20
// After 6 seconds 21
// After 7 seconds 22

log(res);
// 63

Concurrency

C functions can be evaluated concurrency.

await map(getPage, range(1, 5));
// After 4 seconds
// [page1, page2, page3, page4]

const pages = await C.map(getPage, range(1, 5));
// After 1 second
// [page1, page2, page3, page4]

Like Clojure Reducers, you can handle concurrency.

go(
  range(1, 5),
  map(getPage),
  filter((page) => page.line > 50),
  map(getWords),
  flat,
  countBy(identity),
  log
);
// After 4 seconds
// { html: 78, css: 36, is: 192 ... }

go(
  L.range(1, 5),
  L.map(getPage),
  L.filter((page) => page.line > 50),
  L.map(getWords),
  C.takeAll, // All requests same time.
  flat,
  countBy(identity),
  log
);
// After 1 second
// { html: 78, css: 36, is: 192 ... }

go(
  L.range(1, 5),
  L.map(getPage),
  L.filter((page) => page.line > 50),
  L.map(getWords),
  C.takeAll(2), // 2 requests same time.
  flat,
  countBy(identity),
  log
);
// After 2 second
// { html: 78, css: 36, is: 192 ... }

Error handling

You can use JavaScript standard error handling.

const b = go(
  0,
  (a) => a + 1,
  (a) => a + 10,
  (a) => a + 100
);

console.log(b);
// 111

try {
  const b = go(
    0,
    (a) => {
      throw { hi: "ho" };
    },
    (a) => a + 10,
    (a) => a + 100
  );

  console.log(b);
} catch (c) {
  console.log(c);
}
// { hi: 'ho' }

You can use async/await and try/catch to handle asynchronous error handling.

const b = await go(
  0,
  (a) => Promise.resolve(a + 1),
  (a) => a + 10,
  (a) => a + 100
);

console.log(b);
// 111

try {
  const b = await go(
    0,
    (a) => Promise.resolve(a + 1),
    (a) => Promise.reject({ hi: "ho" }),
    (a) => a + 100
  );

  console.log(b);
} catch (c) {
  console.log(c);
}
// { hi: 'ho' }

API

• Function
  • apply
  • applyEach
  • applyMethod
  • bindMethod
  • call
  • callEach
  • callMethod
  • calls
  • constant
  • curry
  • curryN
  • debounce
  • go
  • juxt
  • negate
  • once
  • pipe
  • tap
  • throttle
• Strict
  • add
  • append
  • baseSel
  • chunk
  • compact
  • countBy
  • deepFlat
  • defaults
  • defaultTo
  • delay
  • difference
  • differenceBy
  • differenceWith
  • divide
  • drop
  • dropRight
  • dropUntil
  • dropWhile
  • each
  • entries
  • extend
  • filter
  • find
  • findWhere
  • flat
  • flatMap
  • groupBy
  • head
  • identity
  • indexBy
  • initial
  • insert
  • intersection
  • intersectionBy
  • intersectionWith
  • join
  • keys
  • last
  • map
  • mapEntries
  • mapObject
  • max
  • maxBy
  • mean
  • meanBy
  • min
  • minBy
  • multiply
  • noop
  • object
  • omit
  • omitBy
  • partition
  • pick
  • pickBy
  • pluck
  • prepend
  • promiseAllEntries
  • promiseAllObject
  • range
  • reduce
  • reject
  • remove
  • repeat
  • replace
  • sel
  • slice
  • sort
  • sortBy
  • sortByDesc
  • sortDesc
  • split
  • splitEvery
  • subtract
  • sum
  • sumBy
  • tail
  • take
  • take1
  • takeAll
  • takeUntil
  • takeWhile
  • times
  • toIter
  • union
  • unionBy
  • unionWith
  • unique
  • uniqueBy
  • uniqueWith
  • unzip
  • update
  • updateBy
  • values
  • zip
  • zipObj
  • zipWith
• Predicates
  • all
  • and
  • any
  • both
  • cond
  • either
  • equals
  • equals2
  • equalsBy
  • equalsBy2
  • every
  • gt
  • gte
  • has
  • ifElse
  • isArray
  • isFunction
  • isIterable
  • isMatch
  • isNil
  • isNull
  • isObject
  • isString
  • isUndefined
  • lt
  • lte
  • match
  • not
  • or
  • satisfiesEvery
  • satisfiesSome
  • selEquals
  • selSatisfies
  • some
  • unless
  • when
• Lazy
  • L.append
  • L.chunk
  • L.compact
  • L.concat
  • L.constant
  • L.deepFlat
  • L.difference
  • L.differenceBy
  • L.differenceWith
  • L.drop
  • L.dropUntil
  • L.dropWhile
  • L.empty
  • L.entries
  • L.filter
  • L.flat
  • L.flatMap
  • L.insert
  • L.intersection
  • L.intersectionBy
  • L.intersectionWith
  • L.interval
  • L.keys
  • L.limitLoad
  • L.map
  • L.mapEntries
  • L.prepend
  • L.range
  • L.reject
  • L.remove
  • L.repeat
  • L.reverse
  • L.slice
  • L.splitEvery
  • L.take
  • L.takeUntil
  • L.takeWhile
  • L.times
  • L.union
  • L.unionBy
  • L.unionWith
  • L.unique
  • L.uniqueBy
  • L.uniqueWith
  • L.update
  • L.updateBy
  • L.values
  • L.zip
  • L.zipWithIndex
• Concurrency
  • C.calls
  • C.compact
  • C.drop
  • C.every
  • C.filter
  • C.find
  • C.head
  • C.map
  • C.mapEntries
  • C.object
  • C.race
  • C.reduce
  • C.some
  • C.tail
  • C.take
  • C.take1
  • C.takeAll
  • C.takeRace
• Stoppable
  • reduceS, stop
  • goS, pipeS, stop, stopIf
• String
  • html
  • join
  • strMap
  • string

Extension Libraries

• FxSQL
• FxDOM

The above libraries are based on FxJS. FxSQL and FxDOM are libraries that can handle SQL and DOM through functional APIs,respectively.