Basics of Javascript · Array · concat() (method)
This article is a transcript of my free youtube series about basics of web development. If you prefer watching over reading, feel free to visit my channel “Dev Newbs”.
Hello my fellow newbs. Another day, another Array method to cover. Today it is going to be a method that helps to put things together. Introducing the concat() method.
The purpose of the concat() method is to merge two or more arrays. It needs to be mentioned that the merged array is a completely new array, the existing arrays are not changed. Let’s see the basic example first.
// Example 1
// basic usage
console.log("EXAMPLE 1");
console.log("--------------------------------------------------");
const boringFruits = ["apple", "cherry", "pear"];
const tropicalFruits = ["pineapple","kiwi","banana"];
// merges all fruits into new array
const boringFirst = boringFruits.concat(tropicalFruits);
console.log(boringFirst );
// the order of merged arrays matters
const tropicalFirst = tropicalFruits.concat(boringFruits);
console.log(tropicalFirst );
As we can see, when you call a concat method on an instance of an array, you need to pass another array as an argument. The result is then a new array returned as a result of this method. Keep in mind that it matters which array is used for calling the method and which one is passed as argument. The logic of the method copies the elements of the array that is used for invoking the concat() method and it then appends values copied from the array passed as argument at the end of our newly created array.
The method itself is quite flexible, because it can handle both arrays, individual elements and their combinations as valid arguments. Let’s see what I mean by that in the second example.
// Example 2
// different arguments
console.log("EXAMPLE 2");
console.log("--------------------------------------------------");
const mammals = ["bear", "rabbit", "fox"];
const birds = ["eagle", "owl", "sparrow", "crow"];
const reptiles = ["turtle", "snake", "lizard"];
// concat multiple individual elements
console.log(mammals.concat("squirrel", "boar"));
// concat multiple arrays
console.log(mammals.concat(birds, reptiles));
// concat combinations of array and individual elements
console.log(mammals.concat("squirrel", birds, "boar"));
The arguments in the first example are two individual elements. As we can see in the result, they have been pushed to the end of the newly created array as was expected.
The second example leverages multiple arrays in the argument list. Again, in the order they have been added, their respective content was appended at the end of the newly created array.
Lastly in the third invocation of the concat() method, we combine individual elements with arrays. Once again, the contents of the newly created array contain these elements in the order they have been provided in the argument list.
The concat() method works also with nested arrays, which we will demonstrate in the following example. Also it can handle empty values which are the case in sparse arrays. Let’s see it in action.
// Example 3
// nested arrays / sparse array
console.log("EXAMPLE 3");
console.log("--------------------------------------------------");
const nested1 = [[1,2,3], [4,5,6], 7, ,8];
const nested2 = [[9,10], 11, 12, [13, 14, , 16]];
// merges all values as they are nested
console.log(nested1.concat(nested2));
The nested values are copied as they existed in the original array. No information is lost during the concatenation process.
It does not really matter whether empty value is nested or not, the concat() method copies it as it sees it.
The last example we will cover today will show how to use concat() with objects that are looking like arrays, but are not quite arrays. One important note here is that on top of length property and numerical properties with values, we will also require a certain new value to be set, in order for the concatenation to work as expected. But no worries, we will show you both ways and you can decide which one is more useful for you.
// Example 4
// concatenating array-like objects
console.log("EXAMPLE 4");
console.log("--------------------------------------------------");
const obj1 = { 0: "a", 1: "b", 2: "c", length: 3 };
const obj2 = { 0: "a", 1: "b", 2: "c", length: 3, [Symbol.isConcatSpreadable]: true };
// default option
console.log(["x", "y", "z"].concat(obj1));
// option with Symbol.isConcatSpreadable set to true
console.log(["x", "y", "z"].concat(obj2));
In the first case, the concat() method considers the provided argument as an individual value that needs to be added to a newly created array at the end. And that is exactly what happens.
On the other hand, once the array-like object has its property Symbol.isConcatSpreadable set to true, all the conditions to treat this object like any other array are met and therefore the concat() method treat it as such — resulting in elements from object being added as if they were in an array.
That was it for today. As always thank you very much for your attention and I hope to see you soon in the next method’s video.