can someone tell me the why we need decodeURIComponent

I have this piece of code that I couldn't find any explanation for. When I googled decodeURIComponent it said it is the reverse of encodeURIComponent, however, I can't find encodeURIComponent anywhere in my code.

getParameterByName = (name, url) => {
    if (!url)
       url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`),
    results = regex.exec(url);
    if (!results)
        return null;
    if (!results[2])
        return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

this is the URL http://localhost:8000/restaurant.html?id=2

So, could someone explain this code for me.

As defined in the RFC 3986, URIs can only contain the characters -_.~a-zA-Z0-9 and :/?#[]@!$&'()*+,;=, where the latter group has some special meaning. By restricting to these characters, URLs are clearly delimited (usually by a space or newline) and survive through proxies and other services that have trouble handling non-ASCII characters.

If you fill in a GET form, the user input will be encoded. For instance, if you google for Hellö Lädies&Gentlemen+Bob, the browser will request

https://www.google.com/search?q=Hell%C3%B6+L%C3%A4dies%26Gentlemen%2BBob

You see that all non-ASCII characters and the ampersand(&) have been encoded with a percent signs and the hexadecimal representation of the characters in UTF-8 encoding.

The space character is handled differently; since it is very common in user input it got assigned the shorter character +. That means + has to be percent-encoded as well, as %2B.

The code you have extracts the GET parameter name from the URL. If it is there, the final line

return decodeURIComponent(results[2].replace(/\+/g, ' '));

first undoes the encoding of spaces as +.

decodeURIComponent is then used to get the value of the name parameter. For instance, if the user inputted a name of name of René Müller&勒内穆勒, the browser will send name=Ren%C3%A9+M%C3%BCller%26%E5%8B%92%E5%86%85%E7%A9%86%E5%8B%92, and decodeURIComponent will yield the original input (try it yourself):

> decodeURIComponent('Ren%C3%A9 M%C3%BCller%26%E5%8B%92%E5%86%85%E7%A9%86%E5%8B%92')
'René Müller&勒内穆勒'