The Location Object

By the end of this lesson, you will be able to read parts of the current browser URL with the JavaScript location object and change the page URL using location.href, location.assign(), or location.replace().

What it is

The location object is a browser-provided object that represents the current document's URL. It is available as window.location or simply location. Think of it as a live view of the address bar: reading its properties tells you where the browser is, and writing to it can move the browser somewhere else.

Important related terms:

• href: the full URL.
• pathname: the path after the origin, such as /blog/post.
• search: the query string, including the leading ?.
• hash: the fragment identifier, including the leading #.
• origin: the scheme, host, and port, available as location.origin.

Why it matters

• It lets JavaScript read the current URL to decide what content to show.
• It can send users to another page after a form submission or login.
• It can update the fragment identifier to scroll to a section without a full reload.
• It can replace the current history entry when you do not want the Back button to return to the previous page.
• It helps debug routing problems by inspecting pathname, search, and hash.

Syntax or steps

The smallest useful pattern is reading location.href and then assigning a new URL to it:

const currentUrl = location.href;
location.href = "/about";

Relative URLs such as "/about" are resolved against the current origin. If you want to add a history entry explicitly, use location.assign("/about"). If you want to replace the current history entry, use location.replace("/about"). To reload the page, use location.reload().

Example

// Read parts of the current URL
console.log("Full URL:", location.href);
console.log("Path:", location.pathname);
console.log("Query:", location.search);
console.log("Fragment:", location.hash);

// Navigate to a new page and add a history entry
function goToAbout() {
  location.href = "/about";
}

// Navigate without leaving the current page in history
function goToHome() {
  location.replace("/");
}

// Update only the fragment identifier
function goToSection(id) {
  location.hash = "#" + id;
}

Part by part:

• location.href returns the complete URL as a string.
• location.pathname returns the path portion, such as /docs/location.
• location.search returns the query string, such as ?page=2.
• location.hash returns the fragment, such as #summary.
• location.href = "/about" starts a normal navigation to /about.
• location.replace("/") navigates to / and replaces the current history entry.
• location.hash = "#" + id changes the fragment and scrolls to the matching element if it exists.

Common mistakes

• Expecting code after navigation to finish. Setting location.href starts a page change. Do not rely on later statements running as if the page stayed open.
• Confusing assign() with replace(). assign() adds a new history entry; replace() removes the current entry from history.
• Building query strings by hand. Repeatedly doing location.href = location.href + "?x=1" can create duplicate parameters. Use URLSearchParams when you need to modify query values safely.
• Forgetting the leading characters. location.search includes ?, and location.hash includes #. Do not add them twice.

When to use it

Use the location object when you need the browser to navigate or reload. Compare it with history.pushState(), which updates the URL without loading a new page.

Practice

Guided exercise: Open a page with the URL https://example.com/docs?tab=api#intro. Write code that logs the path, query, and fragment, then changes the URL to https://example.com/docs?tab=api#summary.

console.log(location.pathname);
console.log(location.search);
console.log(location.hash);

location.hash = "#summary";

Expected result: The console shows /docs, ?tab=api, and #intro. The address bar changes to #summary without a full page reload.

Challenge: Write a function called goToPage(page) that navigates to /page/ followed by the given page number, such as /page/3.

Solution hint: Use location.href = "/page/" + page;.

Quick check

What is the difference between location.assign("/about") and location.replace("/about")?

location.assign("/about") navigates to /about and adds a new history entry. location.replace("/about") navigates to /about and replaces the current history entry, so the Back button does not return to the previous page.

Summary

The location object is the browser's live representation of the current URL. Reading it helps you inspect the page address, while writing to it can navigate, redirect, or update the fragment.

Choose location.href or location.assign() for normal navigation, location.replace() when you do not want the old page in history, and history.pushState() when you need to update the URL without reloading.