JavaScript: Joining Arrays

In JavaScript, joining arrays means taking two or more arrays and combining them into a single one. Imagine you have a box of fruits and another box of vegetables, and you want to pour them all into one big basket. That’s what array joining is like!

JavaScript gives us many easy ways to do this. Some methods are quick and simple, while others give you more control. Whether you’re working with two small arrays or building a big list from several parts, there’s a tool for the job.

In this article, we’ll explore the how-to methods for joining arrays in JavaScript.

Using concat() Method

The concat() method is like stacking Lego blocks. You take one array and add another one (or more) to it, making a brand-new array without changing the original ones.

Let’s say you have two arrays of animals:

const cats = ['Lion', 'Tiger'];
const dogs = ['Beagle', 'Bulldog'];

You can join them like this:

const animals = cats.concat(dogs);
console.log(animals); // ['Lion', 'Tiger', 'Beagle', 'Bulldog']

The cool thing? cats and dogs are not changed at all. concat() just returns a new array.

You can also join more than two arrays at once:

const birds = ['Eagle', 'Parrot'];
const allAnimals = cats.concat(dogs, birds);

console.log(allAnimals); // ['Lion', 'Tiger', 'Beagle', 'Bulldog', 'Eagle', 'Parrot']

So, if you want a safe and simple way to join arrays without messing with the originals, concat() is a great choice.

Using Spread Syntax (...)

The spread syntax (...) is a modern and clean way to join arrays. It works like opening up a box and spilling out all the items. When you use ... inside a new array, it spreads out all the elements from the original array.

Let’s take our two animal arrays again:

const cats = ['Lion', 'Tiger'];
const dogs = ['Beagle', 'Bulldog'];

To join them using spread syntax:

const animals = [...cats, ...dogs];

console.log(animals); // ['Lion', 'Tiger', 'Beagle', 'Bulldog']

That’s it! Simple and neat.

Want to add a few extra values while merging? You can sprinkle them in like this:

const mixedAnimals = [...cats, 'Elephant', ...dogs];

console.log(mixedAnimals); // ['Lion', 'Tiger', 'Elephant', 'Beagle', 'Bulldog']

You can also join more than two arrays:

const birds = ['Eagle', 'Parrot'];
const allAnimals = [...cats, ...dogs, ...birds];

console.log(allAnimals); // ['Lion', 'Tiger', 'Beagle', 'Bulldog', 'Eagle', 'Parrot']

Spread syntax is great when you want a fresh new array and a nice, readable style.

Using Array.prototype.push() with Spread (for mutating)

Sometimes, you don’t need a new array—you just want to add more items to the one you already have. That’s when push() with spread syntax can help.

Let’s say you start with a list of cats:

const animals = ['Lion', 'Tiger'];
const dogs = ['Beagle', 'Bulldog'];

Now you want to add all the dogs to the animals array. You can use:

animals.push(...dogs);

console.log(animals); // ['Lion', 'Tiger', 'Beagle', 'Bulldog']

This method changes the animals array directly. It doesn’t make a copy—it actually grows the original.

This is great when you already have an array you want to update. You don’t need to keep the original version the same.

Just remember: if you don’t want to change the original, stick with concat() or the spread method in a new array.

Using Array.prototype.unshift() with Spread (prepend)

Just like push() adds items to the end of an array, unshift() adds items to the beginning. If you want to stick something in front of your array, this is the way to go!

Here’s an example:

const animals = ['Beagle', 'Bulldog'];
const cats = ['Lion', 'Tiger'];

Now, let’s add the cats in front of the dogs:

animals.unshift(...cats);

console.log(animals); // ['Lion', 'Tiger', 'Beagle', 'Bulldog']

Just like with push(), this method changes the original array (animals). It doesn’t make a new one.

So, if you want to prepend one array to another, and you’re okay with modifying the first array, unshift(...array) does the trick!

Using Array.prototype.flat() (for nested arrays)

The flat() method is like pressing down a stack of boxes to make everything lie flat in one layer. It’s useful when you have arrays inside an array and want to join them into one.

Let’s say you group your arrays like this:

const cats = ['Lion', 'Tiger'];
const dogs = ['Beagle', 'Bulldog'];
const animals = [cats, dogs];

console.log(animals); 
// [['Lion', 'Tiger'], ['Beagle', 'Bulldog']]

Right now, animals is an array of arrays. To flatten it into one list, use flat():

const flatAnimals = animals.flat();

console.log(flatAnimals); 
// ['Lion', 'Tiger', 'Beagle', 'Bulldog']

By default, flat() only goes one level deep—which is perfect for most simple cases. If your arrays are nested deeper, you can give it a number like flat(2) or even flat(Infinity) to go all the way down.

So, flat() is handy when you’re starting with a nested array and want to squish it into a single, joined array.

Using Array.prototype.reduce() (for custom joins)

The reduce() method is like a helper that goes through a list and keeps building up a result. You can use it to join arrays together, one piece at a time.

This is helpful when you want more control or when you’re working with a dynamic list of arrays.

Here’s an example:

const animalGroups = [
  ['Lion', 'Tiger'],
  ['Beagle', 'Bulldog'],
  ['Eagle', 'Parrot']
];

const allAnimals = animalGroups.reduce((joined, group) => {
  return joined.concat(group);
}, []);

console.log(allAnimals); 
// ['Lion', 'Tiger', 'Beagle', 'Bulldog', 'Eagle', 'Parrot']

animalGroups is an array of arrays. reduce() goes through each group and joins it to the growing result using concat(). It starts with an empty array [] and builds from there.

This is a great way to join many arrays dynamically, especially if you don’t know how many arrays you’ll have ahead of time.

Joining Arrays of Strings into a Single String

Once you’ve combined arrays, you might want to turn the result into one big string. That’s where the join() method comes in. It glues all the items together using a separator you choose — like a space, a comma, or even a dash.

Here’s how it works:

const greetings = ['Hello', 'there'];
const names = ['Edward', 'Lucia'];
const words = greetings.concat(names);

const sentence = words.join(' ');
console.log(sentence); 
// 'Hello there Edward Lucia'

You can also use commas, dashes, or anything else as the separator:

const list = words.join(', ');
console.log(list); 
// 'Hello, there, Edward, Lucia'

Just remember: join() doesn’t combine arrays — it turns one array into a string. So first, merge your arrays using concat() or spread (...), then apply join() to get the final sentence.

Summary Table

Notes:

• “Mutates Original?” means: does it change the array you started with?
• “Can Insert Extra Items?” means: can you add your own custom values in between?
• “Handles Nested Arrays?” means: can it take [[], []] and make it flat?

Conclusion

We’ve explored a variety of ways to join arrays in JavaScript! From the classic concat() to the modern spread syntax (...), and even the more customizable reduce() method, there’s a tool for every need.

Here’s a quick recap:

• concat(): Great for safely combining arrays without changing the originals.
• Spread syntax (...): A clean, modern way to join arrays and add extra items in between.
• push(...array) and unshift(...array): Handy when you need to add items to an existing array.
• flat(): Perfect for flattening nested arrays into one simple array.
• reduce(): Offers full control for joining arrays, especially when you need custom logic.

The best method for you depends on what you’re trying to do. So feel free to experiment with these techniques to see which one fits your needs the best.