Reactive declarations (let) in Svelte - Mini Project: Build & Apply

Simple Counter with Reactive Declarations in Svelte

📖 Scenario: You are building a simple counter app in Svelte. The app shows a number that can be increased by clicking a button. You want to display the double of the current count reactively, so it updates automatically when the count changes.

🎯 Goal: Create a Svelte component that has a count variable, a reactive declaration for double the count, and a button to increase the count. The double value should update automatically when the count changes.

📋 What You'll Learn

Create a let variable called count initialized to 0.

Add a reactive declaration $: double = count * 2 to calculate double the count.

Add a button that increases count by 1 when clicked.

Display both count and double values in the component.

💡 Why This Matters

🌍 Real World

Reactive declarations help build interactive user interfaces that update automatically when data changes, like counters, live search, or dynamic forms.

💼 Career

Understanding reactive declarations is essential for Svelte developers to write clean, efficient, and responsive UI code.

1

Set up the count variable

Create a let variable called count and set it to 0.

Svelte

// Your code here

Hint

Use let count = 0; to create a variable that can change.

2

Add a reactive declaration for double

Add a reactive declaration $: double = count * 2 below the count variable.

Svelte

let count = 0;
// Your code here

Hint

Use $: double = count * 2; to make double update automatically when count changes.

3

Add a button to increase count

Add a <button> element with an on:click event that increases count by 1 using count += 1.

Svelte

let count = 0;
$: double = count * 2;

Hint

Use <button on:click={() => count += 1}>Increase Count</button> to add the button.

4

Display count and double values

Add two <p> elements to display the current count and the reactive double values using curly braces {count} and {double}.

Svelte

let count = 0;
$: double = count * 2;

 count += 1}>Increase Count

Hint

Use <p>Count: {count}</p> and <p>Double: {double}</p> to show the values.

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