Frontend Development: Modern JavaScript ES6, ES7 & ES8

The ECMAScript standards ES6, ES7, and ES8 introduced a host of powerful features that have redefined JavaScript. Let's take a look at some of these key features from each version.

ES6 (ECMAScript 2015)

ES6, or ECMAScript 2015, brought about a revolution in JavaScript with the introduction of features such as Arrow Functions, Classes, Promises, Template Strings, and Modules.

// Arrow function
const sum = (a, b) => a + b;

// Class
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

// Promise
let isMomHappy = true;
let willIGetNewPhone = new Promise(
  (resolve, reject) => {
    if (isMomHappy) {
      resolve('Yes, you will get a new phone');
    } else {
      reject('No, you won\'t get a new phone');
    }
  }
);

ES7 (ECMAScript 2016)

ES7 was a smaller update compared to ES6 but nonetheless introduced some handy features like Array.prototype.includes and Exponentiation Operator.

// Array.prototype.includes
console.log([1, 2, 3].includes(2));  // true

// Exponentiation operator
console.log(2 ** 3);  // 8

ES8 (ECMAScript 2017)

ES8 added some substantial new features including Async Functions and Object.entries / Object.values.

// Async function
async function foo() {
  return 1;
}

// Object.entries
console.log(Object.entries({ foo: 'bar', baz: 42 })); // [['foo', 'bar'], ['baz', 42]]

// Object.values
console.log(Object.values({ foo: 'bar', baz: 42 })); // ['bar', 42]

These are just a few of the features that ES6, ES7, and ES8 introduced to the JavaScript language. By understanding and utilizing these features, developers can write more efficient and cleaner code.