Why does `'🙂'.length` evaluate to 2 in JavaScript, and how do you count what a user would call one character?

## Strings are sequences of UTF-16 code units JavaScript fixed its string representation early: a string is an ordered sequence of 16-bit values called *code units*, interpreted as UTF-16. That decision is baked into `length`, into every index, and into every method that takes a position. It is not "a sequence of characters", and the difference becomes visible the moment your text leaves the ASCII range. Unicode assigns each character a *code point*, a number from U+0000 to U+10FFFF. Code points up to U+FFFF — the Basic Multilingual Plane, which covers Latin, Cyrillic, Greek, Arabic, Hebrew, and common CJK — fit in a single 16-bit unit, so for that text code units and code points line up and nobody notices the distinction. ## Surrogate pairs Above U+FFFF, one 16-bit unit is not enough. UTF-16 encodes such a code point as two units: a *high surrogate* in the range U+D800–U+DBFF followed by a *low surrogate* in U+DC00–U+DFFF. Those two ranges are permanently reserved, so a pair is unambiguous. `'🙂'` is U+1F642, well above the BMP, so it is stored as the pair U+D83D U+DE42 — two code units, one code point: ```javascript const face = '🙂'; console.log(face.length); // 2 — code units console.log(face.charCodeAt(0)); // 55357 (0xD83D) — high surrogate only console.log(face.charCodeAt(1)); // 56898 (0xDE42) — low surrogate only console.log(face.codePointAt(0)); // 128578 (0x1F642) — the whole code point ``` `codePointAt` (ES2015) reads a full code point when the index lands on a high surrogate that is followed by a low one; `charCodeAt` always returns exactly one unit. The inverse pair is `String.fromCharCode` (units) versus `String.fromCodePoint` (code points, ES2015): `String.fromCodePoint(0x1F642) === '🙂'`. ## Counting code points The string iterator — added in ES2015 and used by spread, `Array.from`, and `for...of` — is code-point aware. It yields a whole surrogate pair as one string: ```javascript const text = 'a🙂b'; console.log(text.length); // 4 code units console.log([...text].length); // 3 code points console.log(Array.from(text).length); // 3 console.log(text.split('').length); // 4 — split('') is unit-based, not iteration for (const ch of text) console.log(ch); // "a", "🙂", "b" ``` The `split('')` case is the one that catches people: it looks like the same thing as spreading, but it slices by code unit and tears the emoji in half. ## Where the distinction bites Every index-taking operation is in code units: ```javascript console.log('🙂'.slice(0, 1)); // an unpaired high surrogate — usually renders as "�" console.log('a🙂'.at(-1)); // the low surrogate alone, not the emoji (String.prototype.at is ES2022) console.log([...'a🙂'].reverse().join('')); // "🙂a" — correct, because spreading was code-point aware ``` An *unpaired surrogate* is a valid JavaScript string but not valid Unicode text. It typically renders as the replacement character U+FFFD, and `encodeURIComponent` throws a `URIError` on it, so a naive truncation in the browser can turn into a request-building failure two layers away. Since ES2024, `String.prototype.isWellFormed()` and `toWellFormed()` let you detect and repair such strings without hand-rolling surrogate-range checks. Regular expressions have the same split: without the `u` flag, `.` matches one code unit, so `'🙂'.match(/./gu).length` is 1 while `'🙂'.match(/./g).length` is 2. ## Code points are still not "characters" Counting code points fixes emoji like `'🙂'`, but a single thing the user perceives as one character can be several code points: a base letter plus combining marks, a flag built from two regional indicators, or an emoji joined with zero-width joiners. Those user-perceived units are called grapheme clusters, and counting them requires segmentation rather than iteration — worth naming in an interview so you show you know `[...str].length` is a *better* count, not a final one. ## How to answer crisply Say: `.length` is UTF-16 code units; U+1F642 needs a surrogate pair, hence 2; use spread or `Array.from` for code points, `codePointAt` instead of `charCodeAt`; and remember index-based methods can split a pair and produce an unpaired surrogate.