The scope of a variable in Javascript (educational program)

For me, one of the most problematic places in Javascript was variable management. I set out in simple Russian.

Variable scope

Variables in Javascript are global and local. The global variable is available everywhere, local - only in the current scope.

Technically, global variables are just properties of the window object, since all code runs in its context.
')

 <script>
   alert (location);  // tell window.location
 </ script>

From this it follows that global variables can overwrite the properties of the window (I’m not talking about the fact that they are evil, break encapsulation and all that).

Variable declaration

When assigning a value to an undefined local variable, a global variable is used or created.

 function foo () {
   a = 2;
   b = 3;
   return a + b;
 }
 alert (a);  // undefined
 a = 'very important';
 alert (a);  // very important
 foo ();
 alert (a);  // 2

This way you can easily wipe off the excess. In my opinion, this behavior is absolutely illogical, but, well, this is not the strangest place of javascript. In any case, the implicit definition of variables should be avoided .

Explicitly declaring variables can and should be done with the var keyword.

 var a = 2;

Such a string always creates a new local variable. If the declaration occurs outside functions, then it will be global, which is quite logical.

 function foo () {
   var a = 2;
   var b = 3;
   return a + b;
 }
 alert (a);  // undefined
 var a = 'very important';
 alert (a);  // very important
 foo ();
 alert (a);  // very important

How to declare a global variable from a function? How to access a global variable if there is a local variable with the same name? Very simple - you need to access it as a window property:

 function foo () {
   var location = 'location';
   alert (location);  // returns 'location'
   alert (window.location);  // returns window.location
   window.a = 'variable from function';
 }
 alert (a);  // undefined
 foo ();
 alert (a);  // variable from function

Inheritance of scope

I was always confused by the fact that in Javascript you can define functions inside functions, and then use them anywhere. Well, yes, if you look, exactly the same can be done in Ruby, and, probably, in many other languages ​​too.

In this case, variables are transmitted very simply: if at the time of defining a function, a variable existed, then it will exist inside the function. From where it would not cause.

 function alertOnTimeout (message, timeout) {
  return setTimeout (function () { 
     // message will be available in an unnamed function passed to the timeout
     alert (message); 
   }, timeout);
 }

Passing the code in the old manner - a string that is run through eval() - does not fall under this rule, the code is executed in the scope where it is defined.

Since objects in Javascript are also of the function type, the property of an object is defined in the same way as a variable.

 function myObject () {
   var property = 0;
   // By itself, property will be available only inside the object.
 }

And in Javascript, the scope of a variable is limited only by functions, and not blocks of type if (hello, Pascal). Therefore, it is most convenient to declare variables at the beginning of a function.

this

And what is this ? And the fact that this variable automatically appears in the methods of objects and overwrites the value of this from the previous scope. The solution is simple - reassign its value to another variable.

 $ ('div.with-links'). click (function () {
   var theDiv = this;  // store the value of this
   $ (this) .find ('a'). click (function () {
     alert ($ (this) .attr ('href'));  // this is a link
     theDiv.remove ();  // and the Div is still a div
   });
 });

Separately, I note that when wrapping some behavioral logic into an object, you need to remember that in the DOM events created, the this value of the object itself is lost.

 function myObject () {
   var _this = this;  // save the link to the parent object
   var linkRemoved = false;

   $ ('a'). click (function () {
     $ (this) .remove ();  // this is the link object
     _this.linkRemoved = true;  // _this is the parent object
   });
 }