The complete overview of {window.location}

The title of the article seems quite normal, many of you will think “Wow, nothing but I don’t know, these three things I do all the time!” … that’s true! However, here will have some interesting things with window.location , apart from the things you already know (hopefully), who already knows …

Note: The article is contraindicated for Senior Developer

When coding React, most people will usually use React-router-dom because of its many outstanding features. However, in some cases I still like to use window.location , partly because of the convenience of not having to import the module, partly because of lazy …

1. Properties

Normally, to get the information of the URL, we will use the window.location syntax, the browser will return an object containing the information of the currently accessed page or methods to manipulate such as redirect, refresh …

In addition to window.location , there are 3 other ways to access Location:

In all 4 ways above, are returned to Location containing an object. The location syntax seems the simplest but is not recommended much, because it is easy to confuse and generate errors if your code also has a variable with the same name.

In addition, not only can these properties be called to get URL information, you can use it to set new values ​​and change the URL. For example:

Similar to the rest of the properties, it is possible to set a new value for it, except for the origin attribute, which is read only.

2. Methods

window.location provides us with 4 methods assign , replace , reload and toString .

2.1. window.location.assign () and window.location.replace ()

Both of these methods will help you redirect or navigate to another URL. The difference is that .assign() will save your current page in history before redirecting to the specified URL. So, when the user manipulates back, the browser will return the previous page. Whereas with .replace() , no, when the user .replace() back operations, it will return a blank page or a previous page. For example:

Step 1: Open a new tab

Step 2: Visit www.w3schools.com

Step 3: Visit www.developer.mozilla.org

Step 4:

If using window.location.assign('www.google.com') // When back, it will return to www.developer.mozilla.org

If using window.location.replace('www.google.com') // When back, you will return to www.w3schools.com

So the question is, what’s the difference between href and .assign() , since both are intended to go to a specified URL? assign seems more semantic at first glance because it’s a function so it feels like you’re performing an action. Also, one plus point is that it is easier to write tests, for example:

But for href , through some performance tests running on Chrome, it’s about … 15% faster than .assign() . So deciding which one to choose depends on the circumstances …

2.2. window.location.toString

This method returns String of URL. This is the read-only version of window.location.href

In other words, you can get the href value through 2 ways:

Above are some basic knowledge and concepts about window.location in Javascript. In addition, there are many concepts and topics related to window.location you can refer to here:

• https://www.w3schools.com/js/js_window_location.asp
• https://guide.freecodecamp.org/javascript/window-location/
• https://stackoverflow.com/questions/10302905/location-href-property-vs-location-assign-method
• https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript
• https://medium.com/@marikalam/how-do-you-redirect-to-another-page-in-javascript-6c7524c1f88a

Thanks to everyone who watched the post. Good bye and see you again!