Advanced Array Methods

Typed Arrays

Work with binary data like a pro - fast and memory-efficient!

Find videos you like?

Save to resource drawer for future reference!

What are Typed Arrays?

Think of Typed Arrays as specialized containers for numbers! Unlike regular arrays that can hold anything, Typed Arrays store only specific number types(8-bit integers, 32-bit floats, etc.) in raw binary format. This makes them super fastand perfect for graphics, audio, files, and WebGL!

Why Use Typed Arrays?

Performance! When working with binary data (images, audio, WebGL), Typed Arrays are much faster and use less memory than regular arrays. They're the bridge between JavaScript and low-level binary data.

🔢Types of Typed Arrays

Integer Types

Int8Array-128 to 127

Uint8Array0 to 255

Int16Array-32,768 to 32,767

Uint16Array0 to 65,535

Int32Array-2.1B to 2.1B

Uint32Array0 to 4.2B

Float Types

Float32Array32-bit float

Float64Array64-bit float

Special

Uint8ClampedArray0-255, clamped

BigInt64ArrayBigInt values

BigUint64ArrayUnsigned BigInt

ArrayBuffer - The Foundation

All Typed Arrays are views over an ArrayBuffer - a fixed-length raw binary data buffer. Think of ArrayBuffer as the raw memory, and Typed Arrays as different ways to view/interpret that memory.

const buffer = new ArrayBuffer(16);  // 16 bytes of memory
const view = new Uint8Array(buffer); // View as 8-bit integers

Example 1: Creating and Using Typed Arrays

Basic operations with different typed array types

javascript

code

DarkEditable

// 1. Create Uint8Array (0-255)
const bytes = new Uint8Array(5);
bytes[0] = 10;
bytes[1] = 255;
bytes[2] = 300;  // Wraps to 44 (300 % 256)

console.log(bytes);
// Uint8Array [10, 255, 44, 0, 0]

// 2. Create from regular array
const numbers = new Int16Array([10, 20, 30, 40]);
console.log(numbers);
// Int16Array [10, 20, 30, 40]

// 3. Float32Array for decimals
const floats = new Float32Array([1.5, 2.7, 3.14]);
console.log(floats);
// Float32Array [1.5, 2.700000047683716, 3.140000104904175]
// Note: Slight precision differences from Float32

// 4. Array-like methods work!
const arr = new Uint8Array([1, 2, 3, 4, 5]);

// map
const doubled = arr.map(x => x * 2);
console.log(doubled);
// Uint8Array [2, 4, 6, 8, 10]

// filter
const evens = arr.filter(x => x % 2 === 0);
console.log(evens);
// Uint8Array [2, 4]

// reduce
const sum = arr.reduce((acc, val) => acc + val, 0);
console.log(sum);  // 15

// 5. Access buffer
const typed = new Uint16Array(4);
console.log(typed.buffer);        // ArrayBuffer
console.log(typed.byteLength);    // 8 (4 elements × 2 bytes each)
console.log(typed.length);        // 4 (number of elements)

Console Output

Click "Run Code" to see output here...

Example 2: Working with Binary Data

Real-world scenarios for Typed Arrays

javascript

code

DarkEditable

// 1. Image pixel manipulation
// Images are typically Uint8ClampedArray (RGBA: 0-255 clamped)
function createRedImage(width, height) {
  const pixels = new Uint8ClampedArray(width * height * 4);
  
  for (let i = 0; i < pixels.length; i += 4) {
    pixels[i] = 255;      // Red
    pixels[i + 1] = 0;    // Green
    pixels[i + 2] = 0;    // Blue
    pixels[i + 3] = 255;  // Alpha (opacity)
  }
  
  return pixels;
}

const redPixels = createRedImage(2, 2);
console.log(redPixels);
// Uint8ClampedArray [255, 0, 0, 255, 255, 0, 0, 255, ...]

