JavaScript, difference between location, URL and documentURI properties of document

In JavaScript, what is difference b/w location, URL and documentURI properties of document?

In JavaScript, the properties location, URL, and documentURI of the document object provide information about the current page's location, but they have some differences in usage and behavior. Here's a breakdown of each:

1. document.location

Type: Location object

Description: Refers to the Location object, which contains information about the current URL of the document. Through this property, you can access various parts of the URL, such as href, protocol, hostname, pathname, etc., and it allows you to manipulate the URL directly.

Usage:

document.location.href gives the full URL as a string.

document.location can be used to navigate to a new URL by setting it, like document.location = "https://example.com".

Allows reloading the page or navigating to a different page by using document.location.reload() or document.location.assign().

2. document.URL

Type: String

Description: Returns the full URL of the document as a string.

Usage:

Useful for simply getting the complete URL of the document in string form, but it does not allow any manipulation of the URL.

Example: document.URL might return "https://example.com/page?query=123".

3. document.documentURI

Type: String

Description: Returns the document's URI (Uniform Resource Identifier) as a string, which in most cases is the same as document.URL.

Usage:

Often interchangeable with document.URL, but it’s less commonly used.

Mainly exists for compatibility with the DOM Level 3 Core specification.

Summary

document.location: Provides a Location object with methods and properties to navigate or reload the document and access parts of the URL.

document.URL: A string representing the document's full URL. Read-only.

document.documentURI: A string also representing the document's URI, typically the same as document.URL.