WebAssembly Function Parameters

What Are WebAssembly Function Parameters?

Function parameters are variables passed to a function at the time of its invocation. In WebAssembly:

• Each parameter must have a defined type, such as i32, i64, f32 or f64.
• Parameters are pushed onto a stack when the function is called.
• The function accesses and manipulates these parameters using stack-based operations.

Declaring Parameters in WebAssembly

In the WebAssembly Text Format (.wat), parameters are declared within the func block using the param keyword. Each parameter is given a type and optionally, a name for readability.

Syntax:

(func <function_name> (param <param_name> <type>) ... (result <type>)
  ;; Function body
)

• param: Declares the parameters and their types.
• <param_name>: Optional name for the parameter (used for clarity).
• <type>: Specifies the data type (i32, i64, f32 or f64).

Example 1: Single Parameter Function

A function that calculates the square of an integer.

WebAssembly Text Format:

(module
  (func $square (param $x i32) (result i32)
    local.get $x     ;; Push the value of $x onto the stack
    local.get $x     ;; Push the value of $x again
    i32.mul          ;; Multiply $x by itself
  )
  (export "square" (func $square)) ;; Export the function
)

Explanation:

• Parameter: $x of type i32.
• Operation: Multiplies $x by itself using i32.mul.
• Result: Returns the square of $x.

Usage in JavaScript:

const wasmCode = new Uint8Array([...]); // WebAssembly binary
WebAssembly.instantiate(wasmCode).then((module) => {
  const square = module.instance.exports.square;
  console.log(square(4)); // Output: 16
});

Example 2: Multiple Parameters

A function to add two floating-point numbers.

WebAssembly Text Format:

(module
  (func $addFloats (param $a f32) (param $b f32) (result f32)
    local.get $a     ;; Push the value of $a onto the stack
    local.get $b     ;; Push the value of $b onto the stack
    f32.add          ;; Add the two values
  )
  (export "addFloats" (func $addFloats)) ;; Export the function
)

Explanation:

• Parameters: $a and $b, both of type f32.
• Operation: Adds the two floating-point values using f32.add.
• Result: Returns their sum.

Usage in JavaScript:

const wasmCode = new Uint8Array([...]); // WebAssembly binary
WebAssembly.instantiate(wasmCode).then((module) => {
  const addFloats = module.instance.exports.addFloats;
  console.log(addFloats(3.5, 2.5)); // Output: 6
});

Working with Multiple Parameter Types

WebAssembly supports functions with mixed parameter types. For example, a function can take an integer and a floating-point value as inputs.

Example 3: Mixed Parameter Types

A function to calculate a * b + c, where a and b are integers, and c is a float.

WebAssembly Text Format:

(module
  (func $mixedOperation (param $a i32) (param $b i32) (param $c f32) (result f32)
    local.get $a       ;; Push $a onto the stack
    local.get $b       ;; Push $b onto the stack
    i32.mul            ;; Multiply $a and $b
    f32.convert_i32_s  ;; Convert the result to f32
    local.get $c       ;; Push $c onto the stack
    f32.add            ;; Add the converted result and $c
  )
  (export "mixedOperation" (func $mixedOperation)) ;; Export the function
)

Usage in JavaScript:

const wasmCode = new Uint8Array([...]); // WebAssembly binary
WebAssembly.instantiate(wasmCode).then((module) => {
  const mixedOperation = module.instance.exports.mixedOperation;
  console.log(mixedOperation(2, 3, 1.5)); // Output: 7.5
});

Accessing Parameters Inside Functions

Parameters in WebAssembly functions are accessed using the local.get instruction. This retrieves the parameter’s value from the stack for use in the function’s computation.

Example:

(local.get $param_name)

For example, local.get $x retrieves the value of the parameter $x for further operations.

Exporting and Calling Parameterized Functions

To make a function with parameters callable from JavaScript or other host environments, it must be exported. Exporting a function allows external code to pass arguments to the function at runtime.

Export Example:

(export "functionName" (func $functionName))

This allows the function to be invoked with parameters directly from the host application.