files/en-us/webassembly/reference/table/fill/index.md
The table.fill Table instruction sets a range of table elements to the same value.
{{InteractiveExample("Wat Demo: table.fill", "tabbed-taller")}}
(module
;; Define function type
(type $ret_i32 (func (result i32)))
;; Define table with 3 function slots
(table $my_table 3 funcref)
;; Define basic function that returns an i32
(func $f1 (result i32)
(i32.const 42)
)
(elem declare func $f1)
(func (export "run") (result i32)
;; Set the function referenced in every table element to $f1
(table.fill $my_table
(i32.const 0)
(ref.func $f1)
(i32.const 3)
)
;; Call the function referenced in slot 2
(call_indirect (type $ret_i32) (i32.const 2))
)
)
WebAssembly.instantiateStreaming(fetch("{%wasm-url%}")).then((result) => {
const value = result.instance.exports.run();
console.log(value);
});
table.fill identifier
table.fill
table.fill instruction type. Must always be included first.identifier {{optional_inline}}
: The identifier for the table you want to fill. This can be one of the following:
name
$ symbol, for example $my_table.index {{optional_inline}}
0 for the first table in the wasm module, 1 for the second, etc.If the identifier is omitted, it will default to 0.
[index, value, length] -> []
index
i32 value, for example (i32.const 0).value
length
index. This must be an i32 value.table.fill traps if:
index + length is greater than table.size.| Instruction | Binary opcode |
|---|---|
table.fill | πΆπ‘π΅π² 17:ππΉπΈ (variable-width LEB128) |
table.fill behaviorThis example demonstrates that, when all of the elements of a table are referenced in a table.fill instruction, all of those elements will reference the same value.
In our script, we start by grabbing a reference to a {{htmlelement("p")}} element that we will output results to. We then define an obj object containing a function called output() that adds a given value to the textContent of a given element.
We then compile and instantiate our Wasm module using the WebAssembly.instantiateStreaming() method, importing the obj object in the process.
When the result is returned, we invoke the exported Wasm run() function available on the WebAssembly Instance exports object, passing it the outputElem element as a parameter.
<p></p>
const outputElem = document.querySelector("p");
const obj = {
output(elem, val) {
elem.textContent += `${val} `;
},
};
WebAssembly.instantiateStreaming(fetch("{%wasm-url%}"), {
obj,
}).then((result) => {
value = result.instance.exports.run(outputElem);
});
In our Wasm module, we first import the JavaScript output() function, making sure to declare that it has two parameters, an externref and an i32.
Next, we define a function type called $ret_i32 that returns an i32, and a table that stores function references (hence funcref being specified) and has three elements.
We now define a basic function that returns an i32, and forward-declare it using (elem declare func $f1) so it can be referenced later on.
Finally, we export the run() function, which takes an externref named $elem as a parameter. Inside the function body, we:
table.fill to store a reference to the $f1 function in every table slot. Note how we've set the starting_index to 0 and the element_span to the result of the table.size instruction to guarantee that we'll fill all of the table elements.$output function, passing it as parameters the $elem externref passed into the output() function, and the return value of the function referenced in the first table slot. This results in the value being outputted to the DOM.(module
;; Import output function
(import "obj" "output" (func $output (param externref) (param i32)))
;; Define function type
(type $ret_i32 (func (result i32)))
;; Define an initially empty table of funcrefs with three slots
(table $func_table 3 funcref)
;; Define basic function that returns an i32
(func $f1 (result i32)
(i32.const 42)
)
(elem declare func $f1)
(func (export "run") (param $elem externref)
;; Set the function referenced in every table element to $f1
(table.fill $func_table
(i32.const 0) ;; starting index
(ref.func $f1)
(table.size $func_table) ;; Number of slots, not end index
)
;; Call the output function, to output the return values of
;; the functions referenced in each table element to the DOM
(call $output
(local.get $elem)
(call_indirect (type $ret_i32) (i32.const 0))
)
(call $output
(local.get $elem)
(call_indirect (type $ret_i32) (i32.const 1))
)
(call $output
(local.get $elem)
(call_indirect (type $ret_i32) (i32.const 2))
)
)
)
The output is as follows:
{{embedlivesample("basic-usage", "100%", 100)}}
This proves that all of the table elements now reference the $f1 function, which returns 42.
{{Specifications}}
{{Compat}}