JavaScript URLSearchParams

What you will practice

• Read values from a query string.
• Update query parameters safely.
• Generate a new URL with encoded parameters.

What this means

A query string is the part of a URL after the question mark. It often stores filters, search terms, page numbers, tracking tags, or settings.

`URLSearchParams` is a browser API that helps read and write query parameters without manually splitting strings.

It also handles URL encoding, so spaces and special characters become safe inside a URL.

Mini glossary

Query string

The part of a URL after `?`.

Parameter

A key-value pair inside a query string.

Encoding

Converting unsafe URL characters into a safe URL form.

How it works step by step

1. The code creates a URL object from a full URL.
2. `url.searchParams.get("q")` reads the search query.
3. `set` updates the page number and adds a new source parameter.
4. `url.toString()` prints the updated URL with encoded values.

Where you will use this

• A search page stores the current query in the URL.
• A product list stores category and page filters in query parameters.
• A marketing link builder adds UTM parameters safely.

Before you run the code

Avoid building query strings by hand when values may contain spaces, symbols, or non-English characters.

Use URL and URLSearchParams so the browser handles encoding details for you.

Common beginner mistakes

• Building query strings by hand and forgetting URL encoding.
• Forgetting that values read from URLSearchParams are strings.
• Assuming a parameter always exists without checking for null.

Try changing this next

• Change `q=json` to `q=base64`.
• Add another parameter with `set`.
• Use `delete("page")` and print the URL again.