Why use `concat` instead of `push` in this instance?

Question

I was browsing the answers to this question: Can I dispatch an action in reducer? and in this answer, I see the following:

actionQueue = actionQueue.concat([asyncAction]);

which is essentially the same as:

actionQueue.push(asyncAction);

(ignoring that the concat call is creating a new array and re-assigning it to actionQueue, the result is the same -- an array with asyncAction appended to it).

Initially, I thought that it (perhaps) performed better (somehow), and someone else was apparently wondering the same as they beat me to it in jsperf: Array .concat() vs. .push().

As the results of the jsperf testing show, the concat method is significantly slower than push (at least as far as Chrome is concerned).

Is there something I'm missing?
Is there a reason concat would be preferred in this use case?

I believe it's all to do with `immutability` – Keith Jan 24 '18 at 17:14 — Keith, Jan 24 '18 at 17:14

score 14 · Accepted Answer · edited Jan 24 '18 at 17:16

14

If some other code has a reference to the existing array in actionQueue, using concat will not affect that.

var a1 = [1];
var b1 = a1
a1 = a1.concat([2])

var a2 = [1];
var b2 = a2
a2.push(2)

console.log('b1', b1)
console.log('b2', b2)

edited Jan 24 '18 at 17:16

epascarello

204,599
20
195
236

answered Jan 24 '18 at 17:10

SLaks

868,454
176
1,908
1,964

1

even though the new array created by `concat` is being reassigned to the same variable? – pete Jan 24 '18 at 17:11
1

@pete: That's only one variable. It doesn't affect other references to the array. – SLaks Jan 24 '18 at 17:12
I added a code sample to the answer to help make it clearer. Hopefully @SLaks does not mind me doing it :) – epascarello Jan 24 '18 at 17:16

score 12 · Answer 2 · answered Jan 24 '18 at 17:16

Push()

The push() method is a generic method similar to call() or apply(). It will mutate your array (or object), pushing a new value into it.

Push: MDN

Concat()

The concat() method returns a new array, with the values merged. This also avoids mutation side effects.

Concat: MDN

score 5 · Answer 3 · answered Oct 06 '20 at 09:53

In simple push append the array in the same reference, while concat doestn't effect the orignal array. Check out following snippet

let x = [1,2,3,4];
let y = x.concat(5);
// At this step y hold [1,2,3,4,5] and x remain unchanged to [1,2,3,4]
document.write('x=>'+x);
document.write('y=>'+y);

let z = x.push(5);
// At this step z hold 5 and x is now changed to [1,2,3,4,5]
document.write('x=>'+x);
document.write('z=>'+z);

Why use `concat` instead of `push` in this instance?

3 Answers3

Push()

Concat()