2026-04-278 min read

Query String Converter (JavaScript)

Learn Query String Converter (JavaScript) step by step with clear examples and exercises.

Why This Matters

Query strings are an essential part of URLs in web development, allowing us to pass data between pages and maintain state across multiple requests. In this lesson, we will learn how to convert query strings into JavaScript objects and vice versa using JavaScript. Understanding this skill is valuable for handling complex data efficiently in web applications, as well as preparing for exams or interviews that may require knowledge of query string manipulation.

The Importance of Query Strings

Query strings enable the seamless transmission of data from one page to another within a web application. They allow developers to create dynamic content that adapts based on user input or other factors. By using query strings effectively, you can make your applications more responsive and user-friendly.

Prerequisites

To understand this lesson, you should be familiar with the following concepts:

Basic JavaScript concepts, including variables, functions, and arrays
Understanding of URLs and how to manipulate them using various methods
Familiarity with the encodeURIComponent() function for URL encoding/decoding

Encoding and Decoding Query Strings

Encoding Query Strings

To encode a JavaScript object into a query string, we can loop through the object and append each key-value pair to the query string using the encodeURIComponent() function:

function encodeQueryString(obj) {
let queryString = '';
for (let key in obj) {
if (queryString !== '') {
queryString += '&';
}
queryString += `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`;
}
return queryString.substring(1);
}

In this example, we define a encodeQueryString() function that takes an object as input and returns the encoded query string. We loop through the object, URL-encoding each key and value before appending them to the query string with an ampersand (&) separator. The function then removes the initial ampersand from the resulting query string.

Decoding Query Strings

To decode a query string into a JavaScript object, we can use the URLSearchParams API:

function decodeQueryString(queryString) {
let params = new URLSearchParams(queryString);
let obj = {};
for (let param of params.entries()) {
obj[param[0]] = param[1];
}
return obj;
}

In this example, we define a decodeQueryString() function that takes a query string as input and returns the corresponding JavaScript object. We create a new URLSearchParams object with the provided query string and loop through its entries, adding each key-value pair to the resulting object.

Working with Complex Query Strings

When dealing with complex query strings that contain multiple key-value pairs, it's useful to loop through the URLSearchParams object and process each pair individually:

let url = 'http://example.com/?name=John&age=30&city=New%20York';
let params = new URLSearchParams(url);
params.forEach((value, key) => {
console.log(`${key}: ${value}`);
});

In this example, we create a new URLSearchParams object with the provided URL and loop through its entries using the forEach() method, logging each key-value pair to the console.

Building a Query String Converter Function

Let's create a function called queryStringConverter that can both encode and decode query strings:

function queryStringConverter(input, action = 'decode') {
if (action === 'encode') {
return encodeQueryString(input);
} else if (action === 'decode') {
return decodeQueryString(input.toString());
}
}

In this example, we define a queryStringConverter() function that takes an input string or object and an optional action parameter (defaulting to 'decode'). If the action is 'encode', it calls the encodeQueryString() function with the provided input. If the action is 'decode', it calls the decodeQueryString() function with the query string obtained by converting the input to a string using the toString() method.

Core Concept

In this section, we will explore various techniques for manipulating query strings in JavaScript.

Adding and Removing Parameters

To add a new parameter to a query string, you can create a new object with the desired key-value pair and call queryStringConverter() with the 'encode' action:

let data = { name: 'John', age: 30, city: 'New York' };
let encodedQueryString = queryStringConverter(data);
console.log(encodedQueryString); // name=John&age=30&city=New%20York

let updatedData = { ...data, job: 'Developer' };
let updatedEncodedQueryString = queryStringConverter(updatedData, 'encode');
console.log(updatedEncodedQueryString); // name=John&age=30&city=New%20York&job=Developer

To remove a parameter from a query string, you can create a new object without the unwanted key-value pair and call queryStringConverter() with the 'encode' action:

let data = { name: 'John', age: 30, city: 'New York' };
let encodedQueryString = queryStringConverter(data);
console.log(encodedQueryString); // name=John&age=30&city=New%20York

let updatedData = { ...data, city: undefined };
let updatedEncodedQueryString = queryStringConverter(updatedData, 'encode');
console.log(updatedEncodedQueryString); // name=John&age=30

Merging Query Strings

To merge two query strings, you can concatenate them with an ampersand (&) separator and then decode the resulting string into a JavaScript object:

let queryString1 = 'name=John&age=30';
let queryString2 = 'city=New York';
let mergedQueryString = `${queryString1}&${queryString2}`;
let mergedData = decodeQueryString(mergedQueryString);
console.log(mergedData); // { name: 'John', age: 30, city: 'New York' }

Checking for the Presence of a Parameter

