How to use chains without applying anti-patterns in JavaScript?

Question

If you try to program in a functional style on JavaScript, you'll probably realize the conventional fn(obj,params...) form gets unreadable fast.

console.log(
    join(
        map(function(row){ return row.join(" "); },
            format(
                map(function(text){return align(text},
                    view),
                20))),
    "\n");

VS

view.map(function(text){return align(text)})
    .format(20)
    .map(function(row){return row.join(" ");})
    .join("\n")
    .log();

Problematically, the latter style could only be implemented extending the Object.prototype with new functions, which is globally regarded as evil. Yet, the readability is so superior that I'm prompted to just go ahead and do it anyway. Is there a better way to solve this problem?

David Braun · Accepted Answer · 2016-09-15 23:00:54Z

2

Yes, there is a better way to solve the problem. Below is a demonstration using lodash.

Bad method:

import _ from "lodash";

_.chain([1, 2, 3])
  .map(x => [x, x*2])
  .flatten()
  .sort()
  .value();

Better method:

import map from "lodash/fp/map";
import flatten from "lodash/fp/flatten";
import sortBy from "lodash/fp/sortBy";
import flow from "lodash/fp/flow";

flow(
  map(x => [x, x*2]),
  flatten,
  sortBy(x => x) 
)([1,2,3]);

See Why using _.chain is a mistake. for a fantastic, in-depth explanation.

answered Sep 15, 2016 at 23:00

David Braun

5,9993 gold badges39 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

georg · Accepted Answer · 2013-04-07 15:21:42Z

1

A common "monadic" approach to this is to wrap an operand into your own object, call a chain of methods on that object and then extract the plain value back. Example from underscore.js docs:

var youngest = _.chain(stooges)
  .sortBy(function(stooge){ return stooge.age; })
  .map(function(stooge){ return stooge.name + ' is ' + stooge.age; })
  .first()
  .value();

answered Apr 7, 2013 at 15:21

georg

216k57 gold badges324 silver badges401 bronze badges

Comments

Peter Lyons · Accepted Answer · 2013-04-07 15:22:38Z

The basic pattern is

Create a constructor function, store the object's state as properties on this
Add your chainable methods to the constructor's prototype. In the body of these functions, alter the object's state attached to this, then return this.
Provide a method to use at the end of the chain to convert from your custom chainable object to a raw array or whatever the non-chainable analog is.

http://jsfiddle.net/XjRrn/ is a working example:

function ChainableArray(rawArray) {
     this._array = rawArray || [];
};
ChainableArray.prototype.map = function(fn) {
    this._array = _.map(this._array, fn);
    return this;
};
ChainableArray.prototype.incr = function(amount) {
    this._array = _.map(this._array, function (item) {return item + amount;});
    return this;
};
ChainableArray.prototype.toArray = function () {
    return _.clone(this._array);
};

The Query object from the mongoose.js library is a great case study to reference.

Collectives™ on Stack Overflow

How to use chains without applying anti-patterns in JavaScript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related