Javascript object of arrays undefined

Question

I have the following function:

function get_stoplight_color(count, position) {
    console.log(count + ', ' + position);

    var colors = {
        'QB' : ['#8b3a25', '#ceca63', '#68c24c', '#68c24c', '#68c24c'],
        'RB' : ['#8b3a25', '#ceca63', '#ceca63', '#ceca63', '#68c24c'],
        'WR' : ['#8b3a25', '#ceca63', '#ceca63', '#ceca63', '#ceca63'],
        'TE' : ['#8b3a25', '#ceca63', '#68c24c', '#68c24c', '#68c24c'],
        'DST' : ['#8b3a25', '#68c24c', '#68c24c', '#68c24c', '#68c24c'],
        'K' : ['#8b3a25', '#68c24c', '#68c24c', '#68c24c', '#68c24c']
    };

    console.log(colors);
    if (count <= 4) return colors.position[count];
    else return '#68c24c';
}

As you can see, I've logged a couple vars out to the console, and they appear to be just fine there. However, at runtime I'm getting the following error:

Uncaught TypeError: Cannot read property '4' of undefined

(That's when count = 4.)

Again, the object colors clearly exists, because console.log(colors) outputs:

Object {QB: Array[5], RB: Array[5], WR: Array[5], TE: Array[5], DST: Array[5]…}

So I would expect colors.position[count] to return #68c24c when position = 'QB' and count = 4.

Why is the object still returning undefined in this case? Thank you, and I'll provide more details if necessary (I've provided everything I've thought of up front).

Answer 1

If position is a variable then you should say colors[position][count] . Otherwise JS will think position is a property of colors and not resolve its value.

Answer 2

The expression colors.position[count] uses a position property on colors . I think you meant colors[position][count] , which will look up the property named by the variable position (eg, QB ) on colors instead, and then look up the property named by count (eg, 4 ) on the result.

If there's any chance position may not be defined, I would change that bit at the end slightly. Instead of:

if (count <= 4) return colors.position[count];
else return '#68c24c';

perhaps:

return (colors[position] && colors[position][count]) || '#68c24c';

...which takes advantage of JavaScript's curiously-powerful || and && operators .

---

Re your comment below:

Wow, OK, that worked, but I'm not sure how? I didn't even try that since I view [] operands as indexes of an array, while colors is an object (not an array).

In JavaScript (unlike many languages), you can access an object property in two ways:

1. Using dot notation and a literal property name, eg obj.foo (provided the property name is a valid identifier name ), or

2. Using bracketed notation and a string property name, eg obj["foo"] (and in this case, the property name can be just about anything, it doesn't have to be a valid identifier name).

In the second case, the string can be from any expression, including a variable lookup. So all of these refer to obj.foo :

obj.foo
obj["foo"]
obj["f" + "o" + "o"]
var x = "o";
obj["f" + x + x]

...and in fact, this is is the same notation you use when dealing with arrays, because in JavaScript, arrays aren't really arrays , they're just objects.