A C#/Java Developer's Rundown on JavaScript Part 1

There are many developers out there who have used JQuery extensively but have not invested the time and resources in learning JavaScript as a language.

I used to be like that.

I never learnt JavaScript as a language. I just started slinging code in it and picked up a lot of bad habits.  I used it primarily to write some client side scripts to give my web applications some client side functionality. (when AJAX used to be a cool)

JavaScript is not every developer’s cup of tea especially if you are used to the static/strongly-typed languages like C# and Java.

JavaScript is a simple language with too many quirks. Mastering JavaScript is essentially understanding the quirks in the language and how to deal with them.

My next series of posts will be to give C# and Java developers a quick rundown of core JavaScript so they do not have to go through the pain that I have.

The JavaScript Type System

The JavaScript type system is very simple. It is the simplest I have seen in any language.

The JavaScript type system is divided into two categories.

These are primitive types and object types. (Just like in .NET we have the Common Type System and loosely speaking in Java we have Primitive types and Reference Types in Java.)

The Primitive types in JavaScript are numbers, strings, boolean values, null and undefined.  These are immutable.

All other JavaScript values are objects. Objects in JavaScript are simply a collection of key/ value pairs where each value points to another primitive type or an object.

And that is basically it.

Now let us take a closer look at the object type which is a collection of key/value pairs. Recall if you have studied data structures that collections can be ordered or unordered. Normal objects in JavaScript are unordered collections. For ordered collections, JavaScript provides a special type of object called hang on... an array. Really simple stuff.

JavaScript has another kind of object called a function which is essentially an object that points to some piece of executable code.  (A bit like delegates in c#).

Variable Declaration and Scoping

JavaScript variables are declared with the var keyword and are untyped. This means you can do (cringe) stuff like this

1:  (function(){  
2:    var age = 10; // age is a number  
3:    console.log(age); //10  
4:    age = age + 1;  
5:    console.log(age); // 11  
6:    age = 'eleven'; // age is now a string  
7:    console.log(age); // eleven  
8:  }());  

Basically assign and re-assign values of different types to a variable.

Just as you can use classes and methods to manage scope in C#, Java, JavaScript uses functions to achieve the same thing. Any variable declared in a function is local to that function.  If however, it is declared outside of a function, then it is a global variable.

Here is quirk that will get you thinking what the heck...

If a variable is used without being declared in a function, it is an implied global variable. 

(Yeah there is some creepy stuff in JavaScript).

Consider the code below:

1:  function calculateArea(length, breadth) {  
2:       area = length * breadth;  
3:       return area;  
4:  }  

the undeclared variable 'area' is now a global variable.

Here is another quirk.

If you declare multiple var statements in any part of a function, they act as if they were declared at the top of the function. 

This behaviour is known as hoisting.

Feast your eyes on this splendid code block below:

1:  age = 10;  
2:  function splendidCode() {  
3:    console.log(age); //undefined  
4:    var age = 20;  
5:    console.log(age); // 20  
6:  }  
7:  splendidCode();  

1:  age = 10;  
2:  function splendidCode() {  
3:    var age;  
4:    console.log(age); //undefined  
5:    age = 20;  
6:    console.log(age); // 20  
7:  }  
8:  splendidCode();  

Both chunks of code are equivalent because of  variable declarations being hoisted to the top.

One way to remedy this is to have a single var statement at the top of your function. This forces you to declare local variables and also prevent some of the quirks shown above. Used in this way, your function will look like this:

1:  function playNice() {  
2:    var age = 10,  
3:      name = '',  
4:      address={};  
5:    //sling some code here  
6:  }  
7:  playNice();  

That is all for today folks.

I wish you all a Happy New Year.

James