Rest parameters in Svelte - Mini Project: Build & Apply

Using Rest Parameters in Svelte

📖 Scenario: You are building a Svelte component that can accept any number of numeric inputs and calculate their total sum. This is useful when you don't know in advance how many numbers will be passed to the component.

🎯 Goal: Create a Svelte component that uses rest parameters to collect all numeric inputs into an array and then calculates and displays their sum.

📋 What You'll Learn

Create a Svelte component with a function that uses rest parameters

Use the rest parameter to gather all numbers passed to the function

Calculate the sum of all numbers collected by the rest parameter

Display the sum inside the component

💡 Why This Matters

🌍 Real World

Rest parameters help when building flexible components or functions that can handle varying numbers of inputs, such as calculators, filters, or data aggregators.

💼 Career

Understanding rest parameters is essential for writing clean, reusable code in modern JavaScript frameworks like Svelte, which is widely used in web development jobs.

1

Set up the Svelte component with a function using rest parameters

Create a Svelte component and inside the <script> tag, write a function called sumNumbers that uses a rest parameter named numbers to collect all arguments.

Svelte

// Your code here

Hint

Use function sumNumbers(...numbers) to collect all arguments into an array called numbers.

2

Add a variable to hold the sum of numbers

Inside the sumNumbers function, create a variable called total and set it to 0. This will hold the sum of all numbers.

Svelte

function sumNumbers(...numbers) {
  // Add a variable total and set it to 0
  // Your code here
}

Hint

Declare let total = 0; inside the function to start summing from zero.

3

Sum all numbers using a for loop

Use a for loop with the variable num to iterate over numbers inside the sumNumbers function. Add each num to total.

Svelte

function sumNumbers(...numbers) {
  let total = 0;
  // Use a for loop to add each num in numbers to total
  // Your code here
}

Hint

Use for (const num of numbers) and add num to total inside the loop.

4

Return the sum and display it in the component

Make the sumNumbers function return total. Then, inside the <script> tag, call sumNumbers(10, 20, 30) and store the result in a variable called result. Finally, display {result} inside the component's markup.

Svelte

function sumNumbers(...numbers) {
  let total = 0;
  for (const num of numbers) {
    total += num;
  }
  // Return total
  // Your code here
}

// Call sumNumbers with 10, 20, 30 and store in result
// Your code here

Hint

Return total from the function, call it with numbers, and show the result inside a paragraph.