Text interpolation with {} in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component display?

Consider this Svelte component code. What text will appear on the page?

Svelte

<script>
  let name = 'Alice';
  let age = 30;
</script>

<p>Hello, {name}! You are {age} years old.</p>

A Hello, Alice! You are 30 years old.

B Hello, {name}! You are {age} years old.

C Hello, Alice! You are {age} years old.

D Hello, {name}! You are 30 years old.

💡 Hint

Remember that Svelte replaces expressions inside curly braces with their values.

Svelte replaces {name} and {age} with their current values, so the output is 'Hello, Alice! You are 30 years old.'

📝 Syntax

intermediate

Which option correctly uses text interpolation in Svelte?

Choose the option that correctly shows the user's score stored in a variable called score.

Svelte

let score = 85;

A <p>Your score is %score%.</p>

B <p>Your score is {score}.</p>

C <p>Your score is {{score}}.</p>

D <p>Your score is ${score}.</p>

💡 Hint

Svelte uses curly braces {} for interpolation, not other symbols.

In Svelte, you use {variable} inside markup to show the variable's value. Other syntaxes are invalid.

❓ state_output

advanced

What is the output after clicking the button twice?

This Svelte component increments a counter when the button is clicked. What text is shown after two clicks?

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>Click me</button>
<p>Clicked {count} times.</p>

A Clicked 0 times.

B Clicked 1 times.

C Clicked 2 times.

D Clicked count times.

💡 Hint

Each click increases count by 1, and the text shows the current count.

After two clicks, count is 2, so the text shows 'Clicked 2 times.'

🔧 Debug

advanced

Why does this Svelte component show {message} literally instead of the message value?

Look at this code snippet. Why does the page show '{message}' instead of 'Hello World'?

Svelte

<script>
  let message = 'Hello World';
</script>

<p>{'{message}'}</p>

A Because the curly braces are inside quotes, so Svelte treats it as plain text.

B Because message variable is not defined.

C Because Svelte requires double curly braces for interpolation.

D Because the script tag is missing the lang attribute.

💡 Hint

Check how the curly braces are used inside the paragraph tag.

The curly braces are inside quotes, so Svelte outputs them as text, not as an expression to evaluate.

🧠 Conceptual

expert

What happens if you use a JavaScript expression inside Svelte interpolation?

Consider this code snippet. What will be displayed?

Svelte

<script>
  let a = 5;
  let b = 3;
</script>

<p>{a > b ? 'a is greater' : 'b is greater or equal'}</p>

A b is greater or equal

B SyntaxError

C {a > b ? 'a is greater' : 'b is greater or equal'}

D a is greater

💡 Hint

Svelte supports JavaScript expressions inside curly braces.

The expression evaluates to true since 5 > 3, so 'a is greater' is displayed.

Practice

1. In Svelte, how do you display the value of a variable name inside your HTML?

easy

A. Use {name} inside the HTML to show the variable's value.

B. Use <name> tags around the variable.

C. Use $name directly in the HTML.

D. Use $(name) inside the HTML.

Solution

1. Step 1: Understand Svelte's text interpolation syntax

   Svelte uses curly braces {} to insert variables or expressions inside HTML. To display the value of name, write {name} inside the HTML.

2. Final Answer:

   Use {name} inside the HTML to show the variable's value. -> Option A

3. Quick Check:

   Text interpolation = {name} [OK]

Hint: Remember: Curly braces {} show variables in Svelte [OK]

Common Mistakes:

• Using $name instead of {name}
• Trying to use HTML tags like <name>
• Using parentheses like $(name)

2. Which of the following is the correct syntax to show the result of 2 + 3 inside a Svelte component?

easy

A. $(2 + 3)

B. {{2 + 3}}

C. {2 + 3}

D. <2 + 3>

Solution

1. Step 1: Recall Svelte's expression interpolation

   Svelte allows expressions inside curly braces {} to be evaluated and shown. Only {2 + 3} correctly uses curly braces for expression evaluation; others are invalid.

2. Final Answer:

   {2 + 3} -> Option C

3. Quick Check:

   Expression in {} = {2 + 3} [OK]

Hint: Use curly braces {} for expressions, not $ or double braces [OK]

Common Mistakes:

• Using $(2 + 3) which is invalid in Svelte
• Using double curly braces {{}} like in other frameworks
• Using angle brackets around expressions

3. What will be displayed when this Svelte code runs?

<script>
  let count = 5;
</script>
<p>Count is: {count * 2}</p>

medium

A. Count is: 10

B. Count is: count * 2

C. Count is: 5

D. Count is: {count * 2}

Solution

1. Step 1: Evaluate the expression in the component

   The variable count is 5, and count * 2 equals 10, so "Count is: 10" is displayed.

2. Final Answer:

   Count is: 10 -> Option A

3. Quick Check:

   count * 2 = 10 [OK]

Hint: Calculate expressions inside {} before display [OK]

Common Mistakes:

• Showing the expression text instead of its value
• Not multiplying and showing just the variable
• Leaving braces visible in output

4. Identify the error in this Svelte code snippet:

<script>
  let message = 'Hello';
</script>
<p>{message</p>

medium

A. Use parentheses instead of braces (message)

B. Variable 'message' is not declared

C. Curly braces should be double like {{message}}

D. Missing closing brace '}' after {message}

Solution

1. Step 1: Check the interpolation syntax

   The code opens { but lacks closing } after message. Proper syntax is {message}.

2. Final Answer:

   Missing closing brace '}' after {message} -> Option D

3. Quick Check:

   Interpolation needs matching {} [OK]

Hint: Always close your curly braces {} in interpolation [OK]

Common Mistakes:

• Forgetting the closing brace '}'
• Using double braces {{}} which is invalid in Svelte
• Not declaring the variable before use

5. You want to display a user's full name by combining firstName and lastName inside a Svelte component. Which code correctly shows "Full Name: John Doe" if firstName = 'John' and lastName = 'Doe'?

hard

A. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName, ' ', lastName}</p>

B. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName + ' ' + lastName}</p>

C. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName & lastName}</p>

D. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName.concat(lastName)}</p>

Solution

1. Step 1: Identify correct string concatenation

   Svelte evaluates JS expressions in {}. Use +: {firstName + ' ' + lastName} gives "John Doe". Commas invoke comma operator (returns lastName), & is bitwise, concat(lastName) gives "JohnDoe" (no space).

2. Final Answer:

   Full Name: {firstName + ' ' + lastName} -> Option B

3. Quick Check:

   Use + to join strings inside {} [OK]

Hint: Use + to join strings inside {} for full text [OK]

Common Mistakes:

• Using commas instead of + for concatenation
• Using & which is a bitwise operator
• Forgetting space between names