Next Generation Javascript Recap

We had our recent CMBJS Meetup where we had some talks about ES6 and some talks which had code of Next-gen JS (Next generation Javascript) and some newbies seems to get confused. We had session some years back when they came to spotlight. But thought of creating a small blog article combining all. Hope you gain something from this short and sweet pointed post.

What is ES5, ES6, ES2015, ES7?

JavaScript standard officialy refered as ECMAScript (ES). ES5 is been standardize in 2009 and took while to get browser support. Then ES6 started to draft and TC39, the team responsible for the drafting the standards decided to move towards yearly model. So ES6 is renamed to ES2015 , ES7 is ES2016, ES8 is ES2017 and all other future proposed changes are refered as ES Next in simple explanation.

let and const

These are two keywords to creating new variables. let is like new and better var removing its functionality made a headaches and const is to define constants.

const name = 'Chathu';

let timeDifference;

Still var is working but better to skip using it.

Arrow functions

No more this keyword issue!

const circumstance = r => 2 * PI * r;

Modules (Exports and Imports)

book.js

// book.js
const book = {
    name = "Davinci Code"
}

export default book;

util.js

// util.js
export const ISBM8To13 = (isbnNumber)=> {
    ...
}

app.js

// app.js
import book from './book.js';
import Books from './book.js';

Classes

There is two updates in defining class properties. In ES6 you had to use a constructor function to define them. But in ES7 you can define them directly.

** ES6 way **

class Book{
    constructor(){
        this.title = "Angles and Daemons"
    }
    addToWishList(){

    }
}

** ES7 way **

class Book{
    title = "Angles and Daemons"
    addToWishList = () => {}
}

Spread and Rest operators

Spread Operator (...) use to spread out Array or Object properties.

const numbers = [2,4,6];
const newNumbers = [...numbers, 8, 10];

Rest operator (...) (Yeah! same operator) used to merge list function arguments to list of array.

const sort = (...args) => {
    return args.sort();
}

Destructuring

This operation help us to easily extract array elements or object properties to store in variables.

// Array destructuring
const numbers = [1, 2, 3];
[num1,num2] = numbers;
console.log(num1); // 1
console.log(num2); // 2

// Object destructuring
{title} = { title: "Inferno", author: "Dan Brown" };
console.log(title); // Inferno
console.log(author); // undefined

---

For further reading

• WTF is ES6, ES8, ES 2017, ECMAScript…?
• You Don’t know JS: ES6 and beyond

---

This was also drafted while ago and I managed to finalize this now. It misses new annoucements but will later add posts about it.