Javascript Syntax

Javascript is easy to write. I guess no one will disagree. Should you have some experiences in coding javascript, you may find coding in Javascript is error prone and is hard to debug. But why? It is partly due to its flexibility in syntax and it requires no compilation. However, if you give some care of the syntax, many errors can be avoided (you can’t avoid all those AJAX controls and RIAs development anyway). So, here we go…

1. No == or != please…

Why not? Do you expect behaviours below?

'' == '0'            // false
0 == ''              // true
0 == '0'             // true
false == 'false'     // false
false == '0'         // true
false == undefined   // false
false == null        // false
null == undefined    // true
" \t\r\n " == 0      // true

But why? All these weird things happen because of the strange type conversion before the expressions are evaluated. To avoid these unexpected behaviours, always use triple equality operators (=== and !==) which return false in all of the above cases.

2. null and undefined

Can you tell the difference? If we talk like we are using a strong-typed language, null means “unassigned” whereas undefined means “no such variable”. Here are some examples to clarify:

var f1 = function() {
  var abc;
  if (abc === undefined) {
    return 1;
  }
  if (abc === null) {
    return 3;
  }
};

var f2 = function() {
  if (abc === null) {
    return 1;
  }
  if (abc === undefined) {
    return 3;
  }
}

var f3 = function() {
  var array = [1, 2];
  if (array[10] === null) {
    return 1;
  }
  if (array[10] === undefined) {
    return 3;
  }
}

All of the above functions returns 3.

3. Curly brackets

This is by far the craziest thing I have ever encountered in coding javascript. I guess not many of you may know. Which one is right?

function h1() {
  return {
    status: true
  };
};

function h2() {
  return
  {
    status: true
  };
}

What? Not all of them are right? Wait? There is right or wrong? They are just different styles, isn’t? Hell NO! Only function h1 is right, I tell you. h1 returns the expected object but h2 returns undefined. This is because javascript interpreter has a “nice” function named “automatic semi-colon insertion”. The results are listing one returns the expected object but h2 returns undefined. But why? Someone has a thorough explanation. I don’t repeat here. Please check the bottom of this post.

4. Try to avoid global variables

By global variables, what it means is a variable attached to window object. Since window object is available to everyone, it is why use of global variables is vulnerable to cross-site scripting attacks. Another reason is a weird implementation of Internet Explorer. IE7+ browsers attach every element with an ID a variable to window object. If you are using a global variable name same as an element’s ID, you will end up error message popping out. (for more detail see Rick Strahl’s post)

Did you notice all these things before? Don’t get red-faced. I just know all these a few days ago. This post is actually inspired by (should be “copied from”) a presentation by Douglas Crockford from Yahoo at Google TechTalk (video) and is only about his beginning part. There are much more cool things about his presentation that worth noting. So try to make your javascript code better from today! And be sure to check out his JSLint.