// 2. Audio data (Float32Array)
function generateTone(frequency, duration, sampleRate = 44100) {
  const samples = duration * sampleRate;
  const audio = new Float32Array(samples);
  
  for (let i = 0; i < samples; i++) {
    audio[i] = Math.sin(2 * Math.PI * frequency * i / sampleRate);
  }
  
  return audio;
}

const tone = generateTone(440, 0.1);  // 440Hz A note, 0.1 second
console.log(tone.length);  // 4410 samples

// 3. File reading
async function readFileAsUint8Array(file) {
  const buffer = await file.arrayBuffer();
  return new Uint8Array(buffer);
}

// Usage: const bytes = await readFileAsUint8Array(myFile);

// 4. Network data
function encodeMessage(text) {
  const encoder = new TextEncoder();
  return encoder.encode(text);  // Returns Uint8Array
}

function decodeMessage(bytes) {
  const decoder = new TextDecoder();
  return decoder.decode(bytes);  // String
}

const encoded = encodeMessage('Hello!');
console.log(encoded);
// Uint8Array [72, 101, 108, 108, 111, 33]

const decoded = decodeMessage(encoded);
console.log(decoded);  // "Hello!"

Console Output

Click "Run Code" to see output here...

Key Differences from Regular Arrays

✅ Typed Arrays

