Use Concat to Add Values to an Array

Shane Osbourne
InstructorShane Osbourne

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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

[00:01] 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.

[00:29] 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.

[00:55] 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.

[01:29] 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.

[01:48] 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.

[02:22] 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.

[02:45] 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.

[03:18] 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.

[03:50] 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.

[04:26] 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.

Francesco
Francesco
~ 6 years ago

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

Shane Osbourne
Shane Osbourneinstructor
~ 6 years ago

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

Francesco
Francesco
~ 6 years ago

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

Tony Brown
Tony Brown
~ 6 years ago

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

Alejandro Pereira
Alejandro Pereira
~ 6 years ago

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

Abdullah
Abdullah
~ 3 years ago

@alejandropereira

You can apply the concat method to the array which should come first, and supply the other array as an argument. Example:

let arr = [[1, 2, 3]]

arr.concat([[4, 5, 6]]) // [[1, 2, 3, 4, 5, 6]]

[[4, 5, 6]].concat(arr) // [[4, 5, 6, 1, 2, 3]]

Hope that helps