When we think of sorting arrays in JavaScript, we usually imagine strings, numbers, or even objects being organized in ascending or descending order. But what happens when the elements of the array are emojis? The answer might surprise you, especially when skin-tone modifiers come into play!
In this blog, we’ll dive into how JavaScript handles sorting emojis, explore the Fitzpatrick scale that influences this behavior, and showcase some quirky examples along the way.
The Example
Let’s start with the code snippet from the screenshot:
["👩🏿", "👩🏾", "👩🏽", "👩🏼", "👩🏻"].sort();
When executed, this code produces the following output:
["👩🏻", "👩🏼", "👩🏽", "👩🏾", "👩🏿"]
At first glance, you might wonder, What just happened? The emojis were sorted in a "light-to-dark" order. To understand why this happens, we need to peek under the hood of JavaScript and Unicode.
What’s Really Happening?
1. How Emojis Work
Every emoji is represented by a unique Unicode code point. For example:
- 👩 is represented by
U+1F469. - 🏿 (a skin-tone modifier) is represented by
U+1F3FF.
When an emoji like "👩🏿" is displayed, it is actually a combination of two Unicode characters:
- The base emoji (
👩). - A skin-tone modifier (
🏿).
2. Sorting in JavaScript
The .sort() method in JavaScript works by comparing the Unicode values of array elements, treating them as strings by default. This means that the sorting order of emojis is determined by their underlying Unicode values.
3. Fitzpatrick Scale
The Fitzpatrick scale is a classification system for human skin tones, ranging from Type I (lightest) to Type VI (darkest). Unicode adopted this scale to introduce skin-tone diversity in emojis. Here’s how the modifiers correspond to the Fitzpatrick scale:
- 🏻 (Type I): Light
- 🏼 (Type II): Light-Medium
- 🏽 (Type III): Medium
- 🏾 (Type IV): Medium-Dark
- 🏿 (Type V): Dark
When sorting emojis with these modifiers, JavaScript essentially orders them based on the numeric value of the skin-tone modifiers, which corresponds to the Fitzpatrick scale.
Let’s See This in Action
Here’s a practical demonstration:
// Array of emojis with skin-tone modifiers
const emojis = ["👩🏿", "👩🏾", "👩🏽", "👩🏼", "👩🏻"];
// Sort the array
const sortedEmojis = emojis.sort();
// Log the sorted array
console.log(sortedEmojis);
// Output: ["👩🏻", "👩🏼", "👩🏽", "👩🏾", "👩🏿"]
Breaking It Down
- The
.sort()method compares the Unicode values of each emoji. - The skin-tone modifiers (
🏻,🏼, etc.) have increasing Unicode values. - This results in the emojis being sorted from lightest (🏻) to darkest (🏿).
Fun Experiments
Let’s try a few variations and observe the results.
1. Mixed Emojis
What happens if we include base emojis without skin-tone modifiers?
const mixedEmojis = ["👩🏿", "👩🏾", "👩", "👩🏽", "👩🏼", "👩🏻"];
console.log(mixedEmojis.sort());
Output:
["👩", "👩🏻", "👩🏼", "👩🏽", "👩🏾", "👩🏿"]
Here, the base emoji 👩 comes first because it has the smallest Unicode value, followed by the sorted skin-tone variants.
2. Sorting Other Emoji Groups
What if we sort other emoji groups with modifiers, like hand gestures?
const handEmojis = ["👍🏿", "👍🏽", "👍🏻", "👍🏼", "👍🏾"];
console.log(handEmojis.sort());
Output:
["👍🏻", "👍🏼", "👍🏽", "👍🏾", "👍🏿"]
Once again, the emojis are sorted based on the Fitzpatrick scale.
Unicode Behind the Scenes
To understand the sorting behavior more deeply, let’s inspect the Unicode values of each emoji:
const emojiUnicode = emojis.map(e => e.codePointAt(0).toString(16));
console.log(emojiUnicode);
This will log the Unicode values of the base emoji and its modifiers. You’ll notice the incremental increase in values for the skin-tone modifiers.
Top comments (0)