JavaScript's Unicode Adventure

The Basics: Code Points and Encodings

A Unicode character (or "code point") is a unique number for a symbol (e.g., U+0041 for 'A'). The number of bytes it uses depends on the encoding:

• UTF-8: The web's standard. Uses 1-4 bytes per character.
• UTF-16: JavaScript's internal standard. Uses 2 or 4 bytes per character.

Surrogate Pairs & Grapheme Clusters

In JavaScript (UTF-16), characters outside the basic set require a surrogate pair (two 2-byte units) to represent one symbol. Even more complex are grapheme clusters, where multiple characters (some using surrogate pairs) join to form a single visual glyph, like 👨‍👩‍👧‍👦.

This is the root of the problem: older JS methods operate on the 2-byte units, not the final visual symbols.

Examples of Complex Characters

Char	Description	Type	.length
😂	Face with Tears of Joy	Surrogate Pair	2
👩🏾‍💻	Woman Technologist	Grapheme Cluster	7
👨‍👩‍👧‍👦	Family	Grapheme Cluster	11

Test Case 1: A Single Surrogate Pair ('𝄞')

First, let's test the musical G-clef symbol (𝄞). It's a single visual character represented by one surrogate pair (\uD834\uDD1E).

Test Case 2: A Complex Grapheme Cluster ('👨‍👩‍👧‍👦')

Now let's test the family emoji. It's a single visual glyph made of 7 distinct Unicode code points. This shows the limits of even some modern methods.