Fun with JavaScript and Emoji

Posted byBramus! 3 Comments on Fun with JavaScript and Emoji

emoji-spread

Today Wes Bos tweeted a few fun things one can do with JavaScript and Emoji:

  1. It’s possible to spread emoji sequences into their single parts:

    [...'👨‍👩‍👧‍👦']
// ["👨", "‍", "👩", "‍", "👧", "‍", "👦"]

  2. Combining Emoji is also possible:

    ["👨", "‍", "👩", "‍", "👧"].reduce((prev, curr) => prev + curr)
// "👨‍👩‍👧"

  3. And oh, you can even replace single emoji within emoji units, yielding a new emoji unit:

    '👩‍👩‍👦'.replace(/👩/g, '👨')
// "👨‍👨‍👦"

  4. This kind of sorcery also works with skin tone modifiers by the way:

    [...'🛀🏾']
// ["🛀", "🏾"]

["🛀", "🏾"].reduce((prev, curr) => prev + curr)
// "🛀🏾"

'🛀🏾'.replace("🏾", "")
// "🛀"

Digging deeper into this it came to my attention that the extra character in between the single emoji after splitting (see example 1) is not an empty string but a zero-width joiner (ZWJ). The ZWJ ("\u200d") acts as the glue between the single emoji, yielding the correct combined emoji sequence.

The full list of Emoji ZWJ Sequences contains all possible sequences, and holds some (toe me) nice surprises. Take the rainbow flag emoji (🏳️‍🌈) for example: that actually is a combination of a white flag emoji and a rainbow emoji!

'🏳' + '\u200d' + '🌈'
// "🏳️‍🌈"

Geekfun! 🤓

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

3 Comments

  1. Pingback: Fun with JavaScript and emoji - murze.be
  2. Pingback: runes – Unicode-aware JS string splitting with full Emoji support | Bram.us
  3. Pingback: Emoji Customizer created with CSS Variables – Bram.us

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.