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)
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:
Interesting post tho 👍
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.
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
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 💪
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.
Also you should avoid naming elements with ID name such as
click,clear, etc. The explanation behind it is the same.Intersting.
Thank you for your sharing 🙂
You're welcome 👍
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.