Silent Failure of Javascript

Javascript is the world’s most used programming language nowadays. Your Javascript application can attract billions of audiences and there is no other programming language can achieve a similar scale. However, the Javascript has some very bad language features, for example, the global variables [also see this post] should be avoided whenever possible in order prevent global variables collisions with other package.  The automatic semicolon insertion may be one of the worst. The Javascript interpreter will try to add a semicolon if it can’t find one and it thinks it is necessary. For example,

1
2

var a = 1   // ; semicolon insertion
var b = 2;

var a = 1   // ; semicolon insertion
var b = 2;

This will bring many inconsistency programming styles as well as messy confusions or even chaos. The curly brace styles, unlike most modern programming language, does actually matter in Javascript. Considering the following,

1
2
3
4
5
6

function test() {
    return {
        'abc': 'def'
    }
}
alert(test()['abc']);

function test() {
	return {
		'abc': 'def'
	}
}
alert(test()['abc']);

It will print the def, as the test function returns object notation with key pair abc = def. However, if you change to following,

1
2
3
4
5
6
7

function test() {
    return 
    {
        'abc': 'def'
    }
}
alert(test()['abc']);

function test() {
	return 
	{
		'abc': 'def'
	}
}
alert(test()['abc']);

It will not work and Javascript does not report anything, no errors or warnings at all! Why is this? The Javascript automatically adds a semicolon after return and the rest of the function becomes unreachable code which Javascript does not care.

1
2
3
4
5
6
7

function test() {
    return  // ; semicolon insertion
    {       // useless 
        'abc': 'def' // ; semicolon insertion, emtpy statement
    }       // useless
}
alert(test()['abc']);

function test() {
	return  // ; semicolon insertion
	{       // useless 
		'abc': 'def' // ; semicolon insertion, emtpy statement
	}       // useless
}
alert(test()['abc']);

However, under Windows Script Host (WSH), the following code will generate an error. The Microsoft implementation of JScript (BTW, JScript is the same language as Javascript, it is the Microsoft’s implementation of Javascript, the name changed to JScript in order to avoid copyright-related issues) does not like the style at all.

1
2
3
4
5
6
7
8
9

function test1() {
    return 
    {
        'abc': 'def'
    }
}
 
var obj = new ActiveXObject("WScript.Shell");
obj.popup(test1()['abc']);

function test1() {
	return 
	{
		'abc': 'def'
	}
}

var obj = new ActiveXObject("WScript.Shell");
obj.popup(test1()['abc']);

Generally, there is no right or wrong regarding to where you put the left curly brace, either on the same line or the next line with the same indent of right curly brace. But it is recommended to stick to the first style in Javascript, because it will work.

–EOF (The Ultimate Computing & Technology Blog) —