FreeCodeCamp and JavaScript: The split() Method Part 1

Today I want to talk about one of the string methods.  These are used to operate on Strings and are “built-in” to JavaScript.  In other words, there included with the base package and you don’t need to “import” anything.  If you don’t know what that means, that’s okay; just know that you can always use these methods anytime you have JavaScript.

The method I want to cover today is the split() method, which takes a string, cuts it up into a bunch of substrings, and stores those substrings into an array.

Here’s the syntax – thanks, MDN!

str.split([separator[, limit]]);

Yes, um, thanks.  So, looking at the above, str is the string we want to split, say, for example, “How are you today?”  There are two parameters, both optional:

  • separator: This is the character that you’ll use to split the words – it tells JavaScript how to separate the string into chunks.  It’s either a string or a Regular Expression (Regex) – the latter would be a whole series of blog posts in itself, so for now I suggest you read about it here.  If you don’t put an operator, there’s nothing to use to separate the string, so you get the whole string back.  On the other hand, if you put a blank string (“”), you’ll get the string back as an array of characters.
  • limit: This is a way to tell the split() method how many splits you want – it will execute the splt operation starting at the beginning of your string, until this number.  If you specify more splits than the string has, it’ll quit at the end of the string.

The method returns the array that contains the substrings that have been split.  The separator itself isn’t returned; and if the separator you specify doesn’t exist in the string, you’ll get the whole string back.  Also, per MDN and concerning regexp: “If separator is a regular expression that contains capturing parentheses, then each time the separator is matched, the results (including any undefined results) of the capturing parentheses are spliced into the output array. However, not all browsers support this capability.”

OK, enough talk.  How about some examples?

function splitString(stringToSplit, separator) {
  var arrayOfStrings = stringToSplit.split(separator);
  console.log(‘The original string is: “‘ + stringToSplit + ‘”‘);
  console.log(‘The separator is: “‘ + separator + ‘”‘);
  console.log(‘The array has ‘ + arrayOfStrings.length + ‘ elements: ‘ + arrayOfStrings.join(‘ / ‘));

What we have here is a function called splitString() that will perform the split operation on an input of a string and a separator that are passed to it.  The operation is performed and the result is stored in a variable called arrayOfStrings.  Then we get the original string printed to the console, the separator printed to the console, and the array with the substrings in it printed to the console.

var tempestString = ‘Oh brave new world that has such people in it.’;
var monthString = ‘Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec’;
var space = ‘ ‘;
var comma = ‘,’;

So, we’ve created four variables, two strings that we want to chop up, and two that specify a separator.  This is easier than putting the whole string in the parameter you’re sending.

splitString(tempestString, space);
splitString(monthString, comma);

And in these three statements we call the function and send it various combinations of strings and separators.

Let’s look at the results we get back:

The original string is: “Oh brave new world that has such people in it.”
The separator is: ” “
The array has 10 elements: Oh / brave / new / world / that / has / such / people / in / it.

The original string is: “Oh brave new world that has such people in it.”
The separator is: “undefined”
The array has 1 elements: Oh brave new world that has such people in it.

The original string is: “Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec”
The separator is: “,”
The array has 12 elements: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec

In the first example, the separator we specify is the empty space character {” “). We get back the sentence split into words – note that the last element contains a word AND the period that was at the end of the sentence.  That’s because there is no space between the word and the period.

The second example shows what happens if you don’t specify a separator.  You just get the original string back.

The third example is the months of the year, which we sent with commas – NO spaces – between the words.  We told it to separate using the comma, and we get back an array that has the months as separate elements. Note that it didn’t return the comma because the separator isn’t returned.

That’s it for today – we’ll get into some more complex examples next time!


3 thoughts on “FreeCodeCamp and JavaScript: The split() Method Part 1

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s