Javascript word to array

Here are 4 ways to split a word into an array of characters. «Split» is the most common and more robust way. But with the addition of ES6, there are more tools in the JS arsenal to play with 🧰

I always like to see all the possible ways to solve something because then you can choose the best way for your use case. Also, when you see it pop up in someone’s codebase, you will understand it with ease 👍‬

# Scenarios

Instead of going through the pros and cons of each different way. Let me show you the different scenarios where one is preferred over the other.

# Array of Characters

If all you’re doing is wanting separate the string by each string character, all of the ways are good and will give you the same result

# Specific Separators

If you want to split your string by a specific character, then split is the way to go.

The other ways are limited by each string character only

# Strings containing Emojis

If your strings contain emojis, then split or Object.assign might not be the best choice. Let’s see what happens:

However, if we use the other ways, it works :

This is because split separates characters by UTF-16 code units which are problematic because emoji characters are UTF-8. If we look at our yum emoji '😋' it’s actually made up of 2 characters NOT 1 as we perceive.

This is what’s called grapheme clusters — where the user perceives it as 1 single unit, but under the hood, it’s in fact made up of multiple units. The newer methods spread and Array.from are better equipped to handle these and will split your string by grapheme clusters 👍

# A caveat about Object.assign ⚠️

One thing to note Object.assign is that it doesn’t actually produce a pure array. Let’s start with its definition

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object

The key there is «copies all enumerable own properties». So what we’re doing here Object.assign([], string) it copying ALL of our string properties over to our new array. Which means we have an Array PLUS some string methods.

# TypeScript Test: Result array is not a string[] type 😱

This is more evident if we use the TypeScript Playground. Feel free to copy the code and paste in the playground, where you can hover on the variable to view the types. Since this is just an article, I’ll paste the result here so you can follow along.

However, if we look at the result type of Object.assign. It doesn’t give us an Array of strings.

# TypeScript Test: Result array can access string properties 😱

We can do further check this by accessing a property that should only be available to a String.

So that means if I call bold on our Array, it should tell us this property doesn’t exist. This is what we expect to see:

BUT, if we call bold on our supposedly Array created by Object.assign, it works 😱

☝️ And this is because Object.assign copies over ALL the properties over from the original String. Here’s how I’d explain it in non-dev terms. You go to a store to buy a dog. But then store Object.assign sells you a dog that has dragon wings. This sounds super cool, but this isn’t really a rental friendly pet. Hmm…I don’t think this is my best example. But I think you get my point 😂

# Conversion seems okay in browser 🙂

Now I don’t think this is a major deal-breaker, cause:

It seems that browsers have some kind of mechanism in place to «safely» do Object.assign([], «string») and avoid adding the methods of that string to the array.

Thank you @lukeshiru: for sharing this knowledge for me 👏 He also created a TypeScript playground code so you can see > link

@CaptainOrion_: Turn string into char Array but using map function 🤣

@HiUmesh2: Array.prototype.slice.call('string') wil do the trick too

@inside.code: Extra info: it’s safer to use the spread operator (second method) rather than String.prototype.split('') (first method), because split() doesn’t work with some uncommon characters.

@faerberrr: I had a string that contained special characters like åæāă etc. When I split them using the .split('') method and ran .length, it returned twice the expected value! Switching to the spread operator fixed the problem.

# Resources

• MDN Web Docs: split
• MDN Web Docs: spread
• MDN Web Docs: Array.from
• MDN Web Docs: Object.assign
• Stack Overflow: How do I split a string, breaking at a particular character?
• Stack Overflow: How do you get a string to a character array in JavaScript?
• Stack Overflow: How do I split a string into an array of characters?
• Stack Overflow: Convert utf-8 to Unicode to find emoji in string in java

There are (at least) three different things you might conceive of as a «character», and consequently, three different categories of approach you might want to use.

Splitting into UTF-16 code units

JavaScript strings were originally invented as sequences of UTF-16 code units, back at a point in history when there was a one-to-one relationship between UTF-16 code units and Unicode code points. The .length property of a string measures its length in UTF-16 code units, and when you do someString[i] you get the ith UTF-16 code unit of someString.

Consequently, you can get an array of UTF-16 code units from a string by using a C-style for-loop with an index variable…

const yourString = 'Hello, World!';
const charArray = [];
for (let i=0; i<yourString.length; i++) {
    charArray.push(yourString[i]);
}
console.log(charArray);

There are also various short ways to achieve the same thing, like using .split() with the empty string as a separator:

const charArray = 'Hello, World!'.split('');
console.log(charArray);

However, if your string contains code points that are made up of multiple UTF-16 code units, this will split them into individual code units, which may not be what you want. For instance, the string '𝟘𝟙𝟚𝟛' is made up of four unicode code points (code points 0x1D7D8 through 0x1D7DB) which, in UTF-16, are each made up of two UTF-16 code units. If we split that string using the methods above, we’ll get an array of eight code units:

