{"id":26883990,"url":"https://github.com/ferreiratiago/es6","last_synced_at":"2025-05-08T17:01:57.266Z","repository":{"id":196979890,"uuid":"83828712","full_name":"ferreiratiago/es6","owner":"ferreiratiago","description":"Playground for ECMAScript 2015 (ES6)","archived":false,"fork":false,"pushed_at":"2017-05-31T11:00:27.000Z","size":55,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-31T17:52:17.750Z","etag":null,"topics":["arrow-function","block","class","destructuring-assignment","ecmascript2015","es6","generator","iterator","let-and-const","map","modules","object-literal","promise","set","spread-operator","symbol","template-literal","weakmap","weakset"],"latest_commit_sha":null,"homepage":"https://github.com/tc39/proposals/blob/master/finished-proposals.md","language":"JavaScript","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/ferreiratiago.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}},"created_at":"2017-03-03T18:27:45.000Z","updated_at":"2023-03-07T17:15:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"e2b7d83f-3f44-4eff-a2f5-2ef4abe56443","html_url":"https://github.com/ferreiratiago/es6","commit_stats":null,"previous_names":["ferreiratiago/es6"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferreiratiago%2Fes6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferreiratiago%2Fes6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferreiratiago%2Fes6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferreiratiago%2Fes6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ferreiratiago","download_url":"https://codeload.github.com/ferreiratiago/es6/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253112071,"owners_count":21856070,"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":["arrow-function","block","class","destructuring-assignment","ecmascript2015","es6","generator","iterator","let-and-const","map","modules","object-literal","promise","set","spread-operator","symbol","template-literal","weakmap","weakset"],"created_at":"2025-03-31T17:38:03.814Z","updated_at":"2025-05-08T17:01:57.101Z","avatar_url":"https://github.com/ferreiratiago.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ES6 (ECMAScript 2015)\n\n* [Destructuring Assignment](#destructuring-assignment)\n* [Arrow Functions](#arrow-functions)\n* [Blocks](#block-scope)\n* [Let \u0026\u0026 Const](#let--const)\n* [Template Literals](#template-literals)\n* [Object Literals](#object-literals)\n* [Spread Operator](#spread-operator)\n* [Classes](#classes)\n* [Iterators](#iterators)\n* [Generators](#generators)\n* [Symbols](#symbols)\n* [Promises](#promises)\n* [Maps](#maps)\n* [Weak Maps](#weak-maps)\n* [Sets](#sets)\n* [Weak Sets](#weak-sets)\n* [Proxies](#proxies)\n* [Number](#number)\n* [Array](#array)\n* [Object](#object)\n* [Strings](#strings)\n* [Modules](#modules)\n\n## Destructuring Assignment\n\n`Destructuring assignment` allow us to assign properties of arrays or objects to variables.\n\n### Examples\n\n#### Objects\n```js\nvar obj = {\n    foo: 'Mr.Foo',\n    bar: 'Mr.Bar'\n}\n\nvar { foo } = obj               // var foo = obj.foo\nvar { foo: bar } = obj          // var bar = obj.foo\nvar { foo = 'default' } = {}    // var foo = ({}).foo || 'default'\nvar { foo, bar } = obj          // var foo = obj.foo; var bar = obj.bar\nvar { foo } = {}                // var foo = undefined\nvar { foo: { bar: deep } } = { foo: { bar: 'bar' } } // deep = 'bar'\nvar { foo: { bar } } = {}       // ERROR - {}.foo.bar does not exits\n```\n\n#### Arrays\n```js\nvar [a,b] = [6,3]       // var a = [6,3][0]; var b = [6,3][1]\nvar [a, ,c] = [6,9,3]   // var a = [6,9,3][0]; var c = [6,9,3][2]\nvar [a,b] = [b,a]       // var a = [b,a][0]; var b = [b,a][1]\n```\n\n#### Functions\n```js\n// Parameter with default value.\nvar foo = function (bar = 2) {\n    console.log(bar)\n}\nfoo()   // 2\nfoo(3)  // 3\n\n// Parameter with default value object.\nvar foo = function (bar = {a: 1, b: 2}) {\n    console.log(bar)\n}\nfoo()       // {a: 1, b: 2}\nfoo({a: 3}) // {a: 3}\n\n// Parameter object with default values.\nvar foo = function ({a = 1, b = 2}) {\n    console.log(a)\n    console.log(b)\n}\nfoo()       // ERROR - No default when object is not provided.\nfoo({})     // 1, 2\nfoo({a: 3}) // 3, 2\n\n// Parameter object (with default values) and default value.\nvar foo = function ({a = 1, b = 2} = {}) {\n    console.log(a)\n    console.log(b)\n}\nfoo()       // 1, 2\nfoo({})     // 1, 2\nfoo({a: 3}) // 3, 2\n```\n\n### Further Reading\n* [MDN - Destructuring Assignment](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)\n* [ExploringJS - Destructuring](http://exploringjs.com/es6/ch_destructuring.html)\n\n## Arrow Functions\n\n`Arrow function` is a shorter syntax for the common [function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function).\nThe cool thing about it is that it doesn't bind its own [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this), [arguments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments), [super](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super) or [new.target](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target).\n\n### Examples\n\n```js\nvar increment = (value) =\u003e {\n    return value + 1\n}\nincrement(3) // 4\n```\n\n#### Block Scope\n```js\nvar increment = (value) =\u003e value + 1  // Remove the {} from the function body.\nincrement(3) // 4\n\nvar increment = value =\u003e value + 1    // Removed the () from the value parameter.\nincrement(3) // 4\n```\n\n#### Object Returning\n```js\n// The return statement needs to be wrapped on '()'.\nvar foo = () =\u003e ({\n    value: 3\n})\nfoo() // { value : 3 }\n```\n\n#### this\n```js\n// \"this\" is bound to the scope.\nthis.bar = 3\n\n// ES5\nfunction foo() {\n    return bar\n}\nfoo() // Error - bar undefined\n\n// ES6\nvar foo = () =\u003e this.bar\nfoo() // 3\n```\n\n### Further Reading\n* [MDN - Arrow Functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)\n* [ExploringJS - Arrow Functions](http://exploringjs.com/es6/ch_arrow-functions.html)\n* [PonyFoo - Arrow Functions in Depth](https://ponyfoo.com/articles/es6-arrow-functions-in-depth)\n\n## Block Scope\n\n`Blocks` are the way to create the common [Immediately Invoked Function Expression (IIFE)](https://developer.mozilla.org/en-US/docs/Glossary/IIFE).\n\n### Examples\n```js\n// ES5\n// In order to have a block scope, we would use\n// IIFEs (Immediately Invoked Function Expression).\n(function IIFE () {\n    // Begin block scope\n    var foo = 'Mr.Foo'\n    // End block scope\n})()\n\nfoo // Reference Error\n\n// ES6\n// Use {} + let or const for block scope\n{\n    // Begin block scope\n    var zed = 'Mr.Zed'\n    let foo = 'Mr.Foo'\n  const bar = 'Mr.Bar'\n    // End block scope\n}\nzed // Mr.Zed\nfoo // Reference Error\nbar // Reference Error\n```\n\n### Further Reading\n* [WESBOS ES6 Block Scope IIFE](http://wesbos.com/es6-block-scope-iife/)\n\n## Let \u0026\u0026 Const\n\n`Let` and `Const` are alternative ways to `var`.\nAlthough both `let` and `const` are block-scoped (instead of function scoped) a variable declared with `let` can be reassigned as for `const` is not possible to reassign.\n\n### Examples\n\n#### Let\n```js\nlet foo = 'Mr.Foo'\n\n// Let variables:\n//  - are block-scoping (i.e. they live in their defined block.)\n//  - can be reassigned.\n\nfunction func (flag) {\n\n    if(flag) {\n        // new block scope\n        let foo = 'NewFoo'\n\n        return foo\n        // end block scope\n    }\n\n    return foo\n}\n\nfunc(true)  // NewFoo\nfunc(false) // Mr.Foo\n```\n\n#### Const\n```js\nconst foo = 'Mr.Foo'\n\n// Const variables:\n//  - are block-scoping.\n//  - can't be reassigned (assignment is immutable.)\n\nfoo = 'NewFoo' // ERROR - No new assignment allowed.\n\n// An interesting example\nconst bar = { a : 3 }\n\nbar = { b : 7} // error - No new assignment allowed.\nbar.a = 7 // OK - We are updating a property, not the assignment.\n```\n\n### Further Reading\n* [2ality - Variables and Scoping in ECMAScript 6](http://2ality.com/2015/02/es6-scoping.html)\n* [MDN - Const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) and [MDN - let](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let)\n* [PonyFoo - ES6 Let, Const and the “Temporal Dead Zone” (TDZ) in Depth](https://ponyfoo.com/articles/es6-let-const-and-temporal-dead-zone-in-depth)\n\n## Template Literals\n\n`Template literals` allows us to easily build string values with expressions on it.\n\n### Examples\n```js\n`ES6 Template String`\n\n// String wrapped into \"\"\n`Double \"quote\"` // Double \"quote\"\n\n// String wrapped into ''\n`Single 'quote'` // Single 'quote'\n\n// Multiple line\n`Multiple\nLine`\n```\n\n#### Interpolation\n```js\n`${1 + 2}` // 3\n\nconst foo = 'MrFoo'\n`Hello ${foo}`      // Hello MrFoo\n\nconst bar = () =\u003e 'MrBar'\n`Hello ${bar()}`    // Hello MrBar\n```\n\n#### Build Template\n```js\nconst mr = (template, ...expressions) =\u003e {\n    // template is an Array broke at the interpolations\n    // e.g. for `foo {$a} bar {$b}`\n    // template = ['Dear ', ' and ', '']\n    return template.reduce((result, current, index) =\u003e {\n        return `${result}Mr.${expressions[index - 1]}${current}`\n    })\n}\n\nconst foo = 'Foo'\nconst bar = 'Bar'\n\nmr`Dear ${foo} and ${bar}` // Dear Mr.Foo and Mr.Bar\n```\n\n### Further Reading\n* [MDN - Template Literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals)\n* [ExploringJS - Template Literals](http://exploringjs.com/es6/ch_template-literals.html)\n* [PonyFoo - ES6 Template Literals in Depth](https://ponyfoo.com/articles/es6-template-strings-in-depth)\n\n## Object Literals\n\n`Object literals` are a simple lists of key properties with a pair value (i.e. key:value).\n\n### Examples\n```js\n// Property value shorthand\nconst foo = 'Mr.Foo'\n\n{\n    // Because the property 'foo' has the\n    // same name as the const 'foo'\n    // no need to write { foo: foo }\n    foo\n}\n\n// Computed properties\n{\n    // [ value to compute to property ] : value\n    [ 1 + 3 ] : 'Number 4'\n}\n\n// Method definition\n{ bar () {\n    // Code for function bar\n  }\n}\n```\n\n### Further Reading\n* [MDN - Grammar and Types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals)\n* [PonyFoo - ES6 Object Literal Features in Depth](https://ponyfoo.com/articles/es6-object-literal-features-in-depth)\n\n## Spread Operator\n\nThe `spread operator` allow us to expanded an expression into multiple variables (i.e. destructuring assignment) or multiples variables (i.e. array literals) or multiple arguments (i.e. function calls.)\n\n### Examples\n\n### Destructuring Assignment\n```js\n[foo, , ...rest] = [1,2,3,4,5]\nconsole.log(foo)    // 1\nconsole.log(rest)   // [3,4,5]\n\nfunction foo (...parameters) {\n    // parameters is an Array\n    // with all parameters.\n    console.log(parameters)\n}\nfoo(1,2,3)      // [1,2,3]\nfoo([1,2,3],4)  // [[1,2,3],4]\n\n// We can name some parameters\nfunction foo (bar, ...parameters) {\n    // bar is the first parameter.\n    // parameters is an Array containing\n    // the remaining parameters.\n    console.log(bar, parameters)\n}\nfoo() // undefined, []\nfoo(1) // 1, []\nfoo(1,2,3) // 1, [2,3]\n```\n\n### Array Literals\n```js\n[1, ...[2,3], 4] // [1,2,3,4]\n```\n\n#### Function Call\n```js\nfunction foo (a,b,c) {\n    console.log(a,b,c)\n}\n\nfoo(...[1,2,3]) // 1, 2, 3\n```\n\n### Further Reading\n* [MDN - Spread Syntax](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator)\n* [PonyFoo - ES6 Spread and Butter in Depth](https://ponyfoo.com/articles/es6-spread-and-butter-in-depth)\n\n## Classes\n\nJavascript is a functional programming language.\nHowever, the concept of `Classes` in ES6 is just syntax sugar on top of prototypal inheritance.\nThe goal is to make the language more obvious to programmers coming from other paradigms (e.g. OO).\n\n### Examples\n```js\nclass Counter {\n  constructor () {\n    this.count = 0\n  }\n\n  increment () {\n    this.count++\n  }\n\n  decrement () {\n    this.count--\n  }\n\n  static isNil (counter) {\n      return counter.count === 0\n  }\n}\n\nlet counter = new Counter()\ncounter.increment()     // 1\ncounter.increment()     // 2\ncounter.decrement()     // 1\nCounter.isNil(counter)  // false\n```\n\n#### Extends\n```js\n// We now can use the keyword \"extends\" to easily \"inherit\" from other \"classes\".\n// Not forgetting that this is only syntax sugar to ES5 prototype terminology.\n\nclass Temperature extends Counter {\n    constructor () {\n        // The super keyword identifies our base class \"Counter\".\n        super()\n    }\n\n    decrement () {\n        if(this.count \u003e 0) {\n            super.decrement()\n        }\n    }\n}\n\nlet termo = new Temperature()\ntermo.decrement()   // 0 // no decrement because \"count\" was already 0\ntermo.increment()   // 1\ntermo.decrement()   // 0\n```\n\n### Further Reading\n* [MDN - Classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes)\n* [2ality - Classes in ECMAScript 6 (final semantics)](http://2ality.com/2015/02/es6-classes-final.html)\n* [ExploringJS](http://exploringjs.com/es6/ch_classes.html)\n\n## Iterators\n\nIteration is the new mechanism offer by ES6 to traversing data.\n\nAn `iterable` is a data structure responsable to enable data access to the public, and it does that by implementing a method whose key is `Symbol.iterator` (which is a factory for iterators.)\n\n### Examples\n```js\nconst iterable = {\n    [Symbol.iterator] () {}\n}\n\n// An iterator is a pointer for traversing the elements of a data structure.\n\n// Under the wood JS has a method called @@iterator,\n// By using the well-known Symbol.iterator we can assign an iterator to this method.\n// @@iterator is called once, whenever an object needs to be iterated (e.g. for..of loop)\n// @@iterator will be asked for an iterator.\n// The returned iterator is then used to obtain the values of the object.\n\n\n// The iterator protocol has to define how to get values out of an object.\n// We need to define an @@iterator that satisfies that.\n\n// The iterator protocol indicates that we must have an object with a 'next' method.\n// The 'next' method has no arguments and returns an object with two properties:\n// * done - true if the sequence has end, false otherwise.\n// * value - the current item in the sequence\n\nconst iterable = {\n    [Symbol.iterator]() {\n        const items = ['f', 'o', 'o']\n        const iterator = {\n            next () {\n                return {\n                    done: items.length === 0,\n                    value: items.shift()\n                }\n            }\n        }\n\n        return iterator\n    }\n}\n\nfor(let item of iterable) {\n    console.log(item)\n    // f\n    // o\n    // o\n}\n```\n\n### Further Reading\n* [MDN - Iteration Protocols](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Iteration_protocols)\n* [2ality - Iterables and iterators in ECMAScript 6](http://2ality.com/2015/02/es6-iteration.html)\n* [ExploringJS - Iterables and iterators](http://exploringjs.com/es6/ch_iteration.html)\n* [PonyFoo - ES6 Iterators in Depth](https://ponyfoo.com/articles/es6-iterators-in-depth)\n\n## Generators\n\n`Generators` are created by declaring a generator function, which returns a generator object (e.g. g) that can then be iterated using `Array.from(g)`, `[...g]`, or `for value of g`.\n\n### Examples\n```js\n// We use the symbol * to mark a function as a generator and 'yield' to emit an element sequence.\nfunction* generator () {\n    yield 'f'\n    yield 'o'\n    yield 'o'\n}\n[...generator()] // ['f', 'o', 'o']\n\n// Generator object follow both iterable and iterator protocol.\nvar g = generator()\n// It is an iterable because if has na @@iterator.\ntypeof g[Symbol.iterator] === 'function' // true\n// It is an iterator because if has the .next method.\ntypeof g.next === 'function'            // true\n// The iterator for a generator is the generator itself.\ng[Symbol.iterator]() === g              // true\n\n[...g] // ['f','o','o']\nArray.from(g) // ['f', 'o', 'o']\nfor(let item of g) {\n    console.log(item)\n    // 'f'\n    // 'o'\n    // 'o'\n}\n\n// Whenever the 'yield' expression is reached, the value is emitted\n// by the iterator and the function execution is suspended.\nfunction* generator () {\n    yield 'foo'\n    console.log('and')\n    yield 'bar'\n}\n var foo = generator()\n\nfoo.next() // emits { value: 'f', done: false } and suspends\nfoo.next() // logs 'and', emits { value: 'bar', done: false }, and suspends\nfoo.next() // emits {value: undefined, done: true } and finishes\n\n// Whenever .next() is called on a generator, there's four events that can suspend the execution:\n// * yield - emits the next value in the sequence\n// * return - returns the last value in the sequence\n// * throw - stops the execution in the generator entirely\n\n// Use 'yield*' to delegate to other generator function.\nfunction* generator () {\n    yield* 'foo'\n}\n\nconsole.log([...generator()]) // ['f','o','o']\n```\n\n### Further Reading\n* [MDN - Generator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)\n* [2ality - ES6 generators in depth](http://2ality.com/2015/03/es6-generators.html)\n* [PonyFoo - ES6 Generators in Depth](https://ponyfoo.com/articles/es6-generators-in-depth)\n\n## Symbols\n\n`Symbols` are just a new primitive type in Javascript.\n\n```js\ntypeof Symbol() // 'symbol'\n```\n\n### Examples\n```js\n// They are simple tokens that can be used as unique IDs.\n// We can create a new symbol by using the function Symbol().\nconst ID = Symbol()\n\n// Every symbol returned by Symbol() is unique.\nSymbol() === Symbol() // false\n```\n\n#### Description\n```js\n// Symbol() has an optional string-value parameters,\n// which represents the symbol description.\n// This description is used to convert the symbol to a String.\nconst symbol = Symbol('aSymbol')\n\nString(symbol) // 'Symbol(aSymbol)'\n```\n\n#### As Object Property\n```js\nconst KEY = Symbol()\nconst obj = {\n    [KEY]: 'Value'\n}\n\nconsole.log(obj[KEY]) // 'Value'\n```\n\n#### As Concept\n```js\nconst CAR_BMW = Symbol('BMW')\nconst CAR_AUDI = Symbol('Audi')\nconst CAR_MERCEDES = Symbol('Mercedes')\n```\n\n#### .for() and .keyFor()\n```js\n// We can add symbols at run-time with Symbol.for(key) and Symbol.keyFor(symbol)\n\n// We can lookup key in runtime-wide on symbol registry.\n// If a symbol with that key exists then it would be returned.\n// If no symbol exists, then on would be created.\n// Therefore, Symbol.for(key) is idempotent.\nSymbol.for('foo') === Symbol.for('foo') // true\n\n// Symbol.keyFor(symbol) returns the key to which the symbol was associated with.\nconst BAR = Symbol.for('bar')\nconsole.log(Symbol.keyFor(BAR)) // 'bar'\n```\n\n### Further Reading\n* [MDN - Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)\n* [ExploringJS - Symbols](http://exploringjs.com/es6/ch_symbols.html)\n* [PonyFoo - ES6 Symbols in Depth](https://ponyfoo.com/articles/es6-symbols-in-depth)\n\n## Promises\n\nA `promise` is defined as \"a proxy for a value that will eventually become available\".\nAlthough they can be use to both synchronous and asynchronous code flows, they are though for async flows.\n\n### Examples\n\n#### .then()\nWe can chain a Promise with the method `.then()`, which has two parameters:\n* **onFulfilled** - Callback to be executed on promise success\n* **onRejected** - Callback to be executed on promise fail\n\n```js\nfetch('foo').then(\n    function onFulfilled (response) {\n        // Handle success response.\n        console.log(response)\n    },\n    function onRejected () {\n        // Handle error.\n        console.log('error')\n    }\n)\n```\n\n#### new Promise()\nWe can create promises from scratch by using `new Promise(resolver)`, where `resolver` parameter is the method used to resolve the promise.\n\nThe `resolver` parameter has two arguments:\n* **resolve** - Callback to when the promise is fulfilled\n* **rejected** - Callback to when the promise is rejected\n\n```js\nnew Promise(resolve =\u003e resolve())           // promise is fulfilled\nnew Promise((resolve, reject) =\u003e reject())  // promise is rejected\n\n// Resolving a promise with a value.\nnew Promise(resolve =\u003e resolve('foo'))\n    .then(result =\u003e console.log(result))        // foo\n\n// Resolving a promise with an exception.\nnew Promise((resolve, reject) =\u003e reject(new Error('Connection Timeout')))\n    .then(null, reason =\u003e console.log(reason)) // Error: Connection Timeout\n```\n\n#### Promise.all\nIt allow us to wait for a set of promise to resolve.\n\n```js\nPromise.all([\n    new Promise(resolve =\u003e resolve('foo')),\n    new Promise(resolve =\u003e resolve('bar'))\n]).then(response =\u003e console.log(response))  // ['foo', 'bar']\n\n// If a single promise is rejected, the Promise.all is entirely rejected.\nPromise.all([\n    Promise.reject(),\n    new Promise(resolve =\u003e resolve('foo'))\n]).then(() =\u003e console.log('All Resolved'), () =\u003e console.log('All Rejected')) // 'All Rejected'\n```\n\n### Further Reading\n* [MDN - Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)\n* [ExploringJS - Promises for asynchronous programming](http://exploringjs.com/es6/ch_promises.html)\n* [PonyFoo - ES6 Promises in Depth](https://ponyfoo.com/articles/es6-promises-in-depth)\n\n## Maps\n\nA `Map` object is a new data structure is JavaScript with a simple key/value map. Any value (i.e. primite or objects) can be used as both key and value.\n\n### Examples\n\n#### new Map\n```js\nvar map = new Map()\n\n// We can use any object that follows the iterable protocol.\n// e.g. ['key', 'value']\nvar map = new Map([\n    ['foo', 'Mr.Foo'],\n    ['bar', 'Mr.Bar']\n])      \nconsole.log(map)        // Map { 'foo' =\u003e 'Mr.Foo', 'bar' =\u003e 'Mr.Bar' }\n// We can use the spread operator to have the opposite effect.\nconsole.log([...map])   // [ [ 'foo', 'Mr.Foo' ], [ 'bar', 'Mr.Bar' ] ]\n```\n\n#### .set()\n```js\nvar map = new Map()\n\n// Use primitive as values.\nmap.set('foo', 'Mr.Foo') // Map { 'foo' =\u003e 'Mr.Foo' }\nmap.set(3, 'Mr.3')       // Map { 'foo' =\u003e 'Mr.Foo', 3 =\u003e 'Mr.3'  }\n// Because `keys` are unique, when setting a key that is already defined,\n// it will override the existing one.\nmap.set('foo', 'Mr.Bar') // Map { 'foo' =\u003e 'Mr.Bar', 3 =\u003e 'Mr.3'  }\n\n// Use objects as values.\nmap.set(() =\u003e 'key', 'Value')   // Map { [Function] =\u003e 'Value' }\nmap.set({}, 'Value')            // Map { {} =\u003e 'Value' }\nmap.set(new Date, 'Value')      // Map { 2017-03-16T16:37:15.488Z =\u003e 'Value' }\nmap.set(Symbol, 'Value')        // Map { Symbol =\u003e 'Value' }\n```\n\n#### .has()\n```js\nvar map = new Map([['foo', 'Mr.Foo']])\n\nconsole.log(map.has('foo')) // true\nconsole.log(map.has('bar')) // false\n```\n\n#### Deleting `key/value`\n```js\nvar map = new Map([['foo', 'Mr.Foo'], ['bar', 'Mr.Bar']])\n\n// Using .delete()\nmap.delete('bar')\nconsole.log(map) // Map { 'foo' =\u003e 'Mr.Foo' }\n\n// Using .clear(), which deletes everything\nmap.clear()\nconsole.log(map) // Map { }\n```\n\n#### Iterating\n```js\nvar map = new Map([['foo', 'Mr.Foo'], ['bar', 'Mr.Bar']])\n\n// Use .entries() to iterate over the map.\nconsole.log(map.entries())  // MapIterator { [ 'foo', 'Mr.Foo' ], [ 'bar', 'Mr.Bar' ] }\n\n// Use .keys() to iterate over the map keys.\nconsole.log(map.keys())     // MapIterator { 'foo', 'bar' }\n\n// Use .values() to iterate over the map values.\nconsole.log(map.values())   // MapIterator { 'Mr.Foo', 'Mr.Bar' }\n```\n\n### Further Reading\n* [MDN - Map](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map)\n* [ExploringJS - Map](http://exploringjs.com/es6/ch_maps-sets.html#sec_map)\n* [PonyFoo - ES6 Maps in Depth](https://ponyfoo.com/articles/es6-maps-in-depth)\n\n## Weak Maps\n\nWe can think of `WeakMaps` as a sub set of Maps.\nWeakMaps are not iterable, i.e. they don't follow the iterable protocol.\n\n### Examples\n```js\nvar map = new WeakMap()\n\n// Every key must be an object.\nmap.set('foo', 'Mr.Foo') // TypeError: Invalid value used as weak map key\n\n// This enables the map keys to be garage collected\n//  when they're only being referenced as WeakMap keys.\n// This is useful when we want to store data that will\n//  eventually be lost, e.g. DOM nodes.\n\n// We can pass an iterable to populate the WeakMap.\nvar foo = new Date()\nvar bar = () =\u003e {}\nvar map = new WeakMap([[foo, 'Mr.foo'], [bar, 'Mr.bar']]);\n\n// .has()\nconsole.log(map.has(foo)) // true\n\n// .get()\nconsole.log(map.get(bar)) // 'Mr.Bar'\n\n// .delete()\nmap.delete(foo);\nconsole.log(map.has(foo)) // false\n```\n\n### Further Reading\n* [MDN - WealMaps](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)\n* [ExploringJS - WeakMap](http://exploringjs.com/es6/ch_maps-sets.html#sec_weakmap)\n* [PonyFoo - ES6 WeakMaps, Sets, and WeakSets in Depth](https://ponyfoo.com/articles/es6-weakmaps-sets-and-weaksets-in-depth)\n\n## Sets\n\n`Sets` are another data structure introduced by ECMAScript 6. It works for arbitrary values.\n\n### Examples\n```js\nvar set = new Set()\n\nset.add('foo')  // Set { 'foo' }\nset.add('bar')  // Set { 'foo', 'bar' }\n\n// .size\nset.size // 2\n\n// .keys()\nvar keysIterator = set.keys() // SetIterator { 'foo', 'bar' }\nkeysIterator.next().value     // 'foo'\nkeysIterator.next().value     // 'bar'\n\n// .values()\nvar valuesIterator = set.values()\nvaluesIterator.next().value     // 'foo'\nvaluesIterator.next().value     // 'bar'\n\n// .entries()\n// Returns a new Iterator object containing an array of [value, value]\n// for each element in the Set, in insertion order.\nvar entriesIterator = set.entries()\nconsole.log(entriesIterator.next().value) // ['foo', 'foo']\nconsole.log(entriesIterator.next().value) // ['bar', 'bar']\n\n// .add()\nset.add('zed')   // Set { 'foo', 'bar', 'zed' }\n\n// .has()\nset.has('zed')   // true\n\n// .delete()\nset.delete('zed') // Set { 'foo', 'bar' }\n```\n\n### Further Reading\n* [MDN - Set](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Set)\n* [ExploringJS - Set](http://exploringjs.com/es6/ch_maps-sets.html#sec_set)\n* [PonyFoo - ES6 WeakMaps, Sets, and WeakSets in Depth](https://ponyfoo.com/articles/es6-weakmaps-sets-and-weaksets-in-depth)\n\n## Weak Sets\n\nA `WeakSet` is set that it allows its elements being garbage-collected.\n\n### Examples\n```js\nvar set = new Set()\n\n// .add()\nset.add('foo')    // Set { 'foo' }\n\n// .has()\nset.has('foo')    // true\n\n// .delete()\nset.delete('foo') // Set { }\n```\n\n### Further Reading\n* [MDN - WeakSets](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet)\n* [ExploringJS - WeakSets](http://exploringjs.com/es6/ch_maps-sets.html#sec_weakset)\n* [PonyFoo - ES6 WeakMaps, Sets, and WeakSets in Depth](https://ponyfoo.com/articles/es6-weakmaps-sets-and-weaksets-in-depth)\n\n## Proxies\n\n`Proxies` allows us to intercept and customize behaviour on operations performed on objects (e.g. getting of setting properties). They are a metaprogramming feature.\n\n### Examples\n```js\n// Proxies allows us to defined behaviour whenever\n// the properties of a target object are accessed.\nvar target = {}\n// The handler object is used to configure traps for our Proxy.\nvar handler = {}\nvar proxy = new Proxy(target, handler)\n\n// Proxy works as a simple pass-through to the target.\nproxy.foo = 'Mr.Foo'\n\nconsole.log(target.foo) // 'Mr.Foo'\nconsole.log(target.bar) // undefined\n```\n\n#### Traps\nTraps allow us to intercept interactions on target, as long as those interactions happen through the Proxy.\n\n```js\n// Let's define a Trap on the handler.get().\nvar handler = {\n    // The handler.get() method is a trap for getting a property value.\n    get: function (target, property, receiver) {\n        // We run our Trap code, i.e. console.log.\n        console.log(`Got property ${property}`)\n        // Then return the value as .get() will usually do.\n        return target[property]\n    }\n}\nvar target = { foo: 'Mr.Foo' }\nvar proxy = new Proxy(target, handler)\n\nconsole.log(proxy.foo)\n// 'Got property foo'\n// 'Mr.Foo'\n```\n\n#### Revoke\nRevocable proxies are the same as Proxies, with the difference that they can be revoke.\n\n```js\nvar target = {}\nvar handler = {}\nvar { proxy, revoke } = Proxy.revocable(target, handler)\n\nproxy.foo = 'Mr.Foo'\nconsole.log(proxy) // { foo: 'Mr.Foo' }\n\n// By revoking a Proxy we disable any operations on the Proxy.\n// After revoking, any operations on the Proxy will throw an error.\nrevoke()\n\nproxy.foo // TypeError: Cannot perform 'get' on a proxy that has been revoked\n```\n\n### Further Reading\n* [MDN - Proxy](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Proxy)\n* [ExploringJS - Metaprogramming with proxies](http://exploringjs.com/es6/ch_proxies.html#sec_overview-proxies)\n* [PonyFoo - ES6 Proxies in Depth](https://ponyfoo.com/articles/es6-proxies-in-depth)\n\n## Number\n\n`Number` is the same Javascript object that words as a wrapper of a numeric value. However, with ECMAScript 6 there's a couple of new things.\n\n### Examples\n```js\n// Binary Literals.\n// 0b prefix for binary literals.\nconsole.log(0b001) // 1\nconsole.log(0b010) // 2\n\n// Octal Literals.\n// 0o prefix for octal literals.\nconsole.log(0o001) // 1\nconsole.log(0o010) // 8\n\n// .isNaN()\n// Determines if the provided value is NaN and its type is Number.\nNumber.isNaN(NaN)       // true\nNumber.isNaN(0/0)       // true\nNumber.isNaN('a' * 'b') // true\n\nNumber.isNaN(1)         // false\nNumber.isNaN('foo')     // false\nNumber.isNaN(undefined) // false\n\n// .isFinite()\n// Determines if the provided value is a finite number.\nNumber.isFinite(Infinity)   // false\nNumber.isFinite(-Infinity)  // false\nNumber.isFinite(NaN)        // false\n\nNumber.isFinite(0)      // true\nNumber.isFinite(0b001)  // true\nNumber.isFinite(0o001)  // true\n\nNumber.isFinite('0')    // false, would be true with global isFinite('0')\nNumber.isFinite(null)   // false, would be true with global isFinite(null)\n\n// .parseInt()\n// Parses a String to an integer in the specified radix.\n// Has exactly the same functionality as the global parseInt().\nNumber.parseInt('10', 2)  // 2\nNumber.parseInt('10', 8)  // 8\nNumber.parseInt('10', 10) // 10\n\n// .parseFloat()\n// As for parseInt, Number.parseFloat() has exactly the same\n// functionality as the global parseFloat().\n\n// .isInteger()\n// Determines if the provided value is a finite number\n// without a decimal part.\nNumber.isInteger(Infinity)  // false\nNumber.isInteger(-Infinity) // false\nNumber.isInteger(NaN)       // false\nNumber.isInteger(undefined) // false\nNumber.isInteger(null)      // false\n\nNumber.isInteger(0)     // true\nNumber.isInteger(2.75)  // false\nNumber.isInteger(-5)    // true\n\nNumber.EPSILON\n// Which represents the smallest positive value.\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON\n\nNumber.MAX_SAFE_INTEGER\n// Which represents the largest integer that\n// can be safely and precisely represented in JavaScript.\n\nNumber.MIN_SAFE_INTEGER\n// Which represents the smallest integer that\n// can be safely and precisely represented in JavaScript.\n\nNumber.isSafeInteger\n// Returns true for any integer between\n// [MIN_SAFE_INTEGER, MAX_SAFE_INTEGER].\n```\n\n### Further Reading\n* [MDN - Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)\n* [PonyFoo - ES6 Number Improvements in Depth](https://ponyfoo.com/articles/es6-number-improvements-in-depth)\n\n## Array\n\nWith ES6 `Arrays` have now a couple of new methods. We will explore those in the example bellow.\n\n### Examples\n```js\n// .from()\n// Creates a new Array from an array-like or iterable object.\nvar foo = ['f', 'o', 'o']\nArray.from(foo)   // ['f', 'o', 'o']\nArray.from('foo') // ['f', 'o', 'o']\n\n// .of()\n// Create a new Array from a variable number of arguments.\nArray.of(3) // [3]\n// Which differs from:\nArray(3) // [ , , ]\n\nArray.of(3, 'foo', {}) // [ 3, 'foo', {} ]\n// Which is equal to:\nArray(3, 'foo', {}) // [ 3, 'foo', {} ]\n\n// .copyWithin(target, start, end)\n// Copies part of an array (start-end)\n// to another location (target) in the same array.\nArray(1, 2, 3, 4).copyWithin(2)        // [ 1, 2, 1, 2 ]\nArray(1, 2, 3, 4).copyWithin(2, 1)     // [ 1, 2, 2, 3 ]\nArray(1, 2, 3, 4).copyWithin(2, 0, 1)  // [ 1, 2, 1, 4 ]\n\n// .fill(value, start, end)\n// Fills all elements in the array (start-end)\n// with the provided value.\nArray(3).fill('foo')        // [ 'foo', 'foo', 'foo' ]\nArray(3).fill('foo', 1)     // [ , 'foo', 'foo' ]\nArray(3).fill('foo', 1, 2)  // [ , 'foo',  ]\n\n// .find(callback)\n// Returns the first element in the array\n// that satisfies the condition.\nfunction isEven(value) {\n    return value % 2 === 0\n}\n\nArray(1,2,3,4).find(isEven) // 2\n\n// .findIndex(callback)\n// Returns the index of the first element in the array\n// that satisfies the condition.\nArray(1,2,3,4).findIndex(isEven) // 1 \u003c- index of element 2\n```\n\n#### Iterators\n```js\n// .keys()\n// Returns a new Array Iterator that contains the keys\n// for each index in the array.\nvar iterator = [ 'foo', 'bar', 'zed' ].keys()\nconsole.log(iterator.next().value) // 0\nconsole.log(iterator.next().value) // 1\nconsole.log(iterator.next().value) // 2\n\n// .values()\n// Returns a new Array Iterator that contains the values\n// for each index in the array.\nvar iterator = [ 'foo', 'bar', 'zed' ].values()\nconsole.log(iterator.next().value) // 'foo'\nconsole.log(iterator.next().value) // 'bar'\nconsole.log(iterator.next().value) // 'zed'\n\n// .entries()\n// Returns a new Array Iterator that contains the pairs\n// [ key, value ] for each index in the array.\nvar iterator = [ 'foo', 'bar', 'zed' ].entries()\nconsole.log(iterator.next().value) // [ 0, 'foo' ]\nconsole.log(iterator.next().value) // [ 1, 'bar' ]\nconsole.log(iterator.next().value) // [ 2, 'zed' ]\n```\n\n### Further Reading\n* [ExploringJS - New Array features](http://exploringjs.com/es6/ch_arrays.html)\n* [PonyFoo - ES6 Array Extensions in Depth](https://ponyfoo.com/articles/es6-array-extensions-in-depth)\n\n## Object\n\nThere were a couple of changes in JavaScript `Objects`, mainly:\n* **Object.assign** -  Copies the values of all enumerable properties from on or more source objects to the target and returns the target's object reference.\n* **Object.is** - Determines if two objects are the same.\n* **Object.getOwnPropertySymbols** - Returns an array with all the properties that are symbols.\n* **Object.setPrototypeOf** - Sets the prototype of the specified object to another prototype.\n\n### Example\n```js\n// .assign(target, ...sources)\nObject.assign({}, { foo: 'Mr.Foo' }, { bar: 'Mr.Bar' }) // { foo: 'Mr.Foo', bar: 'Mr.Bar' }\nObject.assign({ foo: 'Mr.Foo' }, { foo: 'Foo' })        // { foo: 'Foo' }\n\n// .is(value1, value2)\nObject.is([], [])  // false\nObject.is({}, {})  // false\nObject.is(0, -0)   // false\n\nObject.is('foo', 'foo') // true\nObject.is(null, null)   // true\n\n// .getOwnPropertySymbols(obj)\nvar objectSymbols = Object.getOwnPropertySymbols({\n    [Symbol('foo')]: 'Mr.Foo',\n    [Symbol('bar')]: 'Mr.Bar'\n}) // [ Symbol(foo), Symbol(bar) ]\n\nconsole.log(objectSymbols.length) // 2\nconsole.log(objectSymbols[0])     // Symbol(foo)\n\n// .setPrototypeOf(obj, prototype)\nvar foo = {}\nObject.setPrototypeOf(foo, null)\nconsole.log(Object.getPrototypeOf(foo)) // null\n```\n\n### Further Reading\n* [PonyFoo - ES6 Object Changes in Depth](https://ponyfoo.com/articles/es6-object-changes-in-depth)\n\n## Strings\n\nAs for Object, `Strings` have had some updates.\n\n### Examples\n\n#### String Manipulation\n```js\n// .startsWith(searchString[, position])\n// Determines if a string beings with the specified characters\n// at the specific position.\n'foo \u0026 bar'.startsWith('foo')    // true\n'foo \u0026 bar'.startsWith('bar')    // false\n'foo \u0026 bar'.startsWith('bar', 6) // true\n\n// .endsWith(searchString[, position])\n// Determines if a string ends with the specified characters\n// at the specific position.\n'foo \u0026 bar'.endsWith('bar')    // true\n'foo \u0026 bar'.endsWith('foo')    // false\n'foo \u0026 bar'.endsWith('foo', 3) // true\n\n// .includes(searchString[, position])\n// Determines if a string can be founds within another string.\n'Mr.foo'.includes('foo')   // true\n'Mr.foo'.includes('bar')   // false\n'Mr.foo'.includes('Mr', 2) // false\n\n// .repeat(count)\n// Returns a new string containing the specified\n// number (count) of copies.\n'foo'.repeat(2) // 'foofoo'\n\n// [Symbol.iterator]\n// Returns a new Iterator object that iterates over\n// each code character or its code point representation.\nvar iterator = 'ABC'[Symbol.iterator]()\n\nconsole.log(iterator.next().value); // 'A'\nconsole.log(iterator.next().value); // 'B'\nconsole.log(iterator.next().value); // 'C'\n\nvar iterator = 'A\\uD835\\uDC68B\\uD835\\uDC69C\\uD835\\uDC6A'[Symbol.iterator]()\n\nconsole.log(iterator.next().value); // 'A'\nconsole.log(iterator.next().value); // '\\uD835\\uDC68'\nconsole.log(iterator.next().value); // 'B'\n```\n\n#### Unicode\n```js\n// .codePointAt(position)\n// Returns the unicode of the character at the specified position.\n'Foo'.codePointAt(0) // 70\n\n// .fromCodePoint(num1[, ...[, numN]])\n// Returns the string created by the specified\n// sequence of code points.\nString.fromCodePoint(70, 111, 111) // 'Foo'\n\n// .normalize([form])\n// Returns a Unicode Normalization Form of a give string.\n// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/normalize\n```\n\n### Further Reading\n* [ExploringJS - New string features](http://exploringjs.com/es6/ch_strings.html)\n* [PonyFoo - ES6 Strings (and Unicode, ❤) in Depth](https://ponyfoo.com/articles/es6-strings-and-unicode-in-depth)\n\n## Modules\n\n`Modules` is the JavaScript standard module system strongly influenced by CommonJS. With ES6 modules we now have the terminology of `export` and `import` which we will explored in the examples bellow.\n\n### Examples\n\n#### Export\n```js\n// Default export\nexport default 'foo'\nexport default NaN\nexport default { foo: 'Mr.Foo' }\nexport default () =\u003e 'Mr.Foo'\n\n// Naming export\nexport var foo = 'Mr.Foo'\n\nvar foo = 'Mr.Foo'\nvar bar = 'Mr.Bar'\nexport { foo, bar }\n\nvar foo = 'Mr.Foo'\nexport { foo as myFoo }\n\n// Default export with naming\nvar api = {\n    foo: 'Mr.Foo',\n    bar: 'Mr.Bar'\n}\nexport default api\n```\n\n#### Import\n```js\n// Default import\n// export default 'foo'\nimport * from '_moduleName_'\n\n// Naming import\n// export var foo = 'Mr.Foo'\nimport { foo } from '_moduleName_'\n\n// export { foo: 'Mr.Foo', bar: 'Mr.Bar' }\nimport { foo, bar } from '_moduleName_'\n\n// export { foo as myFoo }\nimport { myFoo } from '_moduleName_'\n```\n\n### Further Reading\n* [ExploringJS - Modules](http://exploringjs.com/es6/ch_modules.html)\n* [PonyFoo - ES6 Modules in Depth](https://ponyfoo.com/articles/es6-modules-in-depth)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fferreiratiago%2Fes6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fferreiratiago%2Fes6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fferreiratiago%2Fes6/lists"}