What URL encoding is
A URL can only contain a limited set of safe characters: letters, digits, and a few symbols like "-", "_", "." and "~". Any other character, such as spaces, accented letters, emoji or special symbols, needs to be converted into a sequence in the format "%XX", where XX is the character's hexadecimal code. This process is called percent-encoding, or URL encoding.
Component vs full URL: what's the difference
Component encoding, using encodeURIComponent in JavaScript, escapes nearly every special character, including the ones that give structure to a URL, like ":", "/", "?", "&" and "=". This is the correct behavior when you are building the value of a single parameter that goes inside a query string. Full URL encoding, using encodeURI, preserves those structural characters, since in that mode they still serve a function within the full address, and only escapes the characters that are genuinely unsafe, such as spaces and accented letters.
Worked example
Encoding the text "café & rock/pop" as a component escapes even the slash and the "&", producing something like "caf%C3%A9%20%26%20rock%2Fpop". Encoding the full URL "https://example.com/search?q=café" instead preserves the slashes and the question mark, escaping only the accented "é", which keeps the URL functional as an address.
When to use each encoding mode
Use component encoding whenever you are building the value of an individual parameter that will be inserted into a query string, for example when manually assembling a search link with a term typed by a user. Use full URL encoding when you need to encode an entire address that already has its structure in place, preserving slashes, colons and question marks, and fixing only the characters that are not safe inside a URL.
Decoding URLs
Decoding reverses the process, turning the "%XX" sequences back into the original characters. It's common to need to decode a URL to read the actual value of a parameter captured in an access log, or to debug a link that isn't working as expected.