Reactive declarations (let) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a reactive variable that updates when count changes.

Svelte

<script>
  let count = 0;
  $: double = count [1] 2;
</script>

Drag options to blanks, or click blank then click option'

A*

B+

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using + instead of * will add 2 instead of doubling.

Forgetting the reactive declaration syntax $:.

The reactive declaration uses $: and the expression count * 2 to update double whenever count changes.

2fill in blank

medium

Complete the code to make message update reactively when name changes.

Svelte

<script>
  let name = 'Alice';
  $: message = `Hello, [1]!`;
</script>

Drag options to blanks, or click blank then click option'

Amessage

Buser

Ccount

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using message inside its own declaration causes errors.

Using unrelated variables like count or user.

The reactive declaration uses the variable name inside the template string to update message whenever name changes.

3fill in blank

hard

Fix the error in the reactive declaration to correctly update total when price or quantity change.

Svelte

<script>
  let price = 5;
  let quantity = 3;
  $: total = price [1] quantity;
</script>

Drag options to blanks, or click blank then click option'

A+

B*

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using + adds price and quantity instead of multiplying.

Using - or / gives incorrect total.

The total cost is calculated by multiplying price and quantity. Using * ensures total updates correctly.

4fill in blank

hard

Fill both blanks to create a reactive declaration that updates status based on score.

Svelte

<script>
  let score = 75;
  $: status = score [1] 60 [2] true ? 'Pass' : 'Fail';
</script>

Drag options to blanks, or click blank then click option'

A>

B<

C==

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using < instead of > reverses the logic.

Using != or == incorrectly in the first blank.

The reactive declaration uses a conditional expression. It checks if score is greater than 60 to set status to 'Pass', otherwise 'Fail'.

5fill in blank

hard

Fill all three blanks to create a reactive declaration that filters items and maps their names to uppercase.

Svelte

<script>
  let items = [
    { name: 'apple', available: true },
    { name: 'banana', available: false },
    { name: 'cherry', available: true }
  ];
  $: availableNames = items
    .filter(item => item.[1])
    .map(item => item.[3].[2]());
</script>

Drag options to blanks, or click blank then click option'

Aavailable

BtoUpperCase

CtoLowerCase

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'available' incorrectly spelled or missing.

Using 'toLowerCase' instead of 'toUpperCase'.

Using 'item' instead of 'name' in map.

The reactive declaration filters items where available is true, then maps their name to uppercase using toUpperCase().

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