The thing to know about JavaScript

Here's what happens to lots of people: they start learning JavaScript because it's easy, the same syntax as C and Java, but then when trying to read the source of web pages, they encounter bizarre syntax that looks nothing like the language they learned.

For example, the JavaScript in a webpage might look like the following:

$(
    function () {
        $(document).keydown(
            function (event) { 
               Typer.addText(event);
            }
        );
    }
);

This doesn't look like any JavaScript you learned, much less like a language from the C/C++ family. None of these languages has a '$' operator, for example.

But here's what's going on.

(1) The '$' isn't an operator like '+' or '&&'. Instead, it's just a letter of the alphabet, like 'a', '9', or '_'. Replace it with the letter 'x' and the syntax becomes more comprehensible. Better yet, replace with the string "JQuery", because that's a well-known JavaScript library that uses '$' as a function name.

(2) The above code is just using pointers-to-functions, a concept you know from C/C++. It's just that in JavaScript, instead of defining a function separately, then passing it as a parameter, the function can be declared in-place right there in the parameter list.

(3) JavaScript has dynamic objects. A function can query an input variable and ask "what type are you", and do something different depending on the type. In this case, if you passing in a function pointer as the parameter 'z' to "$(z)", JQuery does the equivalent had you called "$(document).ready(z)". This is the JQuery syntax for delaying calling the function 'z' until after the document has been fully loaded.

Thus, the above code can be decomposed as the following, where everything labeled "foo_..." is a name I just came up with:

var foo_query = $;
function foo_handle_keystroke(event)
{
    Typer.addText(event);
}
function foo_callme_maybe() 
{
    foo_query(document).keydown(foo_handle_keystroke);
}
foo_query(document).ready(foo_callme_maybe);

This code now looks like comprehensible C++ code. What it does is register a function for handling keystrokes once the web page has been loaded.


Coming from C/C++ or Java, you might've learned that it's possible to define anonymous functions this way, but since that's something you never did in your own language, you ignored this. When looking at your existing code, you might think that you'd use this feature rarely if at all. Then you read existing code in web-pages or NodeJS and find that this isn't a rarely used feature, and that if anything, most of the code exists in anonymous functions.

It's not just 'anonymous functions', though. What this example is really showing is that there are a lot of language-on-languages inside JavaScript. JQuery is essentially it's own programming language written in JavaScript. Likewise, NodeJS is it's own language inside JavaScript. Thus, saying that code is JavaScript doesn't fully communicate what language it's actually written in. (C++ has this problem, too, where "boost" is a fully separate language).


Since we all have to become JavaScript experts (because it's taking over the world), I thought I'd mention this quirky bit of the language.