EmojiScript: A Quick Guide to Emojis in JavaScript

Emojis have been part of many people’s lives for almost a decade now, they have been a part of my life since well the day I got my first phone with even the most basic of emojis like :). But over the past decade emojis have evolved to become very intricate characters that can be used to express an entire emotion in just one character. As well, they have become a huge part of our culture. Think about the last time you sent a text that didn’t have an emoji in it? Well maybe a text to your boss, it might sound a little unprofessional.

Where did they come from?

Emojis can loosely be traced back to the Qin dynasty of China about 2000 years ago as they were used to describe the Emperor’s mood on a particular day. I’m just kidding but wouldn’t that be an amazing fact? They can actually be traced back to chatrooms of the 90s like AOL’s Instant Messenger using rudimentary emojis like the one I mentioned earlier. Then came the first of the emojis we know today, in 1999 a Japanese cell phone company, NTT DOCOMO, came out with a set of 176 of them for mobile phones and pagers that look like very pixelated versions of the ones we know and love.

How do we use them?

Now that’s all good and fun knowing a brief history of how emojis came to be but how do we use them in our code? Well we can boil it down to two different methods to use them: copy & paste and code points. The copy & paste method may seem pretty self-explanatory and well… it is, but there are a few things to note.

The copy & paste method

Before you even start incorporating emojis into your code it is important that you find a quality place to get your emojis preferably somewhere that has the emojis code point as well, more on that later. The best site for finding these and the one I would personally recommend is Emojipedia, it has a very up to date list of all the emojis in use, their code points as well as other useful information like what it looks like on different browsers.

For our use in JavaScript, more often than your emoji will the inner text of a DOM element so query select or create an element and set its inner text to the emoji of your choice, it’s important to note that it needs to be put in quotes like text because in reality it is.

Now this is the easiest way to use emojis and the methods I would recommend using, but there will be times that you unfortunately cant, maybe the browser that’s running your program doesn’t recognize the copy & pasted version.

Unicode

Before we dive into the inner workings of emojis code points we need to side track and talk about Unicode for a moment. What is Unicode? Well we know that the computer reads in binary, 1s and 0s, so we need a way to store and read things that aren’t numbers, in our case emojis! That’s where Unicode comes in, it gives each character its own number and each of those numbers is unique to that character. And that specific number is called a code point, like mentioned earlier. If you wanna check out Unicode's website, they give a deeper explanation of Unicode. It is captivating.

Code points

So now let’s use these code points and put them into our JavaScript! I’m gonna use the peach emoji because peaches are my favorite fruit. Emojipedia will give you all the information about this emoji but we are looking for its code point so we need to scroll.

Perfect! But notice that the code point has U+ at the beginning, we don’t need that JavaScript takes different preceding characters so you should just have 1F351. A quick thing to note is that these code points are not case sensitive meaning 1f351 works as well. In JavaScript there are two ways that these code points can be notated: \u or 0x, they both work just fine so it’s really user preference I'm going to be using 0x.

Now like we did in the copy & paste method we can set the inner text of a DOM element. To do this with code points we need a static method and that method is String.fromCodePoint().

What gets returned is the character at that location i.e. our emoji!

Conclusion

Learning about this definitely took me down a rabbit hole on code points and Unicode, there are actually 17 different what they call planes of Unicode! The Wikipedia page gives a good description if this interests you at all. But with this knowledge you will see plenty more emojis in my code and I hope to see you use some in yours as well!