{"id":16167101,"url":"https://github.com/timroes/es2015-introduction","last_synced_at":"2025-11-12T22:03:52.930Z","repository":{"id":142510789,"uuid":"89287372","full_name":"timroes/es2015-introduction","owner":"timroes","description":"A short summary about ECMAScript 2015 syntax.","archived":false,"fork":false,"pushed_at":"2017-04-24T21:12:24.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-25T20:04:12.437Z","etag":null,"topics":["es2015","es6","javascript"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timroes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-24T21:09:43.000Z","updated_at":"2023-04-11T15:20:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"7e96e97b-20a4-4562-9a05-6320aaafad22","html_url":"https://github.com/timroes/es2015-introduction","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"dcf50c4a060e49b4c662dd2baa5c28600a6af994"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/timroes/es2015-introduction","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timroes%2Fes2015-introduction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timroes%2Fes2015-introduction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timroes%2Fes2015-introduction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timroes%2Fes2015-introduction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timroes","download_url":"https://codeload.github.com/timroes/es2015-introduction/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timroes%2Fes2015-introduction/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265424335,"owners_count":23762880,"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":["es2015","es6","javascript"],"created_at":"2024-10-10T03:06:05.265Z","updated_at":"2025-11-12T22:03:52.848Z","avatar_url":"https://github.com/timroes.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"const, let, var\n---------------\n\n`const` defines a constant, which value can't be changed\n\n```js\nconst name = \"Jonas\";\n// The following would throw an error:\n//name = 42;\n```\n\n`let` defines changeable variables.\n\n```js\nlet counter = 0;\ncounter = 42;\n```\n\nIn contrast to `var`, `let` is block scoped.\n\n```js\n{\n  let invisible = true;\n}\n// The following would throw an error, because the variable is not defined:\n//console.log(invisible);\n```\n\nWhereas the same with `var` would work, since var is scoped\nto the next enclosing function.\n\n```js\n{\n  var visible = true;\n}\nconsole.log(visible); // -\u003e true\n```\n\nString literals\n---------------\n\nBesides single (') and double quotes (\"), ES2016 introduced\ntemplate strings via backtick quotes (`).\n\nTemplate strings can directly contain variables:\n\n```js\nconst name = 'Douglas';\nconsole.log(`Hello ${name}.`);\n```\n\nTemplate strings can also include newlines:\n\n```js\nconst truth = `No nasty\nstring concatenation\nanymore.`;\n```\n\nArrow functions\n---------------\n\nArrow functions are a slightly shorter syntax\nto declare unnamed functions. the following two\nsnippets are equal:\n\n```js\nconst square = function(x) {\n  return x * x;\n};\nconst squareWithArrowFunction = (x) =\u003e {\n  return x * x;\n};\n```\n\nBesides a shorter syntax, they have a few\ndifferences in their behvior.\n\nInside an arrow function `this` will always be the\nsame `this` as outside the function. This isn't\ntrue for the old function syntax?\n\n```js\nconst self = this;\nconst func = () =\u003e {\n  assert(this === self); // -\u003e always true\n};\n```\n\nThere is an even shorter syntax, if the arrow\nfunction consists of just one statement and the\nresult of that statement should be returned.\nIn this case you can skip the curly braces:\n\n```js\nconst square = (x) =\u003e x * x;\n```\n\nIf the value you want to return is an object\nliteral you have to put parantheses around\nthe statement, so the curly braces won't be\nmistaken for the function block:\n\n```js\nconst getUser = () =\u003e ({ name: 'Max', age: 42 });\n```\n\nDefault Parameters\n------------------\n\nA function (or arrow function) can specify default\nvalues for several parameters.\n\n```js\nfunction multiply(x, y = 2) {\n  return x * y;\n}\n```\n\nIf you now leave the parameter undefined or pass\n`undefined` for the second parameter, it will now\nhave the value 2.\n\nEnhanced Object Literals\n------------------------\n\nObject literals have a shorter syntax for some\ncommon tasks.\n\nYou can set variables to the key with the same\nname in a shorter way now:\n\n```js\nconst name = 'Mustermann';\nconst firstName = 'Max';\n// previously:\nconst person = {\n  name: name,\n  firstName: firstName\n};\n// now:\nconst person2 = {\n  name, firstName\n};\n```\n\nTo attach an inline function to an object you\ncan now use a shorter syntax:\n\n```js\n// previously:\nconst obj = {\n  toString: function() {\n  // ...\n  }\n};\n// now:\nconst obj = {\n  toString() {\n  // ...\n  }\n};\n```\n\nThere is also support for calculating the key\nof an entry from a variable by using squared\nbrackets:\n\n```js\nconst obj = {\n  [someVar + '42']: '...'\n};\n```\n\nDestructuring\n-------------\n\nYou can now easily destruct an array or object\ninto several variables with the new destructuring\nsyntax:\n\n```js\nconst [x, y] = [1, 2];\n// x == 1, y == 2\n```\n\nIf you are not interested in some parts of the\narray:\n\n```js\nconst [x,,z] = [1, 2, 3, 4];\n// x == 1, z == 3\n```\n\nDestructuring works also on objects:\n\n```js\nconst props = {\n  name: 'Max Mustermann',\n  age: 42\n};\nconst { name } = props;\n// name == 'Max Mustermann'\n```\n\nIf you want to use a different name for the variable\nthan the key name, you can set it directly during\ndestructuring.\n\n```js\n// const props as above\nconst { name, age: a } = props;\n// name == 'Max Mustermann', a == 42\n```\n\nKlassen\n-------\n\nES2015 introduced a new syntax to define classes, that\nis more similar to the syntax other coding languages\nuse.\n\n```js\nclass Person {\n\n  // The constructor has always the name constructor\n  constructor(name) {\n    this.age = 0;\n    this.name = name;\n  }\n\n  printAge() {\n    console.log(this.age);\n  }\n\n}\n\nconst p = new Person('Max Mustermann');\np.printAge();\n```\n\nClasses support inheritance with a simple unified syntax:\n\n```js\nclass Client extends Person {\n  constructor(name, address) {\n    super(name);\n    this.address = address;\n  }\n}\n```\n\nimport \u0026 export\n---------------\n\nA new and more complex import and export syntax became available with ES2015.\n\nTo export a something (variable, function, object, ...) from a file, use `export`:\n\n```js\nfunction multiply(x, y) { /* ... */ }\n\n// Export an already existing object\nexport {multiply};\n// export an inline defined object\nexport const PI_ROUNDED = 3;\n```\n\nThis is a named export, exporting the object under its name. You can also change\nthe name that is used for exporting.\n\n```js\nfunction add(x, y) { /* .. */ }\nfunction multiply(x, y) { /* .. */ }\nexport {add as sum, multiply as mul};\n```\n\nEach file can have one default export, for the \"default\" object one might wish\nto import from that file. That object doesn't need to have a name - e.g. can be\nan inline function - but can have a name, even though it won't be used in the export.\n\n```js\nexport default function() {\n\n}\n```\n\nTo import from a file, you can use the syntax:\n\n```js\n// Using the name of a package to import from node_modules\nimport React from 'react';\n// Using a file path will look up relative to the current file\nimport Client from './api/client.js';\n```\n\nImporting named members is using the curly braces syntax similar to\nthe export of it:\n\n```js\nimport {add, multiply} from './math.js';\n```\n\nYou can also specify a different name while importing:\n\n```js\nimport {add as sum, multiply} from './math.js';\n```\n\nTo import all exported members (named and default) from a module,\nuse the following syntax:\n\n```js\nimport * as math from './math.js';\n// math.add and math.multiply will be the named exports\n// math.default will give access to the default export\n```\n\nYou can also re-export the members of a module completely\nor just specific named members - and optionally rename them:\n\n```js\nexport * from './math.js';\nexport {sinus as sin, cosinus} from './advancedMath.js';\n```\n\n\nPromises\n--------\n\nA complete introductin to promises can be found at\n[developers.google.com](https://developers.google.com/web/fundamentals/getting-started/primers/promises).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimroes%2Fes2015-introduction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimroes%2Fes2015-introduction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimroes%2Fes2015-introduction/lists"}