Es6 vs Es7 Changes in Javascript's lifecycle [ES6,ES7,ES8]

First off, I would like to dig a bit deeper into the current situation on how Javascript is actually built upon and then we can dive into some critical changes that have to be applied at some time to maybe maintain the sustainability of your project or to have a more readable/easier to understand code pieces.

What is Javascript actually?

Well, to determine what Javascript we have to dig a bit deeper. Did you ever hear of ECMAScript? It's the standardized language behind the actual implementation which is represented by Javascript. So all changes we are talking about will already be available within the Standard of ECMAScript, but may not be available in Javascript as of now or better to say within your current project. See babeling your project as a possible solution for this.

ECMAScript is also the reason why most developer call for ES5 (ECMAScript 5)/ES6 (ECMAScript 6) support within their project.

It's basically the level of standardization of their projects. In comparison, you are actually able to stick your USB3 supporting stick in your USB2 slot, but it might lack some features of USB3, but the way around you can also stick your USB2 device into USB3 supported slot, but that might also lack some USB3 features. In computer science, we are naming this upwards- / downwards-compatibility.

These compatibilities are all over the place. And those are ensured by the ECMAScript Standard which is run by the TC39 committee. This committee is also deciding what should reach their final standard and what not.

ES6 vs ES7 (aka. 2016)

Array.indexOf vs Array.Includes

// ES6 way of searching for values in an array
let numbers = [1, 2, 3, 4];
if(numbers.indexOf(2) !== -1) {
  console.log('Array contains value');
}

// ES7 way of searching for values in an array
if(numbers.includes(2)) {
  console.log('Array contains value');
}

Exponentiation Operator

let base = 3;
let exponent = 4;

// old way Math.pow()
console.log(Math.pow(base ,exponent)) //81

// new way
console.log(base**exponent); //81

Destructuring

// Before:
var width = 200;
var height = 400;

// After:
let [width, height] = [200, 400];

// before: 
const calculateArea = (areaParameters) => areaParameters[0] * areaParameters[1]
calculateArea([200, 400]);

// or for better naming in older functions:
const calculateArea = ([width, height]) => width * height
calculateArea([200, 400]);

Default Parameters

// before:
const myFunction = (name) => name ? `I love ${name}` : 'I love marpme'

// now:
const myFunction = (name = "marpme") => `I love ${name}`

Spreading Arguments within functions

// before with an arraylike object, very difficult:
const sumAll = () => arguments.reduce((sum, next) => sum + next, 0)

// now, real array also more way clear
const sumAll = (...numbers) => numbers.reduce((sum, next) => sum + next, 0)

Array Concat

//before: 
const arrayOne = [1,2,3]
const arrayTwo = [4,5,6]
Array.prototype.concat(arrayOne, arrayTwo) // [1, 2, 3, 4, 5, 6]

// now shorthand:
const arrayOne = [1,2,3]
const arrayTwo = [4,5,6]
const new = [...arrayOne, ...arrayTwo] // [1, 2, 3, 4, 5, 6]

Object assigning/merging

//before: 
const objectOne = { love: true, number: 6 }
const objectTwo = { es7: false, number: 8 }
Object.assign({}, objectOne, objectTwo) // {love: true, number: 8, es7: false}

// now shorthand:
const objectOne = { love: true, number: 6 }
const objectTwo = { es7: false, number: 8 }
const new = {...objectOne, ...objectTwo} // {love: true, number: 8, es7: false}

Classes, Inheritance ...

see your old java classes, we won't need that in javascript. Keep it real and go for a basic functional approach and you are going to be good.

// Before:
var Person = function(name) {
 this.name = name; 
}

Person.prototype.sayHi = function() {
 console.log(`hi, I'm ${this.name}!`); 
}

// After - this produces exactly the same as above:
class Person {
  constructor(name) {
    this.name = name; 
  }

  sayHi() {
   console.log(`hi, I'm ${this.name}!`);
  }
}

// Let's test it:
var jack = new Person('Jack');
jack.sayHi();

ECMAScript 8 (ES8/2017)

Also fully supported by any of the Javascript implementations (V8-Chrome, NodeJS etc ...). It basically comes with the async/await pattern which removes the pain of handling promises in a 'chainy' manner.

Object.values / Object.entries, which returns you either an array of all object values or all object keys.

Support for having getOwnPropertyDescriptors(obj); on Objects. This will, in the end, allow us for having the possibility to build decorators around those objects.

Also, memory shared objects like SharedArrayBuffer, which can actually be used by many threads at the same time. And also a namespace for an object called Atomic with some static methods to handle such thread mechanisms.