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

When working with JavaScript, you often need to manipulate the current URL or navigate to a different page. The window.location object provides several methods for this purpose, including href, replace, and assign. Although they may appear similar at first glance, these methods have distinct differences in terms of their behavior and impact on the browser history. In this article, we will explore the dissimilarities between window.location.href, window.location.replace, and window.location.assign, supported by illustrative examples.

window.location.href	window.location.replace	window.location.assign
window.location.href is used to navigate to a new URL, triggering a page refresh and creating a new entry in the browser history.	window.location.replace replaces the current page with a new URL, without creating a history entry, making it impossible to go back to the previous page.	window.location.assign modifies the current page’s URL without refreshing, allowing the creation of a new history entry.

We will see all differences in detail with examples.

window.location.href

The href property of the window.location object represents the complete URL of the current page. It can be both accessed and modified. When you assign a new URL to window.location.href, the browser will navigate to the specified location, triggering a full page refresh. Here’s an example:

// Redirect to a new page using window.location.href
window.location.href = "https://codeindotnet.com"; 

This code will load the “https://codeindotnet.com” URL, replacing the current page with the new content and adding an entry to the browser history.

window.location.replace

The replace method of the window.location object also allows you to navigate to a new URL, but with a crucial difference. When you invoke window.location.replace, the current page is immediately replaced with the new content, without creating a new entry in the browser history. This means that clicking the browser’s “Back” button will not take the user back to the previous page. Let’s see an example:

// Replace the current page with a new URL using window.location.replace
window.location.replace("https://codeindotnet.com"); 

Upon executing this code, the browser will load “https://codeindotnet.com,” discarding the current page from the history.

window.location.assign

The assign method of the window.location object is similar to window.location.href, as it navigates to a new URL and creates a new entry in the browser history. However, window.location.assign allows you to modify the current page’s URL without triggering a page refresh. Here’s an example:

// Modify the current page's URL without refreshing using window.location.assign
window.location.assign("https://codeindotnet.com"); 

This code will update the URL displayed in the address bar to “https://codeindotnet.com,” but the content of the page will remain unchanged. If you subsequently refresh the page or navigate to a different page, the new URL will appear in the browser history.

In summary:

• window.location.href is used to navigate to a new URL, triggering a page refresh and creating a new entry in the browser history.
• window.location.replace replaces the current page with a new URL, without creating a history entry, making it impossible to go back to the previous page.
• window.location.assign modifies the current page’s URL without refreshing, allowing the creation of a new history entry.