To check if a specific key-value pair exists in a query string, you can create a new URLSearchParams object with the provided query string and use the has() method:

let url = 'http://example.com/?name=John&age=30';
let params = new URLSearchParams(url);
console.log(params.has('name')); // true
console.log(params.has('job')); // false

Worked Example

Let's use our queryStringConverter() function to encode and decode a sample query string:

let data = { name: 'John', age: 30, city: 'New York' };
let encodedQueryString = queryStringConverter(data);
console.log(encodedQueryString); // name=John&age=30&city=New%20York

let decodedData = queryStringConverter(encodedQueryString);
console.log(decodedData); // { name: 'John', age: 30, city: 'New York' }

In this example, we first create a JavaScript object containing some data. We then use the queryStringConverter() function to encode this data into a query string. After that, we decode the query string back into a JavaScript object using the same function.

Common Mistakes

Forgetting to URL-encode values before appending them to the query string: Always ensure that any non-alphanumeric characters in your values are properly URL-encoded using encodeURIComponent().
Not handling empty key-value pairs: If a key has no value, it will still be included in the query string as an empty string (&key=). To avoid this issue, check if a key exists before appending it to the query string or JavaScript object.
Confusing keys and values when looping through URLSearchParams: When looping through the URLSearchParams object, remember that the first argument is the value, and the second argument is the key.
Not properly handling special characters in keys or values: Some characters (e.g., spaces) require URL-encoding when included in a query string. Make sure to handle these cases appropriately.
Forgetting to convert JavaScript objects back into query strings: If you need to convert a JavaScript object back into a query string, use the queryStringConverter() function with the 'encode' action.
Not properly handling URL-encoded characters when decoding query strings: When decoding query strings, ensure that any percent-encoded characters are correctly handled to avoid potential security issues or unexpected behavior.
Using outdated methods for parsing query strings: While traditional methods such as splitting the query string by the & symbol and then processing each pair manually can work, they may not handle edge cases correctly. It's recommended to use modern techniques like URLSearchParams.
Not properly handling case sensitivity in keys: Query strings are case-sensitive, so it's important to ensure that key names match exactly when encoding and decoding query strings.
Forgetting to handle arrays of values for a single key: If a key has multiple values, they should be separated by the & symbol in the query string. To handle this case, loop through the array and append each value individually when encoding the query string or merge the values into an array when decoding the query string.
Not properly handling query strings with no parameters: If a URL has no parameters (i.e., only the domain name), it should be treated as an empty object when decoded using the queryStringConverter() function.

Practice Questions

Write a function that converts a JavaScript object into a query string using the queryStringConverter() function.
Given the following JavaScript object: { name: 'John', age: 30, city: 'New York' }, create a query string for it using your function from question 1 and the queryStringConverter() function.
What happens if you append an empty key-value pair to a query string? How can you avoid this issue in your code?
Write a JavaScript function that takes a URL as input, extracts the query string, and returns an object containing all key-value pairs using the queryStringConverter() function.
Given the following URL: http://example.com/?name=John&age=30&city=New%20York, write code to loop through the query string and log each key-value pair to the console using the queryStringConverter() function.
Write a JavaScript function that takes an array of objects as input, converts each object into a query string, concatenates them with an ampersand (&) separator, and returns the resulting query string.
Given the following URL: http://example.com/?name=John&age=30&city=New%20York, write code to check if a specific key-value pair exists in the query string using the queryStringConverter() function.
Write a JavaScript function that takes a query string as input, removes a specific key-value pair from it, and returns the updated query string.
Given the following URL: http://example.com/?name=John&age=30&city=New%20York, write code to merge two JavaScript objects ({ job: 'Developer' } and { salary: 60000 }) into a new object that includes all key-value pairs from both the original query string and the provided objects, using the queryStringConverter() function.
Write a JavaScript function that takes a JavaScript object as input, encodes it into a query string, appends it to a base URL (e.g., http://example.com/?), and returns the resulting full URL.

FAQ

Why is it important to use URLSearchParams instead of manually parsing query strings? Using URLSearchParams ensures that your code handles edge cases correctly, such as handling empty values, properly encoding special characters, and dealing with multiple key-value pairs. It also makes your code more readable and maintainable.
How can I handle keys with special characters in my query string? To handle keys with special characters, ensure that they are URL-encoded before appending them to the query string or when decoding the query string using URLSearchParams.
Can I use other methods to parse query strings besides URLSearchParams? Yes, there are other ways to parse query strings in JavaScript, such as splitting the query string by the & symbol and then processing each pair manually. However, using URLSearchParams is recommended for its ease of use and built-in support for handling edge cases.
What happens if I append an empty key-value pair to my query string? If you append an empty key-value