"undefined" error when checking "undefined" in an if statement

Question

I'm checking an Object (like an Associative Array) to see if a portion of data is available there or not, but I'm getting an undefined error exactly in the if statement where I'm checking if it is undefined or not!

I have an Object like this:

var data = {
    1: {
        2: {
            3: [
                ["a","b"],
                ["c","d"],
            ],
        }
    }
}

I have also tried with double-quotes like: var data = { "1": { "2": { ...

These are the if statements which I've already tried. All of them failed, Firebug is generating TypeError: data[1][2][3] is undefined exactly in the if statement:

if (typeof data[1][2][3] == "undefined") {
if (data[1][2][3] === undefined) { 
// when I have double quotes
if (typeof data["1"]["2"]["3"] == "undefined") {
if (data["1"]["2"]["3"] === undefined) { 

I checked that in jsfiddle.net and it works fine. I tried all the things I could imagine of, however I still don't have any idea why it fails in the if statement.

Update

look at this, oh god:

Answer 1

If variable[1][2][3] is undefined, the script cannot check whether variable[1][2][3][4] is undefined or not. You should check for undefined for the entire depth of the tree

if(1 in variable)
{
  if(2 in variable[1])
  {
     if(3 in variable[1][2])
     {
       if(typeof variable[1][2][3][4] === 'undefined'){
          // Do something
       }
     }
  }
}

Answer 2

some remarks, maybe the solution is in between:

Perhaps you want to use the negative version

if (typeof data[1][2][3] !== "undefined") {

since you seem to work on that data in the condition body, so you want to make sure it actually is defined inside your if condition? Atm, the code gets executed if the data is undefined.

Are you using exactly this object in your code or was this only for demonstration purposes? Because if you check data[1][2][3] and data[1][2] is already undefined, trying to access data[1][2][3] will throw an error because you are trying to access a property of a non existing object.

Sidenote: It might be more appropriate to use an array instead of a object if you have numeric indices?

Answer 3

Look at your output more closely:

if (typeof e.Bubbles["2013"]["3"]["24"]["layer_1"] === "undefined") {
> TypeError e.Bubbles[2013][3][24] is undefined

i.e., it's crapping out because your test is one level too deep. The ["24"] property doesn't exist so you can't possibly reach the ["layer_1"] property.

Answer 4

If you don't know beforehand whether you have all the hierarchy needed to get to the element you're checking (e.g., you're checking e.Bubbles[2013][3][4]["layer_1"], but e.Bubbles[2013] doesn't exist, and you get TypeError), consider using error catching like this:

try {
    myData = e.Bubbles[2013][3][4]["layer_1"];
} catch (error) {
    myData = undefined;
    console.error("Couldn't get my data", error.name, error.message);
}

if (myData !== undefined) {
    // Do something with the data
}

At a cost of making code much less readable, you could also do something like this:

var _ref, _ref1, _ref2;
if ((_ref = e.Bubbles[2013]) != null ? (_ref1 = _ref[3]) != null ? (_ref2 = _ref1[4]) != null ? _ref2["layer_1"] : void 0 : void 0 : void 0) {
  // We know we have e.Bubbles[2013][3][4]["layer_1"] here
}

But I would recommend error catching.

Answer 5

don't compare it with undefined...

if you want to check if its defined or not then just place it into the IF condition like...

var data = {
    1: {
        2: {
            3: [
                ["a","b"],
                ["c","d"],
            ],
        }
    }
}

if(data[1][2][3])
{
    alert("defined");
}
else
{
    alert("not defined");
}