Derived values with $: in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component?

Consider this Svelte component using a derived value with $:

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

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

What will be shown in the paragraph after clicking the button 3 times?

Svelte

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

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

A Doubled: 8

B Doubled: 6

C Doubled: 12

D Doubled: 10

💡 Hint

Remember the initial count and how many times it increments.

The initial count is 2. Clicking 3 times increments count to 5. The derived value doubled is 5 * 2 = 10 (option D).

❓ state_output

intermediate

What is the value of 'fullName' after updating 'lastName'?

Given this Svelte code:

  <script>
    let firstName = 'Jane';
    let lastName = 'Doe';
    $: fullName = `${firstName} ${lastName}`;
  </script>

  <button on:click={() => lastName = 'Smith'}>Change Last Name</button>
  <p>Full Name: {fullName}</p>

What will be displayed after clicking the button once?

Svelte

  <script>
    let firstName = 'Jane';
    let lastName = 'Doe';
    $: fullName = `${firstName} ${lastName}`;
  </script>

  <button on:click={() => lastName = 'Smith'}>Change Last Name</button>
  <p>Full Name: {fullName}</p>

A Full Name: Jane Doe

B Full Name: undefined Smith

C Full Name: Jane Smith

D Full Name: Smith Jane

💡 Hint

Derived values update automatically when dependencies change.

When lastName changes to 'Smith', the derived fullName updates to 'Jane Smith'.

📝 Syntax

advanced

Which option correctly declares a derived value with $: in Svelte?

Which of these code snippets correctly uses the $: syntax to create a derived value?

A let $: total = price + tax;

B $: total = price + tax;

C $ total = price + tax;

D total $: = price + tax;

💡 Hint

The $: label is used before the statement without let.

Option B correctly uses $: to declare a reactive statement. Options B, C, and D have invalid syntax.

🔧 Debug

advanced

Why does this derived value not update as expected?

Look at this Svelte code:

  <script>
    let a = 1;
    let b = 2;
    $: sum = a + b;

    function updateA() {
      a = a + 1;
    }
  </script>

  <button on:click={updateA}>Update A</button>
  <p>Sum: {sum}</p>

After clicking the button, the sum does not update. What is the likely cause?

Svelte

  <script>
    let a = 1;
    let b = 2;
    $: sum = a + b;

    function updateA() {
      a = a + 1;
    }
  </script>

  <button on:click={updateA}>Update A</button>
  <p>Sum: {sum}</p>

A There is no issue; the sum updates correctly when 'a' changes.

B The function 'updateA' is not called correctly in the button's on:click.

C The derived value 'sum' is not reactive because 'b' never changes.

D The variable 'a' is not reactive because it is not declared with 'let'.

💡 Hint

Check how Svelte tracks reactive variables and updates.

Variables declared with 'let' are reactive. Changing 'a' triggers the derived value 'sum' to update. The sum updates correctly.

🧠 Conceptual

expert

How does Svelte's $: reactive statement differ from React's useMemo?

Which statement best describes the difference between Svelte's $: reactive statements and React's useMemo hook?

A <code>$:</code> automatically tracks dependencies without explicit listing, while <code>useMemo</code> requires dependency arrays.

B <code>$:</code> runs only once on mount, <code>useMemo</code> runs on every render.

C <code>$:</code> is used only for side effects, <code>useMemo</code> caches values.

D <code>$:</code> requires manual dependency tracking, <code>useMemo</code> tracks dependencies automatically.

💡 Hint

Think about how dependencies are declared and tracked in both.

Svelte's $: reactive statements automatically track all variables used inside them. React's useMemo requires you to list dependencies explicitly in an array.

Practice

1. What does the $: label do in Svelte?

easy

A. It defines a function that runs only once when the component loads.

B. It declares a variable that cannot be changed.

C. It imports external libraries into the component.

D. It creates a reactive statement that updates automatically when dependencies change.

Solution

1. Step 1: Understand the role of $: in Svelte

   The $: label marks a reactive statement that runs whenever its dependencies change.

2. Step 2: Compare with other options

   Options B, C, and D describe unrelated features: constants, imports, and lifecycle functions, not reactive statements.

