loading...

Don't name your global JavaScript function 'clear'

nikola profile image Nikola Brežnjak ・1 min read

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.

Discussion

pic
Editor guide
Collapse
puritanic profile image
Darkø Tasevski

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 👍

Collapse
nikola profile image
Nikola Brežnjak Author

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.

Collapse
josephthecoder profile image
Joseph Stevens

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

Collapse
nikola profile image
Nikola Brežnjak Author

It does get frustrating, I'll give you that. However, our best option is to embrace it and get around it the best we can 💪

Collapse
josephthecoder profile image
Joseph Stevens

I respect your opinion, but that is absolutely not the best option.
The best option is to make reserved keywords illegal to the compiler/linter.

Aka.
function clear() {...}
Would not compile, or the editor would turn the line red.
At the very least, mark it as a warning.

Collapse
motss profile image
Rong Sen Ng

Also you should avoid naming elements with ID name such as click, clear, etc. The explanation behind it is the same.

Collapse
nabbisen profile image
Heddi Nabbisen

Intersting.
Thank you for your sharing 🙂

Collapse
nikola profile image
Nikola Brežnjak Author

You're welcome 👍

Collapse
maciekbaron profile image
🚩bezet@mastodon.social

You should never need to define a function in the global scope, ever, unless you have a very specific need. This is really, really bad practice.