JavaScript: the most misunderstood language

Ramón Saquete

Written by Ramón Saquete

JavaScript is, out of necessity, one of the most used programming languages in web development. In contrast, its fundamental bases and principles are not understood by the vast majority of developers who think they are more or less familiar with the language. To understand how we’ve got to this situation we need to look into its evolution throughout the short history of the Web:

Brendan EichIt was the year 1995, when Brendan Eich was tasked with the development of a scripting language for version 2.0 of the then well-known “Netscape Navigator” browser. Netscape had recently become compatible with the Sun Java technology, so Brendan was requested to develop a programming language that would be like Java’s dumber brother, and that’s how JavaScript was born. It was set to be so simple, that even informal programmers would be able to use it. By the way, if you don’t want to look like an amateur, never make the classic mistake of referring to JavaScript as Java.

Microsoft had to introduce this new scripting language to Internet Explorer, in order to be competitive in the web technology race.

Time went by, Netscape lost the war of Internet browsers to Microsoft, and the developers lead by Brendan created the Mozilla foundation, which currently organises the development of the next JavaScript versions. That’s exactly why their browser, Firefox, is the one that best supports the newest features of the language.

Because the languages had to evolve, and all browsers had to work in the same way with the new features, in 1997 the ECMAScript standard was created, which is used as basis for developing JavaScript versions, as well as for other scripting languages. The latest ECMAScript version is v.5, and JavaScript’s is v.1.8. As a result of this evolution of the language, the fact that websites were ever more complex, in addition to AJAX usage, us engineers have begun getting more interested in the language. Some started to create very powerful libraries like Prototype, MooTools, jQuery… which make it easier to use the language, and improve its interoperability between browsers. Moreover, not long ago, its performance has been improved considerably, going from an interpreted programming language, to a compiled programming language.

jqueryAt this point, there are many developers, who, using third-party libraries, can feign knowing JavaScript, until they are requested to develop something outside the limitations of the library or plug-ins they can find. Such plug-ins are often developed by people who don’t understand the language very well either, which leads us to run into some very serious errors, such as memory leaks, which make the entire system freeze when a page is left open for some time.

node jsWhen JavaScript is used server-side, with the no-longer-so-recent Node.js, the situation becomes much worse, in an environment where almost all calls are asynchronous, where a lot more code needs to be implemented and developers do not understand the language. This generates so much spaghettification, repetition and errors in the code, that this type of projects become impossible to maintain.

The issue with these developers is that they learnt to use the language years ago, and with obsolete books and tutorials, leaving them with the false security of thinking they now dominated the language for all eternity. This, of course, couldn’t be farther from reality. JavaScript, as any other web technology, is a language that you never stop learning, because it is continuously evolving, and those who don’t have self-teaching discipline will not be able to follow it. Many of the developers who learnt from the documentation of early versions of JavaScript, when it was an easy programming language, have missed its evolution, to become an object-oriented language that looks nothing like any other.

Basic concepts such as closures, prototypical inheritance, interpreting the context of this depending on the call, or simply understanding the scope of a variable; are all concepts, which to many programmers sound completely unfamiliar or they cannot understand them in the context of JavaScript. These different features that distinguish JavaScript from the rest of the languages, are exactly what make it one of the most difficult programming languages to learn.

As a passtime, here’s an example where you need to know these concepts, and some other ones such as hoisting, to simply know which are the values of some variables.

function foo1(){
this.var1 = 2;
this.var2 = 3;
var4 = 10;
var var5 = 11;
}

function foo2(){
this.var1 = 0;
this.var4 = 7;
}

var obja = new foo2();
foo2.prototype.var3 = 5; 
foo2.prototype = new foo1(); 
foo2.prototype.var3 = 6; 
var objb = new foo2();
var objc = new foo2();
objb.var4 = 8;

console.log("obja.var3: " + obja.var3);
console.log("obja.var2: " + obja.var2);
console.log("objb.var3: " + objb.var3);
console.log("objb.var1: " + objb.var1);
console.log("objb['var4']: " + objb['var4']);
console.log("objb.var2: " + objb.var2);
obja.var1 = 10;
obja.constructor.prototype.var2 = 9;
console.log("objc.var1: " + objc.var1);
console.log("objc.var2: " + objc.var2);
console.log("var4: " + var4);
console.log("(typeof var5): " + (typeof var5));

var var6 = '!';
var foo3 = function(var7){
console.log("(typeof var6) +' '+ var4: " + (typeof var6) + ' ' + var4);
var var6 = 'hola'; 
this.var6 = 'adios';
return function(var7){
var var8 = {};
var8.a = 12;
var var9 = 14;

this.show = function(){
console.log( 'var6 + var7: ' + var6 + var7 );
};
this.getVar8 = function(){
return var8;
};
this.getVar9 = function(){
return var9;
};

};
}();
foo3.var6 = 'adios';

var objd = new foo3(' mundo');
objd.show();
var aux = objd.getVar8();
aux['a'] = 13
aux = objd.getVar9();
aux = 15;
console.log('objd.getVar8().a '+objd.getVar8().a);
console.log('objd.getVar9() '+objd.getVar9());
foo4.apply(obja);
console.log(var6);

function foo4(){
console.log('this.var1: ' + this.var1);
}

If you have the knowledge and the willingness to participate, I encourage you to leave in the comments the explanation of why each variable takes each corresponding value in the line displayed in the console. If no one is capable of resolving the whole thing and someone requests it, I’ll post the solution for you.

When we talk about client-side code in a browser, this lack of knowledge extends way beyond the language and the methods defined in ECMAScript, all the way to the DOM and BOM objects the browser provides to the language. For example, it’s not odd to run into programmers who have never heard about event bubbling or event capturing defined in DOM Level 2 (the latest spec is 3 and 4 is in the works), and we’re not even talking about extensions and new APIs defined by WHATWG in the HTML5 spec, like Web workers, Web sockets or Web storage.

If we go to advanced language concepts, what happens to 99% of developers is, as we say in Spanish, it doesn’t just “sound like Chinese” to them, but it’s actually “ghost script“, which is what the Chinese people say when they mean that something is entirely unintelligible to them. I’m talking about concepts such as programming patterns (for example, currying or memoization), knowing how to measure performance and how code should be optimised, knowing which parts should not be used (that are maintained for backwards compatibility), understanding the cyclomatic complexity, knowing how to use tools to measure the quality of the code, tools to conduct unit tests, etc.

With all this now out in the open, how would you like if we prepared a JavaScript course for our Human Level Training programme? Would you be interested?

Ramón Saquete
Autor: Ramón Saquete
Web developer at Human Level Communications online marketing agency. He's an expert in WPO, PHP development and MySQL databases.

Leave a comment

Your email address will not be published. Required fields are marked *