JavaScript

Difference between window.location.href and window.location.assign in JavaScript | Explained

2 years ago
by Anees Asghar
In the programming world a developer can face a situation where he/she needs to redirect from one page to another page. So, dealing with such a situation can be proved a real concern for developers. So, how to tackle such situations? Well! JavaScript provides multiple ways to redirect from one page to another such as window.location.href, window.location.assign, window.location.replace. All these properties/methods perform the same functionality i.e., redirecting one page to another, however, each of them has a different effect on the browser’s history.

What is window.location in JavaScript?

The window.location is an object in JavaScript that can be used to get the url/address of the current page/document. The window.location object redirects a browser to a new url/webpage. We can skip the window prefix from the window.location i.e. we can use only location with any property or method.

What is window.location.href in JavaScript?

It is a property in JavaScript that returns the URL/address of the current page/document. If we pass the url/address of some other page to the window.location.href property then consequently it will redirect us to the specified address/URL.

The below-given snippet will let you understand the working of window.location.href in a better way:

<html>

<head>

</head>

<button onclick="hrefFunction()">Click Me!</button>

<body>

<script>

function hrefFunction() {

window.location.href = "https://www.linuxhint.com/";

}

</script>

</body>

</html>

If you run the above-given code on your system, you will get the following output:

Clicking on the button will lead us to the given URL.

This is how location.href property works in JavaScript.

What is window.location.assign in JavaScript?

It is a built-in method used to redirect to a new page/url. The location.assign method doesn’t delete the url of the original page/document from the history therefore we can navigate back to the original page.

The below program will provide you with more clarity about the location.assign method:

<html>

<button onclick="assignFunction()">Click Me!</button>

<body>

<script>

function assignFunction() {

location.assign("https://www.linuxhint.com/");

}

</script>

</body>

</html>

In the above given-program, firstly, we created a button labeled as “Click Me!”. Next, we specified www.linuxhint.com in the location.assign() method and the assignFunction() will be invoked whenever the user clicks on the button:

When we clicked on the button “Click Me!”, it directs us to the following window:

We can observe that both location.href and location.assign produced the same result.

Difference between location.href and location.assign in JavaScript

The key differences between location.href and location.assign are listed below:

  • The windows.location.href is a property while the windows.location.assign is a method.
  • The location.href is used for storing the URL/address of the current page while location.assign doesn’t show the current location of the page.
  • The windows.location.href returns the address/URL of the current document/page on the other hand the windows.location.assign loads a new document.
  • The location.href is faster as compared to the location.assign while the location.assign is more secure as compared to the location.href.

Comparison Based on Similarities

There are a couple of similarities between location.href and location.assign as described below:

  • Both have the same goal i.e., navigating to the new page/URL.
  • Both of them add a new record to the history.
  • Both location.href and location.assign doesn’t delete the current url from the history and hence we can navigate back to the original URL/page.

Conclusion

In JavaScript, window.location.href property and window.location.assign method is used to redirect to a new page/url. However, there exist some major differences between location.href and location.assign e.g. The location.href returns the URL/address of the current page/document while the location.assign loads a new document, the location.href is faster as compared to the location.assign, the location.assign is more secure as compared to the location.href, and so on.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.

View all posts