Concatenation of Strings and Arrays in JavaScript
Tags: javascript, concat, flat
Published: 2022-12-19 20:01:25

---
title: Concatenation of Strings and Arrays in JavaScript
published: true
description: Using Concatenation in Strings and Arrays, also exericses with Array flat and the rest and spread parameters
tags: javascript, concat, flat
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-19 19:38 +0000
---
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.

```javascript
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

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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. 

```javascript
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 (`[]`).

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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. 

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.