Reactive statements ($:) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component?

Consider this Svelte code snippet:

  <script>
    let count = 1;
    $: doubled = count * 2;
  </script>

  <button on:click={() => count++}>Increment</button>
  <p>Doubled value: {doubled}</p>

What will be displayed after clicking the button twice?

Svelte

<script>
  let count = 1;
  $: doubled = count * 2;
</script>

<button on:click={() => count++}>Increment</button>
<p>Doubled value: {doubled}</p>

A Doubled value: 2

B Doubled value: 4

C Doubled value: 3

D Doubled value: 6

💡 Hint

Remember the reactive statement updates whenever count changes.

The variable doubled reacts to changes in count. Starting at 1, after two increments, count becomes 3, so doubled is 3 * 2 = 6. Thus, 'Doubled value: 6' is displayed.

❓ state_output

intermediate

What is the value of 'total' after this code runs?

Given this Svelte script:

<script>
  let a = 2;
  let b = 3;
  $: total = a + b;
  a = 5;
</script>

What is the value of total after these statements?

Svelte

<script>
  let a = 2;
  let b = 3;
  $: total = a + b;
  a = 5;
</script>

A 2

B 3

C 8

D 5

💡 Hint

Reactive statements run whenever their dependencies change.

Initially, total is 2 + 3 = 5. Then a changes to 5, so total updates to 5 + 3 = 8.

📝 Syntax

advanced

Which option causes a syntax error in Svelte reactive statements?

Identify the option that will cause a syntax error when used as a reactive statement in Svelte:

A $: doubled = count * 2 else doubled = 0;

B $: if (count > 5) doubled = count * 2;

C $: { doubled = count * 2 }

D $: doubled = count * 2;

💡 Hint

Check the syntax of conditional expressions inside reactive statements.

Option A uses an invalid syntax with 'else' outside a proper conditional block or ternary expression, causing a syntax error.

🔧 Debug

advanced

Why does this reactive statement not update as expected?

Consider this Svelte code:

<script>
  let items = [];
  $: count = items.length;
  function addItem() {
    items.push('new');
  }
</script>

<button on:click={addItem}>Add</button>
<p>Count: {count}</p>

Clicking 'Add' does not update the count. Why?

Svelte

<script>
  let items = [];
  $: count = items.length;
  function addItem() {
    items.push('new');
  }
</script>

<button on:click={addItem}>Add</button>
<p>Count: {count}</p>

A Because count is not declared with let.

B Because modifying array with push does not trigger reactivity in Svelte.

C Because the reactive statement is missing a dependency array.

D Because the addItem function is not called on button click.

💡 Hint

Think about how Svelte tracks changes to arrays.

Svelte reactivity tracks assignments, not mutations. Using push mutates the array but does not assign a new value, so reactive statements depending on items do not run.

🧠 Conceptual

expert

How does Svelte's reactive statement handle multiple dependencies?

Given this reactive statement:

$: result = a + b * c;

Which statement best describes when result updates?

A <code>result</code> updates whenever any of <code>a</code>, <code>b</code>, or <code>c</code> changes.

B <code>result</code> updates only when <code>b</code> or <code>c</code> changes.

C <code>result</code> updates only when <code>a</code> changes.

D <code>result</code> updates only when all of <code>a</code>, <code>b</code>, and <code>c</code> change simultaneously.

💡 Hint

Consider how reactive statements track dependencies automatically.

Svelte tracks all variables used in the reactive statement. If any of a, b, or c change, result recalculates.