JavaScript: The Good and The Bad

In one of my posts on JavaScript, I talked about why JavaScript is a great language, how it evolved since its inception and how it influenced the world wide web. This post will dive deep into the great features of the language. JavaScript comes with a lot of horrible drawbacks as well. It is said that JavaScript is the world’s most popular language and the world’s most unpopular language.

The Good

JavaScript comes with a bundle of goodness. You can make some really cool animations, develop awesome games, give your website some excellent visual effects or use the language to send and receive information from backend systems.

There are many features in JavaScript that make it unique.

It’s Lightweight

JavaScript is very lightweight and runs on the browser making user interactions fast and responsive. Since most of the processing is done without hitting the server, the responses are instant. Calls to the server are made through AJAX leaving the user interface unblocked.

Dynamic Objects

JavaScript objects are dynamic. We can add or remove the properties or functions at runtime giving developers a high level of flexibility and control. Doesn’t sound great? I have covered JavaScript objects in much detail in my post JavaScript Objects in Depth.

Powerful Functions

JavaScript is all about functions. Functions are extremely powerful and are treated as first class citizens. Functions in any language contain some lines of code to perform a specific action. But in JavaScript, functions do much more. A function can be used as a constructor in order to create new objects. Functions are used to create closures, yet another powerful feature of the language. Functions may contain properties and even other functions. Functions can be passed as arguments to other functions. Functions can be named or anonymous. You can find more on functions in my post Understanding Functions in JavaScript.

Closures

Closures in JavaScript are inner functions. That means they are created inside a function and have access to the parameters and variables of outer function. Closures are used heavily in JavaScript libraries and frameworks like jQuery. Understanding closures in depth need a separate post that will come soon.

There are many other good parts in JavaScript like lambdas, callback functions, asynchronous JavaScript aka AJAX, prototypes and list goes on.

The Bad

This is going to be interesting. Yeah, JavaScript has many bad things and is the most hated language says Douglas Crockford, father of JSON and author of JSLint.

Let’s use this opportunity to criticize some of the features in JavaScript.

Global Variables

The list of evils starts with global variables. Global variables are created outside of function scope and are prone to errors and undesired behavior. Since they can be changed (knowingly or unknowingly) from any part of the application, chances are high that your program may behave unexpectedly. While this is the problem in any programming language that supports global variables, they are even worse in JavaScript. Global variables can be created in different ways in JavaScript:

Outside function

var myStr = "Code Morning";

Without using var keyword (accidental case)

otherStr = "I'm global now";

Variables created without var keyword become global variables leaving developers totally unaware.

When trying to create multiple variables in a single line (accidental case)

var x = y = 1;

If you are writing this statement within a function, then you may expect that two local variables are created inside the function. Sounds correct as many languages behave like that. But surprisingly, that’s not the case with JavaScript. While ‘x’ will be a local variable, JavaScript will treat ‘y’ as global variable, again something which you will never expect if you have used other languages.

Semicolons

JavaScript tries to be smart and helpful to novice programmers by inserting semicolons automatically at places where they’re missing but are mandatory. JavaScript interpreter applies some rules to insert semicolons.

While this leaves the developers less bothered about the syntax errors caused by semicolons, it is dangerous at times and results in undesired bugs that are hard to detect.

If you declare some variables like this:

var myVar
var myOtherVar

JavaScript will change the statements like this:

var myVar;
var myOtherVar;

That looks great, isn’t it? Hold on! Consider this statement which, at first glance looks correct syntactically:

function myfun() {
   var myVar = "Say Hi!";
   return
      myVar;
}

But JavaScript does an awful job here. It inserts a semicolon at the end of return statement making the function return undefined.

function myfun() {
   var myVar = "Say Hi!";
   return;
      myVar;
}

While this is not a very obvious example, the one below looks more practical when you want to return an object from a function:

function myfun() {
   return
   {
      name: "Tom",
      age: 21
   };
}

That’s probably one of the reasons ‘{‘ starts on the same line whenever a pair of curly braces are required (see the function definition above).

Automatic semicolon insertion takes place when JavaScript encounters a line terminator (end of the line) or a closing curly brace ‘}’ in statements. That also includes return, throw, continue and break statements.

Equality Operators

JavaScript comes with two sets of equality operators: “==” and “!=” and their siblings “===” and “!==”. The recommended set of operators to use are “===” and “!==” as they check both, the value and the type of the operands. The other evil set just checks for the value ignoring the type of the operands. See the statements below for some examples:

123 == '123' 		//this will produce true
123 === '123' 		//this will produce false
0 == '' will 		//this produce true
false == 'false' 	//this will produce false
false == '0' 		//this will produce true

The rule JavaScript applies to perform comparison with “==” and “!=” are not easy to remember. So it’s advised that you always use the other set “===” and “!==”.

There are more awkward features in the language that make life difficult at many times. Few more to list are:

• “+” operator which does both addition and concatenation depending on the type of operands. So the output of 2 + 3 will be 5 but the output of 2 + “3” will be “23”.
• “parseInt” operator which will give you an integer value 123 even for the string “123 hello world”.
• And so on…

It’s advised to use a tool like JSLint or JSHint to check your JavaScript code for possible errors and violations. These tools will list out the errors in your code and also suggest you to follow the best practices.

Leave your comments if you have any questions or suggestions. Use any of the share buttons to let others know you learnt something special today.

You might also be interested in:

• JavaScript: The game changer
• JavaScript Objects in Depth
• Hoisting in JavaScript