Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1055 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Use Concat to Add Values to an Array

4:38 JavaScript lesson by

Concat creates a shallow copy of an existing array that includes any arguments you pass to it. In this lesson, we look at using concat for adding additional values to an array then cover some more useful features such as accepting other arrays as arguments & how to chain concat with other array methods such as forEach

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Concat creates a shallow copy of an existing array that includes any arguments you pass to it. In this lesson, we look at using concat for adding additional values to an array then cover some more useful features such as accepting other arrays as arguments & how to chain concat with other array methods such as forEach

Avatar
Francesco

Would someone be able to tell me what web editor Shane Osbourne uses during his Array videos? It looks like a really nice simple left / right "repl" output using NodeJS, but i'm not sure which one it is and wanted to try it. Thanks for your time and patience and all of you keep up the great work! - Frankie

Avatar
Shane

Hi Francesco

It's just https://www.jetbrains.com/webstorm/

Then I have a run configuration setup to a key binding, so at any point I can hit CMD + SHIFT + P and the current file will be executed using Node

In reply to Francesco
Avatar
Francesco

Thanks Shane, that in itself seems like a really cool little video tip. Awesome stuff :)

In reply to Shane
Avatar

Hi Francesco

It's just https://www.jetbrains.com/webstorm/

Then I have a run configuration setup to a key binding, so at any point I can hit CMD + SHIFT + P and the current file will be executed using Node

Any chance you can tell us how to set that up? Looks very convenient

In reply to Shane
Avatar
alejandropereira

Hello Shane, how could i use concat, but append items to the start of the array?

Concat is a method that you call on an existing array and it returns back to you a new array that has the original, plus any parameters you pass in here. Let's see this in action. If we create an array with two items and we wanted to add a third item to it, we can use concat. We're saying new items equals items that concat three. Items is the original array.

All arrays have a concat method which takes a copy of this original array, adds to it any parameters you pass in here, and returns a new array. If we log this to the console we should see one, two, and three. There you have it. That's the basics of array concat.

Now let's look at a few other features. You are not limited to a single argument. You can provide as many here as you like. They all get added to the array. You're also not limited by type, so you can add a string if you like, or an undefined value. Any number of items here is OK, and they all get appended to a copy of the original items array.

One of the more interesting features of concat is that it can actually take in other arrays. For example, if we provide another array inside here with the numbers three and four, we actually get the same result as calling it with three and four separately.

This is because concat looks at each and every argument and if it's an array it will pull each value from that array and add it to the original. This works with multiple items as well. Here you are starting with one array. We're picking out the values from this array and this array, and we end up with a single flat array. Again, you can mix types. That will work also.

The one limitation which can trip people up is that you cannot do nested arrays. If we were to nest two of these inside another array and run that, you'll see we actually get those two as an array. That's just one thing to keep in mind. It can flatten arrays by only one value deep.

Now we'll look at a more realistic example of how you might use concat in your application. Let's say you have an array of objects, where each object represents a person with a simple name property. If you wanted to do something with each person, you could call for each. We'll just console log person.name. You can see we get Shane and Sally.

Now if we add another array of people, maybe it comes from a different source or it's generated from user input. We'll call this people two, and we'll say its Simon and Ben. We wouldn't want to simply duplicate this code with people two. Although it would work, a better way would be to use concat.

We can take the original people array, call concat with people two, and then call for each. This works because, if you remember from the beginning of this video, when you call concat on an existing array, it takes the original array, then it looks at each argument. If it's an array itself, which this is, it will pull out each value, in this case each object, add it to a copy of people, and return a new array.

By the time we get to this line we're actually acting on four items. We're acting on these two and these two, which is why we get Shane, Sally, Simon, and Ben.


Featured course:

Building apps with Ionic 2

Building apps with Ionic 2

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?