To understand Wat, let's start with the first sentence of the description taken directly from the WebAssembly Core Specification:
So what are symbolic expressions (S-expressions)? S-expressions are notations for nested list (tree-structured) data. Essentially, they provide a simple and elegant way to represent list-based data in textual form. To understand how textual representations of nested lists map to a tree structure, let's extrapolate the tree structure from an HTML page. The following example contains a simple HTML page and the corresponding tree structure diagram.
A simple HTML page:
<html>
<head>
<link rel="icon" href="favicon.ico">
<title>Page Title</title>
</head>
<body>
<div>
<h1>Header</h1>
<p>This is a paragraph.</p>
</div>
<div>Some content</div>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
</body>
</html>
The corresponding tree structure is:
Even if you've never seen a tree structure before, it's still clear to see how the HTML maps to the tree in terms of structure and hierarchy. Mapping HTML elements is relatively simple because it's a markup language with well-defined tags and no actual logic.
Wat represents modules that can have multiple functions with varying parameters. To demonstrate the relationship between source code, Wat, and the corresponding tree structure, let's start with a simple C function that adds 2 to the number that is passed in as a parameter:
Here is a C function that adds 2 to the num argument passed in and returns the result:
int addTwo(int num) {
return num + 2;
}
Converting the addTwo function to valid Wat produces this result:
(module
(table 0 anyfunc)
(memory $0 1)
(export "memory" (memory $0))
(export "addTwo" (func $addTwo))
(func $addTwo (; 0 ;) (param $0 i32) (result i32)
(i32.add
(get_local $0)
(i32.const 2)
)
)
)
In Chapter 1, What is WebAssembly?, we talked about language concepts associated with the Core Specification (Functions, Linear Memory, Tables, and so on). Within that specification, the Structure section defines each of these concepts in the context of an abstract syntax. The Text Format section of the specification corresponds with these concepts as well, and you can see them defined by their keywords in the preceding snippet (func, memory, table).
Tree Structure:
The entire tree would be too large to fit on a page, so this diagram is limited to the first five lines of the Wat source text. Each filled-in dot represents a list node (or the contents of a set of parentheses). As you can see, code written in s-expressions can be clearly and concisely expressed in a tree structure, which is why s-expressions were chosen for WebAssembly's text format.