{"id":18052592,"url":"https://github.com/opensrc0/es-features","last_synced_at":"2026-03-19T03:03:11.298Z","repository":{"id":219696425,"uuid":"749669103","full_name":"opensrc0/es-features","owner":"opensrc0","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-30T11:01:52.000Z","size":100,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T07:26:59.563Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/opensrc0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-29T06:40:08.000Z","updated_at":"2024-04-10T04:13:24.000Z","dependencies_parsed_at":"2024-10-30T23:12:33.563Z","dependency_job_id":"329c785b-6753-469b-a8ee-9f4c2fff79d0","html_url":"https://github.com/opensrc0/es-features","commit_stats":null,"previous_names":["opensrc0/es-features"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/opensrc0/es-features","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensrc0%2Fes-features","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensrc0%2Fes-features/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensrc0%2Fes-features/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensrc0%2Fes-features/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opensrc0","download_url":"https://codeload.github.com/opensrc0/es-features/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensrc0%2Fes-features/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261344840,"owners_count":23144939,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-30T23:12:26.356Z","updated_at":"2026-02-02T12:03:39.294Z","avatar_url":"https://github.com/opensrc0.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eDifferent ES features according to ES release\u003c/h1\u003e\n\u003cbr /\u003e\n\nEvery year ES is releasing different features and those features will be available in javascript. Most of the browser are providing the support but chrome is the source of trust of newly available feature.\n\n\n# Table of contents\n1. [ES2015 || ES6](#ES2015-ES6)\n     1. Arrows\n     2. Classes\n     3. Enhanced Object Literals\n     4. Template Strings\n     5. Destructuring\n     6. Default + Rest + Spread\n     7. Let + Const\n     8. Generators\n     9. Unicode\n     10. Modules\n     11. Module Loaders\n     12. Map + Set + WeakMap + WeakSet\n     13. Proxies\n     14. Symbols\n     15. Math + Number + String + Array + Object APIs\n     16. Tail Calls\n     17. Promises\n     18. Binary and Octal Literals\n     19. Subclassable Built-ins\n\n2. [ES2016 || ES7](#ES2016-ES7)\n    1. Array.prototype.includes()\n    2. Exponential Operator\n    3. Class Properties\n   \n3. [ES2017 || ES8](#ES2017-ES8)\n    1. async function\n    2. Object.entries()\n    3. Object.values()\n    4. Object.getOwnPropertyDescriptors()\n    5. Trailing Commas\n    6. string.padEnd() and string.padStart() functions:\n\n4. [ES2018 || ES9](#ES2018-ES9)\n    1. Async iterators\n    2. Object rest properties\n    3. Object spread properties\n    4. Promise prototype finally\n   \n6. [ES2019 || ES10](#ES2019-ES10)\n    1. Array.prototype.{flat,flatMap}\n    2. Object.fromEntries\n    3. String.prototype.{trimStart,trimEnd}\n    4. Symbol.prototype.description\n    5. Optional catch binding\n\n6. [ES2020 || ES11](#ES2020-ES11)\n    1. BigInt\n    2. Dynamic import\n    3. Exporting modules\n    4. Optional Chaining\n    5. Nullish coalescing operator\n    6. Promise.AllSettled\n    7. String.matchAll()\n    8. For-in order\n\n9. [ES2021 || ES12](#ES2021-ES12)\n    1. Numberic separators\n    2. String.protype.replaceAll\n    3. Logical assignment operator a) \u0026\u0026=  b) ||=  c) ??=\n    4. Promise.any method\n    5. WeakRef\n\n8. [ES2022 || ES13](#ES2022-ES13)\n    1. Top level await\n    2. Private instance fields, methods, and accessors\n    3. Static class fields and method\n    4. Static class initialization blocks\n    5. Error: .cause\n    6. Array, String, and TypedArray: .at() Method\n    7. Object: .hasOwn()\n    8. RegExp: match .indices ('d' flag)\n\n \n## ES2015-ES6\n----\n\nAll fetures Referance: https://github.com/lukehoban/es6features\n\n###### 1.1) Arrows\n---\n- Arrows are a function shorthand using the =\u003e syntax.\n- An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations\n- Does not have its own bindings to this or super, and should not be used as methods\n- Does not have arguments,\n- Not suitable for call, apply and bind methods\n- Can not be used as constructors.\n- Can not use yield, within its body.\n\n```javascript\n// Expression bodies\nvar odds = evens.map(v =\u003e v + 1);\nvar nums = evens.map((v, i) =\u003e v + i);\nvar pairs = evens.map(v =\u003e ({even: v, odd: v + 1}));\n// Statement bodies\nnums.forEach(v =\u003e {\n  if (v % 5 === 0)\n    fives.push(v);\n});\n// Lexical this\nvar bob = {\n  _name: \"Bob\",\n  _friends: [],\n  printFriends() {\n    this._friends.forEach(f =\u003e\n      console.log(this._name + \" knows \" + f));\n  }\n}\n```\n\n###### 1.2 Classes\n---\n- ES6 classes are a simple sugar over the prototype-based OO pattern\n- JavaScript Classes are templates for JavaScript Objects.\n- Use the keyword class to create a class.\n- Always add a method named constructor():\n\n```javascript\nclass Car {\n  constructor(name, year) {\n    this.name = name;\n    this.year = year;\n  }\n}\n```\n\n###### 1.3 Enhanced Object Literals\n---\n\n```javascript\n// ES5 code\nvar a = 1, b = 2, c = 3;\nvar  obj = {\n    a: a,\n    b: b,\n    c: c\n  };\n// obj.a = 1, obj.b = 2, obj.c = 3\n\n// ES6 code\nconst\n  a = 1, b = 2, c = 3;\n  obj = {\n    a\n    b\n    c\n  };\n\n// obj.a = 1, obj.b = 2, obj.c = 3\n\n// ES6 code\nconst\n  i = 1,\n  obj = {\n    ['i' + i]: i\n  };\n\nconsole.log(obj.i1); // 1\n```\n\n######  1.4) Template Strings\n---\nTemplate strings provide syntactic sugar for constructing strings\n\n```javascript\n// Basic literal string creation\n`In JavaScript '\\n' is a line-feed.`\n\n// String interpolation\nvar name = \"Bob\", time = \"today\";\n`Hello ${name}, how are you ${time}?`\n```\n\n######  1.5 Destructuring\n---\nThe destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.\n\n```javascript\nlet arr = [\"John\", \"Smith\"]\nlet [firstName, surname] = arr;\nalert(firstName); // John\nalert(surname);  // Smith\n```\n\n######  1.6)  Default + Rest + Spread\n---\n```javascript\nfunction f(x, y=12) {\n  // y is 12 if not passed (or passed as undefined)\n  return x + y;\n}\nf(3) == 15\n\nfunction f(x, ...y) {\n  // y is an Array\n  return x * y.length;\n}\nf(3, \"hello\", true) == 6\n\nfunction f(x, y, z) {\n  return x + y + z;\n}\n// Pass each elem of array as argument\nf(...[1,2,3]) == 6\n```\n\n######  1.7) Let + Const\n---\n\n######  1.8) Generators\n---\n\n###### 1.9) Unicode\n---\n\n###### 1.10) Modules\n---\n\nLanguage-level support for modules for component definition.\n```javascript\n// app.js\nimport * as math from \"lib/math\";\nalert(\"2π = \" + math.sum(math.pi, math.pi));\n```\n\n###### 1.11) Module Loaders\n---\n\n###### 1.12) Map + Set + WeakMap + WeakSet\n---\n\n###### 1.13) Proxies\n---\n\n###### 1.14) Symbols\n---\n\n###### 1.15) Math + Number + String + Array + Object APIs\n---\n\n###### 1.16) Tail Calls\n---\n\n######  1.17) Promises\n---\n\n###### 1.18) Binary and Octal Literals\n---\n\n###### 1.19) Subclassable Built-ins\n---\n\n\n## ES2016-ES7\n---\nReferance: https://github.com/daumann/ECMAScript-new-features-list/blob/master/ES2016.MD\n\n######  2.1 ) Array.prototype.includes()\n---\n\nThe includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.\n\n```javascript\nlet numbers = [1, 2, 3, 4];\n// ES 6 before\nif(numbers.indexOf(2) !== -1) {  console.log('Array contains value');}\n// ES 6 after\nif(numbers.includes(2)) {  console.log('Array contains value');}\n```\n\n###### 2.2) Exponential Operator:\n---\n\n3 ** 3\nO/P: 27\n\n```javascript\nlet cubed = x =\u003e x ** 3;\ncubed(2) // 8\n```\n\n###### 2.3) Class Properties :\n---\n\n```javascript\nclass Animal {\n    constructor() {\n        this.name = \"Lion\"\n    }\n    age = 0;\n}\n\nThat will be complied to:\n    class Animal {\n        constructor() {\n            this.age = 0;\n            this.name = \"Lion\";\n        }\n    }\nEspecially react developers can relate easily state! and initialProps!:\n    class Animal {\n        constructor() {\n            this.name = \"Lion\"\n        }\n        age = 0;\n        state = {\n        }\n        initialProps = {\n        }\n    }\n```\n\n\n## ES2017-ES8\n---\nhttps://github.com/daumann/ECMAScript-new-features-list/blob/master/ES2017.MD\n\n###### 3.1)  async function\n---\n\n- \"async and await make promises easier to write\"\n- async makes a function return a Promise\n- await makes a function wait for a Promise\n\n```javascript\nfunction resolveAfter2Seconds() {\n  return new Promise(resolve =\u003e {\n    setTimeout(() =\u003e {\n      resolve('resolved');\n    }, 2000);\n  });\n}\n\nasync function asyncCall() {\n  console.log('calling');\n  const result = await resolveAfter2Seconds();\n  console.log(result);\n  // expected output: \"resolved\"\n}\n\nasyncCall();\n```\nThe await keyword is only valid inside async functions within regular JavaScript code. If you use it outside of an async function's body, you will get a SyntaxError.\n\n###### 3.2) Object.entries()\n---\nJavaScript Object.entries() method is used to return an array of a given object's own enumerable property [key, value] pairs\n\n```javascript\nvar fruits = {\n    apple: 10,\n    orange: 20,\n    grapes: 30,\n    pineapple: 40\n}\n\n Object.entries(fruits);\n O/P // =\u003e [ [\"apple\", 10], ...etc ]\n\nfor (var [key, val] of Object.entries(fruits)) {\n    console.log(key, val);\n}\nOutput:\napple 10\norange 20\ngrapes 30\npineapple 40\n\n```\n\n###### 3.3) Object.values()\n---\n\nObject.values lets us return an array of a given object's own enumerable property values. Note that the order is the same as provided by the for...in loop.\n\n```javascript\nvar fruits = {\n    apple: 10,\n    orange: 20,\n    grapes: 30,\n    pineapple: 40\n}\n\nObject.values(fruits)\nO/P [10, 20, 30, 40]\n\nvar totalVegetables = Object.values(fruits).reduce((a, b) =\u003e a + b);\nconsole.log(totalVegetables);\nOutput: 100\n```\n\n###### 3.4) Object.getOwnPropertyDescriptors()\n---\n\nObject.getOwnPropertyDescriptors() returns all own property descriptors of a given object\nA property descriptor is a record with one of the\n- value\n- writable\n- get\n- set\n- configurable\n- enumerable\n\n```javascript\nlet myObj = {\n  property1: 'foo',\n  property2: 'bar',\n  property3: 42,\n  property4: () =\u003e console.log('prop4')  \n}\n\nObject.getOwnPropertyDescriptors(myObj)\n/*\n{ property1: {…}, property2: {…}, property3: {…}, property4: {…} }\n  property1: {value: \"foo\", writable: true, enumerable: true, configurable: true}\n  property2: {value: \"bar\", writable: true, enumerable: true, configurable: true}\n  property3: {value: 42, writable: true, enumerable: true, configurable: true}\n  property4: {value: ƒ, writable: true, enumerable: true, configurable: true}\n  __proto__: Object\n*/\n```\n\n###### 3.5) Trailing Commas\n---\n\n```javascript\nvar list = [\n    \"one\",\n    \"two\",\n    \"three\",   // It is valid\n]\n\nconst func = (a,b,c,) =\u003e {\n  // no error occurs\n};\n```\n\n######  3.8) string.padEnd() and string.padStart() functions:\n----\n\n```javascript\n'1'.padStart(3, 0);\nO/P: \"001\"\n\n'1'.padEnd(5, 0);\nO/P: \"10000\"\n```\n\n## ES2018-ES9\n---\n\nhttps://github.com/daumann/ECMAScript-new-features-list/blob/master/ES2018.MD\n\n###### 4.1) Async iterators\n---\n\nAsynchronous iteration allow us to iterate over data that comes asynchronously, on-demand.\nLike, for instance, when we download something chunk-by-chunk over a network. And asynchronous generators make it even more convenient.\n\n```javascript\nfunction asyncIterator() {\n  const array = [1, 2];\n  return {\n    next: function() {\n      if (array.length) {\n        return Promise.resolve({\n          value: array.shift(),\n          done: false\n        });\n      } else {\n        return Promise.resolve({\n          done: true\n        });\n      }\n    }\n  };\n}\n\nvar iterator = asyncIterator();\n\n(async function() {\n    await iterator.next().then(console.log); // { value: 1, done: false }\n    await iterator.next().then(console.log); // { value: 2, done: false }\n    await iterator.next().then(console.log); // { done: true }\n})();\n```\n\n###### 4.2) Object rest properties\n---\n\nRest properties for object destructuring assignment.\n\n```javascript\nlet { fname, lname, ...rest } = { fname: \"Hemanth\", lname: \"HM\", location: \"Earth\", type: \"Human\" };\nfname; //\"Hemanth\"\nrest; // {location: \"Earth\", type: \"Human\"}\n```\n\n###### 4.3) Object spread properties\n---\n\nSpread properties for object destructuring assignment.\n\n```javascript\nlet info = {fname, lname, ...rest};\ninfo; // { fname: \"Hemanth\", lname: \"HM\", location: \"Earth\", type: \"Human\" }\n```\n\n###### 4.4) Promise prototype finally\n---\n\nPromise API is extended by an optional finally block which is called in any case (after the Promise is resolved or is rejected).\n\n```javascript\nfunction testFinally() {\n  return new Promise((resolve,reject) =\u003e resolve())\n}\n\ntestFinally().then(() =\u003e console.debug(\"resolved\")).finally(() =\u003e console.debug(\"finally\"))\n// resolved\n// finally\n```\n\n## ES2019-ES10\n---\n\nhttps://dev.to/prabusubra/es2019-es10-features-5b14\n\n###### 5.1) Array.prototype.{flat,flatMap}\n---\n\n```javascript\nThe flat() method enables you to easily concatenate all sub-array elements of an array. Consider the following example:\n\narr = [10, [20, [30]]];\n\nconsole.log(arr.flat());     // =\u003e [10, 20, [30]]\nconsole.log(arr.flat(1));    // =\u003e [10, 20, [30]]\nconsole.log(arr.flat(2));    // =\u003e [10, 20, 30]\n```\nThe flatMap() method combines map() and flat() into one method.\nIt first creates a new array with the return value of a provided function and then concatenates all sub-array elements of the array.\n\n```javascript\nconsole.log(arr.map(value =\u003e [Math.round(value)]));    \n// =\u003e [[4], [20], [26]]\n\nconsole.log(arr.flatMap(value =\u003e [Math.round(value)]));    \n// =\u003e [4, 20, 26]\n```\n\n###### 5.2) Object.fromEntries\n---\n\nThis static method allows you to easily transform a list of key-value pairs into an object:\n\n```javascript\nconst myArray = [['one', 1], ['two', 2], ['three', 3]];\nconst obj = Object.fromEntries(myArray);\nconsole.log(obj);    // =\u003e {one: 1, two: 2, three: 3}\n```\n\n###### 5.3)  String.prototype.{trimStart,trimEnd}\n---\n\nThe trimStart() and trimEnd() methods are technically the same as trimLeft() and trimRight(). These methods are currently stage 4 proposals and will be added to the specification for consistency with padStart() and padEnd(). \n\n```javascript\nconst str = \"   string   \";\n\n// es2019\nconsole.log(str.trimStart());    // =\u003e \"string   \"\nconsole.log(str.trimEnd());      // =\u003e \"   string\"\n\n// the same as\nconsole.log(str.trimLeft());     // =\u003e \"string   \"\nconsole.log(str.trimRight());    // =\u003e \"   string\"\n```\n\n###### 5.4) Symbol.prototype.description\n---\n\nWhen creating a Symbol, you can add a description to it for debugging purposes. Sometimes, it’s useful to be able to directly access the description in your code.\n\nThis ES2019 proposal adds a read-only description property to the Symbol object, which returns a string containing the description of the Symbol. Here are some examples:\n\n```javascript\nlet sym = Symbol('foo');\nconsole.log(sym.description);    // =\u003e foo\n\nsym = Symbol();\nconsole.log(sym.description);    // =\u003e undefined\n\n// create a global symbol\nsym = Symbol.for('bar');\nconsole.log(sym.description);    // =\u003e bar\n```\n\n###### 5.5) Optional catch binding\n---\n\nThis makes a small change to the ECMAScript specification that allows you to omit the catch binding and its surrounding parentheses:\n\n```javascript\ntry {\n  // use a feature that the browser might not have implemented\n} catch {\n  // do something that doesn’t care about the value thrown\n}\n```\n\n\n## ES2020-ES11\n---\n\nhttps://areknawo.com/ecmascript-2020-biggest-new-features/\nhttps://dev.to/aryclenio/the-new-features-of-javascript-in-2020-es11-7jc\n\n###### 6.1) BigInt\n---\n\nThe biggest integer \"usual\" number type can handle is equal to 2 ** 53 - 1 or 9007199254740991. You can access this value under the MAX_SAFE_INTEGER constant.\n\n```javascript\nNumber.MAX_SAFE_INTEGER; // 9007199254740991\n```\n\n###### 6.2) Dynamic import\n---\n\nNow, with Javascript, we can import modules dynamically through variables. With that, the variables that receive the modules are able to encompass the namespaces of these modules in a global way.\n\n```javascript\nimport(\"module.js\").then((module) =\u003e {\n  // ...\n});\n// or\nasync () =\u003e {\n  const module = await import(\"module.js\");\n};\n```\n\n```javascript\nlet Dmodule;\n\nif (\"module 1\") {\n  Dmodule = await import('./module1.js')\n} else {\n  Dmodule = await import('./module2.js')\n}\n\n/* It is possible to use Dmodule. (Methods)\nthroughout the file globally */\nDmodule.useMyModuleMethod()\n```\n\n\n###### 6.3) Exporting modules\n---\nA new syntax was added allowing the export of modules similar to import that already existed, see an example below:\n\n```javascript\n// Existing in JS\nimport * as MyComponent from './Component.js'\n// Added in ES11\nexport * as MyComponent from './Component.js'\n```\n\n###### 6.4) Optional Chaining\n---\n\nOptional Chaining, known to babel users, is now supported natively by Javascript\n\n```javascript\nconst user = {\n  \"name\": \"Aryclenio Barros\",\n  \"age\": 22,\n  \"alive\": true,\n  \"address\": {\n    \"street\": \"Hyrule street\",\n    \"number\": 24,\n  }\n}\n// Without optional chaining\nconst number = user.address \u0026\u0026 user.address.number\n// With optional chaining\nconst number = user.address?.number\n```\n\n###### 6.5) Nullish coalescing operator\n---\n\nNow we're starting to talk about some truly new stuff! Nullish coalescing operator (??) is a new JS operator allowing basically to provide a \"default value\" when the accessed one is either null or undefined. Check it out:\n\n```javascript\nconst basicValue = \"test\";\nconst nullishValue = null;\nconst firstExample = basicValue ?? \"example\"; // \"test\"\nconst secondExample = nullishValue ?? \"example\"; // \"example\"\n```\n\n###### 6.6) Promise.AllSettled\n---\n\nThe Promise.AllSettled attribute allows you to perform a conditional that observes whether all promises in an array have been resolved\n\n```javascript\nconst myArrayOfPromises = [\n    Promise.resolve(myPromise),\n    Promise.reject(0),\n    Promise.resolve(anotherPromise)\n]\n\nPromise.AllSettled(myArrayOfPromises).then ((result) =\u003e {\n   // Do your stuff\n})\n```\n\n###### 6.7) String.matchAll()\n---\n\nBasically, if you've ever worked with RegExps before, String.matchAll() is a nice alternative to using RegExp.exec() in a while loop with the g flag enabled. That's all there's to it. It returns an iterator (not to be confused with full-blown arrays) that contains all the match results - including capturing groups.\n\n```javascript\nconst regexp = /t(e)(st(\\d?))/g;\nconst str = \"test1test2\";\nconst resultsArr = [...str.matchAll(regexp)]; // convert iterator to an array\n\nresultsArr[0]; // [\"test1\", \"e\", \"st1\", \"1\"]\nresultsArr[0]; // [\"test2\", \"e\", \"st2\", \"2\"]\n```\n\n###### 6.8) For-in order\n---\n\nLastly, we've got just a minor tweak to the specs that now strictly defines the order in which the for..in loop should iterate. It was already handled pretty well by the browsers themselves, so it's just a matter of making it official.\n\n\n## ES2021-ES12\n---\nhttps://dev.to/brayanarrieta/new-javascript-features-ecmascript-2021-with-examples-3hfm\n\n###### 7.1) Numberic separators\n---\nNumberic separators\nAllows numeric literals use underscores as separators to help to improve readability\n\n```javascript\n// A billion\nconst amount = 1_000_000_000;\n\n// Hundreds of millions     \nconst amount = 1_475_938.38;\n```\n\n\n###### 7.2) String.protype.replaceAll\n---\n\nCurrently, there is no way to replace all instances of a substring without the use of global regexp (/regex/g)\n\n```javascript\nBefore (with regex)\nconst message = 'hello+this+is+a+message';\nconst messageWithSpace = message.replace(/\\+/g, ' ');\n// hello this is a message\n\n```\n\n```javascript\nAfter (with new method replaceAll)\nconst message = 'hello+this+is+a+message';\nconst messageWithSpace = message.replaceAll('+', ' ')\n\n// hello this is a message\n```\n\n\n###### 7.3) Logical assignment operator\n---\n\nThere are some new operators:\n\nAnd \u0026 Equals (\u0026\u0026=)\nOR \u0026 Equals (||=)\nNullish Coalescing \u0026 Equals (??=)\n\n\n```javascript\nlet a = 1;\nif(a){\n  a = 8;\n}\n\n// Output: a = 8\n```\n\n```javascript\nlet a = 1;\na \u0026\u0026= 3\n\n// Output: a = 3\n```\n\n```javascript\n//Before\n// If conditional\nlet a = undefined;\nif(!a){\n  a = 5;\n}\n\n// Output: a = 5\n\n// OR\na = a || 3;\n\n// Output: a = 3\n\n```\n\n```javascript\n// After\nlet a = 0;\na ||= 3\n\n// Output: a = 3\n\n```\n\n```javascript\n//Nullish Coalescing \u0026 Equals (??=)\n//Assign when the value is null or undefined.\nlet a = undefined; \na ??= 7\n\n// Output: a = 7\n```\n\n###### 7.4) Promise.any method\n---\n\n```javascript\nconst firstPromise = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e reject(), 1000);\n});\n\nconst secondPromise = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e reject(), 2000);\n});\n\nconst thirdPromise = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e reject(), 3000);\n});\n\ntry {\n  const first = await Promise.any([\n    firstPromise, secondPromise, thirdPromise\n  ]);\n  // Any of the promises was fulfilled.\n} catch (error) {\n  console.log(error);\n  // AggregateError: All promises were rejected\n}\n```\n\n###### 7.5) WeakRef\n---\nWeakRef provides two new pieces of functionality\n\ncreating weak references to objects with the WeakRef class\nrunning user-defined finalizers after objects are garbage-collected, with the FinalizationRegistry class\n\n```javascript\nconst myObject = new WeakRef({\n  name: ‘Sudheer’,\n  age: 34\n});\nconsole.log(myObject.deref()); //output: {name: “Sudheer”, age: 35}\nconsole.log(myObject.deref().name); //output: Sudheer\n\n\n// Create new FinalizationRegistry:\nconst reg = new FinalizationRegistry((val) =\u003e {\n  console.log(val);\n});\n\n(() =\u003e {\n// Create new object:\n  const obj = {}\n\n// Register finalizer for the \"obj\" as first argument and value for callback function as second argument:\n  reg.register(obj, 'obj has been garbage-collected.')\n})();\n```\n\n\n## ES2022-ES13\n---\n\nhttps://dev.to/brayanarrieta/new-javascript-features-ecmascript-2022-with-examples-4nhg\n\n###### 8.1) Top-level await\n---\n\n```javascript\n//The old behavior\n\nawait Promise.resolve(console.log('Hello World'));\n// Output: SyntaxError: await is only valid in async function\n\n// Alternative to fix the problem\n(async function() {\n  await Promise.resolve(console.log('Hello World'));\n  // Output: Hello World\n}());\n```\n\n\n```javascript\nawait Promise.resolve(console.log('Hello World'));\n// → Hello World\n\n\n//Dynamic dependency pathing\nconst strings = await import(`/i18n/${navigator.language}`);\n\n//Resource initialization\nconst connection = await dbConnector();\n\n// Dependency fallbacks\nlet jQuery;\ntry {\n  jQuery = await import('https://cdn-a.com/jQuery');\n} catch {\n  jQuery = await import('https://cdn-b.com/jQuery');\n}\n```\n\n###### 8.2) Private instance fields, methods, and accessors\n---\nPreviously when was needed to declare a private method or field needs to be added an underscore at the beginning of the method name (based on convention), however, that does not guarantee that the method will be private.\n\nWith ES2022 was added as new features as private instance fields, methods, and accessors. We need to add just # at the beginning of the method name and in that way will be declared as private.\n\n```javascript\nclass Test {\n  #firstName = 'test-name';\n}\n\nconst test = new Test();\ntest.firstName\n\n// Output: undefined\n```\n\n```javascript\nclass Test {\n\n  #addTestRunner(testRunner){\n    this.testRunner = testRunner\n  }\n}\n\nconst test = new Test();\ntest.addTestRunner({name: 'test'});\n\n// Output: TypeError: test.addTestRunner is not a function\n```\n\n```javascript\nPrivate accessors (getters and setters)\n\nclass Test {\n\n  get #name(){\n    return 'test-name';\n  }\n}\n\nconst test = new Test();\ntest.name\n\n// Output: undefined\n```\n\n###### 8.3) Static class fields and methods\n---\nStatic class fields and methods are not used on instances of a class. Instead, can be called on the class itself and is declared using the static keyword\n\nStatic methods are often utility functions, and helpers, whereas static properties are useful for caches, fixed-configuration, or any other data we don’t need to be replicated across instances.\n\n```javascript\nclass Test {\n  static firstName = 'test-static-name';\n}\n\nTest.firstName\n\n// Output: test-static-name\n\n\nclass Test {\n  static greeting(){\n    console.log('Hello this is a greeting from a static method');\n  }\n}\n\nTest.greeting();\n\n// Output: Hello this is a greeting from a static method\n```\n\n###### 8.4) Static class initialization blocks\n\n\n###### 8.5) Error: .cause\nError and its subclasses now let us specify the reason behind the error.\n\nWith the Error cause, we can add more intrinsic information for our errors. To use this new feature, we should specify the error options as a second parameter, and with the cause key we can pass the error that we want to chain.\n\n```javascript\nconst getUsers = async(array)=\u003e {\n  try {\n    const users =  await fetch('https://myapi/myusersfake');\n    return users;\n  } catch (error) {\n    console.log('enter')\n    throw new Error('Something when wrong, please try again later', { cause: error })\n  }\n}\n\ntry{\n  const users = await getUsers();\n} catch(error) {\n  console.log(error); // Error: The array need a minimum of two elements\n  console.log(error.cause); // TypeError: Failed to fetch\n}\n```\n\n###### 8.6) Array, String, and TypedArray: .at() Method\n\n\n```javascript\nconst fruitsArray = ['banana', 'apple', 'orange', 'kiwi'];\nconsole.log(fruitsArray[fruitsArray.length -1])\n// Output: kiwi\n\nconst fruit = 'kiwi';\nconsole.log(fruit[fruit.length -1])\n// Output: i\n```\n\n```javascript\nconst fruitsArray = ['banana', 'apple', 'orange', 'kiwi'];\nconsole.log(fruitsArray.at(-1))\n// Output: kiwi\n\nconst fruit = 'kiwi';\nconsole.log(fruit.at(-1))\n// Output: i\n```\n\n###### 8.6) Object: .hasOwn()\n\n\n```javascript\nlet hasOwnProperty = Object.prototype.hasOwnProperty\n\nif (hasOwnProperty.call(object, \"foo\")) {\n  console.log(\"has property foo\")\n}\n```\n\n```javascript\nif (Object.hasOwn(object, \"foo\")) {\n  console.log(\"has property foo\")\n}\n```\n\n\n\n###### 8.6) RegExp: match .indices ('d' flag)\n\nThe new /d flag feature provides some additional information about the start and indices position end of each match in the input string.\n\n```javascript\nconst regexExample2022 = /greeting(\\d)/dg;\nconst exampleString = 'greeting1greeting2';\nconst result = [...exampleString.matchAll(regexExample2022)];\nconsole.log(result[0]);\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopensrc0%2Fes-features","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopensrc0%2Fes-features","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopensrc0%2Fes-features/lists"}