The ECMAScript standard

In the beginning, some companies such as Microsoft were trying to develop their own JavaScript implementation, in this case, JScript for Internet Explorer 3.0, in the year  1996. To define a standard, Netscape delivered JavaScript to the European Computer Manufacturers Association (ECMA), a standards organization for information and communication systems.

The first edition of ECMA-262 was adopted by the ECMA General Assembly in June 1997. Several editions of the language standard have been published since then. The name ECMAScript was a compromise between the organizations involved in standardizing the language, especially Netscape and Microsoft, whose disputes dominated the early standards sessions.

So, after all these standardization processes and paperwork, what are we using? ECMAScript, JScript, ActionScript, or JavaScript? Are they the same? Well, basically no. After the standardization, ECMAScript was defined as the main language, and JavaScript, JScript, and ActionScript are dialects of this language, of course, JavaScript being the most known and used.

The ECMAScript Version 5 is supported by most browsers nowadays, released in 2011. Some of the features managed for this version are as listed:

• Support for new Array methods
• Support for manage dates
• Support for JSON

At this point, we’ve seen pure ES5 syntax, very verbose, sometimes highly coupled with other functionality, and if we are planning to develop a big application, it can become difficult to maintain.

Thank God we won’t have to deal with this syntax anymore. The ECMAScript 6 (ES6) version came with a lot of changes that simplify the development and understanding of our code.

ES 6

This version arrives with significant changes in the language syntax. Let's review the new features and compare with the ES5 syntax.

In ES5, to make a near representation of an object in JavaScript, we commonly type something like this:

function Person(name, age) {
    this.name = name;
    this.age   = age;
}
Person.prototype.sayHi = function() {
    return 'Hi, my name is ' + this.name + ' and i have ' + this.age + ' years old';
}

var Erikson = new Person('Erikson', 26);
Erikson.sayHi(); // 'Hi, my name is Erikson and i have 26 years old'

If we want to improve our code, maybe we can do some refactoring, as follows:

function Person(name, age) {
    this.name = name;
    this.age   = age;

    this.sayHi = function () {
        return 'Hi, my name is ' + this.name + ' and i have ' + this.age + ' years old';
    }
}

That's how Object-Oriented Programming (OOP) is done on JavaScript these days, but for programmers with previous experience on Java or PHP, that syntax result is a little difficult to understand, because they are not dealing with real objects, they are dealing directly with the prototypes. ES6 introduces a new syntax to declare objects:

class Person {
    
    // Contructor define properties for our object representartion
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    // Class method
    sayHi() {
        return 'Hi, my name is ' + this.name + ' and i have ' + this.age + ' years old';
    }
}
var Erikson = new Person('Erikson', 26);
Erikson.sayHi() // Hi , my name is Erikson and I have 26 years old

As you can see, now, the syntax is more readable and understandable, and we can extend from another class, just like other languages, such as Java:

class Developer extends Person {

    constructor(name, age, role){
        super(name, age)
        this.role = role;
    }
    sayHi(){
        return super.sayHi() + ' and i am a ' + this.role
    }
}
var Erikson = new Person('Erikson', 26, 'Javascript developer');
Erikson.sayHi() // 'Hi, my name is Erikson and i have 26 years old and i am a Javascript developer'

Also, of course, we can use encapsulation principles to manipulate our object properties. Similar to Java, we can define mutator methods to get the property value or set some value to a property:

class Person {

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    get checkName() {
        return this.name;
    }
    set giveName(newName) {
        this.name = newName;
    }
}
var Erikson = new Person('Erikson', 26);
Erikson.checkName() // returns Erikson
Erikson.giveName('Hazis')
Erikson.checkName() // returns Hazis

Having these kind of methods does not avoid the fact that you can still be using the JavaScript native syntax to change the values or add properties at runtime. You will still be able to do the following:

Erikson.name = 'Diego'
Erikson.name // Returns Diego

Like other languages, ES6 allows static methods using the static modifier:

class Example {
    static returnMessage(){
        return 'From static method'
    }
}
let staticMessage = Example.returnMessage() // From static method

Do you note something? In the last example, we used let instead of var to declare a variable. ES6 has two new ways of defining a variable: let is the direct replacement of var, and const will be used if we are declaring a constant. Can we still use var instead of the new ES6 declaration syntax? Yes, but let's imagine that you are an experienced developer and have two trainees under your supervision. In your code, you can define something like this:

var PI = 3.1416

Also, of course, we do not want this value changed, for any reason. As this is still a var, any trainee developer is able to change the value, directly or indirectly (from a method call, assignation error, bad comparison syntax, and so on), so we are exposed to get errors on our application. To prevent these kind of scenarios, const would be a more accurate modifier for this variable.

Does ES6 only improve syntax for objects' declaration? No. At this moment, we only focused on our class definition syntax, because it will be the core of all applications, just like OOP. Now, we will check other improvements that we are pretty sure you will find very useful in your day-to-day work.

A very important note: You must know that different to other code languages, in Javascript you can define const MY_ARRAY = [] and you will still being able to do MY_ARRAY.push(3). The const prefix will only avoid the overwriting, so you cannot do MY_ARRAY = [1,2]

Arrow functions

You need to iterate over the elements of an array; normally, you would write something like this:

var data = ['Ronaldo', 'Messi', 'Maradona'];
data.forEach(function (elem) {
    console.log(elem)
});

With the arrow functions, you can refactor your code and write something as follows:

var data = ['Ronaldo', 'Messi', 'Maradona'];
data.forEach(elem => {
    console.log(elem);
});

The arrow (=>) operator defines a function in one line, making our code readable and ordered. First, you need to declare the inputs; the arrow will send these params to the function body defined by the operator:

// We could transform this
let sum = function(num) {
    return num + num;
};
// Into just this
let sum = (num) => num + num;

String interpolation

Do you remember those times when you needed to concatenate a string using the + operator? It won’t be necessary anymore. For example, the following code concatenates string1 and string2 using the + operator:

let string1 = "JavaScript";
let string2 = "awesome";
let string3 = string1 + " " + string2

Now, let's look at how interpolation helps us write simpler code:

let string1 = "JavaScript";
let string2 = "awesome";
let string3 = `${string1} ${string2}`

Destructuring

We have a new way to assign values to objects and arrays. Let’s look at some examples:

var [a, b] = ["hello", "world"];
console.log(a); // "hello"
console.log(b); // "world"

var obj = { name: "Diego", lastName: "Arguelles" };
var { name, lastName } = obj;
console.log(name); // "Diego"

var foo = function() {
    return ["175", "75"];
};
var [height, weight] = foo();
console.log(height); //175
console.log(weight); //75