On this step, we will explore how to call WebAssembly functions from JavaScript. This ability is crucial to leverage the power of WebAssembly in your web applications, bringing the potency of C++ to your JavaScript-based projects.

Usually, you'd load a WebAssembly module using JavaScript's fetch API, and WebAssembly's compile or instantiate methods. A simple pseudo example looks like this:

1async function loadWasmModule() {
2  const response = await fetch('path_to_wasm_module');
3  const moduleBytes = await response.arrayBuffer();
4  const { instance } = await WebAssembly.instantiate(moduleBytes);
5  return instance;
6}

Let's say the WebAssembly module has a function addNumbers we want to use.

In JavaScript, you'd use:

1const wasmInstance = await loadWasmModule();
2console.log(wasmInstance.exports.addNumbers(5, 7));

The exports object contains all functions that were exported from the WebAssembly module, ready to be used in JavaScript! It's like adding rocket fuel to your JavaScript engine, improving your web app's speed and performance.

Consider you're developing a web-based marketing tool, using WebAssembly modules can enable you to perform heavy computations on the client-side in a performant way, which typically might be limited in a conventional JavaScript environment.

xxxxxxxxxx

#include <emscripten/bind.h>

using namespace emscripten;

​

int addNumbers(int a, int b) {

  return a + b;

}

​

EMSCRIPTEN_BINDINGS(my_module) {

  function("addNumbers", &addNumbers);

}