ECMAScript 2024 brings several exciting enhancements to ArrayBuffer and SharedArrayBuffer, making memory management in JavaScript more efficient and flexible. In this post, we’ll dive into these new features and provide examples to help you get started.

In-Place Resizable ArrayBuffers

Previously, ArrayBuffers had fixed sizes. Resizing required allocating a new buffer and copying data, which was inefficient and could fragment the address space on 32-bit systems. ECMAScript 2024 introduces in-place resizable ArrayBuffers, allowing dynamic resizing without creating new buffers or copying data.

New Constructor and Methods

The ArrayBuffer constructor now accepts an additional parameter for maxByteLength. Here’s the updated constructor and new methods:

• new ArrayBuffer(byteLength: number, options?: {maxByteLength?: number})

• ArrayBuffer.prototype.resize(newByteLength: number)

• ArrayBuffer.prototype.resizable()

• ArrayBuffer.prototype.maxByteLength()

Example: Resizing an ArrayBuffer 🖊️

// Create a resizable ArrayBuffer with an initial size of 10 bytes and a max size of 20 bytes
let buffer = new ArrayBuffer(10, { maxByteLength: 20 });
console.log(buffer.byteLength); // 10

// Resize the ArrayBuffer to 15 bytes
buffer.resize(15);
console.log(buffer.byteLength); // 15

// Attempting to resize beyond the max size throws an error
try {
  buffer.resize(25);
} catch (e) {
  console.error(e); // RangeError: ArrayBuffer length exceeds max length
}

ArrayBuffer.prototype.transfer

The new transfermethods allow efficient data transfer between ArrayBuffers. This is particularly useful for transferring data via structuredClone() or within the same agent (e.g., main thread or web worker).
Example

let buffer1 = new ArrayBuffer(8);
let buffer2 = buffer1.transfer();
console.log(buffer1.byteLength); // 0 (buffer1 is now detached)
console.log(buffer2.byteLength); // 8

SharedArrayBuffer Enhancements

SharedArrayBuffer allows multiple JavaScript contexts (threads or processes) to share the same memory. This is crucial for applications that need efficient memory sharing for large data across different agents. With ECMAScript 2024, SharedArrayBuffers can also be resized, but with some limitations:

• SharedArrayBuffers can only grow; they cannot shrink.

• SharedArrayBuffers are not transferrable and therefore do not have the .transfer() method that ArrayBuffers have.

New Constructor and Methods

The SharedArrayBuffer constructor now accepts an additional parameter for maxByteLength. Here’s the updated constructor and new method:

• new SharedArrayBuffer(byteLength: number, options?: {maxByteLength?: number})

• SharedArrayBuffer.prototype.grow(newByteLength: number)

Example 🖊️

const buffer = new SharedArrayBuffer(8, { maxByteLength: 16 });

if (buffer.growable) {
  buffer.grow(12);
  console.log(buffer.byteLength); // 12
}

The new features in ECMAScript 2024 make ArrayBufferand SharedArrayBuffermore powerful and flexible. In-place resizing eliminates the need for costly buffer reallocations, and the new transfer methods facilitate efficient data movement. Enhanced SharedArrayBuffer capabilities continue to support efficient memory sharing across JavaScript contexts, with the added ability to resize (though only to grow and not shrink).

Reference Link : Ecma International approves ECMAScript 2024: What’s new?