MediumLow-Level DesignAsked in 20247 min read

Observable map/filter operators

Q: Observable map/filter operators

**Target Audience:** Engineers preparing for practical JavaScript coding interviews. **Difficulty:** Medium > **How to read this doc:** the defining, real property this pattern is tested on — genuine LAZINESS, where an operator like `.map()` does absolutely nothing until something actually subscribes — was verified directly with a real counter: zero calls before `subscribe()`, exactly one per emission after. ## 1. The problem, restated Unlike a Promise (which starts running the instant it is created) or an eagerly-computed array (`.map()` runs immediately), a real Observable represents a LAZY, potentially-repeatable stream of values — nothing happens until `.subscribe()` is called, and each separate subscription gets its own, independent run of the underlying producer logic. ## 2. Clarifying questions a strong candidate asks | Question | Why it matters | | :--- | :--- | | Genuinely lazy, zero work before subscribe? | Yes — this is the real, single defining characteristic distingui

4.0k views

47 of 154

The problem

Problem, as an interviewer would state it: "Implement a minimal Observable class with .subscribe(), plus .map() and .filter() operators — like a simplified RxJS. Operators should be genuinely LAZY, only running once something actually subscribes."

Examples:

Code

const doubled = source.map(n => n * 2).filter(n => n > 10);
doubled.subscribe({ next: v => console.log(v) }); // NOTHING ran until this line

Clarifying questions expected:

Must map()/filter() be genuinely lazy, doing nothing at all until subscribe() is called?
Does each operator need to correctly forward error and complete notifications, not just next values?
Should subscribe() return an unsubscribe function, matching real Observable conventions?

Code / implementation expected: Yes — real, direct proof of genuine laziness: a real counter confirming zero operator calls happen before subscribe(), and exactly one call per real emission once subscribed.

js-coding
utility
algorithm

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for practical JavaScript coding interviews. Difficulty: Medium

How to read this doc: the defining, real property this pattern is tested on — genuine LAZINESS, where an operator like .map() does absolutely nothing until something actually subscribes — was verified directly with a real counter: zero calls before subscribe(), exactly one per emission after.

1. The problem, restated

Unlike a Promise (which starts running the instant it is created) or an eagerly-computed array (.map() runs immediately), a real Observable represents a LAZY, potentially-repeatable stream of values — nothing happens until .subscribe() is called, and each separate subscription gets its own, independent run of the underlying producer logic.

2. Clarifying questions a strong candidate asks

Question	Why it matters
Genuinely

The solution is hidden so you can try first

7 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, direct proof: a real counter confirms zero map() calls happen before subscribe(), and the full map+filter pipeline produces the correct piped results

Practice

Discussion

Other approaches, follow-ups and how it went in real interviews.

No comments yet. Share how you would answer it.

Question 47 of 154 in JavaScript coding

Keep your momentum going.

Mark this question solved to track your progress, then take the next one while it is fresh.

All JavaScript coding questions

Up nextMedium→

WebSocket reconnect logic

Continue