JS Confusion — Concat or Push

This article begins a series of articles dealing with those tiny little confusions JavaScript developers face.

Have you ever found yourself working on an object, then suddenly getting to the point where more than one method seems to be the right one to use? That probably feels familiar.

Today, we’ll be looking at one of such confusing cases [concat vs push] and stating their differences. I mean, who wouldn’t want to always use the right tool instead of hacking one to perform the duties of the other.

Concat

  • Can be called by both arrays and strings.
"hey".concat(" people"); // => hey people
[1, 2, 3].concat(4, [5, 6, 7]); // => [1, 2, 3, 4, 5, 6, 7]
  • Flattens its array argument.
    If the calling object is a string, concat flattens up to the last nested array item in an array argument, however deep. No array will be seen in the result. But if the calling object is an array, concat only flattens outermost arrays, leaving nested arrays as arrays.
"hey".concat([" people", [" hi"]]); // => hey people, hi
[1, 2, 3].concat(4, [5, 6, 7, [8, 9]]); // => [1, 2, 3, 4, 5, 6, 7, [8, 9]]
  • Returns a new array or string.
let a = "hey";
let b = a.concat([" people", [" hi"]]); // => hey people, hi console.log(b); // => hey people, hi
let c = [1,2,3];
let d = c.concat(4, [5, 6, 7, [8, 9]]); // => [1, 2, 3, 4, 5, 6, 7, [8, 9]]
console.log(d); // => [1, 2, 3, 4, 5, 6, 7, [8, 9]]
  • Does not modify the calling array or string.
a = "hey"; a.concat([" people", [" hi"]]); // => hey people, hi console.log(a); // => hey
b = [1, 2, 3];
b.concat(4, [5, 6, 7, [8, 9]]); // => [1, 2, 3, 4, 5, 6, 7, [8, 9]] console.log(b); // => [1, 2, 3]

Push

  • Can only be called by arrays.
"hey".push(" people"); // => Uncaught TypeError: "hey".push is not a function
[1, 8].push([5, 6, 7]); // => 3
  • Does not flatten its array arguments.
    Arguments are added to the end of the calling array. Array arguments are preserved as arrays.
a = [1, 2, 3];
a.push(4, [5, 6, 7, [8, 9]]); // => 5
console.log(a); // => [1, 2, 3, 4, [5, 6, 7, [8, 9]]]
  • Returns the size of the new array.
c = [1, 2, 3];
d = c.push(4, [5, 6, 7, [8, 9]]); // => 5
console.log(d); // => 5
  • Modifies the calling array.
b = [1, 2, 3];
b.push(4, [5, 6, 7, [8, 9]]) // => 5
console.log(b); // => [1, 2, 3, 4, 5, 6, 7, [8, 9]]

With the differences between concat and push pointed out in this article, it should be clear that the two methods are not interchangeable for the same purpose, they are significantly different from each other. Best practices require that the right tool is always used, so don't hack one of these methods to achieve what the other was built to achieve. You can now easily see which method applies to your needs and use just the right one.

If you have differences I missed, please help state them in your comment. It’ll be highly appreciated, and we would learn some more.