Various ways to convert String to Array in JavaScript

The String in JavaScript can be converted to an Array in 5 different ways. We will make use of split, Array.from, spread, Object.assign and loop. Let’s discuss all the methods in brief.

The split() method

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

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.

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.

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 object. We can pass a string value to this method to get a character array.

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.

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 a string.

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.

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.

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"]

Amitav Mishra

JS Curious