TextDecoder and TextEncoder

TextDecoder and TextEncoder in JavaScript

JavaScript provides TextDecoder and TextEncoder to work with text encoding and decoding, especially when handling binary data (e.g., ArrayBuffer, Uint8Array).

1️⃣ TextEncoder – Encoding Text to Binary

The TextEncoder converts text (string) into UTF-8 encoded bytes (Uint8Array).

Example: Convert String to UTF-8 Bytes

const encoder = new TextEncoder();
const encoded = encoder.encode("Hello, World!");
console.log(encoded); // Uint8Array(13) [72, 101, 108, 108, 111, 44, 32, 87, 111, 114, 108, 100, 33]

Each number in the Uint8Array represents the UTF-8 byte value of the corresponding character.

2️⃣ TextDecoder – Decoding Binary to Text

The TextDecoder converts UTF-8 encoded bytes (Uint8Array, ArrayBuffer) back to a string.

Example: Convert UTF-8 Bytes Back to String

const decoder = new TextDecoder();
const decoded = decoder.decode(encoded);
console.log(decoded); // "Hello, World!"

3️⃣ Working with Different Encodings

By default, it TextEncoder uses UTF-8 (which covers most cases).
However, TextDecoder supports multiple encodings.

Example: Using Different Encodings

const decoder = new TextDecoder("utf-8"); // Default is UTF-8
console.log(decoder.decode(new Uint8Array([72, 101, 108, 108, 111]))); // "Hello"

For other encodings like ISO-8859-1, Shift_JIS, Windows-1252, check browser compatibility as TextDecoder might not support all encodings.

4️⃣ Handling Streams with TextDecoder

If you are working with large amounts of data (e.g., reading a file or a network stream), use streaming decoding.

const decoder = new TextDecoder();
const chunk1 = new Uint8Array([72, 101, 108]); // "Hel"
const chunk2 = new Uint8Array([108, 111]);     // "lo"

console.log(decoder.decode(chunk1, { stream: true })); // "Hel"
console.log(decoder.decode(chunk2));                   // "lo"

Using { stream: true } ensures the decoder keeps track of partial characters.

5️⃣ Example: Encoding & Decoding JSON Data

const jsonData = { name: "Alice", age: 25 };

// Convert JSON to UTF-8 bytes
const encodedJSON = new TextEncoder().encode(JSON.stringify(jsonData));

// Convert UTF-8 bytes back to JSON
const decodedJSON = JSON.parse(new TextDecoder().decode(encodedJSON));

console.log(decodedJSON); // { name: "Alice", age: 25 }

6️⃣ Use Cases of TextEncoder & TextDecoder

✅ Working with binary data (e.g., WebSockets, Fetch API, IndexedDB)
✅ Reading and writing files (e.g., FileReader, Blob)
✅ Handling Unicode text in buffers
✅ Encoding and decoding JSON for storage/transmission

Conclusion

• TextEncoder converts text → binary (Uint8Array).
• TextDecoder converts binary (Uint8Array) → text.
• UTF-8 is the default encoding, but TextDecoder supports others.
• Used in file handling, network requests, and data processing.

Let me know if you need more details! 🚀