{"id":18485672,"url":"https://github.com/ivanovx/js-docs","last_synced_at":"2025-05-13T21:34:55.649Z","repository":{"id":85931950,"uuid":"82089986","full_name":"ivanovx/js-docs","owner":"ivanovx","description":"JavaScript Next features and their demos","archived":false,"fork":false,"pushed_at":"2017-02-21T11:51:25.000Z","size":342,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-12T13:08:18.598Z","etag":null,"topics":["dynamic","ecmascript","ecmascript6","es2015","es6","iterator","javascript","promise","proxies","spread","string-interpolation","unicode","weakmap","weakset"],"latest_commit_sha":null,"homepage":"https://csyntax.github.io/js-docs","language":"CSS","has_issues":false,"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/ivanovx.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-15T18:01:00.000Z","updated_at":"2023-04-11T15:19:57.000Z","dependencies_parsed_at":"2023-05-03T15:33:08.097Z","dependency_job_id":null,"html_url":"https://github.com/ivanovx/js-docs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivanovx%2Fjs-docs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivanovx%2Fjs-docs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivanovx%2Fjs-docs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivanovx%2Fjs-docs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivanovx","download_url":"https://codeload.github.com/ivanovx/js-docs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254031703,"owners_count":22002808,"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":["dynamic","ecmascript","ecmascript6","es2015","es6","iterator","javascript","promise","proxies","spread","string-interpolation","unicode","weakmap","weakset"],"created_at":"2024-11-06T12:45:58.220Z","updated_at":"2025-05-13T21:34:55.558Z","avatar_url":"https://github.com/ivanovx.png","language":"CSS","readme":"## Arrow Functions\nA short hand notation for `function()`, but it does not bind `this`.\n\n```javascript\nlet evens = [1,2,3,4,5,6,7,8,9];\nlet fives = [];\nlet odds = evens.map(v =\u003e v + 1);\nlet nums = evens.map((v, i) =\u003e v + i);\nlet pairs = evens.map(v =\u003e ({\n    even: v,\n    odd: v + 1\n}));\n\nnums.forEach(v =\u003e {\n    if (v % 5 === 0)  {\n        fives.push(v);\n    }    \n});\n\nconsole.log(odds);\nconsole.log(nums);\n```\n\nHow does `this` work?\n\n```javascript\nlet obj = {\n    name: \"Name\",\n    arrowGetName: () =\u003e this.name,\n    regularGetName: function () {\n        return this.name\n    },\n    arrowGetThis: () =\u003e this,\n    regularGetThis: function () {\n        return this\n    }\n};\n\nconsole.log(this.name);\nconsole.log(obj.arrowGetName());\nconsole.log(obj.arrowGetThis());\nconsole.log(this);\nconsole.log(obj.regularGetName());\nconsole.log(obj.regularGetThis());\n```\n\n## Classes\nAs we know them from \"real\" languages. Syntactic sugar on top of prototype-inheritence.\n\n```javascript\nclass Person {\n    constructor(name, age) {\n        this.name = name;\n        this.age = age;\n    }\n}\n\nconsole.log(new Person(\"Ivan Ivanov\", 19));\n```\n\n## Enhanced Object Literals\n\n```javascript\nvar theProtoObj = {\n    toString: function() {\n        return \"The prototype toString\";\n    }\n}\n\nvar handler = () =\u003e \"handler\";\n\nvar obj = {\n    // __proto__\n    __proto__: theProtoObj,\n\n    // Shorthand for ‘handler: handler’\n    handler,\n\n    // Methods\n    toString() {\n         // Super calls\n         return \"d \" + super.toString();\n    },\n\n    // Computed (dynamic) property names\n    [ \"prop_\" + (() =\u003e 42)() ]: 42\n};\n\nconsole.log(obj.handler);\nconsole.log(obj.handler());\nconsole.log(obj.toString());\nconsole.log(obj.prop_42);\n```\n\n## String interpolation\nNice syntax for string interpolation\n\n```javascript\nvar name = \"Ivan Ivanov\";\nvar time = \"today\";\n\nvar multiLine = `This\n\nLine\n\nSpans Multiple\n\nLines`\n\nconsole.log(`Hello ${name},how are you ${time}?`);\nconsole.log(multiLine);\n```\n\n## Destructuring\n\n```javascript\nvar [a, ,b] = [1, 2, 3];\n\nconsole.log(a);\nconsole.log(b);\n```\n\nObjects can be destructured as well.\n\n```javascript\nvar nodes = () =\u003e {\n    return { op: \"a\", lhs: \"b\", rhs: \"c\" };\n};\n\nvar { op: a, lhs: b, rhs: c } = nodes();\n\nconsole.log(a);\nconsole.log(b);\nconsole.log(c);\n```\n\nUsing Shorthand notation.\n\n```javascript\nvar nodes = () =\u003e {\n    return { lhs: \"a\", op: \"b\", rhs: \"c\" };\n};\n\n// binds `op`, `lhs` and `rhs` in scope\nvar { op, lhs, rhs } = nodes();\n\nconsole.log(op);\nconsole.log(lhs);\nconsole.log(rhs);\n```\n\nCan be used in parameter position\n\n```javascript\nfunction g({ name: x }) {\n    return x;\n}\n\nfunction m({ name }) {\n    return name;\n}\n\nconsole.log(g({name: 5}));\nconsole.log(m({name: 5}));\n```\n\nFail-soft destructuring\n\n```javascript\nvar [a] = [];\nvar [b = 1] = [];\nvar c = [];\n\nconsole.log(a);\nconsole.log(b);\nconsole.log(c);\n```\n\n## Default\n```javascript\nfunction f(x, y = 12) {\n    return x + y;\n}\n\nconsole.log(f(3));\n```\n\n## Spread\n\n* In functions\n\n```javascript\nfunction f(x, y, z) {\n    return x + y + z;\n}\n\nconsole.log(f(...[1,2,3]));\n```\n\n* In arrays\n\n```javascript\nvar parts = [\"shoulders\", \"knees\"];\nvar lyrics = [\"head\", ...parts, \"and\", \"toes\"];\n\nconsole.log(lyrics);\n```\n\n## Spread + Object Literals\nWe can do cool stuff with this in object creations.\n\n```javascript\nlet { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };\n\nconsole.log(x);\nconsole.log(y);\nconsole.log(z);\n\nlet n = { x, y, ...z };\nconsole.log(n);\nconsole.log(obj);\n```\n\nSadly it is not support yet `npm install --save-dev babel-plugin-transform-object-rest-spread`\n\n## Rest\nWe can allow unlimited params to function by using the rest operator.\n\n```javascript\nfunction demo(part1, ...part2) {\n\treturn { part1, part2 }\n}\n\nconsole.log(demo(1,2,3,4,5,6).part1);\nconsole.log(demo(1,2,3,4,5,6).part2);\n```\n\n## Let\n`let` is the new `var`. As it has \"sane\" bindings.\n\n```javascript\n{\n   var globalVar = \"from demo1\"\n}\n\n{\n   let globalLet = \"from demo2\";\n}\n\nconsole.log(globalVar);\nconsole.log(globalLet);\n```\n\nHowever, it does not assign anything to `window`\n\n```javascript\nlet me = \"go\";  // globally scoped\nvar i = \"able\"; // globally scoped\n\nconsole.log(window.me);\nconsole.log(window.i);\n```\n\nIt is not possible to redeclare a variable using `let`\n\n```javascript\nlet me = \"foo\";\nlet me = \"bar\";\n\nconsole.log(me);\n```\n\n```javascript\nvar me = \"foo\";\nvar me = \"bar\";\n\nconsole.log(me);\n```\n\n## Const\n`const` is for read only variables\n\n```javascript\nconst a = \"b\";\n\na = \"a\";\n\nconsole.log(a);\n```\n\nIt should be noted that `const` objects can still be mutated.\n\n```javascript\nconst a = { a: \"a\" };\n\na.a = \"b\";\n\nconsole.log(a);\nconsole.log(a.a);\n```\n\n## for..of\nNew type of iterators with an alternative to the `for..in`. It returns the value instead of the `keys`.\n\n```javascript\nlet list = [1, 2, 3];\n\nconsole.log(list);\n\nfor (let i in list) {\n   console.log(i);\n}\n```\n\n```javascript\nlet list = [1, 2, 3];\n\nconsole.log(list);\n\nfor (let i of list) {\n   console.log(i);\n}\n```\n\n### Iterators\nThe iterator is a more dynamic type than arrays.\n\n```javascript\nlet infinite = {\n  [Symbol.iterator]() {\n    let c = 0;\n    return {\n      next() {\n        c++;\n        return { done: false, value: c }\n      }\n    }\n  }\n}\n\nconsole.log(\"start\");\n\nfor (var n of infinite) {\n  // truncate the sequence at 1000\n  if (n \u003e 10)\n    break;\n  console.log(n);\n}\n```\n\n### Generators\nGenerators create iterators, and are more dynamic than iterators.\nThey do not have to keep track of state in the same manner and does not support the concept of done.\n\n```javascript\nvar infinity = {\n    [Symbol.iterator]: function*() {\n        var c = 1;\n\n        for (;;) {   \n            yield c++;\n        }\n    }\n}\n\nconsole.log(\"start\");\n\nfor (var n of infinity) {\n    if (n \u003e 10) {\n        break;\n    }\n\n    console.log(n);\n}\n```\n\n* [function*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)\n* [Iterators and generator](https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Iterators_and_Generators)\n\nAn example of yield*\n\n```javascript\nfunction* anotherGenerator(i) {\n    yield i + 1;\n    yield i + 2;\n    yield i + 3;\n}\n\nfunction* generator(i) {\n    yield i;\n    yield* anotherGenerator(i);\n    yield i + 10;\n}\n\nvar gen = generator(10);\n\nconsole.log(gen.next().value);\nconsole.log(gen.next().value);\nconsole.log(gen.next().value);\nconsole.log(gen.next().value);\nconsole.log(gen.next().value);\n```\n\n## Unicode\nEcmaScript 6 provides better support for Unicode.\n\n```javascript\nvar regex = new RegExp(\"\\u{61}\", \"u\");\n\nconsole.log(regex.unicode);\nconsole.log(\"\\uD842\\uDFD7\");\nconsole.log(\"\\uD842\\uDFD7\".codePointAt());\n```\n\n## Modules \u0026 Module Loaders\nNative support for modules.\n\n```javascript\nimport defaultMember from \"module-name\";\nimport * as name from \"module-name\";\nimport { member } from \"module-name\";\nimport { member as alias } from \"module-name\";\nimport { member1 , member2 } from \"module-name\";\nimport { member1 , member2 as alias2 , [...] } from \"module-name\";\nimport defaultMember, { member [ , [...] ] } from \"module-name\";\nimport defaultMember, * as name from \"module-name\";\nimport \"module-name\";\n```\n\n```javascript\nexport { name1, name2, …, nameN };\nexport { variable1 as name1, variable2 as name2, …, nameN };\nexport let name1, name2, …, nameN; // also var\nexport let name1 = …, name2 = …, …, nameN; // also var, const\n\nexport expression;\nexport default expression;\nexport default function (…) { … } // also class, function*\nexport default function name1(…) { … } // also class, function*\nexport { name1 as default, … };\n\nexport * from …;\nexport { name1, name2, …, nameN } from …;\nexport { import1 as name1, import2 as name2, …, nameN } from …;\n```\n\n[Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)\n[Export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)\n\n## Set\nSets as in the mathematical counterpart where all items are unique.\nFor people who know `SQL` this is equivalent to `distinct`.\n\n```javascript\nvar set = new Set();\n\nset\n    .add(\"Potato\")\n    .add(\"Tomato\")\n    .add(\"Tomato\");\n\nconsole.log(set.size);\nconsole.log(set.has(\"Tomato\"));\n\nfor(var item of set) {\n    console.log(item);\n}\n```\n\n[Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)\n\n## WeakSet\nThe `WeakSet` object lets you store weakly held objects in a collection.\nObjects without an reference will be garbage collected.\n\n```javascript\nvar item = { a:\"Potato\" };\nvar set = new WeakSet();\n\nset\n    .add({ a:\"Potato\"})\n    .add(item)\n    .add({ a:\"Tomato\"})\n    .add({ a:\"Tomato\"});\n\nconsole.log(set.size);\nconsole.log(set.has({ a:\"Tomato\" }));\nconsole.log(set.has(item));\n\nfor(let item of set) {\n    console.log(item);\n}\n```\n\n[WeakSet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet)\n\n## Map\nMaps, also known as dictonaries.\n\n```javascript\nvar map = new Map();\n\nmap.set(\"Potato\", 12);\nmap.set(\"Tomato\", 34);\n\nconsole.log(map.get(\"Potato\"))\n\nfor (let item of map) {\n    console.log(item);\n}\n\nfor (let item in map) {\n    console.log(item);\n}\n```\n\nOther types than strings can be used.\n\n```javascript\nvar map = new Map();\nvar key = {a: \"a\"};\n\nmap.set(key, 12);\n\nconsole.log(map.get(key));\nconsole.log(map.get({a: \"a\"}));\n```\n\n[Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)\n\n## WeakMap\nUses objects for keys, and only keeps weak reference to the keys.\n\n```javascript\nvar wm = new WeakMap();\n\nvar o1 = {};\nvar o2 = {};\nvar o3 = {};\n\nwm.set(o1, 1);\nwm.set(o2, 2);\nwm.set(o3, { a: \"a\" });\nwm.set({}, 4);\n\nconsole.log(wm.get(o2));\nconsole.log(wm.has({}));\n\ndelete o2;\n\nconsole.log(wm.get(o3));\n\nfor(let item in wm) {\n   console.log(item);\n}\n\nfor(let item of wm) {\n   console.log(item);\n}\n```\n\n[WeakMap](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)\n\n## Proxies\nProxies can be used to alter objects behavoir. It allows us to define traps.\n\n```javascript\nvar obj = function ProfanityGenerator() {\n    return {\n       words: \"Horrible words\"    \n    }\n}();\n\nvar handler = function CensoringHandler() {\n    return {\n        get: function (target, key) {\n            return target[key].replace(\"Horrible\", \"Nice\");\n        },\n    }\n}();\n\nvar proxy = new Proxy(obj, handler);\n\nconsole.log(proxy.words);\n```\n\n[Proxies](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Proxy)\n\n## Symbols\nSymbols are a new type. Can be used to create anomymous properties.\n\n```javascript\nvar typeSymbol = Symbol(\"type\");\n\nclass Pet {\n    constructor(type) {\n        this[typeSymbol] = type;\n    }\n\n    getType() {\n        return this[typeSymbol];\n    }\n}\n\nvar a = new Pet(\"dog\");\n\nconsole.log(a.getType());\nconsole.log(Object.getOwnPropertyNames(a));\nconsole.log(Symbol(\"a\") === Symbol(\"a\"));\n```\n\n[More info](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)\n\n## Inheritable Built-ins\nWe can now inherit from native classes.\n\n```javascript\nclass CustomArray extends Array {\n\n}\n\nvar a = new CustomArray();\n\na[0] = 2;\nconsole.log(a[0]);\n```\n\nIt is not possible to override the getter function without using Proxies of arrays.\n\n## New Library\nVarious new methods and constants.\n\n```javascript\nconsole.log(Number.EPSILON);\nconsole.log(Number.isInteger(Infinity));\nconsole.log(Number.isNaN(\"NaN\"));\n\nconsole.log(Math.acosh(3));\nconsole.log(Math.hypot(3, 4));\nconsole.log(Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2));\n\nconsole.log(\"abcde\".includes(\"cd\"));\nconsole.log(\"abc\".repeat(3));\n\nconsole.log(Array.of(1, 2, 3));\nconsole.log([0, 0, 0].fill(7, 1));\nconsole.log([1, 2, 3].find(x =\u003e x == 3));\nconsole.log([1, 2, 3].findIndex(x =\u003e x == 2));\nconsole.log([1, 2, 3, 4, 5].copyWithin(3, 0));\nconsole.log([\"a\", \"b\", \"c\"].entries());\nconsole.log([\"a\", \"b\", \"c\"].keys());\nconsole.log([\"a\", \"b\", \"c\"].values());\n\nconsole.log(Object.assign({}, {\n    origin: new Point(0, 0)\n}));\n```\n\n*Documentation:*\n[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), [Math](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math), [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from), [Array.of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of), [Array.prototype.copyWithin](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin), [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)\n\n## Binary and Octal\nLiterals for binary and octal numbering.\n\n```javascript\nconsole.log(0b11111);\nconsole.log(0o2342);\nconsole.log(0xff); // also in es5\n```\n\n## Promises\nThe bread and butter for async programing.\n\n```javascript\nvar p1 = new Promise((resolve, reject) =\u003e {\n    setTimeout(() =\u003e resolve(\"1\"), 101);\n});\n\nvar p2 = new Promise((resolve, reject) =\u003e {\n    setTimeout(() =\u003e resolve(\"2\"), 100);\n});\n\nPromise.race([p1, p2]).then((res) =\u003e {\n    console.log(res);\n});\n\nPromise.all([p1, p2]).then((res) =\u003e {\n    console.log(res);\n});\n```\n\n### Quick Promise\nNeed a quick always resolved promise?\n\n```javascript\nvar p1 = Promise.resolve(\"1\");\nvar p2 = Promise.reject(\"2\");\n\nPromise.race([p1, p2]).then((res) =\u003e {\n    console.log(res);\n});\n```\n\n### Fail fast\nIf a promise fails `all` and `race` will reject as well.\n\n```javascript\nvar p1 = new Promise((resolve, reject) =\u003e {\n    setTimeout(() =\u003e resolve(\"1\"), 1001);\n});\n\nvar p2 = new Promise((resolve, reject) =\u003e {\n    setTimeout(() =\u003e reject(\"2\"), 1);\n});\n\nPromise.race([p1, p2]).then((res) =\u003e {\n    console.log(\"success\" + res);\n}, res =\u003e {\n    console.log(\"error \" + res);\n});\n\nPromise.all([p1, p2]).then((res) =\u003e {\n    console.log(\"success\" + res);\n}, res =\u003e {\n    console.log(\"error \" + res);\n});\n```\n\n[More Info](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)\n\n## Reflect\nNew type of meta programming with new API for existing and also few new methods.\n\n```javascript\nvar z = { w: \"Super Hello\" };\nvar y = { x: \"hello\", __proto__: z };\n\nconsole.log(Reflect.getOwnPropertyDescriptor(y, \"x\"));\nconsole.log(Reflect.has(y, \"w\"));\nconsole.log(Reflect.ownKeys(y, \"w\"));\nconsole.log(Reflect.has(y, \"x\"));\nconsole.log(Reflect.deleteProperty(y, \"x\"));\nconsole.log(Reflect.has(y, \"x\"));\n```\n\n## Tail Call Optimization\nEcmaScript 6 should fix ensure tail calls does not generate stack overflow. (Not all implementations work).\n\n```javascript\nfunction factorial(n, acc = 1) {\n    if (n \u003c= 1) {\n        return acc;\n    }\n\n    return factorial(n - 1, n * acc);\n}\n\nconsole.log(factorial(10));\nconsole.log(factorial(100));\nconsole.log(factorial(1000));\nconsole.log(factorial(10000));\nconsole.log(factorial(100000));\nconsole.log(factorial(1000000));\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivanovx%2Fjs-docs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivanovx%2Fjs-docs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivanovx%2Fjs-docs/lists"}