Store contract (subscribe method) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Svelte store subscription output?

Consider this Svelte store and subscription code snippet. What will be logged to the console?

Svelte

import { writable } from 'svelte/store';

const count = writable(0);

const unsubscribe = count.subscribe(value => {
  console.log('Count is', value);
});

count.set(5);
unsubscribe();
count.set(10);

A Count is 5\nCount is 10

B Count is 0\nCount is 5\nCount is 10

C Count is 0\nCount is 5

D Count is 0

💡 Hint

Remember what happens when you call the unsubscribe function.

The subscription callback runs immediately with the initial value (0), then again when set(5) is called. After unsubscribe(), the callback no longer runs, so set(10) does not trigger a log.

📝 Syntax

intermediate

Which option correctly implements a custom store with subscribe method?

Which of the following custom store implementations correctly follows the Svelte store contract by providing a subscribe method?

A function createStore() { let value = 0; return { subscribe: (run) => { run(value); return () => {}; } }; }

B function createStore() { let value = 0; return { subscribe(run) { run(value); } }; }

C function createStore() { let value = 0; return { subscribe: (run) => { run(value); } }; }

D function createStore() { let value = 0; return { subscribe: (run) => { run(value); return null; } }; }

💡 Hint

The subscribe method must return an unsubscribe function.

Option A returns a function from subscribe, which is the unsubscribe function. Options B and C do not return anything, and D returns null instead of a function, which breaks the contract.

🔧 Debug

advanced

Why does this Svelte store subscription cause a runtime error?

Examine the code below. Why does it cause a runtime error when subscribing?

Svelte

function brokenStore() {
  let value = 0;
  return {
    subscribe: (run) => {
      run(value);
      return null;
    }
  };
}

const store = brokenStore();
const unsub = store.subscribe(val => console.log(val));
unsub();

A Because subscribe is missing, store.subscribe is undefined.

B Because run is not called inside subscribe, no value is logged.

C Because value is not initialized, run(value) throws a ReferenceError.

D Because subscribe returns null instead of a function, calling unsub() causes a TypeError.

💡 Hint

Check what the unsubscribe variable holds after subscribing.

The subscribe method must return a function to unsubscribe. Returning null means unsub is null, so calling unsub() throws a TypeError.

❓ state_output

advanced

What is the final logged output after multiple subscriptions and updates?

Given this Svelte writable store and subscriptions, what is the console output?

Svelte

import { writable } from 'svelte/store';

const num = writable(1);

const unsub1 = num.subscribe(v => console.log('Sub1:', v));
num.set(2);
const unsub2 = num.subscribe(v => console.log('Sub2:', v));
num.set(3);
unsub1();
num.set(4);
unsub2();
num.set(5);

A Sub1: 1\nSub1: 2\nSub2: 2\nSub1: 3\nSub2: 3\nSub2: 4

B Sub1: 1\nSub1: 2\nSub2: 2\nSub1: 3\nSub2: 3\nSub1: 4

C Sub1: 1\nSub1: 2\nSub2: 2\nSub1: 3\nSub2: 3\nSub1: 4\nSub2: 4

D Sub1: 1\nSub1: 2\nSub2: 2\nSub1: 3\nSub2: 3\nSub1: 4\nSub2: 4\nSub2: 5

💡 Hint

Remember which subscriptions are active after each unsubscribe call.

Initially, Sub1 logs 1. After set(2), Sub1 logs 2. Sub2 subscribes and immediately logs 2. After set(3), both Sub1 and Sub2 log 3. unsub1() removes Sub1, so set(4) only triggers Sub2. unsub2() removes Sub2, so set(5) triggers no logs.

🧠 Conceptual

expert

What is the essential purpose of the subscribe method in Svelte stores?

Choose the best description of the subscribe method's role in Svelte stores.

A It updates the store's value and notifies all subscribers.

B It registers a callback to run whenever the store's value changes and returns a function to stop listening.

C It immediately returns the current store value without registering any callback.

D It creates a new store instance with an initial value.

💡 Hint

Think about how components react to store changes.

The subscribe method lets code listen for changes by registering a callback. It also returns an unsubscribe function to stop listening. It does not update values or create stores.