Using prototype functions in higher order functions in javascript

Question

I'm trying to concat an array of arrays using reduce and I figured that I could use the Array.prototype.concat function like this:

arr = [[1],[2],[3]]
arr.reduce((a, b) => Array.prototype.concat(a, b), [])

Which works fine and gives me the array [1, 2, 3]. Then I thought I could be even smarter and do it like this:

arr = [[1],[2],[3]]
arr.reduce(Array.prototype.concat, [])

This however gives me an error:

TypeError: Array.prototype.concat called on null or undefined
    at Array.reduce (native)
    at Object.<anonymous> (/home/axel/Developer/temp/reduce2.js:2:5)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.runMain (module.js:590:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)

It seems to think that Array.prototype.concat is undefined. Why is this?

You have to pass arguments into `reduce` function, aswell as into `concat` and return something, because at this moment, your `reduce` function doesn't return anything. — kind user, Mar 01 '17 at 20:17
Note that the second line in your initial code should actually read `arr = arr.reduce((a, b) => a.concat(b));` which makes further reduction impossible. — , Mar 01 '17 at 20:32
@Kinduser The function does return something. Arrow functions allow only a single expression as their body, and use the result of that expression as their return value. — apsillers, Mar 01 '17 at 20:33
`Array.prototype.concat` is not `undefined`. `this` inside `Array.prototype.concat` is `undefined`. — Felix Kling, Mar 01 '17 at 20:35
It's the same as always with methods: when you pass them around, bind them. — Bergi, Mar 01 '17 at 20:49

apsillers · Accepted Answer · 2017-03-02T14:12:19.110

concat operates as a method with respect to some object (i.e., the this value of the method's execution). When you pass a function into a function, you do not pass along any this value. Thus, you're effectively doing something similar to:

var rawConcat = Array.prototype.concat;
rawConcat(a,b);

You can use bind to create a copy of a function with a particular this burned into it:

arr.reduce(Array.prototype.concat.bind(Array.prototype), [])

However, now that that's cleared up, there are several other issues that stop you from doing this.

For one, reduce actually gets four arguments, including the current index and the whole array. You ignore these by having your (a,b)=> lambda only pass two of those four arguments into concat. That's fine, but when you supply a function directly as an argument to reduce, it will use all four arguments, so you'll get the result of the call Array.prototype.concat(a, b, currentIndex, arr).

Furthermore, what you're doing isn't a sensible use of Array.prototype. The concat function concatenates its arguments and appends them to a copy of the this value. Since Array.prototype is itself just an empty array (albeit with many own-properties that other arrays use as inherited properties), this is effectively the same as [].concat(a,b) or (perhaps even more readably) a.concat(b).

Richard Scarrott · Answer 2 · 2017-03-01T20:41:31.050

Array.prototype.concat expects the context (this) to be an Array and in your first example the context is actually Array.prototype which incidentally looks exactly like an Array, hence it works.

Your second example however, passes the concat function by reference so the context is null or undefined.

The more correct way to do this would be to use Function.prototype.call to bind the context to one of the arrays or call the method directly on the array, e.g.

arr = [[1],[2],[3]];
arr.reduce((a, b) => Array.prototype.concat.call(a, b), []);

// Or

arr.reduce((a, b) => a.concat(b), []);

Using prototype functions in higher order functions in javascript

2 Answers2

Linked