All posts

Differences between window assign, open, replace, and href= in JS

When using JavaScript there are a number of ways to load new documents in the browser. In this post I attempt to shed some light on differences between some/most of the options frequently reached for.

window.location.assign("some_url") vs window.location.href = "some_url"

Functionally there is no difference between these two methods for loading a new document (source).

It has been mentioned that using window.location.href = "some_url" may be slightly more performant because setting a property value uses fewer resources than invoking a function, eg window.location.assign("some_url").

In both of these cases a new document will be loaded and the browser history will be preserved so clicking the back button in the browser will take the user back the the previous page they came from. The document will be opened in the same browser window the user came from.

window.location.replace("some_url")

This function will open a new document. The document will be opened in the same browser window the user came from. The difference here is the history will be reset so clicking the back button in the browser will not take the user back to the previous page.

window.open("some_url")

This function will open the new document in a new browser window.

Similar post

Postscript:

I built two products to help fund continued efforts for this website, it would mean a lot if you would check them out:
1. 2500+ Words for the Undermotivated Software Engineer - A short essay I wrote on the titled topic ($3).
2. Build 3 Chrome Extensions in Under 2 Hours - A course I built to teach chrome extension development ($9-20).