JavaScript String.prototype.split() and Array.prototype.join()
Published: 2021-10-16 22:23:19

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

First, take a look at this:
```javascript
//String to Array    string.split()
//Array to String    array.join()
```

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

&nbsp;
&nbsp;
# String.prototype.<b>split()</b>
This method will take any <b>string</b> and _divide_ it into <b>elements of an array</b>. The first parameter (separator) is used to divide the string into array elements.

The <b>split()</b> method is non-destructive and will return the array.

### Example:
```javascript
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 <b>string</b> was cut up into separate array elements through the division of the first parameter - in this case, <b>(" ")</b>, an empty spaced character.

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

&nbsp;
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
```javascript
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 <b>'Hello my'</b> and <b>'is Justin Bernard'</b> when splitting the string with the parameter (" name "). 

<b>Notice</b> 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).

&nbsp;
One more thing about the split() function is you can add a <b>second parameter (limit)</b>. This parameter limits how many elements will be split.

### Example:
```javascript
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 - <b>[ 'Hello', 'my', 'name' ]</b>. This is because the split() functions' second parameter is set to 3, meaning only 3 elements would be split.




&nbsp;
&nbsp;
# Array.prototype.<b>join()</b>

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

The <b>join()</b> method is non-destructive and will return the string. 

### Example
```javascript
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 (<b>" "</b>) in between each element.

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

### Example:
```javascript
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 <b>hyphen (-)</b> in between each word of the array.

&nbsp;
&nbsp;

##Conclusion:

- The <b>split()</b> method is used to divide a string into <b>elements of an array</b> 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 <b>join()</b> method is used to attach elements of an array as a <b>string</b> WITH the parameter's characters joined in between each element.

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