In JavaScript, the location object is part of the window interface and gives you access to the current URL of the page. You can use it to read or change the URL, reload the page, or redirect the user to a different site.
1. What is the location Object?
The location object contains information about the URL of the current page. You can access it using:
javascriptCopyEditconsole.log(window.location);
Or simply:
javascriptCopyEditconsole.log(location);
It returns a Location object with various useful properties and methods.
2. Key Properties of location
Here are the most common properties you’ll use:
a. location.href
This is the full URL of the current page.
javascriptCopyEditconsole.log(location.href);
Example output:
bashCopyEdithttps://example.com/page.html?search=hello#top
You can also set location.href to redirect the user:
javascriptCopyEditlocation.href = "https://google.com";
b. location.hostname
Returns the domain name (without protocol or port):
javascriptCopyEditconsole.log(location.hostname);
// "example.com"
c. location.pathname
Returns the path of the URL (after the domain):
javascriptCopyEditconsole.log(location.pathname);
// "/page.html"
d. location.protocol
Returns the protocol (e.g., “http:” or “https:”):
javascriptCopyEditconsole.log(location.protocol);
// "https:"
e. location.port
Returns the port number (if any):
javascriptCopyEditconsole.log(location.port);
// "443" for HTTPS or "" if none is specified
f. location.search
Returns the query string part of the URL, including the ?:
javascriptCopyEditconsole.log(location.search);
// "?search=hello"
You can extract parameters using this and URLSearchParams:
javascriptCopyEditlet params = new URLSearchParams(location.search);
console.log(params.get("search")); // "hello"
g. location.hash
Returns the anchor (#) part of the URL:
javascriptCopyEditconsole.log(location.hash);
// "#top"
3. Useful Methods of location
a. location.assign()
Loads a new document (like setting href), but keeps history:
javascriptCopyEditlocation.assign("https://openai.com");
The user can click “Back” to return to the previous page.
b. location.replace()
Redirects to a new URL without keeping the current page in the history:
javascriptCopyEditlocation.replace("https://example.com");
Use this when you don’t want the user to return to the current page via the back button.
c. location.reload()
Reloads the current page:
javascriptCopyEditlocation.reload();
Add true to force a reload from the server:
javascriptCopyEditlocation.reload(true);
Note: Some browsers ignore the true parameter now.
4. Common Use Cases
a. Redirect Users
javascriptCopyEditif (location.protocol !== "https:") {
location.replace("https://" + location.hostname + location.pathname);
}
This forces all users to use HTTPS.
b. Get Query Parameters
javascriptCopyEditlet params = new URLSearchParams(location.search);
let productId = params.get("id");
console.log(productId);
This is commonly used in e-commerce or search result pages.
c. Track Page Anchors
javascriptCopyEditif (location.hash) {
console.log("Jumped to section: " + location.hash);
}
Useful for highlighting or scrolling to specific sections.
5. Summary
The location object is a powerful tool in JavaScript for reading and changing URLs, redirecting users, and controlling navigation. Here’s a summary of what you can do:
| Property/Method | Description |
|---|---|
location.href | Full URL (get/set) |
location.hostname | Domain name |
location.pathname | URL path |
location.search | Query string |
location.hash | Anchor tag |
location.protocol | URL protocol |
location.assign() | Redirect with history |
location.replace() | Redirect without history |
location.reload() | Reload the current page |
By mastering the location object, you can control the behavior and flow of your web applications more dynamically and interactively.