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)

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')

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')

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')

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')

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.

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!

The above is the detailed content of Method Chain: filter().map() is inefficient?. For more information, please follow other related articles on the PHP Chinese website!