Why this js code works?

Question

if (!wysiwyg_toolbarButtons) {
    var wysiwyg_toolbarButtons = new Array(
        //command, display name, value, title, prompt/function, default text
        ["bold", "Strong", WYSIWYG_VALUE_NONE, "Give text strength"],
        ["italic", "Emphasis", WYSIWYG_VALUE_NONE, "Give text emphasis"],
        ["createlink", "Link", WYSIWYG_VALUE_PROMPT, "Create a hyperlink", "Enter the URL:", "http://"],
        ["unlink", "Unlink", WYSIWYG_VALUE_NONE, "Remove hyperlink"],
        ["insertimage", "Image", WYSIWYG_VALUE_PROMPT, "Insert an image", "Enter the URL of the image:", "http://"],
        ["inserthorizontalrule", "Rule", WYSIWYG_VALUE_NONE, "Insert horizontal rule"],
        ["div"], // place a toolbar divider
        ["formatblock", "Headling 1", "<H1>", "Make top level heading"],
        ["formatblock", "Headling 2", "<H2>", "Make 2nd level heading"],
        ["formatblock", "Headling 3", "<H3>", "Make 3rd level heading"],
        ["formatblock", "Paragraph", "<P>", "Make a paragraph"],
        ["formatblock", "Monospace", "<PRE>", "Make paragraph monospaced text"],
        ["insertunorderedlist", "List", null, "Make an unordered list"],
        ["insertorderedlist", "Ordered List", null, "Make an ordered list"],
        ["div"], // place a toolbar divider
        ["toggleview", "Source", "Compose", "Switch views"]
    );
}

It's from this file，with a demo here

My problem is:why doesn't it report "ReferenceError: wysiwyg_toolbarButtons is not defined"?

Answer 1

JavaScript in the web browser searches attributes in the window object. Accessing an unknown attribute does not throw an error, so in fact it is evaluated as something like this:

if( !window.wysiwyg_toolbarButtons ) { }

Try if( !wtf ) { alert('error'); } and if( !window.wtf ) { alert('no error'); } in the Firebug Console.

EDIT

Currently the console in firebug evals the code using with( window ) { ..console..code.. }. But the "with" statement is tricky, example:

>>> alert(location);
= eval( "with( window ) { alert(location); }" );
OK, "location" attribute found in window

>>> alert(wtf);
= eval( "with( window ) { alert(wtf); }" );
ERROR, "wtf" not found in window, and not in global scope, throws ReferenceError

The implicit window object in the browser behaves differently than as it would be used with the "with" statement.

Answer 2

The first thing the code does is a truthiness evaluation of wysiwyg_toolbarButtons, since it evaluates to false being undefined then the block enters and the variable is defined.

Answer 3

What that code is doing is checking if wysiwyg_toolbarButtons is defined, and if it is not, it's defining and initializing it.

Answer 4

Javascript is not block scoped so the var declaration inside the if is just the same as if it had happened before the if.

Answer 5

EDIT: Yep, I misunderstood what I was saying. Sorry for the bad answer.

Based on your code, wysiwyg_toolbarButtons is created local to the if statement. The var declaration tells JavaScript that this is a new variable, and anything inside of the if statement's scope will use this new variable.

I'm assuming this code is functioning with the statements like that. Whether or not it successfully changes wysiwyg_toolbarButtons (or wysiwyg_elementMap, as I scan the JS file) outside of that scope doesn't matter. Keeping the declaration like that is bad coding practice, because it won't work like that in other languages.

Otherwise, I'm not going to restate what Quintin, Andreas, and Dimitar already said.