🔥 NEW Code Tidbit Every Week 🔥

# Split String Using ES6 Spread

Convert a string to an array of characters using the spread syntax!

It goes through each character in the “pizza” string and assigns it to our new “splitPizza” array. Very cool 🤩

const pizza = 'pizza';

// Old way
const slicedPizza = pizza.split('');
console.log(slicedPizza); // [ 'p', 'i', 'z', 'z', 'a' ]

// ES6: using Spread
const slicedPizza2 = [...pizza];
console.log(slicedPizza2); // [ 'p', 'i', 'z', 'z', 'a' ]

// ES6: using Array.from
const slicedPizza3 = Array.from(pizza);
console.log(slicedPizza3); // [ 'p', 'i', 'z', 'z', 'a' ]

# Example

# Capitalizing String

Here's a good use case as to why you would want to split strings.

const name = 'samantha';

const capitalizeName = [
  // Capitalize the first character of the array

  // Ignore the first character and return the return the rest of the array
  // Join the array to make a single string

console.log(capitalizeName); // Samantha

# Community Suggestions

# Split doesn't work with Emojis

Not only is using spread more concise, but there are consequences to using split when multi-byte #UTF8 chars are involved such as emoji characters.

// Using Split
'pizza🍕'.split(''); // [ 'p', 'i', 'z', 'z', 'a', '�', '�' ]

// Using Spread
[...'pizza🍕']; // [ 'p', 'i', 'z', 'z', 'a', '🍕' ]

// Using Array.from
Array.from('pizza🍕'); // [ 'p', 'i', 'z', 'z', 'a', '🍕' ]

Thanks: @donavon

# Explaining Emoji

And the reason why split spits out garbled results is because the '🍕' emoji has a length of 2. It is a surrogate pair of unicode code points. With the split method, it splits this pair apart, hence resulting in 2 giberish results.

'🍕'.length; // 2

// The pizza emoji is made up of a surrogate pair
'🍕'.charCodeAt(0); // 55356
'🍕'.charCodeAt(1); // 57173

// The code in its individual form result in an odd return
String.fromCharCode(55356); // '�'
String.fromCharCode(57173); // '�'

// But in its combined form, it gives you back the pizze emoji
String.fromCharCode(55356, 57173); // '🍕'

Thanks: Aleksandar H

# Resources

Related Tidbits