Immutable patterns for updates in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new array with an added item immutably.

Svelte

let items = [1, 2, 3];
let newItems = items[1]4);

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

A.concat(

B.push(

C.append(

D.add(

Attempts:

3 left

💡 Hint

Common Mistakes

Using .push() modifies the original array, which is not immutable.

Using .append() or .add() are not valid array methods in JavaScript.

Using .concat() returns a new array with the added item, keeping the original array unchanged.

2fill in blank

medium

Complete the code to update an object property immutably using spread syntax.

Svelte

let user = { name: 'Alice', age: 25 };
let updatedUser = { ...user, age: [1] };

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

A26

B27

Cuser.age - 1

Duser.age + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed number like 26 or 27 does not reflect updating based on current age.

Subtracting 1 decreases the age, which is not the intended update.

Using user.age + 1 updates the age property by increasing it by one, creating a new object without changing the original.

3fill in blank

hard

Fix the error in the code to update an array item immutably.

Svelte

let numbers = [10, 20, 30];
let newNumbers = numbers.map((num, index) => index === 1 ? [1] : num);

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

Anum + 5

Bnumbers[1] + 5

C25

Dnum * 2

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed number like 25 ignores the current value.

Using numbers[1] inside map is less clear and can cause confusion.

Multiplying by 2 changes the value differently than adding 5.

Using num + 5 updates the item at index 1 by adding 5 to its current value, keeping the update immutable.

4fill in blank

hard

Fill both blanks to immutably update a nested object property.

Svelte

let state = { user: { name: 'Bob', age: 30 } };
let newState = { ...state, user: { ...state.user, [1]: [2] } };

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

Aage

B31

Cname

D'Robert'

Attempts:

3 left

💡 Hint

Common Mistakes

Updating the wrong property like 'name' when the goal is to update 'age'.

Using quotes around numbers or missing quotes around strings incorrectly.

We update the age property to 31 immutably by spreading the existing user object and changing only the age.

5fill in blank

hard

Fill all three blanks to immutably filter and map an array in Svelte.

Svelte

let todos = [
  { id: 1, done: false },
  { id: 2, done: true },
  { id: 3, done: false }
];

let activeTodoIds = todos
  .filter(todo => todo.[1] === [2])
  .map(todo => todo.[3]);

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

Adone

Bfalse

Cid

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Filtering by 'done === true' would get completed todos, not active ones.

Mapping to 'done' instead of 'id' would return booleans, not ids.

Using wrong property names causes runtime errors.

This code filters todos that are not done (done === false) and then maps to get their id values, all done immutably.

Practice

1. In Svelte, why do we prefer immutable updates when changing state like arrays or objects?

easy

A. Because Svelte does not support mutable updates at all.

B. Because mutable updates are faster and recommended for performance.

C. Because immutable updates prevent any changes to the data forever.

D. Because creating new arrays or objects helps Svelte detect changes and update the UI.

Solution

1. Step 1: Understand Svelte's reactivity system

   Svelte tracks changes by comparing references of variables. If the reference changes, it knows to update the UI.

2. Step 2: Why immutable updates help

   Creating new arrays or objects changes the reference, so Svelte detects the change and updates the screen correctly.

3. Final Answer:

   Because creating new arrays or objects helps Svelte detect changes and update the UI. -> Option D

4. Quick Check:

   Immutable updates = UI updates detected [OK]

Hint: Immutable means new object/array to trigger UI update [OK]

Common Mistakes:

• Thinking mutable updates automatically update UI
• Believing Svelte forbids mutable updates
• Confusing immutability with data never changing

2. Which of the following is the correct way to immutably update an array in Svelte by adding a new item 4 to numbers?

easy

A. numbers.push(4);

B. numbers = [...numbers, 4];

C. numbers[3] = 4;

D. numbers.concat(4);

Solution

1. Step 1: Check each option for immutability

   numbers.push(4); uses push which mutates the original array. numbers[3] = 4; directly assigns an index, mutating the array. numbers.concat(4); calls concat but does not assign the result back, so no update happens.

2. Step 2: Identify the correct immutable update

   numbers = [...numbers, 4]; uses the spread operator to create a new array with the old items plus 4, then assigns it back to numbers, which is the correct immutable pattern.

3. Final Answer:

   numbers = [...numbers, 4]; -> Option B

4. Quick Check:

   Spread operator creates new array [OK]

Hint: Use spread operator and assign new array for immutable update [OK]

Common Mistakes:

• Using push which mutates original array
• Not assigning result of concat back
• Directly modifying array indexes

3. Given this Svelte code:

let todos = [
  { id: 1, text: 'Buy milk', done: false },
  { id: 2, text: 'Walk dog', done: false }
];

// Update to mark todo with id 2 as done
todos = todos.map(todo => todo.id === 2 ? { ...todo, done: true } : todo);

What will be the value of todos after this update?

medium

A. [{ id: 1, text: 'Buy milk', done: false }, { id: 2, text: 'Walk dog', done: true }]

B. [{ id: 1, text: 'Buy milk', done: true }, { id: 2, text: 'Walk dog', done: false }]

C. [{ id: 1, text: 'Buy milk', done: false }, { id: 2, text: 'Walk dog', done: false }]

D. [{ id: 1, text: 'Buy milk', done: true }, { id: 2, text: 'Walk dog', done: true }]

Solution

1. Step 1: Understand the map update logic

   The map goes through each todo. If the todo's id is 2, it creates a new object with done set to true. Otherwise, it returns the original todo unchanged.

2. Step 2: Apply the update to each todo

   Todo with id 1 remains unchanged with done: false. Todo with id 2 is updated to done: true.

3. Final Answer:

   [{ id: 1, text: 'Buy milk', done: false }, { id: 2, text: 'Walk dog', done: true }] -> Option A

4. Quick Check:

   Only todo with id 2 is marked done [OK]

Hint: map + spread updates only matching item immutably [OK]

Common Mistakes:

• Updating wrong todo item
• Mutating original todo instead of creating new
• Not returning updated todo in map

4. What is wrong with this Svelte code that tries to immutably update an object state?

let user = { name: 'Alice', age: 25 };

// Update age
user.age = 26;
user = user;

medium

A. Svelte requires a special function to update objects immutably.

B. Assigning user = user creates a new object reference, so update works fine.

C. Directly modifying user.age mutates the original object, so Svelte may not detect the change.

D. The code correctly uses immutable update patterns.

Solution

1. Step 1: Identify mutation in the code

   The line user.age = 26 directly changes the existing object, which is a mutation.

2. Step 2: Understand Svelte's change detection

   Assigning user = user does not change the reference, so Svelte does not detect any change and will not update the UI.

3. Final Answer:

   Directly modifying user.age mutates the original object, so Svelte may not detect the change. -> Option C

4. Quick Check:

   Mutating object without new reference breaks reactivity [OK]

Hint: Always create new object to update state immutably [OK]

Common Mistakes:

• Mutating object properties directly
• Assigning same object reference back
• Expecting UI to update without new object

5. You have a nested state object in Svelte:

let profile = {
  name: 'Bob',
  address: { city: 'NY', zip: '10001' }
};

// You want to update zip to '10002' immutably. Which is correct?

hard

A. profile = { ...profile, address: { ...profile.address, zip: '10002' } };

B. profile.address.zip = '10002'; profile = profile;

C. profile = { ...profile, zip: '10002' };

D. profile.address = { zip: '10002' }; profile = profile;

Solution

1. Step 1: Understand nested immutable update

   To update a nested property immutably, create new copies of each level: first the nested object, then the outer object.

2. Step 2: Analyze each option

   profile.address.zip = '10002'; profile = profile; mutates nested property directly, no new reference. profile = { ...profile, zip: '10002' }; updates zip at top level, ignoring nesting. profile.address = { zip: '10002' }; profile = profile; replaces address with incomplete object, losing city. profile = { ...profile, address: { ...profile.address, zip: '10002' } }; correctly creates new address object with updated zip, then new profile object.

3. Final Answer:

   profile = { ...profile, address: { ...profile.address, zip: '10002' } }; -> Option A

4. Quick Check:

   Nested spread creates new objects immutably [OK]

Hint: Spread nested objects to update deeply immutably [OK]

Common Mistakes:

• Mutating nested properties directly
• Not copying nested objects fully
• Losing other nested properties by overwriting