5 ways to convert a String into an Array in JavaScript
Published: 2022-09-20 15:09:36

## The split() method
This method is used to split a string by a separator provided and returns an array of substrings.

```javascript
const str = 'Tiger,Horse,Elephant,Wolf';
const arr = str.split(','); 
//split string by comma
console.log(arr);
// ["Tiger", "Horse", "Elephant", "Wolf"]
```
To split the string by each character, we can specify an empty string (“”) as the separator.

```javascript
const str = 'jscurious';
const arr = str.split('');
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]
```

The `split()` method accepts a second optional argument which sets the limit on the splits. This limit value decides how many elements will be included in the returned array.

```javascript
const str = 'Cricket | Hockey | Football | Tennis';
const arr = str.split(' | ', 2);
console.log(arr); 
// ['Cricket', 'Hockey']
```

## The Array.from() method
This method returns an array from any [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) object. We can pass a string value to this method to get a character array.

```javascript
const str = 'jscurious';
const arr = Array.from(str);
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]
```

This method also accepts two optional arguments. One is a map function to call on each element of the array, and the other is a value to use as `this` while executing the map function.

```javascript
const str = 'jscurious';
const arr = Array.from(str, (val, index) => val + index);
// adding index value to each element of array
console.log(arr); 
// ["j0", "s1", "c2", "u3", "r4", "i5", "o6", "u7", "s8"]
```

## The spread operator (`…`)
The spread operator extracts and spreads each character of a String. We can wrap all those characters inside an array literal `[]` to create a new array from string.

```javascript
const str = 'jscurious';
const arr = [...str];
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]
```

## The Object.assign() method
This method copies the values and properties from one or more source objects to a target object. We can provide a string as the source and an empty array as the target to create an array from a string.

```javascript
const str = 'jscurious';
const arr = Object.assign([], str);
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]
```

## Using loop
We can loop through each character of a string and push that character to an empty array to create an array from a string.

```javascript
const str = 'jscurious';
const arr = [];
for (let i of str) {
  arr.push(i);
}
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]
```
---
##You may also like
* [Map in JavaScript and when it's a better choice than Object](https://jscurious.com/map-in-javascript-and-how-it-is-better-than-object/)
* [JavaScript Set object to store unique values](https://jscurious.com/javascript-set-object-to-store-unique-values/)
* [Play audio with HTMLAudioElement API in JavaScript](https://jscurious.com/play-audio-with-htmlaudioelement-api-in-javascript/)
* [The URLSearchParams API in JavaScript](https://jscurious.com/the-urlsearchparams-api/)
* [JavaScript Fetch API to make HTTP requests](https://jscurious.com/javascript-fetch-api-to-make-http-requests/)
* [The Vibration API in JavaScript](https://jscurious.com/the-vibration-api-in-javascript/)
* [Generator functions in JavaScript](https://jscurious.com/generator-functions-in-javascript/)
* [A brief guide to Object.defineProperty() method](https://jscurious.com/object-defineproperty-method-in-javascript/)
* [A brief guide to Promises in JavaScript](https://jscurious.com/a-brief-guide-to-promises-in-javascript/)
* [20+ JavaScript shorthand coding tricks](https://jscurious.com/20-javascript-shorthand-techniques-that-will-save-your-time/)

___

**Thanks for your time** ❤️
Find more of my writings on web development at [jscurious.com](https://jscurious.com)