const yourString = '𝟘𝟙𝟚𝟛';
console.log('First code unit:', yourString[0]);
const charArray = yourString.split('');
console.log('charArray:', charArray);

Splitting into Unicode Code Points

So, perhaps we want to instead split our string into Unicode Code Points! That’s been possible since ECMAScript 2015 added the concept of an iterable to the language. Strings are now iterables, and when you iterate over them (e.g. with a for...of loop), you get Unicode code points, not UTF-16 code units:

const yourString = '𝟘𝟙𝟚𝟛';
const charArray = [];
for (const char of yourString) {
  charArray.push(char);
}
console.log(charArray);

We can shorten this using Array.from, which iterates over the iterable it’s passed implicitly:

const yourString = '𝟘𝟙𝟚𝟛';
const charArray = Array.from(yourString);
console.log(charArray);

However, unicode code points are not the largest possible thing that could possibly be considered a «character» either. Some examples of things that could reasonably be considered a single «character» but be made up of multiple code points include:

• Accented characters, if the accent is applied with a combining code point
• Flags
• Some emojis

We can see below that if we try to convert a string with such characters into an array via the iteration mechanism above, the characters end up broken up in the resulting array. (In case any of the characters don’t render on your system, yourString below consists of a capital A with an acute accent, followed by the flag of the United Kingdom, followed by a black woman.)

const yourString = 'Á🇬🇧👩🏿';
const charArray = Array.from(yourString);
console.log(charArray);

If we want to keep each of these as a single item in our final array, then we need an array of graphemes, not code points.

Splitting into graphemes

JavaScript has no built-in support for this — at least not yet. So we need a library that understands and implements the Unicode rules for what combination of code points constitute a grapheme. Fortunately, one exists: orling’s grapheme-splitter. You’ll want to install it with npm or, if you’re not using npm, download the index.js file and serve it with a <script> tag. For this demo, I’ll load it from jsDelivr.

grapheme-splitter gives us a GraphemeSplitter class with three methods: splitGraphemes, iterateGraphemes, and countGraphemes. Naturally, we want splitGraphemes:

const splitter = new GraphemeSplitter();
const yourString = 'Á🇬🇧👩🏿';
const charArray = splitter.splitGraphemes(yourString);
console.log(charArray);

<script src="https://cdn.jsdelivr.net/npm/grapheme-splitter@1.0.4/index.js"></script>

And there we are — an array of three graphemes, which is probably what you wanted.

Introduction

Textual data is typically stored through sequences of characters — strings. These sequences, are ultimately, arrays, and converting between the two structures typically is both simple and intuitive. Whether you’re breaking a word down into its characters, or a sentence into words — splitting a string into an array isn’t an uncommon operation, and most languages have built-in methods for this task.

In this guide, learn how to convert a String to an Array in JavaScript, with the split(), Object.assign(), Array.from() methods and spread[...] operator, as well as when to use which.

Split String into Array with split()

The split() method is used to divide a string into an ordered list of two or more substrings, depending on the pattern/divider/delimiter provided, and returns it. The pattern/divider/delimiter is the first parameter in the method’s call and can be a regular expression, a single character, or another string.

If you’d like to learn more about Regular Expressions — read our Guide to Regular Expressions and Matching Strings in JavaScript!

For example, suppose we have a string:

let quote = 'I am unstoppable!';

We could split it on each whitespace (breaking it down into words), or on every character, or any other arbitrary delimiter, such as 'p':

// Split string using a whitespace
let array1 = quote.split(' ');
console.log(array1); // ["I", "am", "unstoppable!"]
  
// Splitstring  using an empty string (on each character)
let array2 = quote.split('');
console.log(array2); // ["I", " ", "a", "m", " ", "u", "n", "s", "t", "o", "p", "p", "a", "b", "l", "e", "!"]

// Split string using a specific character
let array3 = quote.split('p');
console.log(array3); // ["I am unsto", "", "able!" ]

One of the major downsides of using single characters or even entire strings is that the approach is fairly rigid. You can’t match by multiple delimiters, unless you use a Regular Expression. For instance, say you’d like to break a string into sentences. A sentence can end with a period (.), exclamation mark (!), a question mark (?) or three dots (...). Each of these are valid sentences, but we’d have to perform multiple splits to match all of them, if we were to use single characters or strings.

Pattern matching is where Regular Expressions excel! Let’s split a string on each sentence, with any of these ending delimiters:

let text = "What a big family it was! That would be a big help. The big question was how to end it; Was he there? Terrible occurrence."
let sentences = text.split(/[.,!,?,;,...]/);
    
