How to Join Two Arrays in JavaScript

How to Join Two Arrays in JavaScript? A new array is created using the concat technique. The items of the object on which it is called will first fill the array. We will then concatenate the value of each argument into the array. For standard objects or primitives, the argument itself will become an element of the final array. For arrays or array-like objects, we will independently add each component of the argument to the final array if the property Symbol.isConcatSpreadable is set to a truthy value.

The contact() function does not recursively explore the hierarchical array arguments. The concat() method is utilized when combining two or more arrays. This function returns a new array rather than altering the pre-existing arrays. The concat() method maintains empty slots if any source arrays are sparse.

The concat() is a universal technique. Plain objects will be directly prepended to the resulting array, whereas array-like objects with a truthy isConcatSpreadable will be spread into the resulting array. This value is handled similarly to the other arguments (except that we will convert it to an object first). Also see:- Learn JavaScript Through Interactive Tutorials

Join Two Arrays in JavaScript Using concat() Function

const letters = ["a", "b", "c"];
const numbers = [1, 2, 3];

const alphaNumeric = letters.concat(numbers);
console.log(alphaNumeric);

Output:-

[ ‘a’, ‘b’, ‘c’, 1, 2, 3 ]

Join Three Arrays in JavaScript Using concat() Function

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

const numbers = num1.concat(num2, num3);
console.log(numbers);

Output:-

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Join Two Arrays in JavaScript Using push()

In JavaScript, we can modify the length of the array after initialization. JavaScript has push() method which is used to add elements to an existing array. We have to iterate the second array, fetch each element and push it into the first array. Let us see it through an example:-

const letters = ["a", "b", "c"];
const numbers = [1, 2, 3];

numbers.forEach((element) => {
  letters.push(element);
});

console.log(letters);

Output:-

[ ‘a’, ‘b’, ‘c’, 1, 2, 3 ]

In the above example, we are modifying the original array. If you don’t want to modify the original arrays then take a copy of the first array and then push the second array element into it. The slice() method can be used to copy the array. If we won’t pass any parameter to the slice() method then it will return the complete array.

const letters = ["a", "b", "c"];
const numbers = [1, 2, 3];

const newArr = letters.slice();

numbers.forEach((element) => {
  newArr.push(element);
});

console.log(newArr);

Output:-

[ ‘a’, ‘b’, ‘c’, 1, 2, 3 ]

The array returned by the slice() method is not referring to the original array, hence we are free to modify both arrays. The elements of the second array are pushed into the copied array.

If you enjoyed this post, share it with your friends. Do you want to share more information about the topic discussed above or do you find anything incorrect? Let us know in the comments. Thank you!

Leave a Comment

Your email address will not be published. Required fields are marked *