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
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 recommended ) :
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.
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);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]]
[].concat(arr1 , [addArr] )works alsoarr1.concat([addArr])!push(addArr), any changes toaddArrwill change arr1. So, make sure you usepush(addArr.slice())to push a copy, not just a reference.