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]