Declaring props with export let in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component display?

Consider this Svelte component code:

  <script>
  export let name = 'Guest';
</script>

<h1>Hello {name}!
</h1>

If you use this component without passing any prop, what will be shown on the page?

Svelte

<script>
export let name = 'Guest';
</script>

<h1>Hello {name}!</h1>

A Hello name!

B Hello !

C Hello undefined!

D Hello Guest!

💡 Hint

Think about the default value assigned to the prop.

The prop name has a default value of 'Guest'. If no value is passed, it uses this default, so the output is 'Hello Guest!'.

📝 Syntax

intermediate

Which option correctly declares a prop named count with default 0?

Choose the correct Svelte syntax to declare a prop count with a default value of 0.

A export let count = 0;

B let export count = 0;

C let count export = 0;

D export count let = 0;

💡 Hint

Remember the order: export then let.

The correct syntax is export let count = 0;. The other options have invalid order or keywords.

❓ state_output

advanced

What is the output after updating a prop inside the component?

Given this Svelte component:

<script>
  export let value = 5;
  value = value + 3;
</script>

<p>Value is {value}</p>

What will be displayed when the component is used with <Component value={10} />?

Svelte

<script>
export let value = 5;
value = value + 3;
</script>

<p>Value is {value}</p>

A Value is 13

B Value is 8

C Value is 5

D Value is 10

💡 Hint

Remember the prop value is overwritten inside the component.

The prop value is passed as 10, then inside the component it is increased by 3, so the final value is 13.

🔧 Debug

advanced

Why does this Svelte component throw an error?

Look at this code snippet:

<script>
  export let count;
  count = count + 1;
</script>

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

When used without passing count, it throws an error. Why?

Svelte

<script>
export let count;
count = count + 1;
</script>

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

A Because the component is missing a return statement

B Because count is undefined and adding 1 to undefined causes an error

C Because count must be declared with const, not let

D Because export let cannot be reassigned inside the component

💡 Hint

Think about what happens when you add a number to undefined.

If count is not passed, it is undefined. Adding 1 to undefined results in NaN in JavaScript, but Svelte treats this as an error in this context.

🧠 Conceptual

expert

What happens if you declare a prop without export in Svelte?

Consider this Svelte component snippet:

<script>
  let title = 'Hello';
</script>

<h1>{title}</h1>

If you try to pass a prop named title from a parent component, what will happen?

Svelte

<script>
let title = 'Hello';
</script>

<h1>{title}</h1>

A The component will receive and display the passed title prop

B Svelte will throw a syntax error for missing export

C The prop will not be received; the component uses its internal title variable

D The component will crash at runtime

💡 Hint

Think about how Svelte knows which variables are props.

Only variables declared with export let become props. Without export, the variable is internal and cannot receive values from outside.