CODEWITHSUNDEEP
javascriptobjectattributesreference
Vinny
Vinny

Reputation: 13

JavaScript Objects, Two Questions

I'm working on a jQuery plugin and I have a few questions about some Objects I'm using. I promise I've spent about an hour searching Google, but apparently my search terms were not quite specific enough. Here's an example:

var rgba = {
    red = {
        startHex    :  'FF',
        startDec    :  parseInt(startHex,16),
        endHex      :  '00',
        endDec      :  parseInt(endHex,16),
        diffDec     :  endDec - startDec
    },

    green = {
        startHex    :  'FF',
        startDec    :  parseInt(startHex,16),
        endHex      :  '00',
        endDec      :  parseInt(endHex,16),
        diffDec     :  endDec - startDec
    },

    blue = {
        startHex    :  'FF',
        startDec    :  parseInt(startHex,16),
        endHex      :  '00',
        endDec      :  parseInt(endHex,16),
        diffDec     :  endDec - startDec
    },
}

Now it will tell me that 'startHex' in 'parseInt(startHex,16)' is undefined. Is it possible to reference another attribute within an object from a sibling attribute, and if so how do you do it?

My other question is since the attributes of 'rgba' all have the same attributes themselves, how can I use an array with a for loop to reference each of these? For example, this won't work:

var colors = ['red','green','blue'];
for(i in colors) {
    alert(rgba.colors[i].diffDec);
}

For obvious reasons, because for this code there should be an attribute called 'colors' for the 'rgba' object. I thought about using eval():

var colors = ['red','green','blue'];
for(i in colors) {
    alert(rgba.eval(colors[i]).diffDec);
}

But it tells me that eval() is not an attribute of 'rgba'. Any suggestions on how I can do this (aside from actually creating an attribute 'colors' under 'rgba')?

Thanks!

Upvotes: 1

Views: 113

Answers (3)

Jonathan Fingland
Jonathan Fingland

Reputation: 57157

You can't access the other properties in this manner. but what you can do, is:

function Color(startHex, endHex) {
  this.startHex = startHex;
  this.endHex = endHex;
  this.startDec = parseInt(startHex,16);
  this.endDec = parseInt(endHex,16);
  this.diffDec = this.endDec - this.startDec;
}


var rgba = {
    red : new Color('FF','00'),
    green : new Color('FF','00'),
    blue : new Color('FF','00')
}

As to your second part, you're adding an unnecessary step. Just use:

for(prop in rgba) {
    alert(rgba[prop].diffDec);
}

keep in mind that with javascript, these two are equivalent:

myobject.myproperty

and

myobject["myproperty"]

Upvotes: 3

jmbucknall
jmbucknall

Reputation: 2061

The first point to realize is that scope in JavaScript is different than in some other object-oriented languages. Scope in JS is not based on objects, but on functions. So, possibly the best bet is to create a function that creates a color, like this:

var makeColor = function(startHexValue, endHexValue) {
  var start = parseInt(startHexValue, 16);
  var end = parseInt(endHexValue, 16);
  return {
    startHex: startHexValue,
    startDec: start,
    endHex: endHexValue,
    endDec: end,
    diffDec: start - end
  };
};

(And of course you can easily change that into a constructor if you really want.) Then your rgba object becomes:

var rgba = {
  red   : makeColor("FF", "0"),
  green : makeColor("FF", "0"),
  blue  : makeColor("FF", "0")
};

And then your last part should be:

var colors = ['red','green','blue'];
for(name in colors) {
  alert(rgba[name].diffDec);
}

The strings are the names of the properties, not the properties themselves.

Upvotes: 1

Pointy
Pointy

Reputation: 413702

You're asking two questions here:

  1. The answer to the first question — the one about object constant syntax — is that you cannot refer to other elements of an object from the initialization code. In other words, the object doesn't really exist yet. You could initialize it with one expression, and then run a function that fills in the additional properties you need.

  2. The error about "eval()" not being an attribute of "rgba", well, it isn't an attribute of "rgba". There's no function called "eval" anywhere in your code. The global "eval" function is just that: global.

Finally, that loop that you say doesn't work, well, I bet it does. There doesn't seem to be anything wrong with it to me, other than the fact that it's a "for ... in" loop. Those really should not be used to iterate through an array, unless you really know why you'd want to do that.

Upvotes: 0

Related Questions