DEV Community

Toshiya Matsumoto
Toshiya Matsumoto

Posted on

Method Chain: filter().map() is inefficient?

Method Chaining

You may have seen the code using Array.prototype.filter() and Array.prototype.map() to edit and remove the value in Array data in Javascript

For example:

[1,2,3]
.map((mapped) => mapped + 1)
.filter((filtered) => filtered > 1)
Enter fullscreen mode Exit fullscreen mode

Question

I was always wondering if such a method chaining iterates the value in array at each iteration or v8 engine perhaps optimises the operation by performing data aggregation under the hood.

So I conducted a small research.

How?

Using console.time and console.timeEnd and measured the average execution time in 10 times with and without Method Chain.
I used Chrome browser for the investigation.

console.time('Filter Execution Time')
// YOUR CODE
console.timeEnd('Filter Execution Time')
Enter fullscreen mode Exit fullscreen mode

Result: Method Chaining does not aggregate the operation.

- Method Chain(A) No Method Chain(B) Aggregate Logic(C)
Iterate 10000000 values 4656 ms 4733 ms 169 ms
Iterate 100000 values 27 ms 24 ms 4 ms

As you can see, the result with/without Method Chain did not reveal much difference, while aggregating logic hit the way faster results.

Code-A. Use Method Chaining with map() and filter()

console.time('Filter Execution Time')
const result = new Array()
.fill(1).map((e) => e + 1)
.filter((e) => e !== 1)
console.timeEnd('Filter Execution Time')
Enter fullscreen mode Exit fullscreen mode

Code-B. Separate map() and filter() (No Method Chaining)

console.time('Filter Execution Time')
const mapResult = new Array().fill(1).map((e) => e + 1)
const result = mapResult.filter((e) => e !== 1)
console.timeEnd('Filter Execution Time')
Enter fullscreen mode Exit fullscreen mode

Code-C. Aggregate logic

console.time('Filter Execution Time')
const result = []
new Array().fill(1).forEach((e) =>  {
    if (e !== 1) result.push(e)
})
console.timeEnd('Filter Execution Time')
Enter fullscreen mode Exit fullscreen mode

But Method Chain is handy isn't it?

For those who think so, I made the chart at every number of iteration from 100 up to 100,000 under the the Code Pattern A, B, and C by counting the average time by milliseconds in 10 times, likewise as the above.

Findings

  1. There are not much difference when the number of iteration is not large such as 100 - 1,000 anyway.

  2. It is going to matter when the number of iteration grows exponentially such as 1,000,000.

The number of iteration and Execute duration with Method Chain

Conclusion

Method Chaining does not aggregate the operation while the difference of the results widens as the number of iteration grows exponentially.

Hence I think it's fair to say that when the number of iteration is small, it's ok to use method chain to gain the advantage of its handiness, on the other hand, if you deal with a large number of data, you should consider the algorithm carefully without the method chain.

Thanks for reading!

Top comments (0)