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