What does the history object do?

JavaScriptJunior~2 min read

1. What `history` is

history is a property of the window object:

javascript

console.log(window.history === history); // true

It holds the history of visited pages within the current tab.

2. Main `history` methods:

Method	What it does	Example
`back()`	navigate to the previous page (like the "Back" button)	`history.back()`
`forward()`	navigate to the next page (like "Forward")	`history.forward()`
`go(n)`	navigate `n` steps forward/back	`history.go(-1)` - go back one page
`pushState(state, title, url)`	add a new entry to the history without reloading	`history.pushState({}, '', '/about')`
`replaceState(state, title, url)`	replace the current entry in the history	`history.replaceState({}, '', '/home')`

3. `history` properties:

Property	Description
`history.length`	number of entries in the current tab's history stack

Example:

javascript

console.log(history.length); // e.g. 5

4. Usage examples

Going "back" and "forward":

javascript

document.querySelector("#back").onclick = () => history.back();
document.querySelector("#next").onclick = () => history.forward();

Works like the browser's back and forward buttons.

Moving several steps:

javascript

history.go(-2); // back 2 pages
history.go(1);  // forward 1 page

Adding an entry to the history (SPA apps)

javascript

history.pushState({ page: "about" }, "About", "/about");
console.log(location.pathname); // "/about"

The pushState() method changes the URL without reloading the page - this is how single-page applications (SPA) work, for example, React Router, Vue Router, and so on.

Changing the current entry:

javascript

history.replaceState({ page: "home" }, "Home", "/home");

replaceState() does not create a new entry, it overwrites the current one (useful for redirects).

Reacting to history changes:

javascript

window.addEventListener("popstate", event => {
  console.log("Navigated through history:", event.state);
});

The popstate event fires when the user clicks "Back" or "Forward" in the browser.

5. Difference between the "browser history" and `history`

history manages only the current tab's history.
It does not give access to pages opened earlier in other tabs.
It does not show a "list of sites" (for security reasons).

6. Typical uses of `history`:

managing routing in SPAs (React Router, Vue Router)
changing the URL without reloading
implementing "Back" / "Forward" buttons
preserving page state (for example, a selected filter)

Briefly:

What it does	Manages the tab's navigation history
Where it lives	`window.history`
Main methods	`back()`, `forward()`, `go()`, `pushState()`, `replaceState()`
You can check	the number of entries (`history.length`)
Fires an event	`popstate`
Used in	SPAs, dynamic transitions, routing

Summary: history is an API for managing navigation history, which lets you move forward/back and change the URL without reloading the page.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.