Is "clear" a reserved word in Javascript?

Question

I just spent a long time figuring out that I shouldn't use clear() as the name of a function in Javascript:

<head>
    <script type="text/javascript" src="Array.js"></script>
</head>
<body>
    Hello!!!!<br>
    <button type="button" onClick="clear()" id="ppp">Shoo!</button><br>
    <button type="button" onClick="add()" id="add">Add a few elements</button><br>
    <button type="button" onClick="check()" id="check">Check the array</button><br>
    <p id="results">Results will appear here.</p>
    <script type="text/javascript">
initialize();
    </script>
</body>

Here's Array.js:

var results;

function initialize(){
 results = document.getElementById("results");
}

function add() {
results.firstChild.data="add";    
}

function clear() {
results.firstChild.data = "Hello?";
}

function check() {
results.firstChild.data = "check";
}

Symptoms: Clicking the 'add' and 'check' buttons gives me the result I expect, but clicking the 'clear' button does nothing.

If I rename clear() to clearxyz(), it works fine.

My questions:

Is "clear" a reserved word? I don't see it on the list: https://developer.mozilla.org/en/JavaScript/Reference/Reserved_Words
Is there a debugging trick I should be using to figure this kind of thing out in the future? It took me a long time (I'm a noob!) to figure out that the name of the function was my problem.

Many thanks. Edit: I'm using Firefox 6.0, and I added a line break to show where Array.js starts.

Do you mean this? http://www.roseindia.net/javascript/javascript-clear-method.shtml — Robert Harvey, Aug 23 '11 at 18:11
@Robert, shouldn't I get some kind of error if I try to create a new function with a name that's already taken? — Uncle Vinny, Aug 23 '11 at 18:19
@Uncle Vinny: No error would be produced. Javascript allows you to shadow variables with other variables. — Conspicuous Compiler, Aug 23 '11 at 18:25
I guess I need to read more about how shadowing works. It's seems to me (again, as a noob) that calling clear() is ambiguous; how does Javascript know/decide to call selection.clear() instead of "my" clear()? — Uncle Vinny, Aug 23 '11 at 18:36
it's an [unsafe name](http://jibbering.com/faq/names/unsafe_names.html). — Bergi, Aug 19 '15 at 12:32

Felix Kling · Accepted Answer · 2011-08-23T19:28:46.263

As the others said, clear is not a reserved keyword. It seems that the called function is document.clear ^[MDN]. Invoking

console.log(clear === document.clear);

inside the event handler returns true.

DEMO

So it seems, document is in the scope chain of the event handler.... the question now is why.

JavaScript: The Definitive Guide says:

In an event handler as HTML attribute, the Document object is in the scope chain before the Window object (...)

As your method is global, meaning it is a property of the window object, it is not found in the scope chain, as document.clear comes earlier in the scope chain.

I haven't found any specification for this. The guide also says that one should not rely on that, so I assume this is nothing official.

If you have form elements inside a form, then even the corresponding form element will be in the scope chain (not sure whether this holds for all browsers though). This is another reason for confusion.

There are two (not exclusive) ways to avoid such situations:

Don't use inline event handlers. It is considered bad practice as it is mixing logic and presentation. There are other ways to attach event handlers.
Don't pollute the global namespace. Create one object in global scope (with a name you are sure of does not collide with any window or document properties or ids of HTML elements) and assign the functions as properties of this object. Whenever you call a function, you reference it through this object. There also other ways to namespace your code.

@patrickdw: Thanks... you actually gave me the hint by mentioning it in a comment... I feel a bit that I stole your idea ;) — Felix Kling, Aug 23 '11 at 18:50
Oh, you'll be receiving my bill shortly. ;) I was actually just about to post an `arguments.callee === document.clear` answer, but then I saw yours, and you had the scope explanation as well, so I'd say you hit it out of the park. — user113716, Aug 23 '11 at 18:54
...Interesting that you can eliminate `document.` from calls like `getElementById` when inline. — user113716, Aug 23 '11 at 18:55
While using a dynamically added listener fixes the OPs problem, it's also important to point out that care must be taken with function names. The window object has a large number of default properties, so global functions with general names like "clear", "add" and "check" are far more likely to clash than ones with more specific names like "clearForm" or "clearInput" (or whatever the actual purpose of the function is). Used in conjunction with a suitable "namespace" or prefix, the chance of a collision can be reduced to near zero. — RobG, Jul 19 '13 at 23:25

