JavaScript - Convert String to Array

Strings in JavaScript are immutable (cannot be changed directly). However, arrays are mutable, allowing you to perform operations such as adding, removing, or modifying elements. Converting a string to an array makes it easier to:

• Access individual characters or substrings.
• Perform array operations such as map, filter, or reduce.
• Modify parts of the string (like replacing characters or extracting substrings).
• Split a string into smaller components for easier processing.

Methods to Convert String to Array

1. Using the String.split() Method

The most common method for converting a string to an array is using the split() method. It allows you to specify a delimiter (separator) that divides the string into an array of substrings.

Syntax

string.split(separator, limit);

In the above syntax

• separator: Defines how to split the string. It can be a character, a string, or even a regular expression.
• limit: Optional. Limits the number of splits in the array.

const str = "Hello";
const arr = str.split('');
console.log(arr); 

[ 'H', 'e', 'l', 'l', 'o' ]

2. Using Spread Operator(...)

The spread operator (...) can be used to convert a string into an array by spreading the string into individual characters. This method is concise and expressive, and is often preferred for simple tasks.

Syntax

const arr = [...string];

In the above syntax

• [...string]: It spreads each character of the string into individual elements in an array.

const str = "world";
const array = [...str];
console.log(array);

[ 'w', 'o', 'r', 'l', 'd' ]

This method also handles Unicode characters (like emojis) properly.

const fruit = '🍎🍎';
const fruitArr = [...fruit];
console.log(fruitArr); 

[ '🍎', '🍎' ]

3. Using Array.from() Method

The Array.from() method can convert a string into an array of characters. This method is especially useful if you want to create an array from an iterable object, like a string, without needing to specify a separator.

Syntax

Array.from(string);

In the above syntax

• Array.from(string): Converts an iterable object (such as a string) into an array.

const str = "JavaScript";
const array = Array.from(str);
console.log(array);

[
  'J', 'a', 'v', 'a',
  'S', 'c', 'r', 'i',
  'p', 't'
]

we can also use a mapping function directly with Array.from() The mapping function takes three arguments:

• The current element.
• The index of the element.
• The array being created.

const s = "Hello";
const a = Array.from(s, char => char.toUpperCase());
console.log(a);

[ 'H', 'E', 'L', 'L', 'O' ]

4. Using slice() with call()

The slice() method is typically used for arrays, but you can apply it to a string by borrowing the method using call().

Syntax

Array.prototype.slice.call(string);

In the above syntax

• The slice() method is originally an array method.
• When combined with call(), it can be used on array-like objects, such as strings, to create a new array.
• It treats the string as if it were an array and returns a shallow copy as an array.

const s = "Hello";
const a = Array.prototype.slice.call(s);
console.log(a); 

[ 'H', 'e', 'l', 'l', 'o' ]

5. Using Object.assign()

Object.assign() copies the properties from one or more source objects into a target object. When used with an empty array, it can convert a string into an array of characters.

Syntax

Object.assign([], string);

In the above syntax

• Object.assign(): A method used to copy enumerable properties from source objects to a target object.
• []: An empty array, serving as the target object.
• string: The source string whose individual characters are treated as properties and copied into the target array.

const myFavBook = 'GeeksforGeeks';
const myFavBookArray = Object.assign([], myFavBook