Why does this return undefined?

Question

var TTT = {
        canvas      : document.getElementById('canvas'),
        ctx         : canvas.getContext('2d'),
        cH          : 600,
        cW          : 600,
        // tile dimensions
        tH          : this.cH / 3,
        tW          : this.cW / 3
    };

// returns undefined... why? 
console.log(TTT.tH);

This got to be something very simple, but I can't seem to grasp why this is undefined...

Answer 1

When you set TTT.tH and tW , this refers to the surrounding context, not the object itself. You can't set it to TTT.cH at the moment either, because it's not defined yet. What you can do is set them after the object is initially defined.

var TTT = {
        canvas      : document.getElementById('canvas'),
        ctx         : canvas.getContext('2d'),
        cH          : 600,
        cW          : 600
    };

// tile dimensions
TTT.tH = TTT.cH / 3;
TTT.tW = TTT.cW / 3;

// returns undefined... why? 
console.log(TTT.tH);

EDIT: As pointed out in a comment by Oriol, you'll need to do this as well for TTT.ctx , as canvas isn't defined yet.

Answer 2

In addition to the answer i posted above , there's a second, completely different way of doing it. That's by using getters and setters .

If you don't care about being able to reset TTT.tH and TTT.tW at a later point, you can just define them as getters:

var TTT = {
        canvas      : document.getElementById('canvas'),
        ctx         : canvas.getContext('2d'),
        cH          : 600,
        cW          : 600,
        // tile dimensions
        get tH() { return this.cH / 3 },
        get tW() { return this.cW / 3 }
    };

// returns undefined... why? 
console.log(TTT.tH);

Here, it's defined as a function, and so this will indeed work there.