charAt vs codePointAt in JavaScript

JavaScript provides different methods to inspect individual characters in a string, with String.prototype.charAt() and String.prototype.codePointAt() being two primary options. While charAt() returns a single 16-bit string character at a given index, codePointAt() returns the numeric Unicode code point value of the character at that position. Understanding the difference is crucial when handling modern text, especially non-ASCII characters, symbols, and emojis that span across surrogate pairs in UTF-16 encoding.

What is String.prototype.charAt()?

The charAt() method takes an index and returns the character located at that specific UTF-16 code unit as a new string.

• Return Value: A single-character string representing the UTF-16 code unit, or an empty string "" if the index is out of range.
• Limitations: JavaScript strings are encoded in UTF-16. Characters outside the Basic Multilingual Plane (BMP)—such as many emojis, mathematical symbols, and rare historic scripts—are represented by two 16-bit code units known as a surrogate pair. Because charAt() only reads one 16-bit unit at a time, it breaks surrogate pairs into lone halves, producing unrecognizable or invalid characters.

const text = "Hello";
console.log(text.charAt(1)); // "e"

const emoji = "🦊";
console.log(emoji.charAt(0)); // "\uD83E" (High surrogate, rendered as an unreadable character)

What is String.prototype.codePointAt()?

Introduced in ECMAScript 2015 (ES6), codePointAt() resolves the surrogate pair limitation. Instead of returning a string character unit, it returns the complete decimal Unicode code point integer for the character.

• Return Value: A non-negative integer representing the Unicode code point, or undefined if the index is out of range.
• Surrogate Pair Handling: If the index points to the beginning of a surrogate pair, codePointAt() reads the entire pair and returns the full 32-bit code point value.

const text = "Hello";
console.log(text.codePointAt(1)); // 101 (Unicode for "e")

const emoji = "🦊";
console.log(emoji.codePointAt(0)); // 129418 (Complete Unicode code point for the fox emoji)

Key Differences

When to Use Which

• Use charAt() when you specifically need the string representation of basic Latin or BMP characters (standard English letters, numbers, and basic punctuation), or when working in environments constrained to older JavaScript standards.
• Use codePointAt() when dealing with full Unicode support, user-generated input containing emojis, internationalization, or when you need the numerical identifier of a character for validation, sorting, or manipulation.