If you've built anything that touches the web, you've dealt with URL encoding. And if you're honest, you've probably Googled "encodeURI vs encodeURIComponent" at least five times this year. I know I have.

Here's the mental model that finally made it stick for me:

The TL;DR

encodeURI() = "I'm encoding a complete URL" → keeps structural chars like / ? & #

encodeURIComponent() = "I'm encoding ONE piece of data" → encodes EVERYTHING except A-Z a-z 0-9 - _ . ! ~ * ' ( )

When Things Go Wrong

Last week I spent an hour debugging a 500 error from a payment gateway. The culprit? I used encodeURI() on a query parameter that contained a # character. The browser interpreted everything after # as a fragment identifier and never sent it to the server. encodeURIComponent() would have caught it.

The 3 Rules I Now Live By

Query string values → ALWAYS encodeURIComponent() . No exceptions.

Full URLs → encodeURI() , but only if you're sure no component contains special chars.

When in doubt → encodeURIComponent() .…