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.