console.log(sentences); // ["What a big family it was", " That would be a big help", " The big question was how to end it", " Was he there", " Terrible occurrence", ""]

However, the delimiters are lost! We split on them and in the process, remove them from the output. Additionally, we have multiple whitespaces in the beginnings of the sentences, and there’s an empty string in the end! This isn’t to say that split() doesn’t work well with Regular Expressions — but it is to say that splitting sentences out of text isn’t solved well by split(). This is where we can use the match() method instead — which returns the matching patterns and their delimiters:

let text = "What a big family it was! That would be a big help. The big question was how to end it; Was he there? Terrible occurrence."
let sentences = text.match(/[^.!?]+[.!?]+/g);
    
console.log(sentences);  // ["What a big family it was!", " That would be a big help.", " The big question was how to end it; Was he there?", " Terrible occurrence." ]

Again, if you’re interested in learning more about Regular Expressions — read our Guide to Regular Expressions and Matching Strings in JavaScript!

To limit the number of splits we perform, we can easily supply the second argument of the split() method:

let sentence = "The big question was how to end it";
let array = sentence.split(" ", 3); 

console.log(array); // ["The","big","question"]

A common use case for the split() method is when someone supplies their full name as a single string:

let name = "John Doe"

Here, we can split the name and save it as different fields of an object to the database, for instance:

// Split using a space character
let names = name.split(" ");
console.log(names); // ["John","Doe"]
  
// call names by array index
let firstName = names[0];
let lastName = names[1];
  
console.log(firstName); // "John"
console.log(lastName); // "Doe"

Instead of having to call get both elements using an array index, we can use array destructuring to make the assignment cleaner:

let [firstName, lastName] = name.split(' ');
console.log(firstName, lastName); //"John" "Doe"

Split String into Array with Array.from()

The from() method from the Array class is the leading contender to the split() method. It’s used to create an array, given a source of data — and naturally, it can be used to create an array from an iterable string:

let name = "John Doe";
// String to array of chracters
let nameChars = Array.from(name);
console.log(nameChar); //["J","o","h","n"," ","D","o","e"]
  
// Manipulating array
let nameCharsReversed = nameChars.reverse().join('');
console.log(nameCharsReversed); //"eoD nhoJ"

The major benefit of using Array.from() instead of split() is that you don’t have to bother with setting a delimiter — the constituent elements are just re-exposed and added to an array, rather than being converted explicitly. Additionally, the Array.from() method supports emoji characters:

let word = "It is sweet 😋";
let wordChars = Array.from(word)
console.log(wordChars); // ["I","t"," ","i","s"," ","s","w","e","e","t"," ","😋"]

Split String into Array with the Spread Operator

The Spread Operator has several uses and is a widely-applicable operator in JavaScript. In our context — we’d be most interested in expanding arrays (strings are arrays of characters).

If you’d like to learn more about the Spread Operator — read our Spread Operator in JavaScript!

The operator’s syntax is simple and clean — and we can spread out the string into an array:

let name = "John Doe";
// Spread out string into an array
let nameChar = [...name];
console.log(nameChar); //["J","o","h","n"," ","D","o","e"]
  
// Manipulating array
let nameCharReverse = nameChar.reverse().join('');
console.log(nameCharReverse); //"eoD nhoJ"

The operator also works with UTF-8 emojis:

let word = "It is sweet 😋";
let wordChar = [...word]
console.log(wordChar); // ["I","t"," ","i","s"," ","s","w","e","e","t"," ","😋"]

Split String with Object.assign()

The Object.assign() method copies all values and properties of one object — and maps them to the properties of another. In a sense — it’s used for cloning objects and merging those with the same properties:

Object.assign(target, ...sources)

In our case — we’d be copying and mapping the values within a string onto an array:

Object.assign([], string)

This approach is a bit more verbose, and less aesthetically pleasing than the previous two:

let name = "John Doe";
// Assigning string values to an array
let nameChar = Object.assign([], name);
console.log(nameChar); //["J","o","h","n"," ","D","o","e"]
  
// Manipulating array
let nameCharReverse = nameChar.reverse().join('');
console.log(nameCharReverse); //"eoD nhoJ"

It’s worth noting that Object.assign() doesn’t support special UTF-8 characters such as emojis:

let word = "It is sweet 😋";
let wordChars = Object.assign([], word);
  
console.log(wordChars); // ["I","t"," ","i","s"," ","s","w","e","e","t"," ","�","�"]

Conclusion

In this short guide, we’ve taken a look at how to convert a string into an array in JavaScript. We’ve explored the split() method, which has the highest level of customizability — including splitting on Regular Expressions! Then, we’ve explored the creation of arrays from() sources such as strings. The Spread Operator works very well in expanding strings back to arrays, and we’ve finally covered the Object.assign() method to assign the values of a string to an array.