Javascript

Javascript

If you think Javascript is similar to Java, C++ or Python, since they are called object-oriented programming languages, then you have to read this page.

I wrote this article after reading High Performance Javascript, Pro JavaScript Design Patterns and resources from website.

JS has several differences from the traditional object-oriented languages, which you have to understand clearly.

1. Flexibility and Dynamic
2. Object-Oriented in JS
3. Asynchronous Programming

This article can be considered as a beginner's guide, step by step, including a lot of coding examples. You can install nodejs to run those js code.

Flexibility and Dynamic

One of the most powerful features of Javascript is its flexibility. The language allows several different programming style. Programmer can write the code in functional style or in slightly more complex object-oriented style. Programmer does not need to specify the type of variable when they declare them, it is assigned during run-time. The attributes and methods of class and instance can be modified at run-time as well, which makes Javascript dynamic. You can not accomplish that in traditional object-oriented languages. Let's take a look at these features of Javascript through examples.

Simple functional Style

You can define an anonymous function and execute immediately by

(function(){
	var foo = 10;
	var bar = 2;
	console.log(foo * bar); // 20
})();

You also can define an anonymous function with arguments and execute immediately by

(function(foo, bar) {
	console.log(foo * bar); // 20
})(10,2);

You can define an anonymous function that returns a value by

var baz = (function(foo, bar) {
	return foo*bar; 
})(10,2);

console.log(baz); // 20

Scope, Nested Function and Closure

Variables can be called global variables, local variables, or others according to their scope in any languages. In Javascript, it has very interesting issues with scope.

1. Javascript has function level scope. This means a variable defined within a function is not accessible outside of it.
2. Javascript has lexcially level scope. This means functions run in the scope they are defined in, not the scope they are excuted in.

In this example, we define a nested the function in an anonymous function.

/* An anonymous function used as closure */
var baz;

(function() {
	var foo = 10;
	var bar = 2;
	baz = function() {
		return foo*bar;
	};
})();
/* 
function level scope
*/
try {
	console.log(foo); 
}
catch(err) {
	console.log(err); // [ReferenceError: foo is not defined]
}
try {
 	console.log(bar); 
}
catch(err) {
	console.log(err); // [ReferenceError: bar is not defined]
}
/*
lexcially level scope
*/
console.log(baz()); // 20

The scope of JS is very important when defining class with access control, since there are not keyword private, public in Javascript.

Loosely typed

Javascript is a loosely typed language, the type of variable is not define when it is declared, but when it is assigned value to.

console.log(typeof x); // undefined

var x;
console.log(typeof x); // undefined
console.log(x); // undefined

x = null;
console.log(typeof x); // object
console.log(x); //null

x = "hello";
console.log(typeof x); // string

x = 123;
console.log(typeof x); // number

x = 123.34;
console.log(typeof x); // number

x = true;
console.log(typeof x); // boolean

x = function(){};
console.log(typeof x); // function

simply class style

In Javascript, there is no keyword class, so how we can define a class ? Here goes examples.

/* Anim class */
var Anim = function(name) {
    this.name = name;
};

/* declare methods */
Anim.prototype.start = function() {
    console.log("Anim object " + this.name + " starts");
};

Anim.prototype.stop = function() {
    console.log("Anim object " + this.name + " stops");
};

/* Usage */
var anim = new Anim("robot");

anim.start();
anim.stop();

It is how class is defined in Javascript. If it is Java, C++ or Python, you may have those little boxes in your head how class and object are located and connected with each other. So how do those boxes look like ? It is a piece of simple code. However, Javascript does a lot of work behind the scene. Let's chop this small piece of code into micro pieces.

/* Anim class */

var Anim = function(name) {
	this.name = name;
};

/* What is Anim */
console.log(Anim); 
/* 
	Output: [Function]
	It is an anonymous function
*/

/* So it is an instance of Function ? */
console.log(Anim instanceof Function);
/*
	Output: true
*/
/*
	How Js knows Anim is an instance of Function, Anim has some attribute called type or class?
	No, it doesn't, but it has something similar, called prototype chain, which is used to inherite
	class in Javascript
*/
console.log(Anim.__proto__===Function.prototype);
/*
	Output: true
	When variable Anim is assigned, JS provides it an attribute called __proto__, which is used to
	define its class. In this case, Anim is an instance of Function.
*/
/*
	So Anim is an instance of Function, well, what it has from Function ?
*/
var AnimOwnProperties = Object.getOwnPropertyNames(Anim);
for(var i=0, length=AnimOwnProperties.length; i<length; i++) {
	console.log(AnimOwnProperties[i]+ " : " + Anim[AnimOwnProperties[i]]);
}
/*
	Output 
		caller : null
		length : 1
		prototype : [object Object]
		arguments : null
		name :
	Explain
		caller: the one which calls Anim
		length: the length of arguments defined in Anim
		prototype: the behavior of Anim's instances should have
		arguments: the arguments of Anim when it is called
		name: the name of function which defines Anim. In this case, anonymous, so empty
*/
/*
	What is in prototype ?
*/
var prototypeOfAnim = Object.getOwnPropertyNames(Anim.prototype);
for(var i=0, length=prototypeOfAnim.length; i<length; i++) {
	console.log(prototypeOfAnim[i]+ " : " + Anim[prototypeOfAnim[i]]);
}
/*
	Output
		constructor : function Function() { [native code] }

	Yeah, constructor, so weired stuff, Let's see deeper.
*/
console.log(Anim.prototype.constructor.toString());
/*
	Output:
		function (name) {
			this.name = name;
		}
	WoW, So it is the definition of Anim ?
*/
console.log(Anim===Anim.prototype.constructor);
/*
	Output: true
	Yes, Anim.prototype.constructor is referred to Anim itself.
*/

Object-Oriented in JS

Interfaces

Encapsulation

Inheritance

Asynchronous Programming