An Overview Of ECMAScript 6 Features

An Overview Of ECMAScript 6 Features

June 15, 2020 (4y ago)

Introduction

JavaScript is arguably one of the most important languages today. With the ability to add simple functionality to a website and now even being able to run a webserver using JavaScript (NodeJS), it has become one of the most powerful languages to this day. With the release of the latest standard called ECMAScript 6 or ES6, JavaScript has become much more of an "actual" language than it once was before. ES6 has allowed for much more capabilities than before, but just a few examples that we'll discuss include the following:

Of course, this doesn't include all of the new ES6 features but be sure to check out this guide which goes into much more detail of what exactly is included in the new ES6 standard.

Arrow Functions

Arrows are a shorthand method for writing functions using the => syntax. A better way to define functions without having to explicitly type out the word function. An example is as follows:

// ECMAScript 5
var unsorted = [1,4,5,2];
var sorted = unsorted.sort(function(a, b) {
    return (a > b) ? 1: -1;
    });
// ECMAScript 6
var unsorted = [1,4,5,2];
var arr = unsorted.sort((a, b) => ((a > b) ? 1: -1));

Classes

Classes are probably one of the most important features included in ES6. Allowing your code to have more structure and feel like an actual programming language like Java or C#. Not that JavaScript isn't a programming language itself, but most would classify JavaScript within its own category. The existing Object structure makes it feel like JavaScript is different than most languages since we can interact with the DOM (Document Object Model). The following is a basic example of a Class implementation:

// basic example of a Class
class Shape {
    constructor(h, w, x, y) {
        this.height = h;
        this.width = w;
        this.move(x, y);    
    } 
    move(x, y) {
       this.x = x;
       this.y = y;    
    }
  }

Enhanced Object Literals

Object Literals have been improved, allowing a shorthand notation of defining methods and properties within Objects. An example of this includes:

// Notice how there is no "function"
// for defining the method
var obj = {
    sum(a, b) {
        return a + b;    
    },
    x, //x: x
    y, //y: y
}

Default Arguments

Default arguments allow your functions to specify a default value for a variable if none is provided in the list of arguments. This is useful for specifying ensuring there is always a value set even when it is not passed to the function.

// If c is not passed
// then it will default to 5
function sum(a, b, c = 5) {
   return a + b + c;
}
 
sum(2, 4) == 11

Rest Parameter

Rest is a simpler way of aggregating remaining arguments and is a replacement for accessing passed values through the arguments variable. A better way to manage all arguments and accept multiple variables in your functions. Rest allows all arguments to be aggregated and sent as an array.

// arguments are aggregated
// as an array called nums
function sum(...nums) {
    var total = 0;
    nums.map((a) => {
        total += a;
    });
    return total;
}
sum(4,5,6) == 15

Spread Syntax

Spread allows you to pass an array of values as separate arguments through a function. Similar to Rest in which you specify this syntax with three dots ..., although this is used when making function calls instead of defining them.

```javascript\n// An array of arguments\n// passed with spread\nvar nums = [3, 4, 23, 12, 8];\nvar max = Math.max(...nums);\n\nmax == 23\n```\n\n# Promises\nPromises are also a big addition in ES6 allowing for asynchronous programming and a replacement for those annoying nested callbacks. Promises allow you to define code to be executed once the Promise is `resolved`. Promises are used in many popular JavaScript frameworks already, including AngularJS and VueJS.\n\n```javascript\n// simulate an http request\n// that returns some json data\nfunction http(url) {\n var data = {"_status": 200};\n return new Promise((res, rej) => {\n setTimeout(function() {\n res(JSON.stringify(data));\n }, 2000);\n });\n}\n\n// will have a 2 second delay\n// with returned JSON data\nhttp('/users/get/')\n.then(function(res) {\n console.log(res);\n});\n```\n\n# String Templates\nString Templates are useful for constructing strings without having to break up your javascript variables. For example, this could be very useful for constructing a string with HTML code or interpolating JavaScript variables.\n\nThe old way would be the following: \n```javascript\n// ECMAScript 5\nvar title = "Welcome to my blog";\nvar html = "" + title + "";\n```\n\nThe simpler ES6 way would be to enclose your string with the backtick "`" symbol to specify you are using a string template:\n\n```javascript\n// ECMAScript 6\nvar title = "Welcome to my blog";\nvar html = `${title}`;\n```\n\n

LinkedIn