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() .…