JavaScript Int32Array Examples

Create and update an efficient integer array with the ArrayBuffer and Int32Array types.

Int32Array. A program needs millions of small integers in an array. With a typed array, we can efficiently store these values. Each element requires its exact number of bytes.

For JavaScript, the typical array is a high-level type. An ArrayBuffer and a "view" upon it like Int32Array is a low-level array.

Example program. Let us get started. To use an efficient byte array, we first create an ArrayBuffer. We specify the exact number of bytes (not elements) we want in the constructor.

Then: We create a "view" upon the ArrayBuffer. Here we use an Int32Array to have 4-byte elements in our array.

Assign: We can assign elements to the Int32Array and read them back. In this way it is like any other array.

JavaScript program that uses ArrayBuffer, Int32Array // Create a buffer of 40 bytes. var buffer = new ArrayBuffer(4 * 10); // Use Int32Array on this buffer. var array = new Int32Array(buffer); // Assign elements. for (var i = 0; i < array.length; i++) { array[i] = i; } array[0] = 300; // Read from Int32Array. for (var i = 0; i < array.length; i++) { console.log("INT32ARRAY ELEMENT: " + array[i]); } Output INT32ARRAY ELEMENT: 300 INT32ARRAY ELEMENT: 1 INT32ARRAY ELEMENT: 2 INT32ARRAY ELEMENT: 3 INT32ARRAY ELEMENT: 4 INT32ARRAY ELEMENT: 5 INT32ARRAY ELEMENT: 6 INT32ARRAY ELEMENT: 7 INT32ARRAY ELEMENT: 8 INT32ARRAY ELEMENT: 9

Array literals. A typed array can be initialized from an array literal. We pass the array directly to the Int32Array constructor. Other constructors like Int8Array also work.

Tip: For performance, it is best to test your program before using Int32Array around array literals. There is a conversion cost here.

And: Sometimes using an array literal directly is faster in browsers. If the array is small, there is little potential benefit.

JavaScript program that uses array literals with typed arrays // Use array literal to create Int32Array. var values = new Int32Array([10, 8000000, 8]); for (var i = 0; i < values.length; i++) { console.log("INT32ARRAY ELEMENT: " + values[i]); } // Use array literal to create Int8Array. var valuesSmall = new Int8Array([0, 20, 1, 0]); for (var i = 0; i < valuesSmall.length; i++) { console.log("INT8ARRAY ELEMENT: " + valuesSmall[i]); } Output INT32ARRAY ELEMENT: 10 INT32ARRAY ELEMENT: 8000000 INT32ARRAY ELEMENT: 8 INT8ARRAY ELEMENT: 0 INT8ARRAY ELEMENT: 20 INT8ARRAY ELEMENT: 1 INT8ARRAY ELEMENT: 0

Memory usage. Suppose we want to manipulate 10 million integers. With an Int32Array we save memory over an Array. I tested two programs with large arrays.

Program 1: This program uses a 40 million byte ArrayBuffer. It then uses 10 million Int32 values in the array.

Program 2: This program uses a 10 million object array and uses integers in each slot. The programs' memory is measured.

Result: The Int32 array program (1) uses about 7 MB less RAM when measured in Process Explorer on Windows.

JavaScript program that uses 10 million elements, Int32Array // Create buffer of 40 million bytes. var buffer = new ArrayBuffer(40000000); // Use Int32Array. var array = new Int32Array(buffer); // Use array. for (var i = 0; i < array.length; i++) { array[i] = i; } // Test length. document.title = array.length; JavaScript program that uses 10 million elements, Array // Create new array of 10 million elements. var array = new Array(10000000); // Use array. for (var i = 0; i < array.length; i++) { array[i] = i; } // Test length. document.title = array.length; Output 58.3 MB ArrayBuffer, Int32Array 65.3 MB Array

Benchmark, modify elements. Suppose you have a JavaScript application that reads and writes ints in a giant array many times. Would ArrayBuffer and Int32Array be faster here?

Version 1: This program creates an Int32Array of 1 million elements and then reads and writes into each element 1000 times.

Version 2: This version uses a normal JavaScript array. The JavaScript runtime (V8) must handle the int types on its own.

Array

Result: In 2020 Chromium, there exists a performance advantage to using Int32Array for many reads and writes from an array.

Note: It is important to initialize the elements in the Array to 0—the benchmark otherwise would test using undefined values.

JavaScript program that benchmarks Int32Array var size = 1000000; var buffer = new ArrayBuffer(4 * size); var intArray = new Int32Array(buffer); var array = new Array(size); // Ensure all values are 0 in the array. for (var i = 0; i < size; i++) { array[i] = 0; } var x1 = performance.now(); // Version 1: modify values in Int32Array. for (var i = 0; i < 1000; i++) { for (var z = 0; z < size; z++) { intArray[z] = intArray[z] + 2; } } var x2 = performance.now(); // Version 2: modify values in Array. for (var i = 0; i < 1000; i++) { for (var z = 0; z < size; z++) { array[z] = array[z] + 2; } } var x3 = performance.now(); // Results. console.log("TIME 1: " + (x2 - x1)); console.log("TIME 2: " + (x3 - x2)); Output TIME 1 (2020): 2052.270 TIME 2: 2213.754

Some notes. Many constructs in JavaScript do not need low-level structures. But for an array with millions of elements, a typed array can make a program use much less memory.

And: With improved locality of reference, it will execute much faster. Each element is more compact.

Note: Thanks to Boris Egorov for suggesting a fix to the benchmark of Int32Array.

A review. With typed arrays, JavaScript begins to support complex mathematical or numerical applications. Many numbers can be used in a program.

The Dev Codes

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

JavaScript Int32Array Examples

Related Links:

.Net

Java

Related Links