• Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home JavaScript

ES7 Features, TIME to update your JavaScript/ES6

February 8, 2023
in JavaScript

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:

You might also like

Error Handling in JavaScript: Best Practices and Strategies

Dynamic Adjustment of Height for Div Elements

Exploring JavaScript apply(), call(), and bind() Methods: A Comprehensive Guide with Examples

JavaScript Primitive and Non-Primitive Data Types

JavaScript Type Conversion and Coercion Explained

Mastering JavaScript Currying: A Comprehensive Guide

  • 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

Tags: ecmascriptECMAScript7es2016es7Javascriptscript
Previous Post

ES6 Features, TIME to update your JavaScript / ECMAScript5!

Next Post

ES8 Features, TIME to update your JavaScript/ES7

Related Stories

Error Handling in JavaScript: Best Practices and Strategies
JavaScript

Error Handling in JavaScript: Best Practices and Strategies

February 23, 2023
Dynamic Adjustment of Height for Div Elements
JavaScript

Dynamic Adjustment of Height for Div Elements

February 14, 2023
Exploring JavaScript apply(), call(), and bind() Methods: A Comprehensive Guide with Examples
JavaScript

Exploring JavaScript apply(), call(), and bind() Methods: A Comprehensive Guide with Examples

February 10, 2023
JavaScript Primitive and Non-Primitive Data Types
JavaScript

JavaScript Primitive and Non-Primitive Data Types

February 8, 2023
JavaScript Type Conversion and Coercion Explained
JavaScript

JavaScript Type Conversion and Coercion Explained

February 8, 2023
What is JavaScript Currying?
JavaScript

Mastering JavaScript Currying: A Comprehensive Guide

February 8, 2023
Next Post
ES8 Features, TIME to update your JavaScript/ES7

ES8 Features, TIME to update your JavaScript/ES7

Discussion about this post

You might also like

CSS Cards

100 Creative CSS Cards

November 13, 2022
Multi step html form

44 Free Multi step HTML forms

March 7, 2023
CSS & HTML Dashboard Templates

13 Free HTML & CSS Dashboard Template Designs

December 29, 2021
49 CSS Tables

49 CSS Tables

November 13, 2019
HTML & CSS pricing tables

20 HTML & CSS pricing tables

May 2, 2020
CSS Dark Mode

14 Best CSS Dark Mode

October 13, 2021
w3tweaks

Unleash your front-end development potential by exploring the ultimate collection of UI designs and patterns, and play with them to create stunning websites through our tutorials.

Tags

Angularjs AngularJS Tutorials animation animation examples Button button hover effect Buttons Calendar calendars cards click buttons CSS css3 css buttons css calendar css calendars css effects css hover effects demo effect effects essentials forms free Free Tool hover hover animation Hover effects html inputs Javascript jquery js learn loaders menu mouse hover effects navigation php script text effects tool tutorial tutorials YouTube

Stay Connected

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
x
x