ES7 Features, TIME To Update Your JavaScript/ES6

See the ES2016 (ES7) standard for full specification of the ECMAScript 2016 language. Practical Learning of New JavaScript Features.

ES2016/ES7

includes the following new features of es 7:

Exponentiation Operator
Async functions
Async generators
Object.getOwnPropertyDescriptors
Object.values
Object.entries
Array.prototype.includes
Typed Objects
Trailing commas in function syntax.
Class decorators.
Class properties
Map.prototype.toJSON
Set.prototype.toJSON
String.prototype.at
Object rest properties
Object spread properties
String.prototype.padLeft
String.prototype.padRight
String.prototype.trimLeft
String.prototype.trimRight
Regexp.escape
Bind Operator

Exponentiation Operator

Performs exponential calculation on operands. Same algorithm as Math.pow(x, y)

See the Pen ES7 Features – Exponentiation Operator by Vimalraj (@w3tweaks) on CodePen.

Async functions

Deferred Functions. Find the code below

See the Pen ES7 – Async functions by Vimalraj (@w3tweaks) on CodePen.

Async generators

Deferred generators.

// provider
async function* nums() {
  yield 1;
  yield 2;
  yield 3;
}

// consumer
async function printData() {
  for(var x on nums()) {
    console.log(x);
  }
}

Object.getOwnPropertyDescriptors

Returns a property descriptor for an own property.

// Creating a shallow copy.
var shallowCopy = Object.create(
  Object.getPrototypeOf(originalObject),
  Object.getOwnPropertyDescriptors(originalObject)
);

Object.values

Get all the values of the object as an array.

var person = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };

Object.values(person);

//^ ["Hemanth","HM","Earth","Human"]

Object.entries

Returns a Array of arrays of key,value pairs.

var person = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };

Object.entries(person);

//^ [["fname","Hemanth"],["lname","HM"],["location","Earth"],["type","Human"]]

Array.prototype.includes

Determines whether an array includes a certain element or not.

[1, 2, 3].includes(3, 0, 7); // true
[1, 2, NaN].includes(NaN); // true
[0,+1,-1].includes(42); // false

Typed Objects

Portable, memory-safe, efficient, and structured access to contiguously allocated data.

var Point = new StructType({
  x: int32,
  y: int32
});

var point = new Point({
  x: 42,
  y: 420
});

Trailing commas in function syntax.

Trailing commas in parameter and argument lists.

var meow = function (cat1, cat2,) {}

Math.max(4,2,0,);

Class decorators.

Annotate and modify classes and properties at design time.

class Person {
  @cantEnum
  get kidCount() { return this.children.length; }
}

function cantEnum(target, name, descriptor) {
  descriptor.enumerable = false;
  return descriptor;
}

Class properties

Properties of class.

class Cat {
  name = 'Garfield';
  static says = 'meow';
}
new Cat().name; // Garfield
Cat.says; // meow

Map.prototype.toJSON

toJSON for Maps.

var myMap = new Map();
myMap.set(NaN, "not a number");

console.log(myMap.toJSON()); // {"NaN":"not a number"}

Set.prototype.toJSON

toJSON for Sets.

var mySet = new Set();
mySet.add(NaN);
mySet.add(1);
console.log(mySet.toJSON()) // {"1":1,"NaN":null}

String.prototype.at

String containing the code point at the given position

'abc\uD834\uDF06def'.at(1) // 'b'
'abc\uD834\uDF06def'.at(3) // '\uD834\uDF06'

Object rest properties

Rest properties for object destructuring assignment.

let { fname, lname, ...rest } = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };
fname; //"Hemanth"
lname; //"HM"
rest; // {location: "Earth", type: "Human"}

Object spread properties

Spread properties for object destructuring assignment.

let info = {fname, lname, ...rest};

info; // { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" }

String.prototype.padLeft

left justify and pad strings.

"hello".padLeft(4)            #=> "hello"
"hello".padLeft(20)           #=> "hello               "
"hello".padLeft(20, '1234')   #=> "hello123412341234123"

String.prototype.padRight

right justify and pad strings.

"hello".padRight(4)            #=> "hello"
"hello".padRight(20)           #=> "               hello"
"hello".padRight(20, '1234')   #=> "123412341234123hello"

String.prototype.trimLeft

left trims the string.

' \t \n LeftTrim   \t\n'.trimLeft(); // 'LeftTrim   \t\n';

String.prototype.trimRight

right trims the string.

' \t \n RightTrim   \t\n'.trimRight(); // ' \t \n RightTrim';

Regexp.escape

Escapes any characters that would have special meaning in a regular expression.

RegExp.escape("(*.*)"); // "\(\*\.\*\)"
RegExp.escape("｡^･ｪ･^｡") // "｡\^･ｪ･\^｡"
RegExp.escape("😊 *_* +_+ ... 👍"); // "😊 \*_\* \+_\+ \.\.\. 👍"

Bind Operator

:: Function binding and method extraction

let log = (level, msg) => ::console[level](msg);

import { map, takeWhile, forEach } from "iterlib";

getPlayers()
  ::map(x => x.character())
  ::takeWhile(x => x.strength > 100)
  ::forEach(x => console.log(x));

Author: ven

Reference: Link

ES7 Features, TIME to update your JavaScript/ES6