Multi-Step Derivations with $derived.by

Snippet

Multi-Step Derivations with $derived.by

While standard $derived is used for simple expressions, $derived.by accepts a function body. This is essential for expert-level performance when performing complex calculations that require temporary variables or conditional branches while remaining reactive.

snippet.js

javascript

let rawScores = $state([85, 92, 78]);
let stats = $derived.by(() => {
  const sum = rawScores.reduce((a, b) => a + b, 0);
  const average = sum / rawScores.length;
  return {
    average,
    grade: average > 90 ? 'A' : 'B'
  };
});

svelte

Breakdown

$derived.by(() => { ... })

Creates a reactive computation that can contain multiple statements and local variables.

return { average, grade }

The return value becomes the read-only reactive value of the 'stats' variable.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Multi-Step Derivations with $derived.by

Related