- What is window.location in JavaScript?
- What is window.location.href in JavaScript?
- What is window.location.assign in JavaScript?
- Difference between window.location.href and window.location.assign in JavaScript.
- Comparison Based on Similarities
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:
<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:
<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.