✅ Fixed length (can't resize)
✅ Fixed type (only numbers)
✅ Contiguous memory
✅ Much faster for binary data
✅ Less memory overhead
✅ Direct binary access

✅ Regular Arrays

✅ Dynamic length (resize)
✅ Any type (mixed values)
✅ Not contiguous
✅ More flexible
✅ Easier to use
✅ More methods available

🎯When to Use Typed Arrays

🎨

Image/Canvas Data

Manipulating pixel data in Canvas API, WebGL, image processing

🎵

Audio Processing

Web Audio API, audio synthesis, real-time audio manipulation

📁

File Handling

Reading/writing binary files, file uploads, parsing binary formats

🌐

Network Data

WebSockets, binary protocols, data transfer optimization

Key Takeaways

🔢

Fixed Type

Store only specific number types in binary format

⚡

Performance

Much faster for binary data operations

💾

ArrayBuffer

Backed by raw binary buffer - different views possible

🎯

Use Cases

Graphics, audio, files, WebGL, network data

Previous Topic

Array includes

Checking for array membership with NaN support.

Next Topic

Object.create

Creating objects with specific prototype.

Ask a Question

Have a question about Typed Arrays? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

Advanced Array Methods

Typed Arrays

Work with binary data like a pro - fast and memory-efficient!

Find videos you like?

Save to resource drawer for future reference!

What are Typed Arrays?

Why Use Typed Arrays?

🔢Types of Typed Arrays

Integer Types

Int8Array-128 to 127

Uint8Array0 to 255

Int16Array-32,768 to 32,767

Uint16Array0 to 65,535

Int32Array-2.1B to 2.1B

Uint32Array0 to 4.2B

Float Types

Float32Array32-bit float

Float64Array64-bit float

Special

Uint8ClampedArray0-255, clamped

BigInt64ArrayBigInt values

BigUint64ArrayUnsigned BigInt

ArrayBuffer - The Foundation

All Typed Arrays are views over an ArrayBuffer - a fixed-length raw binary data buffer. Think of ArrayBuffer as the raw memory, and Typed Arrays as different ways to view/interpret that memory.

const buffer = new ArrayBuffer(16);  // 16 bytes of memory
const view = new Uint8Array(buffer); // View as 8-bit integers

Example 1: Creating and Using Typed Arrays

Basic operations with different typed array types

javascript

code

DarkEditable

// 1. Create Uint8Array (0-255)
const bytes = new Uint8Array(5);
bytes[0] = 10;
bytes[1] = 255;
bytes[2] = 300;  // Wraps to 44 (300 % 256)

console.log(bytes);
// Uint8Array [10, 255, 44, 0, 0]

// 2. Create from regular array
const numbers = new Int16Array([10, 20, 30, 40]);
console.log(numbers);
// Int16Array [10, 20, 30, 40]

// 4. Array-like methods work!
const arr = new Uint8Array([1, 2, 3, 4, 5]);

// map
const doubled = arr.map(x => x * 2);
console.log(doubled);
// Uint8Array [2, 4, 6, 8, 10]

// filter
const evens = arr.filter(x => x % 2 === 0);
console.log(evens);
// Uint8Array [2, 4]

// reduce
const sum = arr.reduce((acc, val) => acc + val, 0);
console.log(sum);  // 15

Console Output

Click "Run Code" to see output here...

Example 2: Working with Binary Data

Real-world scenarios for Typed Arrays

javascript

code

DarkEditable

const redPixels = createRedImage(2, 2);
console.log(redPixels);
// Uint8ClampedArray [255, 0, 0, 255, 255, 0, 0, 255, ...]

const tone = generateTone(440, 0.1);  // 440Hz A note, 0.1 second
console.log(tone.length);  // 4410 samples

// 3. File reading
async function readFileAsUint8Array(file) {
  const buffer = await file.arrayBuffer();
  return new Uint8Array(buffer);
}

// Usage: const bytes = await readFileAsUint8Array(myFile);

// 4. Network data
function encodeMessage(text) {
  const encoder = new TextEncoder();
  return encoder.encode(text);  // Returns Uint8Array
}

function decodeMessage(bytes) {
  const decoder = new TextDecoder();
  return decoder.decode(bytes);  // String
}

const encoded = encodeMessage('Hello!');
console.log(encoded);
// Uint8Array [72, 101, 108, 108, 111, 33]

const decoded = decodeMessage(encoded);
console.log(decoded);  // "Hello!"

Console Output

Click "Run Code" to see output here...

Key Differences from Regular Arrays

✅ Typed Arrays

✅ Fixed length (can't resize)
✅ Fixed type (only numbers)
✅ Contiguous memory
✅ Much faster for binary data
✅ Less memory overhead
✅ Direct binary access

✅ Regular Arrays

✅ Dynamic length (resize)
✅ Any type (mixed values)
✅ Not contiguous
✅ More flexible
✅ Easier to use
✅ More methods available

🎯When to Use Typed Arrays

🎨

Image/Canvas Data

Manipulating pixel data in Canvas API, WebGL, image processing

🎵

Audio Processing

Web Audio API, audio synthesis, real-time audio manipulation

📁

File Handling

Reading/writing binary files, file uploads, parsing binary formats

🌐

Network Data

WebSockets, binary protocols, data transfer optimization

Key Takeaways

🔢

Fixed Type

Store only specific number types in binary format

⚡

Performance

Much faster for binary data operations

💾

ArrayBuffer

Backed by raw binary buffer - different views possible

🎯

Use Cases

Graphics, audio, files, WebGL, network data

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Array includes

Object.create

JavaScript Code Editor

Building Your Learning Module...

Typed Arrays

What are Typed Arrays?

Why Use Typed Arrays?

Integer Types

Float Types

Special

ArrayBuffer - The Foundation

Example 1: Creating and Using Typed Arrays

Example 2: Working with Binary Data

✅ Typed Arrays

✅ Regular Arrays

Image/Canvas Data

Audio Processing

File Handling

Network Data

Key Takeaways

Fixed Type

Performance

ArrayBuffer

Use Cases

Array includes

Object.create

JavaScript Code Editor

Typed Arrays

What are Typed Arrays?

Why Use Typed Arrays?

Integer Types

Float Types

Special

ArrayBuffer - The Foundation

Example 1: Creating and Using Typed Arrays

Example 2: Working with Binary Data

✅ Typed Arrays

✅ Regular Arrays

Image/Canvas Data

Audio Processing

File Handling

Network Data

Key Takeaways

Fixed Type

Performance

ArrayBuffer

Use Cases