Introduction

In my previous blogs, I talked about working with arrays and working with Stings in Webassembly. Now in this blog, I want to talk about how to work with Numbers in WebAssembly. If you are following my blogs working with numbers will seem easy to you but there are some points which you should be careful about when working with numbers in WebAssembly.

Writing C++ Code

In the snippet below you can see a simple function sum which adds 2 numbers passed as arguments to it

#include<emscripten.h>
extern "C"{
    EMSCRIPTEN_KEEPALIVE
    int sum(int x,int y){
        return x+y;
    }
}

all of the keywords which you might not be familiar with are explained here.

Compiling the code

To compile the code above to WebAssembly we can use the following code snippet. In case you don't have emscripten installed in your system you can find the necessary steps here.

em++ code.cpp -o function.js -sEXPORTED_RUNTIME_METHODS=['ccall'] -sMODULARIZE

keywords used in the above command are explained below

1. em++ - triggers emscripten.

2. code.cpp - the name of the C++ file

3. -o function.js - the name of the output file

4. -sEXPORTED_RUNTIME_METHODS=['ccall'] - it tells the compiler to include ccall in the output file

5. -sMODULARIZE - tells the compiler to wrap the output code in promise.

Now we have our output files - function.js containing the necessary code to import and initialize the wasm code and function.wasm, contains the wasm code.

Writing JavaScript

So now as we have our wasm file ready so we can start interacting with the functions.

But first of all, create an HTML document and paste the following script tag inside the head section of it.

<script src="./function.js"></script>

After that inside another script tag write the following code

Module().then(mod => {
  let num1 = 20;
  let num2 = 30;
  let result = mod.ccall("sum","number",['number','number'],[num1,num2]);
  console.log(result);
});

Let's break down the code to understand it

1. First of all, I declared2 variables containing the 2 numbers which I want to add

2. Then I used the ccall method which we exported during the compilation in the output code to call the sum function.

3. ccall takes 4 parameters - the first one is the function name, the second one is the return type, the third one is an array containing the types of the argument serial wise the and last one is the list of arguments. As you can see that no matter if the argument is an integer, double or float we write its type as a number, in this case we are adding integers so, will get the desired result but in the case of float or double we get the unexpected result as javascript is dynamically typed but C++ is not.

4. Finally, we get our results.

Now let's suppose we are adding 2 floats values then our javascript code will look the same but we have to change our C++ code as follows

#include<emscripten.h>

extern "C"{
    EMSCRIPTEN_KEEPALIVE
    // changed arguments and return type of float
    float sum(float x,float y){
    return x+y;
    }
}

Conclusion

So the point which we must be careful about when working with numbers is types in C++ side.