JavaScript convert String To Array [4 Methods]

Introduction

Strings are native data structures in JavaScript that are used to store data. They are often called described as a sequence of characters. In some languages, they are created as sequences of characters. JavaScript is quite different, but can also be worked upon in a similar fashion.

As developers, we often need to work with strings. One common task that developers need to perform is converting a string into an array of characters. There are several ways to do this in JavaScript, each with its own set of pros and cons.

In this article, we will discuss the different ways we can generate string as arrays.

 

Using the split() method

One way to convert a string into an array of characters is to use the split() method. This method takes a separator as an argument and returns an array of substrings. The goal of this approach to split the characters of the strings and return the array of characters. For example, if you want to convert a string into an array of characters, you can use the following code.

let str = "JavaScript is a goodie";
let charArray = str.split("");
console.log(charArray);

Output

[
  'J', 'a', 'v', 'a', 'S',
  'c', 'r', 'i', 'p', 't',
  ' ', 'i', 's', ' ', 'a',
  ' ', 'g', 'o', 'o', 'd',
  'i', 'e'
]

If we need only the alphanumeric characters, we can filter based on a condition to remove the whitespaces that exist using the higher-order function - filter().

let str = "JavaScript is a goodie";
let charArray = str.split("");

const filteredCharArray = charArray.filter((n) => n !== " ");
console.log(filteredCharArray);

Output

[
  'J', 'a', 'v', 'a', 'S',
  'c', 'r', 'i', 'p', 't',
  'i', 's', 'a', 'g', 'o',
  'o', 'd', 'i', 'e'
]

 

Using the spread operator

Just as with arrays or objects, we can apply the spread operator on a string to explode the characters present within a string. Since it’s a sequence of characters, the characters are exploded into an array elements. With this, we can convert a string into an array of characters. This will work in modern browsers and is a more concise way to do it

Here is an illustration on how to use the spread operator to form string as array.

let str = "JavaScript is a goodie";
let charArray = [...str];
console.log(charArray);

Output

[
  'J', 'a', 'v', 'a', 'S',
  'c', 'r', 'i', 'p', 't',
  ' ', 'i', 's', ' ', 'a',
  ' ', 'g', 'o', 'o', 'd',
  'i', 'e'
]

 

Using the Array.from() method

Another way to convert a string into an array of characters is to use the from() method. This method takes an iterable as an argument and returns an array of elements.

Let’s illustrate how you can use the following code to convert a string into an array of characters as below.

let str = "JavaScript is a goodie";
let charArray = Array.from(str);
console.log(charArray);

Output

[
  'J', 'a', 'v', 'a', 'S',
  'c', 'r', 'i', 'p', 't',
  ' ', 'i', 's', ' ', 'a',
  ' ', 'g', 'o', 'o', 'd',
  'i', 'e'
]

 

Using the for...of loop

You can also use the for...of loop to convert a string into an array of characters. This approach is similar to the split() method, but it doesn't create a new array

let str = "JavaScript is a goodie";
let charArray = [];

for (let char of str) {
    charArray.push(char);
}

console.log(charArray);

Output

[
  'J', 'a', 'v', 'a', 'S',
  'c', 'r', 'i', 'p', 't',
  ' ', 'i', 's', ' ', 'a',
  ' ', 'g', 'o', 'o', 'd',
  'i', 'e'
]

There are many ways to convert a string into an array of characters in JavaScript. Each approach has its own set of pros and cons, so it's important to choose the one that best suits your needs.

 

Summary

Here is a summary of the methods to convert a JavaScript string to an array:

• split() method: This method takes a separator as an argument and returns an array of substrings split by the separator.
• split("") method: This method splits the string into an array of individual character
• Array.from() method: This method creates a new Array instance from an array-like or iterable object.
• Spread operator ... : This method also converts a string into an array of characters
• Destructuring assignment [...string] : This method is equivalent to Array.from(string)

 

References

String.prototype.split() - JavaScript | MDN (mozilla.org)
Array.from() - JavaScript | MDN (mozilla.org)
Spread syntax (...) - JavaScript | MDN (mozilla.org)