ES5 vs ES6

All around the internet you’ll see the abbreviation ES floating around.

What is ES?

• ES stands for ECMAScript.
• ECMAScript is a standard.
• JavaScript is the language that follows the ECMAScript standards.
• ES2015 is the same as ES6, don’t let that confuse you!

Anyway…I used to write ES6 in my previous life. Today is different, I’m forced to write ES5 because we still use the built-in bundle.config of ASP .NET MVC which doesn’t support ES6. Changing the bundler is a lot of work, so me and my team won’t be expecting to write ES6 anytime soon.Here are some of the most important differences!

ES5 vs ES6

let and const keyword

ES5 does not support let and const

let a;
const b = 5; //immutable

Arrow Functions

ES5 does not support arrow functions:

var myFunc = function(param) {
}

ES6:

var myFunc = (param) => {
}

String interpolation

ES5:

console.log('Hi ' + name);

ES6 supports back ticks:

console.log(`Hi ${name}`)

Destructuring

ES5:

var obj = {a: 1, b: 2, c: 3};
    
var a = obj['a'],
    b = obj.c;
console.log(a, b);

ES6:

var [a, , b] = [10, 20, 30];
console.log(a); // result: 10
console.log(b); // result: 30

Another great example in ES6:

words = () => { 
    return {
        positive: "Awesome", 
        negative: "Sucks", 
        neutral: "Ok"
    }
}
var {positive, negative, neutral} = words()
console.log(positive); // result: Awesome
console.log(negative); // result: Sucks
console.log(neutral); // result: Ok

Default

ES6: set a default value in your parameters

function f(x, count=5) {   
    return x * count; 
}

Spread

ES6

var parts = ["tire", "wheel"]; 
var copyArray = [...parts];
copyArray.push("door");
console.log(parts); // result: ["tire", "wheel"]
console.log(copyArray; // result: ["tire", "wheel", "door"]

Note: Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays, as the following example shows. (The same is true with Object.assign() and spread syntax.)

Modules & Module Loaders

ES6:

import {sayHi, sayBye} from './say.js';

Promises

ES6:

var p1 = new Promise((resolve, reject) => {   setTimeout(() => resolve("1"), 101) })

Inheritable Built-ins

ES6:

class CustomArray extends Array {  }
var a = new CustomArray();
a.push(10);

Unicode

ES6:

console.log("\uD842\uDFD7")

For a deeper dive into ES6 visit: https://www.javatpoint.com/es6

Enjoy!