# Values, state and functions

> Variables, state that survives re-renders, functions, control flow and imports.

## Variables

```masque
let x = 5;
let name = "Masque";
let accent = { r: 240, g: 96, b: 63, a: 255 };
```

`let` binds a value. Maps (`{ key: value }`) and arrays (`[a, b]`) are values like any other, which is how styles and colours are written.

## State

```masque
state count = 0;
```

`state` declares a cell that survives re-renders. Its identity comes from the **call path** of the function that declares it, not from the order of declarations. So calling the same component from three places gives three independent cells, and a `state` inside a conditional is fine.

## Functions

```masque
let greet = fn (name: string): string {
  "Hello, " + name
};

let add = fn (a: int, b: int): int {
  a + b
};
```

The last expression without a trailing semicolon is the return value, as in Rust. A function that returns a widget is a component: there is no separate component syntax.

## Control flow

```masque
if (x > 0) { "positive" } else { "non-positive" };

match selected {
  true => selected_bg,
  false => default_bg,
};

for (i in 0..items.length()) {
  render_item(items[i])
};
```

`if`, `match` and `for` are expressions, so they can sit directly inside a `children` list.

## Imports

```masque
import "./button.masque";
import { Card } from "./components.masque";
```

A relative import resolves against the file that wrote it. The hot-reload watcher follows imports, so editing an imported file reloads the document.

## Debugging

```masque
log expression;   // prints the value to stderr
```