Rest parameters in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component render?

Consider this Svelte component using rest parameters in props:

<script>
  export let a;
  export let b;
  export let ...rest;
</script>

<div>
  <p>A: {a}</p>
  <p>B: {b}</p>
  <p>Rest keys: {Object.keys(rest).join(", ")}</p>
</div>

If you use this component as <MyComponent a={1} b={2} c={3} d={4} />, what will be rendered inside the <p>Rest keys:</p>?

Svelte

<script>
  export let a;
  export let b;
  export let ...rest;
</script>

<div>
  <p>A: {a}</p>
  <p>B: {b}</p>
  <p>Rest keys: {Object.keys(rest).join(", ")}</p>
</div>

A a, b

B Error: Unexpected token '...'

C undefined

D c, d

💡 Hint

Check if Svelte supports rest parameters in export let declarations.

Svelte does not support rest parameters in export let declarations. Using export let ...rest; causes a syntax error.

📝 Syntax

intermediate

Which is the correct way to collect extra props in a Svelte component?

You want to accept some named props and also collect any other props passed to your Svelte component. Which code snippet correctly achieves this?

A

<script>
  export let a;
  export let b;
  let rest = $$restProps;
</script>

B

<script>
  export let a;
  export let b;
  const rest = arguments.slice(2);
</script>

C

<script>
  export let a, b, ...rest;
</script>

D

<script>
  export let a;
  export let b;
  export let ...rest;
</script>

💡 Hint

Look for the special Svelte variable that holds extra props.

Svelte provides $$restProps to collect all props not explicitly declared. You cannot use rest parameters in export let. Option A correctly assigns $$restProps to a variable.

❓ state_output

advanced

What is the output of this Svelte component with rest props?

Given this Svelte component:

<script>
  export let x;
  let rest = $$restProps;
</script>

<div>
  <p>X: {x}</p>
  <p>Rest count: {Object.keys(rest).length}</p>
</div>

If used as <MyComponent x={10} y={20} z={30} />, what will be rendered inside <p>Rest count:</p>?

Svelte

<script>
  export let x;
  let rest = $$restProps;
</script>

<div>
  <p>X: {x}</p>
  <p>Rest count: {Object.keys(rest).length}</p>
</div>

A 2

B 3

C 0

D 1

💡 Hint

Count how many props are passed but not declared with export let.

The component declares x explicitly. Props y and z are extra and collected in $$restProps. So the rest count is 2.

🔧 Debug

advanced

Why does this Svelte component fail to compile?

Look at this Svelte component code:

<script>
  export let a;
  export let b;
  export let ...others;
</script>

Why does it fail to compile?

Svelte

<script>
  export let a;
  export let b;
  export let ...others;
</script>

A You forgot to import 'others' from another file.

B You must initialize 'others' with an empty object.

C Svelte does not allow rest parameters in export let declarations.

D The variable 'others' is reserved and cannot be used.

💡 Hint

Check Svelte's syntax rules for props.

Svelte's export let syntax does not support rest parameters. You cannot write export let ...others;. This causes a syntax error.

🧠 Conceptual

expert

How does Svelte handle extra props passed to a component?

In Svelte, when you pass props to a component that are not declared with export let, how can you access those extra props inside the component?

A They are automatically merged into a variable named 'rest' inside the component.

B Extra props are ignored and cannot be accessed inside the component.

C You must declare a rest parameter in <code>export let</code> to receive extra props.

D You can access them via the special variable <code>$$restProps</code> inside the component.

💡 Hint

Look for Svelte's special variable for extra props.

Svelte provides $$restProps as a special variable that contains all props passed to the component but not declared explicitly. This is the only way to access extra props.