Arrays: String-Array Methods

Joining array elements into a string

The .join(format) method is great for displaying array elements with your own customization. Whatever string you put inside as an argument becomes the connectors for the elements of the array.

Example:

let stash = ["Twix", "Nerds", "Peppermint patties", "M&Ms", "Smarties"];
let display = stash.join(" <==> ");
//display: Twix <==> Nerds <==> Peppermint patties <==> M&Ms <==> Smarties

JavaScript has a default way of displaying its variables. When it comes to displaying an array, the default setting is simply array.join(",");

Splitting a string into an array

What's the opposite of join? It's .split(splitMarker). For this, put in a string and the computer sends back an array of items. It finds what you put into the splitMarker, removes it everywhere it sees it, and sends the pieces back as array elements. It's .join() in reverse!

Example:

let myList = "catxdogxmonkeyxoxen";
let animals = myList.split("x");
//animals; // ["cat", "dog", "monkey", "o", "en"]

This one cuts out the letter "x" and sends back all the pieces. Oops, we accidentally split up the "oxen" into "o" and "en"! I guess that means we need to be careful when using this.

By the way, if you pass in an empty string "", you get back an array of all the single characters!

let myGreeting = "Hello, coders of the universe!";
let splitThem = myGreeting.split("");
//splitThem → [ "H", "e", "l", "l", "o", ",", " ", "c", "o", "d", "e", "r", "s", " ", "o", "f", " ", "t", "h", "e", " ", "u", "n", "i", "v", "e", "r", "s", "e", "!" ]

CSV files

This is a little off-topic, but it relates. You may have seen a file here and there that ends with .csv. CSV means comma separated value. If you use a spreadsheet program like Microsoft Excel, Google Sheets, or Apple's Numbers, you may have seen an option to save a file as a .csv file.

Why am I bringing this up? Well, CSV files are pretty common out there and instead of being intimidated by them, I just wanted to mention what they really are at their core. Can you guess?

Well, imagine that each cell in your spreadsheet is an element in an array. If you did mySpreadsheetArray.join(",");, you'd essentially have what a CSV file looks like inside.

And what basically happens when another spreadsheet program (or other viewer) tries to read a CSV file? You guessed it! It essentially runs myCSVFile.split(","); on it to get all the cell values back.

There's a little more to it behind the scenes, but CSV files are commonly used because spreadsheet programs tend to add a lot of other data to a file, like the fonts and colors you used, and so on. By trimming down to CSV and then importing it, you clean up the file and keep only the data, which allows other programs to understand it.

Here's a wacky exercise if you want to test this theory out.

Open up a spreadsheet program like Excel, Sheets, or Numbers On one row, put things you enjoy. Only put one thing per cell, though. Go to "Save As..." and save the file as a CSV file. Open the file in a text editor, like Notepad. You'll see all the items you typed in, separated by commas! Now highlight it and copy it to the clipboard. Go to a coding console (like in repl.it or in developer tools) Type in `let favorites = "` Leave the quote open. Then paste in from the clipboard. Hit backspace once so the cursor moves to your last pasted character. Now put the closing quote `";` Hit `enter`. You can ignore the > undefined Ok, split it! `let splitThem = favorites.split(",");` You can still ignore the > undefined Now each element of splitThem has one of your favorite things! You can check by typing in `splitThem` and hitting `enter`. Test out individual elements using their index numbers! `splitThem[2]; //"Legend of Zelda"`	1
	2
	3
	4
	5
	6
	7
	8
	9
	10
	11
	12
	13