Knowing javascript

Basic JavaScript introduction:

var foo = 123;
function increment () {
    foo += 1;
}
increment();
log(foo);

Another way to write the function is to use the var-anonymous approach. Instead of begins the definition with function, we begins with a variable declaration that refer to an anonymous function. In the form, we can have bettor control on which scope the variable apply to.

var increment = function() {
    foo += 1;
};

But these code still put two variables to the global scope.

The rule of thumb in javascript is to make as less global variables as possible.

Now we have two global variables, foo and increment. How we can make it 1 global variable? We can namespace it.

The code that wrap the variables into one object.

 var counter = {
   foo: 123,
   increment: function() {
       this.foo += 1;
       log('new foo: ' + this.foo);
   }
 }
 log('foo: ' + counter.foo);
 counter.increment()

Or you can edit the code here.

And the result

foo: 123
new foo: 124

One global variable. This sounds good. But do you know that we can make it zero global variable in some cases?

This requires another concept, the scope of a variable. The variable scope follows the function or it is attached to window if there is no function as its parent.

In JS, the variable scope follows the function.

Let’s test this statement with a simple experienment.

var f = function() {
  var foo = 123;
  log('Inside : ' + foo);
};
f();
log('Outside : ' + foo);

The foo in the outside is undefined.

So how we can apply this to our example code?

Approach 1: We get rid of the counter variable but introduced a now function reference run.

 var run = function() {
   var counter = {
     foo: 123,
     increment: function() {
       this.foo += 1;
       log('new foo: ' + this.foo);
     }
   };
   log('foo: ' + counter.foo);
  counter.increment();
};
run();

Approach 2: Then we can take away of the run and the code becomes a self-invoked snippet.

 ;(function() {
   var counter = {
     foo: 123,
     increment: function() {
       this.foo += 1;
       log('new foo: ' + this.foo);
     }
   };
   log('foo: ' + counter.foo);
  counter.increment();
})();

By the way, have you noted the semi-colon at the beginning and end? It is used to prevent wrong logic applied when concatenating JS file together.

What about we need several Counter instances?

 ;(function() {
   var Counter = function() {
     this.foo = 123;
   };
   Counter.prototype.increment = function() {
     this.foo += 1;
     log('new foo: ' + this.foo);
   };
 
  var counter = new Counter();
  log('foo: ' + counter.foo);
  counter.increment();
})();

The prototype is the key concept in writing object-oriented JavaScript. When we use new to create object instance, only properties in prototype will be cloned. If you map the traditional class approach, any Counter.methods is class method and Counter.prototype.methods is instance method.

And in order to create inheritance, we assign the parent class as the prototype in the subclass. We call it prototype chain.

Here is the result logging the counter instance to console.

Well, actually we get an even better approach.

 ;(function() {
   var Counter = (function(){
     function Counter() {
       this.foo = 123;
     };
     Counter.prototype.increment = function() {
       this.foo += 1;
       log('new foo: ' + this.foo);
     };
    return Counter;
  })();

  var counter = new Counter();
  log('foo: ' + counter.foo);
  counter.increment();
})();

Did I mention that JavaScript is difficult to master? You will find that you can do the same thing in many ways. And each approach may comes to some pros and cons. Some violate best practices. Some follow the practices.

Exercise

Can you code a component that starts at a user given value and it counts down every time you called its countDown method?

What’s next? We’re going to take a look at “Choosing javascript ui frameworks”.