JS MASTER CLASS /// LEARN BOM /// REDIRECT USERS /// PARSE URLS /// JS MASTER CLASS /// LEARN BOM /// REDIRECT USERS /// PARSE URLS /// JS MASTER CLASS /// LEARN BOM /// REDIRECT USERS /// PARSE URLS ///

JavaScript Location Object

Control the browser address bar. Redirect users, read URL queries, and manipulate browser history programmatically.

location.js
1 / 10
12345
🌍

Tutor:Welcome! Today we are looking at the window.location object. This is part of the Browser Object Model (BOM). It gives you information about the current URL and allows you to redirect the user.


Skill Matrix

UNLOCK NODES BY MASTERING THE BOM.

Concept: Properties

The window.location object allows you to read different parts of the URL. Properties include href, hostname, and search.

System Check

Which property gets the path after the domain name?

Community Holo-Net

Share Your Scripts

ACTIVE

Built an interesting routing or redirect logic using vanilla JS? Let the community see it!

Support Us

JavaScript Window Location

Author

Pascual Vila

Frontend Instructor // Code Syllabus

The window.location object is an essential part of the Browser Object Model (BOM). It provides information about the document's current location (the URL) and provides methods to redirect the user to a new location.

Understanding Properties

Rather than manually parsing strings to find the domain or the query parameters, window.location breaks the URL down into easily accessible properties:

  • href: The entire URL (https://example.com:8080/path?query=1#hash)
  • protocol: The web protocol used (https:)
  • hostname: The domain name of the server (example.com)
  • pathname: The path after the domain (/path)
  • search: The query string, starting with a question mark (?query=1)
  • hash: The anchor/fragment identifier, starting with a hash (#hash)

Redirecting Methods

When building single-page applications or handling authentication, you frequently need to move the user to a different page dynamically.

The location.assign("url") method loads a new document. Crucially, it saves the current page in the session history, meaning the user can click the browser's "Back" button to return.

Conversely, location.replace("url") replaces the current document. It removes the current URL from the document history, preventing the user from using "Back" to navigate to the original document. This is highly recommended for security redirects (like after a logout).

Parsing Query Strings

Historically, reading the location.search property required complex RegEx or string splitting. Today, JavaScript provides the native URLSearchParams interface. By passing the search string into it, you get an iterable object that easily grabs values via params.get('key').

View Full Transcript+

This section contains the full detailed transcript of the video lessons regarding window.location, BOM hierarchy, and safe redirect patterns. It covers the nuanced difference between window.location.href assignment versus the assign() and replace() methods.

JS BOM Glossary

window.location

A read-only property returning a Location object with information about the document's current location.

snippet.js

location.assign()

Loads the resource at the URL provided in parameter, keeping the current page in the session history.

snippet.js

location.replace()

Replaces the current resource with the one at the provided URL. The current page will not be saved in session history.

snippet.js

location.search

A string containing a '?' followed by the parameters or 'query string' of the URL.

snippet.js

URLSearchParams

An interface defining utility methods to work with the query string of a URL.

snippet.js

location.reload()

Reloads the current URL, like the Refresh button.

snippet.js