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.

Practice

1. In Svelte, what does the rest parameter syntax ...props inside a component's export let statement do?

easy

A. It creates a new event handler for all properties.

B. It limits the component to accept only one property named props.

C. It collects all extra passed properties into an object called props.

D. It automatically binds all properties to the component's state.

Solution

1. Step 1: Understand rest parameters in Svelte

   Rest parameters collect all extra properties passed to a component that are not explicitly declared.

2. Step 2: Analyze the syntax export let ...props

   This syntax gathers all remaining props into an object named props, allowing flexible access.

3. Final Answer:

   It collects all extra passed properties into an object called props. -> Option C

4. Quick Check:

   Rest parameters = collect extra props [OK]

Hint: Rest parameters gather extra inputs into one object [OK]

Common Mistakes:

• Thinking rest parameters limit props instead of collecting them
• Confusing rest parameters with event handlers
• Assuming rest parameters auto-bind to state

2. Which of the following is the correct way to declare a rest parameter to collect extra props in a Svelte component?

easy

A. export let ...restProps;

B. export let restProps = ...;

C. export let ...restProps = {};

D. export let restProps...;

Solution

1. Step 1: Recall correct rest parameter syntax in Svelte

   Rest parameters use the spread operator ... before the variable name in export let.

2. Step 2: Check each option's syntax

   export let ...restProps; correctly uses export let ...restProps;. Options A, C, and D misuse assignment or spread placement.

3. Final Answer:

   export let ...restProps; -> Option A

4. Quick Check:

   Rest parameter syntax = export let ...name; [OK]

Hint: Rest parameters use ... before variable name without assignment [OK]

Common Mistakes:

• Adding assignment (=) with rest parameters
• Placing ... after variable name
• Using invalid syntax like ...restProps = {}

3. Given this Svelte component code:

  <script>
    export let name;
    export let ...restProps;
  </script>

  <h1>Hello {name}!</h1>
  <pre>{JSON.stringify(restProps)}</pre>

And this usage:

<MyComponent name="Anna" age={30} city="NY" />

What will be rendered inside the <pre> tag?

medium

A. {"age":30,"city":"NY"}

B. {"name":"Anna"}

C. {"name":"Anna","age":30,"city":"NY"}

D. SyntaxError

Solution

1. Step 1: Understand restProps collects extra props

   The declared prop name is separate; restProps collects all other props like age and city.

2. Step 2: Check what JSON.stringify(restProps) outputs

   It outputs an object with keys age and city and their values.

3. Final Answer:

   {"age":30,"city":"NY"} -> Option A

4. Quick Check:

   Rest props exclude declared props [OK]

Hint: Rest props exclude declared props, collect the rest [OK]

Common Mistakes:

• Including declared props inside restProps
• Expecting all props in restProps
• Confusing restProps with a syntax error

4. Consider this Svelte component snippet:

<script>
  export let ...props;
  console.log(props);
</script>

When you try to compile this, what error will you get?

medium

A. TypeError: Cannot use rest parameter here

B. No error, props logs correctly

C. ReferenceError: props is not defined

D. SyntaxError: Rest parameter must be last in export list

Solution

1. Step 1: Check rest parameter rules in Svelte

   Rest parameters must be the last in the export list and cannot be declared alone if other exports exist.

2. Step 2: Analyze the code snippet

   The snippet uses only one rest parameter export, which is valid. However, Svelte currently does not support rest parameters alone in export let statements; this causes a syntax error.

3. Final Answer:

   SyntaxError: Rest parameter must be last in export list -> Option D

4. Quick Check:

   Rest parameters have strict placement rules [OK]

Hint: Rest parameters must be last and cannot be alone in export list [OK]

Common Mistakes:

• Thinking rest parameters require other exports first
• Expecting syntax error on valid single rest declaration
• Confusing rules for multiple exports with single case

5. You want to create a Svelte component that accepts any number of extra HTML attributes and applies them to a <button> element. Which code correctly uses rest parameters to achieve this?

hard

A. <script>
export let ...attrs;
</script>

<button {...attrs}>Click me</button>

B. <script>
export let attrs = {};
</script>

<button {...attrs}>Click me</button>

C. <script>
export let ...attrs = {};
</script>

<button {...attrs}>Click me</button>

D. <script>
export let attrs;
</script>

<button {...attrs}>Click me</button>

Solution

1. Step 1: Understand Svelte's handling of extra HTML attributes

   Svelte does not currently support rest parameters in export let to collect arbitrary extra HTML attributes.

2. Step 2: Use a single prop with default empty object

   Declaring export let attrs = {}; and spreading {...attrs} on the button is the correct way to accept and apply extra attributes.

3. Final Answer:

   export let attrs = {}; with <button {...attrs}> -> Option B

4. Quick Check:

   Use a single prop object for extra attributes [OK]

Hint: Use a single prop object and spread it on element [OK]

Common Mistakes:

• Assigning default empty object to rest parameter
• Not using rest parameter syntax for extra props
• Passing undefined attrs without rest parameter