การเขียนฟังก์ชัน Rust สำหรับ WASM

Welcome back! In the previous lesson, we set up our Rust environment for WebAssembly. Now, let's dive into writing Rust functions that can be used directly in your web applications.

The goal is to expose Rust's performance and safety to JavaScript, making your web apps even more powerful.

Before exporting, let's quickly recall how standard Rust functions are defined. They use the fn keyword, followed by the function name, parameters with their types, and an optional return type.

• fn: Declares a function.
• (param: Type): Defines parameters and their types.
• -> ReturnType: Specifies the function's return type.

To make a Rust function callable from JavaScript, we use a special attribute from the wasm-bindgen crate: #[wasm_bindgen]. Think of it as a bridge builder!

This attribute tells the wasm-bindgen tool to generate the necessary 'glue code' that allows JavaScript to understand and invoke your Rust function seamlessly.

Let's write a simple Rust function that adds two integers and expose it to JavaScript. This function will live in your src/lib.rs file.

Notice the #[wasm_bindgen] attribute right above the function definition. This is the magic!

In the previous example, you saw pub fn and use wasm_bindgen::prelude::*;. Let's clarify their roles:

• pub: This keyword makes the function public, meaning it can be accessed from outside the current module (e.g., by JavaScript).
• use wasm_bindgen::prelude::*;: This line imports essential items from the wasm-bindgen library, including the #[wasm_bindgen] attribute itself.

After writing your Rust code, you'll use the wasm-pack build command (which we briefly mentioned in Lesson 1) to compile it into a WebAssembly module.

wasm-pack handles all the complexity, producing a .wasm file and a JavaScript 'glue' file that simplifies loading and interacting with your Rust functions from JS.

Let's add another function to our src/lib.rs. This one will multiply two numbers. The process is identical: define the function, add the #[wasm_bindgen] attribute, and make it pub.

This demonstrates how easy it is to expose multiple Rust functions.

When defining functions for WASM, wasm-bindgen automatically handles many common Rust types (like i32, f64) and maps them to their JavaScript equivalents (number).

For more complex types like strings or custom structs, special handling is required, which we'll explore in future lessons. For now, stick to primitive number types.

Once compiled, the wasm-pack tool generates a JavaScript file (e.g., my_wasm_lib.js) that acts as an intermediary.

You'll import this JS file into your web project, and it will provide functions like add() and multiply() directly, abstracting away the WASM loading process. This makes using Rust functions feel just like calling regular JavaScript functions.

What is the primary purpose of the #[wasm_bindgen] attribute in Rust when building for WebAssembly?

Great job! You've learned how to define and expose Rust functions for WebAssembly.

• Use #[wasm_bindgen] to mark functions for export.
• Ensure functions are pub.
• wasm-pack build compiles your Rust into WASM and JS glue.
• Primitive types like i32 map easily to JavaScript numbers.

Next, we'll dive deeper into how JavaScript loads and executes these WASM modules.