Difference between decodeURIComponent() and decodeURI() functions in JavaScript

Both decodeURI() and decodeURIComponent() are Javascript global functions that are used for decoding encoded URI (Uniform Resource Identifier). 

JavaScript decodeURI() function: It decodes a string previously encoded by the encodeURI() function. It returns a decoded URI by replacing each UTF-8 escape sequence with the characters it represents.

Syntax: 

decodeURI(encodeURI(x));

Parameters: It contains a single parameter that includes a string previously encoded by the encodeURI() function and hence result will be x again.

Example: This example uses decodeURI() function. 

<script type="text/javascript">
    var decodeText1 = decodeURI('http://www.testing.com/');
    console.log(decodeText1);
    var decodeText2 = decodeURI('https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fwww.testing.com%2F');
    console.log(decodeText2);
</script>

Output: 

http://www.testing.com/
https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fwww.testing.com%2F

JavaScript decodeURIComponent() function: It decodes a string previously encoded by the encodeURIComponent() function. It returns a decoded URI Component by replacing each UTF-8 escape sequence with the characters it represents. It can decode any value between %00 and %7F. 

Syntax: 

decodeURIComponent(encodeURIComponent(x));

Parameters: Single parameter that includes a string previously encoded by encodeURIComponent() and hence result will be x again.

Example: This example is on decodeURIComponent() 

<script type="text/javascript">
    var decodeText1 = decodeURIComponent(
                    'http://www.testing.com/');
    console.log(decodeText1);
    
    var decodeText2 = decodeURIComponent(
            'https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fwww.testing.com%2F');
    console.log(decodeText2);
</script>

Output: 

http://www.testing.com/
http://www.testing.com/

Note:Both functions throw URIError indicating that one or more of the escape sequences in string is malformed and cannot be correctly decoded.
Difference between decodeURIComponent() and decodeURI() Function: 

• decodeURI(): It takes encodeURI(url) string so it cannot decoded characters (, / ? : @ & = + $ #)
• decodeURIComponent(): It takes encodeURIComponent(url) string so it can decode these characters.
   
• decodeURI(): It takes encodeURI(url) string as parameter and returns the decoded string.
• decodeURIComponent(): It takes encodeURIComponent(url) string as parameter and returns the decoded string.
• decodeURI("%41"): It returns "A"
• decodeURIComponent("%41") It returns "A"
• decodeURI("%26"): It returns "%26"
• decodeURIComponent("%26"): It returns "&"