ES6 for Humans The Latest Standard of JavaScript: ES2015 and Beyond Deepak Grover Hanu Prateek Kunduru ES6 for Humans Deepak Grover Delhi, India Hanu Prateek Kunduru Seattle, Washington, USA ISBN-13 (pbk): 978-1-4842-2622-3 DOI 10.1007/978-1-4842-2623-0 ISBN-13 (electronic): 978-1-4842-2623-0 Library of Congress Control Number: 2017944929 Copyright © 2017 by Deepak Grover and Hanu Kunduru Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/9781484226223 For more detailed information, please visit http://www.apress.com/source-code Contents at a Glance About the Authors��������������������������������������������������������������������������� xiii About the Technical Reviewer��������������������������������������������������������� xv Acknowledgments������������������������������������������������������������������������� xvii ■Chapter ■ 1: Getting Started with ES6����������������������������������������������� ■Chapter ■ 2: New Syntax in ES6������������������������������������������������������ 11 ■Chapter ■ 3: Destructuring�������������������������������������������������������������� 37 ■Chapter ■ 4: Classes in ES6������������������������������������������������������������� 49 ■Chapter ■ 5: Modules���������������������������������������������������������������������� 65 ■Chapter ■ 6: Symbols in ES6����������������������������������������������������������� 75 ■Chapter ■ 7: Arrays and Collections������������������������������������������������ 81 ■Chapter ■ 8: Iterators and Generators��������������������������������������������� 97 ■Chapter ■ 9: Promises in ES6�������������������������������������������������������� 109 ■Chapter ■ 10: Meta Programming������������������������������������������������� 117 ■Chapter ■ 11: Beyond ES6������������������������������������������������������������� 129 Index���������������������������������������������������������������������������������������������� 135 Contents About the Authors��������������������������������������������������������������������������� xiii About the Technical Reviewer��������������������������������������������������������� xv Acknowledgments������������������������������������������������������������������������� xvii ■Chapter ■ 1: Getting Started with ES6����������������������������������������������� ES6 The Specification������������������������������������������������������������������������������ History of ECMA, ECMAScript, and JavaScript���������������������������������������� One JavaScript���������������������������������������������������������������������������������������� Using ES6������������������������������������������������������������������������������������������������ Setting Up ES6 Using Babel and webpack���������������������������������������������� Transpiling with Babel���������������������������������������������������������������������������������������������� Setting Up an ES6 Boilerplate����������������������������������������������������������������������������������� Adding Your Generated bundle.js script to your index.html�������������������������������������� Summary����������������������������������������������������������������������������������������������� 10 ■Chapter ■ 2: New Syntax in ES6������������������������������������������������������ 11 Variable Declarations: let, const, and Block Scoping���������������������������� 11 Block Scoping with let and const��������������������������������������������������������������������������� 12 More on Temporal Dead Zones������������������������������������������������������������������������������� 14 Variables Declarations in loops������������������������������������������������������������������������������ 15 Variable Declarations with Function Parameters and Global Scope����������������������� 16 Arrow Functions������������������������������������������������������������������������������������ 17 Using Arrow Functions to Create IIFEs�������������������������������������������������������������������� 18 A Tale about this����������������������������������������������������������������������������������������������������� 19 Using Arrow Functions�������������������������������������������������������������������������������������������� 24 Default Function Parameters����������������������������������������������������������������� 25 Rest and Spread Operators������������������������������������������������������������������� 27 The Spread Operator���������������������������������������������������������������������������������������������� 29 Object Literal Extensions����������������������������������������������������������������������� 30 Template Literals and Delimiters���������������������������������������������������������������������������� 32 Tagged Template Literals���������������������������������������������������������������������������������������� 32 Summary����������������������������������������������������������������������������������������������� 35 ■Chapter ■ 3: Destructuring�������������������������������������������������������������� 37 Destructuring of Objects and Arrays����������������������������������������������������� 37 Object Destructuring Syntax����������������������������������������������������������������������������������� 38 Assignment Using Destructuring���������������������������������������������������������������������������� 40 Default Values��������������������������������������������������������������������������������������� 41 Nested Destructuring���������������������������������������������������������������������������� 42 Destructuring Using the rest Syntax����������������������������������������������������� 44 Destructured Parameters���������������������������������������������������������������������� 45 Summary����������������������������������������������������������������������������������������������� 47 ■Chapter ■ 4: Classes in ES6������������������������������������������������������������� 49 Classes in ES6��������������������������������������������������������������������������������������� 49 Defining Classes in ES6������������������������������������������������������������������������� 51 Class Declarations�������������������������������������������������������������������������������������������������� 51 Class Expressions��������������������������������������������������������������������������������������������������� 52 Class Methods and Accessor Properties����������������������������������������������� 53 Computed Method Names��������������������������������������������������������������������� 56 Class Properties and Privacy����������������������������������������������������������������� 56 Using Constructor Environments����������������������������������������������������������� 57 Using WeakMaps���������������������������������������������������������������������������������������������������� 57 Static Methods and Properties�������������������������������������������������������������� 58 Class Inheritance and the Super Keyword�������������������������������������������� 59 Inheriting Static Properties������������������������������������������������������������������� 61 Method Overriding��������������������������������������������������������������������������������� 62 Inheritable Built-Ins������������������������������������������������������������������������������� 63 Summary����������������������������������������������������������������������������������������������� 64 ■Chapter ■ 5: Modules���������������������������������������������������������������������� 65 Module Systems and a Little History����������������������������������������������������� 65 The Module Pattern in Traditional JavaScript���������������������������������������� 66 Modules in ES6�������������������������������������������������������������������������������������� 66 Exporting����������������������������������������������������������������������������������������������� 67 Default Exports������������������������������������������������������������������������������������������������������� 67 Importing����������������������������������������������������������������������������������������������� 68 Importing Default Values���������������������������������������������������������������������������������������� 69 Exporting an Imported Binding������������������������������������������������������������������������������� 70 Renaming Identifiers���������������������������������������������������������������������������������������������� 70 Loading Modules����������������������������������������������������������������������������������� 71 Modules in Web Browsers��������������������������������������������������������������������� 71 Loading Modules with ����������������������������������������������������������������������������� 71 Loading Modules Asynchronously in Browsers������������������������������������������������������ 72 Common Pitfalls������������������������������������������������������������������������������������ 72 Syntax��������������������������������������������������������������������������������������������������������������������� 72 Read-Only Bindings������������������������������������������������������������������������������������������������ 73 Destructing an Import Statement and Using Variables������������������������������������������� 73 Using eval( )������������������������������������������������������������������������������������������������������������ 74 Module Specifier����������������������������������������������������������������������������������������������������� 74 Summary����������������������������������������������������������������������������������������������� 74 ■Chapter ■ 6: Symbols in ES6����������������������������������������������������������� 75 Symbols������������������������������������������������������������������������������������������������� 75 Applications of Symbols����������������������������������������������������������������������������������������� 76 Symbols and Registry��������������������������������������������������������������������������� 79 Symbol.for(key)������������������������������������������������������������������������������������� 79 Symbol.keyFor(symbol)������������������������������������������������������������������������� 80 Built-In Symbols������������������������������������������������������������������������������������ 80 Summary����������������������������������������������������������������������������������������������� 80 ■Chapter ■ 7: Arrays and Collections������������������������������������������������ 81 Arrays and New Methods���������������������������������������������������������������������� 81 Array.from()������������������������������������������������������������������������������������������������������������� 81 Array.of()����������������������������������������������������������������������������������������������������������������� 83 New Array.Prototype Methods�������������������������������������������������������������������������������� 84 Typed Arrays������������������������������������������������������������������������������������������ 89 Basics of Using Typed Arrays���������������������������������������������������������������������������������� 89 Typed Arrays and Normal Arrays���������������������������������������������������������������������������� 90 Map and WeakMap�������������������������������������������������������������������������������� 91 Map������������������������������������������������������������������������������������������������������������������������� 91 WeakMap���������������������������������������������������������������������������������������������������������������� 93 Set and WeakSet����������������������������������������������������������������������������������� 94 Set�������������������������������������������������������������������������������������������������������������������������� 94 WeakSet����������������������������������������������������������������������������������������������������������������� 95 Summary����������������������������������������������������������������������������������������������� 96 ■Chapter ■ 8: Iterators and Generators��������������������������������������������� 97 Iterables and Iterators��������������������������������������������������������������������������� 97 Iteration Protocols������������������������������������������������������������������������������� 100 Iterable Protocol��������������������������������������������������������������������������������������������������� 100 Iterator Protocol���������������������������������������������������������������������������������������������������� 100 Iterator as an Iterable������������������������������������������������������������������������������������������� 101 return( ) and throw( ) in Iterators��������������������������������������������������������� 102 Generators������������������������������������������������������������������������������������������� 102 Generator Function������������������������������������������������������������������������������ 103 Communicating with Generators��������������������������������������������������������� 104 Completing Early��������������������������������������������������������������������������������� 106 Summary��������������������������������������������������������������������������������������������� 108 ■Chapter ■ 9: Promises in ES6�������������������������������������������������������� 109 Promises Overview����������������������������������������������������������������������������� 109 Creating a Promise������������������������������������������������������������������������������ 110 Consuming a Promise with then( ) and catch( )����������������������������������������������������� 111 Chaining of Promises�������������������������������������������������������������������������������������������� 113 Error Handling������������������������������������������������������������������������������������������������������� 114 Combining Promises with Promises.all����������������������������������������������� 115 Summary��������������������������������������������������������������������������������������������� 116 ■Chapter ■ 10: Meta Programming������������������������������������������������� 117 Meta Programming in ES5 and ES6 Overview������������������������������������ 117 Proxies in ES6������������������������������������������������������������������������������������� 118 Traps in Proxy Handler������������������������������������������������������������������������ 119 has������������������������������������������������������������������������������������������������������������������������ 121 ownKeys��������������������������������������������������������������������������������������������������������������� 122 apply��������������������������������������������������������������������������������������������������������������������� 122 Revocable Proxy���������������������������������������������������������������������������������� 123 Reflect������������������������������������������������������������������������������������������������������������������ 125 Summary��������������������������������������������������������������������������������������������� 127 ■Chapter ■ 11: Beyond ES6������������������������������������������������������������� 129 ES2016������������������������������������������������������������������������������������������������ 129 The includes method on Arrays���������������������������������������������������������������������������� 129 The Exponentiation Operator **���������������������������������������������������������������������������� 130 ES2017����������������������������������������������������������������������������������������������������������������� 130 Asynchronous Functions�������������������������������������������������������������������������������������� 131 Atomics and Shared Memory������������������������������������������������������������������������������� 132 Object.entries() and Object.values( )��������������������������������������������������������������������� 132 padStart and padEnd�������������������������������������������������������������������������������������������� 132 Object.getOwnPropertyDescriptors( )�������������������������������������������������������������������� 133 Trailing Commas in Function Parameter lists & calls������������������������������������������� 134 Summary��������������������������������������������������������������������������������������������� 134 Index���������������������������������������������������������������������������������������������� 135 CHAPTER Getting Started with ES6 Around 46% of the world’s population have Internet access today and the numbers are steadily increasing While you’re reading this, there are people out there who are using Internet services to book a cab, or a flight, or a table for two at a fancy restaurant; the point is that the Internet today has made people’s lives easier More and more web apps are being built everyday with the goals of saving people time, providing them with a higher standard of comfort or simply for entertainment These apps are accessible on the go, and a lot of them are built using JavaScript According to the StackOverflow Developer Survey, JavaScript is the most commonly used programming language on earth The ubiquity of the web platform is driving developers to use JavaScript more than any other language, leading to the evolution of JavaScript platforms like Node.js, front-end frameworks like Angular & React, and complete webstacks like MEAN (MongoDB, ExpressJS, AngularJS and NodeJS) This book discusses the core concepts of ES 2015 (popularly referred to as ES6) and beyond, while focusing on the best development practices By the time you finish reading this book, you will have a good understanding of core ES6 concepts, features, and their applicability in the modern-day development workflow ES6 The Specification For many years ECMAScript (ES6) had been in the works but on June 17, 2015, the 109th Ecma General Assembly approved the 6th Edition of ECMA-262 standards, making official a major upgrade to what we know and love as JavaScript The evolution of JavaScript, more specifically ECMAScript, is primarily community driven and TC39 is the official committee in charge of it TC39 is primarily constituted by members that represent various stakeholders like the major browser companies and other invited members They meet and communicate on a regular basis and are tasked with maintaining and upgrading the standard for the ECMAScript programming language and the libraries that extend its capabilities In the process, they consider and evaluate the proposals for complementary and additional technologies for evolving ES If you are interested in knowing more or checking out the agendas and minutes of their meetings, they are all available online on GitHub (https://github.com/tc39/tc39-notes) The design process for ECMAScript standards is built around proposals that are usually popular requests from the developer community for new features or upgrades to existing ones Since TC39 has a large number of participants, making it difficult to © Deepak Grover and Hanu Kunduru 2017 D Grover and H P Kunduru, ES6 for Humans, DOI 10.1007/978-1-4842-2623-0_1 Chapter 10 ■ Meta Programming In the above example, all “in” operator invocations are trapped in the “has” method and if the property name is “beer,” false is returned; otherwise the default behavior is maintained (check property in target) Note that a “has” can only help you in preventing the detection of a particular property from “in” operator The property is still enumerable and can be accessed via a for…in loop ownKeys ownKeys is used to trap the access of the owned properties and owned symbol properties via Object.keys(), Object.getOwnPropertyNames() or Object getOwnSymbolProperties() This can also be used in combination with the has trap handler to strengthen the privacy of the target object properties (Note that these properties would still not be completely private): const restaurant = { soda: 5, beer: 10 }; const restHandler = { has: function(target, property) { if (property === "beer") { return false; } return property in target; }, ownKeys: function(target) { return ["soda"]; } } const restProxy = new Proxy(restaurant, restHandler); console.log("beer" in restProxy); // false console.log(Object.keys(restProxy)); // ["soda"] You can also add another trap handler: getOwnPropertyDescriptor, which traps the Object.getOwnPropertyDescriptor() calls, to enhance the privacy apply apply is used to trap a function invocation It takes three arguments: 122 • target: the target function whose behavior is being modified; • context: the context passed as this to target on invocation; • args: the arguments passed when applying the call Chapter 10 ■ Meta Programming Take a look at the following code snippet, for example, where we are applying a season discount on the final billing amount using the apply trap handler: function getBill(amount) { return amount; } const billHandler = { apply: function(target, context, args) { console.log("Applying Discount of 35%"); return args[0] - (args[0] * 0.35); } } const billProxy = new Proxy(getBill, billHandler); console.log(billProxy(300)); // Applying Discount of 35% // 195 Since the target object here is a function, these are also called as function traps, and you can alternatively have traps for call() and bind() methods also Up until this point, we have covered enough trap handlers to give you an overall picture We have seen how Proxy helps us intercepting setters and getters, decorating objects, adding validation rules, enhancing privacy, and essentially modifying the default behavior of an object You can explore through more trap handlers at the following link: - https:// developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Meta_programming Revocable Proxy ES6 allows us to create proxies that can be revoked Proxy.revocable() method is used to create a revocable proxy object Similar to a proxy object, it also takes a handler and a target object and returns a newly created revocable proxy object A revocable proxy object has two properties: proxy and revoke const { proxy, revoke } = Proxy.revocable(target, handler); where, • proxy – A Proxy object created with new Proxy (target, handler) call • revoke – A function with no argument to invalidate (switch off ) the proxy If the revoke() function gets called, the proxy becomes unusable, which means any trap to a handler will throw a TypeError Once a proxy is revoked, it will remain revoked and can be garbage collected Subsequent calls of revoke have no further effect Check the following code snippet, for example: 123 Chapter 10 ■ Meta Programming const restaurant = { soda: 10, beer: }; const { proxy, revoke } = Proxy.revocable(restaurant, {}); console.log(proxy.soda); // 10 console.log(proxy.beer); // revoke(); console.log(proxy.soda); // TypeError: Revoked Since Revocable Proxy allows you to completely cut off the Proxy and its traps, it can be useful in cases to enhance the security of an object where if attempts to access a private property has been made, the proxy can be revoked We can modify the above example to enhance the privacy of beer property as follows: const restaurant = { soda: 10, beer: }; const resthandler = { get: function(target, property) { if (property === "beer") { revoke(); return undefined; } return target[property]; } } const { proxy, revoke } = Proxy.revocable(restaurant, resthandler); console.log(proxy.soda); // 10 console.log(proxy.beer); // undefined console.log(proxy.soda); // TypeError: Revoked In the above example, we are returning undefined and revoking the proxy if beer property is accessed, cutting off further calls to the target object via proxy Up until this point, we have seen how self-modification and intercession works in ES6 Now, let’s take a look at Reflection through introspection 124 Chapter 10 ■ Meta Programming Reflect Reflect is a built-in global object that provides a range of introspection methods These methods essentially gather information about the runtime-level meta-operations on objects Besides already existing introspection methods like typeof, instanceof, etc., Reflect serves as a single object wrapper for a collection of many significant internal methods that are available exclusively through the JavaScript engine internals A simple implementation of Reflect would look like this: const restaurant = { soda: 10, beer: }; console.log(Reflect.ownKeys(restaurant)); // ["soda", "beer"] Note that Reflect is a static object and therefore cannot be used with the new keyword For every trap method in ES6 Proxy, there is a matching reflection method available in Reflect Therefore, Reflect is also useful for implementing traps in proxies Check the following code snippet where we are using Reflect with Proxy: const restaurant = { soda: 2, beer: }; const restHandler = { get: function(target, property) { if (property === "beer") { return undefined; } return Reflect.get(target, property); } }; const restProxy = new Proxy(restaurant, restHandler); console.log(restProxy.beer); // undefined console.log(restProxy.soda); // Again, in the above example, we are preventing the access to beer and using Reflect.get() to access other properties of the target object One of the reasons why you should prefer using Reflect over the traditional target[property] way is this: if Reflect.get is used on a non-object target, it will throw an error, whereas target[property] would 125 Chapter 10 ■ Meta Programming simply return undefined Therefore, it is a good practice to use Reflect.get here Check the following code snippet, for example, where we are trying to get a property on a nonobject target: console.log(Reflect.get(1, "name")); // TypeError: Reflect.get called on non-object console.log(1["name"]); // undefined Besides this, it is also recommended to use Reflect when calling methods on Function.prototype, because if the arguments list is null or undefined, Function prototype.apply will call the function with no arguments, whereas Reflect.apply will throw an error Another reason is that Reflect offers a shorter syntax, whereas Function prototype looks much too verbose Take a look at the following code snippet, for example: function sayHello() { console.log(`${this.name} says hello`); } const person = { name: "Jack" }; Function.prototype.apply.call(sayHello, person); // Jack says hello Reflect.apply(sayHello, person); // TypeError: CreateListFromArrayLike called on non-object Reflect.apply(sayHello, person, []); // Jack says hello Similarly, there are many other useful static functions, some of which have the same names as the proxy handler methods, and here are some common ones that can be helpful: 126 • Reflect.get() – A function that returns the value of properties • Reflect.set() – A function that assigns values to properties Returns a Boolean that is true if the update was successful • Reflect.getPrototypeOf() – Same as Object.getPrototypeOf() • Reflect.has() – The in operator as function Returns a Boolean indicating whether an own or inherited property exists Chapter 10 ■ Meta Programming Summary Meta Programming in ES6 offers us a way to modify the behavior of the internal language features by providing us low-level hooks into the code mechanics of the program It comes in three forms: introspection, self-modification, and intercession In this chapter, we learned about the new Proxy and Reflect API, which help us with implementing different forms of meta programming We also looked at some interesting examples where Proxy helped us with managing private properties in an object We learned about various trap handler methods that come with Proxy, and their one-toone mapped static Reflect methods and how we can use them in our applications to our advantage As future ECMAScript versions are shaping up, we expect to see more interesting meta programming features that will allow us to play around with the default internal operations of the language more extensively 127 CHAPTER 11 Beyond ES6 As already described in the first chapter, the ES6 release is very big, and it is a significant update to the existing versions of JavaScript, namely ES5 We have gone over all the major changes extensively in the previous chapters of this book It took more than six years for TC39 to come up with a new version of the language and involved introducing a lot of radically new concepts and functionalities into the language One of the major decisions taken by the committee toward the end of the release was that they would not wait too long before coming to a conclusion and releasing new features as it was done previously They decided to officially name ES6 as ES2015 and going forward, smaller incremental updates would be released for the language and it would be denoted by the year of release In this chapter, we will be looking at the changes and newer features that are a part of ES2016 and ES2017 ES2016 ES2016 is a small incremental update to the existing ES2015 (ES6) release with the introduction of the Array.prototype.includes and the Exponentiation operator (**) You can also check the KangaX compatibility table to see how well the new features of ES2016 are supported on different browsers and platforms that support JavaScript: https://kangax.github.io/compat-table/es2016plus/ The includes method on Arrays ES2016 introduces the includes method to the Array prototype in JavaScript You can check if an element exists in an Array using this method It will return a Boolean value based on whether or not the element passed to it is a part of the array it is used on Consider the following example: ['apple', 'banana', 'carrot'].includes('apple'); //true ['apple', 'banana', 'carrot'].includes('orange'); //false © Deepak Grover and Hanu Kunduru 2017 D Grover and H P Kunduru, ES6 for Humans, DOI 10.1007/978-1-4842-2623-0_11 129 Chapter 11 ■ Beyond ES6 As you can see in the above example, using the includes method on an array of fruits returns true if the element passed to it is a part of the array, otherwise it returns false This check traditionally in JavaScript was done using the indexOf method, which returns the index of the number if present, otherwise -1 So basically the above example is equivalent to: ['apple', 'banana', 'carrot'].indexOf('apple') >= 0; //true ['apple', 'banana', 'carrot'].indexOf('orange') >= 0; //false The above two statements work exactly like the previous example using includes, but the major difference between includes() and indexOf() is the way they interact with the value NaN (Not a Number), which helps in identifying the value const arr = [NaN]; arr.includes(NaN); // true arr.indexOf(NaN); // -1 From this example, it is apparent that indexOf cannot be used to check for NaN values inside an array, but the includes method allows us to check if a NaN value exists inside an array The Exponentiation Operator ** The exponentiation operator is a new arithmetic operator introduced in ES2016 that is very much like its counterpart in languages like Python, where a double asterisk is used to calculate the exponent value of a number It is equivalent to the traditional pow() function of the Math library let a = 2; let b = 3; a ** b //8 Math.pow(a, b) // Using the exponentiation Operator is a quick way to calculate the value when a number is raised to the corresponding power like in this case raised to the power of is ES2017 ES2017 brings in two major new features to the language, namely, Async functions and atomics with Shared memory It also includes other simpler features like Object.entries(), Object.values(), Object.getOwnPropertyDescriptors(), padStart, padEnd, and the ability to use trailing commas in function parameter lists and calls Let us look at each of them in greater detail 130 Chapter 11 ■ Beyond ES6 Asynchronous Functions ES2017 introduces an exciting new way of dealing with asynchronous code, which is the way of life in JavaScript We have already been introduced to a popular way of handling asynchronous operations with promises ES2017 further builds on this pattern by making it work in an synchronous manner using async and await keywords To understand this properly, consider the following example, where we are simply creating a function that returns a promise: function getData(site) { return fetch(site) .then(request => request.json()) } For the above example, invoking the getData() function would return a promise, which will get settled in the context of our execution asynchronously Now using the async / await keyword, we can have the above promise-based approach to take advantage of the generator pattern and make our code behave synchronously async always returns a promise, which can be resolved to a value and await suspends the execution until the promise is settled We can rewrite the above example with the async/await keywords as follows: async function getData(site) { let request = await fetch(url); let text = await request.text(); return JSON.parse(text); } Note that the await keyword works with promises only, and casts the expression into a promise if it's not one You can also use async in function expressions, method definitions, and arrow functions like the following examples: // Using function expression: const getData = async function () {}; // Using method definition: const item = { async getData() {} } // Using arrow function: const item = async () => {}; You might be curious about the await keyword used in the previous example: the await operator waits for the operand, that is, the promise to be settled and if the promised is fulfilled, its result is the fulfillment value and if the promise is rejected, it throws the rejection value Therefore, we can use a traditional try catch block with async/ await to handle the promises in a better way 131 Chapter 11 ■ Beyond ES6 Atomics and Shared Memory Anyone used to WebWorkers will already be aware of the process of creating workers They are created by allocating Worker objects and passing into them the script that needs to be run The worker communicates over a message channel, and many types of data can be sent through this channel, and the type and structure is preserved when it arrives at the destination In ES2017, to allocate shared memory you can simply use the SharedArrayBuffer constructor It is just like a normal ArrayBuffer but its memory is shared Also, this new spec in ES2017 brings to us the concept of new low-level Atomics namespace object, which along with the SharedArrayBuffer constructor, provides us with primitive buildings blocks for higher-level concurrency abstractions You can use these features to share data from a SharedArrayBuffer object among several web workers and the core thread This lets you be able to profit from being able to easily share data among workers, giving you better coordination among them A more detailed tutorial and specification on this topic written by Lars Hansen, the original proposal writer for Shared Memory and Atomics can be found online at the following link: - https://github.com/tc39/ecmascript_ sharedmem/blob/master/TUTORIAL.md, but it is outside the scope of this book Object.entries() and Object.values() Object.entries() and Object.values() are two new methods introduced in ES2017 The Object.entries() method, when run on an object, returns the object’s own enumerable property [key, value] pairs in the same order as that provided by a forin loop But unlike the for-in loop it does not enumerate properties in the prototype chain Similarly the Object.values() when passed an object returns an array of its own enumerable property values: const myObj = { a: 1, b: 42 }; Object.entries(myObj); // [['a', 1], ['b', 42]] Object.values(myObj); // [1, 42] As you can see in the above example, when the Object.entries() method is passed, the object returns an array with its key/value pairs, while Object.values() method returns the property values padStart and padEnd The padStart() and padEnd() method are two new string methods introduced in ES2017 that help in adding padding to a string so that the resulting string is of the length passed into them as the first parameter You can also pass in a second optional parameter of another string you can use to pad instead of the default space Consider the following examples: 'string'.padStart(10); // " string" 'string'.padStart(10, "abc"); // "abcastring" 'string'.padStart(10,"123465"); // "1234string" 132 Chapter 11 ■ Beyond ES6 'string'.padStart(8, "0"); // "00string" 'string'.padStart(3); // "string" 'string'.padEnd(10); // "string " 'string'.padEnd(10, "abc"); // "stringabca" 'string'.padEnd(8, "123456"); // "string12" 'string'.padEnd(1); // "string" As you can see in the examples above, the add padding to the giving string makes it so that the resulting string length is either greater than the length of the first parameter based on how long its original is; if the given length is greater, the adequate amount of padding is added to the string at the start or the end based on which method you use You can also use a second parameter to use a different string to pad instead of spaces Object.getOwnPropertyDescriptors() As the name suggests, the Object.getOwnPropertyDescriptors() is a new method in ES2017 that lets you precisely examine the description of all the own properties of the given object The property in a JavaScript object usually consists of a name that is a string and a property descriptor The descriptor is a record of the property value, Boolean writable, a get function, a set function, a Boolean configurable, and a Boolean enumerable Consider the following example: const myObj = { [Symbol('mySymbol')]: 42, get random() { return 'test' }, }; console.log(Object.getOwnPropertyDescriptors(myObj)); // Object {random: Object, Symbol(mySymbol): Object} // {random:{ // configurable: true, // enumerable: true, // get: function random(), // set: undefined} //[Symbol('mySymbol')]:{ // configurable: true, // enumerable: true, // value: 42, // writable: true} //} 133 Chapter 11 ■ Beyond ES6 The output of using the Object.getOwnPropertyDescriptors() on an object like myObj will more or less be like above Note that all of the above features are fairly new and experimental so you might not always get the exact same results That being said, they are becoming more and more standard now Trailing Commas in Function Parameter lists & calls This feature in ES2017 is a simple syntax update Prior to introducing this feature, having a comma after the last function parameter was not allowed in JavaScript even though the rest of the spec had this fairly commonly as in the case of Arrays and Object Literals With this update in ES2017, you have a more uniform trailing commas syntax across JavaScript So you can something like this, const trailFunct = function(x, y, z,) { //function body } This is purely a syntax update to the language and has no significant change on the behavior or functionalities in the language Summary In this chapter, we looked at the various small and incremental changes to JavaScript and updates on top of ES6 that have currently been released at the time of writing this book TC39 aims to have an annual release of new specifications that go from a proposal phase to final spec phase and then incorporated into the language They should be small feature updates, unlike the massive change that was ES6 (ES2015) 134 Index A, B Array.from(), 81, 83 Array.of(), 83–84 Array.prototype.copyWithin(), 88 Array.prototype.entries(), 84–85 Array.prototype.fill(), 87–88 Array.prototype.find(), 86–87 Array.prototype.findIndex(), 87 Array.prototype.keys(), 85 Array.prototype.values(), 85 Asynchronous functions, 131 Asynchronous Module Definition (AMD), 65, 74 C CommonJS-style module, 7, 65 Constructor() method, 50 D Destructuring assignment, 40 default values, 41–42 definition, 37 JavaScript, 47 in JSON data format, 37 nested values, 42–44 objects and arrays, 37–39 parameter values, 45–47 rest Syntax, 44–45 E, F ECMA International, ECMAScript 2015, ECMAScript 3.1, ECMAScript 4, ECMAScript (ES6) add loaders, 7–8 arrow functions, 17–19, 24–25 Babel in project, 6–7 and Block scoping, 11–14 Boilerplate, classes and accessor properties, 53–55 built-in classes, 63–64 class-based development pattern, 64 classical class-oriented development, 49 computed method names, 56 constructor() method, 50 constructor environments, 57–58 declarations, 51–52 expressions, 52 inheritance and super keyword, 59–61 inheriting static properties, 61 languages, 49 optional constructor method, 50 properties and privacy, 56 static methods and properties, 58–59 constructor invocation, 21–24 core concepts of, default function parameters, 25–27 ECMA, ECMAScript and JavaScript, 1–3 ES6/ES2015 knowledge, 10 function invocation, 19 function parameters and global scope, 16–17 © Deepak Grover and Hanu Kunduru 2017 D Grover and H P Kunduru, ES6 for Humans, DOI 10.1007/978-1-4842-2623-0 135 ■ INDEX ECMAScript (ES6) (cont.) loop structure, 34 object literals, 30–31 prototype methods, 96 rest and spread operators, 27–30, 35 “Strawman proposal”, tagged template literals, 32–33 TDZ, 14–15 template literals and delimiters, 32 transpiling, 4, web browsers and Node.js, webpack and webpack-dev-server, ES2016 on arrays, 129–130 atomics and shared memory, 132 ES2017, 130 exponentiation operator **, 130 object.entries(), 132 object.getOwnProperty Descriptors(), 133–134 object.values(), 132 padStart and padEnd, 132–133 trailing commas, 134 ES2017, 130 Expression interpolation, 32 G, H Generators, 3, 35, 96, 97–108, 131 I, J, K, L Immediately invoked function expressions (IIFEs), 18 Intercession, 118 Introspection, 117 Iterable protocol, 100 Iterators generators, 102 iterables, 97–100, 101 optional methods, 106 protocol, 100 return() and throw(), 102 Symbol.iterator, 108 yield statements, 107 M Map, 91 Meta programming 136 ES5 and ES6 overview, 117–118 future ECMAScript versions, 127 internal language features, 127 proxies in ES6, 118 in proxy handler, 119–121, 123 revocable proxy, 123–126 Module systems in browsers, 72 destructuring, 73 in ES6, 66 eval(), 74 exporting, 67–68 importing, 68–71 JavaScript applications, 65 modular semantic code base, 74 read-only bindings, 73 N New Array.prototype methods, 84 O Object.defineProperty(), 53 Object destructuring syntax, 38 Object.entries(), 132 Object.getOwnProperty Descriptors(), 133–134 Object.getOwnPropertySymbols(), 77 Object.getOwnSymbol Properties(), 122 Object.values(), 132 OnResolved() function, 115 P, Q padEnd() method, 132 padStart() method, 132 Pending promise, 112 Promise() constructor, 110 Promises asynchronous operations, 116 chaining, 113–114 creation, 110–111 error handling, 114 nested callbacks, 109 object, 110 setTimeout, 109 with then() and catch(), 111–113 XMLHttpRequest, 109 ■ INDEX R Reflect.get(), 126 Reflect.getPrototypeOf(), 126 Reflect.has(), 126 Reflect.set(), 126 Revoke() function, 123 S Self-modification, 117 String substitutions, 32 Symbol.for(key) method, 79 Symbol.for(myCar), 79 Symbol.iterator, 98, 100–101 Symbols applications of, 76–78 built-in symbols, 80 creation, 75–76 symbol.for(key), 79 Symbol.keyFor(symbol), 80 toString() method, 76 T Temporal dead zone (TDZ), 14–15, 51 Typed arrays, 89–90 U, V Universal Module Definition (UMD), 65, 74 W, X, Y, Z WeakMap, 93–94, 57–58 WeakSet, 95–96 137 ... these stages and incorporates feedback, TC39 approves it and will include it in the new edition of the ECMAScript standard History of ECMA, ECMAScript, and JavaScript For someone unaware of the. .. time, providing them with a higher standard of comfort or simply for entertainment These apps are accessible on the go, and a lot of them are built using JavaScript According to the StackOverflow... support for promises, and much more The development of ECMAScript Standard is community driven and the requirements and features of the language will still continue to evolve for betterment in the