Separate structure from values
A URL uses characters such as ?, &, and = as delimiters. If one of those characters appears inside a query parameter value, it needs encoding so it is not mistaken for part of the URL structure.
Value: tea & coffee Encoded: tea%20%26%20coffee URL: https://example.com/search?q=tea%20%26%20coffee
Choose component mode for a value
encodeURIComponent encodes reserved separators and is appropriate for individual query parameter values. encodeURI preserves many URL delimiters and is useful for a complete URL whose structure should remain intact. Neither function validates the destination or makes it trustworthy.
Avoid encoding twice
A percent sign becomes %25 when encoded. If %20 becomes %2520, you probably encoded an already encoded value. Keep raw values separate from serialized URLs and apply encoding at the boundary.
Spaces, plus signs, and malformed escapes
Form-style query encoding may use + for spaces, while encodeURIComponent uses %20. decodeURIComponent does not turn + into a space. In application code, URLSearchParams is often a good fit for assembling form-style query strings. Incomplete escapes and invalid UTF-8 produce decoding errors.