How to Append an Array to Another Array in JavaScript?

How do I append an array to another array in an easy way in JavaScript?

Well, in this article, we will hand you the solutions for that. You just have to continue reading!

It happens when you might need to combine two arrays to make it a larger and unified array. This process is known as appending or merging arrays in JS.

So bear with us as we explore different methods to append an array to another array in JavaScript, with clear explanations and examples.

What does JavaScript append to array means?

In JavaScript, “appending to an array” means adding one or more elements to the end of an existing array.

There are several ways to do this, including using the push() method, the concat() method, or the spread operator.

Solutions on how to Append an Array to Another Array in JavaScript

To append an array to another array in JavaScript, you can use different methods based on your specific use case.

Let’s explore each solutions in detail:

Solution 1: Using the concat() method

The concat() method is a simple and effective way to merge two arrays in JavaScript. It creates a new array by combining the elements of the original arrays.

Here’s an example:

const samplearray1 = [10, 20, 30, 40, 50];
const samplearray2 = [60, 70, 80, 90, 100];
const mergedArray = samplearray1.concat(samplearray2);✅

console.log(mergedArray);

Output:

[
  10, 20, 30, 40,  50,
  60, 70, 80, 90, 100
]

Solution 2: Using the the Spread Operator

The spread operator was introduced in ECMAScript 6 (ES6), which provides a concise merging of array and in an elegant way to combine arrays.

This operator allows the expansion of array elements into separate items, facilitating the creation of a new array with ease and elegance.

Here’s an example:

const samplearray1 = [100, 200, 300, 400, 500];
const samplearray2 = [600, 700, 800, 900, 1000];
const mergedArray = [...samplearray1, ...samplearray2];

console.log(mergedArray);

Output:

[
   100, 200, 300,
   400, 500, 600,
   700, 800, 900,
  1000
]

Solution 3: Using the push() method

Though primarily used to add elements to the end of an array, the push() method can also be used to merge arrays by appending one array’s elements to another.

Here’s an example:

const samplearray1 = [10, 20, 30];
const samplearray2 = [40, 50, 60];

samplearray1.push(...samplearray2);

console.log(samplearray1);

Output:

[ 10, 20, 30, 40, 50, 60 ]

Solution 4: Using a loop

A loop can be used to iterate over the elements of one array and add them to another array using the push() method.

Here’s an example:

const samplearray1 = [00, 01, 02, 03, 04];
const samplearray2 = [05, 06, 07, 08, 09];
for (let i = 0; i < samplearray2.length; i++) {
    samplearray1.push(samplearray2[i]);
}
console.log(samplearray1);

Output:

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

Solution 5: Using the apply() method

The apply() method, used in combination with concat(), enables the merging of arrays dynamically.

Here’s an example:

const samplearray1 = [1, 2, 3, 4, 5];
const samplearray2 = [6, 7, 8, 9, 10];
const mergedArray = Array.prototype.concat.apply(samplearray1, samplearray2);

console.log(mergedArray);

Output:

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

Solution 6: Using splice() method

The splice() method enables the insertion of elements from one array into another at a precise position.

Here’s an example:

const samplearray1 = [101, 202, 303, 404, 505];
const samplearray2 = [606, 707, 808, 909, 1000];

samplearray1.splice(samplearray1.length, 0, ...samplearray2);
console.log(samplearray1); 

Output:

[
   101, 202, 303,
   404, 505, 606,
   707, 808, 909,
  1000
]

Conclusion

In conclusion, this article provides different approaches to append one array to another in JavaScript. 

These methods offer effective ways to merge arrays based on specific requirements.

Using the solutions provided, you can effectively append an array to another array in JS and easily create larger and unified arrays in your code.

We are hoping that this article provides you with enough information that helps you understand the JavaScript append to array.

You can also check out the following article:

•  isnumeric in JavaScript
• JavaScript tostring
• Array Destructuring JavaScript

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel  · View all posts by Caren Bautista →