Converting Strings into Arrays with JavaScript

In JavaScript, it is common to manipulate strings and arrays. Sometimes, you may need to convert a string into an array to perform certain operations. Luckily, JavaScript provides built-in methods to easily convert strings into arrays.

In this blog post, we’ll discuss four different methods to convert strings into arrays, each is best suited for different cases, so it’s always good to know them all.

If you are looking for a quick answer, this code snippet may help:

const text = "hello world!";

//
// Convert into array of characters:
//

// Option 1
text.split('');

// Option 2
[...text];

// Option 3
Array.from(text)

// Option 4
Object.assign([], text);

// Result: 
// ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd', '!']

//
// Other splits
//

text.split();
// Output: ['hello world!']
text.split(' ');
// Output: ['hello', 'world!']

If you want to learn more about each method, keep reading.

Using split()

The split() method is a built-in method in JavaScript that allows you to split a string into an array of substrings based on a specified separator. It is the most versatile option on this list.

Syntax

split(separator)
split(separator, limit)

• separator: The pattern describing where each split should occur. Normally a string, but it can also be a regular expression. By default, the separator is not specified, which will cause the split() method to return an array with the given string as a single element.
• limit: A non-negative integer specifying the number of substrings to be included in the resulting array. If limit is 0, the result would be an empty array: [].

Examples

const testSplit = "Hi, JS rocks!";

testSplit.split()
// Result: ['Hi, JS rocks!']

testSplit.split('')
// Result: ['H', 'i', ',', ' ', 'J', 'S', ' ', 'r', 'o', 'c', 'k', 's', '!']

testSplit.split(',')
// Result: 'Hi', ' JS rocks!']

testSplit.split('', 3)
// Result: ['H', 'i', ',']

const testSplitRegEx = "Ready? 1... 2... 3..., go!"
testSplitRegEx.split(/[0-9]/)
// Result: ['Ready? ', '... ', '... ', '..., go!']

There are some caveats using split though, for example, special characters like some emojis may produce unexpected results.

const weirdSplit = "🎉 yay";

weirdSplit.split('')
// Result: ['\uD83C', '\uDF89', ' ', 'y', 'a', 'y']

So if your objective is to simply get an array of characters, the following method would be a better option.

Using the Spread Operator

The spread operator is another way to convert a string into an array of characters. It is a more concise and modern method that allows you to spread the characters of a string into an array literal.

This method is simple and easy to read, but it may not be as widely used as the split() method.

Syntax

[...string]

Example

const testSpread = "Hello, world!";

[...testSpread]
// Result: ['H', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd', '!']

For simply getting an array of characters, the spread operator is preferred over the split() method, firstly because it is clearer, and second, because with some characters, the split() method may behave incorrectly.

Here is an example:

const weirdSplit = "🎉 yay";

weirdSplit.split('')
// Result: ['\uD83C', '\uDF89', ' ', 'y', 'a', 'y']

[...weirdSplit]
// Result: ['🎉', ' ', 'y', 'a', 'y']

Using Array.from

Array.from() is a built-in method in JavaScript that creates a new array from an iterable object, which can be a string, an array, or an array-like object.

Syntax

Array.from(iterable, mapFn, thisArg)

• iterable: An iterable object to convert to an array.
• mapFn (optional): A function to map each element before adding it to the array.
• thisArg (optional): A value to use as this when executing the mapFn.

Example

const testArrayFrom = "Hello, world!";

Array.from(testArrayFrom)
// Result: ['H', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd', '!']

Array.from() provides a flexible way to convert a string into an array. You can also use the second and third parameters to manipulate each element of the array during creation. For example:

Array.from('123456', x => x % 2 !== 0);
// Result: [true, false, true, false, true, false]

Using Object.assign()

Object.assign() is a built-in method in JavaScript that copies the values of all enumerable properties of one or more source objects to a target object.

Syntax

Object.assign(target, ...sources)

• target: The target object to copy the values to.
• sources: The source object(s) to copy the values from.

Example

const testAssign = "Hello, world!";

Object.assign([], testAssign);
// Result: ['H', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd', '!']

Object.assign() is not commonly used to convert a string into an array, but it’s good to know that it can be done. However, for this purpose, it is not as efficient as the other methods presented before.

Summary

As we’ve seen, there are several ways to convert a string into an array in JavaScript. Each method has its strengths and weaknesses, and the best option will depend on the situation.

The split() method is the most versatile option, allowing you to split a string into an array of substrings based on a specified separator. It is widely used and provides a lot of flexibility. However, it may produce unexpected results when used with special characters like emojis.

The Spread Operator is a more concise and modern method that allows you to spread the characters of a string into an array of characters and it is my preferred method for this particular use case.

Array.from() is a flexible way to convert a string into an array that allows you to manipulate each element with mapFn and thisArg parameters during creation. It is a more functional approach, providing more control over the creation of the array.

Finally, Object.assign() can also be used to convert a string into an array. However, it is not commonly used for this purpose, as it is not as efficient as the other methods presented before.

Thanks for reading!

Juan Cruz Martinez

Juan has made it his mission to help aspiring developers unlock their full potential. With over two decades of hands-on programming experience, he understands the challenges and rewards of learning to code. By providing accessible and engaging educational content, Juan has cultivated a community of learners who share their passion for coding. Leveraging his expertise and empathetic teaching approach, Juan has successfully guided countless students on their journey to becoming skilled developers, transforming lives through the power of technology.