Why Doesn't Array Concatenation Work in Javascript? [closed]

Question

When I create two arrays in JavaScript and try to concatenate them using the concat keyword, the resulting array is always empty (well, the things from the array that should be inserted are not inserted). I couldn't imagine this is actually how JS is supposed to work because then... what would be the point of the concat keyword if it does nothing?

So then I must be doing something wrong, but I'm following the docs exactly.

Here's a fiddle that demonstrates my issue: https://jsfiddle.net/webwhizjim/7z4v33of/

// Example with objects- doesn't work...
var greetings = [{"affirmative":"yeah"}];
var exclamations = [{"omg":"Oh my golly-gee-wilickers!"},{"wowz":"wowzers!"}];

var obArray = [];

obArray.concat(greetings);
console.log("The jumble array is: " + obArray);

// Example with strings- still doesn't work...

var greetings2 = ["affirmative","yeah"];
var exclamations2 = ["omg"];

var obArray2 = ["huh?"];

[].concat.call(obArray2, greetings2);
console.log("The jumble array is: " + obArray2);

Just to be clear by "it doesn't work" I mean the console output is this:

PS. In my real project I'm using Angular 1.4; so, if there's a way to concat arrays with that, I'm open to it.

Answer 1

.concat() creates a new array and returns it. It does not add elements onto an existing array.

From MDN:

concat creates a new array consisting of the elements in the object on which it is called, followed in order by, for each argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array).

concat does not alter this or any of the arrays provided as arguments but instead returns a shallow copy that contains copies of the same elements combined from the original arrays. Elements of the original arrays are copied into the new array as follows:

You can add elements onto an existing array with .splice() or with .push().

var greetings2 = ["affirmative","yeah"];
var obArray2 = ["huh?"];
obArray2.push.apply(obArray2, greetings2);

// display result in snippet
document.write(JSON.stringify(obArray2));

---

Or, just use the newly returned array from .concat():

    var greetings2 = ["affirmative","yeah"];
    var obArray2 = ["huh?"];
    var newArray = obArray2.concat(greetings2);

    // display result in snippet
    document.write(JSON.stringify(newArray));

Answer 2

Like others have said, .concat returns a new array, and does not mutate the original state of the arrays you are working with. If you want the value of two arrays being joined via .concat you must store it in a variable or simply do the concatenation it where you need it.

example:

var greetings = [{"affirmative":"yeah"}];
var exclamations = [{"omg":"Oh my golly-gee-wilickers!"},{"wowz":"wowzers!"}];

var obArray = greetings.concat(exclamations);

console.log(obArray); // returns [obj, obj, obj]

This would give you the same result:

console.log(greetings.concat(exclamations));

One last thing. Methods like .concat are chain-able.

Answer 3

Try the following:

var greetings = [{"affirmative":"yeah"}];
var exclamations = [{"omg":"Oh my golly-gee-wilickers!"}, {"wowz":"wowzers!"}];

var obArray = Array.prototype.concat.apply([], greetings, exclamations);
console.log("The jumble array is: " + obArray);
//Console Output: The jumble array is: [object Object]

var greetings2 = ["affirmative","yeah"];
var exclamations2 = ["omg"];

var obArray2 = [].concat(greetings2, exclamations2);
console.log("The jumble array is: " + obArray2);
//Console Output: The jumble array is: affirmative,yeah,omg