You might not believe this, but for a long time, we JavaScript developers have been using what feels like Stone Age tools—encodeURIComponent()—to ensure URL query parameters are safe. Does it work? Sure… but it’s never been fun to use.

Picture this: you have to wrap every piece of dynamic data in encodeURIComponent(), manually concatenate strings, and double-check that every & and ? is in the right place. It’s like doing math with an abacus—you can get the answer, but the process is painful.

Fortunately, the modern URL API gives us a cleaner, safer alternative. Let’s dive in!

The Manual Encoding Nightmare

Imagine you’re building a link for a product search page. The traditional approach looks like this:

const keyword = "coffee & cream";
const category = "beverages";

const url =
  "https://shop.example.com/search?query=" +
  encodeURIComponent(keyword) +
  "&cat=" +
  encodeURIComponent(category);

console.log(url);
// "https://shop.example.com/search?query=coffee%20%26%20cream&cat=beverages"

See what’s happening here? This code is like building with Lego blocks—piece by piece, and one wrong move breaks everything. Forget encodeURIComponent() and your URL is toast.

A Cleaner Approach: new URL()

With the modern URL API, we don’t need to worry about encoding details:

const url = new URL("https://shop.example.com/search");
url.searchParams.set("query", "coffee & cream");
url.searchParams.set("cat", "beverages");

console.log(url.toString());
// "https://shop.example.com/search?query=coffee+%26+cream&cat=beverages"

Much cleaner, right? It’s like upgrading from hand-washing clothes to using a washing machine—effortless and efficient.

Why This Approach is Better

Using the URL API has these benefits:

Automatic Encoding → No worries about special characters, the API handles it all More Readable → Code logic is crystal clear, no hunting for bugs in string concatenation Flexibility → Add, update, or remove parameters anytime without rewriting strings Universal Support → Works in modern browsers and Node.js

Beyond Search Queries

You can use this approach for all kinds of dynamic links. For example, building a weather forecast URL with multiple parameters:

const url = new URL("https://api.weather.com/forecast");
url.searchParams.set("city", "Los Angeles");
url.searchParams.set("unit", "imperial");
url.searchParams.set("days", 5);

console.log(url.toString());
// "https://api.weather.com/forecast?city=Los+Angeles&unit=imperial&days=5"

Try doing that with encodeURIComponent()—it would be much longer and harder to read.

What You Can Forget Now

  • Wrapping every value in encodeURIComponent()
  • Concatenating strings with + "&param=" +
  • Worrying about missing separators (? and &)
  • Handling special characters and spaces
  • Debugging URL strings that look like alien code

Final Thoughts

Remember when we transitioned from callbacks to async/await? It’s time to say goodbye to encodeURIComponent().

The URL and URLSearchParams APIs give you a modern, elegant way to build links that are safe, readable, and easy to maintain.

Next time you generate a URL, skip the old tricks and let new URL() handle the complex stuff!

Just like getting a new phone—once you’ve experienced the modern way, you’ll never want to go back to the Stone Age.