How do I append a query parameter to my URL using Javascript?

Appending query parameters to a URL in JavaScript is a common operation, typically used to send additional data to the server or pass information between different pages. There are multiple ways to achieve this functionality; here are a few methods:

Method 1: Manual String Concatenation

This method is suitable for simple scenarios where we can directly add query parameters using string manipulation.

javascript
function addQueryParam(url, param, value) {
    const separator = url.includes('?') ? '&' : '?';
    return `${url}${separator}${param}=${encodeURIComponent(value)}`;
}

// Example
const baseUrl = "http://example.com";
const updatedUrl = addQueryParam(baseUrl, "user", "john");
console.log(updatedUrl);  // Output: http://example.com?user=john

In this example, we check whether the URL already contains query parameters (by verifying the presence of ?), then select the appropriate separator (? or &), and finally append the new query parameter to the URL's end.

Method 2: Using URLSearchParams

URLSearchParams is a built-in Web API designed for handling query strings in URLs. This API simplifies adding, modifying, or deleting query parameters.

javascript
function addQueryParam(url, param, value) {
    const urlObj = new URL(url);
    urlObj.searchParams.append(param, value);
    return urlObj.toString();
}

// Example
const baseUrl = "http://example.com";
const updatedUrl = addQueryParam(baseUrl, "user", "john");
console.log(updatedUrl);  // Output: http://example.com?user=john

Here, we create a URL object and use searchParams.append() to add the new query parameter. The advantage is that the code is concise and automatically handles character encoding and complex query structures.

Method 3: Handling Multiple Query Parameters

When adding multiple query parameters at once, you can extend the previous method to accept a parameter object.

javascript
function addQueryParams(url, params) {
    const urlObj = new URL(url);
    Object.keys(params).forEach(key => {
        urlObj.searchParams.append(key, params[key]);
    });
    return urlObj.toString();
}

// Example
const baseUrl = "http://example.com";
const params = { user: "john", age: 30 };
const updatedUrl = addQueryParams(baseUrl, params);
console.log(updatedUrl);  // Output: http://example.com?user=john&age=30

This approach efficiently manages multiple parameters, making the code more versatile and adaptable.

Summary

JavaScript offers several approaches for handling query parameters in URLs, and the choice depends on specific requirements and context. Using URLSearchParams is generally more modern and convenient, especially for complex query strings. Manual string concatenation remains straightforward and efficient for simple cases.