WebAssembly.Table() constructor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

The WebAssembly.Table() constructor creates a new Table object of the given size and element type, filled with the provided value.

Syntax

js
new WebAssembly.Table(tableDescriptor)
new WebAssembly.Table(tableDescriptor, value)

Parameters

tableDescriptor

An object that can contain the following members:

element

A string representing the type of value to be stored in the table. This can have a value of "anyfunc" (functions) or "externref" (host references).

initial

The initial number of elements of the WebAssembly Table.

maximum Optional

The maximum number of elements the WebAssembly Table is allowed to grow to.

value Optional

The element to fill the newly-allocated space with.

Exceptions

If tableDescriptor is not an object, a TypeError is thrown.
If maximum is specified and is smaller than initial, a RangeError is thrown.
If element is not one of the reference types, then a TypeError is thrown.
If value is not a value of the type element, a TypeError is thrown.

The following example creates a WebAssembly.Table instance with an initial size of 2 elements. The WebAssembly.Table contents are populated using a WebAssembly module and are accessible from JavaScript. When viewing the live example, open your developer console to display console log messages from the code snippets below.

This example uses the following reference files:

table2.html: An HTML page containing JavaScript that creates and manipulates a WebAssembly.Table (source code)
table2.wat: A WebAssembly text format module that is converted to a binary format and imported by the JavaScript code in table2.html (source code)

Note: A precompiled WebAssembly binary table2.wasm is available for download.

In table2.html, we create a WebAssembly.Table:

js
const tbl = new WebAssembly.Table({
  initial: 2,
  element: "anyfunc",
});

We can retrieve the index contents using Table.prototype.get():

js
console.log(tbl.length); // a table with 2 elements
console.log(tbl.get(0)); // content for index 0 is null
console.log(tbl.get(1)); // content for index 1 is null

Next, we create an import object that contains the WebAssembly.Table:

js
const importObject = {
  js: { tbl },
};

Next, we load and instantiate a WebAssembly module. The table2.wasm module defines a table containing two functions. The first function returns 42, and the second returns 83:

wat
(module
  (import "js" "tbl" (table 2 funcref))
  (func $f42 (result i32) i32.const 42)
  (func $f83 (result i32) i32.const 83)
  (elem (i32.const 0) $f42 $f83)
)

We instantiate table2.wasm using the WebAssembly.instantiateStreaming() method:

js
const instantiating = WebAssembly.instantiateStreaming(
  fetch("table2.wasm"),
  importObject,
);

After instantiating table2.wasm, tbl is updated with the following:

table length is still 2
content for index 0 is now a function which returns 42
content for index 1 is now a function which returns 83

The items at indexes 0 and 1 of the table are now callable Exported WebAssembly Functions. To call them, note that we must add the function invocation operator () after the get() call:

js
instantiating.then((obj) => {
  console.log(tbl.length); // 2
  console.log(tbl.get(0)()); // 42
  console.log(tbl.get(1)()); // 83
});

While we are creating and accessing the WebAssembly.Table from JavaScript, the same Table is also visible and callable inside the WebAssembly instance.

Creating a new WebAssembly Table instance with a value

The following example creates a new WebAssembly Table instance with 4 elements, full of the same object:

js
const myObject = { hello: "world" };

const table = new WebAssembly.Table(
  {
    element: "externref",
    initial: 4,
    maximum: 4,
  },
  myObject,
);

console.log(myObject === table.get(2)); // true