I have the array: [[1,2,3], [1,2,2], [4,3]]. Then I want to add the array: [3,3,3]. The result should be [[1,2,3], [1,2,2], [4,3], [3,3,3]]

My code:

const arr1 = [[1,2,3], [1,2,2], [4,3]];
const addArr = [3,3,3];

const result = [].concat(arr1 , addArr );
console.log(result);

The log is: [[1,2,3], [1,2,2], [4,3], 3, 3, 3] Why?

Thanks

I have the array: [[1,2,3], [1,2,2], [4,3]]. Then I want to add the array: [3,3,3]. The result should be [[1,2,3], [1,2,2], [4,3], [3,3,3]]

My code:

const arr1 = [[1,2,3], [1,2,2], [4,3]];
const addArr = [3,3,3];

const result = [].concat(arr1 , addArr );
console.log(result);

The log is: [[1,2,3], [1,2,2], [4,3], 3, 3, 3] Why?

Thanks

• javascript

• 1 Not pretty but [].concat(arr1 , [addArr] ) works also – charlietfl Commented Jun 29, 2020 at 0:11
• @charlietfl why not arr1.concat([addArr]) ! – Ala Eddine Menai Commented Jun 29, 2020 at 0:17
• Note: If you use push(addArr), any changes to addArr will change arr1. So, make sure you use push(addArr.slice()) to push a copy, not just a reference. – iAmOren Commented Jun 29, 2020 at 0:35

6 Answers 6

Because concat() merge two or more arrays together.

merge is different to add or push into.

It does not add an array as a value into other array but merges values together.

Example :

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
// Your guess is : Array ["a", "b", "c", ["d", "e", "f"] ]

You can solve your issue by using push()

const arr1 = [[1, 2, 3], [1, 2, 2], [4, 3]];
const addArr = [3, 3, 3];

arr1.push(addArr)
console.log(arr1);

Or by add values inside an array ( not remended ) :

const arr1 = [[1, 2, 3], [1, 2, 2], [4, 3]];
const addArr = [3, 3, 3];

const result = arr1.concat([addArr])
console.log(result);

Or maybe the Classic Fashion :

const arr1 = [[1, 2, 3], [1, 2, 2], [4, 3]];
const addArr = [3, 3, 3];

arr1[arr1.length] = addArr

console.log(arr1);

Basically, because elements types of arr1 are subarrays but elements types of addArr are just integers. So just you need to wrap elements of addArr on an array like below and it would work.

const arr1 = [[1,2,3], [1,2,2], [4,3]];
const addArr = [[3,3,3]];

const result = [].concat(arr1 , addArr );
console.log(result);

That's the way Array.prototype.concat() works:

const a = [1, []];
const b = [3, 4];
const c = a.concat(b);
// [1,  [],  3,  4]

No difference with your code.

Concat nested arrays

const arr1 = [[1,2,3], [1,2,2], [4,3]];
const addArr = [[3,3,3]];                // Or also, use [3, 3, 3]...
const result = arr1.concat(addArr);      // ...but than ([addArr]) here
console.log(result);

Destructuring Arrays

const arr1 = [[1,2,3], [1,2,2], [4,3]];
const addArr = [[3,3,3]];           // Wrap into additional []
 
const result = [...arr1, ...addArr]; 
console.log(result)

Use Array#push to append an element to the end of the array.

const arr1 = [[1,2,3], [1,2,2], [4,3]];
const addArr = [3,3,3];
arr1.push(addArr);
console.log(arr1);

Using concat results in this behavior because if any argument given to concat is an array, it will append the values of that array. According to MDN:

The concat method 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). It does not recurse into nested array arguments.

If you do need to use concat, you will need to put the contents of addArr inside an array so that concat will work properly.

const arr1 = [[1,2,3], [1,2,2], [4,3]];
const addArr = [3,3,3];
const res = [].concat(arr1, [addArr]);
console.log(res);

Why it is happening: .concat adds the content of each array to the new array.

whats inside arr1 is [1,2,3], [1,2,2], [4,3]

whats inside addArr is 3,3,3

hence that result.

How to do it:

const arr1 = [[1,2,3], [1,2,2], [4,3]];
const addArr = [3,3,3];

const result = [...arr1, addArr];
console.log(result);

Adding square brackets around the array addArr in the concatenation statement works too:

const arr1 = [[1,2,3], [1,2,2], [4,3]];
const addArr = [3,3,3];

const result = [].concat(arr1 , [addArr] );
console.log(result); // [[1,2,3], [1,2,2], [4,3], [3,3,3]]