Click here to Skip to main content
13,146,742 members (79,754 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

7.9K views
8 bookmarked
Posted 21 Sep 2016

JavaScript: The Good and The Bad

, 25 Sep 2016
Rate this:
Please Sign up or sign in to vote.
A comprehensive post on why JavaScript is an awesome language and why JavaScript is horrible at times

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 string123 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:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dheeraj Kumar Kesri
Software Developer Apttus
India India
I'm a software developer in Bangalore, India. I have special interest in web development and I blog at www.code-morning.com

You may also be interested in...

Comments and Discussions

 
Question5ed Pin
Karthik Bangalore27-Sep-16 5:34
professionalKarthik Bangalore27-Sep-16 5:34 
PraiseComprehensive Pin
Member 1268997125-Sep-16 20:33
memberMember 1268997125-Sep-16 20:33 
GeneralRe: Comprehensive Pin
Dheeraj Kumar Kesri25-Sep-16 20:45
professionalDheeraj Kumar Kesri25-Sep-16 20:45 
GeneralMy vote of 5 Pin
Suvendu Shekhar Giri25-Sep-16 6:23
mvpSuvendu Shekhar Giri25-Sep-16 6:23 
GeneralRe: My vote of 5 Pin
Dheeraj Kumar Kesri25-Sep-16 20:43
professionalDheeraj Kumar Kesri25-Sep-16 20:43 
QuestionThank you It help me and protect Pin
Piotr Dusiński22-Sep-16 21:01
memberPiotr Dusiński22-Sep-16 21:01 
AnswerRe: Thank you It help me and protect Pin
Dheeraj Kumar Kesri23-Sep-16 8:20
professionalDheeraj Kumar Kesri23-Sep-16 8:20 
Generalnice Pin
King Fisher21-Sep-16 21:15
professionalKing Fisher21-Sep-16 21:15 
GeneralRe: nice Pin
Dheeraj Kumar Kesri22-Sep-16 19:36
professionalDheeraj Kumar Kesri22-Sep-16 19:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.170915.1 | Last Updated 25 Sep 2016
Article Copyright 2016 by Dheeraj Kumar Kesri
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid