By JS Dev Journalist in JavaScript — Aug 22, 2023

Master Modern JavaScript with ES6, ES7, ES8 and ES9

Master modern JavaScript by learning ES6 to ES9 features. This in-depth guide covers arrow functions, async/await, destructuring, classes, template literals, and more new syntax and capabilities for writing clean code.

JavaScript has come a long way since its inception in 1995 (Read more here). The language has evolved rapidly, with new major versions being released annually. In this guide, we will explore the exciting new features introduced in ES6, ES7, ES8 and ES9 - the latest versions of JavaScript. By the end, you'll have a solid grasp of modern JavaScript development. Let's dive in!

ES6 Overview

ES6, also known as ECMAScript 2015, was a major release that added many handy features to vanilla JavaScript. Some of the most notable ones are:

Arrow Functions

Arrow functions provide a shorter syntax for writing function expressions. They also bind the this value to the enclosing context. Here's a comparison of regular and arrow functions:

// Regular Function
function add(a, b) {
  return a + b;
}

// Arrow Function  
const add = (a, b) => {
  return a + b;
}

The arrow function is cleaner and sets the this context to the surrounding code.

Classes

ES6 introduced JavaScript classes which are templates for creating objects. Classes provide an easy way to declare reusable components:

class Person {
  constructor(name) {
    this.name = name; 
  }

  greet() {
    console.log(`Hello ${this.name}!`)
  }
}

const person1 = new Person('John');

person1.greet(); // Hello John!

Enhanced Object Literals

Creating objects got simpler with new syntax for defining properties and methods:

// Old Way
const person = {
  name: 'John',
  
  greet: function() {
    console.log('Hi!');
  }
}

// New Way
const person = {
  name: 'John',
  
  greet() {
    console.log('Hi!');
  }
}

We can now omit the colon and function keyword in object literals.

let and const

The let and const keywords allow declaring variables with block scope:

{
  let name = 'John';
  const age = 30;
  
  // name and age exist here
}
// name and age don't exist here

This avoids common issues with var which is function scoped.

Template Literals

Template literals provide an easy way to build strings:

const name = 'John';
const msg = `Hello ${name}!`; // "Hello John!"

No more string concatenation!

Destructuring

Destructuring allows extracting values from arrays and objects into distinct variables:

// Array 
const [first, second] = ['Hello', 'world!'];
first; // 'Hello'

// Object
const { name, age } = { name: 'John', age: 30 };
name; // 'John'

This simplifies complex data extraction.

Spread Operator

The spread operator expands iterables into elements:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]

It's useful for combining arrays or objects.

There are many more great ES6 features to learn like Promises, Classes, Arrow Functions and Modules. I recommend exploring them by building sample apps and adding modern syntax and capabilities piece by piece.

ES7 Features

ES7 or ECMAScript 2016 was a smaller release that added 2 main features:

Array Includes

Includes allows checking if an array contains a value. It's more concise than indexOf:

const fruits = ['apple', 'banana', 'orange'];

fruits.includes('apple'); // true

Exponential Operator

The exponentiation operator ** raises a number to a power:

const cubed = 2 ** 3; // 8

This simplified exponent expressions.

ES8 Features

ES8 or ECMAScript 2017 further improved the language:

Async/Await

Async functions allow writing promise-based code as if it was synchronous:

async function fetchUsers() {
  const resp = await fetch('/users');
  const users = await resp.json();

  console.log(users);
}

This makes async code easier to read.

Object.values() / Object.entries()

Object.values() returns an array of object values:

const person = {
  name: 'John',
  age: 30 
};

Object.values(person); // ['John', 30]

Object.entries() returns an array of key/value pairs:

Object.entries(person); // [ ['name', 'John'], ['age', 30] ]

These new methods simplify working with objects.

ES9 Features

ES9 or ECMAScript 2018 added support for async iteration and rest/spread properties:

for await...of

This allows asynchronously iterating over async iterators:

