Learn more about Russian war crimes in Ukraine.

WebAssembly hello world

If your browser supports WebAssembly, copy-pasting the following into the console will print 42:

const module = WebAssembly.Module(new Uint8Array([
  0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00, 0x01, 0x08, 0x02, 0x60, 0x01, 0x7f, 0x00, 0x60,
  0x00, 0x00, 0x02, 0x0f, 0x01, 0x07, 0x69, 0x6d, 0x70, 0x6f, 0x72, 0x74, 0x73, 0x03, 0x6c, 0x6f,
  0x67, 0x00, 0x00, 0x03, 0x02, 0x01, 0x01, 0x07, 0x05, 0x01, 0x01, 0x65, 0x00, 0x01, 0x0a, 0x08,
  0x01, 0x06, 0x00, 0x41, 0x2a, 0x10, 0x00, 0x0b,
]));
const instance = new WebAssembly.Instance(module, {imports:{log:console.log}})
instance.exports.e();

Why does this print 42 to the console? The mysterious hex is a WebAssembly program, which we compile and “instantiate”. WebAssembly programs have “imports” and “exports”. We pass console.log to the program as the import called log. The program exports a function called e, which when called calls log with the number 42. (You can see the number 42 embedded in the program as the hex 0x2a!) We call that exported e() on the WebAssembly Instance, causing it to call console.log with the number 42.

The mysterious hex is in wasm format. I didn’t write it myself; instead, I compiled it from a program in WAST (“Web Abstract Syntax Tree”) format. You can see the exports, imports and call logic in the WAST program:

(module
  (func $i (import "imports" "log") (param i32))
  (func (export "e")
    i32.const 42
    call $i))

I compiled this with:

$ brew install wabt
$ wast2wasm program.wast -o program.wasm

More advanced usage of WebAssembly would probably download an external .wasm file, and compile it asynchronously. The following also works, if you run it in the console:

async function callWasm() {
  const response = await fetch('/assets/2017-10-12/program.wasm');
  const bytes = await response.arrayBuffer();
  const module = await WebAssembly.compile(bytes);
  const instance = new WebAssembly.Instance(module, { imports: { i: console.log } });
  instance.exports.e();
}
callWasm();

What can computers do? What are the limits of mathematics? And just how busy can a busy beaver be? This year, I’m writing Busy Beavers, a unique interactive book on computability theory. You and I will take a practical and modern approach to answering these questions — or at least learning why some questions are unanswerable!

It’s only $19, and you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

After months of secret toil, I and Andrew Carr released Everyday Data Science, a unique interactive online course! You’ll make the perfect glass of lemonade using Thompson sampling. You’ll lose weight with differential equations. And you might just qualify for the Olympics with a bit of statistics!

It’s $29, but you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

More by Jim

Tagged . All content copyright James Fisher 2017. This post is not associated with my employer. Found an error? Edit this page.