Reactive declarations (let) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component?

Consider this Svelte component code:

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

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

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

Svelte

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

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

A Double: 8

B Double: 6

C Double: 4

D Double: 2

💡 Hint

Remember that $: runs whenever count changes.

Starting from count = 1, clicking 3 times increments it to 4. The reactive declaration double = count * 2 updates to 8.

❓ state_output

intermediate

What is the value of sum after this code runs?

Given this Svelte script:

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

What is the final value of sum?

Svelte

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

A 5

B 8

C 2

D 3

💡 Hint

Reactive declarations update when their dependencies change.

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

📝 Syntax

advanced

Which option correctly declares a reactive statement with let in Svelte?

Choose the valid syntax for a reactive declaration that updates total when x or y change.

A $: total = x + y;

B let $: total = x + y;

C $: let total = x + y;

D let total $: = x + y;

💡 Hint

Reactive declarations use $: before the statement without let.

In Svelte, reactive declarations do not use let inside the reactive statement. The variable must be declared separately.

🔧 Debug

advanced

Why does this reactive declaration not update as expected?

Look at this Svelte code:

  <script>
    let count = 0;
    $: double = count * 2;

    function increment() {
      count += 1;
      double = count * 3;
    }
  </script>

  <button on:click={increment}>Click</button>
  <p>Double: {double}</p>

Why does the paragraph show double as count * 2 instead of count * 3 after clicking?

Svelte

<script>
  let count = 0;
  $: double = count * 2;

  function increment() {
    count += 1;
    double = count * 3;
  }
</script>

<button on:click={increment}>Click</button>
<p>Double: {double}</p>

A The variable double is not declared with let.

B The function increment does not update count correctly.

C Svelte does not allow assignments inside functions.

D The reactive declaration overwrites the manual assignment to double after increment runs.

💡 Hint

Think about how reactive declarations run after any change.

The reactive declaration $: double = count * 2; runs after count changes, overwriting the manual assignment double = count * 3; inside increment.

🧠 Conceptual

expert

What happens if a reactive declaration depends on itself in Svelte?

Consider this code snippet:

  <script>
    let a = 1;
    $: a = a + 1;
  </script>

What will happen when this component runs?

Svelte

<script>
  let a = 1;
  $: a = a + 1;
</script>

A Svelte will throw a compile-time error.

B The value of a will be 2 and stop updating.

C The component will enter an infinite loop and crash.

D The reactive declaration will be ignored.

💡 Hint

Think about what happens when a reactive statement changes the variable it depends on.

The reactive declaration updates a by adding 1, which triggers itself again, causing an infinite loop.

Practice

1. What does the $: symbol do in a Svelte component?

easy

A. It imports external modules into the component.

B. It declares a variable as constant and unchangeable.

C. It comments out the following line of code.

D. It marks a statement as reactive, updating when dependencies change.

Solution

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

   The $: prefix is used to declare reactive statements that automatically update when their dependencies change.

2. Step 2: Compare with other options

   Options A, B, and D describe unrelated concepts: imports, constants, and comments, which are not related to $:.

3. Final Answer:

   It marks a statement as reactive, updating when dependencies change. -> Option D

4. Quick Check:

   Reactive declarations use $: = C [OK]

Hint: Remember: $: means reactive update in Svelte [OK]

Common Mistakes:

• Thinking $: declares constants
• Confusing $: with import syntax
• Assuming $: comments code

2. Which of the following is the correct syntax to create a reactive declaration for variable sum that adds a and b in Svelte?

easy

A. let sum = a + b;

B. sum := a + b;

C. $: sum = a + b;

D. const $sum = a + b;

Solution

1. Step 1: Identify reactive declaration syntax

   In Svelte, reactive declarations use $: before the statement to update automatically when dependencies change.

2. Step 2: Check each option

   let sum = a + b; is a normal variable assignment without reactivity. sum := a + b; uses invalid syntax. const $sum = a + b; incorrectly uses const and a dollar sign in the variable name.

3. Final Answer:

   $: sum = a + b; -> Option C

4. Quick Check:

   Reactive declaration = $: sum = a + b; [OK]

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

Common Mistakes:

• Omitting $: for reactive variables
• Using invalid assignment operators like ':='
• Trying to declare reactive constants with const

3. Given the code below, what will be the value of sum after a changes to 5?

let a = 2;
let b = 3;
$: sum = a + b;

// Later in code
a = 5;

medium

A. 8

B. 5

C. 3

D. NaN

Solution

1. Step 1: Understand reactive declaration behavior

   The reactive declaration $: sum = a + b; recalculates sum whenever a or b changes.

2. Step 2: Calculate new value after a changes

   Initially, a = 2 and b = 3, so sum = 5. When a changes to 5, sum updates to 5 + 3 = 8.

3. Final Answer:

   8 -> Option A

4. Quick Check:

   sum updates reactively = 8 [OK]

Hint: Reactive sums update automatically when inputs change [OK]

Common Mistakes:

• Assuming sum stays old value after a changes
• Confusing sum with just a or b
• Expecting syntax error due to reassignment

4. Identify the error in this Svelte reactive declaration:

let x = 1;
$: y = x * 2
$: z = y + 3

medium

A. The code is correct and will work as expected.

B. Reactive declarations cannot depend on other reactive variables.

C. Variables must be declared with const inside reactive declarations.

D. Missing semicolon after y = x * 2 causes syntax error.

Solution

1. Step 1: Check syntax and reactive dependencies

   The code uses reactive declarations correctly. Semicolons are optional in JavaScript and Svelte allows reactive variables to depend on other reactive variables.

2. Step 2: Validate variable declarations

   Variables declared with let can be used reactively. const is not required inside reactive declarations.

3. Final Answer:

   The code is correct and will work as expected. -> Option A

4. Quick Check:

   Reactive chaining allowed = D [OK]

Hint: Reactive declarations can chain and omit semicolons safely [OK]

Common Mistakes:

• Thinking semicolons are mandatory
• Believing reactive vars can't depend on others
• Forcing const instead of let

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

hard

A. let status = if (score > 80) 'High' else if (score >= 50) 'Medium' else 'Low';

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

C. $: if score > 80 then status = 'High' else status = 'Low';

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

Solution

1. Step 1: Understand conditional expressions in reactive declarations

   Svelte reactive declarations use JavaScript syntax. Nested ternary operators correctly express multiple conditions.

2. Step 2: Evaluate each option's correctness

   $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; uses valid nested ternary syntax. let status = if (score > 80) 'High' else if (score >= 50) 'Medium' else 'Low'; uses invalid syntax (no if inside assignment). $: if score > 80 then status = 'High' else status = 'Low'; uses invalid syntax (no then keyword in JS). $: status = score > 80 && 'High' || score >= 50 && 'Medium' || 'Low'; uses logical operators that may cause incorrect evaluation.

3. Final Answer:

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

4. Quick Check:

   Nested ternary for reactive status = A [OK]

Hint: Use nested ternary operators for multi-condition reactive values [OK]

Common Mistakes:

• Using invalid if-else syntax inside reactive declarations
• Confusing logical operators with ternary conditions
• Omitting $: for reactive updates