Why encodeURIComponent Is Obsolete: Master URLSearchParams for Safer URLs

For web developers, the encodeURIComponent function is very familiar.

When we need to embed user input or dynamic data into a URL's query parameters, we often write code like this:

const searchTerm = 'Web & APIs / 2025';
const url = `https://api.example.com/search?q=${encodeURIComponent(searchTerm)}`;
// "https://api.example.com/search?q=Web%20%26%20APIs%20%2F%202025"

For years this manual string concatenation and per‑parameter encoding works, but it hides many annoyances and potential risks.

encodeURIComponent

Before the new standard arrives, let’s recall why encodeURIComponent can be painful.

The design of encodeURIComponent encodes almost all non‑alphanumeric characters, including /, ?, :, &, = and other reserved characters that have special meaning in URLs. Applying it to a full URL by mistake can be disastrous.

Building a URL with many parameters often means a lot of string concatenation, manual handling of ? and &, resulting in verbose and error‑prone code.

This also leads to code cluttered with +, ?, & and encodeURIComponent calls, making the logic confusing, hard to read, and difficult to maintain when parameters need to be added or removed.

New Standard Arrives

Modern browsers and Node.js already include a powerful URL handling API that solves all of the above problems in an object‑oriented way. The core objects are URLSearchParams and URL.

1. URLSearchParams : Elegant Query‑Parameter Manager

URLSearchParams

is dedicated to handling the query string (the part after ?). It provides simple, intuitive methods to manipulate parameters.

Forget manual concatenation; you can now do this:

const params = new URLSearchParams();

// Add parameters
params.append('q', 'URL API');
params.append('page', 2);
params.append('user', 'Alice');
params.append('user', 'Bob'); // supports multiple values

console.log(params.get('q')); // "URL API"
console.log(params.getAll('user')); // ["Alice", "Bob"]

// Modify a parameter
params.set('page', 1); // overwrite if exists, add if not

// Delete a parameter
params.delete('page');

// Generate query string
console.log(`https://api.example.com/search?${params.toString()}`);

URLSearchParams

automatically encodes all values correctly and safely. It offers methods such as get, set, append, delete, and has.

It also supports creation from an object:

2. URL Object: Complete URL Control Center

The URL object structures the entire URL, allowing easy reading and modification of any part, such as protocol, hostname, pathname, and especially query parameters.

We can directly modify an existing URL:

const url = new URL('https://example.com/products?page=1&limit=10');
// Modify existing parameter
url.searchParams.set('page', 2);
// Add new parameter
url.searchParams.append('sort', 'price_desc');
// Add a parameter with special characters
url.searchParams.set('query', 't-shirt & shorts');
console.log(url.href);
// "https://example.com/products?page=2&limit=10&sort=price_desc&query=t-shirt+%26+shorts"

Look at that code—so clean and clear!

While encodeURIComponent has been an indispensable low‑level tool in the history of the web, the growing complexity of web applications calls for higher‑level, safer abstractions.

The URL and URLSearchParams APIs were created exactly for this purpose.

The URL API is now part of the web standard and is supported by all modern browsers (Chrome, Firefox, Safari, Edge).

These APIs free us from tedious, error‑prone string manipulation, allowing us to handle URLs in a more structured, logical way, which improves code readability and maintainability while fundamentally eliminating bugs caused by improper encoding.