Combine Values of an Array into a String with Join
The join() method joins all elements of an array into a string. In this lesson we first look at why join is often a better option than regular string concatenation. Then we move onto an example which shows a simple way of storing lines of text in an array and outputting them with a new line separator and we finish by looking at ways to chain multiple array methods together.
[00:01] Array join produces a string that is the result of adding together all items of an array. Take this example. If we wanted to output this full name with a space in-between without using join, you would have to do something like access the first item in the array, add an empty space, access the second item, and that would work.
[00:29] This is extremely fragile, however. Just adding a middle name can break it. Now it's not what we expect. You could fix that by accessing the third item, but if you wanted all names, you would have to go back and add in another space, and access the next item. This is basically a terrible way to write a program. It's not scalable and it's extremely error prone.
[00:57] It's also exactly what array join was designed for. Really what you want here is to say however many items there are, give me them all back as a string, and I want to provide the separator or the glue in-between.
[01:13] That's how join works. You call it on an existing array. You pass along what you want that glue or the separator to be. In our case, we just want an empty space, so we pass a string with an empty space. There you have the same result. The difference here is that it's completely dynamic now. The amount of items in the array doesn't matter. It will always work.
[01:38] You can provide any value here. If you want the elements to be joined without the space, then you simply provide a string without any character inside it. If you don't provide any argument at all, the elements will be comma-separated. This is not coming from here. The comma is the default argument to join, so if you don't provide one it will be used.
[02:15] Now let's look at a practical use case. Let's say you have a command line program and you want to provide a help screen to users. You could store each line of the help text in an array. Then you can check if the user has run the help command by looking at the third argument available to us on the process, the argv property.
[02:39] If they did, we want to output the help text to the screen. We can console log help. This time we use the join method with a new line character. This will take every item in the help array, put a new line in-between each one, and output the result to the console.
[03:02] If we move over to the terminal and run this command, you'll see we get our help output. That's basic join functionality. You can also chain it with other array methods. Similar to our first example, if we had a name instead that was already a string and we wanted to uppercase each letter here and return back a string, we could first split the name on any space.
[03:44] Then we could map over that and return the first character upper cased along with the rest of the string in its normal form. Then finally join it back together. If we save this to a variable, and then log it to the console, you can see we get the desired result.
[04:15] Calling split on this creates an array with Shane and Osbourne in it. Then the map function runs for each item in this array, which produces another array with the items Shane and Osbourne. Finally, calling join on this using an empty space creates this string.