Platform under construction

JSON & Structured Data

Advanced

Typed Arrays

Typed arrays let JavaScript work with binary data using fixed-size numeric views.

const bytes = new Uint8Array([72, 105]);

console.log(bytes.length);
console.log(new TextDecoder().decode(bytes));

JSON & Structured Data

Typed arrays are numeric views over binary data.

Regular arrays can hold any JavaScript values. Typed arrays hold numbers in a specific binary format such as Uint8, Int16 or Float32.

Typed arrays are used for files, graphics, audio, networking, cryptography and binary protocols.

A typed array is a view over an ArrayBuffer. Multiple views can look at the same underlying bytes in different ways.

Uint8Array

Unsigned 8-bit integers from 0 to 255.

Int16Array

Signed 16-bit integers.

Float32Array

32-bit floating point values.

Buffer view

Typed arrays view bytes stored in an ArrayBuffer.

Examples

Structured data code should show the boundary clearly.

Use explicit byte views

const encoder = new TextEncoder();
const bytes = encoder.encode("Ready");

console.log(bytes instanceof Uint8Array);

Using normal arrays for binary meaning

const bytes = [72, 105];

// This is not a binary buffer and has no fixed numeric type.

Code patterns

Reusable examples for quick reference.

These patterns focus on the data boundaries you will use constantly: JSON, URLs, forms, files, fetch objects and binary buffers.

Create bytes

Uint8Array is common for raw bytes.

const bytes = new Uint8Array([72, 105]);

Decode text

TextDecoder turns bytes into a string.

const text = new TextDecoder().decode(bytes);

Encode text

TextEncoder turns a string into bytes.

const bytes = new TextEncoder().encode("Hi");

Shared buffer view

Two typed arrays can view the same buffer.

const buffer = new ArrayBuffer(4);
const bytes = new Uint8Array(buffer);
const words = new Uint16Array(buffer);

Rules that matter

Parse, validate and convert data at the edges.

Structured data becomes reliable when every boundary is explicit: text to object, form to values, URL to parameters, response to JSON and bytes to meaning.

Use typed arrays for binary data

They store numbers in fixed-size formats.

Pick the correct numeric type

Uint8, Int16 and Float32 mean different ranges and precision.

Understand the buffer

The ArrayBuffer stores the bytes. The typed array views them.

Use TextEncoder and TextDecoder for text bytes

Do not hand-roll UTF-8 conversion.

Watch value wrapping

Uint8Array values stay in the 0-255 byte range.

Avoid typed arrays for ordinary lists

Normal arrays are better for general data.

Production thinking

Trust data only after the code has proved its shape.

Why does this matter?

Typed arrays are how JavaScript speaks binary data without leaving the language.

Accessibility

Binary processing should still produce readable status and errors for users.

Production note

Production binary code should document byte order, numeric type and expected size.

SEO note

Typed arrays do not affect crawled text directly, but generated media and files still need descriptive labels.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Try a longer string and inspect the bytes.
Create a Uint8Array manually with values 65 and 66.
Create an ArrayBuffer and view it with Uint8Array.

Practice assignment

Do this before moving to the next topic.

Create a Uint8Array.
Encode text with TextEncoder.
Decode bytes with TextDecoder.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Typed Arrays.