{"id":28399481,"url":"https://github.com/learning-zone/javascript-es6-basics","last_synced_at":"2026-02-23T16:33:51.924Z","repository":{"id":37411948,"uuid":"471409996","full_name":"learning-zone/javascript-es6-basics","owner":"learning-zone","description":"JavaScript ES6 Basics","archived":false,"fork":false,"pushed_at":"2022-11-30T04:19:16.000Z","size":137,"stargazers_count":85,"open_issues_count":0,"forks_count":37,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-08-24T21:26:17.762Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/learning-zone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-18T14:56:49.000Z","updated_at":"2025-05-13T19:33:26.000Z","dependencies_parsed_at":"2023-01-21T13:16:18.723Z","dependency_job_id":null,"html_url":"https://github.com/learning-zone/javascript-es6-basics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/learning-zone/javascript-es6-basics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fjavascript-es6-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fjavascript-es6-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fjavascript-es6-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fjavascript-es6-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learning-zone","download_url":"https://codeload.github.com/learning-zone/javascript-es6-basics/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fjavascript-es6-basics/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29748214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2025-06-01T08:09:16.263Z","updated_at":"2026-02-23T16:33:51.890Z","avatar_url":"https://github.com/learning-zone.png","language":"JavaScript","readme":"# JavaScript ES6 Basics\n\n\u003e *Click \u0026#9733; if you like the project. Your contributions are heartily ♡ welcome.*\n\n\u003cbr/\u003e\n\n## Related Interview Questions\n\n* [JavaScript Interview Questions](https://github.com/learning-zone/javascript-interview-questions)\n* [JavaScript Design Patterns](https://github.com/learning-zone/JavaScript-Design-Patterns)\n* [JavaScript Coding Practice](https://github.com/learning-zone/JavaScript-Coding-Practice)\n\n\u003cbr/\u003e\n\n## Table of Contents\n\n* [Introduction](#-1-introduction)\n* ES6 New Features\n    * [let](#-21-let)\n    * [let vs var](#-22-let-vs-var)\n    * [const](#-23-const)\n    * [Arrow Function](#-24-arrow-function)\n    * [Default Function Parameters](#-25-default-function-parameters)\n    * [Rest Parameter](#-26-rest-parameter)\n    * [Spread Operator](#-27-spread-operator)\n    * [for…of](#-28-forof)\n    * [Binary and Octal literals](#-29-binary-and-octal-literals)\n    * [Template literals](#-210-template-literals)\n    * [Enhanced Object literals](#-211-Enhanced-object-literals)\n* Destructuring\n    * [Array Destructuring](#-31-array-destructuring)\n    * [Object Destructuring](#-32-object-destructuring)\n* ES6 Modules\n    * [ES6 modules](#-4-es6-modules)\n* ES6 Classes\n    * [Classes](#-51-classes)\n    * [Getters and Setters](#-52-getters-and-setters)\n    * [Class Expression](#-53-class-expression)\n    * [Static methods](#-54-static-methods)\n    * [Static Properties](#-55-static-properties)\n    * [Computed property](#-56-computed-property)\n    * [Inheritance](#-57-inheritance)\n    * [new.target](#-58-newtarget)\n* Symbol\n    * [Symbol](#-6-symbol)\n* Iterators \u0026 Generators\n    * [Iterators](#-71-iterators)\n    * [Generators](#-72-generators)\n    * [yield](#-73-yield)\n* Promises\n    * [Promises](#-81-promises)\n    * [Promise chaining](#-82-promise-chaining)\n    * [Promise.all()](#-83-promiseall)\n    * [Promise.race()](#-84-promiserace)\n    * [Promise Error Handling](#-85-promise-error-handling)\n* ES6 Collections\n    * [Set](#-91-set)\n    * [Weakset](#-92-weakset)\n    * [Map](#-93-map)\n    * [Weakmap](#-94-weakmap)\n* Array Extensions\n    * [Array.of()](#-101-arrayof)\n    * [Array.from()](#-102-arrayfrom)\n    * [Array.find()](#-103-arrayfind)\n    * [Array.findIndex()](#-104-arrayfindindex)\n* Object Extensions\n    * [Object.assign()](#-111-objectassign)\n    * [Object.is()](#-112-objectis)\n* String Extensions\n    * [String.startsWith()](#-121-stringstartswith)\n    * [String.endsWith()](#-122-stringendswith)\n    * [String.includes()](#-123-stringincludes)\n* Proxy \u0026 Reflection\n    * [Proxy](#-131-proxies)\n    * [Reflection](#-132-reflect)\n* Miscellaneous Features\n    * [Unicode](#-141-unicode)\n    * [Proper Tail calls](#-142-proper-tail-calls)\n\n\u003cbr/\u003e\n\n## # 1. Introduction\n\nJavaScript ES6 (also known as ECMAScript 2015 or ECMAScript 6) is the newer version of JavaScript that was introduced in 2015.\n\nECMAScript is the standard that JavaScript programming language uses. ECMAScript provides the specification on how JavaScript programming language should work.\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 2.1. let\n\nES6 provides a new way of declaring a variable by using the `let` keyword. The `let` keyword is similar to the `var` keyword, except that these variables are **blocked-scope**.\n\n**Syntax:**\n\n```js\nlet variable_name;\n```\n\nIn JavaScript, blocks are denoted by curly braces `{}` , for example, the `if else`, `for`, `do while`, `while`, `try catch` and so on.\n\n**Example:**\n\n```js\nlet x = 10;\nif (x === 10) {\n  let x = 20;\n  console.log(x); // 20:  reference x inside the block\n}\nconsole.log(x); // 10: reference at the begining of the script\n\n// Output:\n20\n10\n```\n\nBecause the `let` keyword declares a block-scoped variable, the `x` variable inside the `if` block is a **new variable** and it shadows the `x` variable declared at the top of the script. Therefore, the value of `x` in the console is 20.\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-let-zikqqb?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 2.2. let vs var\n\nThe `var` variables belong to the global scope when you define them outside a function. When you declare a variable inside a function using the `var` keyword, the scope of the variable is local. For example:\n\n```js\nfunction increase() {\n    var counter = 10;\n}\nconsole.log(counter); // cannot access the counter variable here\n\n// Output\n// ReferenceError: counter is not defined\n```\n\nHere, the counter variable is local to the increase() function. It cannot be accessible outside of the function.\n\nThe following example displays four numbers from 0 to 4 inside the loop and the number 5 outside the loop.\n\n```js\nfor (var i = 0; i \u003c 3; i++) {\n  console.log(\"Inside the loop:\", i);\n}\n\nconsole.log(\"Outside the loop:\", i);\n\n// Output:\nInside the loop: 0 \nInside the loop: 1 \nInside the loop: 2 \nOutside the loop: 3\n```\n\nHere, the i variable is a global variable. Therefore, it can be accessed from both inside and after the for loop.\n\nThe following example uses the `let` keyword instead of the `var` keyword:\n\n```js\nfor (let i = 0; i \u003c 3; i++) {\n  console.log(\"Inside the loop:\", i);\n}\n\nconsole.log(\"Outside the loop:\", i);\n\n// Output\nInside the loop: 0\nInside the loop: 1\nInside the loop: 2\n\nUncaught ReferenceError: i is not defined\n```\n\nHere, the variable **i** is blocked scope. It means that the variable **i** only exists and can be accessible inside the for loop block.\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-let-vs-var-yvu11z)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 2.3. const\n\nES6 provides a new way of declaring a constant by using the `const` keyword. The `const` keyword creates a **read-only** reference to a value.\n\n```js\nconst CONSTANT_NAME = value;\n```\n\nLike the `let` keyword, the `const` keyword declares **blocked-scope** variables. However, the **block-scoped** variables declared by the `const` keyword can\\'t be **reassigned**.\n\n```js\nconst RATE = 0.1;\nRATE = 0.2; // TypeError\n```\n\nThe const keyword ensures that the variable it creates is read-only. However, it doesn’t mean that the actual value to which the const variable reference is immutable. For example:\n\n```js\nconst person = { age: 20 };\nconsole.log(person.age); // 20\n\nperson.age = 30; // OK\nconsole.log(person.age); // 30\n```\n\nEven though the person variable is a constant, you can change the value of its property.\n\nHowever, you cannot reassign a different value to the person constant like this:\n\n```js\nperson = { age: 40 }; // TypeError\n```\n\nIf you want the value of the person object to be immutable, you have to freeze it by using the Object.freeze() method:\n\n```js\nconst person = Object.freeze({age: 20});\nperson.age = 30; // TypeError\n```\n\n*Note: `Object.freeze()` is shallow, meaning that it can freeze the properties of the object, not the objects referenced by the properties.*\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-const-prej6w)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 2.4. Arrow Function\n\nThe Arrow function provides a more concise syntax for writing function expressions by opting out the function and return keywords using fat arrow(`=\u003e`) notation.\n\n**Syntax:**\n\n```js\nlet myFunction = (arg1, arg2, ...argN) =\u003e expression\n```\n\n```js\n// Function Expression \nlet add = function (x, y) {\n  return x + y;\n};\nconsole.log(add(10, 20)); // 30\n```\n\nThe above function can be written as\n\n```js\n// Arrow functions\nlet add = (x, y) =\u003e x + y;\nconsole.log(add(10, 20)); // 30\n```\n\n**Example 01:** Arrow Function with No Argument\n\nIf a function doesn\\'t take any argument, then you should use empty parentheses.\n\n```js\nlet greet = () =\u003e console.log('Hello');\ngreet(); // Hello\n```\n\n**Example 02:** Arrow Function with One Argument\n\nIf a function has only one argument, you can omit the parentheses.\n\n```js\nlet greet = x =\u003e console.log(x);\ngreet('Hello'); // Hello \n```\n\n**Example 03:** Arrow Function as an Expression\n\nYou can also dynamically create a function and use it as an expression.\n\n```js\nlet age = 25;\n\nlet welcome = (age \u003c 18) ?\n  () =\u003e console.log('Baby') :\n  () =\u003e console.log('Adult');\n\nwelcome(); // Adult\n```\n\n**Example 04:** Multiline Arrow Functions\n\nIf a function body has multiple statements, you need to put them inside curly brackets `{}`.\n\n```js\nlet area = (r) =\u003e {\n  const pi = 3.14;\n  return pi * r * r;\n}\n\nlet result = area(10);\nconsole.log(result); // 314\n```\n\n*Note: Unlike regular functions, arrow functions do not have their own `this`. The value of `this` inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of `this` in the closest non-arrow parent function.*\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-arrow-function-yl7oqo?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 2.5. Default Function Parameters\n\nDefault parameters allow named parameters of a function to be initialized with default values if no value or undefined is passed.\n\n**Syntax:**\n\n```js\nfunction fn(param1=default1, param2=default2,..) {\n  // ...\n}\n```\n\nPrior to ES6, you need check for undefined values and provide the default value for undefined values using if/else or ternary operator\n\n```js\nfunction sum(a, b) {\n  a = (typeof a !== 'undefined') ? a : 10;\n  b = (typeof b !== 'undefined') ? b : 20;\n  return a + b;\n}\n\nconsole.log(sum()); // 30\nconsole.log(sum(20)); // 40\n```\n\nIn ES6, these checks can be avoided using default parameters\n\n```js\nfunction sum(a = 10, b = 20) {\n  return a + b;\n}\n\nconsole.log(sum()); // 30\nconsole.log(sum(20)); // 40\nconsole.log(sum(20, 30)); // 50\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-default-parameters-8uu0m8?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 2.6. Rest Parameter\n\nThe rest parameter is used to represent an indefinite number of arguments as an array. The important point here is only the function\\'s last parameter can be a \"rest parameter\".\n\nThis feature has been introduced to reduce the boilerplate code that was induced by the arguments.\n\n**Example:**\n\n```js\nfunction sum(...args) {\n  return args.reduce((previous, current) =\u003e {\n    return previous + current;\n  });\n}\n\nconsole.log(sum(10)); // 10\nconsole.log(sum(10, 20)); // 30\nconsole.log(sum(10, 20, 30)); // 60\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-rest-parameters-w8zy28?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 2.7. Spread Operator\n\nThe spread operator allows you to spread out elements of an iterable object such as an **array**, **map**, or **set**.\n\n**Example:**\n\n```js\nconst odd = [1, 3, 5];\nconst combined = [2, 4, 6, ...odd];\n\nconsole.log(combined); // [ 2, 4, 6, 1, 3, 5 ]\n```\n\nJavaScript spread operator and array manipulation\n\n**1. Constructing array literal:**\n\nThe spread operator allows to insert another array into the initialized array when you construct an array using the literal form.\n\n```js\nlet initialChars = ['A', 'B'];\nlet chars = [...initialChars, 'C', 'D'];\n\nconsole.log(chars); // [\"A\", \"B\", \"C\", \"D\"]\n```\n\n**2. Concatenating arrays:**\n\n```js\nlet numbers = [10, 20];\nlet moreNumbers = [30, 40];\nlet allNumbers = [...numbers, ...moreNumbers];\n\nconsole.log(allNumbers); // [10, 20, 30, 40]\n```\n\n**3. Copying an array:**\n\n```js\nlet scores = [80, 70, 90];\nlet copiedScores = [...scores];\n\nconsole.log(copiedScores); // [80, 70, 90]\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-spread-operator-0jh98u)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 2.8. For..of\n\nThe `for...of` statement creates a loop iterating over **iterable objects**, including: built-in `String`, `Array`, array-like objects (e.g., `arguments` or `NodeList`), `TypedArray`, `Map`, `Set`, and user-defined iterables.\n\nIt invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.\n\n**Syntax:**\n\n```js\nfor (variable of iterable) {\n   // ...\n}\n```\n\n**Example 01:** Iterating over an Array\n\n```js\nconst iterable = [10, 20, 30];\n\nfor (const value of iterable) {\n  console.log(value);\n}\n\n// Output\n10\n20\n30\n```\n\n**Example 02:** Iterating over a String\n\n```js\nconst iterable = 'Hello';\n\nfor (const value of iterable) {\n  console.log(value);\n}\n\n// Output\n\"H\"\n\"e\"\n\"l\"\n\"l\"\n\"o\"\n```\n\n**Example 03:** Iterating over a Map\n\n```js\nconst iterable = new Map([['A', 10], ['B', 20], ['C', 30]]);\n\nfor (const [key, value] of iterable) {\n  console.log(key + \" -\u003e \" + value);\n}\n\n// Output\nA -\u003e 10\nB -\u003e 20\nC -\u003e 30\n```\n\n**Example 04:** Iterating over a Set\n\n```js\nconst iterable = new Set([10, 10, 20, 20, 30, 30]);\n\nfor (const value of iterable) {\n  console.log(value);\n}\n\n// Output\n10\n20\n30\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-for-of-ltt89x?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 2.9. Binary and Octal literals\n\nES5 provided numeric literals in octal (prefix 0), decimal (no prefix), and hexadecimal ( 0x) representation. ES6 added support for binary literals and improvements on octal literals.\n\n**1. Binary literals:**\n\nPrior to ES5, JavaScript didn\\'t provide any literal form of binary numbers. So you need to use a binary string with the help of `parseInt()`\n\n```js\nconst num = parseInt('111', 2);\nconsole.log(num); // 7\n```\n\nWhereas ES6 added support for binary literals using the **0b** prefix followed by a sequence of binary numbers (i.e, 0 and 1).\n\n```js\nconst num = 0b111;\nconsole.log(num); // 7\n```\n\n**2. Octal literals:**\n\nIn ES5, to represent an octal literal, you use the zero prefix (0) followed by a sequence of octal digits (from 0 to 7).\n\n```js\nconst num = 055;\nconsole.log(num); // 45\n\n// Note: Legacy octal literals are not allowed in strict mode\n```\n\nES6 represents the octal literal by using the prefix **0o** followed by a sequence of octal digits from 0 through 7.\n\n```js\nlet num = 0o10;\nconsole.log(num); // 8\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-binary-literals-mllutq?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 2.10. Template literals\n\nTemplate literals allows you to work with strings in a new way compared to ES5. These are just string literals allowing embedded expressions denoted by the dollar sign and curly braces **${expression}**. These literals are enclosed by the backtick character instead of double or single quotes.\n\n**Example:**\n\n```js\nlet str = \"World\";\nlet message = `Hello ${str}`;\n\nconsole.log(message); // Hello World\n```\n\n**Multiline Strings:**\n\n```js\nlet msg = 'Multiline \\n\\\nstring';\n\nconsole.log(msg);\n\n// Multiline\n// string\n```\n\n**Tagged Templates:**\n\nA template tag carries the transformation on the template literal and returns the result string.\n\nIt can be used in creating components in `CSS-In-JS` styled components to use across the application\n\n```js\nfunction tag(strings) {\n  console.log(strings.raw[0]); \n}\n\ntag`Hello World`;\n\n// Output\nHello World\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-template-literals-d005t4?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 2.11. Enhanced Object literals\n\nThe object literal is one of the most popular patterns for creating objects in JavaScript. Object literals are extended to support setting the prototype at construction, defining methods, making super calls, and computing property names with expressions\n\nThe important enhancements of object literals are,\n\n**Property Shorthand:**\n\nObject\\'s properties are often created from variables with the same name.\n\nLet\\'s see the ES5 representation\n\n```js\nvar a = 1, b = 2, c = 3;\nvar obj = {\n    a: a,\n    b: b,\n    c: c\n  };\nconsole.log(obj);\n\n// Output\n{a: 1, b: 2, c: 3}\n```\n\nand it can be represented in a shorter syntax as below,\n\n```js\nlet a = 1, b = 2, c = 3;\nlet obj = {\n    a,\n    b,\n    c\n  };\nconsole.log(obj);\n\n// Output\n{a: 1, b: 2, c: 3}\n```\n\n**Method Shorthand:**\n\nPrior to ES6, when defining a method for an object literal, you need to specify the name and full function definition\n\n```js\nlet server = {\n  name: \"Server\",\n  restart: function () {\n    console.log(\"The\" + this.name + \" is restarting...\");\n  }\n};\nserver.restart();\n\n// Output\nThe Server is restarting... \n```\n\nThis can be avoided in ES6,\n\n```js\nlet server = {\n  name: \"Server\",\n  restart() {\n    console.log(\"The \" + this.name + \" is restarting...\");\n  }\n};\nserver.restart();\n\n// Output\nThe Server is restarting... \n```\n\n**Computed Property Names:**\n\nIn ES5, it wasn\\'t possible to use a variable for a key name during object creation stage.\n\n```js\nvar key = \"three\",\n  obj = {\n    one: 10,\n    two: 20\n  };\nobj[key] = 30;\n```\n\nObject keys can be dynamically assigned in ES6 by placing an expression in square brackets([])\n\n```js\nconst key = \"three\",\n  computedObj = {\n    one: 10,\n    two: 20,\n    [key]: 30\n  };\nconsole.log(computedObj.one);\n\n// Output\n10\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-object-literals-byphgz?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 3.1 Array Destructuring\n\nES6 provides a new feature called destructing assignment that allows you to destructure properties of an object or elements of an array into individual variables.\n\n**Basic variable assignment:**\n\n```js\nconst keys = [\"one\", \"two\", \"three\"];\nconst [red, yellow, green] = keys;\n\nconsole.log(red); // one\nconsole.log(yellow); // two\nconsole.log(green); // three\n```\n\n**Assignment separate from declaration:**\n\n```js\nconst [a, b] = [10, 20];\n\nconsole.log(a); // 10\nconsole.log(b); // 20\n```\n\n**Array destructuring and Default values:**\n\n```js\nconst [x = 10, y = 20] = [30];\n\nconsole.log(x); // 30\nconsole.log(y); // 20\n```\n\n**Swapping variables:**\n\n```js\nlet a = 10, \n    b = 20;\n\n[a, b] = [b, a];\n\nconsole.log(a); // 20\nconsole.log(b); // 10\n```\n\n**Assigning the rest of an array to a variable:**\n\n```js\nconst [a, ...b] = [1, 2, 3];\n\nconsole.log(a); // 1\nconsole.log(b); // [2, 3]\n```\n\n**Functions that return multiple values:**\n\n```js\nfunction calculate(a, b) {\n  return [a + b, a - b, a * b];\n}\n\nlet [sum, difference, multiplication] = calculate(20, 10);\n\nconsole.log(sum, difference, multiplication); // 30, 10, 200\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-array-destructuring-0k5c35?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 3.2. Object Destructuring\n\nES6 introduces the object destructuring syntax that provides an alternative way to assign properties of an object to variables.\n\n**Syntax:**\n\n```js\nlet { property1: variable1, property2: variable2 } = object;\n```\n\n**Simple assignment:**\n\n```js\nconst num = { x: 10, y: 20 };\nconst { x, y } = num;\n\nconsole.log(x); // 10\nconsole.log(y); // 20\n```\n\n**Basic Object destructuring assignment:**\n\n```js\nconst employee = {\n  eId: \"12345\",\n  name: \"Dushyant Meena\",\n  email: \"dushyant.meena@email.com\"\n};\nconst { eId, name, email } = employee;\n\nconsole.log(eId); // 12345\nconsole.log(name); // Dushyant Meena\nconsole.log(email); // dushyant.meena@email.com\n```\n\n**Object destructuring and default values:**\n\n```js\nconst { q = 10, w = 20 } = { e: 30 };\n\nconsole.log(q); // 10\nconsole.log(w); // 20\n```\n\n**Assigning new variable names:**\n\n```js\nconst number = { x: 10, y: 20 };\nconst { x: val1, y: val2 } = number;\n\nconsole.log(val1); // 10\nconsole.log(val2); // 20\n```\n\n**Assignment without declaration:**\n\n```js\nlet firstName, lastName;\n({ firstName, lastName } = { firstName: \"Gauri\", lastName: \"Pratima\" });\n\nconsole.log(firstName); // Gauri\nconsole.log(lastName); // Pratima\n```\n\n**Object destructuring and rest operator:**\n\n```js\nlet { a, b, ...args } = { a: 10, b: 20, c: 30, d: 40, e: 50 };\n\nconsole.log(a);\nconsole.log(b);\nconsole.log(args);\n\n// Output\n10\n20\n{ c: 30, d: 40, e: 50 }\n```\n\n**Assigning new variable names and providing default values simultaneously:**\n\n```js\nconst { a: num1 = 10, b: num2 = 20 } = { a: 30 };\n\nconsole.log(num1); // 30\nconsole.log(num2); // 20\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-object-destructuring-ecncqm?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 4. ES6 modules\n\nAn ES6 module is a JavaScript file that executes in strict mode only. It means that any variables or functions declared in the module won\\'t be added automatically to the global scope.\n\nES6 has provided the built-in support for modules. Everything inside a module is private by default. Public variables, functions and classes are exposed using `export` statement and import the same using `import` statement.\n\n**Export Statement:**\n\nThere are two types of exports:\n\n**1. Named Exports:**\n\nYou can export each element or a single export statement to export all the elements at once\n\n```js\n// module \"my-module.js\"\nconst PI = Math.PI;\n\nfunction add(...args) {\n  return args.reduce((num, tot) =\u003e tot + num);\n}\n\nfunction multiply(...args) {\n  return args.reduce((num, tot) =\u003e tot * num);\n}\n\n// private function\nfunction print(msg) {\n  console.log(msg);\n}\n\nexport { PI, add, multiply };\n```\n\n**2. Default Exports:**\n\nIf we want to export a single value, you could use a default export\n\n```js\n// module \"my-module.js\"\nexport default function add(...args) {\n  return args.reduce((num, tot) =\u003e tot + num);\n}\n```\n\n**Import Statement:**\n\nThe static import statement is used to import read only live bindings which are exported by another module.\n\nThere are many variations of import scenarios as below,\n\n```js\n// 1. Import an entire module's contents\nimport * as name from \"my-module\";\n\n//2.Import a single export from a module\nimport { export1 } from \"my-module\";\n\n//3.Import multiple exports from a module\nimport { export1 , export2 } from \"my-module\";\n\n//4.Import default export from a module\nimport defaultExport from \"my-module\";\n\n//5.Import an export with an alias\nimport { export1 as alias1 } from \"my-module\";\n```\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 5.1. Classes\n\nES6 Classes formalize the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes. It support prototype-based inheritance, constructors, super calls, instance and static methods.\n\n**Example:**\n\n```js\n/**\n * ES6 Class\n */\nclass Person {\n  constructor(name) {\n    this.name = name;\n  }\n  getName() {\n    return this.name;\n  }\n}\n\nlet person = new Person(\"Prasad Shashi\");\nconsole.log(person.getName()); // \"Prasad Shashi\"\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-class-70hkd7)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 5.2. Getters and Setters\n\nThe accessor properties are methods that get or set the value of an object. For that, we use these two keywords:\n\n* `get` - to define a getter method to get the property value\n* `set` - to define a setter method to set the property value\n\n**Example:**\n\n```js\n/**\n * Getters and Setters\n */\nclass Person {\n  constructor(name) {\n    this.name = name;\n  }\n  get name() {\n    return this._name;\n  }\n  set name(name) {\n    this._name = name;\n  }\n}\n\nlet person = new Person(\"Mala Amar\");\nconsole.log(person.name); // \"Mala Amar\"\n```\n\n*Note: These setter and getter allow you to use the properties directly ( without using the parenthesis )*\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-getters-and-setters-ugb9jx?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 5.3. Class expressions\n\nA class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class\\'s body. However, it can be accessed via the name property.\n\n**Example:**\n\n```js\n/**\n * Unnamed Class\n */\nlet Person = class {\n  constructor(name) {\n    this.name = name;\n  }\n  getName() {\n    return this.name;\n  }\n};\n\nlet person = new Person(\"Anjali Durga\");\nconsole.log(person.getName()); // \"Anjali Durga\"\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-class-expressions-ofbg0i)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 5.4. Static methods\n\nThe static keyword defines a static method or property for a class, or a class static initialization block. Neither static methods nor static properties can be called on instances of the class. Instead, they\\'re called on the class itself.\n\nStatic methods are often utility functions, such as functions to create or clone objects, whereas static properties are useful for caches, fixed-configuration, or any other data you don't need to be replicated across instances.\n\n**Example:**\n\n```js\n/**\n * Static methods\n */\nclass Person {\n  constructor(name) {\n    this.name = name;\n  }\n\n  static staticMethod(gender) {\n    let name = gender === \"male\" ? \"Aryan Sarin\" : \"Manju Soni\";\n    return new Person(name);\n  }\n}\n\nlet anonymous = Person.staticMethod(\"male\");\nconsole.log(anonymous); // Person {name: \"Aryan Sarin\"}\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-static-methods-3tf3li?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 5.5. Static Properties\n\nLike a static method, a static property is shared by all instances of a class. To define static property, you use the static keyword followed by the property name like this:\n\n**Example:**\n\n```js\n/**\n * Static Properties\n */\nclass Item {\n  constructor(name, quantity) {\n    this.name = name;\n    this.quantity = quantity;\n    this.constructor.count++;\n  }\n  // Static Properties\n  static count = 0;\n\n  // Static Method\n  static getCount() {\n    return Item.count++;\n  }\n}\n\nlet pen = new Item(\"Pen\", 5);\nlet notebook = new Item(\"notebook\", 10);\n\nconsole.log(Item.getCount()); // 2\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-static-properties-xc03d4)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 5.6. Computed Property\n\nES6 \"Computed Property\" feature allows you to have an expression in brackets `[]` (a piece of code that results in a single value like a variable or function invocation) be computed as a property name on an object.\n\n**Example:**\n\n```js\n/**\n * Computed Property\n */\nlet propName = \"fullName\";\n\nclass Person {\n  constructor(firstName, lastName) {\n    this.firstName = firstName;\n    this.lastName = lastName;\n  }\n  get [propName]() {\n    return `${this.firstName} ${this.lastName}`;\n  }\n}\n\nlet person = new Person(\"Sharma\", \"Peri\");\nconsole.log(person.fullName);\n\n// Output\nSharma Peri\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-computed-property-ns52qr?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 5.7. Inheritance\n\nTo create a class inheritance, use the `extends` keyword. A class created with a class inheritance inherits all the methods from another class. The `super()` method in the constructor is used to access all parent\\'s properties and methods that are used by the derived class.\n\n**Example:**\n\n```js\n/**\n * Inheritance\n */\n\n// Parent Class\nclass Vehicle {\n  constructor(name, type) {\n    this.name = name;\n    this.type = type;\n  }\n\n  getName() {\n    return this.name;\n  }\n\n  getType() {\n    return this.type;\n  }\n}\n// Child Class\nclass Car extends Vehicle {\n  constructor(name) {\n    super(name, \"car\");\n  }\n\n  getName() {\n    return \"It is a car: \" + super.getName();\n  }\n}\nlet car = new Car(\"Tesla\");\n\nconsole.log(car.getName()); // It is a car: Tesla\nconsole.log(car.getType()); // car\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-inheritance-vposow)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 5.8. new.target\n\nThe `new.target` pseudo-property lets you detect whether a function or constructor was called using the **new** operator. In constructors and functions invoked using the new operator, `new.target` returns a reference to the constructor or function. In normal function calls, `new.target` is undefined.\n\n**Example:**\n\n```js\n/**\n * new.target\n */\nclass Person {\n  constructor(name) {\n    this.name = name;\n    console.log(new.target.name);\n  }\n}\n\nclass Employee extends Person {\n  constructor(name, title) {\n    super(name);\n    this.title = title;\n  }\n}\n\nlet person = new Person(\"Tara Mishra\"); // Person\nlet employee = new Employee(\"Aditya Kala\", \"Programmer\"); // Employee\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-new-target-dzurzb?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 6. Symbol\n\nThe JavaScript ES6 introduced a new primitive data type called Symbol. Symbols are immutable (cannot be changed) and are unique.\nSymbols are often used to add unique property keys to an object that won\\'t collide with keys any other code might add to the object\n\n**Creating Symbols:**\n\n**Example 01:**\n\n```js\n// Two symbols with the same description\n\nconst sym1 = Symbol(\"Hi\");\nconst sym2 = Symbol(\"Hi\");\n\nconsole.log(sym1 === sym2); // false\n```\n\n**Sharing Symbols:**\n\nES6 provides you with the global symbol registry that allows you to share symbols globally. If you want to create a symbol that will be shared, you use the `Symbol.for()` method instead of calling the `Symbol()` function.\n\nThe `Symbol.for()` method accepts a single parameter that can be used for symbol\\'s description\n\n**Example 02:**\n\n```js\nlet ssn = Symbol.for(\"ssn\");\nlet citizenID = Symbol.for(\"ssn\");\nconsole.log(ssn === citizenID); // true\nconsole.log(Symbol.keyFor(ssn)); // ssn\n```\n\nThe `Symbol.for()` method first searches for the symbol with the  ssn key in the global symbol registry. It returns the existing symbol if there is one. Otherwise, the `Symbol.for()` method creates a new symbol, registers it to the global symbol registry with the specified key, and returns the symbol.\n\n**Add Symbol as an Object Key:**\n\nYou can add symbols as a key in an object using square brackets `[]`.\n\n**Example 03:**\n\n```js\nlet id = Symbol(\"id\");\nlet person = {\n    name: \"Anjali Mistry\",\n    // adding symbol as a key\n    [id]: 10 // not \"id\": 10\n};\nconsole.log(person); // {name: 'Anjali Mistry', Symbol(id): 10}\n```\n\n**Symbol Methods:**\n\n|Method     |Description\n|-----------|------------------------|\n|for()      |Searches for existing symbols|\n|keyFor()   |Returns a shared symbol key from the global symbol registry.|\n|toSource() |Returns a string containing the source of the Symbol object|\n|toString() |Returns a string containing the description of the Symbol|\n|valueOf()  |Returns the primitive value of the Symbol object.|\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-symbol-xweo3x?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 7.1. Iterators\n\nIterator is an object which allows us to access a collection of objects one at a time. ES6 provides built-in iterators for the collection types `String`, `Array`, `Set`, and `Map`.\n\nIn JavaScript an iterator is an object which defines a sequence and potentially a return value upon its termination.Specifically, an iterator is any object which implements the Iterator protocol by having a `next()` method that returns an object with two properties:\n\n* `value`: The next value in the iteration sequence.\n* `done`: This is true if the last value in the sequence has already been consumed. If value is present alongside done, it is the iterator's return value.\n\n**Example:**\n\nThe following code creates a Sequence object that returns a list of numbers in the range of ( start, end) with an interval between subsequent numbers.\n\n```js\n/**\n * Iterators\n */\nclass Sequence {\n  constructor(start = 0, end = Infinity, interval = 1) {\n    this.start = start;\n    this.end = end;\n    this.interval = interval;\n  }\n  [Symbol.iterator]() {\n    let counter = 0;\n    let nextIndex = this.start;\n    return {\n      next: () =\u003e {\n        if (nextIndex \u003c= this.end) {\n          let result = { value: nextIndex, done: false };\n          nextIndex += this.interval;\n          counter++;\n          return result;\n        }\n        return { value: counter, done: true };\n      }\n    };\n  }\n}\n```\n\nThe following code uses the Sequence iterator in a `for...of` loop:\n\n```js\nlet evenNumbers = new Sequence(2, 10, 2);\nfor (const num of evenNumbers) {\n  console.log(num);\n}\n\n// Output\n2\n4\n6\n8\n10\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-iterators-jx1led?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 7.2. Generators\n\nA generator is a function that can stop or suspend midway and then continue from where it stopped while maintaining the context(saved across re-entrances). It can be defined using a function keyword followed by an asterisk (`function* ()`).\n\nThis function returns an iterator object and this iterator\\'s **next()** method returns an object with a value property containing the yielded value and a done property which indicates whether the generator has yielded its last value.\n\n```js\n/**\n * Generators\n */\nfunction* myGenerator(i) {\n  yield i + 10;\n  return i + 20;\n}\nconst myGenObj = myGenerator(10);\n\nconsole.log(myGenObj.next().value); // 20\nconsole.log(myGenObj.next().value); // 30\nconsole.log(myGenObj.next().value); // undefined\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/compassionate-lederberg-dxi5kw?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 7.3. Yield\n\nThe `yield` keyword allows you to pause and resume a generator function (`function*`).\n\nThe `yield` keyword causes the call to the generator\\'s `next()` method to return an `IteratorResult` object with two properties: `value` and `done`. The `value` property is the result of evaluating the `yield` expression, and `done` is `false`, indicating that the generator function has not fully completed.\n\n```js\n/**\n * Yield\n */\nfunction* counter() {\n  yield 1;\n  yield 2;\n  yield 3;\n}\nlet count = counter();\n\nconsole.log(count.next()); // {value: 1, done: false}\nconsole.log(count.next()); // {value: 1, done: false}\nconsole.log(count.next()); // {value: 1, done: false}\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-yield-zo5i9j?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 8.1. Promises\n\nA promise is an object which represent the eventual completion or failure of an **asynchronous** operation.\n\nIt is in one of these states:\n\n* **pending:**  Represents initial state, neither fulfilled nor rejected.\n* **fulfilled:** Indicates that the operation is completed successfully.\n* **rejected:** Indicates that the operation is failed.\n\nIn the beginning, the state of a promise is pending, indicating that the asynchronous operation is in progress. Depending on the result of the asynchronous operation, the state changes to either fulfilled or rejected.\n\nThe fulfilled state indicates that the asynchronous operation was completed successfully:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/JavaScript-Promise-Fulfilled.svg\" alt=\"Promise fulfilled\" width=\"400px\" /\u003e\n\u003c/p\u003e\n\nThe rejected state indicates that the asynchronous operation failed.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/JavaScript-Promise-Rejected.svg\" alt=\"Promise rejected\" width=\"400px\" /\u003e\n\u003c/p\u003e\n\n**Creating a Promise:**\n\nThe promise constructor accepts a callback function that typically performs an asynchronous operation. This function is often referred to as an executor.\n\nIn turn, the executor accepts two callback functions with the name `resolve` and `reject`.\n\n```js\n/**\n * Promise\n */\nconst promise = new Promise((resolve, reject) =\u003e {\n  // contain an operation\n  // ...\n\n  // return the state\n  if (success) {\n    resolve(value);\n  } else {\n    reject(error);\n  }\n});\n```\n\nIf the asynchronous operation completes successfully, the executor will call the `resolve()` function to change the state of the promise from pending to fulfilled with a value.\n\nIn case of an error, the executor will call `reject()` function to change the state of the promise from pending to rejected with the error reason.\n\n**1. The then() method:**\n\nThe `then()` method accepts two callback functions: `onFulfilled` and `onRejected`.\n\nThe `then()` method calls the `onFulfilled()` with a value, if the promise is fulfilled or the `onRejected()` with an error if the promise is rejected.\n\n```js\npromise.then(onFulfilled,onRejected);\n```\n\n**2. The catch() method:**\n\nIf you want to get the error only when the state of the promise is rejected, you can use the `catch()` method of the Promise object. Internally, the `catch()` method invokes the `.then(undefined, onRejected)` method.\n\n```js\npromise.catch(onRejected);\n```\n\n**3. The finally() method:**\n\nThe `.finally()` method returns a Promise. When the promise is finally either fulfilled or rejected, the specified callback function is executed. This provides a way for code to be run whether the promise was fulfilled successfully, or instead rejected.\n\nThis helps to avoid duplicating code in both the promise's `.then()` and `.catch()` handlers.\n\n```js\nconst render = () =\u003e {\n  //...\n};\n\ngetUsers()\n  .then((users) =\u003e {\n    console.log(users);\n    render(); // Duplicate Method\n  })\n  .catch((error) =\u003e {\n    console.log(error);\n    render(); // Duplicate Method\n  });\n```\n\nThis can be avoided by using `.finally()`\n\n```js\nconst render = () =\u003e {\n  //...\n};\n\ngetUsers()\n  .then((users) =\u003e {\n    console.log(users);\n  })\n  .catch((error) =\u003e {\n    console.log(error);\n  })\n  .finally(() =\u003e {\n    render();\n  });\n```\n\n**Example:**\n\n```js\nlet promise = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e {\n    console.log(\"Promise started...\");\n    resolve(\"Promise resolved\");\n  }, 300);\n})\n  .then((value) =\u003e {\n    console.log(\"OK: \" + value);\n  })\n  .catch((value) =\u003e {\n    console.log(\"ERROR: \" + value);\n  })\n  .finally(() =\u003e {\n    console.log(\"Final Block\");\n  });\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-promise-pqn0xf?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 8.2. Promise Chaining\n\nA common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the previous operation succeeds, with the result from the previous step. We accomplish this by creating a **promise chain**.\n\n**Example:**\n\n```js\n/**\n * Promise Chaining\n */\nnew Promise(function(resolve, reject) {\n\n  setTimeout(() =\u003e resolve(1), 1000); // (*)\n\n}).then(function(result) { // (**)\n\n  alert(result); // 1\n  return result * 2;\n\n}).then(function(result) { // (***)\n\n  alert(result); // 2\n  return result * 2;\n\n}).then(function(result) {\n\n  alert(result); // 4\n  return result * 2;\n\n});\n```\n\nThe idea is that the result is passed through the chain of .then handlers.\n\nHere the flow is:\n\n1. The initial promise resolves in 1 second (*),\n1. Then the .then handler is called (**), which in turn creates a new promise (resolved with 2 value).\n1. The next then (***) gets the result of the previous one, processes it (doubles) and passes it to the next handler.\n1. …and so on.\n\nAs the result is passed along the chain of handlers, we can see a sequence of alert calls: `1 → 2 → 4`.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/promise-then-chain.svg\" alt=\"Promise Chaining\" width=\"200px\" /\u003e\n\u003c/p\u003e\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-promise-chaining-zmxbb5?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 8.3. Promise.all()\n\nThe `Promise.all()` method takes an iterable of promises as an input, and returns a single Promise that resolves to an array of the results of the input promises. This returned promise will resolve when all of the input\\'s promises have resolved, or if the input iterable contains no promises.\n\nIt rejects immediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error.\n\n**Syntax:**\n\n```js\nPromise.all(iterable);\n```\n\n**Example:**\n\n```js\n/**\n * Promise.all()\n */\nconst p1 = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e {\n    console.log(\"The first promise has resolved\");\n    resolve(10);\n  }, 1 * 1000);\n});\n\nconst p2 = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e {\n    console.log(\"The second promise has resolved\");\n    resolve(20);\n  }, 2 * 1000);\n});\n\nconst p3 = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e {\n    console.log(\"The third promise has resolved\");\n    resolve(30);\n  }, 3 * 1000);\n});\n\nPromise.all([p1, p2, p3]).then((results) =\u003e {\n  const total = results.reduce((p, c) =\u003e p + c);\n\n  console.log(`Results: ${results}`);\n  console.log(`Total: ${total}`);\n});\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-promise-all-e34qsj?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 8.4. Promise.race()\n\nThe `Promise.race()` static method accepts a list of promises as an iterable object and returns a new promise that fulfills or rejects as soon as there is one promise that fulfills or rejects, with the value or reason from that promise.\n\n**Syntax:**\n\n```js\nPromise.race(iterable)\n```\n\n**Example:**\n\n```js\n/**\n * Promise.race()\n */\nconst p1 = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e {\n    console.log(\"The first promise has resolved\");\n    resolve(10);\n  }, 1 * 1000);\n});\n\nconst p2 = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e {\n    console.log(\"The second promise has resolved\");\n    resolve(20);\n  }, 2 * 1000);\n});\n\nPromise.race([p1, p2])\n  .then((value) =\u003e console.log(`Resolved: ${value}`))\n  .catch((reason) =\u003e console.log(`Rejected: ${reason}`));\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-promise-all-e34qsj?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 8.5. Promise Error Handling\n\nThe `.catch()` method returns a Promise and deals with rejected cases only. It internally calls `obj.then(undefined, onRejected))`.\n\nInside the promise, the `.catch()` method will catch the error caused by the `throw` statement and `reject()`. If an error occurs and you don\\'t have the `.catch()` method, the JavaScript engine issues a runtime error and stops the program.\n\n**Example:**\n\n```js\nconst promise = new Promise((resolve, reject) =\u003e {\n  throw \"An Error Occured!\";\n}).catch((error) =\u003e {\n  console.error(error);\n});\n\n// Output: \nAn Error Occured!\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-promise-error-handling-leq6gc?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 9.1. Set\n\nES6 provides a new type named `Set` that stores a collection of **unique** values of any type.\n\nThe `Set` constructor also accepts an optional **iterable object**. If you pass an iterable object to the `Set` constructor, all the elements of the iterable object will be added to the new set:\n\n**Syntax:**\n\n```js\nlet setObject = new Set(iterableObject);\n```\n\n**Set Methods:**\n\nThe Set object provides the following useful methods:\n\n|Sl.No.|  Methods    |Description                              |\n|------|-------------|-----------------------------------------|\n| 01. |add(value)    |appends a new element with a specified value to the set. It returns the Set object, therefore, you can chain this method with another Set method.|\n| 02. |clear()       |removes all elements from the Set object.|\n| 03. |delete(value) | deletes an element specified by the value.|\n| 04. |entries()     | returns a new Iterator that contains an array of  [value, value] .|\n| 05. |forEach(callback [, thisArg]) | invokes a callback on each element of the Set with the this value sets to thisArg in each call.|\n| 06. |has(value)   | returns true if an element with a given value is in the set, or false if it is not.|\n| 07. |keys()       | is the same as values() function.|\n| 08. |[@@iterator] | returns a new Iterator object that contains values of all elements stored in the insertion order.|\n\n**Example 01:** Create a new Set from an Array\n\n```js\nlet numbers = new Set([10, 20, 20, 30, 40, 50]);\n\nconsole.log(numbers); // Set(5) {10, 20, 30, 40, 50}\nconsole.log(typeof numbers); // Object\n```\n\n**Example 02:** Get the size of a Set\n\n```js\nlet size = numbers.size;\n\nconsole.log(size); // 5\n```\n\n**Example 03:** Add elements to a Set\n\n```js\nnumbers.add(60);\n\nconsole.log(numbers); // Set(6) {10, 20, 30, 40, 50, 60}\n```\n\n**Example 04:** Check if a value is in the Set\n\n```js\nlet isTrue = numbers.has(10);\n\nconsole.log(isTrue); // true\n```\n\n**Example 05:** Remove elements from a set\n\n```js\nnumbers.delete(60);\n\nconsole.log(numbers); // Set(5) {10, 20, 30, 40, 50}\n```\n\n**Example 06:** Looping the elements of a Set\n\n```js\nfor (let number of numbers) {\n  console.log(number);\n}\n\n// Output\n10\n20\n30\n40\n50\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-set-dho0q8?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 9.2. Weakset\n\nThe `WeakSet` store a collection of objects. It adapts the same properties of that of a `set` i.e. does not store duplicates. However, `WeakSet` can only contain **objects** whereas a `Set` can contain any data types such as strings, numbers, objects, etc. Since objects in a `WeakSet` may be automatically **garbage-collected**, a `WeakSet` does not have size property.\n\n**Example:** WeakSet Methods\n\nWeakSets have methods `add()`, `delete()`, and `has()`.\n\n```js\n/**\n * Weakset\n */\nconst weakSet = new WeakSet();\n\nlet obj = {\n    message: 'Hi',\n    sendMessage: true\n}\n\n// adding object (element) to WeakSet\nweakSet.add(obj); \n\n// check if an element is in Set\nconsole.log(weakSet.has(obj)); // true\n\nconsole.log(weakSet); // WeakSet {{message: \"Hi\", sendMessage: true}}\n\n// delete elements\nweakSet.delete(obj);\nconsole.log(weakSet); // WeakSet {}\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-weakset-cg86e3?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 9.3. Map\n\nA `Map` object holds **key-value** pairs where values of any type can be used as either `keys` or `values`. In addition, a `Map` object remembers the original insertion order of the `keys`.\n\n**Syntax:**\n\n```js\nlet map = new Map([iterable]);\n```\n\n**Map methods:**\n\n|Sl.No.| Methods    | Description              |\n|------|------------|--------------------------|\n| 01.  |clear()     | removes all elements from the map object.|\n| 02.  |delete(key) | removes an element specified by the key. It returns if the element is in the map, or false if it does not.|\n| 03.  |entries()   |returns a new Iterator object that contains an array of [key, value] for each element in the map object. The order of objects in the map is the same as the insertion order.|\n| 04.  |forEach(callback[, thisArg]) | invokes a callback for each key-value pair in the map in the insertion order. The optional thisArg parameter sets the this value for each callback.|\n| 05.  |get(key) | returns the value associated with the key. If the key does not exist, it returns undefined.|\n| 06.  |has(key) | returns true if a value associated with the key exists, otherwise, return false.|\n| 07.  |keys()   |returns a new Iterator that contains the keys for elements in insertion order.|\n| 08.  |set(key, value) | sets the value for the key in the map object. It returns the map object itself therefore you can chain this method with other methods.|\n| 09.  |values() |returns a new iterator object that contains values for each element in insertion order.|\n\n**Initialize a map with an iterable object:**\n\n```js\nlet lalit = { name: 'Lalit Ranganathan' },\n  jayesh = { name: 'Jayesh Ray' },\n  sarvesh = { name: 'Sarvesh Tripathi' };\n\nlet userRoles = new Map([\n  [lalit, 'admin'],\n  [jayesh, 'editor'],\n  [sarvesh, 'subscriber'],\n]);\n\n// Get an element from a map by key\nuserRoles.get(john); // admin\n\n// Check the existence of an element by key\nuserRoles.has(lily); // true\n```\n\n**Iterate over map keys:**\n\n```js\n/**\n * Map\n */\nlet lalit = { name: 'Lalit Ranganathan' },\n  jayesh = { name: 'Jayesh Ray' },\n  sarvesh = { name: 'Sarvesh Tripathi' };\n\nlet userRoles = new Map([\n  [lalit, 'admin'],\n  [jayesh, 'editor'],\n  [sarvesh, 'subscriber'],\n]);\n\nfor (const user of userRoles.keys()) {\n  console.log(user.name);\n}\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-map-w6i921?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 9.4. Weakmap\n\nA `WeakMap` is similar to a `Map` except the `keys` of a `WeakMap` must be **objects**. It means that when a reference to a key (an object) is out of scope, the corresponding value is automatically released from the memory.\n\nA `WeakMap` only has subset methods of a `Map` object:\n\n* get(key)\n* set(key, value)\n* has(key)\n* delete(key)\n\n```js\n/**\n * Weakmap\n */\nvar weakMap = new WeakMap();\nvar obj1 = {};\nvar obj2 = {};\n\nweakMap.set(obj1, 10);\nweakMap.set(obj2, 20);\nweakMap.set({}, { four: 4 });\n\nconsole.log(weakMap.get(obj2)); // 20\n\n/**\n * Return false even though empty object exists as key.\n * Because the keys have different references\n * */\nconsole.log(weakMap.has({}));\n\nweakMap.delete(obj1);\nconsole.log(weakMap.get(obj1)); //undefined\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-weakmap-mexzxg?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 10.1. Array.of()\n\nThe `Array.of()` method creates a new Array instance from a variable number of arguments, regardless of number or type of the arguments.\n\nThe difference between `Array.of()` and the `Array` constructor is in the handling of integer arguments: Array.of(3) creates an array with a single element, 3, whereas Array(3) creates an empty array with a length property of 3 (Note: this implies an array of 3 empty slots, not slots with actual `undefined` values).\n\n**Syntax:**\n\n```js\nArray.of(element0, element1, /* ... ,*/ elementN)\n```\n\n**Example:**\n\n```js\n/**\n * Array.of()\n */\n\n// Array Method\nlet number = Array(3);\nconsole.log(number.length); // 3\nconsole.log(number[0]); // undefined\nconsole.log(\"Array of Method\");\n\n// Array of() Method\nlet numbers = Array.of(3);\nconsole.log(numbers.length); // 1\nconsole.log(numbers[0]); // 3\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-array-of-7xgzm6?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 10.2. Array.from()\n\nThe `Array.from()` static method creates a new, shallow-copied `Array` instance from an array-like or iterable object.\n\n**Syntax:**\n\n```js\nArray.from(target [, mapFn[, thisArg]])\n```\n\n**Create an array from an array-like object:**\n\n```js\nconsole.log(Array.from('Hello'));\n\n// Output\n[\"H\", \"e\", \"l\", \"l\", \"o\"]\n```\n\n**Array.from() with a mapping function:**\n\n```js\nfunction addOne() {\n  return Array.from(arguments, (x) =\u003e x + x);\n}\nconsole.log(addOne(10, 20, 30));\n\n// Output\n[20, 40, 60]\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-array-from-qxefm7?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 10.3. Array.find()\n\nThe `find()` method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, `undefined` is returned.\n\n**Syntax:**\n\n```js\nfind(callback(element[, index[, array]])[, thisArg])\n```\n\n**Example:**\n\n```js\nlet arr = [2, 4, 5, 6, 7, 10];\n\nfunction findFirstOdd(i) {\n  return i % 2 !== 0;\n}\nconsole.log(arr.find(findFirstOdd)); // 5\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-array-find-iou6gi?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 10.4. Array.findIndex()\n\nThe `findIndex()` method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns `-1`, indicating that no element passed the test.\n\n**Syntax:**\n\n```js\nfindIndex(testFn(element[, index[, array]])[, thisArg])\n```\n\n**Example:**\n\n```js\nlet ranks = [1, 5, 7, 8, 10, 7];\n\nlet index = ranks.findIndex((rank) =\u003e rank === 7);\n\nconsole.log(index); // 2\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-array-findindex-meiqpf?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 11.1. Object.assign()\n\nThe `Object.assign()` method copies **all enumerable own properties** from one or more source objects to a target object. It returns the modified target object.\n\nThe `Object.assign()` invokes the getters on the source objects and setters on the target. It assigns properties only, not copying or defining new properties.\n\n**Example:** Object.assign() to clone an object\n\n```js\nlet widget = {\n  color: \"red\"\n};\nlet clonedWidget = Object.assign({}, widget);\n\nconsole.log(clonedWidget);\n\n// Output\n{ color: 'red' }\n```\n\n**Example:** Object.assign() to merge objects\n\n```js\nlet box = {\n  height: 10,\n  width: 20\n};\n\nlet style = {\n  color: \"Red\",\n  borderStyle: \"solid\"\n};\nlet styleBox = Object.assign({}, box, style);\n\nconsole.log(styleBox);\n\n// Output\n{\n  height: 10,\n  width: 20,\n  color: \"Red\",\n  borderStyle: \"solid\"\n}\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-object-assign-0ot7bs?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 11.2. Object.is()\n\nThe `Object.is()` method determines whether two values are **the same value**.\n\nThe `Object.is()` behaves like the `===` operator with two differences:\n\n* -0 and +0\n* NaN\n\n**Example:** Evaluation result is the same as using `===`\n\n```js\nObject.is(null, null); // true\nObject.is(undefined, undefined); // true\nObject.is(window, window); // true\nObject.is([], []); // false\n\nvar obj1 = { a: 1 };\nvar obj2 = { a: 1 };\nObject.is(obj1, obj1); // true\nObject.is(obj1, obj2); // false\n```\n\n**Example:** Negative zero\n\nThe === operator treats -0 and +0 are the same value:\n\n```js\nlet amount = +0,\n    volume = -0;\nconsole.log(volume === amount); // true\n\n\nlet amount = +0,\n    volume = -0;\nconsole.log(Object.is(amount, volume)); // false\n```\n\n**Example:** NaN\n\nThe `===` operator considers `NaN` and `NaN` are different values. The `NaN` is the only number that does not equal itself.\n\n```js\nconsole.log(Object.is(NaN, 0 / 0)); // true\nconsole.log(Object.is(NaN, Number.NaN)); // true\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-object-is-ck2h8y?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 12.1. String.startsWith()\n\nThe `startsWith()` method determines whether a string begins with the characters of a specified string, returning `true` or `false` as appropriate.\n\n**Syntax:**\n\n```js\nString.startsWith(searchString [,position])\n```\n\n**Example:**\n\n```js\nlet text = \"Hello World, Welcome to the JavaScript ES6.\";\nlet isTrue = text.startsWith(\"Hello\"); \n\nconsole.log(isTrue); // true\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-string-startswith-wxbrtw?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## 12.2. String.endsWith()\n\nThe `endsWith()` method determines whether a string ends with the characters of a specified string, returning `true` or `false` as appropriate.\n\n**Syntax:**\n\n```js\nString.endsWith(searchString [,length])\n```\n\n**Example:**\n\n```js\nlet text = \"Hello World, Welcome to the JavaScript ES6\";\nlet isTrue = text.endsWith(\"ES6\");\n\nconsole.log(isTrue); // true\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-string-endswith-1huuuu?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## 12.3. String.includes()\n\nThe `includes()` method determines whether a string contains another string:\n\n**Syntax:**\n\n```js\nstring.includes(searchString [,position])\n```\n\n**Example:**\n\n```js\nlet email = 'admin@example.com';\nconsole.log(email.includes('@')); // true\n\nlet str = 'JavaScript String';\nconsole.log(str.includes('Script')); // true\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-includes-ycwhqd?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 13.1. Proxies\n\nThe `Proxy` object allows you to create an object that can be used in place of the original object, but which may redefine fundamental `Object` operations like getting, setting, and defining properties. Proxy objects are commonly used to log property accesses, validate, format, or sanitize inputs, and so on.\n\nThe proxy object is created with two parameters:\n\n```js\nlet proxy = new Proxy(target, handler)\n```\n\n* **target:** the original object which you want to proxy\n* **handler:** an object that defines which operations will be intercepted and how to redefine intercepted operations.\n\n**Example:**\n\n```js\n/**\n * Proxy object\n */\nconst user = {\n  name: \"Rishima Karpe\",\n  email: \"rishima.karpe@email.com\"\n};\n\nconst handler = {\n  get(target, property) {\n    console.log(`Property ${property}:`);\n    return target[property];\n  }\n};\n\nconst proxyUser = new Proxy(user, handler);\nconsole.log(proxyUser.name);\nconsole.log(proxyUser.email);\n\n// Output\nProperty name: Rishima Karpe \nProperty email: rishima.karpe@email.com\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-proxies-u9tgie?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 13.2. Reflect\n\nReflection is the ability of a code to inspect and manipulate variables, properties, and methods of objects at **runtime**.\n\nJavaScript already provides `Object.keys()`, `Object.getOwnPropertyDescriptor()`, and `Array.isArray()` methods as classic refection features.\n\nES6 introduces a new global object called `Reflect` that allows you to call methods, construct objects, get and set properties, manipulate and extend properties.\n\n**Example:** Creating objects using `Reflect.construct()`\n\n```js\n/**\n * Reflect\n */\nclass User {\n  constructor(firstName, lastName) {\n    this.firstName = firstName;\n    this.lastName = lastName;\n  }\n  get fullName() {\n    return `${this.firstName} ${this.lastName}`;\n  }\n}\nlet args = [\"Abhilash\", \"Bhasin\"];\nlet abhilash = Reflect.construct(User, args);\n\nconsole.log(abhilash instanceof User); //true\nconsole.log(abhilash.fullName); // Abhilash Bhasin\n```\n\n**Example:** Get property of an object using `Reflect.get()`\n\n```js\nconst user = {\n  name: 'Abhilash',\n  age: 28\n};\nconsole.log(Reflect.get(user, 'age')); // 33\n```\n\n**Example:** Calling a function using `Reflect.apply()`\n\n```js\nconst max = Reflect.apply(Math.max, Math, [10, 20, 30]);\n\nconsole.log(max);\n```\n\n**Example:** Delete property using `Reflect.deleteProperty()`\n\n```js\nconst user = {\n  name: 'Abhilash',\n  age: 28\n};\n\nconsole.log(Reflect.deleteProperty(user, 'age')); // true\nconsole.log(user.age); // undefined\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-reflect-e7euzj?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 14.1. Unicode\n\nPrior to ES6, JavaScript strings are represented by 16-bit character encoding (UTF-16). Each character is represented by 16-bit sequence known as code unit.\n\nECMAScript 6 added full support for UTF-16 within strings and regular expressions. It introduces new Unicode literal form in strings and new RegExp flag **\\u** mode to handle code points, as well as new APIs(codePointAt, fromCodePoint) to process strings.\n\n**Example:**\n\n```js\n/**\n * Unicode\n */\nlet str = '𠮷';\n\n// new string form\nconsole.log('\\u{20BB7}'); // \"𠮷\"\n\n// new RegExp u mode\nconsole.log(new RegExp('\\u{20BB7}', 'u'));\nconsole.log(/^.$/u.test(str)); // true\n\n//API methods\nconsole.log(str.codePointAt(0)); // 134071\nconsole.log(str.codePointAt(1)); // 57271\n\nconsole.log(String.fromCodePoint(134071));  // \"𠮷\"\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-unicode-ve845j?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 14.2. Proper Tail Calls\n\n**Proper tail call ( PTC )** is a technique where the program or code will not create additional stack frames for a recursion when the function call is a tail call.\n\nFor example, the below classic or head recursion of factorial function relies on stack for each step. Each step need to be processed upto `n * factorial(n - 1)`\n\n```js\nfunction factorial(n) {\n  if (n === 0) {\n    return 1\n  }\n  return n * factorial(n - 1)\n}\n\nconsole.log(factorial(5)); //120\n```\n\nBut if you use **Tail recursion functions**, they keep passing all the necessary data it needs down the recursion without relying on the stack.\n\nThe browsers which supports PTC do not generate stack overflow instead shows Infinity with below inputs,\n\n```js\nfunction factorial(n, acc = 1) {\n  if (n === 0) {\n    return acc;\n  }\n  return factorial(n - 1, n * acc);\n}\n\nconsole.log(factorial(5)); //120\nconsole.log(factorial(10)); // 3628800\nconsole.log(factorial(100)); // 9.332621544394418e+157\nconsole.log(factorial(1000)); // Infinity\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-proper-tail-calls-qmptbq?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n  \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearning-zone%2Fjavascript-es6-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearning-zone%2Fjavascript-es6-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearning-zone%2Fjavascript-es6-basics/lists"}