async function process(array) {
  for await (let i of array) {
    doSomething(i);
  }
}

Rest/Spread Properties

Rest properties collect the remaining object properties into a new object:

const { name, ...rest } = {
  name: 'John',
  age: 30,
  job: 'Teacher'
};

name; // 'John'
rest; // { age: 30, job: 'Teacher' }

Spread properties do the opposite by spreading an object into another object:

const person = { name: 'John', age: 30 };
const job = {...person, job: 'Teacher' };

job; // { name: 'John', age: 30, job: 'Teacher' }

These features allow manipulating objects in a clearer way.

Putting Knowledge into Practice

Learning modern JavaScript features is useful, but you need to put that knowledge into practice to get comfortable with the new syntax and capabilities.

Here are some ways to start using ES6+ in your projects:

Refactor Existing Code

If you have older JavaScript codebases, try refactoring pieces of it to use modern features:

Convert var declarations to let and const
Use template literals for string building
Implement classes for cleaner code organization
Simplify callback hell with async/await

Refactoring is a great way to get experience with new syntax while improving your applications.

Build Sample Apps

Creating small projects and experiments lets you get hands-on with modern features:

Build a simple REST API using async/await and promises
Create a library using ES6 modules and syntax like arrow functions
Make a sample app with React and ES6 classes for components

Working on sample projects helps cement your knowledge.

Use JavaScript Frameworks

Many popular frameworks like React, Vue and Angular utilize modern JavaScript capabilities:

Try React Hooks for stateful logic without classes
Write cleaner Vue components with ES6 syntax
Build an Angular app using TypeScript's ES6+ support

Frameworks give practical experience with new JavaScript.

Follow Coding Standards

Tooling like ESLint and Prettier help enforce best practices like:

Strongly preferring const/let over var
Enforcing arrow functions and other modern syntax
Linting async/await usage

Following modern coding standards prevents you from slipping back into old habits.

The best way to learn is by applying your knowledge to build apps and improve existing code. Experiment freely and get comfortable with the new syntax introduced in ES6 and beyond.

Exciting Future Capabilities

TC39 is constantly evolving JavaScript by introducing new proposals:

Here are some exciting capabilities that may get added to future versions:

Top-level await - Use await outside async functions
Decimal - Built-in Decimal type for arbitrary precision math
WeakRefs - Weak references that don't prevent garbage collection
import() expressions - Dynamic module loading
Static class fields - Declare class fields without a constructor

And many more proposals!

I recommend checking the TC39 process and GitHub repo to stay updated on what new JavaScript features are coming:

JavaScript will continue rapidly evolving so be prepared to learn new syntax and capabilities. But this makes it an exciting time to be a JavaScript developer!

Useful Resources

Here are some helpful resources to learn modern JavaScript in-depth:

Videos

Async/Await in JavaScript - What, Why and How - Excellent video explaining async/await.
5 JavaScript Features you NEED to know! - Overview of useful ES6+ features.
Learn ES6 (ECMAScript 2015) - This course takes a look at the features that JavaScript has available with ES6 (ECMAScript 2015).
JavaScript.info - Modern JS tutorial with chapters on ES6+ features.
ES6 Features - Nice website listing new ES6 capabilities.
Exploring JS - Dr. Axel's blog on JavaScript including ES6+ topics.
ES6 Katas - Code exercises focused on ES6 features.
JavaScript30 - 30 coding challenges using modern JS.
Code Wars - Developer community with ES6+ code challenges.

I recommend combining reading/watching resources along with practical coding practice. This will help cement your understanding of modern JavaScript.

Let me know if you find any other helpful learning resources!

Final Thoughts

I hope this guide got you excited about using modern JavaScript in your projects!

The latest ES6+ features make JavaScript development really enjoyable and help you write clean, maintainable code.

Start applying these features today - refactor old code, build sample apps, follow modern standards and more.

Make learning and using modern JavaScript a habit. This will help you stay up-to-date as the language continues rapidly evolving.

Let me know if you have any other questions!