What's the best way to built a JavaScript object so that it works AND passes JSLint?

Question

I've been trying to see if I can build my JavaScript objects as intuitively as possible while making sure it's as 'correct' as possible. I've been running a bunch of different scenarios through Crockford's JSLint.com and haven't had much luck. I seem to fix one error, then another pops up because of the change. Below is about as good as I can get. Anyone have another take on this?

This is a typical way I structure an object:

function gizmo(id) {

  /* private variables */

  var myId = id;

  /* private methods */

  var init = function () {
    if (myId < 1) {
      setId(1);
    }
  };

  var setId = function (newId) {
    myId = newId;
  };

  // run 'constructor'
  init();

  /* public methods */

  return {
    getId: function () {
      return myId;
    },
    setId: function (newId) {
      setId(newId);
    },
    incrementId: function (inc) {
      setId(myId + inc);
    }
  };
}

// creating an instance of gizmo

var myGizmo = gizmo(-2);
console.log(myGizmo.getId()); // outputs 1

myGizmo.setId(5);
console.log(myGizmo.getId()); // outputs 5

myGizmo.incrementId(2);
console.log(myGizmo.getId()); /// outputs 7

This seems to work well. However, when I run this through JSLint, it gives me an error stating that my two private functions are 'Implied Globals.'

The best I can come up with is to declare my functions at the top with the variables like this:

function gizmo(id) {

  /* private variables */

  var myId = id,
      init,
      setId;

  /* private methods */

  init = function () {
    if (myId < 1) {
      setId(1);
    }
  };

  setId = function (newId) {
    myId = newId;
  };

  // run 'constructor'
  init();

  /* public methods */

  return {
    getId: function () {
      return myId;
    },
    setId: function (newId) {
      setId(newId);
    },
    incrementId: function (inc) {
      setId(myId + inc);
    }
  };
}

Answer 1

I don't know about JSlint, but after reading "javascript the good parts", I always declare objects as literals.

eg:

Mogwai={
  has_crazy_thoughts:True,
  reacts_to_water:True,
  name: 'Gizmo',
  eat:function(food){
    // code
  },
  become_gremlin:function(){
    // code
  },
  cause_havoc:function(){
    // code
  }
}

You're not actually declaring any objects above. Just a function. Inner functions don't really exist in Javascript - it's not like Java at all.

EDIT: I highly recommend the book mentioned above (without affiliation): http://oreilly.com/catalog/9780596517748 ... it is written by Douglas Crockford, who brought us JSlint.

Answer 2

JSLint expects setId to be defined before it is referenced in init.

This passes JSLint.

function gizmo(id) {

  /* private variables */

  var myId = id;

  /* private methods */

  var setId = function (newId) {
    myId = newId;
  };

  var init = function () {
    if (myId < 1) {
      setId(1);
    }
  };

  // run 'constructor'
  init();

  /* public methods */

  return {
    getId: function () {
      return myId;
    },
    setId: function (newId) {
      setId(newId);
    },
    incrementId: function (inc) {
      setId(myId + inc);
    }
  };
}

Answer 3

It has been a long time (several years) since I've programmed JavaScript seriously, so my memory on the details of best practice is quite gone. What I've done is gone back and dug out a few resources that may help you make an informed decision.

First, the way you are creating your objects seems very reminiscent of the Module Pattern. As far as I recall, the article I've linked to is a pretty good read about that. Second, maybe you would prefer a different way to instantiate your objects. That article gives you a slightly different take.

Answer 4

I'm pretty sure it's a bug in JSLint. It hasn't seen setId yet, so it assumes it's global. But in reality, it makes no difference, because all vars are hoisted, per ECMAScript 5 10.5. This means your first example and the second are the same semantically. A local variable declaration anywhere in the function is processed immediately, and the binding is initially set to have undefined value. But by the time the function (e.g. init) actually runs, the closed-in value is no longer undefined.

To see that setId is initially undefined, but never refers to a global, do this test:

function setId()
{
  alert("Global setId");
}
function f()
{
  var init = function()
  {
    setId();
  }
  alert(typeof(setId));
  init();
  var setId = function()
  {

  }
}

It will alert undefined, then throw a TypeError error.