JS Confusion — Concat or Push

Daniel Okwufulueze
Aug 26, 2017 · 3 min read

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); // => heyb = [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.

)
Daniel Okwufulueze

Written by

Dad; Andelan; Technology Leader & Mentor; Blockchain Enthusiast & Developer; Agnostic. For pastime, I read, write, swim, play musical instruments, and think.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade