DEV Community

Kashaf Abdullah
Kashaf Abdullah

Posted on

What Data Structure Does Chrome Use for "Reopen Closed Tab"?

#datastructures #stack #programming

Have you ever accidentally closed a browser tab and immediately thought

"Oh no! I needed that tab!" šŸ˜­

Luckily, Chrome gives us Ctrl + Shift + T ā€” or the "Reopen Closed Tab" option ā€” to bring it back.

But have you ever wondered what happens behind the scenes?

This simple browser feature is actually a great example of a fundamental Data Structure: the Stack.

šŸ§  The Interview Question

Imagine you're in a technical interview and the interviewer asks:

"You accidentally closed a browser tab. Chrome restores it instantly using 'Reopen Closed Tab'. Which data structure would you use to design this feature?"

The answer is:

šŸ‘‰ Stack

More specifically, a Stack follows the LIFO principle:

LIFO = Last In, First Out

And that's exactly how recently closed tabs can be modeled.

šŸ“š What Is a Stack?

A stack is a linear data structure where elements are added and removed from the same end.

Think about a stack of plates šŸ½ļø.

If you place plates one on top of another:

        ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”
        ā”‚  Plate 3  ā”‚ ā† Last added
        ā”œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”¤
        ā”‚  Plate 2  ā”‚
        ā”œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”¤
        ā”‚  Plate 1  ā”‚ ā† First added
        ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜
Enter fullscreen mode Exit fullscreen mode


plaintext

Which plate will you remove first?

Plate 3, because it was the last one added.

That's LIFO ā€” Last In, First Out.

šŸŒ Applying the Stack to Browser Tabs

Let's say you have these tabs open:

Google ā†’ YouTube ā†’ GitHub ā†’ Gmail
Enter fullscreen mode Exit fullscreen mode


plaintext

Now you start closing them.

First:

Close Gmail
Enter fullscreen mode Exit fullscreen mode


plaintext

The closed-tab stack becomes:

Top
 ā†“
[Gmail]
Enter fullscreen mode Exit fullscreen mode


plaintext

Then:

Close GitHub
Enter fullscreen mode Exit fullscreen mode


plaintext

Now:

Top
 ā†“
[GitHub]
[Gmail]
Enter fullscreen mode Exit fullscreen mode


plaintext

Then:

Close YouTube
Enter fullscreen mode Exit fullscreen mode


plaintext

The stack becomes:

Top
 ā†“
[YouTube]
[GitHub]
[Gmail]
Enter fullscreen mode Exit fullscreen mode


plaintext

Now you press:

Ctrl + Shift + T

What should Chrome restore?

YouTube.

Why?

Because YouTube was the last tab you closed.

That's exactly what a stack does.

šŸ”„ Push and Pop

A stack mainly uses two operations:

1. Push

push() adds an element to the top of the stack.

When a user closes a tab:

Closed Tab ā†’ push()
Enter fullscreen mode Exit fullscreen mode


plaintext

For example:

push(Gmail)
push(GitHub)
push(YouTube)
Enter fullscreen mode Exit fullscreen mode


plaintext

The stack becomes:

Top
 ā†“
YouTube
GitHub
Gmail
Enter fullscreen mode Exit fullscreen mode


plaintext

2. Pop

pop() removes the top element.

When the user selects Reopen Closed Tab:

pop()
Enter fullscreen mode Exit fullscreen mode


plaintext

The result is:

YouTube
Enter fullscreen mode Exit fullscreen mode


plaintext

The stack then becomes:

Top
 ā†“
GitHub
Gmail
Enter fullscreen mode Exit fullscreen mode


plaintext

If the user presses Ctrl + Shift + T again:

pop() ā†’ GitHub
Enter fullscreen mode Exit fullscreen mode


plaintext

And again:

pop() ā†’ Gmail
Enter fullscreen mode Exit fullscreen mode


javascript

So the tabs are restored in the reverse order in which they were closed.

šŸ’» How Would We Design It?

We can model this behavior using a simple JavaScript class:

class ClosedTabs {
    constructor() {
        this.stack = [];
    }

    closeTab(tab) {
        this.stack.push(tab);
    }

    reopenTab() {
        if (this.stack.length === 0) {
            return null;
        }

        return this.stack.pop();
    }
}
Enter fullscreen mode Exit fullscreen mode

Let's use it:

const closedTabs = new ClosedTabs();

