DEV Community

loading...

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

marpme profile image marpme (Marvin) ・3 min read

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');
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]);

Enter fullscreen mode Exit fullscreen mode

Default Parameters

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

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

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)
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (5)

pic
Editor guide
Collapse
defman profile image
Sergey Kislyakov πŸ‡·πŸ‡Ί πŸ‡ΊπŸ‡Έ • Edited

async, await, Object.values, Object.entries and Object.getOwnPropertyDescriptors are part of ES7 and supported in NodeJS 7+ and modern browsers.

developer.mozilla.org/en-US/docs/W...

developer.mozilla.org/en-US/docs/W...

developer.mozilla.org/en-US/docs/W...

developer.mozilla.org/en-US/docs/W...

Collapse
marpme profile image
marpme (Marvin) Author

Hey there defman,

I just had a look into your sources and it clearly states, that it is within the ES8 (aka. 2017) Standard, but you are right that it is already supported by all of the common browsers. So I will adjust the article quite shortly to prevent confusions!

Thank you and have a great day!

Collapse
defman profile image
Sergey Kislyakov πŸ‡·πŸ‡Ί πŸ‡ΊπŸ‡Έ

Ahh I see, that's some weird versioning though.

Collapse
chozzz profile image
Choz • Edited

Weird hey, I just noticed that its just documented in ES8 spec, but I believe they were there in ES7.

Collapse
srirammahadevan profile image
Sriram.Mahadevan

Great article... I feel like seeing a lot of similarities between this and python