{"id":804,"date":"2017-02-22T08:58:27","date_gmt":"2017-02-22T08:58:27","guid":{"rendered":"http:\/\/blog.mozilla.org\/javascript\/?p=804"},"modified":"2017-02-22T19:35:06","modified_gmt":"2017-02-22T19:35:06","slug":"ecmascript-2016plus-in-firefox","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/javascript\/2017\/02\/22\/ecmascript-2016plus-in-firefox\/","title":{"rendered":"ECMAScript 2016+ in Firefox"},"content":{"rendered":"<p><i>After the release of <a href=\"http:\/\/www.ecma-international.org\/ecma-262\/6.0\/\">ECMAScript 2015<\/a>, a.k.a. ES6, the ECMAScript Language Specification is evolving rapidly: it&#8217;s getting many new features that will help developing web applications, with <a href=\"http:\/\/www.2ality.com\/2015\/11\/tc39-process.html\">a new release planned every year<\/a>.<\/i><\/p>\n<p><i>Last week, <a href=\"https:\/\/nightly.mozilla.org\/\">Firefox Nightly 54<\/a> reached 100% on the <a href=\"http:\/\/kangax.github.io\/compat-table\/es2016plus\/\">Kangax ECMAScript 2016+ compatibility table<\/a> that currently covers <a href=\"http:\/\/www.ecma-international.org\/ecma-262\/7.0\/\">ECMAScript 2016<\/a> and the <a href=\"https:\/\/tc39.github.io\/ecma262\/\">ECMAScript 2017 draft<\/a><a href=\"http:\/\/www.ecma-international.org\/ecma-262\/7.0\/\">.<\/a><\/i><\/p>\n<p><i>Here are some highlights for those spec updates.<\/i><\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/javascript\/files\/2017\/02\/es2016plus.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-806 size-large\" src=\"http:\/\/blog.mozilla.org\/javascript\/files\/2017\/02\/es2016plus-600x78.png\" alt=\"Kangax ECMAScript 2016+ compatibility table\" width=\"600\" height=\"78\" srcset=\"https:\/\/blog.mozilla.org\/javascript\/files\/2017\/02\/es2016plus-600x78.png 600w, https:\/\/blog.mozilla.org\/javascript\/files\/2017\/02\/es2016plus-252x33.png 252w, https:\/\/blog.mozilla.org\/javascript\/files\/2017\/02\/es2016plus-768x99.png 768w, https:\/\/blog.mozilla.org\/javascript\/files\/2017\/02\/es2016plus.png 897w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>ECMAScript 2016<\/h2>\n<p><a href=\"http:\/\/www.ecma-international.org\/ecma-262\/7.0\/\">ECMAScript 2016<\/a> is the latest stable edition of the ECMAScript specification. ECMAScript 2016 introduces two new features, the Exponentiation Operator and <code>Array.prototype.includes<\/code>, and also contains various minor changes.<\/p>\n<h3>New Features<\/h3>\n<h4>Exponentiation Operator<\/h4>\n<p>Status: Available from Firefox 52 (now Beta, will ship in March 2017).<\/p>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Arithmetic_Operators#Exponentiation_%28**%29\">exponentiation operator<\/a> (<code>**<\/code>) allows infix notation of exponentiation.<br \/>\nIt\u2019s a shorter and simpler replacement for <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Math\/pow\"><code>Math.pow<\/code><\/a>. The operator is right-associative.<\/p>\n<pre>\/\/ without Exponentiation Operator\r\nconsole.log(Math.pow(2, 3));             \/\/ 8\r\nconsole.log(Math.pow(2, Math.pow(3, 2)); \/\/ 512\r\n\r\n\/\/ with Exponentiation Operator\r\nconsole.log(2 <strong>**<\/strong> 3);                     \/\/ 8\r\nconsole.log(2 <strong>**<\/strong> 3 <strong>**<\/strong> 2);                \/\/ 512\r\n<\/pre>\n<ul>\n<li>Specification\n<ul>\n<li><a href=\"https:\/\/www.ecma-international.org\/ecma-262\/7.0\/#sec-exp-operator\">Exponentiation Operator<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Documentation\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Arithmetic_Operators#Exponentiation_%28**%29\">Arithmetic Operators &#8211; Exponentiation (**)<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Links\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1135708\">Bug 1135708 &#8211; Implement exponentiation operator (ES7 proposal)<\/a><\/li>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1291212\">Bug 1291212 &#8211; Ship the Exponentiation Operator<\/a><\/li>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1243858\">Bug 1243858 &#8211; Exponentiation Operator precedence update (ES2016\/ES7, Stage 4)<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Array.prototype.includes<\/h4>\n<p>Status: Available from Firefox 43.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/includes\"><code>Array.prototype.includes<\/code><\/a> is an intuitive way to check the existence of an element in an array, replacing the <code>array.indexOf(element) !== -1<\/code> idiom.<\/p>\n<pre>let supportedTypes = [\r\n  \"text\/plain\",\r\n  \"text\/html\",\r\n  \"text\/javascript\",\r\n];\r\n\r\n\/\/ without Array.prototype.includes.\r\nconsole.log(supportedTypes.indexOf(\"text\/html\") !== -1); \/\/ true\r\nconsole.log(supportedTypes.indexOf(\"image\/png\") !== -1); \/\/ false\r\n\r\n\/\/ with Array.prototype.includes.\r\nconsole.log(supportedTypes.<strong>includes<\/strong>(\"text\/html\")); \/\/ true\r\nconsole.log(supportedTypes.<strong>includes<\/strong>(\"image\/png\")); \/\/ false\r\n<\/pre>\n<ul>\n<li>Specification\n<ul>\n<li><a href=\"https:\/\/www.ecma-international.org\/ecma-262\/7.0\/#sec-array.prototype.includes\">Array.prototype.includes ( searchElement [ , fromIndex ] )<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Documentation\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/includes\">Array.prototype.includes()<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Links\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1069063\">Bug 1069063 &#8211; Implement Array.prototype.includes<\/a><\/li>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1070767\">Bug 1070767 &#8211; Enable {Array, %TypedArray%}.prototype.includes in all builds<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Miscellaneous Changes<\/h3>\n<h4>Generators can\u2019t be constructed<\/h4>\n<p>Status: Available from Firefox 43.<\/p>\n<p>Calling generator with new now throws.<\/p>\n<pre>function* g() {\r\n}\r\n\r\n<strong>new<\/strong> g(); \/\/ throws\r\n<\/pre>\n<ul>\n<li>Specifications\n<ul>\n<li><a href=\"http:\/\/www.ecma-international.org\/ecma-262\/7.0\/index.html#sec-createdynamicfunction\">CreateDynamicFunction<\/a><\/li>\n<li><a href=\"http:\/\/www.ecma-international.org\/ecma-262\/7.0\/index.html#sec-evaluatenew\">Runtime Semantics: EvaluateNew(constructProduction, arguments)<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1191486\">Bug 1191486 &#8211; Generators should not have [[Construct]]<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Iterator for yield* can catch throw()<\/h4>\n<p>Status: Available from Firefox 27.<\/p>\n<p>When <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Generator\/throw\"><code>Generator.prototype.throw<\/code><\/a> is called on a generator while it&#8217;s executing <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/yield*\"><code>yield*<\/code><\/a>, the operand of the <code>yield*<\/code> can catch the exception and return to normal completion.<\/p>\n<pre>function* inner() {\r\n  try {\r\n    yield 10;\r\n    yield 11;\r\n  } catch (e) {\r\n    <strong>yield 20;<\/strong>\r\n  }\r\n}\r\n\r\nfunction* outer() {\r\n  yield* inner();\r\n}\r\n\r\nlet g = outer();\r\nconsole.log(g.next().value);  \/\/ 10\r\nconsole.log(g.throw().value); \/\/ <strong>20<\/strong>, instead of throwing\r\n<\/pre>\n<ul>\n<li>Specifications\n<ul>\n<li><a href=\"http:\/\/www.ecma-international.org\/ecma-262\/7.0\/index.html#sec-generator-function-definitions-runtime-semantics-evaluation\">Runtime Semantics: Evaluation &#8211; YieldExpression : yield * AssignmentExpression<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/tc39\/ecma262\/commit\/f0ef98ae9ecdfd1ed1e14721e795f6188a3107ee\">Normative: Fix yield * semantics when calling .throw<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Documentation\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/yield*\">yield*<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=666396\">Bug 666396 &#8211; implement yield* operator<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Function with non-simple parameters can\u2019t have &#8220;use strict&#8221;<\/h4>\n<p>Status: Available from Firefox 52 (now Beta, will ship in March 2017).<\/p>\n<p>When a function has non-simple parameters (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\">destructuring parameters<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Default_parameters\">default parameters<\/a>, or <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/rest_parameters\">rest parameters<\/a>), the function can\u2019t have the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\"><code>\"use strict\"<\/code> directive<\/a> in its body.<\/p>\n<pre>function assertEq(a, b, message=\"\") {\r\n  <strong>\"use strict\"<\/strong>; \/\/ error\r\n\r\n  \/\/ ...\r\n}\r\n<\/pre>\n<p>However, functions with non-simple parameters can appear in code that&#8217;s already strict mode.<\/p>\n<pre><strong>\"use strict\"<\/strong>;\r\nfunction assertEq(a, b, message=\"\") {\r\n  \/\/ ...\r\n}\r\n<\/pre>\n<ul>\n<li>Specification\n<ul>\n<li><a href=\"http:\/\/www.ecma-international.org\/ecma-262\/7.0\/index.html#sec-function-definitions-static-semantics-early-errors\">Function Definitions &#8211; Static Semantics: Early Errors<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1272784\">Bug 1272784 &#8211; |function f(a = 1) { &#8220;use strict&#8221;; }| should throw Early Error.<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Nested RestElement in Destructuring<\/h4>\n<p>Status: Available from Firefox 47.<\/p>\n<p>Now a rest pattern in destructuring can be an arbitrary pattern, and also be nested.<\/p>\n<pre>let [a, <strong>...[b, ...c]<\/strong>] = [1, 2, 3, 4, 5];\r\n\r\nconsole.log(a); \/\/ 1\r\nconsole.log(b); \/\/ 2\r\nconsole.log(c); \/\/ [3, 4, 5]\r\n\r\nlet [x, y, <strong>...{length}<\/strong>] = \"abcdef\";\r\n\r\nconsole.log(x);      \/\/ \"a\"\r\nconsole.log(y);      \/\/ \"b\"\r\nconsole.log(length); \/\/ 4\r\n<\/pre>\n<ul>\n<li>Specification\n<ul>\n<li><a href=\"https:\/\/www.ecma-international.org\/ecma-262\/7.0\/#prod-BindingRestElement\">BindingRestElement<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1111386\">Bug 1111386 &#8211; Support nested rest in destructuring assignment<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Remove [[Enumerate]]<\/h4>\n<p>Status: Removed in Firefox 47.<\/p>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Proxy\/handler\/enumerate\"><code>enumerate<\/code> trap<\/a> of the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Proxy\/handler\">Proxy handler<\/a> has been removed.<\/p>\n<ul>\n<li>Specification\n<ul>\n<li><a href=\"https:\/\/github.com\/tc39\/ecma262\/commit\/d96e60a99a40fab2de0df329b3e5445ac27b8a8e\">Normative: Remove [[Enumerate]] and associated reflective capabilities<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Documentation\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Proxy\/handler\/enumerate\">Proxy handler.enumerate()<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1246318\">Bug 1246318 &#8211; Remove [[Enumerate]] and associated reflective capabilities<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>ECMAScript 2017 draft<\/h2>\n<p>ECMAScript 2017 will be the next edition of ECMAScript specification, currently in draft. <a href=\"https:\/\/tc39.github.io\/ecma262\/\">The ECMAScript 2017 draft<\/a> introduces several new features, <code>Object.values<\/code> \/ <code>Object.entries<\/code>, <code>Object.getOwnPropertyDescriptors<\/code>, String padding, trailing commas in function parameter lists and calls, Async Functions, Shared memory and atomics, and also some minor changes.<\/p>\n<h3>New Features<\/h3>\n<h4>Async Functions<\/h4>\n<p>Status: Available from Firefox 52 (now Beta, will ship in March 2017).<\/p>\n<p>Async functions help with long promise chains broken up to separate scopes, letting you write the chains just like a synchronous function.<\/p>\n<p>When an async function is called, it returns a <code>Promise<\/code> that gets resolved when the async function returns. When the async function throws, the promise gets rejected with the thrown value.<\/p>\n<p>An async function can contain an <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/await\"><code>await<\/code><\/a> expression. That receives a promise and returns a resolved value. If the promise gets rejected, it throws the reject reason.<\/p>\n<pre><strong>async<\/strong> function makeDinner(candidates) {\r\n  try {\r\n    let itemsInFridge = <strong>await<\/strong> fridge.peek();\r\n\r\n    let itemsInStore = <strong>await<\/strong> store.peek();\r\n\r\n    let recipe = <strong>await<\/strong> chooseDinner(\r\n      candidates,\r\n      itemsInFridge,\r\n      itemsInStore,\r\n    );\r\n\r\n    let [availableItems, missingItems]\r\n      = <strong>await<\/strong> fridge.get(recipe.ingredients);\r\n\r\n    let boughtItems = <strong>await<\/strong> store.buy(missingItems);\r\n\r\n    pot.put(availableItems, boughtItems);\r\n\r\n    <strong>await<\/strong> pot.startBoiling(recipe.temperature);\r\n\r\n    do {\r\n      <strong>await<\/strong> timer(5 * 60);\r\n    } while(taste(pot).isNotGood());\r\n\r\n    <strong>await<\/strong> pot.stopBoiling();\r\n\r\n    return pot;\r\n  } catch (e) {\r\n    return document.cookie;\r\n  }\r\n}\r\n\r\n<strong>async<\/strong> function eatDinner() {\r\n  eat(<strong>await<\/strong> makeDinner([\"Curry\", \"Fried Rice\", \"Pizza\"]));\r\n}\r\n<\/pre>\n<ul>\n<li>Specification Drafts\n<ul>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#prod-AsyncFunctionDeclaration\">AsyncFunctionDeclaration<\/a><\/li>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#prod-AsyncFunctionExpression\">AsyncFunctionExpression<\/a><\/li>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#prod-AsyncArrowFunction\">AsyncArrowFunction<\/a><\/li>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#prod-AsyncMethod\">AsyncMethod<\/a><\/li>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#sec-async-function-objects\">AsyncFunction Objects<\/a><\/li>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#prod-AwaitExpression\">AwaitExpression<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Documentation\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/async_function\">Async Function declaration<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/async_function\">Async Function expression<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Method_definitions#Shorthand_async_methods\">Async methods<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/AsyncFunction\">AsyncFunction<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/await\">await<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1185106\">Bug 1185106 &#8211; Implement async functions (ES 2017 proposal)<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Shared memory and atomics<\/h4>\n<p>Status: Available behind a flag from Firefox 52 (now Beta, will ship in March 2017).<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/SharedArrayBuffer\"><code>SharedArrayBuffer<\/code><\/a> is an array buffer pointing to data that can be shared between <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Worker\">Web Workers<\/a>. Views on a shared memory can be created with the <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/TypedArray\"><code>TypedArray<\/code><\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/DataView\"><code>DataView<\/code><\/a> constructors.<\/p>\n<p>When transferring <code>SharedArrayBuffer<\/code> between the main thread and a worker, the underlying data is not transferred but instead the information about the data in memory is sent. As a result it reduces the cost of using a worker to process data retrieved on main thread, and also makes it possible to process data in parallel on multiple workers without creating separate data for each.<\/p>\n<pre>\/\/ main.js\r\nlet worker = new Worker(\"worker.js\");\r\n\r\nlet sab = new <strong>SharedArrayBuffer<\/strong>(IMAGE_SIZE);\r\nworker.onmessage = functions(event) {\r\n  let image = createImageFromBitmap(event.data.buffer);\r\n  document.body.appendChild(image);\r\n};\r\ncaptureImage(sab);\r\nworker.postMessage({buffer: sab})\r\n\r\n\/\/ worker.js\r\nonmessage = function(event) {\r\n  let sab = event.data.buffer;\r\n  processImage(sab);\r\n  postMessage({buffer: sab});\r\n};\r\n<\/pre>\n<p>Moreover, a new API called <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Atomics\"><code>Atomics<\/code><\/a> provides low-level atomic access and synchronization primitives for use with shared memory. Lars T Hansen has already written about this in the Mozilla Hacks post &#8220;<a href=\"https:\/\/hacks.mozilla.org\/2016\/05\/a-taste-of-javascripts-new-parallel-primitives\/\">A Taste of JavaScript\u2019s New Parallel Primitives<\/a>&#8220;.<\/p>\n<ul>\n<li>Specifications Draft\n<ul>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#sec-sharedarraybuffer-constructor\">SharedArrayBuffer Objects<\/a><\/li>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#sec-atomics-object\">The Atomics Object<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Documentation\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/SharedArrayBuffer\">SharedArrayBuffer<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Atomics\">Atomics<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Links\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1054841\">Bug 1054841 &#8211; [meta] Shared memory for web workers<\/a><\/li>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1312446\">Bug 1312446 &#8211; Enable SharedArrayBuffer and Atomics in Firefox 52 Beta and Release<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Object.values \/ Object.entries<\/h4>\n<p>Status: Available from Firefox 47.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/values\"><code>Object.values<\/code><\/a> returns an array of a given object&#8217;s own enumerable property values, like <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/keys\"><code>Object.keys<\/code><\/a> does for property keys, and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/entries\"><code>Object.entries<\/code><\/a> returns an array of <code>[key, value]<\/code> pairs.<\/p>\n<p><code>Object.entries<\/code> is useful to iterate over objects.<\/p>\n<pre>createElement(\"img\", {\r\n  width: 320,\r\n  height: 240,\r\n  src: \"<a href=\"http:\/\/localhost\/a.png\">http:\/\/localhost\/a.png<\/a>\"\r\n});\r\n\r\n\/\/ without Object.entries\r\nfunction createElement(name, attributes) {\r\n  let element = document.createElement(name);\r\n\r\n  for (let name in attributes) {\r\n    let value = attributes[name];\r\n    element.setAttribute(name, value);\r\n  }\r\n\r\n  return element;\r\n}\r\n\r\n\/\/ with Object.entries\r\nfunction createElement(name, attributes) {\r\n  let element = document.createElement(name);\r\n\r\n  for (let [name, value] of <strong>Object.entries<\/strong>(attributes)) {\r\n    element.setAttribute(name, value);\r\n  }\r\n\r\n  return element;\r\n}\r\n<\/pre>\n<p>When property keys are not used in the loop, <code>Object.values<\/code> can be used.<\/p>\n<ul>\n<li>Specification Drafts\n<ul>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#sec-object.values\">Object.values ( O )<\/a><\/li>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#sec-object.entries\">Object.entries ( O )<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Documentation\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/values\">Object.values()<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/entries\">Object.entries()<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Links\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1208464\">Bug 1208464 &#8211; Implement proposed ES7 functions Object.values and Object.entries<\/a><\/li>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1232639\">Bug 1232639 &#8211; Optimize Object.values() and Object.entries() and let them ride the trains<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Object.getOwnPropertyDescriptors<\/h4>\n<p>Status: Available from Firefox 50.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/getOwnPropertyDescriptors\"><code>Object.getOwnPropertyDescriptors<\/code><\/a> returns all own property descriptors of a given object.<\/p>\n<p>The return value of <code>Object.getOwnPropertyDescriptors<\/code> can be passed to <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/create\"><code>Object.create<\/code><\/a>, to create a shallow copy of the object.<\/p>\n<pre>function shallowCopy(obj) {\r\n  return Object.create(Object.getPrototypeOf(obj),\r\n                       <strong>Object.getOwnPropertyDescriptors<\/strong>(obj));\r\n}\r\n<\/pre>\n<ul>\n<li>Specification Draft\n<ul>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#sec-object.getownpropertydescriptors\">Object.getOwnPropertyDescriptors ( O )<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Documentation\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/getOwnPropertyDescriptors\">Object.getOwnPropertyDescriptors()<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1245024\">Bug 1245024 &#8211; [es7] implement Object.getOwnPropertyDescriptors() proposal<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>String padding<\/h4>\n<p>Status: Available from Firefox 48.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/padStart\"><code>String.prototype.padStart<\/code><\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/padEnd\"><code>String.prototype.padEnd<\/code><\/a> add padding to a string, if necessary, to extend it to the given maximum length. The padding characters can be specified by argument.<\/p>\n<p>They can be used to output data in a tabular format, by adding leading spaces (align to end) or trailing spaces (align to start), or to add leading <code>\"0\"<\/code> to numbers.<\/p>\n<pre>let stock = {\r\n  apple: 105,\r\n  pear: 52,\r\n  orange: 78,\r\n};\r\nfor (let [name, count] of Object.entries(stock)) {\r\n  console.log(name.<strong>padEnd<\/strong>(10) + \": \" + String(count).<strong>padStart<\/strong>(5, 0));\r\n  \/\/ \"apple     : 00105\"\r\n  \/\/ \"pear      : 00052\"\r\n  \/\/ \"orange    : 00078\"\r\n}\r\n<\/pre>\n<ul>\n<li>Specification Drafts\n<ul>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#sec-string.prototype.padstart\">String.prototype.padStart( maxLength [ , fillString ] )<\/a><\/li>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#sec-string.prototype.padend\">String.prototype.padEnd( maxLength [ , fillString ] )<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Documentation\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/padStart\">String.prototype.padStart()<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/padEnd\">String.prototype.padEnd()<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1260509\">Bug 1260509 &#8211; Implement String.prototype.padStart \/ padEnd<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Trailing commas in function parameter lists and calls<\/h4>\n<p>Status: Available from Firefox 52 (now Beta, will ship in March 2017).<\/p>\n<p>Just like array elements and object properties, function parameter list and function call arguments can now have trailing commas, except for the rest parameter.<\/p>\n<pre>function addItem(\r\n  name,\r\n  price,\r\n  count = 1<strong>,<\/strong>\r\n) {\r\n}\r\n\r\naddItem(\r\n  \"apple\",\r\n  30,\r\n  2<strong>,<\/strong>\r\n);\r\n<\/pre>\n<p>This simplifies generating JavaScript code programatically, i.e. transpiling from other language. Code generator doesn&#8217;t have to worry about whether to emit comma or not, while emitting function parameters or function call arguments.<\/p>\n<p>Also this makes it easier to rearrange parameters by copy\/paste.<\/p>\n<ul>\n<li>Specification Drafts\n<ul>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#prod-FormalParameters\">FormalParameters<\/a><\/li>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#prod-CoverParenthesizedExpressionAndArrowParameterList\">CoverParenthesizedExpressionAndArrowParameterList<\/a><\/li>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#prod-Arguments\">Arguments<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1303788\">Bug 1303788 &#8211; ES2017: Implement trailing comma proposal<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Miscellaneous Changes<\/h3>\n<h4>Remove proxy OwnPropertyKeys error with duplicate keys<\/h4>\n<p>Status: Available from Firefox 51.<\/p>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Proxy\/handler\/ownKeys\"><code>ownKeys<\/code> trap<\/a> of a user-defined Proxy handler is now permitted to return duplicate keys for non-extensible object.<\/p>\n<pre>let nonExtensibleObject = Object.preventExtensions({ a: 10 });\r\n\r\nlet x = new Proxy(nonExtensibleObject, {\r\n  ownKeys() {\r\n    return [\"a\", \"a\", \"a\"];\r\n  }\r\n});\r\n\r\nObject.getOwnPropertyNames(x); \/\/ [\"a\", \"a\", \"a\"]\r\n<\/pre>\n<ul>\n<li>Specification Drafts\n<ul>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys\">[[OwnPropertyKeys]] ( )<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/tc39\/ecma262\/commit\/6d0fc4578f00f99df8fbd805f3c8db91ca257239\">Normative: Remove proxy OwnPropertyKeys error with duplicate keys<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1293995\">Bug 1293995 &#8211; Remove proxy OwnPropertyKeys error with duplicate keys<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Case folding for \\w, \\W, \\b, and \\B in unicode RegExp<\/h4>\n<pre>Status: Available from Firefox 54 (now Nightly, will ship in June 2017).\r\n<\/pre>\n<p><code>\\w<\/code>, <code>\\W<\/code>, <code>\\b<\/code>, and <code>\\B<\/code> in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/RegExp\"><code>RegExp<\/code><\/a> with unicode+ignoreCase flags now treat U+017F (LATIN SMALL LETTER LONG S) and U+212A (KELVIN SIGN) as word characters.<\/p>\n<pre>console.log(\/<strong>\\w<\/strong>\/iu.test(\"\\u017F\")); \/\/ true\r\nconsole.log(\/<strong>\\w<\/strong>\/iu.test(\"\\u212A\")); \/\/ true\r\n<\/pre>\n<ul>\n<li>Specification Drafts\n<ul>\n<li><a href=\"https:\/\/tc39.github.io\/ecma262\/#sec-runtime-semantics-wordcharacters-abstract-operation\">Runtime Semantics: WordCharacters ( )<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/tc39\/ecma262\/commit\/996af87b7072b3c3dd2b1def856c66f456102215\">Unify handling of RegExp CharacterClassEscapes \\w and \\W and Word Asserts \\b and \\B<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1281739\">Bug 1281739 &#8211; Match updated spec for `\/\\w\/iu` and `\/\\W\/iu`<\/a><\/li>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1338373\">Bug 1338373 &#8211; Match updated spec for `\/\\b\/iu` and `\/\\B\/iu`<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Remove arguments.caller<\/h4>\n<p>Status: Removed in Firefox 53 (now Developer Edition, will ship in April 2017).<\/p>\n<p>The <code>caller<\/code> property on <code>arguments<\/code> objects, that threw a <code>TypeError<\/code> when gotten or set, has been removed.<\/p>\n<pre>function f() {\r\n  \"use strict\";\r\n  arguments.<strong>caller<\/strong>; \/\/ doesn't throw.\r\n}\r\nf();\r\n<\/pre>\n<ul>\n<li>Specification Draft\n<ul>\n<li><a href=\"https:\/\/github.com\/tc39\/ecma262\/commit\/b9c327f615618da5a9f030c008b0339b507e3289\">Normative: Remove arguments.caller poison pill<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1324208\">Bug 1324208 &#8211; Remove strict arguments poison pill for &#8220;caller&#8221; property<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>What&#8217;s Next?<\/h2>\n<p>We&#8217;re also working on implementing <a href=\"https:\/\/github.com\/tc39\/proposals\">ECMAScript proposals<\/a>.<\/p>\n<h3>New Feature<\/h3>\n<h4>Function.prototype.toString revision (proposal Stage 3)<\/h4>\n<p>Status: Work in progress.<\/p>\n<p>This proposal standardizes the string representation of functions to make it interoperable between browsers.<\/p>\n<ul>\n<li>Proposal\n<ul>\n<li><a href=\"https:\/\/tc39.github.io\/Function-prototype-toString-revision\/\">Function.prototype.toString revision<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1317400\">Bug 1317400 &#8211; Implement &#8220;Function.prototype.toString revision&#8221; proposal<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Lifting Template Literal Restriction (proposal Stage 3)<\/h4>\n<p>Status: Available from Firefox 53 (now Developer Edition, will ship in April 2017).<\/p>\n<p>This proposal removes a restriction on escape sequences in <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Template_literals#Tagged_template_literals\">Tagged Template Literals<\/a>.<\/p>\n<p>If an invalid escape sequence is found in a tagged template literal, the template value becomes <code>undefined<\/code> but the template raw value becomes the raw string.<\/p>\n<pre>function f(callSite) {\r\n  console.log(callSite);     \/\/ [undefined]\r\n  console.log(callSite.raw); \/\/ [\"\\\\f. (\\\\x. f (x x)) (\\\\x. f (x x))\"]\r\n}\r\n\r\nf`<strong>\\f<\/strong>. (<strong>\\x<\/strong>. f (x x)) (<strong>\\x<\/strong>. f (x x))`;\r\n<\/pre>\n<ul>\n<li>Proposal\n<ul>\n<li><a href=\"https:\/\/tc39.github.io\/proposal-template-literal-revision\/\">Template Literal Revision<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1317375\">Bug 1317375 &#8211; Implement &#8220;Template Literals Revision \/ Lifting Template Literal Restriction&#8221; ECMAScript proposal<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Async Iteration (proposal Stage 3)<\/h4>\n<p>Status: Work in progress.<\/p>\n<p>The Async Iteration proposal comes with two new features: async generator and <code>for-await-of<\/code> syntax.<\/p>\n<p>The async generator is a mixture of a generator function and an async function. It can contain <code>yield<\/code>, <code>yield*<\/code>, and <code>await<\/code>. It returns a generator object that behaves asynchronously by returning promises from <code>next<\/code>\/<code>throw<\/code>\/<code>return<\/code> methods.<\/p>\n<p>The <code>for-await-of<\/code> syntax can be used inside an async function and an async generator. It behaves like <code>for-of<\/code>, but interacts with the async generator and awaits internally on the returned promise.<\/p>\n<pre><strong>async function*<\/strong> loadImagesSequentially(urls) {\r\n  for (let url of urls) {\r\n    <strong>yield<\/strong> <strong>await<\/strong> loadImage(url);\r\n  }\r\n}\r\n\r\nasync function processImages(urls) {\r\n  let processedImages = [];\r\n\r\n  <strong>for await<\/strong> (let image <strong>of<\/strong> loadImagesSequentially(urls)) {\r\n    let processedImage = await processImageInWorker(image);\r\n    processedImages.push(processedImage);\r\n  }\r\n\r\n  return processedImage;\r\n}\r\n<\/pre>\n<ul>\n<li>Proposal\n<ul>\n<li><a href=\"https:\/\/tc39.github.io\/proposal-async-iteration\/\">Async Iteration<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Bugzilla Link\n<ul>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1331092\">Bug 1331092 &#8211; Implement Async Iteration<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>100% on the ES2016+ compatibility table is an important milestone to achieve, but the ECMAScript language will continue evolving. We&#8217;ll keep working on implementing new features and fixing existing ones to make them standards-compliant and improve their performance. If you find any bug, performance issue, or compatibility fault, please let us know by <a href=\"http:\/\/bugzilla.mozilla.org\/\">filing a bug in Bugzilla<\/a>. Firefox\u2019s JavaScript engine engineers can also be found in #jsapi on irc.mozilla.org. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After the release of ECMAScript 2015, a.k.a. ES6, the ECMAScript Language Specification is evolving rapidly: it&#8217;s getting many new features that will help developing web applications, with a new release planned every year. Last week, Firefox Nightly 54 reached 100% &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/javascript\/2017\/02\/22\/ecmascript-2016plus-in-firefox\/\">Continue reading<\/a><\/p>\n","protected":false},"author":1430,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25569],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/javascript\/wp-json\/wp\/v2\/posts\/804"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/javascript\/wp-json\/wp\/v2\/users\/1430"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/javascript\/wp-json\/wp\/v2\/comments?post=804"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/javascript\/wp-json\/wp\/v2\/posts\/804\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/javascript\/wp-json\/wp\/v2\/media?parent=804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/javascript\/wp-json\/wp\/v2\/categories?post=804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/javascript\/wp-json\/wp\/v2\/tags?post=804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}