JavaScript Popstate Event Quiz

The first two arguments (state and title) of both these methods are required. This goes with choice (C). For more details, refer to JavaScript popstate event — the History API.

Whatever is passed to pushState() (and even replaceState()) in the first state parameter is serialized and then stored as part of the entry being set. Hence, the correct choice is (A). For more details, refer to JavaScript popstate event — serialization of state.

var o = {x: 1}
history.replaceState(o, '');

window.onpopstate = function(e) {
    console.log(e.state === o);
}

When we navigate to www.example.com/#about, the popstate event gets fired and consequently the console.log() statement above gets executed. Since the state of this new entry is null, it is not going to be equal to o — hence we get false logged.

Next up, when we go back from this point, popstate gets fired again. This time, the state object of the entry is equal to o, but only visually — internally both the objects are different. Both may look exactly the same but the reality is that they are stored at different memory locations, completely unaware of each other! The reason for this is because state objects passed to pushState() are serialized. Hence, false is logged again in the console.

This makes a total of two false logs, which goes with choice (D). For more details, refer to JavaScript popstate event — serialization of state.

history.replaceState({x: 1}, '');
history.pushState({y: 2}, '');

window.onpopstate = function(e) {
    console.log(e.state);
}

The popstate event doesn't fire just by calling replaceState() or pushState(). Likewise, in this case, nothing would be logged in the console. This goes with choice (D). For more details, refer to JavaScript popstate event — when does popstate fire.

history.pushState(null, '', '#about');

Calling pushState() doesn't perform a navigation or history traversal — it merely adds a new entry to the current session's history stack and updates some state-related data; that's it. The hashchange event only fires when a navigation or history traversal is made. This means that executing pushState() won't ever fire hashchange. Hence, the correct choice is (B). For more details, refer to JavaScript popstate event — things to note.

popstate fires before hashchange. This goes with choice (B). For more details, refer to JavaScript popstate event — things to note.

document.addEventListener('popstate', function(e) {
    // handling code
});

Everything here is alright except for the target of the addEventListener() method — popstate never gets fired on document; rather, we should use window. Hence, the correct choice is (A). For more details, refer to JavaScript popstate event — handling popstate.

history.pushState(null, '', 'about');

Calling pushState() or replaceState() doesn't fire popstate. Hence, the correct choice is (B). For more details, refer to JavaScript popstate event — when does popstate fire.

<a href="#menu">See Menu</a>

Navigating to a hash link, #menu in this case, indeed fires the popstate event. Hence, the correct choice is (A). For more details, refer to JavaScript popstate event — when does popstate fire.