How would you use the BroadcastChannel API to sync application state across multiple open browser tabs?

**Target Audience:** Engineers preparing for JavaScript fundamentals interviews. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Every claim below — including the self-exclusion behavior — was verified live in a real, current browser via the Claude Browser pane. `BroadcastChannel` is confirmed genuinely NOT implemented in jsdom. ## 1. Why This Even Matters — A Story First A group text message thread where everyone who has joined the thread genuinely sees every message someone else sends — but your own phone never re-displays your own message back to you as if it were new, since you already know you sent it. `BroadcastChannel` behaves exactly like that group thread: every OTHER tab tuned to the same channel name genuinely hears a posted message, but the sender's own tab never receives an echo of its own broadcast. ## 2. The Core Idea 📌 **Interview term:** `new BroadcastChannel(name

Tricky JavaScript Scenario #90: BroadcastChannel multi-tab updates

01

Understand the problem

Question presented to candidate: "A user logs out in one browser tab. You need every OTHER open tab of your app to also immediately reflect the logged-out state. How would you notify them, without polling localStorage or a server round-trip?"

What a strong answer should cover:

📌 Interview term: BroadcastChannel — a real, built-in browser API letting any number of same-origin browsing contexts (tabs, windows, iframes, even workers) construct a channel with the SAME name string and genuinely send/receive messages between each other directly, entirely client-side.
📌 Interview term: the real, direct answer to the prompt — verified directly: a message posted on one BroadcastChannel instance is genuinely delivered to every OTHER instance constructed with the same channel name (new BroadcastChannel("app-state")) — the real mechanism to notify sibling tabs of a logout without polling localStorage or hitting a server.
📌 Interview term: the real, sharp, self-exclusion fact — verified directly: a channel genuinely does NOT receive its own posted message — a message handler registered on the SAME instance that called .postMessage() never fires for that message, confirmed directly by an empty self-receive log even while a SEPARATE instance on the identical channel name correctly received it.
📌 Interview term: .close() — verified directly: calling .close() on a channel and then attempting .postMessage() on it genuinely throws a real DOMException — a channel cannot be reused after closing.
A precise answer names the real, practical contrast with polling localStorage for the "storage" event: that older pattern genuinely works too (and fires cross-tab, also correctly excluding the tab that made the write) but requires structuring the "message" as a stored key-value pair; BroadcastChannel is the more direct, purpose-built, message-passing-shaped tool for this exact use case.

Clarifying questions expected:

None — this is a definitional/practical question; directly demonstrating the real, verified cross-instance delivery and self-exclusion behavior is the strong signal.

Code / implementation expected: Yes — real, separate BroadcastChannel instances on the same channel name, verified with cross-instance delivery, the self-exclusion behavior, and the closed-channel error.

messagingtrickyreal-world

02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Target Audience: Engineers preparing for JavaScript fundamentals interviews. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every claim below — including the self-exclusion behavior — was verified live in a real,

Solution ready — 2 min read

Classified // press E to declassify

04

Run the code

JSReal, direct proof: BroadcastChannel genuinely delivers messages between separate instances on the same channel name, but a channel never receives its own posted message — verified directly

Practice

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.