Échange de données élémentaires : types primitifs
Comprenez comment transmettre des types de données simples, comme des entiers et des nombres flottants, entre votre code JavaScript et WASM.
Échange de données élémentaires : types primitifs est une leçon WebAssembly (WASM) for High Performance Apps gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage WebAssembly (WASM) for High Performance Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours WebAssembly (WASM) for High Performance Apps comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Exchanging Basic Data Types
Welcome! In this lesson, we'll learn how to pass simple data types, known as primitives, between your JavaScript code and your WebAssembly (WASM) module compiled from C/C++.
Primitives include numbers like integers (int) and floating-point numbers (float, double). This is fundamental for enabling communication and interaction between your web application and high-performance WASM logic.
JS to WASM: Integer Input
Passing an integer from JavaScript to a C/C++ WASM function is quite direct. You define your C/C++ function with integer parameters, and Emscripten handles the necessary type mapping.
For example, a C function to add two integers would look like this:
int add_integers(int a, int b) {
// Function body
return a + b;
}Example: WASM Integer Function
Let's look at a complete C program that defines a function to add two integers and exposes it to JavaScript using EMSCRIPTEN_KEEPALIVE.
Try running this code and see how it compiles:
#include <stdio.h>
#include <emscripten/emscripten.h>
#ifdef __cplusplus
extern "C" {
#endif
EMSCRIPTEN_KEEPALIVE
int add_integers(int a, int b) {
printf("WASM: Adding %d and %d\n", a, b);
return a + b;
}
#ifdef __cplusplus
}
#endif
int main() {
printf("WASM module for integers loaded.\n");
return 0;
}Calling Integer Function from JS
After compiling the C code above, Emscripten generates a JavaScript glue code file (e.g., your_module.js) that provides access to your C functions.
You can then call the exported C function from your JavaScript code like this:
// Assuming 'Module' is the Emscripten-generated object
Module.onRuntimeInitialized = () => {
// The C function is prefixed with an underscore by default
const result = Module._add_integers(10, 25);
console.log(`Sum from WASM: ${result}`); // Output: Sum from WASM: 35
};WASM to JS: Integer Output
Returning an integer from a WASM function back to JavaScript is just as straightforward. C/C++ functions naturally return primitive types, and Emscripten ensures these return values are directly accessible in JavaScript.
Consider a C function that simply returns a fixed integer:
int get_magic_number() {
return 42;
}Example: WASM Returns Integer
Here's a C example that returns a specific integer. Notice the use of EMSCRIPTEN_KEEPALIVE to make it available to JavaScript.
Run this to see the simple C structure:
#include <stdio.h>
#include <emscripten/emscripten.h>
#ifdef __cplusplus
extern "C" {
#endif
EMSCRIPTEN_KEEPALIVE
int get_magic_number() {
printf("WASM: Returning magic number.\n");
return 42;
}
#ifdef __cplusplus
}
#endif
int main() {
printf("WASM module for returning integers loaded.\n");
return 0;
}Exchanging Floating-Point Numbers
Passing floating-point numbers (float and double) between JavaScript and WASM works very similarly to integers. You define your C/C++ functions with float or double parameters and return types.
JavaScript's Number type is generally a 64-bit float (double-precision), which Emscripten automatically converts when passing to C/C++ float (32-bit) or double (64-bit) types.
Example: WASM Float Operations
Let's create a C function that takes two floats and returns their product, and another for doubles. This demonstrates both input and output of floating-point numbers.
Run this code to see how floats are handled:
#include <stdio.h>
#include <emscripten/emscripten.h>
#ifdef __cplusplus
extern "C" {
#endif
EMSCRIPTEN_KEEPALIVE
float multiply_floats(float a, float b) {
printf("WASM: Multiplying floats %.2f * %.2f\n", a, b);
return a * b;
}
EMSCRIPTEN_KEEPALIVE
double divide_doubles(double x, double y) {
printf("WASM: Dividing doubles %.2f / %.2f\n", x, y);
if (y == 0.0) return 0.0; // Avoid division by zero
return x / y;
}
#ifdef __cplusplus
}
#endif
int main() {
printf("WASM module for floats/doubles loaded.\n");
return 0;
}Type Matching is Key
While Emscripten handles much of the type conversion automatically, it's good practice to be aware of the underlying types:
- JavaScript
Number: This is typically a 64-bit floating-point number. - C/C++
int: Often 32-bit integer. - C/C++
float: 32-bit floating-point number. - C/C++
double: 64-bit floating-point number.
When passing a JS Number to a C float, there might be a slight loss of precision, as the 64-bit JS number is truncated to a 32-bit float.
Quick Check: Data Flow
You've learned how simple data types are exchanged. Let's test your understanding.
Recap: Primitive Exchange
Great job! You've mastered the basics of primitive data exchange between JavaScript and WebAssembly modules compiled from C/C++.
- Simple data types like
int,float, anddoubleare straightforward to pass. - C/C++ functions can take them as parameters and return them as results.
- Emscripten acts as the bridge, automatically converting between JavaScript's
Numbertype and C/C++'s primitive types. - Be mindful of potential precision differences when converting between 64-bit (JS
Number, Cdouble) and 32-bit (Cfloat, Cint) types.
This fundamental understanding paves the way for exchanging more complex data structures later on!
Questions Fréquemment Posées
La leçon « Échange de données élémentaires : types primitifs » est-elle gratuite ?
Oui — le texte complet de « Échange de données élémentaires : types primitifs » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours WebAssembly (WASM) for High Performance Apps, passe à CoddyKit PRO. Le cours WebAssembly (WASM) for High Performance Apps comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Échange de données élémentaires : types primitifs » ?
Comprenez comment transmettre des types de données simples, comme des entiers et des nombres flottants, entre votre code JavaScript et WASM. Tu pratiques WebAssembly (WASM) for High Performance Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer WebAssembly (WASM) for High Performance Apps ?
Aucune expérience préalable n'est requise. WebAssembly (WASM) for High Performance Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Échange de données élémentaires : types primitifs » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon WebAssembly (WASM) for High Performance Apps ?
Oui. Chaque leçon WebAssembly (WASM) for High Performance Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Compiler C/C++ vers WASM avec Emscripten
- Charger et exécuter WASM en JavaScript
- Échange de données élémentaires : types primitifs
- Appeler des fonctions JavaScript depuis C/C++