Use Concat to Add Values to an Array
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.