副作用と宣言的

fillRect は、呼ぶと画面が変わる。戻り値はないのに、外側の canvas に変化を残す。これを副作用という。一方 slot(i) は、番号から座標を計算して返すだけで、画面には触らない。入力だけで答えが決まり、外に何も残さない関数を純粋（pure）という。

slot が位置を計算し、fillRect が描く。計算（純粋）と描画（副作用）を分けておくと、どこで何が起きるか追いやすい。

// 純粋: 入力だけで決まる。外に何も残さない
const slot = (i) => 50 + i * 150

// 副作用: 戻り値はないが、canvas に変化を残す
c.fillRect(slot(2), 200, 110, 110)

宣言的

手順を一つずつ書くのが命令的。別のやり方として、画面に何があるかをデータで持ち、描くのは一つのループに任せる。これが宣言的。scene に四角を並べ、ループは色をセットして塗るだけ。scene を足し引きすると絵は変わるが、手順は変えない。

データは計算でも作れる。Array.from で6個ぶんの { x, y, ... } を生成する。i が 0, 1, 2... の番号、使わない第一引数は _ で受け流す。i % 2 の余りで色を交互にする。描くループは同じまま。