3. Final Answer:

   It creates a reactive statement that updates automatically when dependencies change. -> Option D

4. Quick Check:

   Reactive statements = It creates a reactive statement that updates automatically when dependencies change. [OK]

Hint: Remember: $: means auto-update when data changes [OK]

Common Mistakes:

• Thinking $: declares constants
• Confusing $: with imports or functions
• Believing it runs only once

2. Which of the following is the correct syntax to create a reactive derived value double from count in Svelte?

easy

A. let $double = count * 2;

B. $: double = count * 2;

C. const double = $: count * 2;

D. double = $count * 2;

Solution

1. Step 1: Identify correct reactive syntax

   In Svelte, reactive statements start with $: followed by an assignment. So $: double = count * 2; is correct.

2. Step 2: Check other options for syntax errors

   let $double = count * 2; wrongly uses let $double, which is invalid. const double = $: count * 2; misplaces $:. double = $count * 2; uses $count which is incorrect syntax.

3. Final Answer:

   $: double = count * 2; -> Option B

4. Quick Check:

   Reactive assignment = $: double = count * 2; [OK]

Hint: Reactive statements start with $: followed by assignment [OK]

Common Mistakes:

• Using $ inside variable names
• Placing $: after the variable
• Confusing reactive syntax with normal variable declarations

3. Given the code:

let count = 3;
$: double = count * 2;
count = 5;

What is the value of double after count changes?

medium

A. 10

B. 3

C. 6

D. Undefined

Solution

1. Step 1: Understand reactive update

   Initially, count is 3, so double is 6. When count changes to 5, the reactive statement recalculates double as 5 * 2 = 10.

2. Step 2: Confirm final value of double

   After the update, double is 10, reflecting the latest count.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   double = count * 2 = 10 [OK]

Hint: Reactive values update immediately when dependencies change [OK]

Common Mistakes:

• Assuming double stays at initial value
• Thinking reactive statements run only once
• Confusing variable assignment timing

4. Identify the error in this Svelte code snippet:

let a = 2;
$: b = a + 3
$: c = b * 2;

medium

A. Missing semicolon after b = a + 3 causes syntax error.

B. Reactive statements cannot depend on other reactive variables.

C. No error; code works correctly.

D. Variables a, b, and c must be declared with const.

Solution

1. Step 1: Check syntax and reactive dependencies

   In Svelte, semicolons are optional. Reactive statements can depend on other reactive variables like b.

2. Step 2: Verify variable declarations

   Variables can be declared with let and updated reactively. No need for const here.

3. Final Answer:

   No error; code works correctly. -> Option C

4. Quick Check:

   Reactive chaining allowed = No error; code works correctly. [OK]

Hint: Svelte allows reactive statements to depend on other reactive values [OK]

Common Mistakes:

• Expecting mandatory semicolons
• Believing reactive variables can't chain
• Forcing const declarations unnecessarily

5. You want to create a reactive derived value status that shows "High" if score is above 80, "Medium" if between 50 and 80, and "Low" otherwise. Which Svelte code correctly implements this?

hard

A. $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low';

B. if (score > 80) { status = 'High'; } else if (score >= 50) { status = 'Medium'; } else { status = 'Low'; }

C. let status = $: score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low';

D. $: status = (score > 80 && 'High') || (score > 80 && 'Medium') || 'Low';

Solution

1. Step 1: Check reactive statement syntax

   $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; uses a single reactive assignment with nested ternary operators, which is valid and concise.

2. Step 2: Evaluate other options

   let status = $: score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; incorrectly combines let and $:. if (score > 80) { status = 'High'; } else if (score >= 50) { status = 'Medium'; } else { status = 'Low'; } uses an if-else block but lacks $: label for reactivity. $: status = (score > 80 && 'High') || (score > 80 && 'Medium') || 'Low'; uses logical operators with duplicate conditions that never produce 'Medium'.

3. Final Answer:

   $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; -> Option A

4. Quick Check:

   Correct reactive ternary = $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; [OK]

Hint: Use nested ternary inside $: for concise reactive logic [OK]

Common Mistakes:

• Omitting $: for reactive statements
• Mixing let with $: incorrectly
• Using if-else without reactive label