Optional parameters in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Svelte component with an optional parameter name that defaults to 'Guest'.

Svelte

<script>
  export let name = [1];
</script>

<p>Hello, {name}!</p>

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

A"Guest"

BGuest

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put quotes around the default string value.

Using undefined or null instead of a default string.

The optional parameter name is given a default value of "Guest" using the assignment syntax. This means if no value is passed, it uses "Guest".

2fill in blank

medium

Complete the code to define a Svelte component with an optional number parameter count defaulting to 0.

Svelte

<script>
  export let count = [1];
</script>

<p>Count: {count}</p>

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

Anull

B0

Cundefined

D"0"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the number 0, making it a string.

Leaving the parameter undefined without a default.

The optional parameter count is given a default number value 0. This ensures it is a number, not a string.

3fill in blank

hard

Fix the error in the Svelte component by completing the optional parameter color with a default value of 'blue'.

Svelte

<script>
  export let color [1] 'blue';
</script>

<p style="color: {color}">This text is colored.</p>

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

A:

B=>

C==

D=

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon instead of equals sign.

Using arrow function syntax mistakenly.

In Svelte, to set a default value for a prop, use the equals sign =. The colon or arrow are invalid here.

4fill in blank

hard

Fill both blanks to create a Svelte component with optional parameters title defaulting to 'Welcome' and show defaulting to true.

Svelte

<script>
  export let title = [1];
  export let show = [2];
</script>

{#if show}
  <h1>{title}</h1>
{/if}

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

A"Welcome"

Bfalse

Ctrue

D"Hello"

Attempts:

3 left

💡 Hint

Common Mistakes

Using false instead of true for show, hiding the heading.

Forgetting quotes around the string default.

The title parameter defaults to the string "Welcome" and show defaults to the boolean true. This controls whether the heading shows.

5fill in blank

hard

Fill all three blanks to create a Svelte component with optional parameters user defaulting to 'Guest', age defaulting to 18, and active defaulting to false.

Svelte

<script>
  export let user = [1];
  export let age = [2];
  export let active = [3];
</script>

<p>{user} is {age} years old.</p>
<p>Status: {active ? 'Active' : 'Inactive'}</p>

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

A"Guest"

B18

Cfalse

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using true instead of false for active.

Putting quotes around numbers or booleans.

The user defaults to "Guest" (string), age defaults to 18 (number), and active defaults to false (boolean). This sets clear default states.

Practice

1. In Svelte, how do you make a component prop optional?

easy

A. Use export let propName = defaultValue;

B. Use let propName; without export

C. Use export const propName; without a value

D. Use function propName() {} inside the component

Solution

1. Step 1: Understand Svelte prop declaration

   Props are declared with export let to receive values from outside.

2. Step 2: Assign default value to make prop optional

   Assigning a default value like = defaultValue means the prop is optional and uses that value if none is passed.

3. Final Answer:

   Use export let propName = defaultValue; -> Option A

4. Quick Check:

   Optional prop = export let with default [OK]

Hint: Add = defaultValue after export let to make prop optional [OK]

Common Mistakes:

• Forgetting to export the prop
• Not assigning a default value
• Using const instead of let for props

2. Which of the following is the correct syntax to define an optional parameter in a JavaScript function inside a Svelte component?

easy

A. function greet(name: 'Guest') { console.log(name); }

B. function greet(name) { console.log(name || 'Guest'); }

C. function greet(name?) { console.log(name); }

D. function greet(name = 'Guest') { console.log(name); }

Solution

1. Step 1: Recall JavaScript default parameter syntax

   Default values are assigned using = value in the parameter list.

2. Step 2: Identify correct syntax

   function greet(name = 'Guest') { console.log(name); } uses name = 'Guest', which is valid and makes the parameter optional.

3. Final Answer:

   function greet(name = 'Guest') { console.log(name); } -> Option D

4. Quick Check:

   Default parameter = param = value [OK]

Hint: Use param = defaultValue in function signature for optional params [OK]

Common Mistakes:

• Using TypeScript syntax like name?
• Using colon instead of equals for default
• Using logical OR inside function body instead of default param

3. What will be the output of this Svelte component code?

 <script>
  export let greeting = 'Hello';
  export let name;
</script>

<p>{greeting}, {name || 'Friend'}!</p>

If used as <Component /> with no props passed?

medium

A. Hello, Friend!

B. Hello, undefined!

C. , Friend!

D. undefined, Friend!

Solution

1. Step 1: Check default values of props

   greeting has default 'Hello', name is undefined because no prop passed.

2. Step 2: Evaluate expression in template

   {name || 'Friend'} uses 'Friend' because name is falsy (undefined).

3. Final Answer:

   Hello, Friend! -> Option A

4. Quick Check:

   Default greeting + fallback name = Hello, Friend! [OK]

Hint: Use || to provide fallback for undefined props [OK]

Common Mistakes:

• Expecting undefined to print as string
• Forgetting default value for greeting
• Assuming name defaults to empty string

4. Identify the error in this Svelte component code that tries to make a prop optional:

<script>
  export let count;
  if (count === undefined) {
    count = 10;
  }
</script>

medium

A. The if condition should check for null instead of undefined

B. The default value must be assigned during export, not later

C. You cannot assign to an exported prop inside the script after declaration

D. There is no error; this code works fine

Solution

1. Step 1: Understand Svelte prop reactivity rules

   Exported props are reactive and should not be reassigned directly inside the script after declaration.

2. Step 2: Identify correct way to set default

   Default values must be assigned during export, like export let count = 10;, not by reassigning later.

3. Final Answer:

   You cannot assign to an exported prop inside the script after declaration -> Option C

4. Quick Check:

   Default props assigned during export only [OK]

Hint: Assign default value in export let, not by reassigning later [OK]

Common Mistakes:

• Trying to reassign exported props inside script
• Checking wrong condition for default
• Assuming reassignment updates prop externally

5. You want to create a Svelte component that accepts an optional size prop with default 'medium' and an optional color prop with default 'blue'. Which code correctly implements this and uses both props in the template?

hard

A. <script>
let size = 'medium';
let color = 'blue';
</script>

<div style="font-size: {size}; color: {color};">Styled Text</div>

B. <script>
export let size = 'medium';
export let color = 'blue';
</script>

<div style="font-size: {size}; color: {color};">Styled Text</div>

C. <script>
export const size = 'medium';
export const color = 'blue';
</script>

<div style="font-size: {size}; color: {color};">Styled Text</div>

D. <script>
export let size;
export let color;
size ||= 'medium';
color ||= 'blue';
</script>

<div style="font-size: {size}; color: {color};">Styled Text</div>

Solution

1. Step 1: Check how to declare optional props with defaults

   Props must be declared with export let and assigned default values directly.

2. Step 2: Verify usage in template

   Using {size} and {color} inside style attribute is correct.

3. Final Answer:

   <script> export let size = 'medium'; export let color = 'blue'; </script> <div style="font-size: {size}; color: {color};">Styled Text</div> -> Option B

4. Quick Check:

   export let with default + use in template = correct [OK]

Hint: Use export let with defaults and reference props in template [OK]

Common Mistakes:

• Not exporting props
• Using const instead of let for props
• Trying to assign defaults after declaration