score 6 · Answer 2 · edited May 23 '17 at 11:47

No, clear is not a reserved keyword.

The problem is that, since you use an event handler content attribute, your global function window.clear is shadowed by the obsolete document.clear.

This behavior is explained in step 10 of getting the current value of the event handler:

Lexical Environment Scope

If H is an element's event handler, then let Scope be the result of NewObjectEnvironment(document, the global environment).

Otherwise, H is a Window object's event handler: let Scope be the global environment.

If form owner is not null, let Scope be the result of NewObjectEnvironment(form owner, Scope).

If element is not null, let Scope be the result of NewObjectEnvironment(element, Scope).

Note: NewObjectEnvironment() is defined in ECMAScript edition 5 section 10.2.2.3 NewObjectEnvironment (O, E)

That means that the global scope is shadowed by

The document
The form owner, if any
The element

Therefore, you can

Rename your function.
```
function clear__() { document.body.style.background = 'green'; }
```
```
<button type="button" onclick="clear__()">Click me</button>
```
This approach is not completely reliable because some browser could implement a non-standard feature which shadows your variables. Or a future spec could introduce that feature (example).

Call your function as a method of the global object.

For example, assuming window is not shadowed, you can use window.clear.

function clear() { document.body.style.background = 'green'; }

<button type="button" onclick="window.clear()">Click me</button>

Avoid event handler content attributes.

Instead, you can use event handler IDL attributes or event listeners.

function clear() { document.body.style.background = 'green'; }
document.querySelector('button').onclick = clear;

<button type="button">Click me</button>

function clear() { document.body.style.background = 'green'; }
document.querySelector('button').addEventListener('click', clear);

<button type="button">Click me</button>

score 3 · Answer 3 · edited Aug 23 '11 at 18:21

3

Not according to the MDN.

Edit:

You got me curious, so I threw together this little jsfiddle.

function clear() {
    alert("you cleared just fine");
}

$('clear').addEvent('click', clear);

Having a function named clear seems to work just fine.

edited Aug 23 '11 at 18:21

Robert Harvey

178,213
47
333
501

answered Aug 23 '11 at 18:11

Jonathan Beebe

5,241
3
36
42

3

Yep, that's the page linked to by the OP in his question. – Robert Harvey Aug 23 '11 at 18:13
haha...yeah. Somehow I missed that the 1st time through the question. – Jonathan Beebe Aug 23 '11 at 18:14
4

Your jsfiddle is different. It attaches an event handler by passing a reference to a function. The issue is that the OP is using an inline event handler, which has a certain scope chain and we have to find out which. – Felix Kling Aug 23 '11 at 18:21

score 3 · Answer 4 · answered Aug 23 '11 at 18:33

Good question. I think the problem is a scoping issue - your onClick="clear()" is not going to the clear function you defined, but I'm not sure where it's going. Changing it to window.clear() or a new function that simply calls your clear works.

<body>
    Hello!!!!<br>
    <button type="button" onClick="clear()" id="ppp">Shoo!</button><br>
    <button type="button" onClick="window.clear()" id="ppp">window.clear!</button><br>
    <button type="button" onClick="clear2()" id="ppp">clear2!</button><br>
    <button type="button" onClick="add()" id="add">Add a few elements</button><br>
    <button type="button" onClick="check()" id="check">Check the array</button><br>
    <p id="results">Results will appear here.</p>
    <script type="text/javascript">
    var results;

function initialize(){
 results = document.getElementById("results");
}

function add() {
results.firstChild.data="add";    
}

function clear() {
results.firstChild.data = "Hello";
}

function clear2() {
clear();
}

function check() {
results.firstChild.data = "check";
}
initialize();
    </script>
</body>

This is helpful, in an aggravating/bewildering kind of way. I need to learn more about scope, too, I guess! I'd still like to find a way to avoid this problem in the future with other reserved words. — Uncle Vinny, Aug 23 '11 at 18:41
@Uncle: `clear` is not a reserved keyword. It is a scope problem. — Felix Kling, Aug 23 '11 at 18:42

Is "clear" a reserved word in Javascript?

4 Answers4

Linked

Related