location’s href vs replace vs assign in JavaScript

In this article, we will learn the difference between the location’s href vs replace vs assign in JavaScript.

---

location’s href, replace() and assign()?

• A redirection should generally happen by the backend.
• The backend sends correct HTTP redirect headers to the client and then the redirection happens on the client-side.
• But if we need to redirect from the current page to a new page in JavaScript, we can do that as well using location.href, location.replace() and location.assign().
• Below are some examples:

location.href = 'https://techtalkbook.com';
location.assign('https://techtalkbook.com');
location.replace('https://techtalkbook.com');

• Now, you must be thinking that all of the above does the same thing then what’s the difference. right?
• So let’s see and understand the difference between each of these location’s href vs replace vs assign and their usage.

---

Differences

location.href

• It loads a new document in the browser.
• It creates a new entry in the browser history with the URL provided.
• You can go back to the previous page by clicking the browser’s Back arrow (<-) button due to the above reason.
• It works as both getter and setter for the current page. So we can do two things using this:
  • Replace the current page with a different page by setting a URL.
    location.href = ‘https://techtalkbook.com’;
  • Get the URL of the current page.
    location.href;
• Usage: If an old version of the page available in the cache then it loads the page from the browser’s cache and because of this, It does not always send the request to the server.

location.replace()

• It is used to replace the currently loaded document in the browser.
• As the name “replace” suggests, It replaces the current document entry in the browser history with the new URL provided.
• You can’t go back to the previous page by clicking the browser’s Back arrow (<-) button because of the above reasons that is, it replaces the URL of the previously loaded page in the browser history.
• In the below example,
  2nd entry “https://techtalkbook.com” will be replaced with the latest entry “https://techtalkbook.com/why-0-1-0-2-does-not-equal-0-3”
  • With this, the browser history stack will have
    https://techtalkbook.com/why-0-1-0-2-does-not-equal-0-3 and then
    https://techtalkbook.com/category/javascript
  • So pressing the browser’s back button will go back to https://techtalkbook.com/category/javascript instead of https://techtalkbook.com

document.location.href = 'https://techtalkbook.com/category/javascript';
document.location.href = 'https://techtalkbook.com';
document.location.replace('https://techtalkbook.com/why-0-1-0-2-does-not-equal-0-3');

• Usage: If you want to redirect the user to a new page but don’t allow navigation to the previously loaded page using the back button then use replace().

location.assign()

• It loads a new document in the browser.
• As the name “assign” suggests, It assigns/creates a new entry in the browser history with the URL provided.
• You can go back to the previous page by clicking the browser’s Back arrow (<-) button because of the above reason that is, it creates a new entry in browser history without affecting the entry of the previously loaded page.
• In the below given example, A new entry will be added without affecting the existing entries in the history.
  • So the browser history stack will have
    https://techtalkbook.com/why-0-1-0-2-does-not-equal-0-3
    https://techtalkbook.com and then
    https://techtalkbook.com/category/javascript
  • So pressing the browser’s back button will go back to https://techtalkbook.com

document.location.href = 'https://techtalkbook.com/category/javascript';
document.location.href = 'https://techtalkbook.com';
document.location.assign('https://techtalkbook.com/why-0-1-0-2-does-not-equal-0-3');

• Usage: If you want to allow the user to navigate to the previously loaded page using the back button then use the assign() method.

---

What else

There is something more with location.assign(). Let’s see.

• Security perspective:
  • If the origin of the script calling the method is different from the origin of the page originally described by the Location object then that’s a security violation.
  • It will throw a DOMException SECURITY_ERROR for this type of error.
  • If the provided URL is not valid then a DOMException of the SYNTAX_ERROR type is thrown.
  • If the domain of the provided URL is different from that of the current page then the security settings like CORS may prevent this to effectively happen.

---

References

• https://stackoverflow.com/questions/7703689/difference-between-window-location-href-window-location-replace-and-window-loca
• https://www.tutorialspoint.com/Difference-between-window-location-href-window-location-replace-and-window-location-assign-in-JavaScript
• https://www.java67.com/2017/07/6-ways-to-redirect-web-page-using-JavaScript-and-jQuery.html

---

Related Posts

Visit https://techtalkbook.com to find more related topics.

Happy Coding!!!

---