JavaScript constructor: is this a property or a variable?

Question

I was surfing on the canvas element, to use with JavaScript games and I found this code:

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    ctx = myGameArea.context; // **why not: var ctx= myGameArea.context ???**
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}

My question is what is ctx a property? Or a private variable?

ctx is not declared or even used, outside of this constructor (like: var ctx). It is only inside this code.

I hear if you set a variable with a value directly without the var reserved word, you are declaring a global. But that ctx variable is not being used outside that constructor, so is useless?

Also they do the same thing when setting the key property to an instance of an object.

The entirely code...

var myGamePiece;

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red", 10, 120);
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;    
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}

Yes, looks like bad code. It should most likely be `var ctx`. — Felix Kling, Oct 17 '16 at 23:01
It's a variable, but it could be declared outside of that function, so it's not necessarily global. — , Oct 17 '16 at 23:01
Yup.. It should be `var ctx` to get the context of the canvas. — Praveen Kumar Purushothaman, Oct 17 '16 at 23:04

score 1 · Answer 1 · answered Oct 17 '16 at 23:11

If that function is by itself and not inside another function then chances are ctx is a global variable. If a local variable is desired var ctx should be used instead, but will not be accessible from the outside. If access to the ctx variable is desired then it it should be declared as this.ctx.

If it is inside another function then it could be a captured variable:

function parent() {
    var ctx = parentArea.context;

    function component(width, height color, x, y) {
        this.width = width;
        this.height = height;
        this.x = x;
        this.y = y;
        ctx = myGameArea.context; // References parent's ctx variable
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

Stavros Zavrakas · Accepted Answer · 2016-10-17T23:14:44.253

0

Yes, it seems that it is a pretty bad practice not to declare it at least as var. If a variable is not declared with var/let/const, the Javascript engine will define them in the global namespace and can have unknown side effects. It is a bit worrying that there is an access to the myGameArea global (?) variable. Why is this not injected into the constructor? Something like that would have been clearer:

function component(width, height, color, x, y, myGameArea) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;

  var ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}

edited Oct 17 '16 at 23:14

answered Oct 17 '16 at 23:12

Stavros Zavrakas

3,045
1
17
30

I think ctx should be a private variable 'var', since it purpouse is for a final thing. – vincent thorpe Oct 17 '16 at 23:14
@vincentthorpe If you need it private then definitely should be defined as var. Just did the change. – Stavros Zavrakas Oct 17 '16 at 23:15

score 0 · Answer 3 · edited May 23 '17 at 10:32

If you refer to a variable inside the body of a function, JS will search the scope chain of the function to find the variable.

If the variable was not declared inside the function itself, then it will look in the scope of any enclosing function(s), then finally in the global scope.

From the fragment you presented we can't see if ctx is declared in an enclosing function, or is a global variable, although you say it is not used outside the constructor which implies it is not declared anywhere. On balance I would say it the author accidentally used a global instead of a local variable.

As an aside: I recommend using a tool such as jshint to pick up errors such as using global variables by mistake.

JavaScript constructor: is this a property or a variable?

3 Answers3