Working with URL parameters in JavaScript
Tags: programming, javascript, webdev
Published: 2023-01-19 20:47:55

---
title: Working with URL parameters in JavaScript
published: true
date: 2023-01-10 21:43:54 UTC
tags: Programming,JavaScript,WebDevelopment
canonical_url: https://livecodestream.dev/post/working-with-url-parameters-in-javascript/
---

 ![Live Code Stream](https://livecodestream.dev/post/working-with-url-parameters-in-javascript/featured_huc994e921612493fc973a3e15e9e74ad8_177623_600x0_resize_q90_h2_lanczos.webp)

URL parameters are information sent to a web server along with the URL when a user accesses it. They could include a specific page or resource requested, search queries, data from forms, and more.

By sending this additional information in the URL, the server can respond with customized content particular to that request. For example, a query like “?product=shoes” might display different content than “?product=hats”.

JavaScript, the programming language for browsers and all things web, provides `URLSearchParams`, a rich API for us to work with URL parameters; it’s convenient and easy to use, so let’s get right into it.

* * *

## What Is URLSearchParams? [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#what-is-urlsearchparams)

The best way to retrieve URL parameters using JavaScript is using the `URLSearchParams` API. This API provides an interface for retrieving and manipulating query strings (URL parameters) in a simple, consistent manner across modern browsers and even for NodeJS.

One important aspect to highlight is that `URLSearchParams` works with strings. If you want to capture the query parameters from the browser, you can use the `window.location.search` property.

* * *

## Getting a Single URL Parameter [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#getting-a-single-url-parameter)

The first way we can retrieve a single URL parameter using `URLSearchParams` is by using the get() function. This function takes in one argument, which is the key for the parameter you want to retrieve and returns its corresponding value as a string.

To illustrate this, let’s take an example with a query string:

```
// const queryString = window.location.search;
const queryString = '?page=5&sort=name&test=true';
const urlParams = new URLSearchParams(queryString);

urlParams.get('page'); // outputs: 5
urlParams.get('sort'); // outputs: name
urlParams.get('page_size'); // outputs: null

```

> Note that in our previous example, we hardcoded the values for the query string, but if you want to capture that from the browser, you can use the property `window.location.search`.

Additionally, you could have instances of an URL where the same key would be present more than once. In those cases, the `get()` function will return only the first value, but what if we want all? For that, we can use the `getAll()` method.

```
const queryString = '?page=5&sort=name&sort=age';
const urlParams = new URLSearchParams(queryString);

urlParams.get('sort'); // Outputs: 'name'
urlParams.getAll('sort'); // Outputs: ['name', 'age']

```

* * *

## Checking if a Query Parameter Exists [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#checking-if-a-query-parameter-exists)

In the previous section, we noticed that when using `get()` on a value that is not present on the URL parameters, the result is `null`, and even though we could use that to check if the parameter exists, it is not the cleanest way. The `URLSearchParams` object contains a method for exactly this purpose: `has()`.

Let’s see it in action:

```
const queryString = '?page=5&sort=name&test=true&empty=';
const urlParams = new URLSearchParams(queryString);

urlParams.has('page'); // Output: true
urlParams.has('empty'); // Output: true
urlParams.has('not_there'); // Output: false

```

* * *

## Iterating over All URL Parameters [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#iterating-over-all-url-parameters)

In some cases, most likely for debugging or testing purposes, you might want to loop through all the URL parameters you have. For that purpose, `URLSearchParams` provides us with two helpful methods: `keys()` and `entries()`, though as we’ll see, there’s even a more direct way.

Let’s jump into the code:

```
const queryString = '?page=5&sort=name&sort=age&test=true';
const urlParams = new URLSearchParams(queryString);

for (const [key, value] of urlParams) {
  console.log(key, value);
}

// Output:
// page 5
// sort name
// sort age
// test true

```

Alternatively, to get an iterator we can use `entries()`, which for this scenario will produce the exact same behavior as before:

```
for (const [key, value] of urlParams.entries()) {
  console.log(key, value);
}

```

Lastly, if we only need the query string parameters keys, we can use the `keys()` method.

```
const queryString = '?page=5&sort=name&sort=age&test=true';
urlParams = new URLSearchParams(queryString);

for (const key of urlParams.keys()) {
  console.log(key);
}

// Output:
// page
// sort
// sort
// test

```

Lastly, if we only need all the values, we can use `.values()`, like with any other iterator object in JavaScript.

* * *

## Bonus: Manipulating Query String Parameters [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#bonus-manipulating-query-string-parameters)

Besides just retrieving, we can also add, update and delete URL parameters.

### Appending query parameters [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#appending-query-parameters)

Adding a new query parameter is done through the `append()` method, which takes in two arguments: the first one is the key, and the second one is its associated value.

```
const queryString = '?page=5';
const urlParams = new URLSearchParams(queryString);

urlParams.append('format', 'json');

console.log(urlParams.toString()); // Outputs: 'page=5&format=json'

```

### Updating query parameters [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#updating-query-parameters)

To change the value of a given query string parameter, you can use the method `set()`.

```
const queryString = '?page=5&format=xml&sort=name&sort=age';
const urlParams = new URLSearchParams(queryString);

urlParams.set('page', '1');
urlParams.set('sort', 'gender');

console.log(urlParams.toString()); // Output: 'page=1&format=xml&sort=gender'

```

### Deleting query parameters [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#deleting-query-parameters)

In cases when you need to remove or delete a URL parameter, you can use the `delete()` method.

```
const queryString = '?page=5&format=xml';
const urlParams = new URLSearchParams(queryString);

urlParams.delete('page')

console.log(urlParams.toString()); // Outputs: 'format=xml'

```

> Note that when you have more than one value and you use the method `set()`, it will only keep the new value, discarding all the rest.

* * *

## General Compatibility [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#general-compatibility)

In the past, developers had to code their own functions or use polyfills to have this functionality available. However, nowadays, compatibility is fantastic, and you won’t likely need anything other than `URLSearchParams`.

<script src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/public/caniuse-embed.min.js"></script>

Data on support for the mdn-api\_\_URLSearchParams feature across the major browsers

On top of that, the API is also available on NodeJS.

* * *

## In Case You Missed It: How to Get the Current URL Using JavaScript? [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#in-case-you-missed-it-how-to-get-the-current-url-using-javascript)

Sometimes, you might need to get the current URL and read or manipulate the query parameters.

For that, you’d have multiple options depending on your platform, but if you are in a browser, you can simply access the current URL’s query string by doing the following:

```
const queryString = window.location.search;

```

On NodeJS, capturing the query parameters will depend on the framework, though most frameworks would parse this information automatically for you.

Thanks for reading!

[Subscribe to my weekly newsletter](https://livecodestream.dev/newsletter/) for developers and builders and get a weekly email with relevant content.