closedTabs.closeTab("Gmail");
closedTabs.closeTab("GitHub");
closedTabs.closeTab("YouTube");

console.log(closedTabs.reopenTab());
// YouTube

console.log(closedTabs.reopenTab());
// GitHub

console.log(closedTabs.reopenTab());
// Gmail
Enter fullscreen mode Exit fullscreen mode

The output is:

YouTube
GitHub
Gmail
Enter fullscreen mode Exit fullscreen mode

Exactly what we would expect from a LIFO structure.

šŸ—‚ļø But We Wouldn't Store Only the Tab Name

In a real browser, restoring a tab involves much more information than its title.

A closed-tab object could conceptually contain:

const tab = {
    url: "https://github.com",
    title: "GitHub",
    scrollPosition: 450,
    history: [
        "https://google.com",
        "https://github.com"
    ],
    timestamp: Date.now()
};
Enter fullscreen mode Exit fullscreen mode

So when the tab is restored, the browser can potentially restore relevant session information as well.

Important: This is a simplified data-structure model. Real browser session restoration is more sophisticated than simply maintaining one JavaScript stack.

ā±ļø Time Complexity

One of the biggest advantages of using a stack is that its basic operations are very efficient.

Operation Complexity
Push O(1)
Pop O(1)
Peek O(1)

So:

Close Tab ā†’ O(1)
Reopen Tab ā†’ O(1)
Enter fullscreen mode Exit fullscreen mode

That's extremely efficient.

šŸ¤” Why Not a Queue?

A common interview follow-up could be:

"Why not use a Queue?"

A queue follows:

FIFO ā€” First In, First Out

Imagine we close:

Gmail
GitHub
YouTube
Enter fullscreen mode Exit fullscreen mode

A queue would return:

Gmail ā†’ GitHub ā†’ YouTube
Enter fullscreen mode Exit fullscreen mode

But for a recently closed tab feature, we generally want:

YouTube ā†’ GitHub ā†’ Gmail
Enter fullscreen mode Exit fullscreen mode

That's LIFO, which makes a stack a natural model.

šŸ§© Stack vs Queue 

STACK
LIFO

Push ā†’ [A] [B] [C] ā† Pop
                    ā†‘
                  First out
Enter fullscreen mode Exit fullscreen mode

Whereas:

QUEUE
FIFO

Enqueue ā†’ [A] [B] [C] ā†’ Dequeue
          ā†‘               ā†‘
       First in        First out
Enter fullscreen mode Exit fullscreen mode

This is why the distinction between LIFO and FIFO is so important in Data Structures interviews.

šŸš€ Real-World Applications of Stacks

The Chrome example isn't the only place where stacks are useful.

Stacks are commonly used in:

  • ā†©ļø Undo/Redo operations
  • šŸŒ Browser navigation
  • šŸ§® Expression evaluation
  • šŸ”„ Function call management
  • šŸ§© Backtracking algorithms
  • šŸ“ Syntax parsing
  • šŸ” Depth-First Search (DFS)
  • šŸ“š Parentheses matching

For example, when you press Ctrl + Z, previous actions can be modeled using stack-based behavior.

šŸŽÆ The Interview Takeaway

If an interviewer asks:

"A user closes several browser tabs and wants to restore the most recently closed tab first. Which data structure would you use?"

Think:

Most Recent ā†’ First Restored
        ā†“
       LIFO
        ā†“
      STACK
Enter fullscreen mode Exit fullscreen mode

The basic design is:

Close Tab
    ā†“
  push()
    ā†“
Stack
    ā†“
  pop()
    ā†“
Reopen Tab
Enter fullscreen mode Exit fullscreen mode

šŸ’” Final Thought

Sometimes the best way to understand Data Structures isn't by memorizing definitions.

It's by looking at the software we use every day.

That tiny "Reopen Closed Tab" button is a perfect example of how a fundamental concept like a Stack can help us reason about real-world software behavior.

So next time you accidentally close a tab and press:

Ctrl + Shift + T

remember:

Last closed. First restored. LIFO. Stack. šŸš€

And that's Data Structures hiding in plain sight.

Written by Kashaf Abdullah

Software Engineer | MERN Stack | Web Development

Found this helpful? Leave a ā¤ļø and bookmark it for later!

Let's discuss in the comments: Have you ever thought about the data structures behind everyday browser features? What other examples can you think of?
Enter fullscreen mode Exit fullscreen mode

Top comments (0)