JavaScript Strange Array Scope Issue

Question

All source code is available here: Simply view the page source. Half the code is on that page, the other half is in the 'deputyDepot.js' file which is linked in the source and should also be viewable.

Just a few things: this is obviously still a work in progress. I'm pretty disorganized when coding, and I tend to jump around and do a little of this and a little of that. So it's a bit messy. Also the background. We'll just pretend that doesn't exist, okay?

So now, on to the problem! It seems that I'm unable to access arrays in any functions.

Currently, the way I've been testing is by modifying my main function (called weTalkNow(input)). This is located in deputyDepot.js. I set it to return whatever values I'm testing to see what they're set to. These values get printed in my chat box thingy. So I use it like console.log(). Currently it's set to return the length of the user input, but that's completely irrelevant.

_inputArray is populated by taking the user input (a string) and splitting it on spaces. It is declared at the top of the page. This is all fine and dandy.

Where the problem arises is if an array is populated manually.

var x = [ [1,2], [3,4] ];
/* Main Function */
function weTalkNow(){
    return x[0][0];
}

That code, as far as I can tell, SHOULD output 1. But it does not. When the code is modified to this, it works fine:

/* Main Function */
function weTalkNow(){
    var x = [ [1,2], [3,4] ];
    return x[0][0];
}

This isn't very helpful, however. I need a global array, not a local one.

What makes things really weird is that if I decide to declare

var x = [ [1,2], [3,4] ];

on my main page (the one with HTML and stuffs), and then do this

/* Main Function */
function weTalkNow(){
    return x[0][0];
}

in the deputyDepot.js file, it works fine. So suddenly if I declare a global array on a different page it works okay.

Please let me know if I can clarify any points in any way. I tried to give all the info I could. Random side tips are welcome too, but I'm mostly just focusing on this.

Again, just so I'm clear: for whatever reason, I CANNOT USE ARRAYS if I populate them manually (I assume this is somehow related to the problem). _inputArray is doing it's job fine, so that array works okay. It's the only global array that does so. But it isn't populated manually, but by the split function. I can't seem to be able to make a global array that is accessible by functions.

EDIT:

Okay, I found the problem! All the code I was writing works fine, like it's supposed to. The problem is that at the very top of my .js file was a broken function. This very first line prevented all the code below it from running, and so my arrays were never being initialized in the first place. For this reason I was unable to access them.

Once I checked the web console I was able to fix everything. I didn't know there was a web console before posting this question.

I mean there are errors showing in the console when I load the page. Do you have your browser's developer's console open? — I Hate Lazy
– I Hate Lazy, Commented Dec 1, 2012 at 19:28
Oh. OHH. THANK YOU. This helped solve the problem. I also didn't realize there was a console. You've helped me immensely. — Fork Spoon
– Fork Spoon, Commented Dec 1, 2012 at 19:56
You're welcome. FYI, the console has several tools that you can use within your application to troubleshooting, like console.log() to inspect data, and debuggers that let you step through code starting at a breakpoint. — I Hate Lazy
– I Hate Lazy, Commented Dec 1, 2012 at 20:47

robert · Accepted Answer · 2012-12-01 19:32:00Z

1

If your function refers to an array that is declared below the line where the function is called, the array will not be in scope.

myFunc();

function myFunc () {
    console.log(ra[0]); // won't work
};

var ra = ["a"];

This will work:

var ra = ["a"];

myFunc();

function myFunc () {
    console.log(ra[0]); // will work
};

The other thing to keep in mind is that javascript includes are processed in order also. One more thing: while generally javascript is processed from top to bottom, in other words; a function cannot call or reference variables that are defined on a lower line in your file, there is an exception. The exception is named functions, which you are using.

This won't work.

var funcA = function () {
    funcB(); // wont work
};

funcA();

var funcB = function () {
    console.log("from funcB");
};

This will work:

funcC(); // works fine

function funcC () {
    funcD(); // works fine
}

function funcD () {
    console.log("from funcD");
};

These subtle differences may be perceived to represent less than perfect design, but they can work very well.

answered Dec 1, 2012 at 19:32

robert

5,3712 gold badges22 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Fork Spoon Over a year ago

This is all very useful information. But all my functions are named, and I'm not declaring any arrays below the functions that are using them.

robert Over a year ago

I see. Could you reproduce a simplified version of the problem you are having on jsfiddle.net ? I could not find the code you referred to in your question at the link you provided.

Fork Spoon Over a year ago

Thanks for the help! I ended up solving it. I edited my question to reflect this.

user123444555621 Over a year ago

Well, not quite. Declaration ("var") and assingment ("=") are different things. JS doesn't care in which order your declarations appear, as long as they are in the same scope. This feature is called "hoisting". What does matter is where your assignments take place. For esample, this would work: ra=["a"];funcA();function funcA(){..};var ra;

robert Over a year ago

@Pumbaa80 That's interesting. Thanks for the clarification.

Collectives™ on Stack Overflow

JavaScript Strange Array Scope Issue

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related