Introduction to JavaScript URL Object
Tags: beginners, javascript, webdev, codenewbie
Published: 2019-09-08 14:58:53

*This post was originally published on [attacomsian.com/blog](https://attacomsian.com/blog/javascript-url-object).*

--- 

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

## Creating a URL

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 same. We can even create a new URL based on the path relative to an existing URL:

```javascript
// create new url based on existing url
const url3 = new URL('/blog', url1);

console.log(url3.toString()); // https://atttacomsian.com/blog
```

## URL Properties

The `URL` object is very helpful if you want to extract different parts from a string URL, such as the host name, 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` &mdash; The query parameters string including the leading `?` character.
* `href` &mdash; The complete URL, same as `url.toString()` method.
* `port` &mdash; Returns the port of the URL.
* `searchParams` &mdash; A `URLSearchParams` object that can be used to access the individual query parameters found in `search`.
* `username` & `password` &mdash; Only available if HTTP authentication is used.

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

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


## Updating a URL

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 `createObjectURL()` static method to generate a blob URL (starts with `blob:` as its schema) that uniquely identify the object in the browser:

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

Once you have the blob URL, pass it to `revokeObjectURL()` static method to remove it from the 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 especially in [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 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}`);
        });
    });
```

---

✌️ I write about **modern JavaScript, Node.js, Spring Boot**, and all things **web development**. [**Subscribe to my newsletter**](https://attacomsian.com/newsletter) to get web development tutorials & protips every week.

---

**Like this article?** [Follow @attacomsian on Twitter](https://twitter.com/attacomsian). You can also follow me on [LinkedIn](https://linkedin.com/in/attacomsian) and [DEV](https://dev.to/attacomsian).