What do you call this JavaScript syntax, so I can research it?

Question

1) In the following code, what is the reasoning behind making gameOfLive a variable and not just function gameOfLife()?

2) What is gol? It seems like an array, but I am unfamiliar with the syntax or what its called.

I am studying http://sixfoottallrabbit.co.uk/gameoflife/

if (!window.gameOfLife) var gameOfLife = function() {

    var gol = {
        body: null,
        canvas: null,
        context: null,
        grids: [],
        mouseDown: false,
        interval: null,
        control: null,
        moving: -1,
        clickToGive: -1,
        table: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(''),
        tableBack: null,

        init: function(width, height) {
            gol.body = document.getElementsByTagName('body')[0];
            gol.canvas = document.createElement('canvas');
            if (gol.canvas.getContext) {
                gol.context = gol.canvas.getContext('2d');
                document.getElementById('content').appendChild(gol.canvas);
                gol.canvas.width = width;
                gol.canvas.height = height;
                gol.canvas.style.marginLeft = "8px";

                gol.control = document.getElementById('gridcontrol');

                gol.canvas.onmousedown = gol.onMouseDown;
                gol.canvas.onmousemove = gol.onMouseMove;
                gol.canvas.onmouseup = gol.onMouseUp;

                gol.addGrid(48,32,100,44,8);

                gol.refreshAll();
                gol.refreshGridSelect(-1);
                gol.getOptions(-1);

                gol.genTableBack();
            } else {
                alert("Canvas not supported by your browser. Why don't you try Firefox or Chrome? For now, you can have a hug. *hug*");
            }
        },
    }
}

Answer 1

var gameOfLife = function() { }

is a function expression, whereas

function gameOfLife() { }

is a function declaration.

To quote Juriy ‘kangax’ Zaytsev about Function expressions vs. Function declarations:

There’s a subtle difference in behavior of declarations and expressions.

First of all, function declarations are parsed and evaluated before any other expressions are. Even if declaration is positioned last in a source, it will be evaluated foremost any other expressions contained in a scope. […]

Another important trait of function declarations is that declaring them conditionally is non-standardized and varies across different environments. You should never rely on functions being declared conditionally and use function expressions instead.

In this case, as Joel Coehoorn mentions in a comment, gameOfLife is defined conditionally, so it's needed to use a function expression.

A general use case for these conditionally defined functions is to enhance JavaScript functionality in browsers that don't have native support for newer functions (not available in previous ECMAScript/JavaScript versions). You don't want to do this using function declarations, as those will overwrite the native functionality anyway, which is most likely not what you want (considering speed, etc.). A short example of this:

if (!Array.prototype.indexOf) { 
    Array.prototype.indexOf = function(item, from) {
        /* implement Array.indexOf functionality,
           but only if there's no native support */
    }
}

One major drawback of function expressions is that you in fact assign an anonymous function to a variable. This can make debugging harder, as the function name is usually not known when script execution halts (e.g., on a breakpoint you set). Some JavaScript debuggers, like Firebug, try to give the name of the variable the function was assigned to, but as the debugger has to guess this by parsing the script contents on-the-fly, this can be too difficult (which results in a (?)() being shown, instead of a function name) or even be wrong.

(for examples, read on on the page, though its contents are not entirely suitable for beginners)

Answer 2

1. In JavaScript, functions are first class objects. You could store them in objects (variables) and pass them as arguments to functions. Every function is actually a Function object.

2. gol is an object, which is being initialized using the object literal notation.

Answer 3

---

1) In the following code, what is the reasoning behind making gameOfLive a variable and not just a "function gameOfLife()"?

---

Variables defined at the global level are members of the window object. So by making it a variable, you make it possible to use the syntax window.gameOfLife(). That's also why they can use the if (!window.gameOfLife) check at the beginning of your snippet.

But that doesn't really explain why they chose to do it this way, and a function declaration would do the same thing. Marcel Korpel's answer better explains the "why" of the two options.

---

2) what is gol? It seems like an array, but I am unfamiliar with the syntax or what its called.

---

The syntax is called compact object notation. What makes it interesting here is that the "compact" object is declared inside a function. Declaring an object inside a function like this is useful because you can use it to build javascript objects with (effectively) private members.

The key is to remember that functions and objects in javascript are the same thing. Thus, the full gameOfLife() function is really an object definition. Furthermore, the gol object declared as a member of gameOfLife is most likely part of a common technique for defining private members. The gameOfLife() function/object will return this gol object. All other items declared inside the gameOfLife() function/object effectively become private members of the returned gol instance, while everything declared inside of the gol object itself is public. What they really want to do is eventually write code like this:

var game = new gameOfLife();

Now, when they do that, the game variable will hold a gol object. The methods in this object still have access to items declared in the full gameOfLife() function, but other code does not (at least, not as easily). Thus, those items are effectively private. Items in the gol object itself are still public. Thus you have an object with both private and public members for proper encapsulation/information hiding, just like you'd build with other object-oriented languages.

---

Answer 4

Putting a function in a variable allows you to come along later and replace it with another function, replacing the function transparently to the rest of your code. This is the same thing you're doing when you specify "onClick=" on a form widget.

Answer 5

sure: to explain the syntax:

functions are first class objects in javascript, so you can put a function into a variable. thus the main part of this code is in fact a function definition stored in var gameOfLife, which could later be used by calling:

gameOfLife()

gol is an object (hash), and "init" is another example of the above syntax, except put directly into the "init" key in the "gol" hash. so that function in turn could be called by:

gol["init"](w,h)

Answer 6

According to this page, declaring gameOfLife in their way is no different from declaring it your way. The way they define gol makes it an object (or you can think of it as an associative array). A similar shortcut for arrays is to use square brackets instead of curly braces.

Answer 7

Considering a function as a variable may be useful if you would like a function to be a property of an Object. (See: http://www.permadi.com/tutorial/jsFunc/index.html)

I believe gol is a JavaScript object described in name/value pairs -- much like the JSON format. (See: http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_))