Derived values with $: in Svelte - Mini Project: Build & Apply

Derived Values with $ in Svelte

📖 Scenario: You are building a simple Svelte app to track the prices of fruits in a basket and calculate the total cost automatically.

🎯 Goal: Create a Svelte component that holds fruit prices, sets a discount rate, calculates the discounted prices using a derived value with $:, and displays the final total cost.

📋 What You'll Learn

Create a dictionary called prices with exact fruit-price pairs

Add a variable called discount with a decimal value for discount rate

Use a derived value with $: named discountedPrices to calculate prices after discount

Use another derived value with $: named total to sum all discounted prices

Display the discounted prices and total cost in the component

💡 Why This Matters

🌍 Real World

Calculating prices with discounts is common in shopping apps and e-commerce websites to show customers updated costs.

💼 Career

Understanding reactive derived values is essential for building dynamic user interfaces in Svelte, a popular modern frontend framework.

1

Set up the fruit prices dictionary

Create a dictionary called prices with these exact entries: apple: 1.2, banana: 0.8, cherry: 2.5.

Svelte

# Create a dictionary called prices with the given fruit prices

Hint

Use let prices = { apple: 1.2, banana: 0.8, cherry: 2.5 }; to create the dictionary.

2

Add a discount rate variable

Add a variable called discount and set it to 0.1 to represent a 10% discount.

Svelte

let prices = { apple: 1.2, banana: 0.8, cherry: 2.5 };

# Add a variable called discount and set it to 0.1

Hint

Use let discount = 0.1; to set the discount rate.

3

Create derived value for discounted prices

Use a derived value with $: named discountedPrices that creates a new dictionary by multiplying each price in prices by (1 - discount).

Svelte

let prices = { apple: 1.2, banana: 0.8, cherry: 2.5 };
let discount = 0.1;

# Use $: discountedPrices to calculate discounted prices

Hint

Use $: discountedPrices = { apple: prices.apple * (1 - discount), ... } to create the derived dictionary.

4

Create derived value for total and display results

Use a derived value with $: named total that sums all values in discountedPrices. Then add HTML to display each discounted price and the total cost inside <main> tags.

Svelte

let prices = { apple: 1.2, banana: 0.8, cherry: 2.5 };
let discount = 0.1;

$: discountedPrices = {
    apple: prices.apple * (1 - discount),
    banana: prices.banana * (1 - discount),
    cherry: prices.cherry * (1 - discount)
};

# Use $: total to sum discountedPrices
# Add  with discounted prices and total displayed

Hint

Use $: total = discountedPrices.apple + discountedPrices.banana + discountedPrices.cherry; and add HTML inside <main> to show prices and total.

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