Reactive declarations (let) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a reactive declaration in Svelte using let?

A reactive declaration in Svelte is a way to automatically update a variable when its dependencies change. It uses the $: label before a statement to make it reactive.

beginner

How do you write a reactive declaration that updates total when price or quantity changes?

You write:
$: total = price * quantity;
This means whenever price or quantity changes, total updates automatically.

intermediate

Can reactive declarations in Svelte run statements other than assignments?

Yes. Reactive declarations can run any statement, like function calls or console logs, as long as they start with $:. For example, $: console.log(count); runs whenever count changes.

beginner

What happens if you use a reactive declaration with a variable that does not change?

The reactive declaration runs once when the component initializes. If the variable never changes, it won't run again.

beginner

Why are reactive declarations useful in Svelte?

They let you write simple code that automatically updates values or runs code when data changes, without manually writing event handlers or watchers.

What symbol starts a reactive declaration in Svelte?

A $:

B #

C @

D !

Reactive declarations in Svelte always start with the $: label.

Which of these will update automatically when count changes?
1) $: double = count * 2;
2) let double = count * 2;

A Neither 1 nor 2

B Only 1

C Both 1 and 2

D Only 2

Only the reactive declaration with $: updates automatically when count changes.

Can you use reactive declarations to run a function when a variable changes?

A Only if the function returns a value

B No, reactive declarations only work with variable assignments

C Yes, by placing the function call after <code>$:</code>

D Only inside <code>onMount</code>

Reactive declarations can run any statement, including function calls, when dependencies change.

What happens if a reactive declaration depends on multiple variables?

A It updates only when the first variable changes

B It never updates automatically

C It updates only when all variables change simultaneously

D It updates when any of those variables change

Reactive declarations update whenever any of their dependent variables change.

Which is a correct reactive declaration to log count whenever it changes?

A $: console.log(count);

B let $: console.log(count);

C console.log($: count);

D log$: count;

The correct syntax is $: console.log(count); to reactively run code on count changes.

Explain how reactive declarations work in Svelte and give an example.

Think about how Svelte tracks variables and updates values automatically.

Describe a situation where using a reactive declaration is better than manually updating a variable.

Consider how reactive declarations reduce manual work and bugs.

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