Difference between window.location.href, window.location.replace and window.location.assign in JavaScript - GeeksforGeeks

30 Jun, 2021
Window.location is a property that returns a Location object with information about the document’s current location. This Location object represents the location (URL) of the object it is linked to i.e. holds all the information about the current document location (host, href, port, protocol, etc.)
All three commands are used to redirect the page to another page/website but differ in terms of their impact on the browser history.
window.location.href Property:
The href property on the location object stores the URL of the current webpage.
On changing the href property, a user can navigate to a new URL, i.e. go to a new webpage.
It adds an item to the history list (so that when the user clicks the “Back” button, he/she can return to the current page).
Updating the href property is considered to be faster than using the assign() function (as calling a function is slower than accessing the property).
Syntax:
window.location.href = 'https://www.geeksforgeeks.org';
 
Example:
HTML
<!DOCTYPE html><html>  <body>    <button onclick="getCurrentLocation()">        Get URL    </button>    <button onclick="setCurrentLocation()">        Change URL    </button>      <script>        function getCurrentLocation() {              // Get current location            var loc = window.location.href;            alert(loc);        }        function setCurrentLocation() {              // Change current location            var newloc = "https://www.geeksforgeeks.org/";            window.location.href = newloc;        }    </script></body>  </html>
Output:
Note: The following 2 lines of code perform the same purpose.
Javascript
// Less favouredwindow.location = 'https://www.geeksforgeeks.org'   // More favouredwindow.location.href = 'https://www.geeksforgeeks.org' 
window.location.replace Property:
The replace function is used to navigate to a new URL without adding a new record to the history.
As the name suggests, this function “replaces” the topmost entry from the history stack, i.e.,  removes the topmost entry from the history list, by overwriting it with a new entry.
So, when the user clicks the “Back” button, he/she will not be able to return to the current page.
Hence, the major difference between the assign() and replace() methods is that the replace() function will delete the current page from the session history.
The replace function does not wipe out the entire page history, nor does it make the “Back” button non-functional.
Syntax:
window.location.replace("https://geeksforgeeks.org/web-development/")
 
Example:
HTML
<!DOCTYPE html><html>  <body>    <button onclick="replaceLocation()">        Replace current webpage    </button>    <script>        function replaceLocation() {              // Replace the current location            // with new location            var newloc = "https://www.geeksforgeeks.org/";            window.location.replace(newloc);        }    </script></body>  </html>
Output:
window.location.assign Property:
The assign function is similar to the href property as it is also used to navigate to a new URL.
The assign method, however, does not show the current location, it is only used to go to a new location.
Unlike the replace method, the assign method adds a new record to history (so that when the user clicks the “Back” button, he/she can return to the current page).
However, rather than updating the href property, calling a function is considered safer and more readable.
The assign() method is also preferred over href as it allows the user to mock the function and check the URL input parameters while testing.
Syntax:
window.location.assign("https://geeksforgeeks.org/")
Example:
HTML
<!DOCTYPE html><html>  <body>    <button onclick="assignLocation()">        Go to new webpage    </button>          <script>        function assignLocation() {              // Go to another webpage (geeksforgeeks)            var newloc = "https://www.geeksforgeeks.org/";            window.location.assign(newloc);        }    </script></body>  </html>
Output:
Difference between window.location.replace, window.location.assign and window.location.href properties:
JavaScript-Properties
JavaScript-Questions
Picked
Difference Between
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference Between Method Overloading and Method Overriding in Java
Comparison between Adjacency List and Adjacency Matrix representation of Graph
Difference between Synchronous and Asynchronous Transmission
Difference between LAN, MAN and WAN
Difference between Prim's and Kruskal's algorithm for MST
Convert a string to an integer in JavaScript
Hide or show elements in HTML using display property
How to calculate the number of days between two dates in javascript?
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?