Getting started with ECMAScript6

Introduction
ECMAScript6 is also known as ECMAScript2015.ES6 is a significant upgrade to ES5 and adds a slew of new capabilities to JavaScript.
In this article, we'll walk through how to set things up to develop ES6 applications and get started with some of the most important new features.
This article covers:
  • Browser support
  • Setting up Babel and webpack
  • Code editors
  • Modules
  • const and let
  • Classes
  • Object literal syntax
  • Destructuring assignment
  • Arrow functions
  • Template strings
  • Browser support
    The setup necessary for building ES6 apps is determined by the amount of cross-platform compatibility you wish to give. Most of ES6 is already supported by the latest versions of Chrome, Firefox, Edge, and Node.js, so if you're just targeting these newer runtimes, you can start using it right now.For further details about which runtimes support which features, you can consult the ES6 compatibility table.
    You can run the following code in your browser's JavaScript console. If your browser supports ES6, it should evaluate to 3. If not, it will complain about a syntax error.
    let [two, three] = [2, 3];
    two + three;
    Unfortunately, the general browser market may be out of date, meaning that many users are still not using an ES6-compatible browser. If you're developing a public-facing online application, you should continue to assist these individuals.
    Fortunately, there's a project called Babel which allows you to convert your ES6 code into ES5 code. This means that you can still write code in ES6 while developing web applications that anybody with an ES5-compliant browser can use. It takes some effort to figure out how to set everything up the first time, so I've included a step-by-step guide below to help you get started more quickly.
    Setting up Babel and webpack
    If you do not already have Node.js installed, you will need to install it.
    Create a folder for your project, then create a file named package.json with the following content:
    {
      "name": "es6-demo",
      "scripts": {
        "build": "webpack --watch"
      },
      "devDependencies": {
        "babel-cli": "^6.8.0",
        "babel-core": "^6.8.0",
        "babel-loader": "^6.2.4",
        "babel-plugin-transform-runtime": "^6.8.0",
        "babel-preset-es2015": "^6.6.0",
        "babel-runtime": "^6.6.1",
        "webpack": "^1.13.0"
      }
    }
    Then create a file named webpack.config.js with the following content:
    var path = require("path");
    module.exports = {
      entry: "./src/main.js",
      output: {
        path: __dirname,
        filename: "bundle.js"
      },
      module: {
        loaders: [
          {
            loader: "babel-loader",
    
            // Compile files in /src directory
            include: [path.resolve(__dirname, "src")],
    
            // Babel options
            query: {
              plugins: ["transform-runtime"],
              presets: ["es2015"]
            }
          }
        ]
      }
    };
    Then create a subfolder named src. This folder will contain all of your ES6 code. Let's put a simple script there named main.js just to test things out.
    let [one, two, three] = [1, 2, 3];
    console.log(`One: ${one}, Two: ${two}, Three: ${three}`);
    Open your terminal (Node.js console for Windows users), navigate to your project folder, and run the following:
    npm install
    npm run build
    This will create a bundle.js file in your project folder with the compiled ES5 code. If you open this file, you'll see the ES5 equivalent (in the middle of a bunch of other generated boilerplate):
    var one = 1;
    var two = 2;
    var three = 3;
    
    console.log("One: " + one + ", Two: " + two + ", Three: " + three);
    The npm run build script is set up to listen for modifications in the src folder. Now, when you modify the main.js file, the bundle.js file will update automatically. You can stop watching with Ctrl + C in the console.
    After you've done this, there's no need to run npm install again. When you need to convert your code, you can use npm run build.
    Code editors
    For a better development experience, you also will probably want to use a code editor that has some ES6 tooling. I like to use Visual Studio Code, but there are many editors that can be set up to support ES6, such as vim, Atom,Sublime Text, and WebStorm.
    Modules
    In my opinion, the module is the single most important new feature in ES6. It allows you to separate your code into separate files in a modular way without worrying about cluttering the global namespace.
    For example, let's create a file math.js with a toy math library that exports the value of pi and a couple of pi-related functions:
    export const PI = 3.141592653589793;
    export function circumference(r) {
      return 2 * PI * r;
    }
    export function area(r) {
      return PI * r * r;
    }
    With modules, we can import this library's individual components from another file:
    import { PI, area } from "./math";
    console.log(area(PI));
    Or we can import everything into a single object:
    import * as math from "./math";
    console.log(math.area(math.PI));
    You can also export a single value as the default value, so that you can import it without needing brackets or a wildcard:
    // reverseString.js
    export default function(str) {
      return str
        .split("")
        .reverse()
        .join("");
    }
    // main.js
    import reverseString from "./reverseString";
    console.log(reverseString("Hello, world!"));
    const and let
    const is used for constant declarations, and let is used for variable declarations.
    If you try to reassign to a constant, the compiler will throw an error:
    const one = 1;
    one = 2; // SyntaxError: "one" is read-only
    let is similar to var, but it fixes a number of quirks about var that are often stumbling blocks to JavaScript newcomers. In fact, var has become obsolete at this point because it's let and const have assumed its functionality.
    let is block-scoped
    var and let differ in their scoping mechanisms. A variable declared with var is function-scoped, which means that it is visible anywhere in the surrounding function. Meanwhile, a variable declared with let is block-scoped, which means it is only visible in its own code block. Calls to the variable outside its code block will lead to errors.
    // var
    console.log(less); // undefined
    if (1 < 2) {
      var less = true;
      console.log(less); // true
    }
    console.log(less); // true
    
    // let
    console.log(less); // Uncaught ReferenceError: less is not defined
    if (1 < 2) {
      let less = true;
      console.log(less); // true
    }
    console.log(less); // Uncaught ReferenceError: less is not defined
    const also exhibits this block scoping strategy.
    Duplicate let declarations are forbidden
    let is designed to catch potential assignment mistakes. While duplicate var declarations will behave like normal reassignment, duplicate let declarations are not allowed to prevent the common mistake of erroneous reassignment.
    var x = 1;
    var x = 2; // x equals 2
    
    let x = 1;
    let x = 2; // SyntaxError: Identifier 'x' has already been declared
    let variables rebound in each loop iteration
    Here is a common error that occurs when you have a function defined inside of a loop using var.
    for (var i = 0; i < 5; i++) {
      setTimeout(function() {
        console.log(i);
      }, 10);
    }
    // logs 5 5 5 5 5
    This code will log the number 5 five times in a row, because the value of i will be 5 before the first time console.log is called. When we use let instead, the i inside of the function will correspond to the value on that particular iteration of the for-loop.
    for (let i = 0; i < 5; i++) {
      setTimeout(() => {
        console.log(i);
      }, 10);
    }
    // logs 0 1 2 3 4
    Classes
    Object-oriented programming in JavaScript is different than classical OOP because it uses prototypes rather than classes. ES6 classes are a syntax shortcut for a common JavaScript pattern used to simulate classes. Below, I lay out prototype creation in ES5 and class creation in ES6.
    // ES5 way
    function Circle(x, y, radius) {
      this.x = x;
      this.y = y;
      this.radius = radius;
    }
    Circle.prototype.move = function(x, y) {
      this.x = x;
      this.y = y;
    };
    Circle.prototype.area = function() {
      return Math.PI * Math.pow(this.radius, 2);
    };
    
    // ES6 way
    class Circle {
      constructor(x, y, radius) {
        [this.x, this.y, this.radius] = [x, y, radius];
      }
      move(x, y) {
        [this.x, this.y] = [x, y];
      }
      area() {
        return Math.PI * Math.pow(this.radius, 2);
      }
    }
    You can also extend classes in a manner consistent to standard object-oriented languages:
    // ES5 way
    function ColoredCircle(x, y, radius, color) {
      Circle.call(this, x, y, radius);
      this.color = color;
    }
    ColoredCircle.prototype = Object.create(Circle.prototype);
    
    // ES6 way
    class ColoredCircle extends Circle {
      constructor(x, y, radius, color) {
        super(x, y, radius);
        this.color = color;
      }
    }
    Object literal syntax
    It's common to create objects with property names matching variable names. ES6 includes new syntax to make this a little bit more concise:
    var x = 5,
      y = 6;
    
    // ES5 way
    var coordinate = { x: x, y: y };
    
    // ES6 way
    let coordinate = { x, y };
    The syntax for function properties has also changed:
    // ES5 way
    var counter = {
      count: 0,
      increment: function() {
        this.count++;
      }
    };
    
    // ES6 way
    let counter = {
      count: 0,
      increment() {
        this.count++;
      }
    };
    Destructuring assignment
    Destructuring assignment is a nifty feature for doing several assignments at once. In ES5, you often have a series of variable declarations like this:
    var a = 1,
      b = 2,
      c = 3;
    In ES6 you can do it all at once with array destructuring:
    let [a, b, c] = [1, 2, 3];
    This is particularly nice for extracting values from an array:
    var personData = ["John", 12, true];
    
    // ES5 way
    var name = personData[0],
      age = personData[1],
      isMale = personData[2];
    // ES6 way
    let [name, age, isMale] = personData;
    and also for swapping variables:
    // ES5 way
    var tmp = a;
    a = b;
    b = tmp;
    
    // ES6 way
    [a, b] = [b, a];
    Destructuring assignment can be used with objects as well:
    var personData = {
      name: "John",
      age: 12,
      isMale: true
    };
    
    // ES5 way
    var name = personData.name,
      age = personData.age,
      isMale: personData.isMale;
    
    // ES6 way
    let { name, age, isMale } = personData;
    This also works with nested object structures:
    var book = {
      title: "A Tale of Two Cities",
      dimensions: [12, 8, 3],
      author: {
        name: "Charles Dickens"
      }
    };
    
    // ES5 way
    var title = book.title,
      length = book.dimensions[0],
      width = book.dimensions[1],
      depth = book.dimensions[2],
      name = book.author.name;
    
    // ES6 way
    let { title, dimensions: [length, width, depth], author: { name } } = book;
    Clear and concise.
    Arrow functions
    JavaScript developers frequently use function expressions, such as callbacks. However, code can often look messy when the keywords function and return are repeated many times. ES6 has new syntax to make function expressions less verbose.
    Let's compare ES6 function expression handling with expression handling in previous Ecmascript versions.
    var list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    // ES3 way
    var sumOfSquares = 0;
    for (var i = 0; i < list.length; i++) {
      var n = list[i],
        square = n * n;
      sumOfSquares += square;
    }
    
    // ES5 way
    var sumOfSquares = list
      .map(function(x) {
        return x * x;
      })
      .reduce(function(a, b) {
        return a + b;
      });
    
    // ES6 way
    let sumOfSquares = list.map(x => x * x).reduce((a, b) => a + b);
    For functions consisting of more than one statement, you can wrap the right-hand side of the arrow function in curly braces:
    // ES5 way
    window.onclick = function(e) {
      if (e.ctrlKey) console.log("Ctrl click");
      else console.log("Normal click");
    };
    
    // ES6 way
    window.onclick = e => {
      if (e.ctrlKey) console.log("Ctrl click");
      else console.log("Normal click");
    };
    Template strings
    There is a new type of string literal that makes it easier to insert dynamic values into strings, and also to deal with multi-line strings. Instead of double quotes or single quotes, template strings are delimited by backticks.
    var weight = 80,
        height = 1.8;
    
    // ES5 way
    console.log("You are " + height + "m tall and weigh " + weight + "kg.\n" +
    "Your BMI is " + weight / (height * height) + ".");
    
    // ES6 way
    console.log(`You are ${height}m tall and weigh ${weight}kg.
    Your BMI is ${weight / (height * height)}.`);
    ...and much much more
    I've tried to cover some of the most important new changes, but there are many other cool new features in ES6 that I don't have space to cover in this article. For more information, you can browse a quick overview of the new features on es6-features.org, read a more detailed introduction in the Exploring ES6 book, and, for even more in-depth details, read the ECMAScript 2015 Language Specification.
    If you've reached this point, thank you very much. I hope that this tutorial has been helpful for you and I'll see you all in the next.
    If you like my work, please consider
    Buy me a coffee
    so that I can bring more projects, more articles for you
    If you want to learn more about Web Development don't forget to to follow me on Youtube!

    24

    This website collects cookies to deliver better user experience

    Getting started with ECMAScript6