Written by Ramón Saquete
JavaScript is, by necessity, one of the most widely used Web programming languages. In contrast, its foundations and most fundamental principles are not understood by most developers who think they know the language moderately well. To know how this situation has come about, we need to know how it has evolved over the short history of the Web:
It was 1995 when Brendan Eich was commissioned to develop a script language for version 2.0 of the previously famous “Netscape Navigator“. Netscape had recently added support for Sun’s Java technology, so they asked Brendan to develop a language that would be like Java’s dumb brother and JavaScript was born, as a language so simple that even amateurs would be able to use it. By the way, if you don’t want to sound like amateurs, never make the classic mistake of referring to JavaScript as Java.
Microsoft had to incorporate this new scripting language into Internet Explorer in order to be competitive in the Web technology race.
But time passed, Netscape lost the browser war with Microsoft and its developers, led by Brendan, formed the Mozilla foundation that currently organizes the development of the next versions of JavaScript. That is why its browser, Firefox, is the one that best supports the new language features.
Since the language had to evolve and all browsers had to work in the same way with the new functionalities, in 1997, the ECMAScript standard was created. which serves as the basis for the development of JavaScript and other scripting languages, the latest version of ECMAScript being ECMAScript 5 and JavaScript 1.8. Due to this evolution of the language, the increasingly complex Webs and the use of AJAX, engineers began to take more interest in the language. Some started to create very powerful libraries such as Prototype, MooTools, jQuery, which make the language easier to use and improve its interoperability between browsers. In addition, since a few years ago, its performance has been greatly improved from an interpreted language to a compiled language at runtime.
At this point many programmers emerge who, based on libraries developed by others , can pretend to know JavaScript, until they are asked to develop something outside of what the library or plugins they can find allow them to do. Plugins that are often developed by people who do not understand the language very well, so we can find serious failures, such as memory leaks that cause the computer to hang when leaving the page open for a while.
When JavaScript is used on the server, with the not-so-recently developed Node.js, the situation is much worse, in an environment where almost every calls are asynchronous, where much more code needs to be implemented and developers do not understand the language, a lot of spaghetti, repetition and errors are generated in the code that makes this type of project impossible to maintain.
The problem with these developers is that they learned to use the language years ago and even with outdated books and tutorials, leaving them with the false feeling that they had mastered the language forever, but that is not the reality. JavaScript, like all other Web technologies, is a language that is never fully understood because it is constantly evolving, and anyone who is not self-taught cannot keep up with it. Many of the developers who learned from the documentation that was available for the early versions of JavaScript, when it was an easy language, have missed how it has evolved into a type of object-oriented language that is unlike 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 concepts that many programmers either don’t understand or don’t know that they have to be understood differently in JavaScript. These different characteristics of the current JavaScript with respect to the rest of languages, is what makes it one of the most difficult languages to learn.
As a hobby, I leave you an example where it is necessary to know these concepts and some more like hoisting, to simply know what 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 necessary knowledge and desire I encourage you to leave in the comments, the explanation of why each variable takes each value in each line shown in the console. If nobody manages to solve everything and someone asks for it I will leave you the solution.
When we talk about client code in a browser, this lack of knowledge extends beyond the language and methods defined in ECMAScript, reaching the DOM objects and the BOM provided by the browser to the language. For example, it is not uncommon to encounter programmers who have never heard of the bubbling or event capture defined in DOM Level 2 (the latest specification is 3 and 4 is under development) and let’s not talk about new extensions and APIS defined by the DOM Level 2. WHATWG in the HTML5 specification such as Web workers, Web Sockets or Web storage.
If we go to advanced language concepts, what happens to 99% of developers is not that it sounds like Chinese, but like the language of the heavens, which is what the Chinese say when they want to say that something sounds like Chinese to them. I am referring to concepts such as programming patterns (e.g. the currying or memoization), know how to measure performance and how to optimize the code, know which parts should not be used (which have been kept for backward compatibility), understand cyclomatic complexity, know how to use tools to measure code quality, tools to perform unit tests, etc.
