Newly defined variable reporting "undefined" in functions while the rest are not?

Question

I've had a problem where some of my declared and defined variables have been reported as undeclared when it's time to use them inside a function. So I've been playing about with it, and it seem like no - whenever I add anymore new variables, they are defined straight after they are defined in code, then inside function blocks they indeed reported undefined.

I have been using resources and not been releasing them, like URL objects and connections to databases, and so wonder if it's because I run out of memory?

So I rebooted my phone - no go. Besides, the older variables defined beneath the newer variable are reporting that they are indeed defined? while the new variable still arn't.

For more clarification, here's what visual studio is reporting: ^Every one of those variable in that block work correctly except for 'newVar' and any other newly defined variables

(disclaimer: I'm not a professional - only a hobbyist, and any code shown does not represent production ready code, thank you!)

Example issue code:

(function() {
    "use strict";
    var variable1,
        variable3 = 10,
        variable2 = 100,

    function clickHandler() {
        console.log(variable1); //prints "undefined" in green text.
        console.log(variable2); //prints "100"
        console.log(variable3); //prints "'variable3' is undefined" in red text
    }
    clickHandler();
})();

Developing a Windows Phone 8.1 app using latest public SDK, writing in javascript on Windows 10, inside Visual Studio 2015 community edition.

Answer 1

In reference to my comment, I'll take your response as a "no", the suggested example output is not what you'd get if you actually ran that code - I'll explain why I ask...

What you are referring to is called lexical scoping and it's a core concept - you can reliably access outer variables in a function closure and indeed your example runs without issue - at least on the V8 engine, I'm not in a position to test in a Microsoft flavoured environment right now.

The only notable observation that you could make from it (aside from the typo) would be the use of a function as a statement rather than an expression. See this post on the differences between the two - I've not spent any length of time investigating but it's conceivable that Javascript hoisting order could have quirky behavioural differences across different Javascript engines.

This is probably a red herring though because you'd expect all variables to appear as undefined in such cases - it's easy to verify if this is your issue however by simply swapping out the function declaration:

function clickHandler(){        // ... swap this function statement
var clickHandler = function(){  // ... for this function expression

Now onto what I suspect is actually the problem. I can't see the onPinch function in it's entirety on your screenshot but from what I can see there is no reference to newVar inside of it. The error in your console was not produced by your code but by your attempt to inject a reference to the variable via the debugger, into the execution context after it had been resolved.

When your code is running, the compiler won't just dump everything that was in lexical scope into the local context - it's going to make optimisations, i.e. you can't stick a break-point inside the function and expect to see a parameter that isn't used by the function in your actual code.

If you want to to play around with that variable in the console, make an arbitrary reference to it somewhere - for example, even the following will ensure it's in scope:

function onPinch(ev){
    newVar; 
    //...
}

Answer 2

In your example the var line needs to be terminated with a ;

 var variable1,
    variable3 = 10,
    variable2 = 100;

variable1 will then be the only undefined variable in the clickHandler function.