How to Easily Convert String to Array in JavaScript

There are 4 ways to easily convert string to Array in JavaScript where most of them are 1 liner code. Let’s explore the methods.

Methods to Convert String to Array in JavaScript

Here are the list of 4 methods where we can convert string to array. Since each of them have their own properties and features, we can choose which to use depending on our needs.

• String split() Method
• Spread Operator(...) Method
• Array from() Method
• Object assign() Method

Let’s look into each details with illustration below.

String split() Method

split() is part of original String standard built-in object method in JavaScript.

Its features includes:

• Option to specify splitting character. If nothing is specify, it will split up all characters
• Return new array as the result
• No change to the original string

Below shows the example where we split the string base on empty string, space character, and ‘e’ character.

const myString = "one two three";

let myArray = myString.split('');
console.log(myArray); // ["o", "n", "e", " ", "t", "w", "o", " ", "t", "h", "r", "e", "e"]

myArray = myString.split(' ');
console.log(myArray); // ["one", "two", "three"]

myArray = myString.split('e');
console.log(myArray); // ["on", " two thr", "", ""]

Spread Operator(...) Method

Spread Operator(...) is one of the expression in JavaScript that spread out any iterable objects. Its usage is to put 3 dots ... in front of the variable we want to spread.

Its features includes:

• Spreading a string into individual character
• Can insert other characters during the formation of new array
• No change to the original string

Below shows the example where we split the string into an array containing individual characters. This method will be useful if we need to process all characters one at a time.

const myString = "one two three";

let myArray = [...myString];
console.log(myArray); // ["o", "n", "e", " ", "t", "w", "o", " ", "t", "h", "r", "e", "e"]

myArray = ['A', ...myString];
console.log(myArray); // ["A", "o", "n", "e", " ", "t", "w", "o", " ", "t", "h", "r", "e", "e"]

Array from() Method

from() is part of original String standard built-in object method in JavaScript. It will create new array by shallowing copy elements from array-like object.

Its features includes:

• Create new array by having all characters split into individual elements
• Allow performing of operation to modify elements while creating the array
• Datatype will be changed based on the nature of value
• No change to the original string

Below shows the example where first, we perform a normal conversion to individual character array. In addition, we also have an array where we can perform a multiplication to every element.

const myString = "one two three";

let myArray = Array.from(myString);
console.log(myArray); // ["o", "n", "e", " ", "t", "w", "o", " ", "t", "h", "r", "e", "e"]

const myNumber = "1234567890";
myArray = Array.from(myNumber, x => x * 2);
console.log(myArray); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 0]

Object assign() Method

from() is part of original Object standard built-in object method in JavaScript. It will copy all properties that are enumerable from source to target object.

Its features includes:

• Loop thought all the characters via for...in loop
• No change to the original string

Below shows the example where we place an empty array [] as the first parameter in the assign() method. Then we place the source array as the second parameter.

const myString = "one two three";

const myArray = Object.assign([], myString);;
console.log(myArray); // ["o", "n", "e", " ", "t", "w", "o", " ", "t", "h", "r", "e", "e"]

Conclusion

We have look into 4 different methods to convert string to array.

String split() method is the most flexible as it allow us to choose which character to separate the string whereas other methods will automatically split into individual characters.

Spread Operator(...) method gives the option to add other element while array from() method allow modification to each element before returning the result.