Variable scope surprise

Inger Hohler

unread,

Aug 24, 2018, 8:46:56 PM8/24/18

to Khan Academy Javascript Technical Q&A

Sorry to be posting two questions in a day. There's no particular hurry with the answer.
I read the article https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope

and tried to reproduce the results under different circumstances.

if (true) {

var x = 5;

}

println(x);

displayed 5 in the canvas console as expected.

Then I tried

var hm = function(){

if (true) {

var x = 5;

}

println(x);

};

hm();

which woke up OhNoes who told me x was used out of scope. This seems to be contrary to what I ought to expect according to the article:
JavaScript before ECMAScript 2015 does not have block statement scope; rather, a variable declared within a block is local to the function (or global scope) that the block resides within. For example the following code will log 5, because the scope of x is the function (or global context) within which x is declared, not the block, which in this case is an if statement.

At first I thought there was something special about putting the variable in a function on KA, but that did not seem to be the whole story.

var num = 5;

var outer = function(){

var private = "Hush!";

if(num<5){

var sneaky = true;

}

// do something

var nested = function(){

var morePrivate = "Shhh!";

println(num+private+sneaky+morePrivate);

};

nested();

};

outer();

produced 5Hush!UndefinedShhh! in the console window.
Replacing
if(num<5)
with
if(true)
produced 5Hush!trueShhh!

but
if(false)
produced 5Hush!UndefinedShhh!

Just for good measure I tried playing with the code in the global space and confirmed that the code below

if (false) {

var x = 5;

}

println(x);

produced 5 in the console, and so did

var um = false;

if (um) {

var x = 5;

}

println(x);

So now I'm totally confused 8-\

Larry Serflaten

unread,

Aug 24, 2018, 10:48:37 PM8/24/18

to Khan Academy Javascript Technical Q&A

Yikes, I get email notifications of this group, and when I saw your message, I hit the reply button to reply. It seems that button was for a personal reply, not to the group as I intended. Here it is for other looking for a similar answer:

It may help if you test one thing at a time. If you want to test declarations, then check those, if you want to test scope then check that, and so on.

Also realize that at KA were are operating in a special environment where rules may be forced upon us for our own good.

For example, according to the documentation, variables and functions (whatever) should be able to be used BEFORE they are declared. But (many would agree) that is not good practice, so apparently they decided to take that option away. (see Learn More section https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)

It would appear, as with Oh Noes, the BabyHints (JSHints, KA, PJS, or whoever) may not treat all the different scope issues the same.

If you are trying to understand how JS works, it may be best to try it outside of KA and PJS. At least that should conform closer to the documentation you will find online. Once you find out how it was designed to work, you can then test it in a KA project and see if it still behaves as it was intended.

For testing you can simply create an HMTL document on your desktop and edit that in Notepad or any other text editor. You simply have to give the file an .htm extension for the OS to try to open it as a web page. So, for example, to show variables can be used before they are declared, open a text editor and paste in the following code:

<!DOCTYPE html>

<html>

message = "Hello World";

document.write(message);

var message = "First contact";

console.log(message);

</script>

</body>

</html>

Then save and name the file test.htm and see if it works for you. Then go ahead and do your tests in that environment and see if it all becomes easier to grasp.

Good luck!

LFS

Inger Hohler

unread,

Aug 27, 2018, 5:44:38 PM8/27/18

to Khan Academy Javascript Technical Q&A

Just letting you know I'm working on it. It will take a while before I'm entirely comfortable combining Javascript with web pages, but there's never going to be a better time to start learning than today (or the day before as the case might be.)
On Saturday, August 25, 2018 at 2:46:56 AM UTC+2, Inger Hohler wrote:

etc.

Reply all

Reply to author

Forward