JavaScript String.prototype.split() and Array.prototype.join()

bern0241 — Sat, 16 Oct 2021 22:23:19 +0000

Hello, here I will explain the differences between the split() and join() methods in JavaScript.

First, take a look at this:

//String to Array    string.split()
//Array to String    array.join()

I will explain these methods down below - let's begin:

String.prototype.split()

This method will take any string and divide it into elements of an array. The first parameter (separator) is used to divide the string into array elements.

The split() method is non-destructive and will return the array.

Example:

let string = "Hello my name is Justin Bernard"

let newArray = string.split(" ")

console.log(newArray)
// Log: [ 'Hello', 'my', 'name', 'is', 'Justin', 'Bernard' ]

As you can see, the string was cut up into separate array elements through the division of the first parameter - in this case, (" "), an empty spaced character.

[ 'Hello', 'my', 'name', 'is', 'Justin', 'Bernard' ] was output, each word of the string divided into an element.

If we try splitting the array a second time but with the parameter " name ", you will see that the string will be split into two elements.

Example

let string = "Hello my name is Justin Bernard"

let newArray = string.split(" name ")

console.log(newArray)
// Log: [ 'Hello my', 'is Justin Bernard' ]

An array was created with elements 'Hello my' and 'is Justin Bernard' when splitting the string with the parameter (" name ").

Notice the split() function will remove the characters in the string of that with the same characters of the parameter (" name " is missing in the array).

One more thing about the split() function is you can add a second parameter (limit). This parameter limits how many elements will be split.

Example:

let string = "Hello my name is Justin Bernard"

let newArray = string.split(" ", 3)

console.log(newArray)
// Log: [ 'Hello', 'my', 'name' ]

Here you will notice that only 3 elements of the split() were created - [ 'Hello', 'my', 'name' ]. This is because the split() functions' second parameter is set to 3, meaning only 3 elements would be split.

Array.prototype.join()

This method will take any array and attach all the elements of the array into a string. All that is required is one parameter of character(s) that will be used as a connection string to each individual element of the array.

The join() method is non-destructive and will return the string.

Example

let array = ['Hello', 'my', 'name', 'is', 'Justin', 'Bernard']

let newString = array.join(" ")

console.log(newString)
// Log: Hello my name is Justin Bernard

As you can see, the array was connected together as a string with the join() function's parameter (" ") in between each element.

Let us try another example of the join() function, but with the parameter ("-") instead.

Example:

let array = ['Hello', 'my', 'name', 'is', 'Justin', 'Bernard']

let newString = array.join("-")

console.log(newString)
// Log: Hello-my-name-is-Justin-Bernard

This time, the string was created with a hyphen (-) in between each word of the array.

Conclusion:

The split() method is used to divide a string into elements of an array WITH characters of the first parameter in between. The second parameter is optional and can be used to limit how many elements become split.
The join() method is used to attach elements of an array as a string WITH the parameter's characters joined in between each element.

I hope you understand how both the split() and join() methods work now. Have a great day!

DEV Community: bern0241

JavaScript String.prototype.split() and Array.prototype.join()

String.prototype.split()

Example:

Example

Example:

Array.prototype.join()

Example

Example:

Conclusion: