├── .babelrc ├── .browserslistrc ├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .prettierignore ├── .prettierrc.json ├── .vscode ├── settings.json └── tasks.json ├── copyright ├── delete-node_modules-all.bat ├── delete-node_modules-all.sh ├── intl └── readme.md ├── jsconfig.json ├── license ├── package.json ├── queries ├── find.html ├── find.js ├── findLast.html └── findLast.js ├── readme.md ├── resources ├── external │ ├── prism.css │ └── prism.js ├── icons.css ├── oblicum-es-2015.css ├── oblicum-es-2016.css ├── oblicum-es-2017.css ├── oblicum-es-2018.css ├── oblicum-es-2019.css ├── oblicum-es-2020.css ├── oblicum-es-2021.css ├── oblicum-es-2022.css ├── oblicum-es-20XX.css ├── oblicum-logo.svg ├── oblicum-stage-1.css ├── oblicum-stage-2.css ├── oblicum-stage-3.css ├── oblicum.css └── prism-src.js ├── src-babel-issues └── 2015 │ ├── 94-html-style-comments.html │ └── 94-html-style-comments.js ├── src ├── 2015 │ ├── 01-const.html │ ├── 01-const.js │ ├── 02-let.html │ ├── 02-let.js │ ├── 03-default-parameters.html │ ├── 03-default-parameters.js │ ├── 04-array-rest-parameter.html │ ├── 04-array-rest-parameter.js │ ├── 05-array-spread-operator.html │ ├── 05-array-spread-operator.js │ ├── 06-array-rest-spread-operator.html │ ├── 06-array-rest-spread-operator.js │ ├── 07-destructuring-1-list-matching.html │ ├── 07-destructuring-1-list-matching.js │ ├── 07-destructuring-2-object-matching.html │ ├── 07-destructuring-2-object-matching.js │ ├── 07-destructuring-3-functions-arguments.html │ ├── 07-destructuring-3-functions-arguments.js │ ├── 07-destructuring-3-functions-return.html │ ├── 07-destructuring-3-functions-return.js │ ├── 07-destructuring-4-swap.html │ ├── 07-destructuring-4-swap.js │ ├── 07-destructuring-5-fail.html │ ├── 07-destructuring-5-fail.js │ ├── 10-arrows-default-parameters.html │ ├── 10-arrows-default-parameters.js │ ├── 10-arrows-rest-arguments.html │ ├── 10-arrows-rest-arguments.js │ ├── 10-arrows-return-object-literal.html │ ├── 10-arrows-return-object-literal.js │ ├── 10-arrows-this.html │ ├── 10-arrows-this.js │ ├── 10-arrows.html │ ├── 10-arrows.js │ ├── 20-object-literals.html │ ├── 20-object-literals.js │ ├── 21-classes-es5.html │ ├── 21-classes-es5.js │ ├── 21-classes-es6.html │ ├── 21-classes-es6.js │ ├── 22-proxy-function.html │ ├── 22-proxy-function.js │ ├── 22-proxy-object.html │ ├── 22-proxy-object.js │ ├── 30-iterators-for-of.html │ ├── 30-iterators-for-of.js │ ├── 31-1-generators-object.html │ ├── 31-1-generators-object.js │ ├── 31-2-generators-function.html │ ├── 31-2-generators-function.js │ ├── 32-generator-delegation.html │ ├── 32-generator-delegation.js │ ├── 40-promise-all.html │ ├── 40-promise-all.js │ ├── 40-promise-race.html │ ├── 40-promise-race.js │ ├── 40-promise.html │ ├── 40-promise.js │ ├── 50-unicode-firefox.html │ ├── 50-unicode-normalize-firefox.html │ ├── 50-unicode-normalize.html │ ├── 50-unicode-normalize.js │ ├── 50-unicode.html │ ├── 50-unicode.js │ ├── 60-1-named-direct-export.js │ ├── 60-1-named-direct-import.js │ ├── 60-1-named-direct.html │ ├── 60-2-named-indirect-export.js │ ├── 60-2-named-indirect-import.js │ ├── 60-2-named-indirect.html │ ├── 60-3-named-indirect-all.html │ ├── 60-3-named-indirect-import-all.js │ ├── 60-4-default-export.js │ ├── 60-4-default-import.js │ ├── 60-4-default.html │ ├── 60-5-api-import.html │ ├── 60-5-api-import.js │ ├── 71-subclass-array.html │ ├── 71-subclass-array.js │ ├── 72-reflection-api.html │ ├── 72-reflection-api.js │ ├── 73-tail-calls.html │ ├── 73-tail-calls.js │ ├── 80-map.html │ ├── 80-map.js │ ├── 81-set.html │ ├── 81-set.js │ ├── 90-1-template-literals.html │ ├── 90-1-template-literals.js │ ├── 90-2-tagged-template-literals.html │ ├── 90-2-tagged-template-literals.js │ ├── 91-number.html │ ├── 91-number.js │ ├── 92-symbol.html │ ├── 92-symbol.js │ ├── 93-object-assign.html │ └── 93-object-assign.js ├── 2016 │ ├── 01-exponential-operator.html │ ├── 01-exponential-operator.js │ ├── 02-array-includes.html │ ├── 02-array-includes.js │ ├── 03-destructuring-nested-rest-list-matching.html │ └── 03-destructuring-nested-rest-list-matching.js ├── 2017 │ ├── 01-trailing-function-commas.html │ ├── 01-trailing-function-commas.js │ ├── 02-object-entries.html │ ├── 02-object-entries.js │ ├── 03-object-values.html │ ├── 03-object-values.js │ ├── 04-string-padding.html │ ├── 04-string-padding.js │ ├── 05-async-await-named-function.js │ ├── 05-async-await-promise-all.js │ ├── 05-async-await.html │ └── 05-async-await.js ├── 2018 │ ├── 01-promise-finally-async-await.js │ ├── 01-promise-finally.html │ ├── 01-promise-finally.js │ ├── 02-object-rest-properties.html │ ├── 02-object-rest-properties.js │ ├── 03-object-spread-properties.html │ ├── 03-object-spread-properties.js │ ├── 04-async-iterators-for-of.html │ ├── 04-async-iterators-for-of.js │ ├── 05-1-async-generators-object.html │ ├── 05-1-async-generators-object.js │ ├── 05-2-async-generators-function.html │ └── 05-2-async-generators-function.js ├── 2019 │ ├── 01-optional-catch-binding.html │ ├── 01-optional-catch-binding.js │ ├── 02-1a-string-trimstart.html │ ├── 02-1a-string-trimstart.js │ ├── 02-1b-string-trimleft.html │ ├── 02-1b-string-trimleft.js │ ├── 02-2a-string-trimend.html │ ├── 02-2a-string-trimend.js │ ├── 02-2b-string-trimright.html │ ├── 02-2b-string-trimright.js │ ├── 03-1-array-flat.html │ ├── 03-1-array-flat.js │ ├── 04-object-fromentries.html │ └── 04-object-fromentries.js ├── 2020 │ ├── 01-1-dynamic-import-default.html │ ├── 01-1-dynamic-import-default.js │ ├── 01-1-dynamic-import-default_en.js │ ├── 01-1-dynamic-import-default_es.js │ ├── 01-2-dynamic-import-named.html │ ├── 01-2-dynamic-import-named.js │ ├── 01-2-dynamic-import-named_en.js │ ├── 01-2-dynamic-import-named_es.js │ ├── 02-promise-allSettled.html │ ├── 02-promise-allSettled.js │ ├── 03-intl-relativetimeformat.html │ ├── 03-intl-relativetimeformat.js │ ├── 04-optional-chaining-operator.html │ ├── 04-optional-chaining-operator.js │ ├── 05-nullish-coalescing.html │ ├── 05-nullish-coalescing.js │ ├── 06-bigint.html │ └── 06-bigint.js ├── 2021 │ ├── 01-string-replaceall.html │ ├── 01-string-replaceall.js │ ├── 02-promise-any.html │ ├── 02-promise-any.js │ ├── 03-logical-assignment-operators.html │ ├── 03-logical-assignment-operators.js │ ├── 04-numeric-separation.html │ └── 04-numeric-separations.js ├── 2022 │ ├── 01-private-instance-class-fields.html │ ├── 01-private-instance-class-fields.js │ ├── 02-static-class-fields.html │ ├── 02-static-class-fields.js │ ├── 03-top-level-await.html │ └── 03-top-level-await.mjs ├── stage-1 │ ├── 01-partial-application.html │ ├── 01-partial-application.js │ ├── 02-do-expressions.html │ └── 02-do-expressions.js ├── stage-2 │ ├── 01-pipeline-operator.html │ ├── 01-pipeline-operator.js │ ├── 02-record-and-tuple.html │ └── 02-record-and-tuple.js └── stage-3 │ ├── 01-decorators-FIX.js │ └── 01-decorators.html ├── temp └── deep-update.js ├── util - http-server └── server.js ├── version 5 ├── 01 - a. Types │ ├── 01-undefined-null.html │ ├── 01-undefined-null.js │ ├── 02-boolean.html │ ├── 02-boolean.js │ ├── 03-number.html │ ├── 03-number.js │ ├── 04-string.html │ └── 04-string.js ├── 01 - b. Type Conversions │ ├── 01-toBoolean.html │ ├── 01-toBoolean.js │ ├── 02-toNumber.html │ ├── 02-toNumber.js │ ├── 03-toString.html │ └── 03-toString.js ├── 02 - a. Arithmetic Operators │ ├── 01-numbers.html │ ├── 01-numbers.js │ ├── 02-strings.html │ └── 02-strings.js ├── 02 - b. Assignment Operators │ ├── 01-numbers.html │ ├── 01-numbers.js │ ├── 02-strings.html │ └── 02-strings.js ├── 02 - c. Comparison Operators │ ├── 01-equality.html │ ├── 01-equality.js │ ├── 02-inequality.html │ ├── 02-inequality.js │ ├── 03-greater.html │ ├── 03-greater.js │ ├── 04-greater-equal.html │ ├── 04-greater-equal.js │ ├── 05-less.html │ ├── 05-less.js │ ├── 06-less-equal.html │ └── 06-less-equal.js ├── 02 - d. Logical Operators │ ├── 01-and.html │ ├── 01-and.js │ ├── 02-or.html │ ├── 02-or.js │ ├── 03-not.html │ ├── 03-not.js │ ├── 04-parenthesis.html │ └── 04-parenthesis.js ├── 03 - Conditional Statements │ ├── 01-if.html │ ├── 01-if.js │ ├── 02-if-else.html │ ├── 02-if-else.js │ ├── 03-if-else-if.html │ ├── 03-if-else-if.js │ ├── 04-inline-if-else.html │ ├── 04-inline-if-else.js │ ├── 05-switch-number.html │ ├── 05-switch-number.js │ ├── 06-switch-string.html │ └── 06-switch-string.js ├── 04 - Loops │ ├── 01-while.html │ ├── 01-while.js │ ├── 02-do-while.html │ ├── 02-do-while.js │ ├── 03-for.html │ ├── 03-for.js │ ├── 04-for-in-array.html │ ├── 04-for-in-array.js │ ├── 05-for-in-object.html │ ├── 05-for-in-object.js │ ├── 06-jumps.html │ └── 06-jumps.js ├── 05 - Functions │ ├── 01-function-without-return.html │ ├── 01-function-without-return.js │ ├── 02-function-with-return.html │ ├── 02-function-with-return.js │ ├── 03-function-less-values.html │ ├── 03-function-less-values.js │ ├── 04-function-more-values.html │ ├── 04-function-more-values.js │ ├── 05-function-more-values-arguments.html │ ├── 05-function-more-values-arguments.js │ ├── 06-function-default-values.html │ ├── 06-function-default-values.js │ ├── 07-function-call.html │ ├── 07-function-call.js │ ├── 08-function-apply.html │ ├── 08-function-apply.js │ ├── 09-function-bind.html │ └── 09-function-bind.js ├── 06 - Object │ ├── 01-object.html │ ├── 01-object.js │ ├── 02-object-like-a-map.html │ ├── 02-object-like-a-map.js │ ├── 03-object-notation.html │ ├── 03-object-notation.js │ ├── 04-object-seal.html │ ├── 04-object-seal.js │ ├── 05-object-freeze.html │ ├── 05-object-freeze.js │ ├── 06-instanceof.html │ └── 06-instanceof.js ├── 07 - Array │ ├── 01-array.html │ ├── 01-array.js │ ├── 02-array-notation.html │ ├── 02-array-notation.js │ ├── 03-array-push.html │ ├── 03-array-push.js │ ├── 04-array-pop.html │ ├── 04-array-pop.js │ ├── 05-array-concat.html │ └── 05-array-concat.js ├── 08 - Date │ ├── 01-date.html │ ├── 01-date.js │ ├── 02-now.html │ ├── 02-now.js │ ├── 03-to-string.html │ ├── 03-to-string.js │ ├── 04-parts-get.html │ ├── 04-parts-get.js │ ├── 05-parts-set.html │ └── 05-parts-set.js └── 09 - Exception Handling │ ├── 01-try-catch.html │ ├── 01-try-catch.js │ ├── 02-try-catch-finally.html │ ├── 02-try-catch-finally.js │ ├── 03-try-finally.html │ ├── 03-try-finally.js │ ├── 04-rethrow.html │ └── 04-rethrow.js ├── yarn-install-all.sh └── yarn-upgrade-latest-all.sh /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "plugins": [ 4 | // Stage 1 5 | "@babel/plugin-proposal-do-expressions", 6 | "@babel/plugin-proposal-partial-application", 7 | ["@babel/plugin-proposal-record-and-tuple", { "syntaxType": "hash" }], 8 | // Stage 2 9 | ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }], 10 | // Stage 3 11 | ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }], 12 | // Stage 4 13 | ["@babel/plugin-transform-class-properties"] 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 0.5%, 2 | last 2 versions, 3 | Firefox ESR, 4 | not dead -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/external/** 2 | **/lib/** 3 | **/node_modules/** 4 | **/src-babel-issues/** 5 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { 4 | "browser": true, 5 | "es6": true, 6 | "node": true 7 | }, 8 | "parser": "@babel/eslint-parser", 9 | "parserOptions": { 10 | "ecmaVersion": 2022 11 | }, 12 | "extends": ["eslint:recommended"], 13 | "rules": { 14 | "no-console": 0, 15 | "no-debugger": 1, 16 | "semi": [2, "always"] 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## JetBrains 3 | ################# 4 | 5 | .idea/ 6 | 7 | ################# 8 | ## npm 9 | ################# 10 | 11 | node_modules/ 12 | npm-debug.log 13 | package-lock.json 14 | 15 | ################# 16 | ## yarn 17 | ################# 18 | 19 | yarn.lock 20 | yarn-error.log 21 | 22 | ################# 23 | ## ESLint 24 | ################# 25 | 26 | .eslintcache 27 | 28 | ################# 29 | ## Other 30 | ################# 31 | 32 | lib/ 33 | 34 | ############# 35 | ## Windows detritus 36 | ############# 37 | 38 | # Windows image file caches 39 | Thumbs.db 40 | ehthumbs.db 41 | 42 | # Folder config file 43 | Desktop.ini 44 | 45 | # Recycle Bin used on file shares 46 | $RECYCLE.BIN/ 47 | 48 | ############# 49 | ## Mac crap 50 | ############# 51 | 52 | .DS_Store 53 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## EcmaScript Examples 3 | ################# 4 | 5 | external/ 6 | lib/ 7 | src-babel-issues/ 8 | 9 | ################# 10 | ## npm 11 | ################# 12 | 13 | node_modules/ 14 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "quoteProps": "as-needed", 8 | "arrowParens": "avoid", 9 | "trailingComma": "none", 10 | "bracketSpacing": true, 11 | "jsxSingleQuote": false, 12 | "overrides": [ 13 | { 14 | "files": ["*.json"], 15 | "options": { 16 | "singleQuote": false 17 | } 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | // Controls the rendering size of tabs in characters. Accepted values: "auto", 2, 4, 6, etc. If set to "auto", the value will be guessed when a file is opened. 4 | "editor.tabSize": 2, 5 | 6 | // Enable ESLint 7 | "eslint.enable": true, 8 | "javascript.validate.enable": false 9 | } 10 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the tasks.json format 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "label": "Open Server", 8 | "type": "shell", 9 | "command": "npm run openserver -- \"${file}\"", 10 | "problemMatcher": [], 11 | "group": { 12 | "kind": "build", 13 | "isDefault": true 14 | } 15 | } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /copyright: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015-2024 Rick Beerendonk -------------------------------------------------------------------------------- /delete-node_modules-all.bat: -------------------------------------------------------------------------------- 1 | for /d /r . %%d in (node_modules) do @if exist "%%d" echo "%%d" && rd /s/q "%%d" 2 | -------------------------------------------------------------------------------- /delete-node_modules-all.sh: -------------------------------------------------------------------------------- 1 | find . -name "node_modules" -type d -prune -exec rm -rf '{}' + -------------------------------------------------------------------------------- /intl/readme.md: -------------------------------------------------------------------------------- 1 | # Intl 2 | 3 | - Specifications: https://tc39.es/ecma402/#intl-object 4 | - MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl 5 | 6 | ## Licence 7 | 8 | European Union Public Licence version 1.2 9 | 10 | ## Copyright 11 | 12 | Copyright © 2020 Rick Beerendonk 13 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "experimentalDecorators": true 5 | }, 6 | "exclude": ["node_modules"] 7 | } 8 | -------------------------------------------------------------------------------- /queries/find.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Find 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /queries/find.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2025 Rick Beerendonk !*/ 3 | 4 | const arr = [1, 2, 3, 4, 5]; 5 | 6 | const firstEven = arr.find(x => x % 2 === 0); 7 | 8 | console.log(firstEven); // 2 9 | -------------------------------------------------------------------------------- /queries/findLast.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Find 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /queries/findLast.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2025 Rick Beerendonk !*/ 3 | 4 | const arr = [1, 2, 3, 4, 5]; 5 | 6 | const lastEven = arr.findLast(x => x % 2 === 0); 7 | 8 | console.log(lastEven); // 2 9 | -------------------------------------------------------------------------------- /resources/icons.css: -------------------------------------------------------------------------------- 1 | .info::before { 2 | border-radius: 0.5rem; 3 | width: 1rem; 4 | margin-right: 0.5rem; 5 | 6 | display: inline-flex; 7 | align-items: center; 8 | justify-content: center; 9 | 10 | font-weight: bold; 11 | font-family: arial; 12 | } 13 | 14 | .info::before { 15 | background-color: mediumblue; 16 | color: white; 17 | content: 'i'; 18 | } 19 | -------------------------------------------------------------------------------- /resources/oblicum-es-2015.css: -------------------------------------------------------------------------------- 1 | /*! Copyright © 2019 Rick Beerendonk !*/ 2 | 3 | @import 'oblicum-es-20XX.css'; 4 | 5 | body > :first-child::after { 6 | content: 'EcmaScript 2015'; 7 | } 8 | -------------------------------------------------------------------------------- /resources/oblicum-es-2016.css: -------------------------------------------------------------------------------- 1 | /*! Copyright © 2019 Rick Beerendonk !*/ 2 | 3 | @import 'oblicum-es-20XX.css'; 4 | 5 | body > :first-child::after { 6 | content: 'EcmaScript 2016'; 7 | } 8 | -------------------------------------------------------------------------------- /resources/oblicum-es-2017.css: -------------------------------------------------------------------------------- 1 | /*! Copyright © 2019 Rick Beerendonk !*/ 2 | 3 | @import 'oblicum-es-20XX.css'; 4 | 5 | body > :first-child::after { 6 | content: 'EcmaScript 2017'; 7 | } 8 | -------------------------------------------------------------------------------- /resources/oblicum-es-2018.css: -------------------------------------------------------------------------------- 1 | /*! Copyright © 2019 Rick Beerendonk !*/ 2 | 3 | @import 'oblicum-es-20XX.css'; 4 | 5 | body > :first-child::after { 6 | content: 'EcmaScript 2018'; 7 | } 8 | -------------------------------------------------------------------------------- /resources/oblicum-es-2019.css: -------------------------------------------------------------------------------- 1 | /*! Copyright © 2019 Rick Beerendonk !*/ 2 | 3 | @import 'oblicum-es-20XX.css'; 4 | 5 | body > :first-child::after { 6 | content: 'EcmaScript 2019'; 7 | } 8 | -------------------------------------------------------------------------------- /resources/oblicum-es-2020.css: -------------------------------------------------------------------------------- 1 | /*! Copyright © 2019 Rick Beerendonk !*/ 2 | 3 | @import 'oblicum-es-20XX.css'; 4 | 5 | body > :first-child::after { 6 | content: 'EcmaScript 2020'; 7 | } 8 | -------------------------------------------------------------------------------- /resources/oblicum-es-2021.css: -------------------------------------------------------------------------------- 1 | /*! Copyright © 2020 Rick Beerendonk !*/ 2 | 3 | @import 'oblicum-es-20XX.css'; 4 | 5 | body > :first-child::after { 6 | content: 'EcmaScript 2021'; 7 | } 8 | -------------------------------------------------------------------------------- /resources/oblicum-es-2022.css: -------------------------------------------------------------------------------- 1 | /*! Copyright © 2020 Rick Beerendonk !*/ 2 | 3 | @import 'oblicum-es-20XX.css'; 4 | 5 | body > :first-child::after { 6 | content: 'EcmaScript 2022'; 7 | } 8 | -------------------------------------------------------------------------------- /resources/oblicum-es-20XX.css: -------------------------------------------------------------------------------- 1 | /*! Copyright © 2018 Rick Beerendonk !*/ 2 | 3 | body > :first-child::after { 4 | font-family: Comfortaa; 5 | font-size: 1.7rem; 6 | font-weight: bold; 7 | display: block; 8 | position: fixed; 9 | 10 | color: white; 11 | background-color: green; 12 | border-color: green; 13 | border-width: 0.2rem; 14 | border-style: solid; 15 | border-radius: 2rem; 16 | 17 | padding-left: 0.7rem; 18 | padding-right: 1rem; 19 | 20 | bottom: 0; 21 | left: 0; 22 | margin: 4rem 1rem; 23 | height: 2rem; 24 | width: calc(100% - 4rem); 25 | 26 | opacity: 0.7; 27 | z-index: 99; 28 | } 29 | -------------------------------------------------------------------------------- /resources/oblicum-stage-1.css: -------------------------------------------------------------------------------- 1 | /*! Copyright © 2018 Rick Beerendonk !*/ 2 | 3 | @import 'oblicum-es-20XX.css'; 4 | 5 | body > :first-child::after { 6 | content: 'Stage 1'; 7 | 8 | background-color: red; 9 | border-color: red; 10 | } 11 | -------------------------------------------------------------------------------- /resources/oblicum-stage-2.css: -------------------------------------------------------------------------------- 1 | /*! Copyright © 2018 Rick Beerendonk !*/ 2 | 3 | @import 'oblicum-es-20XX.css'; 4 | 5 | body > :first-child::after { 6 | content: 'Stage 2'; 7 | 8 | background-color: red; 9 | border-color: red; 10 | } 11 | -------------------------------------------------------------------------------- /resources/oblicum-stage-3.css: -------------------------------------------------------------------------------- 1 | /*! Copyright © 2018 Rick Beerendonk !*/ 2 | 3 | @import 'oblicum-es-20XX.css'; 4 | 5 | body > :first-child::after { 6 | content: 'Stage 3'; 7 | 8 | background-color: red; 9 | border-color: red; 10 | } 11 | -------------------------------------------------------------------------------- /src-babel-issues/2015/94-html-style-comments.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src-babel-issues/2015/94-html-style-comments.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | console.log('This should be visible and the comment should be ignored.'); -------------------------------------------------------------------------------- /src/2015/01-const.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/01-const.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | /* eslint no-constant-condition:off, no-undef:off */ 5 | 6 | 'use strict'; 7 | //console.log(a); 8 | 9 | const a = 1; 10 | 11 | if (true) { 12 | const b = 2; 13 | //b = 3; 14 | 15 | console.log(a); // 1 16 | console.log(b); // 2 17 | } 18 | console.log(b); // Error 19 | -------------------------------------------------------------------------------- /src/2015/02-let.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/02-let.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | /* eslint no-constant-condition:off */ 5 | 6 | 'use strict'; 7 | 8 | // Babel: Undefined 9 | // Chrome: ReferenceError: a is not defined 10 | // FireFox: ReferenceError: can't access lexical declaration `a' before initialization 11 | // Safari: ReferenceError: Cannot access uninitialized variable. 12 | // Edge: ? 13 | //console.log(a); 14 | 15 | let a = 1; 16 | 17 | if (true) { 18 | // Babel: - 19 | // Chrome: ReferenceError: a is not defined 20 | // FireFox: ReferenceError: can't access lexical declaration `a' before initialization 21 | // Safari: ReferenceError: Cannot access uninitialized variable. 22 | // Edge: ? 23 | console.log(a); 24 | 25 | let a = 2; 26 | 27 | console.log(a); // 2 28 | } 29 | 30 | console.log(a); // 1 31 | -------------------------------------------------------------------------------- /src/2015/03-default-parameters.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/03-default-parameters.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | function test(a, b = 10, c = 'default', d = () => 'Hello world!') { 7 | console.log(a); 8 | console.log(b); 9 | console.log(c); 10 | console.log(d()); 11 | console.log(''); 12 | } 13 | 14 | console.log('test()'); 15 | test(); 16 | 17 | console.log('test(1)'); 18 | test(1); 19 | 20 | console.log('test(1, 2)'); 21 | test(1, 2); 22 | 23 | console.log('test(1, undefined, "other")'); 24 | test(1, undefined, 'other'); 25 | 26 | console.log('test(undefined, undefined, undefined, () => "Hello EcmaScript!")'); 27 | test(undefined, undefined, undefined, () => 'Hello EcmaScript!'); 28 | -------------------------------------------------------------------------------- /src/2015/04-array-rest-parameter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/04-array-rest-parameter.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | function test(...a) { 7 | console.log('Rest:'); 8 | console.log(a); // [1, "EcmaScript", 2017] 9 | console.log(a.length); // 3 10 | console.log(Array.isArray(a)); // true 11 | 12 | // ES6 FireFox: SyntaxError: 'arguments' object may not be used in conjunction with a rest parameter 13 | // ES6 Chrome, Edge & Babel: 14 | console.log('Arguments:'); 15 | console.log(arguments); 16 | console.log(arguments.length); 17 | console.log(Array.isArray(arguments)); 18 | } 19 | 20 | test(1, 'EcmaScript', 2017); 21 | -------------------------------------------------------------------------------- /src/2015/05-array-spread-operator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/05-array-spread-operator.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | function sum(a, b, c) { 7 | return a + b + c; 8 | } 9 | 10 | console.log(sum(...[3, 4, 5])); // 12 11 | 12 | // Combine array spread with array rest: 13 | console.log([...'abcde'][2]); // c 14 | -------------------------------------------------------------------------------- /src/2015/06-array-rest-spread-operator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/06-array-rest-spread-operator.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | // Combine array rest & spread: 7 | console.log(['a', ...'bcde'][2]); // c 8 | -------------------------------------------------------------------------------- /src/2015/07-destructuring-1-list-matching.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/07-destructuring-1-list-matching.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | let data = [1, 22, 333, 4444, 55555]; 7 | let [a, , b, ...rest] = data; 8 | 9 | console.log(a); // 1 10 | console.log(b); // 333 11 | console.log(rest); // [4444, 55555] 12 | -------------------------------------------------------------------------------- /src/2015/07-destructuring-2-object-matching.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/07-destructuring-2-object-matching.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | let obj = { 7 | committee: 'TC39', 8 | name: 'EcmaScript', 9 | edition: { version: 6, year: 2015 }, 10 | website: 'https://github.com/tc39' 11 | }; 12 | 13 | let { 14 | committee, 15 | edition: { year }, 16 | name: officialName, 17 | other = 'new' 18 | } = obj; 19 | 20 | console.log(committee); // 'TC39' 21 | console.log(officialName); // 'EcmaScript' 22 | console.log(year); // 2015 23 | console.log(other); // 'new' 24 | -------------------------------------------------------------------------------- /src/2015/07-destructuring-3-functions-arguments.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/2015/07-destructuring-3-functions-arguments.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | // Nested: Object in array 7 | function test([value, { name, version }, year]) { 8 | console.log(value); // 1 9 | console.log(name); // EcmaScript 10 | console.log(version); // 6 11 | console.log(year); // 2017 12 | } 13 | 14 | const obj = { 15 | name: 'EcmaScript', 16 | year: 2015, 17 | version: 6 18 | }; 19 | 20 | const data = [1, obj, 2017]; 21 | 22 | test(data); 23 | -------------------------------------------------------------------------------- /src/2015/07-destructuring-3-functions-return.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/07-destructuring-3-functions-return.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | function test() { 7 | return ['One', 'Two']; 8 | } 9 | 10 | let [a, b] = test(); 11 | 12 | console.log(a); // One 13 | console.log(b); // Two 14 | -------------------------------------------------------------------------------- /src/2015/07-destructuring-4-swap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/07-destructuring-4-swap.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | let a = 'One'; 7 | let b = 'Two'; 8 | 9 | [a, b] = [b, a]; 10 | 11 | console.log(a); // Two 12 | console.log(b); // One 13 | -------------------------------------------------------------------------------- /src/2015/07-destructuring-5-fail.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/07-destructuring-5-fail.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | var someArray = []; 7 | 8 | // No default 9 | let [firstValue] = someArray; 10 | console.log(firstValue); // undefined 11 | 12 | // Default 13 | let [firstValueOrDefault = 1] = someArray; 14 | console.log(firstValueOrDefault); // 1 15 | -------------------------------------------------------------------------------- /src/2015/10-arrows-default-parameters.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/10-arrows-default-parameters.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | const f = (x = 10) => x * x; 7 | 8 | console.log(f()); // 100 9 | -------------------------------------------------------------------------------- /src/2015/10-arrows-rest-arguments.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/10-arrows-rest-arguments.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | /* eslint no-undef:warn, no-unused-vars:warn */ 5 | 6 | 'use strict'; 7 | 8 | const x = (a, b, ...rest) => [a, b, rest]; 9 | console.log(x(1, 2, 3, 4)); // [ 1, 2, [3, 4] ] 10 | 11 | // Specs: Arguments should not exists 12 | // Babel: Arguments exists 13 | const y = (a, b, ...rest) => arguments; 14 | console.log(y(1, 2, 3, 4)); 15 | -------------------------------------------------------------------------------- /src/2015/10-arrows-return-object-literal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/10-arrows-return-object-literal.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | // Need () 7 | const a = x => ({ value: x }); 8 | 9 | console.log(a(123)); // { value: 123 } 10 | -------------------------------------------------------------------------------- /src/2015/10-arrows-this.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/10-arrows-this.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | function ES5Fail() { 7 | this.value = 0; 8 | 9 | setInterval(function () { 10 | this.value++; 11 | }, 1000); 12 | } 13 | 14 | function ES5Success() { 15 | var self = this; 16 | 17 | self.value = 0; 18 | 19 | setInterval(function () { 20 | self.value++; 21 | }, 1000); 22 | } 23 | 24 | function ES6Arrow() { 25 | this.value = 0; 26 | 27 | setInterval(() => this.value++, 1000); 28 | } 29 | 30 | var es5fail = new ES5Fail(); 31 | var es5success = new ES5Success(); 32 | var es6arrow = new ES6Arrow(); 33 | 34 | setInterval(function () { 35 | console.log(es5fail.value); 36 | console.log(es5success.value); 37 | console.log(es6arrow.value); 38 | console.log(); 39 | }, 1000); 40 | -------------------------------------------------------------------------------- /src/2015/10-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/10-arrows.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | const a = () => 'EcmaScript'; 7 | 8 | const b = x => x * x; 9 | const c = x => x * x; // Omit () 10 | const d = x => { 11 | const y = x * x; 12 | return y; 13 | }; // Add { ...; return ...; } 14 | 15 | const e = (x, y) => x * y; 16 | 17 | console.log(a()); // EcmaScript 18 | console.log(b(2)); // 4 19 | console.log(c(3)); // 9 20 | console.log(d(4)); // 16 21 | console.log(e(5, 6)); // 30 22 | -------------------------------------------------------------------------------- /src/2015/20-object-literals.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/21-classes-es5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/21-classes-es6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/21-classes-es6.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | class Base { 7 | constructor(name) { 8 | this.name = name; 9 | } 10 | toString() { 11 | return this.name; 12 | } 13 | } 14 | 15 | class Account extends Base { 16 | constructor(name) { 17 | super(name); 18 | this.balance = 0; 19 | } 20 | deposit(amount) { 21 | this.balance += amount; 22 | } 23 | withdraw(amount) { 24 | this.balance -= amount; 25 | } 26 | toString() { 27 | return super.toString() + ': ' + this.balance; 28 | } 29 | } 30 | 31 | let acc = new Account('Rick'); 32 | acc.deposit(100); 33 | acc.withdraw(25); 34 | 35 | console.log(acc); // { name: 'Rick', balance: 75 } 36 | console.log(acc.toString()); // Rick: 75 37 | -------------------------------------------------------------------------------- /src/2015/22-proxy-function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/22-proxy-function.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | /* eslint no-unused-vars:warn */ 5 | 6 | 'use strict'; 7 | 8 | // Babel: Impossible due to ES5 limitations 9 | 10 | let func = function (s) { 11 | return 'Target: ' + s; 12 | }; 13 | 14 | let handler = { 15 | apply: function (target, that, args) { 16 | return 'Proxy: ' + target.apply(that, args); 17 | } 18 | }; 19 | 20 | let funcProxy = new Proxy(func, handler); 21 | 22 | console.log(func('test')); // Target: test 23 | console.log(funcProxy('test')); // Proxy: Target: test 24 | -------------------------------------------------------------------------------- /src/2015/22-proxy-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/22-proxy-object.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | // Babel: Impossible due to ES5 limitations 7 | 8 | let obj = { 9 | techDays: 'TechDays' 10 | }; 11 | let handler = { 12 | get(target, prop /*, receiver */) { 13 | return target[prop] + ' (changed through Proxy)'; 14 | }, 15 | set(target, prop, value /*, receiver */) { 16 | target[prop] = value + ' (changed through Proxy)'; 17 | return true; 18 | } 19 | }; 20 | 21 | let objProxy = new Proxy(obj, handler); 22 | 23 | console.log(objProxy.techDays); // TechDays (changed through Proxy) 24 | 25 | objProxy.techDays = 'test'; 26 | 27 | console.log(obj.techDays); // test (changed through Proxy) 28 | -------------------------------------------------------------------------------- /src/2015/30-iterators-for-of.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/30-iterators-for-of.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | /* 7 | interface IteratorResult { 8 | done: boolean; 9 | value: any; 10 | } 11 | interface Iterator { 12 | next(): IteratorResult; 13 | } 14 | interface Iterable { 15 | [Symbol.iterator](): Iterator; 16 | } 17 | */ 18 | 19 | let test = { 20 | [Symbol.iterator]() { 21 | let current = 0; 22 | return { 23 | next() { 24 | current++; 25 | return { done: false, value: current }; 26 | } 27 | }; 28 | } 29 | }; 30 | 31 | for (let n of test) { 32 | if (n > 10) { 33 | break; 34 | } 35 | console.log(n); 36 | } // 1, 2, 3, ... , 10 37 | -------------------------------------------------------------------------------- /src/2015/31-1-generators-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/31-1-generators-object.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | // Babel: 7 | //import '@babel/polyfill'; 8 | 9 | const test = { 10 | [Symbol.iterator]: function* () { 11 | let current = 1; 12 | while (true) { 13 | yield current++; 14 | } 15 | } 16 | }; 17 | 18 | for (let n of test) { 19 | if (n > 10) { 20 | break; 21 | } 22 | console.log(n); 23 | } 24 | -------------------------------------------------------------------------------- /src/2015/31-2-generators-function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/31-2-generators-function.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | // Babel: 7 | //import '@babel/polyfill'; 8 | 9 | function* test() { 10 | let current = 1; 11 | while (true) { 12 | yield current++; 13 | } 14 | } 15 | 16 | for (let n of test()) { 17 | if (n > 10) { 18 | break; 19 | } 20 | console.log(n); 21 | } 22 | -------------------------------------------------------------------------------- /src/2015/32-generator-delegation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/32-generator-delegation.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | // Babel: 7 | //import '@babel/polyfill'; 8 | 9 | function* generator1() { 10 | yield 'a'; 11 | yield 'b'; 12 | yield 'c'; 13 | } 14 | 15 | function* generator2() { 16 | yield 1; 17 | yield 2; 18 | yield* generator1(); 19 | yield 3; 20 | yield 4; 21 | } 22 | 23 | for (const item of generator1()) { 24 | console.log(item); 25 | } 26 | 27 | console.log('--'); 28 | 29 | for (const item of generator2()) { 30 | console.log(item); 31 | } 32 | 33 | /* 34 | 35 | a 36 | b 37 | c 38 | -- 39 | 1 40 | 2 41 | a 42 | b 43 | c 44 | 3 45 | 4 46 | 47 | */ 48 | -------------------------------------------------------------------------------- /src/2015/40-promise-all.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/40-promise-all.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | /* eslint no-unused-vars:warn */ 5 | 6 | 'use strict'; 7 | 8 | const p1 = () => 9 | new Promise(function (resolve, reject) { 10 | setTimeout(() => resolve('Resolved 1'), 2000); 11 | }); 12 | const p2 = () => 13 | new Promise(function (resolve, reject) { 14 | setTimeout(() => resolve('Resolved 2'), 1000); 15 | }); 16 | /* 17 | const p3 = () => new Promise(function(resolve, reject) { 18 | setTimeout(() => reject('Rejected 3'), 1500); 19 | }); 20 | */ 21 | 22 | Promise.all([p1(), p2() /*, p3() */]) 23 | .then(arr => console.log('Success: ' + JSON.stringify(arr))) 24 | .catch(err => console.log('Fail: ' + err)); 25 | 26 | console.log('End of file...'); 27 | -------------------------------------------------------------------------------- /src/2015/40-promise-race.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/40-promise.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/50-unicode-normalize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
Open the console!
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/2015/50-unicode-normalize.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | let one = 'ë'; 7 | let two = 'e\u0308'; 8 | console.log(one.length); // 1 9 | console.log(one.codePointAt(0)); // 235 10 | console.log(two.length); // 2 11 | console.log(two.codePointAt(0)); // 101 12 | console.log(two.codePointAt(1)); // 776 13 | console.log(one === two); // false 14 | console.log(one.normalize() === two.normalize()); // true 15 | -------------------------------------------------------------------------------- /src/2015/50-unicode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
Open the console!
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/2015/50-unicode.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | let x = '\u{1F437}'; // console.log('\u{1F4A9}') 7 | 8 | console.log(x); 9 | 10 | console.log(x.length); // 2 11 | console.log(x.charCodeAt(0) + ' ' + x.codePointAt(0) + ' ' + x[0]); // 55357 128055 12 | console.log(x.charCodeAt(1) + ' ' + x.codePointAt(1) + ' ' + x[1]); // 56375 56375 13 | 14 | // True 15 | console.log(x.startsWith('\u{1F437}')); 16 | 17 | // ES6 (FF + Chrome): True 18 | // Babel: False 19 | console.log(x.startsWith('\uD83D')); 20 | -------------------------------------------------------------------------------- /src/2015/60-1-named-direct-export.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | export function square(x) { 5 | return x * x; 6 | } 7 | 8 | export let pi = 3.14; 9 | -------------------------------------------------------------------------------- /src/2015/60-1-named-direct-import.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | import { square, pi } from './60-1-named-direct-export.js'; 5 | 6 | console.log(square(3)); // 9 7 | console.log(pi); // 3.14 8 | -------------------------------------------------------------------------------- /src/2015/60-1-named-direct.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/2015/60-2-named-indirect-export.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | function square(x) { 5 | return x * x; 6 | } 7 | 8 | function cube(x) { 9 | return x * x * x; 10 | } 11 | 12 | export { square, cube }; 13 | -------------------------------------------------------------------------------- /src/2015/60-2-named-indirect-import.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | /* eslint no-undef:warn */ 5 | 6 | import { square } from './60-2-named-indirect-export'; 7 | 8 | console.log(square(3)); // 9 9 | console.log(cube(3)); // ReferenceError 10 | -------------------------------------------------------------------------------- /src/2015/60-2-named-indirect.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/60-3-named-indirect-all.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/60-3-named-indirect-import-all.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | import * as math from './60-2-named-indirect-export'; 5 | 6 | console.log(math.cube(3)); // 27 7 | -------------------------------------------------------------------------------- /src/2015/60-4-default-export.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | export default function () { 5 | return 'Hello world!'; 6 | } 7 | 8 | export function square(x) { 9 | return x * x; 10 | } 11 | 12 | export let pi = 3.14; 13 | -------------------------------------------------------------------------------- /src/2015/60-4-default-import.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | import hello, { square, pi } from './60-4-default-export.js'; 5 | 6 | console.log(hello()); // 'Hello world!' 7 | console.log(square(3)); // 9 8 | console.log(pi); // 3.14 9 | -------------------------------------------------------------------------------- /src/2015/60-4-default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/60-5-api-import.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/60-5-api-import.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | /* global System */ 5 | /* eslint no-undef:warn */ 6 | 7 | let featureSupported = false; 8 | 9 | if (!featureSupported) { 10 | System.import('./60-4-default-export').then( 11 | console.log(square(4)) // 16 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /src/2015/71-subclass-array.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/71-subclass-array.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | class Stack extends Array { 7 | constructor() { 8 | super(); 9 | } 10 | 11 | top() { 12 | return this[this.length - 1]; 13 | } 14 | } 15 | 16 | let s = new Stack(); 17 | s.push('World'); 18 | s.push('Hello'); 19 | console.log(s.top()); // Hello 20 | console.log(s.length); // 2 21 | -------------------------------------------------------------------------------- /src/2015/72-reflection-api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/72-reflection-api.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | function MyClass(firstName, lastName) { 7 | this.name = firstName + ' ' + lastName; 8 | } 9 | 10 | let instance = Reflect.construct(MyClass, ['Steve', 'Ballmer']); 11 | 12 | console.log(Reflect.has(instance, 'firstName')); // false; 13 | console.log(Reflect.has(instance, 'lastName')); // false; 14 | console.log(Reflect.has(instance, 'name')); // true; 15 | 16 | console.log(Reflect.get(instance, 'name')); // Steve Ballmer 17 | console.log(Reflect.set(instance, 'name', 'Satya Nadella')); // true 18 | console.log(Reflect.get(instance, 'name')); // Satya Nadella 19 | -------------------------------------------------------------------------------- /src/2015/73-tail-calls.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/73-tail-calls.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | function recursive(n) { 7 | if (n < 1) { 8 | return 'Done'; 9 | } 10 | 11 | return recursive(n - 1); 12 | } 13 | 14 | // No stack overflow 15 | console.log(recursive(1e5)); 16 | -------------------------------------------------------------------------------- /src/2015/80-map.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/80-map.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | function logIterator(iterator) { 7 | let s = ''; 8 | for (let v of iterator) { 9 | s += v + '; '; 10 | } 11 | console.log(s); 12 | } 13 | 14 | let map = new Map([ 15 | ['A', 111], 16 | ['B', 222] 17 | ]); 18 | map.set('C', 333); 19 | 20 | logIterator(map.keys()); // A; B; C 21 | logIterator(map.values()); // 111; 222; 333 22 | logIterator(map.entries()); // A,111; B,222; C,333 23 | 24 | console.log(''); 25 | console.log(map.get('A')); // 111 26 | console.log(map.size); // 3 27 | 28 | map.delete('A'); 29 | console.log(map.get('A')); // undefined 30 | console.log(map.size); // 2 31 | 32 | map.clear(); 33 | console.log(map.size); // 0 34 | -------------------------------------------------------------------------------- /src/2015/81-set.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/81-set.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | function logIterator(iterator) { 7 | let s = ''; 8 | for (let v of iterator) { 9 | s += v + '; '; 10 | } 11 | console.log(s); 12 | } 13 | 14 | let s = new Set(['A', 'B']); 15 | s.add('C'); 16 | s.add('C'); // Will not add the value again 17 | s.add('D'); 18 | 19 | logIterator(s.keys()); // A; B; C; D 20 | logIterator(s.values()); // A; B; C; D 21 | logIterator(s.entries()); // A,A; B,B; C,C; D,D 22 | 23 | console.log(''); 24 | console.log(s.has('A')); // true 25 | console.log(s.size); // 4 26 | 27 | s.delete('A'); 28 | console.log(s.has('A')); // false 29 | console.log(s.size); // 3 30 | 31 | s.clear(); 32 | console.log(s.size); // 0 33 | -------------------------------------------------------------------------------- /src/2015/90-1-template-literals.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/90-1-template-literals.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | const name = 'EcmaScript'; 7 | const version = 2015; 8 | 9 | const x = () => 'hi!'; 10 | 11 | const result = `This is about: 12 | ${name} ${version + 1} ${x()}`; 13 | 14 | console.log(result); 15 | // This is about: 16 | // EcmaScript 2016 hi! 17 | -------------------------------------------------------------------------------- /src/2015/90-2-tagged-template-literals.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/90-2-tagged-template-literals.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | function test(stringArr, ...expressions) { 5 | console.log(stringArr); // [ 'Boolean ', ' Number ', ' String ', '' ] 6 | console.log(JSON.stringify(expressions)); // [false,123,"text"] 7 | return 'Number of expression = ' + expressions.length; 8 | } 9 | 10 | console.log(test`Boolean ${false} Number ${123} String ${'text'}`); 11 | // Number of expression = 3 12 | -------------------------------------------------------------------------------- /src/2015/91-number.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/91-number.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | const n = 5.12; 7 | 8 | console.log(Number.isFinite(n)); // true 9 | console.log(Number.isInteger(n)); // false 10 | 11 | console.log(''); 12 | 13 | const n1 = Number.NaN; 14 | const n2 = Number.NaN; 15 | console.log(n1 === n2); // false 16 | console.log(Number.isNaN(n1) == Number.isNaN(n2)); // true 17 | -------------------------------------------------------------------------------- /src/2015/92-symbol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/92-symbol.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | const s1 = Symbol('rick/one'); 7 | const s2 = Symbol('rick/one'); 8 | const s3 = Symbol.for('rick/one'); 9 | const s4 = Symbol.for('rick/one'); 10 | 11 | console.log(s1 === s2); // false 12 | console.log(s1 === s3); // false 13 | console.log(s2 === s3); // false 14 | console.log(s3 === s4); // true 15 | 16 | /* 17 | Symbol.hasInstance 18 | Symbol.iterator 19 | */ 20 | -------------------------------------------------------------------------------- /src/2015/93-object-assign.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2015/93-object-assign.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2015 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | let o1 = { a: 1 }; 7 | let o2 = { b: 2, c: 3 }; 8 | let o3 = { c: 4, d: 5 }; 9 | 10 | let obj = Object.assign(o1, o2, o3); 11 | 12 | console.log(o1); // { a: 1, b: 2, c: 4, d: 5 } // changed 13 | console.log(o2); // { b: 2, c: 3 } // unchanged 14 | console.log(o3); // { c: 4, d: 5 } // unchanged 15 | 16 | console.log(obj); // { a: 1, b: 2, c: 4, d: 5 } 17 | 18 | console.log(obj === o1); // true 19 | -------------------------------------------------------------------------------- /src/2016/01-exponential-operator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2016/01-exponential-operator.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2016 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | console.log(2 ** 3); // 8 7 | console.log(2 ** 4); // 16 8 | -------------------------------------------------------------------------------- /src/2016/02-array-includes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2016/02-array-includes.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2016 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | console.log(['a', 'b'].includes('a')); // true 7 | console.log(['a', 'b'].includes('c')); // false 8 | 9 | console.log([NaN].includes(NaN)); // true 10 | 11 | console.log([-0].includes(+0)); // true 12 | 13 | /// BONUS: Use case 14 | 15 | const color = 'green'; 16 | console.log(['red', 'green', 'blue'].includes(color)); // true 17 | -------------------------------------------------------------------------------- /src/2016/03-destructuring-nested-rest-list-matching.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2016 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | let data = [1, 22, 333, 4444]; 7 | 8 | let [a, ...[b, ...rest]] = data; 9 | 10 | console.log(a); // 1 11 | console.log(b); // 22 12 | console.log(rest); // [333, 4444] 13 | -------------------------------------------------------------------------------- /src/2017/01-trailing-function-commas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2017/01-trailing-function-commas.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2017 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | // Case 1: No error because of the trailing comma in parameters 7 | function test(value) { 8 | console.log(value); 9 | } 10 | 11 | // Case 2: No error because of the trailing comma in arguments 12 | console.log('test(1, )'); 13 | // prettier-ignore 14 | test(1, ); // 1 15 | -------------------------------------------------------------------------------- /src/2017/02-object-entries.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2017/02-object-entries.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2017 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | let obj = { 7 | name: 'EcmaScript', 8 | year: 2017, 9 | final: true 10 | }; 11 | 12 | console.log(Object.entries(obj)); // [ [ 'name', 'EcmaScript' ], [ 'year', 2017 ], [ 'final', true ] ] 13 | -------------------------------------------------------------------------------- /src/2017/03-object-values.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2017/03-object-values.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2017 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | let obj = { 7 | name: 'EcmaScript', 8 | year: 2017, 9 | final: true 10 | }; 11 | 12 | console.log(Object.values(obj)); // [ 'EcmaScript', 2017, true ] 13 | -------------------------------------------------------------------------------- /src/2017/04-string-padding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2017/05-async-await-promise-all.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2017 Rick Beerendonk !*/ 3 | 4 | /* eslint no-unused-vars:warn */ 5 | 6 | 'use strict'; 7 | 8 | const p1 = () => 9 | new Promise(function (resolve, reject) { 10 | setTimeout(() => resolve('Resolved 1'), 2000); 11 | }); 12 | const p2 = () => 13 | new Promise(function (resolve, reject) { 14 | setTimeout(() => resolve('Resolved 2'), 1000); 15 | }); 16 | const p3 = () => 17 | new Promise(function (resolve, reject) { 18 | setTimeout(() => reject('Rejected 3'), 1500); 19 | }); 20 | 21 | (async function () { 22 | try { 23 | const arr = await Promise.all([p1(), p2(), p3()]); 24 | console.log('Success: ' + JSON.stringify(arr)); 25 | } catch (err) { 26 | console.log('Fail: ' + err); 27 | } 28 | })(); 29 | 30 | console.log('End of file...'); 31 | -------------------------------------------------------------------------------- /src/2017/05-async-await.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2018/01-promise-finally.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2018/01-promise-finally.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | /* eslint no-unused-vars:warn */ 5 | 6 | 'use strict'; 7 | 8 | const p1 = () => 9 | new Promise(function (resolve, reject) { 10 | setTimeout(() => resolve('Resolved'), 2000); 11 | }); 12 | const p2 = () => 13 | new Promise(function (resolve, reject) { 14 | setTimeout(() => reject('Rejected'), 1000); 15 | }); 16 | 17 | p1() 18 | .then(x => console.log('Success p1: ' + x)) 19 | .catch(e => console.log('Fail p1: ' + e)) 20 | .finally(() => console.log('Finally p1')); 21 | 22 | p2() 23 | .then(x => console.log('Success p2: ' + x)) 24 | .catch(e => console.log('Fail p2: ' + e)) 25 | .finally(() => console.log('Finally p2')); 26 | 27 | console.log('End of file...'); 28 | -------------------------------------------------------------------------------- /src/2018/02-object-rest-properties.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2018/02-object-rest-properties.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | const obj = { 7 | name: 'EcmaScript', 8 | year: 2018, 9 | final: true 10 | }; 11 | 12 | let { name, ...other } = obj; 13 | 14 | console.log(name); // EcmaScript 15 | console.log(other); // { year: 2018, final: true } 16 | -------------------------------------------------------------------------------- /src/2018/03-object-spread-properties.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2018/03-object-spread-properties.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | const name = 'EcmaScript'; 7 | const obj = { 8 | year: 2018, 9 | final: true 10 | }; 11 | 12 | let composed = { name, ...obj }; 13 | 14 | console.log(composed); // { name: "EcmaScript", year: 2018, final: true } 15 | -------------------------------------------------------------------------------- /src/2018/04-async-iterators-for-of.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2018/04-async-iterators-for-of.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | /* eslint no-unused-vars:warn */ 5 | 6 | 'use strict'; 7 | 8 | const test = { 9 | [Symbol.asyncIterator]() { 10 | let current = 0; 11 | return { 12 | next() { 13 | current++; 14 | return new Promise(function (resolve, reject) { 15 | setTimeout( 16 | () => resolve({ done: false, value: current }), 17 | 1000 * Math.random() 18 | ); 19 | }); 20 | } 21 | }; 22 | } 23 | }; 24 | 25 | (async function () { 26 | for await (let n of test) { 27 | console.log(n); 28 | if (n >= 10) { 29 | break; 30 | } 31 | } // 1, 2, 3, ... , 10 32 | 33 | console.log('done'); 34 | })(); 35 | 36 | console.log('End of file...'); 37 | -------------------------------------------------------------------------------- /src/2018/05-1-async-generators-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2018/05-1-async-generators-object.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | const test = { 7 | async *[Symbol.asyncIterator]() { 8 | try { 9 | let current = 1; 10 | while (true) { 11 | await new Promise(resolve => setTimeout(resolve, 1000 * Math.random())); 12 | yield current++; 13 | } 14 | } finally { 15 | console.log('User breaks out of the loop.'); 16 | } 17 | } 18 | }; 19 | 20 | (async function () { 21 | for await (let n of test) { 22 | console.log(n); 23 | if (n >= 10) { 24 | break; 25 | } 26 | } 27 | 28 | console.log('done'); 29 | })(); 30 | 31 | console.log('End of file...'); 32 | -------------------------------------------------------------------------------- /src/2018/05-2-async-generators-function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2018/05-2-async-generators-function.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | async function* asyncTest() { 7 | try { 8 | let current = 1; 9 | while (true) { 10 | await new Promise(resolve => setTimeout(resolve, 1000 * Math.random())); 11 | yield current++; 12 | } 13 | } finally { 14 | console.log('User breaks out of the loop.'); 15 | } 16 | } 17 | 18 | (async function () { 19 | for await (let n of asyncTest()) { 20 | console.log(n); 21 | if (n >= 10) { 22 | break; 23 | } 24 | } 25 | 26 | console.log('done'); 27 | })(); 28 | 29 | console.log('End of file...'); 30 | -------------------------------------------------------------------------------- /src/2019/01-optional-catch-binding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2019/01-optional-catch-binding.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | 'use strict'; 5 | 6 | // Previous: 7 | 8 | try { 9 | throw 'Something went wrong'; 10 | } catch (err) { 11 | console.log('There was an error (traditional catch)'); 12 | } 13 | 14 | // 2019 also allows: 15 | 16 | try { 17 | throw 'Something went wrong'; 18 | } catch { 19 | console.log('There was an error (2019 catch)'); 20 | } 21 | -------------------------------------------------------------------------------- /src/2019/02-1a-string-trimstart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2019/02-1a-string-trimstart.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | const name = ' Hello ECMAScript! '; 5 | 6 | const result = name.trimStart(); 7 | 8 | console.log('--' + result + '--'); 9 | // --Hello ECMAScript! -- 10 | -------------------------------------------------------------------------------- /src/2019/02-1b-string-trimleft.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2019/02-1b-string-trimleft.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | const name = ' Hello ECMAScript! '; 5 | 6 | const result = name.trimLeft(); 7 | 8 | console.log('--' + result + '--'); 9 | // --Hello ECMAScript! -- 10 | -------------------------------------------------------------------------------- /src/2019/02-2a-string-trimend.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2019/02-2a-string-trimend.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | const name = ' Hello ECMAScript! '; 5 | 6 | const result = name.trimEnd(); 7 | 8 | console.log('--' + result + '--'); 9 | // -- Hello ECMAScript!-- 10 | -------------------------------------------------------------------------------- /src/2019/02-2b-string-trimright.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2019/02-2b-string-trimright.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | const name = ' Hello ECMAScript! '; 5 | 6 | const result = name.trimRight(); 7 | 8 | console.log('--' + result + '--'); 9 | // -- Hello ECMAScript!-- 10 | -------------------------------------------------------------------------------- /src/2019/03-1-array-flat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2019/03-1-array-flat.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | const arr = [1, [2, [3], 4], 5, [], 6]; 5 | 6 | console.log(arr.flat()); // [1, 2, [3], 4, 5, 6] 7 | console.log(arr.flat(1)); // [1, 2, [3], 4, 5, 6] 8 | console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6] 9 | -------------------------------------------------------------------------------- /src/2019/04-object-fromentries.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2019/04-object-fromentries.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | const obj1 = Object.fromEntries([ 5 | ['a', 1], 6 | ['b', 2] 7 | ]); 8 | console.log(obj1); // { a: 1, b: 2 } 9 | 10 | const obj2 = { foo: true, bar: false }; 11 | console.log(Object.fromEntries(Object.entries(obj2))); // { foo: true, bar: false } 12 | -------------------------------------------------------------------------------- /src/2020/01-1-dynamic-import-default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2020/01-1-dynamic-import-default.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | const language = 'en'; 5 | 6 | let lib; 7 | switch (language) { 8 | case 'es': { 9 | lib = './01-1-dynamic-import-default_es.js'; 10 | break; 11 | } 12 | default: { 13 | lib = './01-1-dynamic-import-default_en.js'; 14 | } 15 | } 16 | 17 | import(lib) 18 | .then(module => console.log(module.default())) 19 | .catch(error => console.error(error)); 20 | -------------------------------------------------------------------------------- /src/2020/01-1-dynamic-import-default_en.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | export default function greeting() { 5 | return 'Hello'; 6 | } 7 | -------------------------------------------------------------------------------- /src/2020/01-1-dynamic-import-default_es.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | export default function greeting() { 5 | return 'Hola'; 6 | } 7 | -------------------------------------------------------------------------------- /src/2020/01-2-dynamic-import-named.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2020/01-2-dynamic-import-named.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | const language = 'en'; 5 | 6 | let lib; 7 | switch (language) { 8 | case 'es': { 9 | lib = './01-2-dynamic-import-named_es.js'; 10 | break; 11 | } 12 | default: { 13 | lib = './01-2-dynamic-import-named_en.js'; 14 | } 15 | } 16 | 17 | import(lib) 18 | .then(module => console.log(module.greeting())) 19 | .catch(error => console.log(error)); 20 | -------------------------------------------------------------------------------- /src/2020/01-2-dynamic-import-named_en.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | export function greeting() { 5 | return 'Hello'; 6 | } 7 | -------------------------------------------------------------------------------- /src/2020/01-2-dynamic-import-named_es.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | export function greeting() { 5 | return 'Hola'; 6 | } 7 | -------------------------------------------------------------------------------- /src/2020/02-promise-allSettled.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2020/02-promise-allSettled.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | /* eslint no-unused-vars:warn */ 5 | 6 | 'use strict'; 7 | 8 | const p1 = () => 9 | new Promise(function (resolve, reject) { 10 | setTimeout(() => resolve('Resolved 1'), 2000); 11 | }); 12 | const p2 = () => 13 | new Promise(function (resolve, reject) { 14 | setTimeout(() => resolve('Resolved 2'), 1000); 15 | }); 16 | const p3 = () => 17 | new Promise(function (resolve, reject) { 18 | setTimeout(() => reject('Rejected 3'), 1500); 19 | }); 20 | 21 | Promise.allSettled([p1(), p2(), p3()]) 22 | .then(arr => console.log('Success: ' + JSON.stringify(arr))) 23 | .catch(err => console.log('Fail: ' + err)); 24 | 25 | console.log('End of file...'); 26 | -------------------------------------------------------------------------------- /src/2020/03-intl-relativetimeformat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2020/04-optional-chaining-operator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2020/04-optional-chaining-operator.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | // https://github.com/tc39/proposal-optional-chaining 5 | 6 | const user = { 7 | address: null 8 | }; 9 | 10 | console.log('user:', JSON.stringify(user)); 11 | console.log('user.address:', JSON.stringify(user.address)); 12 | 13 | // Would throw without ?. 14 | console.log('user.address.street:', JSON.stringify(user.address?.street)); 15 | 16 | // user: {"address": null} 17 | // user.address: null 18 | // user.address.street: undefined 19 | -------------------------------------------------------------------------------- /src/2020/05-nullish-coalescing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2020/05-nullish-coalescing.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | // https://github.com/tc39/proposal-nullish-coalescing 5 | 6 | console.log('undefined:', undefined ?? 'other'); 7 | console.log('null:', null ?? 'other'); 8 | console.log('"":', '' ?? 'other'); 9 | console.log('0:', 0 ?? 'other'); 10 | console.log('false:', false ?? 'other'); 11 | 12 | // undefined: other 13 | // null: other 14 | // "": 15 | // 0: 0 16 | // false: false 17 | -------------------------------------------------------------------------------- /src/2020/06-bigint.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2020/06-bigint.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | // https://github.com/tc39/proposal-bigint 5 | 6 | /* eslint no-undef:warn */ 7 | 8 | console.log('Max. int:', Number.MAX_SAFE_INTEGER); 9 | console.log( 10 | 'BigInt: ', 11 | 9007199254740992n + BigInt(9007199254740992) /* short + long notation */ 12 | ); 13 | 14 | // 9007199254740991 15 | // 18014398509481984n 16 | -------------------------------------------------------------------------------- /src/2021/01-string-replaceall.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2021/01-string-replaceall.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | //github.com/tc39/proposal-string-replaceall 5 | 6 | const origin = 'this.is.a.test'; 7 | console.log(origin.replaceAll('.', '__')); // this__is__a__test 8 | -------------------------------------------------------------------------------- /src/2021/02-promise-any.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2021/02-promise-any.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | /* eslint no-unused-vars:warn */ 5 | 6 | 'use strict'; 7 | 8 | const p1 = () => 9 | new Promise(function (resolve, reject) { 10 | setTimeout(() => resolve('Resolved 1'), 3000); 11 | }); 12 | const p2 = () => 13 | new Promise(function (resolve, reject) { 14 | setTimeout(() => resolve('Resolved 2'), 2000); 15 | }); 16 | const p3 = () => 17 | new Promise(function (resolve, reject) { 18 | setTimeout(() => reject('Rejected 3'), 1000); 19 | }); 20 | 21 | Promise.any([p1(), p2(), p3()]) 22 | .then(arr => console.log('Success: ' + JSON.stringify(arr))) 23 | .catch(err => console.log('Fail: ' + err)); 24 | 25 | console.log('End of file...'); 26 | -------------------------------------------------------------------------------- /src/2021/03-logical-assignment-operators.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2021/04-numeric-separation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2021/04-numeric-separations.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | // https://github.com/tc39/proposal-numeric-separator 5 | 6 | 'use strict'; 7 | 8 | const unreadable = 1000000.000001; 9 | const readable = 1_000_000.000_001; 10 | 11 | console.log('unreadable === readable', unreadable === readable); 12 | // true 13 | -------------------------------------------------------------------------------- /src/2022/01-private-instance-class-fields.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2022/01-private-instance-class-fields.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | // https://github.com/tc39/proposal-class-fields 5 | 6 | class Test { 7 | #privateValue; 8 | publicValue; 9 | 10 | constructor() { 11 | this.#privateValue = 2; 12 | this.publicValue = 2; 13 | } 14 | 15 | sum() { 16 | return this.#privateValue + this.publicValue; 17 | } 18 | } 19 | 20 | const test = new Test(); 21 | 22 | // Doesn't compile: 23 | //console.log('Private value:', test.#privateValue); 24 | 25 | console.log('Private value:', test.privateValue); 26 | console.log('Public value:', test.publicValue); 27 | console.log('Sum:', test.sum()); 28 | -------------------------------------------------------------------------------- /src/2022/02-static-class-fields.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2022/02-static-class-fields.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | // https://github.com/tc39/proposal-static-class-features/ 5 | 6 | class Test { 7 | static classValue; 8 | } 9 | 10 | Test.classValue = 123; 11 | 12 | console.log('Class field value:', Test.classValue); 13 | -------------------------------------------------------------------------------- /src/2022/03-top-level-await.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/2022/03-top-level-await.mjs: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | // https://github.com/tc39/proposal-top-level-await 5 | 6 | const result = await Promise.resolve('Answer'); 7 | console.log(result); 8 | 9 | const response = await fetch('https://jsonplaceholder.typicode.com/posts'); 10 | const posts = await response.json(); 11 | console.log(posts); 12 | -------------------------------------------------------------------------------- /src/stage-1/01-partial-application.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/stage-1/01-partial-application.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2022 Rick Beerendonk !*/ 3 | 4 | // https://github.com/tc39/proposal-partial-application 5 | 6 | function multiply(a, b) { 7 | return a * b; 8 | } 9 | 10 | const double = multiply(2, ?); // apply from the left 11 | const triple = multiply(?, 3); // apply from the right 12 | 13 | console.log('double(4):', double(4)); // 8 14 | console.log('triple(4):', triple(4)); // 12 15 | -------------------------------------------------------------------------------- /src/stage-1/02-do-expressions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/stage-2/01-pipeline-operator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/stage-2/01-pipeline-operator.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | // https://github.com/tc39/proposal-pipeline-operator/ 5 | // Other proposals: https://github.com/tc39/proposal-pipeline-operator/wiki 6 | 7 | 'use strict'; 8 | 9 | function reverse(str) { 10 | return str.split('').reverse().join(''); 11 | } 12 | 13 | function exclaim(str) { 14 | return str + '!'; 15 | } 16 | 17 | function capitalize(str) { 18 | return str.length === 0 ? str : str[0].toUpperCase() + str.substring(1); 19 | } 20 | 21 | const name = 'ecmascript'; 22 | 23 | // Old (reverse order of application): 24 | // const result = exclaim(reverse(capitalize(name))); 25 | 26 | // New: 27 | const result = name |> capitalize |> reverse |> exclaim; 28 | 29 | console.log(result); 30 | // tpircsamcE! 31 | -------------------------------------------------------------------------------- /src/stage-2/02-record-and-tuple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/stage-3/01-decorators-FIX.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | // https://github.com/tc39/proposal-decorators 5 | 6 | 'use strict'; 7 | 8 | /* eslint no-unused-vars: 0 */ 9 | 10 | @annotation 11 | class MyClass {} 12 | 13 | function annotation(target) { 14 | target.annotated = true; 15 | } 16 | 17 | console.log(MyClass.annotated); 18 | -------------------------------------------------------------------------------- /src/stage-3/01-decorators.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /temp/deep-update.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | // Immutable deep update. 5 | 6 | function update(obj, keyArray, value) { 7 | if (keyArray.length === 0) { 8 | return value; 9 | } 10 | 11 | const first = keyArray.shift(); 12 | return { 13 | ...obj, 14 | [first]: update(obj[first], keyArray, value) 15 | }; 16 | } 17 | 18 | const obj1 = { 19 | data: 0, 20 | level1: { 21 | data: 1, 22 | level2: { 23 | data: 2, 24 | level3: { 25 | data: 3 26 | } 27 | } 28 | } 29 | }; 30 | 31 | const obj2 = update(obj1, 'level1.level2.data'.split('.'), 99); 32 | 33 | console.log(JSON.stringify(obj1)); 34 | console.log(JSON.stringify(obj2)); 35 | -------------------------------------------------------------------------------- /version 5/01 - a. Types/01-undefined-null.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Types - Undefined and Null 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/01 - a. Types/01-undefined-null.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var a; 5 | console.log('a:', a); // undefined 6 | console.log('typeof(a):', typeof a); // undefined 7 | 8 | var b = undefined; 9 | console.log('b:', b); // undefined 10 | console.log('typeof(b): ', typeof b); // undefined 11 | 12 | var c = null; 13 | console.log('c:', c); // null 14 | console.log('typeof(c):', typeof c); // object 15 | -------------------------------------------------------------------------------- /version 5/01 - a. Types/02-boolean.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Types - Boolean 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/01 - a. Types/02-boolean.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var a = true; 5 | console.log('a:', a); // true 6 | console.log('typeof(a):', typeof a); // boolean 7 | 8 | var b = false; 9 | console.log('b:', b); // false 10 | console.log('typeof(b):', typeof b); // boolean 11 | 12 | var c = 1 < 2; 13 | console.log('c:', c); // true 14 | console.log('typeof(c):', typeof c); // boolean 15 | -------------------------------------------------------------------------------- /version 5/01 - a. Types/03-number.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Types - Number 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/01 - a. Types/03-number.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | // Whole number 5 | var a = 123; 6 | console.log('a:', a); // 123 7 | console.log('typeof(a):', typeof a); // number 8 | 9 | // Numbers with fractions 10 | var b = 4.56; 11 | console.log('b:', b); // 4.56 12 | console.log('typeof(b):', typeof b); // number 13 | 14 | // Infinity 15 | var c = 1 / 0; 16 | console.log('c:', c); // Infinity 17 | console.log('typeof(c):', typeof c); // number 18 | 19 | // Not a Number 20 | var d = 'other' / 1; 21 | console.log('d:', d); // NaN 22 | console.log('typeof(d):', typeof d); // number 23 | -------------------------------------------------------------------------------- /version 5/01 - a. Types/04-string.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Types - String 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/01 - a. Types/04-string.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | // Single quotes 5 | var a = 'one'; 6 | console.log('a:', a); // one 7 | console.log('typeof(a):', typeof a); // string 8 | 9 | // Double quotes 10 | var b = 'two'; 11 | console.log('b:', b); // two 12 | console.log('typeof(b):', typeof b); // string 13 | 14 | // One character 15 | var c = 'c'; 16 | console.log('c:', c); // c 17 | console.log('typeof(c):', typeof c); // string 18 | -------------------------------------------------------------------------------- /version 5/01 - b. Type Conversions/01-toBoolean.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Type Conversions - To Boolean 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/01 - b. Type Conversions/01-toBoolean.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | console.log('undefined:', Boolean(undefined)); // undefined: false 5 | console.log('null:', Boolean(null)); // null: false 6 | 7 | console.log('-1:', Boolean(-1)); // -1: true 8 | console.log('0:', Boolean(0)); // 0: false 9 | console.log('1:', Boolean(1)); // 1: true 10 | 11 | console.log("'':", Boolean('')); // '': false 12 | console.log("' ':", Boolean(' ')); // ' ': true 13 | console.log("'0':", Boolean('0')); // '0': true 14 | console.log("'1':", Boolean('1')); // '1': true 15 | console.log("'false':", Boolean('false')); // 'false': true 16 | console.log("'true':", Boolean('true')); // 'true': true 17 | -------------------------------------------------------------------------------- /version 5/01 - b. Type Conversions/02-toNumber.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Type Conversions - To Number 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/01 - b. Type Conversions/02-toNumber.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | console.log('undefined:', Number(undefined)); // undefined: NaN 5 | console.log('null:', Number(null)); // null: 0 6 | 7 | console.log('false:', Number(false)); // false: 0 8 | console.log('true:', Number(true)); // true: 1 9 | 10 | console.log("'':", Number('')); // '': 0 11 | console.log("'0':", Number('0')); // '0': 0 12 | console.log("'1':", Number('1')); // '1': 1 13 | console.log("'2.34':", Number('2.34')); // '2.34': 2.34 14 | console.log("'false':", Number('false')); // 'false': NaN 15 | console.log("'true':", Number('true')); // 'true': NaN 16 | console.log("'Infinity':", Number('Infinity')); // 'Infinity': Infinity 17 | console.log("'infinity':", Number('infinity')); // 'infinity': NaN 18 | -------------------------------------------------------------------------------- /version 5/01 - b. Type Conversions/03-toString.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Type Conversions - To Boolean 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/01 - b. Type Conversions/03-toString.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | console.log('undefined:', String(undefined)); // undefined: undefined 5 | console.log('null:', String(null)); // null: null 6 | 7 | console.log('false:', String(false)); // false: false 8 | console.log('true:', String(true)); // true: true 9 | 10 | console.log('0:', String(0)); // 0: 0 11 | console.log('1:', String(1)); // 1: 1 12 | console.log('2.34:', String(2.34)); // 2.34: 2.34 13 | console.log('NaN:', String(NaN)); // NaN: NaN 14 | console.log('Infinity:', String(1 / 0)); // Infinity: Infinity 15 | -------------------------------------------------------------------------------- /version 5/02 - a. Arithmetic Operators/01-numbers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Arithmetic Operators - Numbers 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - a. Arithmetic Operators/01-numbers.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | console.log('Numbers: 7 + 2:', 7 + 2); // 9 5 | console.log('Numbers: 7 - 2:', 7 - 2); // 5 6 | console.log('Numbers: 7 * 2:', 7 * 2); // 14 7 | console.log('Numbers: 7 / 2:', 7 / 2); // 3.5 8 | console.log('Numbers: 7 % 2:', 7 % 2); // 1 9 | -------------------------------------------------------------------------------- /version 5/02 - a. Arithmetic Operators/02-strings.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Arithmetic Operators - Strings 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - a. Arithmetic Operators/02-strings.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | console.log("Strings: 'a' + 'b':", 'a' + 'b'); // ab 5 | -------------------------------------------------------------------------------- /version 5/02 - b. Assignment Operators/01-numbers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Assignment Operators - Numbers 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - b. Assignment Operators/01-numbers.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var a = 7; 5 | console.log('a:', a); // 7 6 | 7 | console.log('Numbers: a = 2:', (a = 2)); // 2 8 | 9 | a = 7; 10 | console.log('Numbers: a += 2:', (a += 2)); // 9 11 | 12 | a = 7; 13 | console.log('Numbers: a -= 2:', (a -= 2)); // 5 14 | 15 | a = 7; 16 | console.log('Numbers: a *= 2:', (a *= 2)); // 14 17 | 18 | a = 7; 19 | console.log('Numbers: a /= 2:', (a /= 2)); // 3.5 20 | 21 | a = 7; 22 | console.log('Numbers: a %= 2:', (a %= 2)); // 1 23 | -------------------------------------------------------------------------------- /version 5/02 - b. Assignment Operators/02-strings.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Assignment Operators - Strings 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - b. Assignment Operators/02-strings.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var s = 'a'; 5 | console.log('s:', s); // a 6 | 7 | console.log('String: s = "b":', (s = 'b')); // b 8 | 9 | s = 'a'; 10 | console.log('String: s += "c":', (s += 'c')); // ac 11 | -------------------------------------------------------------------------------- /version 5/02 - c. Comparison Operators/01-equality.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Comparison Operators - Equality 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - c. Comparison Operators/01-equality.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var n = 1; 5 | var s = '1'; 6 | 7 | // Equality 8 | console.log(n == s); // true 9 | 10 | // Strict Equality / Identity 11 | console.log(n === s); // false 12 | -------------------------------------------------------------------------------- /version 5/02 - c. Comparison Operators/02-inequality.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Comparison Operators - Inequality 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - c. Comparison Operators/02-inequality.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var n = 1; 5 | var s = '1'; 6 | 7 | // Inequality 8 | console.log(n != s); // false 9 | 10 | // Strict Inequality / Identity 11 | console.log(n !== s); // true 12 | -------------------------------------------------------------------------------- /version 5/02 - c. Comparison Operators/03-greater.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Comparison Operators - Greater than 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - c. Comparison Operators/03-greater.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var a = 1; 5 | var b = 1; 6 | var c = 2; 7 | 8 | // 1 > 1 9 | console.log(a > b); // false 10 | 11 | // 1 > 2 12 | console.log(a > c); // false 13 | 14 | // 2 > 1 15 | console.log(c > a); // true 16 | -------------------------------------------------------------------------------- /version 5/02 - c. Comparison Operators/04-greater-equal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Comparison Operators - Greater than or equal 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - c. Comparison Operators/04-greater-equal.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var a = 1; 5 | var b = 1; 6 | var c = 2; 7 | 8 | // 1 > 1 9 | console.log(a >= b); // true 10 | 11 | // 1 > 2 12 | console.log(a >= c); // false 13 | 14 | // 2 > 1 15 | console.log(c >= a); // true 16 | -------------------------------------------------------------------------------- /version 5/02 - c. Comparison Operators/05-less.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Comparison Operators - Less than 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - c. Comparison Operators/05-less.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var a = 2; 5 | var b = 2; 6 | var c = 1; 7 | 8 | // 2 < 2 9 | console.log(a < b); // false 10 | 11 | // 2 < 1 12 | console.log(a < c); // false 13 | 14 | // 1 < 2 15 | console.log(c < a); // true 16 | -------------------------------------------------------------------------------- /version 5/02 - c. Comparison Operators/06-less-equal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Comparison Operators - Less than or equal 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - c. Comparison Operators/06-less-equal.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var a = 2; 5 | var b = 2; 6 | var c = 1; 7 | 8 | // 2 <= 2 9 | console.log(a <= b); // true 10 | 11 | // 2 <= 1 12 | console.log(a <= c); // false 13 | 14 | // 1 <= 2 15 | console.log(c <= a); // true 16 | -------------------------------------------------------------------------------- /version 5/02 - d. Logical Operators/01-and.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Logical Operators - And 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - d. Logical Operators/01-and.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | console.log(true && true); // true 5 | console.log(true && false); // false 6 | console.log(false && true); // false 7 | console.log(false && false); // false 8 | -------------------------------------------------------------------------------- /version 5/02 - d. Logical Operators/02-or.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Logical Operators - Or 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - d. Logical Operators/02-or.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | console.log(true || true); // true 5 | console.log(true || false); // true 6 | console.log(false || true); // true 7 | console.log(false || false); // false 8 | -------------------------------------------------------------------------------- /version 5/02 - d. Logical Operators/03-not.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Logical Operators - Not 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - d. Logical Operators/03-not.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | console.log(!true); // false 5 | console.log(!false); // true 6 | -------------------------------------------------------------------------------- /version 5/02 - d. Logical Operators/04-parenthesis.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Logical Operators - And 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/02 - d. Logical Operators/04-parenthesis.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2023 Rick Beerendonk !*/ 3 | 4 | var a = false; 5 | var b = true; 6 | var c = true; 7 | 8 | if ((a && b) || c) { 9 | // Executed 10 | console.log('First'); 11 | } 12 | 13 | if (a && (b || c)) { 14 | // NOT executed 15 | console.log('Second'); 16 | } 17 | 18 | // First 19 | -------------------------------------------------------------------------------- /version 5/03 - Conditional Statements/01-if.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Conditional Statements - if 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/03 - Conditional Statements/01-if.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var date = new Date(); 5 | var time = date.getHours(); 6 | 7 | if (time < 12) { 8 | console.log('Good morning'); 9 | } 10 | 11 | console.log('Welcome!'); 12 | -------------------------------------------------------------------------------- /version 5/03 - Conditional Statements/02-if-else.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Conditional Statements - if-else 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/03 - Conditional Statements/02-if-else.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var date = new Date(); 5 | var time = date.getHours(); 6 | 7 | if (time < 12) { 8 | console.log('Good morning'); 9 | } else { 10 | console.log('Good day'); 11 | } 12 | 13 | console.log('Welcome!'); 14 | -------------------------------------------------------------------------------- /version 5/03 - Conditional Statements/03-if-else-if.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Conditional Statements - if-else-if 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/03 - Conditional Statements/03-if-else-if.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var date = new Date(); 5 | var time = date.getHours(); 6 | 7 | if (time < 6) { 8 | console.log('Good night'); 9 | } else if (time < 12) { 10 | console.log('Good morning'); 11 | } else if (time < 18) { 12 | console.log('Good afternoon'); 13 | } else { 14 | console.log('Good evening'); 15 | } 16 | -------------------------------------------------------------------------------- /version 5/03 - Conditional Statements/04-inline-if-else.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Conditional Statements - Inline if-else 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/03 - Conditional Statements/04-inline-if-else.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var date = new Date(); 5 | var time = date.getHours(); 6 | 7 | console.log(time < 12 ? 'Good morning' : 'Good day'); 8 | -------------------------------------------------------------------------------- /version 5/03 - Conditional Statements/05-switch-number.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Conditional Statements - switch - number 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/03 - Conditional Statements/05-switch-number.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var date = new Date(); 5 | var month = date.getMonth(); 6 | 7 | switch (month) { 8 | case 11: 9 | case 0: 10 | case 1: 11 | console.log('Winter'); 12 | break; 13 | 14 | case 2: 15 | case 3: 16 | case 4: 17 | console.log('Spring'); 18 | break; 19 | 20 | case 5: 21 | case 6: 22 | case 7: 23 | console.log('Summer'); 24 | break; 25 | 26 | default: 27 | console.log('Autumn'); 28 | break; 29 | } 30 | -------------------------------------------------------------------------------- /version 5/03 - Conditional Statements/06-switch-string.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Conditional Statements - switch - string 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/03 - Conditional Statements/06-switch-string.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var country = 'The Netherlands'; 5 | 6 | switch (country) { 7 | case 'The Netherlands': 8 | case 'Belgium': 9 | case 'Luxembourg': 10 | console.log(country + ' is in the Benelux'); 11 | break; 12 | 13 | case 'Norway': 14 | case 'Sweden': 15 | case 'Denmark': 16 | console.log(country + ' is in Scandinavia'); 17 | break; 18 | 19 | default: 20 | console.log(country + " isn't in the Benelux or in Scandinavia"); 21 | break; 22 | } 23 | -------------------------------------------------------------------------------- /version 5/04 - Loops/01-while.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Loops - while 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/04 - Loops/01-while.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var i = 1; 5 | 6 | while (i < 5) { 7 | console.log('Iteration ' + i); 8 | i++; 9 | } 10 | 11 | // Iteration 1 12 | // Iteration 2 13 | // Iteration 3 14 | // Iteration 4 15 | -------------------------------------------------------------------------------- /version 5/04 - Loops/02-do-while.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Loops - do-while 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/04 - Loops/02-do-while.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var i = 10; 5 | 6 | do { 7 | console.log('Iteration ' + i); 8 | i++; 9 | } while (i < 5); 10 | 11 | // Iteration 10 12 | -------------------------------------------------------------------------------- /version 5/04 - Loops/03-for.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Loops - for 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/04 - Loops/03-for.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | // for (start [including]; stop [excluding]; change) 5 | for (let i = 0; i < 5; i++) { 6 | console.log('Iteration ' + i); 7 | } 8 | 9 | // Iteration 0 10 | // Iteration 1 11 | // Iteration 2 12 | // Iteration 3 13 | // Iteration 4 14 | -------------------------------------------------------------------------------- /version 5/04 - Loops/04-for-in-array.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Loops - for-in - array 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/04 - Loops/04-for-in-array.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var players = new Array(); 5 | players[0] = 'Rafael Nadal'; 6 | players[2] = 'Roger Federer'; 7 | players[5] = 'Serena Williams'; 8 | 9 | console.log(JSON.stringify(players)); 10 | 11 | for (var index in players) { 12 | console.log('Tennis player: ' + players[index]); 13 | } 14 | -------------------------------------------------------------------------------- /version 5/04 - Loops/05-for-in-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Loops - for-in - object 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/04 - Loops/05-for-in-object.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var town = { 5 | name: 'Hillegom', 6 | age: 1000, 7 | country: 'The Netherlands' 8 | }; 9 | 10 | for (var prop in town) { 11 | console.log(prop + ': ' + town[prop]); 12 | } 13 | -------------------------------------------------------------------------------- /version 5/04 - Loops/06-jumps.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Loops - Jumps 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/04 - Loops/06-jumps.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | for (var i = 1; i < 20; i++) { 5 | if (i % 10 === 0) break; 6 | 7 | if (i % 3 === 0) continue; 8 | 9 | console.log('Iteration: ' + i); 10 | } 11 | 12 | console.log('Done'); 13 | 14 | // Iteration: 1 15 | // Iteration: 2 16 | // Iteration: 4 17 | // Iteration: 5 18 | // Iteration: 7 19 | // Iteration: 8 20 | // Done 21 | -------------------------------------------------------------------------------- /version 5/05 - Functions/01-function-without-return.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Functions - Without return 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/05 - Functions/01-function-without-return.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | function test(a, b) { 5 | console.log(a); // true 6 | console.log(b); // 2 7 | } 8 | 9 | test(true, 2); 10 | -------------------------------------------------------------------------------- /version 5/05 - Functions/02-function-with-return.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Functions - With return 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/05 - Functions/02-function-with-return.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | function add(a, b) { 5 | return a + b; 6 | } 7 | 8 | var sum = add(1, 2); 9 | 10 | console.log(sum); // 3 11 | -------------------------------------------------------------------------------- /version 5/05 - Functions/03-function-less-values.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Functions - Less parameter values 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/05 - Functions/03-function-less-values.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | function test(a, b) { 5 | console.log(a); // true 6 | console.log(b); // undefined 7 | } 8 | 9 | test(true); 10 | -------------------------------------------------------------------------------- /version 5/05 - Functions/04-function-more-values.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Functions - More parameter values 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/05 - Functions/04-function-more-values.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | function test(a, b) { 5 | console.log(a); // true 6 | console.log(b); // 2 7 | } 8 | 9 | test(true, 2, 'three'); 10 | -------------------------------------------------------------------------------- /version 5/05 - Functions/05-function-more-values-arguments.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Functions - More parameter values - Arguments 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/05 - Functions/05-function-more-values-arguments.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | function test() { 5 | // var arguments = [true, 2, "three"]; // But not a real array! 6 | 7 | for (let i = 0; i < arguments.length; i++) { 8 | console.log(arguments[i]); 9 | } 10 | // true 11 | // 2 12 | // three 13 | } 14 | 15 | test(true, 2, 'three'); 16 | -------------------------------------------------------------------------------- /version 5/05 - Functions/06-function-default-values.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Functions - Default values 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/05 - Functions/06-function-default-values.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | function test(a, b) { 5 | if (a === undefined) { 6 | a = 'no value'; 7 | } 8 | 9 | if (b === undefined) { 10 | b = 0; 11 | } 12 | 13 | console.log(a); 14 | console.log(b); 15 | } 16 | 17 | test(true); 18 | 19 | console.log('--'); 20 | 21 | test(undefined, 123); 22 | -------------------------------------------------------------------------------- /version 5/05 - Functions/07-function-call.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Functions - Call 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/05 - Functions/07-function-call.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | function foo(a, b, c) { 5 | console.log(JSON.stringify(this)); 6 | console.log(a); 7 | console.log(b); 8 | console.log(c); 9 | } 10 | 11 | foo.call({ name: 'this' }, 1, 2); 12 | // {"name":"this"} 13 | // 1 14 | // 2 15 | // undefined 16 | -------------------------------------------------------------------------------- /version 5/05 - Functions/08-function-apply.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Functions - Apply 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/05 - Functions/08-function-apply.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | function foo(a, b, c) { 5 | console.log(JSON.stringify(this)); 6 | console.log(a); 7 | console.log(b); 8 | console.log(c); 9 | } 10 | 11 | foo.apply({ name: 'this' }, [1, 2]); 12 | // {"name":"this"} 13 | // 1 14 | // 2 15 | // undefined 16 | -------------------------------------------------------------------------------- /version 5/05 - Functions/09-function-bind.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Functions - Bind 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/05 - Functions/09-function-bind.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2019 Rick Beerendonk !*/ 3 | 4 | function foo() { 5 | console.log(JSON.stringify(this)); 6 | } 7 | 8 | var foo2 = foo.bind({ name: 'bind' }); 9 | 10 | foo2.apply({ name: 'this' }); 11 | // {"name":"bind"} 12 | -------------------------------------------------------------------------------- /version 5/06 - Object/01-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Object - Object 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/06 - Object/01-object.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var o = new Object(); 5 | 6 | o.prop1 = true; 7 | o.prop2 = 2; 8 | o.prop3 = 'three'; 9 | 10 | console.log(JSON.stringify(o)); // {"prop1":true,"prop2":2,"prop3":"three"} 11 | 12 | delete o.prop2; 13 | 14 | console.log(JSON.stringify(o)); // {"prop1":true,"prop3":"three"} 15 | -------------------------------------------------------------------------------- /version 5/06 - Object/02-object-like-a-map.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Object - Object like a map 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/06 - Object/02-object-like-a-map.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var o = new Object(); 5 | 6 | o['prop1'] = true; 7 | o['prop2'] = 2; 8 | o['prop3'] = 'three'; 9 | 10 | console.log(JSON.stringify(o)); // {"prop1":true,"prop2":2,"prop3":"three"} 11 | 12 | delete o.prop2; 13 | 14 | console.log(JSON.stringify(o)); // {"prop1":true,"prop3":"three"} 15 | -------------------------------------------------------------------------------- /version 5/06 - Object/03-object-notation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Object - Object notation 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/06 - Object/03-object-notation.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var o = { 5 | prop1: true, 6 | prop2: 2, 7 | prop3: 'three' 8 | }; 9 | 10 | console.log(JSON.stringify(o)); // {"prop1":true,"prop2":2,"prop3":"three"} 11 | -------------------------------------------------------------------------------- /version 5/06 - Object/04-object-seal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Object - Object freeze 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/06 - Object/04-object-seal.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | var o = new Object(); 5 | 6 | o.prop1 = true; 7 | o.prop2 = 2; 8 | o.prop3 = 'three'; 9 | 10 | console.log(JSON.stringify(o)); // {"prop1":true,"prop2":2,"prop3":"three"} 11 | 12 | Object.seal(o); 13 | 14 | // Possible 15 | o.prop3 = 'THIRD'; 16 | 17 | // Not possible 18 | delete o.prop2; 19 | o.prop4 = 444; 20 | 21 | console.log(JSON.stringify(o)); // {"prop1":true,"prop3":"three"} 22 | -------------------------------------------------------------------------------- /version 5/06 - Object/05-object-freeze.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Object - Object seal 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/06 - Object/05-object-freeze.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | var o = new Object(); 5 | 6 | o.prop1 = true; 7 | o.prop2 = 2; 8 | o.prop3 = 'three'; 9 | 10 | console.log(JSON.stringify(o)); // {"prop1":true,"prop2":2,"prop3":"three"} 11 | 12 | Object.freeze(o); 13 | 14 | // No changes possible 15 | o.prop3 = 'THIRD'; 16 | delete o.prop2; 17 | o.prop4 = 444; 18 | 19 | console.log(JSON.stringify(o)); // {"prop1":true,"prop2":2,"prop3":"three"} 20 | -------------------------------------------------------------------------------- /version 5/06 - Object/06-instanceof.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Object - instanceof 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/06 - Object/06-instanceof.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | console.log(1 instanceof Number); // false 5 | console.log(new Number(1) instanceof Number); // true 6 | console.log(); 7 | 8 | console.log('a' instanceof String); // false 9 | console.log(new String('a') instanceof String); // true 10 | console.log(); 11 | 12 | console.log(true instanceof Boolean); // false 13 | console.log(new Boolean(true) instanceof Boolean); // true 14 | console.log(); 15 | 16 | console.log(new Object() instanceof Object); // true 17 | console.log(new Object() instanceof Array); // false 18 | console.log(); 19 | 20 | console.log(new Array() instanceof Object); // true 21 | console.log(new Array() instanceof Array); // true 22 | console.log(); 23 | -------------------------------------------------------------------------------- /version 5/07 - Array/01-array.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Array - Array 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/07 - Array/01-array.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var a = new Array(); 5 | 6 | a[0] = true; 7 | a[1] = 2; 8 | a.push('three'); 9 | 10 | console.log(JSON.stringify(a)); // [true,2,"three"] 11 | console.log(a.length); // 3 12 | 13 | delete a[1]; 14 | 15 | console.log(JSON.stringify(a)); // [true,null,"three"] 16 | console.log(a.length); // 3 17 | -------------------------------------------------------------------------------- /version 5/07 - Array/02-array-notation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Array - Array notation 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/07 - Array/02-array-notation.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | var a = [true, 2, 'three']; 5 | 6 | console.log(JSON.stringify(a)); // [true,2,"three"] 7 | console.log(a.length); // 3 8 | -------------------------------------------------------------------------------- /version 5/07 - Array/03-array-push.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Array - Array push() 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/07 - Array/03-array-push.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | var a = [true, 2, 'three']; 5 | 6 | a.push(444); 7 | 8 | console.log(JSON.stringify(a)); // [true,2,"three",444] 9 | console.log(a.length); // 4 10 | -------------------------------------------------------------------------------- /version 5/07 - Array/04-array-pop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Array - Array pop() 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/07 - Array/04-array-pop.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2023 Rick Beerendonk !*/ 3 | 4 | var a = [true, 2, 'three']; 5 | 6 | console.log(a.pop()); // three 7 | 8 | console.log(JSON.stringify(a)); // [true,2] 9 | console.log(a.length); // 2 10 | -------------------------------------------------------------------------------- /version 5/07 - Array/05-array-concat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Array - Array concat() 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/07 - Array/05-array-concat.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2020 Rick Beerendonk !*/ 3 | 4 | var a = [true, 2, 'three']; 5 | 6 | var newArray = a.concat([false, 444]); 7 | 8 | console.log(JSON.stringify(newArray)); // [true,2,"three",false,444] 9 | console.log(newArray.length); // 5 10 | -------------------------------------------------------------------------------- /version 5/08 - Date/01-date.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Date - Date 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/08 - Date/01-date.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2021 Rick Beerendonk !*/ 3 | 4 | var d = new Date(); 5 | 6 | console.log(d); // For example: 2021-10-10T08:33:58.560Z 7 | -------------------------------------------------------------------------------- /version 5/08 - Date/02-now.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Date - Now 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/08 - Date/02-now.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2021 Rick Beerendonk !*/ 3 | 4 | // Milliseconds since 1 January, 1970, 00:00:00 UTC, 5 | // with leap seconds ignored 6 | var d = Date.now(); 7 | 8 | console.log(d); // For example: 1633854993157 9 | -------------------------------------------------------------------------------- /version 5/08 - Date/03-to-string.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Date - To String 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/08 - Date/03-to-string.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2021 Rick Beerendonk !*/ 3 | 4 | var d = new Date(); 5 | 6 | console.log(d.toString()); // Sun Oct 10 2021 10:40:59 GMT+0200 (Central European Summer Time) 7 | console.log(d.toDateString()); // Sun Oct 10 2021 8 | console.log(d.toTimeString()); // 10:40:59 GMT+0200 (Central European Summer Time) 9 | 10 | console.log(d.toLocaleString()); // 10/10/2021, 10:40:59 11 | console.log(d.toLocaleDateString()); // 10/10/2021 12 | console.log(d.toLocaleTimeString()); // 10:40:59 13 | 14 | console.log(d.toUTCString()); // Sun, 10 Oct 2021 08:40:59 GMT 15 | -------------------------------------------------------------------------------- /version 5/08 - Date/04-parts-get.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Date - Parts (Get) 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/08 - Date/05-parts-set.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Date - Parts (Set) 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/08 - Date/05-parts-set.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2021 Rick Beerendonk !*/ 3 | 4 | var d = new Date(); 5 | 6 | // Local 7 | console.log(d.setFullYear(2000)); // Returns: Milliseconds since 1970 8 | console.log(d.setMonth(1)); 9 | console.log(d.setDate(2)); 10 | console.log(d.setHours(3)); 11 | console.log(d.setMinutes(4)); 12 | console.log(d.setSeconds(5)); 13 | console.log(d.setMilliseconds(6)); 14 | 15 | // UTC 16 | console.log(d.setUTCFullYear(1990)); 17 | console.log(d.setUTCMonth(1)); 18 | console.log(d.setUTCDate(2)); 19 | console.log(d.setUTCHours(3)); 20 | console.log(d.setUTCMinutes(4)); 21 | console.log(d.setUTCSeconds(5)); 22 | console.log(d.setUTCMilliseconds(6)); 23 | -------------------------------------------------------------------------------- /version 5/09 - Exception Handling/01-try-catch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Exception Handling - try-catch 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/09 - Exception Handling/01-try-catch.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | /* eslint no-unreachable: warn */ 5 | 6 | try { 7 | console.log('before error'); 8 | throw 'Something went wrong'; 9 | console.log('after error'); 10 | } catch (err) { 11 | console.log('There was an error: ' + err); 12 | } 13 | -------------------------------------------------------------------------------- /version 5/09 - Exception Handling/02-try-catch-finally.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Exception Handling - try-finally-catch 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/09 - Exception Handling/02-try-catch-finally.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | /* eslint no-unreachable: warn */ 5 | 6 | try { 7 | console.log('before error'); 8 | throw 'Something went wrong'; 9 | console.log('after error'); 10 | } catch (err) { 11 | console.log('There was an error: ' + err); 12 | } finally { 13 | console.log('after error & always executed'); 14 | } 15 | -------------------------------------------------------------------------------- /version 5/09 - Exception Handling/03-try-finally.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Exception Handling - try-finally 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/09 - Exception Handling/03-try-finally.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2018 Rick Beerendonk !*/ 3 | 4 | /* eslint no-unreachable: warn */ 5 | 6 | try { 7 | console.log('before error'); 8 | throw 'Something went wrong'; 9 | console.log('after error'); 10 | } finally { 11 | console.log('after error & always executed'); 12 | } 13 | -------------------------------------------------------------------------------- /version 5/09 - Exception Handling/04-rethrow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Exception Handling - Rethrow 10 | 11 | 12 | 13 | 14 | 15 |
Open the console!
16 | 17 | 18 | -------------------------------------------------------------------------------- /version 5/09 - Exception Handling/04-rethrow.js: -------------------------------------------------------------------------------- 1 | /*! European Union Public License version 1.2 !*/ 2 | /*! Copyright © 2022 Rick Beerendonk !*/ 3 | 4 | /* eslint no-unreachable: warn */ 5 | 6 | // See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause#rethrowing_an_error_with_a_cause 7 | 8 | try { 9 | throw new Error('Something went wrong'); 10 | } catch (err) { 11 | throw new Error('We found a problem', { cause: err }); 12 | } 13 | -------------------------------------------------------------------------------- /yarn-install-all.sh: -------------------------------------------------------------------------------- 1 | find . -type d -maxdepth 6 -exec test -e "{}/package.json" ';' -not -path "*node_modules*" -exec bash -c "cd '{}' && echo $path && pwd && yarn install" \; 2 | -------------------------------------------------------------------------------- /yarn-upgrade-latest-all.sh: -------------------------------------------------------------------------------- 1 | find . -type d -maxdepth 6 -exec test -e "{}/package.json" ';' -not -path "*node_modules*" -exec bash -c "cd '{}' && echo $path && pwd && yarn upgrade --latest" \; 2 | --------------------------------------------------------------------------------