Anonymous function in javascript problem

I am doing an online exercise for my javascript class. The problem is solved by anonymous function. The main problem is I don't get the idea about a variable x in the question

var x = 10;

var OddType = function() {
   this.datum = 42;
   this.method = function() 
   {
      var x = 20;
      var g = //code in here 

      g.x = this.datum;
      

      print(x);
   }
};

//call function 
new OddType().method();
print(x);

Open in new window


Output
20
42

I know that the variable g will hold an property x. But is that possible to change anything since when we print. The statement is print(x), not print(g.x)
If you can point out which x is used in each function in the solution, that would be very helpful for me to understand the future problem
LVL 1
Dung TrinhMarching Band Field CrewAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
This is another tricky one.
You need to say that var g = window, like this:
var x = 10;

var OddType = function() {
   this.datum = 42;
   this.method = function() 
   {
      var x = 20;
      var g = window;

      g.x = this.datum;
      
      print(x);
   }
};

//call function 
new OddType().method();
print(x);

Open in new window

Just as a disclaimer: This kind of code is purely academic and should be avoided. Using global variables and even "overriding" them like this leads to messy code. It's this kind of code and exercises that make JavaScript look like a bad language.

Now for the solution, the first line of your code declares a var x = 10;
This variable is not wrapped in anything so it's a global variable.
Global variables are assigned to the window object, which is the top most object for JavaScript running in a browser.

Now inside the method function, you declare another x variable and you want to print this one and change the one that is in the global scope.
For that you must say that g points to window, which already has a variable x assigned, and change its value to 42.

So if you look at the code, it looks like you're always printing the same variable but in-fact, x points to the internal method variable, an g.x points to the global variable.

Like this, when you do the last print, you're actually printing the global x :)

To understand this code properly you need to understand how scope works in JavaScript.
Make sure you read the books I mentioned earlier.
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dung TrinhMarching Band Field CrewAuthor Commented:
It makes sense. I am working on it now. However, letting g = window doesn't work. I have the idea on how to solve it though. Thank you
0
Alexandre SimõesManager / Technology SpecialistCommented:
Of course it works.
Here's a working demo: http://jsfiddle.net/AlexCode/r5dpgsz3/
I still had to implement my own print function for the same reason I explained before.

Now it depends on how you're running this.
If you're executing this inside and onload event, for instance, it won't work.
The reason is because like this, the first x declaration won't belong to the global namespace anymore, but to the onload event handler function.

So basically I don't know how you're executing these exercises, but my solution is the correct one.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.