# How to use the URL Object in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Aug 11, 2019, updated Aug 8, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-url-object

> An introduction to JavaScript URL Object and how to use it to parse, construct, normalize, and encode URLs.

In JavaScript, the `URL` interface is used to parse, construct, normalize, and encode URLs. It provides static methods and properties to read and modify different components of the URL.

## Create a URL object

You can create a new `URL` object by either passing the string URL or by providing a relative path and a base string URL to its constructor:

```javascript
// URL object with absolute path
const url1 = new URL('https://attacomsian.com/blog/javascript-url-object')

// URL object with relative path and base URL
const url2 = new URL('/blog/javascript-url-object', 'https://attacomsian.com')
```

In the example above, both URLs are the same. We can even create a new URL based on the path relative to an existing URL:

```javascript
const url3 = new URL('/blog', url1)
console.log(url3.toString()) 
// https://atttacomsian.com/blog
```

## URL Properties

The `URL` object is useful if you want to extract different parts from a string URL, such as the hostname, port, relative path, and parameter values. You can access these [properties](https://developer.mozilla.org/en-US/docs/Web/API/URL#Properties) immediately after the `URL` object is created:

```javascript
const url = new URL('https://attacomsian.com/blog/javascript-url-object#url-properties')

console.log(url.protocol) // https:
console.log(url.host) // attacomsian.com
console.log(url.pathname) // /blog/javascript-url-object
console.log(url.hash) // #url-properties
console.log(url.origin) // https://attacomsian.com
```

In addition to the above properties, the `URL` object also has:

* `search` — The query parameters string including the leading `?` character.
* `href` — The complete URL, same as `url.toString()` method.
* `port` — Returns the port of the URL.
* `searchParams` — A [`URLSearchParams`](https://attacomsian.com/blog/javascript-url-search-params) object to access the individual query parameters found in `search`.
* `username` & `password` — Only available if HTTP authentication is used.

Apart from the above properties, the `URL` object also provides two methods:

* `toString()` — It is similar to `url.href` but cannot be used to modify the value.
* `toJSON()` — It returns the same string as `href` property.


## Update a URL object

The `URL` object properties (except `origin` and `searchParams`) can be used to construct a new URL or update parts of an existing URL:

```javascript
// construct a URL
const url = new URL('http://attacomsian.com')
url.pathname = '/blog/javascript-url-object'
url.hash = '#url-properties'

// update `protocol` property
url.protocol = 'https:'

console.log(url.toString())
// https://attacomsian.com/blog/javascript-url-object#url-properties
```

## Static Methods

The `URL` interface provides a `createObjectURL()` static method to generate a blob URL (starts with `blob:` as its schema) that uniquely identifies the object in the browser:

```javascript
const blobUrl = URL.createObjectURL(blob)
```

Once you have the blob URL, pass it to the `revokeObjectURL()` static method to remove it from memory:

```java
URL.revokeObjectURL(blobUrl)
```

## URL Object Usage

At the moment, the `URL` object usage is limited. Simple strings are good enough for making network requests. However, you can use the `URL` object in modern JavaScript APIs like [Fetch API](https://attacomsian.com/blog/javascript-fetch-api) or even in [XMLHttpRequest  (XHR)](https://attacomsian.com/blog/http-requests-xhr) to communicate with the server. 

Here is an example of the Fetch API that uses a `URL` object to get a JSON object:

```javascript
const url = new URL('https://reqres.in/api/users')

fetch(url)
  .then(res => res.json())
  .then(res => {
    res.data.map(user => {
      console.log(`${user.id}: ${user.first_name} ${user.last_name}`)
    })
  })
```