In this article we are looking at how to use the concept of Arrays in Javascript ES6. this article is a part of series – Learn Javascript ES6
If you are familiar with Javascript ES6, then you might find some useful tricks to use arrays in this article.
There are 3 methods to concatenate arrays using Javascript :
Method 1: using Spread Operator (…)
Assume you have two arrays of numbers, and you want to join the two arrays :
const array1 = [1,2,3];
const array2 = [3,4,5];
// join the two arrays using spread operater '...'
const resultArray = [...array1, ...array2]
console.log(resultArray);
// O/P : [1,2,3,3,4,5]
Don’t forget, one can do this too:
const array1 = [1,2,3];
const array2 = [...array1, 4];
console.log(array2);
// O/P : [1,2,3,4]
Now what if we want to concatenate three arrays ?
const array1 = [1,2,3]
const array2 = [4,5,6]
const array3 = [7,8,9]
const resultArray = [...array1, ...array2, ...array3];
console.log(resultArray);
// O/P : [1, 2, 3, 4, 5, 6, 7, 8, 9]
Now what will happen if we try to concatenate two different arrays with different data types ?
let array1 = "letters";
let array2 = [1, 2, 3, 4];
let resultArray = [...array1, ...array2];
console.log(resultArray );
// O/P: ["l", "e", "t", "t", "e", "r", "s", 1, 2, 3, 4]
But why ? why not [“letters”, 1, 2, 3 ,4]. This happens because if we use spread our string, it will split the word in to seperate letters. You can probably use the method 2 for that.
Lets now see on how we can do concat operation using array objects :
const array1 = [
{
"id": 1,
"name": "John",
},
{
"id": 2,
"name": "Ron"
}
];
const array2 = [
{
"id": 3,
"name": "Harry",
},
{
"id": 4,
"name": "Hermione"
}
]
const resultArray = [...array1, ...array2];
console.log(resultArray);
Method 2: Using Array.prototype.concat()
Let’s use the same example, but this time using concat() method. This method does not change the existing arrays, but instead returns a new array.
const array1 = [1,2,3];
const array2 = [3,4,5];
// join the two arrays using concat()
const resultArray = array1.concat(array2);
console.log(resultArray);
// O/P : [1, 2, 3, 3, 4, 5]
But what If we want to concatenate three arrays ?
const array1 = [1,2,3];
const array2 = [4,5,6];
const array3 = [7,8,9];
const resultArray = array1.concat(array2, array3);
console.log(resultArray);
// O/P : [1,2,3,4,5,6,7,8,9]
now let’s check for concatenating arrays of two different types:
const array1 = [1,2,3,4];
const array2 = 'letters';
const resultArray = array1.concat(array2);
console.log(resultArray);
// O/P : [1, 2, 3, 4, "letters"]
Method 3: using Array.prototype.push()
when using push, its important to remember that it won’t create a new array, and change existing array data. so use this by keeping this in mind.
Using Spread and push()
const array1 = [1,2,3];
const array2 = [4,5,6];
const resultArray = array1.push(...array2);
// when you use push, it returns the LENGTH of the combined array
console.log(resultArray); // 6
console.log(array1); // [1, 2, 3, 4, 5, 6]
console.log(array2); // [4, 5, 6]
Using forEach and push() :
const array1 = [1,2,3];
const array2 = [4,5,6];
const resultArray = array2.forEach(item => array1.push(item));
console.log(array1); // [1,2,3,4,5,6]
Using for and push() :
const array1 = [1,2,3];
const array2 = [4,5,6];
for(let x=0; x<array2.length; x++) {
array1.push(array2[x]);
}
console.log(array1); // 1,2,3,4,5,6
Zipper Merge ( Merging two sorted arrays )
Let’s think of a scenario, where we have two arrays (both sorted) like :
const array1 = [1, 3, 5];
const array2 = [2, 4, 6];
and the output we want is also sorted ! something like :
const resultArray = [1, 2, 3, 4, 5, 6];
This can be solved easily using spread operator :
// function to return zipped array
function zip(array1, array2) {
// merge the two sorted arrays
let result = [...array1, ...array2]; // [1, 3, 5, 2, 4, 6]
// sort the result array again
return result.sort((a,b) => a-b); // [1, 2, 3, 4, 5, 6]
}
const array1 = [1, 3, 5];
const array2 = [2, 4, 6];
const resultArray = zip(array1, array2);
console.log(resultArray); // [1, 2, 3, 4, 5, 6]
Unique Array from Two Arrays
Now let’s think of a scenario, where you have two arrays (with some elements in common ) like:
const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];
and the output we want is a new array with unique elements only :
const resultArray = [1, 2, 3, 4, 5, 6];
So what should we do ? We can create a unique array using spread operator and sets like this:
const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];
const mergedArray = [...array1, ...array2];
console.log(mergedArray) // [1, 2, 3, 4, 3, 4, 5, 6]
const resultArray = [...new Set(mergedArray)];
console.log(resultArray) // [1, 2, 3, 4, 5, 6]
Thats all for today, for more tutorials, follow our series – Learn Javascript ES6
Sujay is a Software engineer, based out in Bangalore, India. He is skilled in web development, product engineering and growth hacking. He is passionate about problem solving using technology be it websites, apps or products. You can reach out to him at [email protected]