🔐 Base64 Encoder / Decoder

Technical Deep-Dive: Base64 Encoding Mathematics and JavaScript Implementations

The core mathematical mechanism of Base64 is the conversion of 8-bit bytes into 6-bit index numbers. The computer stores data in 8-bit blocks (octets). The Base64 alphabet contains 64 characters ($2^6$), which means each character represents exactly 6 bits (a sextet). To perform the conversion, the algorithm groups three 8-bit bytes (a total of 24 bits) and splits them into four 6-bit chunks. Each 6-bit chunk has a decimal value between 0 and 63, which maps to a character in the Base64 alphabet table.

For example, let's examine how the text "Man" is encoded:

1. The character "M" is ASCII 77 (binary 01001101).
2. The character "a" is ASCII 97 (binary 01100001).
3. The character "n" is ASCII 110 (binary 01101110).

Combined, they form a 24-bit stream: 010011010110000101101110. The encoder splits this stream into four 6-bit values:

• First 6 bits: 010011 (decimal 19, maps to "T").
• Second 6 bits: 010110 (decimal 22, maps to "W").
• Third 6 bits: 000101 (decimal 5, maps to "F").
• Fourth 6 bits: 101110 (decimal 46, maps to "u").

Thus, "Man" converts to "TWFu". If the input data has only 2 bytes, the final 6-bit block has only 4 bits of data, so two zero bits are appended, and the output is padded with a single = character. If the input has only 1 byte, the final block has only 2 bits of data, so four zero bits are appended, and the output is padded with ==.

In standard web browsers, JavaScript provides two native global functions: btoa() (binary to ASCII) and atob() (ASCII to binary). However, these legacy functions fail when handling Unicode characters. If you run btoa("🔥"), the browser throws a DOMException because the emoji consists of multi-byte code units that exceed the 8-bit Latin-1 character range. To build a robust Unicode-safe Base64 encoder, developers convert the string to a UTF-8 byte array using TextEncoder before encoding, and use TextDecoder to parse it during decoding:

// Unicode-safe Base64 Encoding
function base64EncodeUnicode(str) {
    const bytes = new TextEncoder().encode(str);
    const binString = Array.from(bytes, byte => String.fromCharCode(byte)).join("");
    return btoa(binString);
}

// Unicode-safe Base64 Decoding
function base64DecodeUnicode(base64) {
    const binString = atob(base64);
    const bytes = Uint8Array.from(binString, char => char.charCodeAt(0));
    return new TextDecoder().decode(bytes);
}

This implementation ensures compatibility across all character sets. It prevents data corruption and ensures emojis, Cyrillic text, Han characters, and other Unicode elements are encoded and decoded correctly.