Don't name your global JavaScript function 'clear'

#javascript #functions

Originally posted on my blog

TL;DR

Same as the title, don't name your global JavaScript function clear.

TL;DR

I learned the hard way not to use clear as the name for my global JavaScript function.

Given the example below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test 1</title>

    <script>
        function clear() {
            document.getElementById('result').innerHTML = '';
        }
    </script>
</head>

<body>
    <button id="clear" onclick="clear()">Clear</button>
    <div id="result">Testing</div>
</body>

</html>

and clicking the Clear button, the Testing text will just not be removed.

I found this very cool StackOverflow explanation of why is that. The gist of it is that this way the document.clear function is being called, and simply renaming it to something like clearResult works fine.

Top comments (9)

Darkø Tasevski • Mar 29 '19 • Edited

Or just don't put anything in the global scope at all 🙂 But if you must do it, just prefix your variable/function name with something unique., like so:

function GLOBAL_FN__clear() {
            document.getElementById('result').innerHTML = '';
}

Interesting post tho 👍

Nikola Brežnjak • Mar 29 '19

Yes, I definitely agree, and thanks for the tip. I came across this, and wanted to share as at first I was puzzled with what's happening :), and it surely can help beginners.

Joseph Stevens • Mar 31 '19

Arghh, that isn't okay! That is not okay. I know a bunch of other tools and languages have the same issue of reserved keywords.
But like, a lot a lot of at least throw a warning! Not just...
Shrug, I'll just do nothing. You need to learn my super duper interesting scoping mechanics! Gah. I've been doing JavaScript for like 8 years now, I am so tired of learning new things and surprising JavaScript mechanics