Higher order Array functions such as filter, map and reduce are great for functional programming, but they can incur performance problems.

 

var ary = [1,2,3,4,5,6];var res = ary.filter(function(x, i, arr){  console.log("filter: " + x);  console.log("create new array: " + (arr === ary));  return x%2==0;}).map(function(x, i, arr){  console.log("map: " + x);  return x+"!";}).reduce(function(r, x, i, arr){  console.log("reduce: " + x);  return r+x;});console.log(res);/*"filter: 1""create new array: true""filter: 2""create new array: true""filter: 3""create new array: true""filter: 4""create new array: true""filter: 5""create new array: true""filter: 6""create new array: true""map: 2""map: 4""map: 6""reduce: 4!""reduce: 6!""2!4!6!"*/

 

In the example, filter & map function will return a new array. That's good because it pushes forward the idea of immutability. However, it's bad because that means I'm allocating a new array. I'm iterating over it only once, and then I've got to garbage-collect it later. This could get really expensive if you're dealing with very large source arrays or you're doing this quite often.

 

Using RxJS:

var source = Rx.Observable.fromArray([1,2,3,4,5,6]);source.filter(function(x){  console.log("filter: " + x);  return x%2==0;}).map(function(x){  console.log("map: " + x);  return x+"!";}).reduce(function(r, x){  console.log("reduce: " + x);  return r+x;}).subscribe(function(res){  console.log(res);});

/*"filter: 1""filter: 2""map: 2""filter: 3""filter: 4""map: 4""reduce: 4!""filter: 5""filter: 6""map: 6""reduce: 6!""2!4!6!"*/

 

 The biggest thing is that now you'll see it goes through each -- the filter, the map, and the reduce -- at each step.

 

Differences:

The first example: it creates two intermediary arrays (during filter and map). Those arrays needed to be iterated over each time, and now they'll also have to be garbage-collected.

The RxJS example:  it takes every item all the way through to the end without creating any intermediary arrays.