What do you call this JavaScript syntax, so I can

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

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 2

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 3

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_))

Answer 4

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 5

---

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 6

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)