I recently came across some vanilla JavaScript that made use of chaining. Just like what you’ve seen in jQuery, it’s possible to use vanilla JavaScript in a chainable way:

myArray.filter().map().reduce();

Below is an ad-hoc example of something similar to what I’ve seen in the wild:

var mixedArray = ['dog', 1, 2, 'cat', 3, 'fox', 4, 5, 'duck'];

var mathResults = mixedArray.filter(function(value) {
                if (Number.isFinite(value)) {
                  return value;
                }
              }).map(function(value) {
                return value * value;
              });

console.log(mathResults) // [1, 4, 9, 16, 25]

So what’s actually happening? How is it possible to chain methods similar to jQuery? Well, in order to understand, we’ll need to undestand what’s going on under the hood with these methods. By using JavaScript Array methods that return an Array as a result, the result of each method in the sequence can be “handed down” to the next Array method. Visually, it looks like one method is attached to another and can have benefit the developer by having to write less code since it’s a kind of shorthanded syntax.

This technique is called chaining.

Chaining Explanation

Arrays inherit Array methods through prototypal inheritance. If we have an Array [1,2,3], it inherits methods like .filter() and .map() and can be used like so:

Take for example this following code:

var myArray = [1,2,3];
myArray.map(...);

Alternatively, it could be written like this:

[1,2,3].map(...);

Now, let’s revisit the first set of code and break it down:

// Standard way of assigning an array to a variable
var mixedArray = ['dog', 1, 2, 'cat', 3, 'fox', 4, 5, 'duck'];

// The variable 'mathResults' will eventually contain the final result
// after all chains have been invoked.

// .filter() will use the 'mixedArray' as a starting point and based on the
// logic inside .filter() callback, it will return only numbers.

var mathResults = mixedArray.filter(function(value) {
  if (Number.isFinite(value)) {
    return value;
  }
})

// As a result, .filter() will create a new array and this array will contain
// the following values: [1, 4, 9, 16, 25], which will then be passed on.

// By chaining .map() to .filter(), .map() will use the newly
// created array of [1, 2, 3, 4, 5] that .filter() has just handed over.
// Essentially, the code can can be seen as [1, 4, 9, 16, 25].map({ ... })

.map(function(value) {
  return value * value;
});

// Note: If .map() wasn't chained to .filter(), the variable 'mathResults'
// would be [1, 2, 3, 4, 5].

The following is a list of Array methods that will create new arrays when used. This is not a comprehensive list of chainable Array methods. Let me know if I missed anything.