In this part I will discuss using the .concat() method which is used by Strings and Arrays. Initially, I wanted this article to include discussion of the .slice() function, but things got a little long.
Instead, there will be a short dive into the .flat() method for Arrays near the end of this article.
We'll also take a look at rest and spread parameters.
What is Concatenation?
Concatenation, or concat(), is pretty straightforward. For strings, you use it to join two or more strings together to form a single string. For arrays, you use it to join two or more arrays to form a single array.
The syntax for both methods is quite similar.
str.concat(...strings);
arr.concat(...arrays);
In this case, the three leading dots represent rest parameters. Later in this article we will use spread parameters which are similar.
Rest Parameters vs Spread Parameters
In case that last paragraph wasn't clear, let's talk about how rest and spread parameters are used.
Rest parameters are used when you define a method. Say you have a list of parameters. The rest parameter groups those parameters into an array that use can use.
Spread parameters are used when you use a method. Say you have an array variable, but you want each item to fill in a variable slot. The spread parameter will take the elements out of the array and treat them individually.
We'll speak of this again later in this article.
Concatenating strings
let str;
const str0 = "";
const str1 = "Garnet";
const str2 = "Amethyst";
const str3 = "Pearl";
str = str0.concat(str1,str2,str3);
// Returns: "GarnetAmethystPearl"
// str: "GarnetAmethystPearl"
What a mess that is, isn't it?! See why I like to use a .join() more than using .concat() like this? We had to add another variable str0, because in order to concatenate, you need to have an existing string to concatenate with.
We could have also done this.
str = "".concat("Garnet","Amethyst","Pearl");
// Returns: "GarnetAmethystPearl"
// str: "GarnetAmethystPearl"
But we would still have these strings crashing into each other because concatenation joins things directly. You can resolve this by either adding a space to the end of the string, or by adding space elements.
str = "".concat("Garnet"," ","Amethyst"," ","Perl");
// Returns: "Garnet Amethyst Perl"
// str: "Garnet Amethyst Perl"
But there is some advantage, to putting all of these items in an array, and then joining them together with a single space like in our first example.
On the String class has the advantage of using the + and += operators to join strings together, but because there is no separator, they all just smash together.
str = "Garnet" + ", " + "Amethyst" + ", and" + "Pearl";
// Returns: "Garnet, Amethyst, and Pearl"
// str : "Garnet, Amethyst, and Pearl"
str += "--AND STEVEN!";
// Returns: "Garnet, Amethyst, and Pearl--AND STEVEN!"
// str : "Garnet, Amethyst, and Pearl--AND STEVEN!"
Notice, we don't have to start with an empty string (""). We should initialize a string with an empty string if we plan on adding stuff to the string with the addition-assignment operator.
We could have also write the example with the empty string on the left side of the .concat() function with "Garnet", but not have "Garnet" on the right side.
str = "Garnet".concat(" ","Amethyst"," ","Perl");
// Returns: "Garnet Amethyst Perl"
// str: "Garnet Amethyst Perl"
But see the advantage of using the operators instead of the .concat().
Concatenating Arrays
Sadly, the option to use operators is not available for Arrays. Concatenating arrays is only available with the .concat() method. Let's show what happens when you try to use the + operator between our objects, then show the right way to do array concatenation.
const nl_east = ["ATL","NYM","PHI","MIA","WAS"];
const nl_central = ["STL","MIL","CHC","CIN","PIT"];
const nl_west = ["LAD","SD","SF","ARI","COL"];
let nl;
nl = nl_east + nl_central + nl_west;
// Returns: "ATL,NYM,PHI,MIA,WASSTL,MIL,CHC,CIN,PITLAD,SD,SF,ARI,COL"
// nl: "ATL,NYM,PHI,MIA,WASSTL,MIL,CHC,CIN,PITLAD,SD,SF,ARI,COL"
Yikes! Everything was converted to strings, and the first and last entries of each string concatenated together with no separator between them.
Let's try it this time with .concat(). Notice, instead of starting with an empty string, I start with an empty array ([]).
nl = [].concat(nl_east,nl_central,nl_west);
// Returns: ['ATL', 'NYM', 'PHI', 'MIA', 'WAS', 'STL', 'MIL', 'CHC', 'CIN', 'PIT', 'LAD', 'SD', 'SF', 'ARI', 'COL' ]
// nl: ['ATL', 'NYM', 'PHI', 'MIA', 'WAS', 'STL', 'MIL', 'CHC', 'CIN', 'PIT', 'LAD', 'SD', 'SF', 'ARI', 'COL' ]
Like with strings, we could have put one of the elements on one side and done this operation, but there is something more aesthetically satisfying to put everything on one side.
nl = nl_east.concat(nl_central,nl_west);
// Returns: ['ATL', 'NYM', 'PHI', 'MIA', 'WAS', 'STL', 'MIL', 'CHC', 'CIN', 'PIT', 'LAD', 'SD', 'SF', 'ARI', 'COL' ]
// nl: ['ATL', 'NYM', 'PHI', 'MIA', 'WAS', 'STL', 'MIL', 'CHC', 'CIN', 'PIT', 'LAD', 'SD', 'SF', 'ARI', 'COL' ]
What if we could just concatenate these arrays together in another array? Would that work? Yes...and no.
nl = [nl_east,nl_central,nl_west];
/*
Returns:
[
[ 'ATL', 'NYM', 'PHI', 'MIA', 'WAS' ],
[ 'STL', 'MIL', 'CHC', 'CIN', 'PIT' ],
[ 'LAD', 'SD', 'SF', 'ARI', 'COL' ]
]
nl:
[
[ 'ATL', 'NYM', 'PHI', 'MIA', 'WAS' ],
[ 'STL', 'MIL', 'CHC', 'CIN', 'PIT' ],
[ 'LAD', 'SD', 'SF', 'ARI', 'COL' ]
]
*/
We get an array of arrays, or a "matrix". However, there is a way to concatenate arrays without using the .concat() method. We can use a spread operator (...). The spread operator will extract the elements of the array. it would be like inserting the elements (in this case strings) into an array.
nl = [...nl_east,...nl_central,...nl_west];
// Returns: ['ATL', 'NYM', 'PHI', 'MIA', 'WAS', 'STL', 'MIL', 'CHC', 'CIN', 'PIT', 'LAD', 'SD', 'SF', 'ARI', 'COL' ]
// nl: ['ATL', 'NYM', 'PHI', 'MIA', 'WAS', 'STL', 'MIL', 'CHC', 'CIN', 'PIT', 'LAD', 'SD', 'SF', 'ARI', 'COL' ]
Think of the spread operator as like cracking a peanut out of its shell. In this case, with our [...nl_east,...nl_central,...nl_west] example, we take the "peanuts" out of the nl_east, nl_central, and nl_west shells, then put them in an even bigger shell.
Of course, a matrix is still OK. We could flatten the matrix with the .flat() function.
nl = [nl_east,nl_central,nl_west].flat();
// Returns: ['ATL', 'NYM', 'PHI', 'MIA', 'WAS', 'STL', 'MIL', 'CHC', 'CIN', 'PIT', 'LAD', 'SD', 'SF', 'ARI', 'COL' ]
// nl: ['ATL', 'NYM', 'PHI', 'MIA', 'WAS', 'STL', 'MIL', 'CHC', 'CIN', 'PIT', 'LAD', 'SD', 'SF', 'ARI', 'COL' ]
Note that the .flat() function will only flatten an embedded array by one level. If you have arrays in arrays in arrays, you will still have an array or arrays if you use it. (The JavaScript guys should have added an option such that if you set the depth to zero, it would flatten all arrays, but that's for another article.)
A little bit more about .flat() Array
Let's make an array of arrays of arrays with all the Major League Baseball teams this time.
let mlb = [
[
[ 'NYY', 'TOR', 'TB', 'BAL', 'BOS' ],
[ 'CLE', 'CWS', 'MIN', 'DET', 'KC' ],
[ 'HOU', 'SEA', 'LAA', 'TEX', 'OAK' ]
],
[
[ 'ATL', 'NYM', 'PHI', 'MIA', 'WAS' ],
[ 'STL', 'MIL', 'CHC', 'CIN', 'PIT' ],
[ 'LAD', 'SD', 'SF', 'ARI', 'COL' ]
]
]
If we use mlb.flat(), the teams that were grouped by their league on the first level and grouped by their division on the second level are now all grouped by their division on the first level.
mlb.flat()
/*
[
[ 'NYY', 'TOR', 'TB', 'BAL', 'BOS' ],
[ 'CLE', 'CWS', 'MIN', 'DET', 'KC' ],
[ 'HOU', 'SEA', 'LAA', 'TEX', 'OAK' ],
[ 'ATL', 'NYM', 'PHI', 'MIA', 'WAS' ],
[ 'STL', 'MIL', 'CHC', 'CIN', 'PIT' ],
[ 'LAD', 'SD', 'SF', 'ARI', 'COL' ]
]
*/
If we increase the depth to two, now all the teams are in the same array.
mlb.flat(2)
/*
['NYY', 'TOR', 'TB', 'BAL', 'BOS', 'CLE', 'CWS', 'MIN', 'DET', 'KC', 'HOU', 'SEA', 'LAA', 'TEX', 'OAK', 'ATL', 'NYM', 'PHI', 'MIA', 'WAS', 'STL', 'MIL', 'CHC', 'CIN', 'PIT', 'LAD', 'SD', 'SF', 'ARI', 'COL']
8?
Using mlb.flat(0) has the same effect as just stating mlb and using mlb.flat(3) has the same effect as mlb.flat(2). It probably would have made more sense that once we got to mlb.flat(3), it would have been like using .join() to convert it all to a string. But it doesn't work like that.
Concatenating Both
So what happens if we try to concatenate strings and arrays?
It's a bit weird, but it is possible.
If you add a string to an array, that string will be added to the array.
If you add an array to a string, the array will be converted to a string, but remember no spaces are added to separate the string from the array entries.
let gems = ["Garnet","Amethyst","Pearl];
let steven = "Steven";
gems.concat(steven);
// Returns: [ 'Garnet', 'Amethyst', 'Pearl', 'Steven' ]
// gems : ["Garnet","Amethyst","Pearl]
steven.concat(gems);
// 'StevenGarnet,Amethyst,Pearl'
// steven : "Steven"
In future examples will try to demonstrate this with other data types like numbers, booleans, objects, and more.
The next part of this series will discuss the .slice() method.
Top comments (0)