{"id":21696315,"url":"https://github.com/dinanathsj29/es6-ecmascript6-ecmascript2015-tutorial","last_synced_at":"2025-10-09T11:11:53.446Z","repository":{"id":121990053,"uuid":"177831259","full_name":"dinanathsj29/ES6-ECMAScript6-ECMAScript2015-tutorial","owner":"dinanathsj29","description":"A ES6-ECMAScript6-ECMAScript2015-tutorial, An introduction to latest JavaScript programming feature/techniques, step-by-step guide to ES6-ECMAScript6-ECMAScript2015 - A future of JavaScript","archived":false,"fork":false,"pushed_at":"2019-08-10T17:16:13.000Z","size":2502,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-27T02:55:30.521Z","etag":null,"topics":["ecma6","ecmascript2015","ecmascript6","es6","es6-classes","es6-fat-arrow","es6-for-loop","es6-for-of-loop","es6-generators","es6-javascript","es6-modules","es6-promise","es6-promises","es6-rest-operator","es6-spread-operator","es6-tutorial","fat-arrow-function","javascript","javascript-library"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dinanathsj29.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-26T16:48:54.000Z","updated_at":"2023-01-19T18:53:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"ff6d7cc7-66d3-4199-b566-0741411f0de5","html_url":"https://github.com/dinanathsj29/ES6-ECMAScript6-ECMAScript2015-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dinanathsj29/ES6-ECMAScript6-ECMAScript2015-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2FES6-ECMAScript6-ECMAScript2015-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2FES6-ECMAScript6-ECMAScript2015-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2FES6-ECMAScript6-ECMAScript2015-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2FES6-ECMAScript6-ECMAScript2015-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinanathsj29","download_url":"https://codeload.github.com/dinanathsj29/ES6-ECMAScript6-ECMAScript2015-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2FES6-ECMAScript6-ECMAScript2015-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001290,"owners_count":26083058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ecma6","ecmascript2015","ecmascript6","es6","es6-classes","es6-fat-arrow","es6-for-loop","es6-for-of-loop","es6-generators","es6-javascript","es6-modules","es6-promise","es6-promises","es6-rest-operator","es6-spread-operator","es6-tutorial","fat-arrow-function","javascript","javascript-library"],"created_at":"2024-11-25T19:19:26.699Z","updated_at":"2025-10-09T11:11:53.429Z","avatar_url":"https://github.com/dinanathsj29.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg src=\"_images_es6_features_tutorial/es6_logo_2.jpg\" alt=\"es6 logo\" title=\"es6 logo\" width=\"200\" /\u003e\n\u003c/p\u003e\n\nJavaScript ES6-ECMAScript 6-ECMAScript 2015 Features for everyone\n=====================\n`ES6-ECMAScript 6-ECMAScript 2015` is the latest version of the specification for JavaScript. Here will meet the `future of JavaScript`: as JavaScript follows ECMAScript standards. This course takes a look at the latest features of ECMAScript 6 (aka ES6) and how these changes are making JavaScript even more powerful and concise. Will learn/review the `new keywords-let const` and `function/object syntax` and shows how the new `class, module syntax` can be used with JavaScript library like Angular, React, Node. You'll also review the ES6 compiling tool `Typescript`,`Babel` and `Scratch JS` and also use these to make your ES6 code compatible with modern browsers.\n\nPrerequisites for current course / What you need to know\n=====================\n`ES6-ECMAScript 6-ECMAScript 2015` introduces us to the newest language features that can be used in JavaScript code. Due to this, I assume you have some working knowledge/understanding of JavaScript. If you haven't, will recommend watching [JavaScript Essentials Tutorial for beginners](https://github.com/dinanathsj29/javascript-beginners-tutorial). Also, some basic knowledge of HyperText Markup Language (HTML) [HTML5 Essentials](https://github.com/dinanathsj29/html5-essentials-tutorial) and [CSS3 Fundamentals](https://github.com/dinanathsj29/css3-fundamentals-tutorial) will likely be useful in your work with ES6. Finally, you will be using a bit of Angular.js, React.js, and Node.js but nothing that requires deep/advanced knowledge.\n\nTopics include\n===================== \n1. [Course Introduction](#section-1-course-introduction)\n2. [Introduction to ES6-ECMAScript 6](#section-2-introduction-to-es6-ecmascript-6)\n3. [Transpiling ES6-ECMAScript 6](#section-3-transpiling-es6-ecmascript-6)\n4. [New Variables—Creation Updating and Scoping](#section-4-new-variables-creation-updating-and-scoping)\n5. [Function Improvements objects](#section-5-function-improvements-objects)\n6. [Extended Parameter Handling](#section-6-extended-parameter-handling)\n7. [Enhancing object literals](#section-7-enhancing-object-literals)\n8. [Template Strings Literals](#section-8-template-strings-literals)\n9. [Destructuring Assignment](#section-9-destructuring-assignment)\n10. [Loops](#section-10-loops)\n11. [Classes](#section-11-classes)\n12. [Modules](#section-12-modules)\n13. [Generators](#section-13-generators)\n14. [Sets and WeakSets](#section-14-sets-and-weaksets)\n15. [Map and Weak Map](#section-15-map-and-weak-map)\n16. [Symbols](#section-16-symbols)\n17. [Iterables and Iterators](#section-17-iterables-and-iterators)\n18. [String methods](#section-18-string-methods)\n19. [Reference](#section-19-reference)\n20. [Whats Next Step?](#section-20-whats-next-step)\n\nSection 1. Course Introduction\n=====================\n1.1. Welcome\n---------------------\nHi All, I'm **`Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional`**, I wanna welcome you to `ES6-ECMAScript 6-ECMAScript 2015`. In this course/tutorial will go over how to start with using the latest ES6 features right with the bang. Will dive into the specifics of ES6 and new features it includes. We'll look at new keywords, syntax, and operators that can be used to simplify code structure. At the end we'll take a look at class, module syntax in ES6 and how that can be used immediately with very popular JavaScript library/frameworks like Angular, React, Node, etc. Let us explore and learn some pretty exciting stuff so let's go ahead and get started with `ES6-ECMAScript 6-ECMAScript 2015`.\n\n`ES6-ECMAScript 6-ECMAScript 2015` will introduce us to the newest language features that can be used in JavaScript code - The Modern JavaScript.\n\n1.2. Who is this for?\n---------------------\nThis course is for anyone and everyone, Almost everyone! who is interested in boost skills and further career - by learning new latest programming/coding standards/features/syntaxes/keywords introduced in the latest version of JavaScript to become a hi-tech developer.\n\nSection 2. Introduction to ES6-ECMAScript 6\n=====================\n2.1. ES5/ECMAScript 5\n---------------------\n- JavaScript is standard implementations of standard specifications called ECMAScript\n- The last ECMAScript Version is 5.0 ie. ES5\n- JavaScript = Language in practice, ES5/ES6 = Langauge standards\n\n2.2. What is ES6-ECMAScript 6-ECMAScript 2015\n---------------------\n- `1995` - JavaScript invented/created by `“Brandan Eich”` at `Netscape` originally named as `\"LiveScript\"`\n- `1996` - `Microsoft` has developed new version of JavaScript named as `\"JScript\"` for `IE-3`\n- Due to different standards/version on a different browser, there was an urgent need to standardized language\n- `ECMA (European Computer Manufacturers Association)` is the governing body which provides standardization/specification or JavaScript language implementation \n- `1997` - ECMAScript 1 released (JavaScript Submitted to `ECMAScript`)\n- `2009` - ECMAScript 5 released (`for...each, array method, map, filter`)\n- `2015` - ECMAScript 6 released (tones of advanced awesome features - `let, const, function default parameters, arrow function, classes, template string, new array/object methods`)\n - ES6-ECMAScript 6-ECMAScript 2015 is the evolution of ES5...Future of JavaScript\n - ES6 adds a tremendous amount of features to JavaScript such as let, constants, classes, Fat Arrow functions, etc.\n - `ES6-ECMAScript 6-ECMAScript 2015 = ES5 + New Awesome Features`\n\n2.3. Typescript\n---------------------\n- Typescript is Open source/free development language\n- Developed and maintained by Microsoft\n- Typed superset of JavaScript which Compiles to plain JavaScript\n- It consists of variables Data Types string, number, boolean, etc. but it is optional\n- One can write safer/meaningful/easily maintainable/scalable code\n\n2.4. ES6 Browser Support\n---------------------\nMost of the features will discuss here are supported in `latest version of the major web browsers` such as Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, etc.\n\nCheck current browser support and compatibility status for ES6:\n- [ES6/ECMAScript 6 compatibility table](https://kangax.github.io/compat-table/es6/)\n- [W3C Browser Support for ES6/ECMAScript 6 (ECMAScript 2015)](https://www.w3schools.com/js/js_versions.asp)\n\n\u003e **Note**: Internet Explorer does not support ES6/ECMAScript 6.\n\n2.5. Using ES6/ECMAScript 6 now\n---------------------\n- If the browser does not support all of the ES6/ECMAScript 6 features than alternatively:\n - we can use the `online transpilers (source-to-source compilers)` free of cost which `transpile our current ES6 code to ES5` for better browser compatibility without leaving out the benefits of enhanced syntax and capabilities of ES6\n- Transpiling is the process of taking `ES6 code and converting it into ES5`, so browsers can read it \n- The transpiling process is also used for languages like `CoffeeScript and TypeScript` to convert code into JavaScript\n- There are many different transpilers/transpiling tools available, the most popular are: \n - [Typescript](https://www.typescriptlang.org/)\n - [Babel](https://babeljs.io/), \n - [Traceur](https://github.com/google/traceur-compiler) and \n - [Closure](https://closure-compiler.appspot.com/)\n- Some testing we can try in [Chrome Canary - https://www.google.com/intl/en_in/chrome/canary/ ](https://www.google.com/intl/en_in/chrome/canary/) a version of Google Chrome (some ES6 feature supported not all, unstable)\n\nSection 3. Transpiling ES6-ECMAScript 6\n=====================\n3.1 Transpiler\n---------------------\n- All browsers `does not supports all latest new features` of ES6/ES2015\n- Chrome and Firefox supports almost 90% of features\n- `Transpilers` - converts ES6/ES2015 code into ES5 (plain JavaScript, browser understandable code)\n- Popular Transpilers - Typescript, Babel, Traceur, Closure\n\n3.2. Babel.js (https://babeljs.io/) - working with Babel\n---------------------\n- Babel is one of the most popular tools for transpiling ES6 code and gets ES5 code \n- Babel was `created by Sebastian McKenzie` an Australian developer at Facebook\n- `ReactJS the UI library created by Facebook uses Babel` as a preferred tool for transpiling the ES6 features back into ES5 JavaScript\n\n3.3. Babel in-browser transpiling\n---------------------\n- In real project it's advisable `not to use In Browser Transformer`, it will force the browser to convert all of the ES6 to ES5 at run time, which may make our projects run much slower\n- For the purpose of demo create a .html file and under script tag use an ES6 function syntax to pass default parameters or any other ES6 feature. If browser support ES6 feature you will get proper output else will get error `UnCaught SyntaxError: Unexpected token = `\n- To get rid of ES6 non/not support error in browser, download and use/include Babel transpiler script library like: `\u003cscript src=\"babel.js URL\"\u003e` and finally register/make it official with `\u003cscript type=\"text/babel\"\u003e`\n\n\u003e **Note**: Now a days majority of browser supports most of the ES6 features so accordingly as per needs/requirements include Babel or other transpilers in HTML file.\n\n\u003e **Syntax \u0026 Example**:\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n \u003chead\u003e\n\n \u003c!-- include babel library to transpile/convert ES6 code to ES5 --\u003e\n \u003cscript src=\"../assets/script/babel/babel_browser_5.8.29.min.js\"\u003e\u003c/script\u003e\n \n \u003c!-- internal JavaScript - head section --\u003e\n \u003cscript type=\"text/babel\"\u003e\n // Write all JavaScript code here\n\n // ES6 function syntax with default parameter\n function showFullName(firstName='Dinanath', lastName='Jayaswal') {\n console.log(firstName + ' '+ lastName);\n }\n showFullName();\n \u003c/script\u003e \n\n \u003c/head\u003e\n \n \u003cbody\u003e\n\n \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n3.4. Transpiling ES6 with babel and babel node\n---------------------\nAlternatively, install babel with nodejs ie npm package and use respective commands at CLI to transpile ES6 files into ES5.\n\n3.5. Transpiling ES6 with Webpack\n---------------------\n- https://webpack.github.io/\n- https://webpack.js.org/\n- For the larger scale applications its advisable to use a build tool like `webpack` which helps to automate the process like transpiling, less/sass conversion, script/image/CSS bundling and more\n- Webpack is a module bundler (bundle your assets, scripts, images, styles)\n- Webpack takes modules with dependencies and emits static assets representing those modules\n- Create a package.json file (contains module/dependency, documentation, project information) with the command: `npm init`\n- Install webpack with node/npm with the command: `npm install -g webpack`\n- Install babel-loader (helps to convert ES6 to ES5) node/npm with command: `npm install --save-dev babel-loader`\n- Create a `webpack.config.js`\n- Run command: `webpack`\n- In the .html file with script src use a path of newly created `bundle.js` file\n\n3.6. Typescript - Working and Transpiling with Typescript\n---------------------\n- Download and Install node (node comes with npm) (website: https://nodejs.org/en)\n- After installation check version of node and npm by command: `node -v / npm -v`\n- Install a `Text Editor` to write code like `VS code`, `Sublime Text`, `Adobe Brackets` or any one of your choice\n- Install a `transpiler` like `typescript` globally to transpile/convert code into plain JavaScript, by using the command: `npm install typescript -g`\n- In VS Code editor configure typescript: Press `CTRL+SHIFT+B` -\u003e Choose Task Runner - \u003e Typescript Watch Mode -\u003e it will create `task.json`\n\n\u003cp\u003e\n \u003cfigure\u003e\n \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_es6_features_tutorial/3_transpiling_es6/3_6_1_choose_vscode_transpiler_typescript.png\" alt=\"VScode - Select Typescript as Transpiler\" title=\"VScode - Select Typescript as Transpiler\" width=\"100%\" border=\"2\" /\u003e\n \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - VScode - Select Typescript as Transpiler\u003c/figcaption\u003e\n \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003e **Syntax \u0026 Example**: `task.json`\n```json\n{\n // See https://go.microsoft.com/fwlink/?LinkId=733558 \n // for the documentation about the tasks.json format\n \"version\": \"2.0.0\",\n \"tasks\": [\n {\n \"type\": \"typescript\",\n \"tsconfig\": \"tsconfig.json\",\n \"option\": \"watch\",\n \"problemMatcher\": [\n \"$tsc-watch\"\n ]\n },\n {\n \"type\": \"typescript\",\n \"tsconfig\": \"tsconfig.json\",\n \"problemMatcher\": [\n \"$tsc\"\n ]\n }\n ]\n}\n```\n\n- Create a typescript configuration (`tsconfig.json` file) by using the command: `tsc --init`\n - include/modify some settings in tsconfig.json: \n - `\"sourceMap\": true,` - map files helps to debug (.ts to .js mapping)\n - `\"outDir\": \"./scripts\",` - typescript transpiler will generate/organize all .js files into scripts folder\n\n\u003e **Syntax \u0026 Example**: `tsconfig.json`\n```json\n{\n \"compilerOptions\": {\n /* Basic Options */\n \"target\": \"es5\",\n \"module\": \"commonjs\",\n \"outDir\": \"./scripts\",\n \"strict\": true,\n \"esModuleInterop\": true\n }\n}\n```\n\n\u003cp\u003e\n \u003cfigure\u003e\n \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"././_images_es6_features_tutorial/3_transpiling_es6/3_6_2_tsconfig_json.png\" alt=\"tsconfig.json\" title=\"tsconfig.json\" width=\"70%\" border=\"2\" /\u003e\n \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - tsconfig.json\u003c/figcaption\u003e\n \u003c/figure\u003e\n\u003c/p\u003e\n\n- create a simple .ts file to verify its conversion/transpilation to .js\n\n\u003e **Syntax \u0026 Example**: `Typescript 3_6_es6_ts_transpiling.ts`\n```typescript\n// by default typescript consider all files in a folder as a module, so variables defined in one file will be checked on the fly and throws an error: Cannot redeclare block-scoped variable - to solve issue use export {}\n\n// export {};\n\nconsole.log('Welcome to ES6');\nlet firstName: string = 'Dinanath';\nlet lastName: string = 'Jayaswal';\nconst country: string = 'India'\nlet isMale: boolean = true;\nconsole.log(firstName + ' ' + lastName);\n\n// ES6 function syntax with default parameter\nfunction showFullName(_firstName = 'Dinanath', _lastName = 'Jayaswal') {\n console.log(_firstName + ' ' + _lastName);\n}\nshowFullName();\n```\n\n- check typescript version by command: `tsc -v`\n- check typescript help by command: `tsc -h` or `tsc --help`\n- To convert/transpile individual .ts into .js file run command: `tsc fileName.ts`\n- Run command for watch mode: `tsc filename.ts --watch` or to watch all files at once type command: `tsc --watch`\n\n\u003e **Syntax \u0026 Example**: `Typescript code converted to JavaScript 3_6_es6_ts_transpiling.js`\n```javascript\n\"use strict\";\n// by default typescript consi: stringder all files in a folder as a module, so variables defined in one file will be checked on the fly and throws error: Cannot redeclare block-scoped variable - to solve issue use export {}\n// export {};\nconsole.log('Welcome to ES6');\nvar firstName = 'Dinanath';\nvar lastName = 'Jayaswal';\nvar country = 'India';\nvar isMale = true;\nconsole.log(firstName + ' ' + lastName);\n// ES6 function syntax with default parameter\nfunction showFullName(_firstName, _lastName) {\n if (_firstName === void 0) { _firstName = 'Dinanath'; }\n if (_lastName === void 0) { _lastName = 'Jayaswal'; }\n console.log(_firstName + ' ' + _lastName);\n}\nshowFullName();\n//# sourceMappingURL=3_6_es6_ts_transpiling.js.map\n```\n\n- create an `index.html` file and include newly created .js file with script tag to check and verify the output\n\n\u003e **Syntax \u0026 Example**: index.html\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n \u003chead\u003e\n\n \u003cmeta charset=\"UTF-8\"\u003e\n \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n\n \u003c!-- internal style --\u003e\n \u003cstyle\u003e\n /* css selector: { property:value; } */\n body {\n font-family: arial;\n }\n \u003c/style\u003e\n\n \u003ctitle\u003e3_6_es6_ts_transpiling\u003c/title\u003e\n\n \u003cscript src=\"./scripts/3_6_es6_ts_transpiling.js\"\u003e\u003c/script\u003e\n \n \u003c/head\u003e\n\n \u003cbody\u003e\n \n \u003ch1\u003eWorking with ES6 \u0026 Typescript features\u003c/h1\u003e\n\n \u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n- To Run a to run the app from virtual local web server install npm utilities like `serve, HTTP, lite-server, static` etc \n - command: `npm install lite-server -g`\n - start server with the command: `lite-server` and check the output in the browser\n\n\u003cp\u003e\n \u003cfigure\u003e\n \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"././_images_es6_features_tutorial/3_transpiling_es6/3_6_3_app_project_folder_structure.png\" alt=\"App-project folder structure\" title=\"App-project folder structure\" width=\"70%\" border=\"2\" /\u003e\n \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - App-project folder structure\u003c/figcaption\u003e\n \u003c/figure\u003e\n\u003c/p\u003e\n\n3.7. ScratchJS - ES6 to ES5 code transpile/conversion\n---------------------\n- Typescript installation/transpilation process is pretty lengthy and tedious\n- Alternatively, Simply we can add/install a `Google Chrome Extention` named `Scratch JS`, an add-on for DevTools which integrates both the Traceur and Babel transpilers, allowing us to test out the new JS features coming with ES6/ES2015\n- `Scratch JS` also supports `CoffeeScript`, `LiveScript` and more compile-to-JS languages will be added soon\n- To install `Scratch JS` as a `Google Chrome Extention`:\n - In google chrome web store https://chrome.google.com/webstore/category/extensions?hl=en-GB or at https://www.google.com/ search for Scratch JS\n - From searched result select Scratch JS and click -\u003e ADD to Chrome\n \n\u003cp\u003e\n \u003cfigure\u003e\n \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_es6_features_tutorial/3_transpiling_es6/3_7_1_scratchjs_web_store.png\" alt=\"Chrome web store search scratchjs\" title=\"Chrome web store search scratchjs\" width=\"70%\" border=\"2\" /\u003e\n \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Chrome web store search scratchjs\u003c/figcaption\u003e\n \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003e\n \u003cfigure\u003e\n \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_es6_features_tutorial/3_transpiling_es6/3_7_2_scratchjs_web_store.png\" alt=\"Google search scratchjs\" title=\"Google search scratchjs\" width=\"70%\" border=\"2\" /\u003e\n \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Google search scratchjs\u003c/figcaption\u003e\n \u003c/figure\u003e\n\u003c/p\u003e\n\n- Once extension installed properly, open developer tool (F12, Fn12, Right Click on web page Inspect), click on ScratchJS - at left side type ES6 code and right side check ES5 output\n\n\u003cp\u003e\n \u003cfigure\u003e\n \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_es6_features_tutorial/3_transpiling_es6/3_7_3_scratchjs_es6_results_es5.png\" alt=\"Scratchjs ES6 to ES5 code conversion\" title=\"Scratchjs ES6 to ES5 code conversion\" width=\"100%\" border=\"2\" /\u003e\n \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Scratchjs ES6 to ES5 code conversion\u003c/figcaption\u003e\n \u003c/figure\u003e\n\u003c/p\u003e\n\nSection 4. New Variables Creation Updating and Scoping\n=====================\n4.1. Purpose/challenges in ES5 (Why ES6)\n---------------------\n- `Hoisting` - Behind the scene JavaScript declare variables at the top\n- `Functional scope` - `var` keyword got functional scope (accessible through-out the function body), at the same time var keyword variables also get hoisted\n- `Let keyword block scope` - let keyword variables exist only inside `block { }`scope, but never hoisted\n\n\u003e **Syntax \u0026 Example**: `Typescript 4_1_es6_ts_var_hoisting.ts`\n```typescript\n// by default typescript consider all files in a folder as a module, so variables defined in one file will be checked on the fly and throws an error: Cannot redeclare block-scoped variable - to solve issue use export {}\n\n// export {};\n\ngreetUser1('Dinanath1'); //hoising funciton declaration will move to top\n\nfunction greetUser1(userName1: string) {\n if (userName1 === 'Dinanath1') {\n var greetings1 = 'Hello Dinanath, Welcome';\n } else {\n var greetings1 = 'Hello Guest';\n }\n console.log(greetings1); //var variables available outside as it have functional scope\n var greetings1: string; //hoisting variable declaration will move to top\n}\n\ngreetUser1('Dinanath2'); \n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 4_1_es6_ts_var_hoisting.js`\n```javascript\n\"use strict\";\n// by default typescript consider all files in a folder as a module, so variables defined in one file will be checked on the fly and throws error: Cannot redeclare block-scoped variable - to solve issue use export {}\n// export {};\ngreetUser1('Dinanath1');//hoising funciton declaration will move to top\nfunction greetUser1(userName1) {\n if (userName1 === 'Dinanath1') {\n var greetings1 = 'Hello Dinanath, Welcome';\n }\n else {\n var greetings1 = 'Hello Guest';\n }\n console.log(greetings1); //var variables available outside as it have functional scope\n var greetings1; //hoisting variable declaration will move to top\n}\ngreetUser1('Dinanath2'); \n//# sourceMappingURL=4_1_es6_ts_var_hoisting.js.map\n```\n\n4.2. let keyword\n---------------------\n- To `deal with scope` in JavaScript we have new keyword named `let` used to declare variables\n- We use the let keyword to `create block scoping` in JavaScript in locations where we weren't able to do so before \n- `Let keyword block scope` - let keyword variables exist only inside `block { }`scope\n- let keyword variables cannot be used before declaration (`never hoisted`)\n- let keyword variables `cannot be re-declared`\n\n\u003e **Syntax \u0026 Example**: `Typescript 4_2_es6_ts_let.ts`\n```typescript\n// by default typescript consider all files in a folder as a module, so variables defined in one file will be checked on the fly and throws an error: Cannot redeclare block-scoped variable - to solve issue use export {}\n\n// export {};\n\nfunction greetUser1(userName1: string) {\n if (userName1 === 'Dinanath1') {\n var greetings1 = 'Hello Dinanath, Welcome';\n } else {\n var greetings1 = 'Hello Guest';\n }\n console.log(greetings1); //var variables available outside as it have functional scope\n var greetings1: string; //hoisting variable declaration will move to top\n}\n\ngreetUser1('Dinanath1');\n\n// ------------------------------\n\n/*\nfunction greetUser2(userName2:string){\n if(userName2 === 'Dinanath2'){\n let greetings2 = 'Hello Dinanath2';\n }else{\n let greetings2 = 'Hello Guest';\n }\n console.log(greetings2); //error - let variables not available out side block\n}\n*/\n\nfunction greetUser2(userName2: string) {\n let greetings2\n if (userName2 === 'Dinanath2') {\n greetings2 = 'Hello Dinanath2';\n } else {\n greetings2 = 'Hello Guest';\n }\n console.log(greetings2);\n}\n\ngreetUser2('Dinanath2');\n\n// ------------------------------ \n\nvar num1: number = 10;\nvar num2: number = 20;\n\nif (num1 === 10) {\n var num1: number = 100;\n let num2: number = 200;\n console.log('inside num1 : ' + num1);\n console.log('inside num2 : ' + num2);\n}\n\nconsole.log('outside num1 : ' + num1);\nconsole.log('outside num2 : ' + num2);\n\n// ------------------------------\n\n// let variables not hoisted\n/* function greetUser3(userName3:string){\n if(userName3 === 'Dinanath3'){\n greetings3 = 'Hello Dinanath3'; //error - let variables not hoisted\n }else{\n greetings3 = 'Hello Guest'; //error - let variables not hoisted\n }\n console.log(greetings3); //error - let variables not hoisted\n let greetings3;\n} */\n\n// ------------------------------\n\n// let variables not be re-declared\n\n// var firstName: string = 'Dinanath'; //error\n// var firstName: string = 'DJ'; //error\n\nlet fName;\n// let fName; //cannot redeclare block-scoped variable 'fName'\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 4_2_es6_ts_let.js`\n```javascript\n\"use strict\";\n// by default typescript consider all files in a folder as a module, so variables defined in one file will be checked on the fly and throws error: Cannot redeclare block-scoped variable - to solve issue use export {}\n// export {};\nfunction greetUser1(userName1) {\n if (userName1 === 'Dinanath1') {\n var greetings1 = 'Hello Dinanath, Welcome';\n }\n else {\n var greetings1 = 'Hello Guest';\n }\n console.log(greetings1); //var variables available outside as it have functional scope\n var greetings1; //hoisting variable declaration will move to top\n}\ngreetUser1('Dinanath1');\n// ------------------------------\n/*\nfunction greetUser2(userName2:string){\n if(userName2 === 'Dinanath2'){\n let greetings2 = 'Hello Dinanath2';\n }else{\n let greetings2 = 'Hello Guest';\n }\n console.log(greetings2); //error - let variables not available out side block\n}\n*/\nfunction greetUser2(userName2) {\n var greetings2;\n if (userName2 === 'Dinanath2') {\n greetings2 = 'Hello Dinanath2';\n }\n else {\n greetings2 = 'Hello Guest';\n }\n console.log(greetings2);\n}\ngreetUser2('Dinanath2');\n// ------------------------------ \nvar num1 = 10;\nvar num2 = 20;\nif (num1 === 10) {\n var num1 = 100;\n var num2_1 = 200;\n console.log('inside num1 : ' + num1);\n console.log('inside num2 : ' + num2_1);\n}\nconsole.log('outside num1 : ' + num1);\nconsole.log('outside num2 : ' + num2);\n// ------------------------------\n// let variables not hoisted\n/* function greetUser3(userName3:string){\n if(userName3 === 'Dinanath3'){\n greetings3 = 'Hello Dinanath3'; //error - let variables not hoisted\n }else{\n greetings3 = 'Hello Guest'; //error - let variables not hoisted\n }\n console.log(greetings3); //error - let variables not hoisted\n let greetings3;\n} */\n// ------------------------------\n// let variables not be re-declared\n// var firstName: string = 'Dinanath'; //error\n// var firstName: string = 'DJ'; //error\nvar fName;\n// let fName; //cannot redeclare block-scoped variable 'fName'\n//# sourceMappingURL=4_2_es6_ts_let.js.map\n```\n\n4.3. let in for loop\n---------------------\n- While dealing with `closures and loops` its advisable to `use let` instead of `var`\n\n\u003e **Syntax \u0026 Example**: `Typescript 4_3_es6_ts_let_loop.ts`\n```typescript\n// export {};\n\nfor (var i = 1; i \u003c= 5; i++) {\n setTimeout(() =\u003e {\n console.log('var based for loop', i); //6\n }, 1000);\n}\n\n// ------------------------------\n\nfor (let j = 1; j \u003c= 5; j++) {\n setTimeout(() =\u003e {\n console.log('let based for loop', j); //1,2,3,4,5\n }, 1000);\n}\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 4_3_es6_ts_let_loop.js`\n```javascript\n\"use strict\";\n// export {};\nfor (var i = 1; i \u003c= 5; i++) {\n setTimeout(function () {\n console.log('var based for loop', i); //6\n }, 1000);\n}\nvar _loop_1 = function (j) {\n setTimeout(function () {\n console.log('let based for loop', j); //1,2,3,4,5\n }, 1000);\n};\n// ------------------------------\nfor (var j = 1; j \u003c= 5; j++) {\n _loop_1(j);\n}\n//# sourceMappingURL=4_3_es6_ts_let_loop.js.map\n```\n\n4.4. const keyword (also known as `\"immutable variables\"`),\n---------------------\n- Like the let keyword, we can also use `const` an alternative for declaring variables\n- const is short for `constant` allows us to set constant variables which `shouldn't be reassigned`\n- We can not change the value of const variable, so use const to define `fixed set of values` also to `protect the values` of certain variables\n- Creating/Using an existing const variable again or re-assigning value to const variable generates `TypeError, SyntaxError`\n- const keyword is used to define/create `variable with read-only` constants\n- const must have some value `while declaration/initialized`\n- const value is fixed, `not to change/re-assigned` in future\n- const is also having `block scope`\n- the const value `never hoisted`\n- However, we can still change object properties or array elements\n\n### 4.4.1 const keyword variable\n\n\u003e **Syntax \u0026 Example**: `Typescript 4_4_1_ts_const_var.ts`\n```typescript\n// export {};\n\nlet firstName\n\n//const firstName1; //error - const must have some value `while declaration/initialized`\nconst lastName = 'Jayaswal';\n// const lastName //error - const value is fixed, `not to change/re-assigned` in future\n\nconsole.log(firstName);\nconsole.log(lastName);\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 4_4_1_ts_const_var.js`\n```javascript\n\"use strict\";\n// export {};\nvar firstName;\n//const firstName1; //error - const must have some value `while declaration/initialized`\nvar lastName = 'Jayaswal';\n// const lastName //error - const value is fixed, `not to change/re-assigned` in future\nconsole.log(firstName);\nconsole.log(lastName);\n//# sourceMappingURL=4_4_1_ts_const_var.js.map\n```\n\n### 4.4.2 const with array\n\n\u003e **Syntax \u0026 Example**: `Typescript 4_4_2_ts_const_array.ts`\n```typescript\n// export {};\n\nconst PersonArray = ['Dinanath', 'Jayaswal', 35, 'Male', true];\n\nconsole.log(PersonArray[0]);\n\n// we can re-assign value\nPersonArray[0] = 'Vedika';\n\nconsole.log(PersonArray[0]);\n\n//error - we cannot re-assign new array\n/* PersonArray = {\n\n}*/\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 4_4_2_ts_const_array.js`\n```javascript\n\"use strict\";\n// export {};\nvar PersonArray = ['Dinanath', 'Jayaswal', 35, 'Male', true];\nconsole.log(PersonArray[0]);\n// we can re-assign value\nPersonArray[0] = 'Vedika';\nconsole.log(PersonArray[0]);\n//error - we cannot re-assign new array\n/* PersonArray = {\n\n}*/ \n//# sourceMappingURL=4_4_2_ts_const_array.js.map\n```\n\n### 4.4.3 const with object\n\n\u003e **Syntax \u0026 Example**: `Typescript 4_4_3_ts_const_object.ts`\n```typescript\n// export {};\n\nconst Person = {\n firstName: 'Dinanath',\n lastName: 'Jayaswal',\n age: 35,\n gender: 'Male',\n isMale: true\n}\n\nconsole.log(Person.firstName);\n\n// we can re-assign value\nPerson.firstName = 'Vedika';\n\nconsole.log(Person.firstName);\n\n//error - we cannot re-assign new object\n/* Person = {\n\n} */\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 4_4_3_ts_const_object.js`\n```javascript\n\"use strict\";\n// export {};\nvar Person = {\n firstName: 'Dinanath',\n lastName: 'Jayaswal',\n age: 35,\n gender: 'Male',\n isMale: true\n};\nconsole.log(Person.firstName);\n// we can re-assign value\nPerson.firstName = 'Vedika';\nconsole.log(Person.firstName);\n//error - we cannot re-assign new object\n/* Person = {\n\n} */ \n//# sourceMappingURL=4_4_3_ts_const_object.js.map\n```\n\n4.5 let vs const\n---------------------\n- If variables have `one time assignments (fixed value, not changed in future)` use const\n- If value re-assignments/`value updation` requires use `let`\n- Const variables need value at the time of definition; `const name='Dinanath';`\n- Let variables can be defined/initialized with empty value; `let name;`\n- Const variables are `immutable, not changeable ` variables\n- Let variables are `mutable, can be changed or re-assigned`\n\n\nSection 5. Function Improvements-objects\n=====================\n5.1. Arrow functions (Fat Arrow function)\n---------------------\n- `Arrow functions` also called `fat arrow functions`, have an abbreviated syntax for working with functions with the equal sign and the greater than symbol\n- `fat arrow functions` provide syntactical sugar so that we can shorten old function definition, make it more readable and compact\n- Fat Arrow function `provides short/concise syntax/way` of writing functions, uses fewer lines of code\n- Fat Arrow function also `simplified behavior of this` keyword in JavaScript\n\n\u003e **Syntax \u0026 Example**: `Typescript 5_1_es6_ts_fat_arrow_function.ts`\n```typescript\n// export {};\n\n//normal function\nvar getNormalValue = function () {\n return 100;\n}\nconsole.log('normal function return', getNormalValue());\n\n// ------------------------------\n\n//arrow function\nconst getArrowValue1 = () =\u003e {\n return 200;\n}\nconsole.log('fat arrow function return', getArrowValue1());\n\n// ------------------------------\n\n//arrow function - single line return\nvar getArrowValue2 = () =\u003e 500;\nconsole.log('fat arrow function single line return', getArrowValue2());\n\n// ------------------------------\n\n//arrow function - parameter\nvar getArrowValue3 = (num: number) =\u003e num;\nconsole.log('fat arrow function parameter', getArrowValue3(10));\n\n// ------------------------------\n\nconsole.log('type of getArrowValue2', typeof getArrowValue2);\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 5_1_es6_ts_fat_arrow_function.js`\n```javascript\n\"use strict\";\n// export {};\n//normal function\nvar getNormalValue = function () {\n return 100;\n};\nconsole.log('normal function return', getNormalValue());\n// ------------------------------\n//arrow function\nvar getArrowValue1 = function () {\n return 200;\n};\nconsole.log('fat arrow function return', getArrowValue1());\n// ------------------------------\n//arrow function - single line return\nvar getArrowValue2 = function () { return 500; };\nconsole.log('fat arrow function single line return', getArrowValue2());\n// ------------------------------\n//arrow function - parameter\nvar getArrowValue3 = function (num) { return num; };\nconsole.log('fat arrow function parameter', getArrowValue3(10));\n// ------------------------------\nconsole.log('type of getArrowValue2', typeof getArrowValue2);\n//# sourceMappingURL=5_1_es6_ts_fat_arrow_function.js.map\n```\n\n5.2. Fat Arrow functions and `this` scope / lexical `this`\n---------------------\n- Fat arrow functions can help us deal with the scope of the `this` keyword in our JavaScript code\n- In `normal JavaScript function context creates their own scope this`\n- Fat arrow function =\u003e `does not create own scope` for 'this', but refers to its `parents this`\n\n\u003e **Syntax \u0026 Example**: `Typescript 5_2_es6_ts_fat_arrow_function_this_scope.ts`\n```typescript\n// export {};\n\nvar EmployeeObj1 = {\n empId1: 111,\n greetings1: function () {\n console.log('this.empId1 : ' + this.empId1);\n }\n}\n\nEmployeeObj1.greetings1(); // empId1: 111,\n\n// ------------------------------\n\n//error - internal function 'this' scope created\n\n/* var EmployeeObj2 = {\n empId2: 222,\n greetings2: function () {\n setTimeout(function () {\n console.log('this.empId2 : ' + this.empId2);\n }, 1000)\n }\n}\n\nEmployeeObj2.greetings2(); */\n\n// ------------------------------\n\n//internal function 'this' scope created, work around with 'self'\n\nvar EmployeeObj3 = {\n empId3: 333,\n greetings3: function () {\n var self = this;\n setTimeout(function () {\n console.log('self.empId3 : ' + self.empId3);\n }, 1000)\n }\n}\n\nEmployeeObj3.greetings3(); // empId3: 333,\n\n// ------------------------------\n\n//best work around with fat arrow function =\u003e\n\nvar EmployeeObj4 = {\n empId4: 444,\n greetings4: function () {\n setTimeout(() =\u003e {\n console.log('this.empId4 : ' + this.empId4);\n }, 1000)\n }\n}\n\nEmployeeObj4.greetings4(); // empId4: 444,\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 5_2_es6_ts_fat_arrow_function_this_scope.js`\n```javascript\n\"use strict\";\n// export {};\nvar EmployeeObj1 = {\n empId1: 111,\n greetings1: function () {\n console.log('this.empId1 : ' + this.empId1);\n }\n};\nEmployeeObj1.greetings1(); // empId1: 111,\n// ------------------------------\n//error - internal function 'this' scope created\n/* var EmployeeObj2 = {\n empId2: 222,\n greetings2: function () {\n setTimeout(function () {\n console.log('this.empId2 : ' + this.empId2);\n }, 1000)\n }\n}\n\nEmployeeObj2.greetings2(); */\n// ------------------------------\n//internal function 'this' scope created, work around with 'self'\nvar EmployeeObj3 = {\n empId3: 333,\n greetings3: function () {\n var self = this;\n setTimeout(function () {\n console.log('self.empId3 : ' + self.empId3);\n }, 1000);\n }\n};\nEmployeeObj3.greetings3(); // empId3: 333,\n// ------------------------------\n//best work around with fat arrow function =\u003e\nvar EmployeeObj4 = {\n empId4: 444,\n greetings4: function () {\n var _this = this;\n setTimeout(function () {\n console.log('this.empId4 : ' + _this.empId4);\n }, 1000);\n }\n};\nEmployeeObj4.greetings4(); // empId4: 444,\n//# sourceMappingURL=5_2_es6_ts_fat_arrow_function_this_scope.js.map\n```\n\nSection 6. Extended Parameter Handling\n=====================\n6.1. Default function parameters\n---------------------\n- ES6 allows function parameters to have/specify simple and intuitive default values\n- It simply means that if no arguments are provided to function call these default parameters values will be used\n- In ES6 we can set/enter/assign `default value to Parameters`\n- If no value passed in functional call than default values/Parameters taken into consideration\n- whille checking `arguments.length`, default value is not considered/counted, `only actual passed arguments counted`\n\n\u003e **Syntax \u0026 Example**: `Typescript 6_1_es6_ts_parameters_default_value.ts`\n```typescript\n// export {};\n\n//normal function call \n/* let showValue1 = function (value1) {\n console.log(value1);\n}\nshowValue1(); //undefined - as no parameters passed \n*/\n// ------------------------------\n\nlet showValue2 = function (value2 = 20) {\n console.log(value2);\n console.log(arguments.length);\n console.log('// ------------------------------');\n}\n\nshowValue2(); // 20\nshowValue2(200); // 200\n\n// ------------------------------\n\nlet showValue3 = function (value3 = 20, value4 = value3 + 10) {\n console.log(value3);\n console.log(value4);\n console.log(value3, value4);\n console.log(arguments.length);\n console.log('// ------------------------------');\n}\n\nshowValue3(); // value3=20, value4=30, value3 20, value4 30, arguments.length 0\nconsole.log('// 1 ------------------------------');\n\nshowValue3(200);\nconsole.log('// 2 ------------------------------');\n\nshowValue3(200, 300);\nconsole.log('// 3 ------------------------------');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 6_1_es6_ts_parameters_default_value.js`\n```javascript\n\"use strict\";\n// export {};\n//normal function call \n/* let showValue1 = function (value1) {\n console.log(value1);\n}\nshowValue1(); //undefined - as no parameters passed\n*/\n// ------------------------------\nvar showValue2 = function (value2) {\n if (value2 === void 0) { value2 = 20; }\n console.log(value2);\n console.log(arguments.length);\n console.log('// ------------------------------');\n};\nshowValue2(); // 20\nshowValue2(200); // 200\n// ------------------------------\nvar showValue3 = function (value3, value4) {\n if (value3 === void 0) { value3 = 20; }\n if (value4 === void 0) { value4 = value3 + 10; }\n console.log(value3);\n console.log(value4);\n console.log(value3, value4);\n console.log(arguments.length);\n console.log('// ------------------------------');\n};\nshowValue3(); // value3=20, value4=30, value3 20, value4 30, arguments.length 0\nconsole.log('// 1 ------------------------------');\nshowValue3(200);\nconsole.log('// 2 ------------------------------');\nshowValue3(200, 300);\nconsole.log('// 3 ------------------------------');\n//# sourceMappingURL=6_1_es6_ts_parameters_default_value.js.map\n```\n\n6.2. Rest parameter operator\n---------------------\n- rest parameter represents `indefinite number of arguments` as an array\n- `...arrayName - is used to convert the individual item into an array`\n- Rest parameters don’t restrict the number of values that you can pass to a function\n- The values passed must all be of the same type (`multiple arguments of the same type`)\n- A rest parameter is specified by prefixing a named parameter with `rest operator (...) i.e. three dots`\n- Rest operator is used as function Parameter/argument\n\n\u003e **Syntax \u0026 Example**: `Typescript 6_2_es6_ts_parameters_rest_operator.ts`\n```typescript\n// export {};\n\n// es5 normal function\nlet displayColors = function () {\n for (let i in arguments) {\n console.log('arguments color list:', arguments[i]);\n }\n}\n\ndisplayColors('cyan');\nconsole.log('------------------------------');\n\ndisplayColors('cyan', 'magenta');\nconsole.log('------------------------------');\n\ndisplayColors('cyan', 'magenta', 'yellow');\nconsole.log('------------------------------');\n\nconsole.log('// ------------------------------');\n\n// es6 rest operator\nlet showColors = function (...colorsList) {\n console.log('colorsList rest operator:', colorsList);\n console.log('arguments.length:', arguments.length);\n for (let i in colorsList) {\n console.log('colorsList rest operator array loop:', colorsList[i]);\n }\n console.log('// ');\n}\n\nshowColors('red');\nshowColors('red', 'green');\nshowColors('red', 'green', 'blue');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 6_2_es6_ts_parameters_rest_operator.js`\n```javascript\n\"use strict\";\n// export {};\n// es5 normal function\nvar displayColors = function () {\n for (var i_1 in arguments) {\n console.log('arguments color list:', arguments[i_1]);\n }\n};\ndisplayColors('cyan');\nconsole.log('------------------------------');\ndisplayColors('cyan', 'magenta');\nconsole.log('------------------------------');\ndisplayColors('cyan', 'magenta', 'yellow');\nconsole.log('------------------------------');\nconsole.log('// ------------------------------');\n// es6 rest operator\nvar showColors = function () {\n var colorsList = [];\n for (var _i = 0; _i \u003c arguments.length; _i++) {\n colorsList[_i] = arguments[_i];\n }\n console.log('colorsList rest operator:', colorsList);\n console.log('arguments.length:', arguments.length);\n for (var i_2 in colorsList) {\n console.log('colorsList rest operator array loop:', colorsList[i_2]);\n }\n console.log('// ');\n};\nshowColors('red');\nshowColors('red', 'green');\nshowColors('red', 'green', 'blue');\n//# sourceMappingURL=6_2_es6_ts_parameters_rest_operator.js.map\n```\n\n6.3. Spread operator\n---------------------\n- Spread Operator is opposite to Rest Operator\n- The spread operator with the help of 3 dots (...) can turn elements of an array into arguments of a function call, or into elements of an array literal\n- ...arrayName - takes an array and `split/convert an array into individual item/string`\n- Rest operator is used to `combine`, Spread operator is to `split`\n- Spread Operator is used while function called\n\n\u003e **Syntax \u0026 Example**: `Typescript 6_3_es6_ts_spread_operator.ts`\n```typescript\n// export {};\n\nlet colorsList = ['red', 'green', 'blue', 'black'];\n\nlet showColors = function (...colors) {\n console.log('spread operator:', colors);\n console.log('arguments.length', arguments.length);\n for (let color in colors) {\n console.log('colorsList:', colors[color]);\n }\n}\n\nshowColors(...colorsList);\nconsole.log('Elements in the colors List:', ...colorsList);\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 6_3_es6_ts_spread_operator.js`\n```javascript\n\"use strict\";\n// export {};\nvar colorsList = ['red', 'green', 'blue', 'black'];\nvar showColors = function () {\n var colors = [];\n for (var _i = 0; _i \u003c arguments.length; _i++) {\n colors[_i] = arguments[_i];\n }\n console.log('spread operator:', colors);\n console.log('arguments.length', arguments.length);\n for (var color in colors) {\n console.log('colorsList:', colors[color]);\n }\n};\nshowColors.apply(void 0, colorsList);\nconsole.log.apply(console, ['Elements in the colors List'].concat(colorsList));\n//# sourceMappingURL=6_3_es6_ts_spread_operator.js.map\n```\n \nSection 7. Enhancing object literals\n=====================\n7.1. Property shorthand notation\n---------------------\n- When property names are similar/equivalent to variable name than ES6 provide shorthand notation for object literals\n\n\u003e **Syntax \u0026 Example**: `Typescript 7_1_es6_ts_object_property_shorthand.ts`\n```typescript\n// export {};\n\n//old plain javascript approach\nlet firstName = 'angular';\nlet lastName = 'typescript';\n\nlet Technology = {\n //new property : variable\n firstName: firstName,\n lastName: lastName\n}\n\nconsole.log(Technology.firstName);\nconsole.log(Technology.lastName);\nconsole.log('// ------------------------------');\n\n// ------------------------------\n\n//ES6 approach - When property names are similar/equivalent to variable name than ES6 provides a shorthand notation for object literals\n\nlet version1 = 7;\nlet version2 = 3;\n\nlet newTechnology = {\n firstName,\n lastName,\n version1,\n version2\n}\nconsole.log(newTechnology.firstName);\nconsole.log(newTechnology.lastName);\nconsole.log(newTechnology.version1);\nconsole.log(newTechnology.version2);\nconsole.log('// ------------------------------');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 7_1_es6_ts_object_property_shorthand.js`\n```javascript\n\"use strict\";\n// export {};\n//old plain javascript approach\nvar firstName = 'angular';\nvar lastName = 'typescript';\nvar Technology = {\n //new property : variable\n firstName: firstName,\n lastName: lastName\n};\nconsole.log(Technology.firstName);\nconsole.log(Technology.lastName);\nconsole.log('// ------------------------------');\n// ------------------------------\n//ES6 approach - When property names are similar/equivalent to variable name than ES6 provide shorthand notation for object literals\nvar version1 = 7;\nvar version2 = 3;\nvar newTechnology = {\n firstName: firstName,\n lastName: lastName,\n version1: version1,\n version2: version2\n};\nconsole.log(newTechnology.firstName);\nconsole.log(newTechnology.lastName);\nconsole.log(newTechnology.version1);\nconsole.log(newTechnology.version2);\nconsole.log('// ------------------------------');\n//# sourceMappingURL=7_1_es6_ts_object_property_shorthand.js.map\n```\n\n7.2. Property names with space\n---------------------\n- In ES6 we can use property names with space like `'first name': dinanath,`\n- While referring/logging the property instead of `.DOT` notation use `square brackets ['first name']`\n\n\u003e **Syntax \u0026 Example**: `Typescript .ts`\n```typescript\n//In ES6 we can use property names with space like 'first name' \n\nlet lastName = 'last name';\n\nlet Employee = {\n 'first name': 'Dinanath',\n [lastName]:'Jayaswal'\n}\n\nconsole.log(Employee['first name']);\nconsole.log(Employee['last name']);\nconsole.log(Employee);\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript .js`\n```javascript\n\"use strict\";\n//In ES6 we can use property names with space like 'first name' \nvar Employee = {\n 'first name': 'Dinanath',\n};\nconsole.log(Employee['first name']);\n//# sourceMappingURL=7_2_es6_ts_object_property_name.js.map\n```\n\nSection 8. Template Strings Literals\n=====================\n8.1. Template Literals (Template Strings)\n---------------------\n- ES6 new feature `Strings Template` offers a convenient way to work with string concatenation/interpolation\n- Template literals provide an easy and clean way to create multi-line strings and perform string interpolation\n- Intuitive expression interpolation for single-line and multi-line strings\n- Use `back-tick (grave accent)` character and `{ var name in curly brace }`, no + plus sign required\n- The best part of Template Literals (Template Strings) is we can `use 'single' \"double\" quotes inside`\n\n\u003e **Syntax \u0026 Example**: `Typescript 8_1_es6_ts_template_strings_literals_interpolation.ts`\n```typescript\n// export {};\n\n//old plain javascript approach\nlet user = 'Dinanath';\nlet greetMessage1 = 'Welcome' + ' ' + user + ' ' + 'to ES6.';\n\nconsole.log(greetMessage1);\n \nconsole.log('// ------------------------------');\n\n//ES6 Template Literals (Template Strings) approach\nlet greetMessage2 = `Welcome ${user} to ES6.`;\n\nconsole.log(greetMessage2);\n\nconsole.log('// ------------------------------');\n// ------------------------------\n\n//ES6 multi-line string\nlet greetMessage3 = `ES6 Template Literals (Template Strings):\n With Template Literals (Template Strings)\n we can add multiple lines in string concatenation/interpolation\n`;\n\nconsole.log(greetMessage3);\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 8_1_es6_ts_template_strings_literals_interpolation.js`\n```javascript\n\"use strict\";\n// export {};\n//old plain javascript approach\nvar user = 'Dinanath';\nvar greetMessage1 = 'Welcome' + ' ' + user + ' ' + 'to ES6.';\nconsole.log(greetMessage1);\nconsole.log('// ------------------------------');\n//ES6 Template Literals (Template Strings) approach\nvar greetMessage2 = \"Welcome \" + user + \" to ES6.\";\nconsole.log(greetMessage2);\nconsole.log('// ------------------------------');\n// ------------------------------\n//ES6 multi-line string\nvar greetMessage3 = \"ES6 Template Literals (Template Strings):\\n With Template Literals (Template Strings)\\n we can add mutiple lines in string concatenation/interpolation\\n\";\nconsole.log(greetMessage3);\n//# sourceMappingURL=8_1_es6_ts_template_strings_literals_interpolation.js.map\n```\n\nSection 9. Destructuring Assignment\n=====================\n- Destructuring Assignment gives us an easy way to extract data from arrays and objects and assign them to variables\n- An expression/ES6 shorter syntax that makes it easy to extract values from arrays, or properties from objects, into distinct variables\n\n9.1. Destructuring Array\n---------------------\n\n\u003e **Syntax \u0026 Example**: `Typescript 9_1_es6_ts_destructuring_array.ts`\n```typescript\n// export {};\n\n//old plain javascript approach\nlet arrEmployee = ['Dinanath', 'Jayaswal', 'Male', 35, true];\nconsole.log(arrEmployee[0]);\nconsole.log(arrEmployee[1]);\n\nconsole.log('// ------------------------------');\n\n//ES6 Destructuring approach\n//assign a meaningful name to each positions value\nlet [first, second, third, fourth, fifth] = arrEmployee;\n\nlet [firstName, lastName, gender, age, isSenior] = arrEmployee;\n\nconsole.log(first);\nconsole.log(second);\n\nconsole.log(gender);\nconsole.log(age);\n\nconsole.log('// ------------------------------');\n\nlet [fn, ln, , , senior] = arrEmployee\n\nconsole.log(fn);\nconsole.log(senior);\n\n// ------------------------------\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 9_1_es6_ts_destructuring_array.js`\n```javascript\n\"use strict\";\n// export {};\n//old plain javascript approach\nvar arrEmployee = ['Dinanath', 'Jayaswal', 'Male', 35, true];\nconsole.log(arrEmployee[0]);\nconsole.log(arrEmployee[1]);\nconsole.log('// ------------------------------');\n//ES6 Destructuring approach\n//assign a meaningful name to each positions value\nvar first = arrEmployee[0], second = arrEmployee[1], third = arrEmployee[2], fourth = arrEmployee[3], fifth = arrEmployee[4];\nvar firstName = arrEmployee[0], lastName = arrEmployee[1], gender = arrEmployee[2], age = arrEmployee[3], isSenior = arrEmployee[4];\nconsole.log(first);\nconsole.log(second);\nconsole.log(gender);\nconsole.log(age);\nconsole.log('// ------------------------------');\nvar fn = arrEmployee[0], ln = arrEmployee[1], senior = arrEmployee[4];\nconsole.log(fn);\nconsole.log(senior);\n// ------------------------------\n//# sourceMappingURL=9_1_es6_ts_destructuring_array.js.map\n```\n\n9.2. Destructuring Object\n---------------------\n\u003e **Syntax \u0026 Example**: `Typescript 9_2_es6_ts_destructuring_object.ts`\n```typescript\n// export {};\n\n//old plain javascript approach\nlet objEmployee = {\n firstName: 'Dinanath',\n lastName: 'Jayaswal',\n gender: 'Male',\n age: 35,\n isSenior: true\n}\nconsole.log(objEmployee.firstName);\nconsole.log(objEmployee.lastName);\n\nconsole.log('// ------------------------------');\n\n//ES6 Destructuring approach\n//assign a meaningful name to each property\n\nlet { firstName, lastName, gender, age, isSenior } = objEmployee;\n\nconsole.log(firstName);\nconsole.log(lastName);\nconsole.log(gender);\nconsole.log(age);\nconsole.log(isSenior);\n\nconsole.log('// ------------------------------');\n\n// ------------------------------\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 9_2_es6_ts_destructuring_object.js`\n```javascript\n\"use strict\";\n// export {};\n//old plain javascript approach\nvar objEmployee = {\n firstName: 'Dinanath',\n lastName: 'Jayaswal',\n gender: 'Male',\n age: 35,\n isSenior: true\n};\nconsole.log(objEmployee.firstName);\nconsole.log(objEmployee.lastName);\nconsole.log('// ------------------------------');\n//ES6 Destructuring approach\n//assign a meaningful name to each property\nvar firstName = objEmployee.firstName, lastName = objEmployee.lastName, gender = objEmployee.gender, age = objEmployee.age, isSenior = objEmployee.isSenior;\nconsole.log(firstName);\nconsole.log(lastName);\nconsole.log(gender);\nconsole.log(age);\nconsole.log(isSenior);\nconsole.log('// ------------------------------');\n// ------------------------------\n//# sourceMappingURL=9_2_es6_ts_destructuring_object.js.map\n```\n\nSection 10. Loops\n=====================\n10.1. The for...of Loop\n---------------------\n- `for...of` statement it is kind of for loop but used to loop over Iterables like array,string\n- When for of loop is used with string words, it will split individual letters\n\n\u003e **Syntax \u0026 Example**: `Typescript .ts`\n```typescript\n// export {};\n\n// for...of loop\n/*for(element of array/string) {\n // Code to be executed\n} */\n\n// Iterating over an array\nlet arrDays = [\"Monday\", \"TuesDay\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"];\n\nfor (let day of arrDays) {\n console.log(day);\n document.write('\u003cli\u003e' + day + '\u003c/li\u003e');\n}\n\nconsole.log('// ------------------------------');\n\n// Iterating over string\nlet name = 'JavaScript';\nfor (let letter of name) {\n document.write(letter + ',');\n console.log(letter + ',');\n}\n\nconsole.log('// ------------------------------');\n// ------------------------------\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript .js`\n```javascript\n\"use strict\";\n// export {};\n// for...of loop\n/*for(element of array/string) {\n // Code to be executed\n} */\n// Iterating over an array\nvar arrDays = [\"Monday\", \"TuesDay\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"];\nfor (var _i = 0, arrDays_1 = arrDays; _i \u003c arrDays_1.length; _i++) {\n var day = arrDays_1[_i];\n console.log(day);\n document.write('\u003cli\u003e' + day + '\u003c/li\u003e');\n}\nconsole.log('// ------------------------------');\n// Iterating over string\nvar name = 'JavaScript';\nfor (var _a = 0, name_1 = name; _a \u003c name_1.length; _a++) {\n var letter = name_1[_a];\n document.write(letter + ',');\n console.log(letter + ',');\n}\nconsole.log('// ------------------------------');\n// ------------------------------\n//# sourceMappingURL=10_1_es6_ts_loop_for_of.js.map\n```\n\nSection 11. Classes\n=====================\n11.1. Class syntax\n---------------------\n- ES5 and earlier, classes have never existed in JavaScript, ES6 introduced classes which looks similar to classes in other object-oriented languages, such as Java, PHP, etc.\n- In Object Oriented Programming OOPS languages classes have been used for a long time to encourage reusability\n- ES6 classes are a `syntactical sugar over the prototype-based` Object Oriented pattern\n- Classes are the `blueprint for the creation of an object `\n- Classes are `special function but do not hoisted`\n\n\u003e **Syntax \u0026 Example**: `Typescript 11_1_es6_ts_class.ts`\n```typescript\n// export {};\n\n// class can not be hoisted\n// let person2 = new Person(); // error - Uncaught TypeError: Person is not a constructor\n\n// console.log('// ------------------------------');\n\nclass Person {\n\n // method\n greetings() {\n console.log('inside Person greetings methods');\n }\n\n}\n\nlet person1 = new Person();\n\nconsole.log('typeof Person:', typeof Person);\nconsole.log(person1.greetings());\n\n// adding a method to a class is same like adding method to protorype object\nconsole.log(person1.greetings === Person.prototype.greetings)\n\nconsole.log('// ------------------------------');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 11_1_es6_ts_class.js`\n```javascript\n\"use strict\";\n// export {};\n// class can not be hoisted\n// let person2 = new Person(); // error - Uncaught TypeError: Person is not a constructor\n// console.log('// ------------------------------');\nvar Person = /** @class */ (function () {\n function Person() {\n }\n // method\n Person.prototype.greetings = function () {\n console.log('inside Person greetings methods');\n };\n return Person;\n}());\nvar person1 = new Person();\nconsole.log('typeof Person:', typeof Person);\nconsole.log(person1.greetings());\n// adding a method to a class is same like adding method to protorype object\nconsole.log(person1.greetings === Person.prototype.greetings);\nconsole.log('// ------------------------------');\n//# sourceMappingURL=11_1_es6_ts_class.js.map\n```\n\n11.2. Class Body and Methods\n---------------------\n- Class body is the main part with in `{ curly braces }`\n- Will learn and cover 3 types of methods:\n 1. **Constructor method**: \n - Constructor method is `used to create and initialize objects`\n - In one class there will be `only one constructor method`\n - Constructor method is heart/initialization point of class `called during object creation`\n - Constructor method is first method to run/invoke/initialize `as soon as class instantiate`\n - Example - `constructor() { }`\n 2. **Static method**: \n - `static` keyword is used to create static methods \n - Can be called without instantiating the class (`called directly with the help of class name`)\n - Example - `static statiMethodName(); PersonClass.statiMethodName()`\n 3. **Prototype method**: \n - Can be `called with the help of new object name`\n - Example - `person1.methodName()`\n\n\u003e **Syntax \u0026 Example**: `Typescript 11_2_es6_ts_class_body_methods.ts`\n```typescript\n// export {};\n\n// class can not be hoisted\n// let person2 = new Person(); // error - Uncaught TypeError: Person is not a constructor\n\n// console.log('// ------------------------------');\n\nclass Person {\n\n // constructor method\n constructor(_name) {\n this.name = _name;\n console.log('constructor Person Name:', this.name);\n }\n\n // static method \n static showGreetings() {\n console.log('static method showGreetings() - Hello');\n }\n\n // prototype method\n showMessage() {\n console.log('prototype method showMessage() - Hello');\n }\n\n}\n\n// new class object\nlet Person1 = new Person('Dinanath');\n\n// invoke static method \nPerson.showGreetings();\n\n// invoke prototype method\nPerson1.showMessage();\n\nconsole.log('// ------------------------------');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 11_2_es6_ts_class_body_methods.js`\n```javascript\n\"use strict\";\n// export {};\n// class can not be hoisted\n// let person2 = new Person(); // error - Uncaught TypeError: Person is not a constructor\n// console.log('// ------------------------------');\nvar Person = /** @class */ (function () {\n // constructor method\n function Person(_name) {\n this.name = _name;\n console.log('constructor Person Name:', this.name);\n }\n // static method \n Person.showGreetings = function () {\n console.log('static method showGreetings() - Hello');\n };\n // prototype method\n Person.prototype.showMessage = function () {\n console.log('prototype method showMessage() - Hello');\n };\n return Person;\n}());\n// new class object\nvar Person1 = new Person('Dinanath');\n// invoke static method \nPerson.showGreetings();\n// invoke prototype method\nPerson1.showMessage();\nconsole.log('// ------------------------------');\n//# sourceMappingURL=11_2_es6_ts_class_body_methods.js.map\n```\n\n11.2. Class Inheritance\n---------------------\n- one class can `inherit or extends from another parent or super class` and use its properties and methods\n- ES6 classes make it easier to create objects, implement inheritance by using the `extends` keyword and reuse the code\n- Classes that inherit from other classes are referred to as `derived classes or child classes`\n- `super()` keyword refer to the parent or super class constructor which is extended\n- `extends` keyword denotes inheritance mechanism\n\n\u003e **Syntax \u0026 Example**: `Typescript 11_3_es6_ts_class_inheritance.ts`\n```typescript\n// export {};\n\nclass Car {\n\n // simple constructor method\n /* constructor() {\n console.log('Car constructor');\n } */\n\n // parameterized constructor method\n constructor(_name) {\n console.log('Car constructor', _name);\n }\n\n // prototype method\n getModelNumber() {\n return 101;\n }\n\n}\n\n// console.log('// ------------------------------');\n\nclass TataCars extends Car {\n constructor(_name1) {\n super(_name1);\n console.log('TataCars constructor', _name1);\n }\n\n // prototype method - If same method present in child than it overwrite/override parent method\n /* getModelNumber() {\n return 1001;\n } */\n\n // to call same method from parent use super keyword\n getModelNumber() {\n return super.getModelNumber();\n }\n}\n\n// simple constructor method\n// let Nexon = new TataCars();\n\n// parameterized constructor method\nlet Nexon = new TataCars('Tata Nexon');\n\n// prototype method\nconsole.log('Nexon.getModelNumber:', Nexon.getModelNumber());\n\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 11_3_es6_ts_class_inheritance.js`\n```javascript\n\"use strict\";\n// export {};\nvar __extends = (this \u0026\u0026 this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array \u0026\u0026 function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar Car = /** @class */ (function () {\n // simple constructor method\n /* constructor() {\n console.log('Car constructor');\n } */\n // parameterized constructor method\n function Car(_name) {\n console.log('Car constructor', _name);\n }\n // prototype method\n Car.prototype.getModelNumber = function () {\n return 101;\n };\n return Car;\n}());\n// console.log('// ------------------------------');\nvar TataCars = /** @class */ (function (_super) {\n __extends(TataCars, _super);\n function TataCars(_name1) {\n var _this = _super.call(this, _name1) || this;\n console.log('TataCars constructor', _name1);\n return _this;\n }\n // prototype method - If same method present in child than it overwrite/override parent method\n /* getModelNumber() {\n return 1001;\n } */\n // to call same method from parent use super keyword\n TataCars.prototype.getModelNumber = function () {\n return _super.prototype.getModelNumber.call(this);\n };\n return TataCars;\n}(Car));\n// simple constructor method\n// let Nexon = new TataCars();\n// parameterized constructor method\nvar Nexon = new TataCars('Tata Nexon');\n// prototype method\nconsole.log('Nexon.getModelNumber:', Nexon.getModelNumber());\n//# sourceMappingURL=11_3_es6_ts_class_inheritance.js.map\n```\n\nSection 12. Modules\n=====================\n- `Module divide section of code/program` (Like in the Book we have different Chapters and Sections, in Store we have different Sections of Items, etc)\n- Code/Programm - needs separation of concern\n- The module helps developers to easily organize, navigate/find different chunks of code\n- We can `Export and Import functions/classes from different Modules`\n- There are mainly two types of export:\n 1. Named Export\n 2. Default Export\n\n12.1. Named Export\n---------------------\n- ES6 introduces file based module, in which each module is represented by a separate .js file\n- We can use the `export or import statement` in a module to `export or import variables, functions, classes or any other entity` to/from other modules or files\n- We Exports/Exporting variables and functions so that it can be used in/by other modules\n- `Export` keyword makes variables/functions/classes ready to be used in other modules\n- `Import` keyword makes variables/functions/classes ready to be used/access in current modules\n- `Import` statement is hoisted ie moved to the top of declaration\n- Imported variables are `read-only, not changed` but `object properties can be changed`\n\n\u003e Let's create a module i.e. a TypeScript/JavaScript file named `script.ts` and place the following code in it:\n\n\u003e **Syntax \u0026 Example**: `Typescript script.ts`\n```typescript\n// export {};\n\n// define variables/functions to export\nlet fName = 'Dinanath';\nconst DOBY = 1980;\n\nfunction getAge(_curYear) {\n console.log(_curYear - DOBY);\n}\n\n// Exporting variables and functions so that it can be used in other modules\n// Export keyword makes variables/functions/classes ready to be used in other modules\n\n// export let fName;\nexport { fName, DOBY, getAge };\n\n// console.log('// ------------------------------');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript script.js`\n```javascript\n\"use strict\";\n// export {};\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// define variables/functions to export\nvar fName = 'Dinanath';\nexports.fName = fName;\nvar DOBY = 1980;\nexports.DOBY = DOBY;\nfunction getAge(_curYear) {\n console.log(_curYear - DOBY);\n}\nexports.getAge = getAge;\n// console.log('// ------------------------------');\n//# sourceMappingURL=12_1_es6_ts_module_script.js.map\n```\n\n\u003chr /\u003e \u003chr /\u003e\n\n\u003e Now create another TypeScript/JavaScript file named `app.ts` which can import named variables/functions/classes from `main.ts/main.js`:\n\n\u003e **Syntax \u0026 Example**: `Typescript app.ts`\n```typescript\n// export {};\n\n// Import keyword makes variables/functions/classes ready to be used/access in current modules\nimport { fName, DOBY, getAge } from './12_1_es6_ts_module_script';\n\nconsole.log(fName);\nalert(getAge(2019)); \n\n// console.log('// ------------------------------');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript app.js`\n```javascript\n\"use strict\";\n// export {};\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Import keyword makes variables/functions/classes ready to be used/access in current modules\nvar _12_1_es6_ts_module_script_1 = require(\"./12_1_es6_ts_module_script\");\nconsole.log(_12_1_es6_ts_module_script_1.fName);\nalert(_12_1_es6_ts_module_script_1.getAge(2019));\n// console.log('// ------------------------------');\n//# sourceMappingURL=12_1_es6_ts_module_app.js.map\n```\n\n\u003e Finally create a HTML file `index.html` and include `app.js` file, notice the script tag with `type=\"module\"` attribute\n\n\u003e **Syntax \u0026 Example**: `index.html`\n```html\n\u003cscript src=\"./scripts/12_modules/12_1_es6_ts_module_app.js\"\u003e\u003c/script\u003e \n OR\n\u003cscript src=\"./scripts/12_modules/12_1_es6_ts_module_app.js\" type=\"module\"\u003e\u003c/script\u003e \n```\n\n12.2. Default Export\n---------------------\n- Whenever a Module exports a single value or function, we can use `default` keyword\n- In the case of `Default Export-Import` while export/import `curly brace` not required\n- Also while dealing with `Default Export-Import` variable name match not mandatory in case of import\n\n\u003e **Syntax \u0026 Example**: `Typescript 12_2_es6_ts_module_default_export_script.ts`\n```typescript\n// export {};\n\nlet fName = 'Dinanath';\nexport default fName;\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 12_2_es6_ts_module_default_export_script.js`\n```javascript\n\"use strict\";\n// export {};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar fName = 'Dinanath';\nexports.default = fName;\n//# sourceMappingURL=12_2_es6_ts_module_default_export_script.js.map\n```\n\n\u003chr /\u003e\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `Typescript 12_2_es6_ts_module_default_import_app.ts`\n```typescript\n// export {};\n\nimport firstName from './12_2_es6_ts_module_default_export_script';\nconsole.log(firstName);\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 12_2_es6_ts_module_default_import_app.js`\n```javascript\n\"use strict\";\n// export {};\nvar __importDefault = (this \u0026\u0026 this.__importDefault) || function (mod) {\n return (mod \u0026\u0026 mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar _12_2_es6_ts_module_default_export_script_1 = __importDefault(require(\"./12_2_es6_ts_module_default_export_script\"));\nconsole.log(_12_2_es6_ts_module_default_export_script_1.default);\n//# sourceMappingURL=12_2_es6_ts_module_default_import_app.js.map\n```\n\nSection 13. Generators\n=====================\n13.1. Generators\n---------------------\n- ES6/ES2015 Generators are `special types of functions which can run-paused anytime`, run some other logic/code and start again as per logic/program flow\n- Generators are a new type of function that allows us to `pause functions in the middle of execution`, to be resumed later\n- Generator function can be identified/indicated by `an asterisk symbol` right before the function name or immediately following the function keyword (`function*`)\n- Generator Function can be paused by using the new `yield` keyword\n- To call/invoke/execute Generator Function call `next()` method\n- A generator is a function that returns an iterator\n- All iterator objects have a `next()` method that returns a result object\n- The result object has two properties: \n - `value`, which is the next value, and \n - `done`, which is a boolean, initially false and later true when there are no more values to return with `next()` or no more `yields`\n- We need to use babel core polyfill `browser-polyfill.js` to use/execute generators function\n- generators are also used with `asynchronous external events or timers/intervals`\n\n\u003e **Syntax \u0026 Example**: `Typescript 13_1_es6_ts_function_generators.ts`\n```typescript\n// export {};\n\nfunction *playCricket() {\n yield 'Set Field';\n console.log('1. yield Set Field');\n yield 'Bowl';\n console.log('2. yield Bowl');\n yield 'Bat';\n console.log('3. yield Bat');\n}\n\n// create a reference to the generator function\n\nlet cricket = playCricket(); \nconsole.log(cricket.next());\nconsole.log(cricket.next());\nconsole.log(cricket.next());\nconsole.log(cricket.next()); // done - true;\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 13_1_es6_ts_function_generators.js`\n```javascript\n\"use strict\";\n// export {};\nvar __generator = (this \u0026\u0026 this.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] \u0026 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" \u0026\u0026 (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (_) try {\n if (f = 1, y \u0026\u0026 (t = op[0] \u0026 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) \u0026\u0026 t.call(y), 0) : y.next) \u0026\u0026 !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] \u0026 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length \u003e 0 \u0026\u0026 t[t.length - 1]) \u0026\u0026 (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 \u0026\u0026 (!t || (op[1] \u003e t[0] \u0026\u0026 op[1] \u003c t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 \u0026\u0026 _.label \u003c t[1]) { _.label = t[1]; t = op; break; }\n if (t \u0026\u0026 _.label \u003c t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] \u0026 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\nfunction playCricket() {\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0: return [4 /*yield*/, 'Set Field'];\n case 1:\n _a.sent();\n console.log('1. yield Set Field');\n return [4 /*yield*/, 'Bowl'];\n case 2:\n _a.sent();\n console.log('2. yield Bowl');\n return [4 /*yield*/, 'Bat'];\n case 3:\n _a.sent();\n console.log('3. yield Bat');\n return [2 /*return*/];\n }\n });\n}\n// create a reference to generator function\nvar cricket = playCricket();\nconsole.log(cricket.next());\nconsole.log(cricket.next());\nconsole.log(cricket.next());\nconsole.log(cricket.next()); // done - true;\n//# sourceMappingURL=13_1_es6_ts_function_generators.js.map\n```\n\nSection 14. Sets and WeakSets\n=====================\n- JavaScript only had one type of collection, represented by the `Array` type \n- Due to the lack of other collection options, technique led to custom implementations of sets and maps using non-array objects\n\n14.1. Sets ES5\n---------------------\n- A Set is a list of values but no duplicates set consists of unique values\n- In array we access individual element, in Sets, we check some value is present/exists or not but we do not really access the value\n\n\u003e **Syntax \u0026 Example**: `Typescript 14_1_es5_ts_sets.ts`\n```typescript\n// export {};\n\nlet currentSet = Object.create(null);\n\ncurrentSet.name = true; //1, 0\n\n// checking for existence\nif (currentSet.name) {\n\n // do something\n console.log('name property exists');\n \n}\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 14_1_es5_ts_sets.js`\n```javascript\n\"use strict\";\n// export {};\nvar currentSet = Object.create(null);\ncurrentSet.name = true; //1, 0\n// checking for existence\nif (currentSet.name) {\n // do something\n console.log('name property exists');\n}\n//# sourceMappingURL=14_1_es6_ts_sets.js.map\n```\n\n14.2. Sets ES6\n---------------------\n- ES 6 adds a Set type that is an ordered list of values without duplicates\n- Sets allow fast access to the data they contain, adding a more efficient manner of tracking discrete values\n- Following are important methods/properties used with Sets:\n - `new Set()` - Sets are created using `new Set()` and \n - `add()` - Items are added to a set by calling the `add()` method, \n - `size` - To see how many items are in a set by checking the `size` property, \n - `has()` - To check existence of value use `has()` method \n - `delete` - To delete value from set use `delete` method\n\n\u003e **Syntax \u0026 Example**: `Typescript 14_2_es6_ts_sets.ts`\n```typescript\n// export {};\n\n// create new set\nlet currentSet2 = new Set();\n\n// add items in set\ncurrentSet2.add(\"Item One\");\ncurrentSet2.add(2);\ncurrentSet2.add(\"2\");\n\n// check size / / number of items in the set\nconsole.log('currentSet2.size:',currentSet2.size);\n\n// duplicates will ignored not allowed - so size will not change\n/* currentSet2.add(2);\ncurrentSet2.add(\"2\");\n\nconsole.log('currentSet2.size',currentSet2.size); */\n\nconsole.log('// ------------------------------');\n\n// object property based set with chaining method\nlet objectBasedSet = new Set(), objKey1 = {}, objKey2 = {};\n\nobjectBasedSet.add(objKey1).add(objKey2);\n\nconsole.log('objectBasedSet.size:',objectBasedSet.size);\n\nconsole.log('// ------------------------------');\n\n// set with duplicates\n\nlet techSet = new Set(['JS', 'jQuery', 'Angular', 'Node', 'React', 'JS', 'jQuery']);\nconsole.log('techSet.size:',techSet.size);\n\n// `has` method is used to check existence.availability of value\nconsole.log('Angular present in set:', techSet.has('Angular'));\n\n// delete \ntechSet.delete('JS');\nconsole.log('delete techSet.size:',techSet.size);\n\nconsole.log('// ------------------------------');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 14_2_es6_ts_sets.js`\n```javascript\n\"use strict\";\n// export {};\n// create new set\nvar currentSet2 = new Set();\n// add items in set\ncurrentSet2.add(\"Item One\");\ncurrentSet2.add(2);\ncurrentSet2.add(\"2\");\n// check size / / number of items in the set\nconsole.log('currentSet2.size:', currentSet2.size);\n// duplicates will ignored not allowed - so size will not change\n/* currentSet2.add(2);\ncurrentSet2.add(\"2\");\n\nconsole.log('currentSet2.size',currentSet2.size); */\nconsole.log('// ------------------------------');\n// object property based set with chaining method\nvar objectBasedSet = new Set(), objKey1 = {}, objKey2 = {};\nobjectBasedSet.add(objKey1).add(objKey2);\nconsole.log('objectBasedSet.size:', objectBasedSet.size);\nconsole.log('// ------------------------------');\n// set with duplicates\nvar techSet = new Set(['JS', 'jQuery', 'Angular', 'Node', 'React', 'JS', 'jQuery']);\nconsole.log('techSet.size:', techSet.size);\n// `has` method is used to check existence.availability of value\nconsole.log('Angular present in set:', techSet.has('Angular'));\n// delete \ntechSet.delete('JS');\nconsole.log('delete techSet.size:', techSet.size);\nconsole.log('// ------------------------------');\n//# sourceMappingURL=14_2_es6_ts_sets.js.map\n```\n\n14.3. WeakSets ES5\n---------------------\n- The `Set` type we learned last.earlier could alternately be called a `strong set`, because of the way it stores object references\n- WeakSets `stores only object references` not primitive values also the object references are weak\n\n\u003e **Syntax \u0026 Example**: `Typescript 14_3_es5_ts_weaksets.ts`\n```typescript\n// export {};\n\nlet dummySet = new Set(), idKey = {};\n\ndummySet.add(idKey);\nconsole.log(dummySet.size); // 1\n\nconsole.log('// ------------------------------');\n\n// eliminate original reference\nidKey = null;\n\nconsole.log(dummySet.size); // 1\n\n// get the original reference back\nidKey = [...dummySet][0];\n\nconsole.log('// ------------------------------');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 14_3_es5_ts_weaksets.js`\n```javascript\n\"use strict\";\n// export {};\nvar dummySet = new Set(), idKey = {};\ndummySet.add(idKey);\nconsole.log(dummySet.size); // 1\nconsole.log('// ------------------------------');\n// eliminate original reference\nidKey = null;\nconsole.log(dummySet.size); // 1\n// get the original reference back\nidKey = dummySet.slice()[0];\nconsole.log('// ------------------------------');\n//# sourceMappingURL=14_3_es5_ts_weaksets.js.map\n```\n\n14.4. WeakSets ES6\n---------------------\n- On the fundamentals of Garbage Collection and to avoid memory leaks `weakSets` are introduces\n- The main advantage of WeakSets over Sets is `memory is handled properly`\n- Weak sets `do not have a size` property\n\n\u003e **Syntax \u0026 Example**: `Typescript 14_4_es6_ts_weaksets.ts`\n```typescript\n// export {};\n\nlet peopleSet = new WeakSet(), nameKey = {};\n\n// add the object to the peopleSet\npeopleSet.add(nameKey);\n\nconsole.log(peopleSet.has(nameKey)); // true\n\nconsole.log('// ------------------------------');\n\nnameKey = null;\n\nconsole.log(peopleSet.has(nameKey)); // false\n\nconsole.log('// ------------------------------');\n\npeopleSet.delete(nameKey);\n\nconsole.log(peopleSet.has(nameKey)); // false\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 14_4_es6_ts_weaksets.js`\n```javascript\n\"use strict\";\n// export {};\nvar peopleSet = new WeakSet(), nameKey = {};\n// add the object to the peopleSet\npeopleSet.add(nameKey);\nconsole.log(peopleSet.has(nameKey)); // true\nconsole.log('// ------------------------------');\nnameKey = null;\nconsole.log(peopleSet.has(nameKey)); // false\nconsole.log('// ------------------------------');\npeopleSet.delete(nameKey);\nconsole.log(peopleSet.has(nameKey)); // false\n//# sourceMappingURL=14_4_es6_ts_weaksets.js.map\n```\n\nSection 15. Map and Weak Map\n=====================\n- A map is nothing more than a collection of key-value pair\n- A map is a collection of keys that correspond to specific values\n- Each item in a map stores two pieces of data, and values are retrieved by specifying the key to read from\n- Maps are frequently used as caches, for storing data to be quickly retrieved later\n- The only real difference between an object used as a set and an object used as a map is the value being stored\n- In array we access individual element, in Sets we check some value is present/exists or not, in Maps we actually retrieve the value\n\n15.1. Maps ES5\n---------------------\n\u003e **Syntax \u0026 Example**: `Typescript 15_1_es5_ts_maps.ts`\n```typescript\n// exports{}\n\nlet currentMap = Object.create(null);\n\ncurrentMap.name = \"Dinanath\";\n\n// retrieving a value\nlet nameValue = currentMap.name; \nconsole.log(nameValue);\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 15_1_es5_ts_maps.js`\n```javascript\n\"use strict\";\n// exports{}\nvar currentMap = Object.create(null);\ncurrentMap.name = \"Dinanath\";\n// retrieving a value\nvar nameValue = currentMap.name;\nconsole.log(nameValue);\n//# sourceMappingURL=15_1_es5_ts_maps.js.map\n```\n\n15.2. Maps ES6\n---------------------\n- The ES6 Map type is an `ordered list of key-value pairs`, where both the key and the value can have any type\n- Following are important methods/properties used with Maps:\n - `new Map()` - Maps are created using `new Map()` and \n - `set()` - Items are added to a map by calling the `set()` method, \n - `get()` - Items are retrieved by calling the `set()` method, \n - `size` - To see/know how many key, value pairs are present in a map\n - `has()` - To check existence of value use `has()` method / to determine given key exists in the map\n - `delete` - To delete key, value from set use `delete` method\n - `clear()` - To removes all keys and values pairs from the map\n\n\u003e **Syntax \u0026 Example**: `Typescript 15_2_es6_ts_maps.ts`\n```typescript\n// exports{}\n\nlet bookMap = new Map();\nbookMap.set('bookTitle', 'Learn ES6');\nbookMap.set('bookYear', 2018);\n\nconsole.log(bookMap.get('bookTitle'));\nconsole.log(bookMap.get('bookYear'));\nconsole.log('bookMap.size:', bookMap.size);\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n\nconsole.log(bookMap.has('bookTitle'));\n\nbookMap.delete('bookYear');\nconsole.log('bookMap.size:', bookMap.size);\n\nbookMap.clear();\nconsole.log(bookMap.has('bookTitle'));\nconsole.log('bookMap.size:', bookMap.size);\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n\nlet personDetailsMap = new Map(), nameKey = {}, ageKey = {};\n\npersonDetailsMap.set(nameKey, 'Dinanath');\npersonDetailsMap.set(ageKey, 35);\n\nconsole.log(personDetailsMap.get(nameKey));\nconsole.log(personDetailsMap.get(ageKey));\nconsole.log('personDetailsMap.size:',personDetailsMap.size);\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 15_2_es6_ts_maps.js`\n```javascript\n\"use strict\";\n// exports{}\nvar bookMap = new Map();\nbookMap.set('bookTitle', 'Learn ES6');\nbookMap.set('bookYear', 2018);\nconsole.log(bookMap.get('bookTitle'));\nconsole.log(bookMap.get('bookYear'));\nconsole.log('bookMap.size:', bookMap.size);\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\nconsole.log(bookMap.has('bookTitle'));\nbookMap.delete('bookYear');\nconsole.log('bookMap.size:', bookMap.size);\nbookMap.clear();\nconsole.log(bookMap.has('bookTitle'));\nconsole.log('bookMap.size:', bookMap.size);\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\nvar personDetailsMap = new Map(), nameKey = {}, ageKey = {};\npersonDetailsMap.set(nameKey, 'Dinanath');\npersonDetailsMap.set(ageKey, 35);\nconsole.log(personDetailsMap.get(nameKey));\nconsole.log(personDetailsMap.get(ageKey));\nconsole.log('personDetailsMap.size:', personDetailsMap.size);\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n//# sourceMappingURL=15_2_es6_ts_maps.js.map\n```\n\n15.3. Iterating over Maps \n---------------------\n- By using arrays we can set/add key, value pairs to maps during initialization\n- `entries()` method is used to retrieve both keys, value pairs at a time\n\n\u003e **Syntax \u0026 Example**: Type code in ScratchJS `Typescript 15_3_es6_ts_iterating_over_maps.ts`\n```typescript\nlet placeMap = new Map([\n ['country','Bharat'],\n ['capital','Delhi']\n]);\n\n// Iterating only keys with for...of loop \nfor (let key of placeMap.keys()){\n console.log('key:',key);\n}\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n\n// Iterating only values with for...of loop \nfor (let value of placeMap.values()){\n console.log('value:',value);\n}\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n\n// Iterating over key, value both at a time\nfor (let entry of placeMap.entries()) {\n console.log(`keys: ${entry[0]} \u003c==\u003e values: ${entry[1]}`);\n} \n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n\n// Iterating over key, value both at a time with destructuring\nfor (let [key,value] of placeMap.entries()) {\n console.log(`keys: ${key} \u003c==\u003e values: ${value}`);\n} \n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 15_3_es6_ts_iterating_over_maps.js`\n```javascript\n'use strict';\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i \u0026\u0026 _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n \u0026\u0026 _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar placeMap = new Map([['country', 'Bharat'], ['capital', 'Delhi']]);\n\n// Iterating only keys with for...of loop\nvar _iteratorNormalCompletion = true;\nvar _didIteratorError = false;\nvar _iteratorError = undefined;\n\ntry {\n for (var _iterator = placeMap.keys()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {\n var key = _step.value;\n\n console.log('key:', key);\n }\n} catch (err) {\n _didIteratorError = true;\n _iteratorError = err;\n} finally {\n try {\n if (!_iteratorNormalCompletion \u0026\u0026 _iterator.return) {\n _iterator.return();\n }\n } finally {\n if (_didIteratorError) {\n throw _iteratorError;\n }\n }\n}\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n\n// Iterating only values with for...of loop\nvar _iteratorNormalCompletion2 = true;\nvar _didIteratorError2 = false;\nvar _iteratorError2 = undefined;\n\ntry {\n for (var _iterator2 = placeMap.values()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {\n var value = _step2.value;\n\n console.log('value:', value);\n }\n} catch (err) {\n _didIteratorError2 = true;\n _iteratorError2 = err;\n} finally {\n try {\n if (!_iteratorNormalCompletion2 \u0026\u0026 _iterator2.return) {\n _iterator2.return();\n }\n } finally {\n if (_didIteratorError2) {\n throw _iteratorError2;\n }\n }\n}\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n\n// Iterating over key, value both at a time\nvar _iteratorNormalCompletion3 = true;\nvar _didIteratorError3 = false;\nvar _iteratorError3 = undefined;\n\ntry {\n for (var _iterator3 = placeMap.entries()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {\n var entry = _step3.value;\n\n console.log('keys: ' + entry[0] + ' \u003c==\u003e values: ' + entry[1]);\n }\n} catch (err) {\n _didIteratorError3 = true;\n _iteratorError3 = err;\n} finally {\n try {\n if (!_iteratorNormalCompletion3 \u0026\u0026 _iterator3.return) {\n _iterator3.return();\n }\n } finally {\n if (_didIteratorError3) {\n throw _iteratorError3;\n }\n }\n}\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n\n// Iterating over key, value both at a time with destructuring\nvar _iteratorNormalCompletion4 = true;\nvar _didIteratorError4 = false;\nvar _iteratorError4 = undefined;\n\ntry {\n for (var _iterator4 = placeMap.entries()[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {\n var _step4$value = _slicedToArray(_step4.value, 2);\n\n var _key = _step4$value[0];\n var _value = _step4$value[1];\n\n console.log('keys: ' + _key + ' \u003c==\u003e values: ' + _value);\n }\n} catch (err) {\n _didIteratorError4 = true;\n _iteratorError4 = err;\n} finally {\n try {\n if (!_iteratorNormalCompletion4 \u0026\u0026 _iterator4.return) {\n _iterator4.return();\n }\n } finally {\n if (_didIteratorError4) {\n throw _iteratorError4;\n }\n }\n}\n```\n\n15.4. WeakMaps ES6\n---------------------\n- Weak maps are the way to store weak object references, every key must be an object\n\n\u003e **Syntax \u0026 Example**: Type code in ScratchJS `Typescript 15_4_es6_ts_weakmaps.ts`\n```typescript\nlet placeMap = new WeakMap()\nlet objKeys = {};\n\nplaceMap.set(objKeys, 'Bharat');\nconsole.log(placeMap.get(objKeys));\n\nobjKeys = null;\nconsole.log(placeMap.get(objKeys));\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 15_4_es6_ts_weakmaps.js`\n```javascript\n'use strict';\n\nvar placeMap = new WeakMap();\nvar objKeys = {};\n\nplaceMap.set(objKeys, 'Bharat');\nconsole.log(placeMap.get(objKeys));\n\nobjKeys = null;\nconsole.log(placeMap.get(objKeys));\n```\n\nSection 16. Symbols\n=====================\n16.1. Symbols Introduction\n---------------------\n- `Symbol` is a `new primitive data type introduced in ES6/ES2015` to generate `unique ids` but we never get access to such ids\n- Because symbols are primitive values, calling `new Symbol()` throws an error\n\n\u003e **Syntax \u0026 Example**: `Typescript 16_1_es6_ts_symbol.ts`\n```typescript\n// exports{}\n\n// let firstSymbol = symbol();\nlet firstSymbol = Symbol('First Symbol');\nconsole.log('typeof firstSymbol:',typeof firstSymbol);\nconsole.log('firstSymbol.toString:',firstSymbol.toString())\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n\n// symbol always create a unique ids\n// let symbol1 = Symbol();\n// let symbol2 = Symbol();\n\n// console.log(symbol1 === symbol2);\n\nlet symbol1 = Symbol('i am symbol1');\nlet symbol2 = Symbol('i am symbol2');\n\nconsole.log(symbol1 === symbol2);\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 16_1_es6_ts_symbol.js`\n```javascript\n\"use strict\";\n// exports{}\n// let firstSymbol = symbol();\nvar firstSymbol = Symbol('First Symbol');\nconsole.log('typeof firstSymbol:', typeof firstSymbol);\nconsole.log('firstSymbol.toString:', firstSymbol.toString());\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n// symbol always create a unique ids\n// let symbol1 = Symbol();\n// let symbol2 = Symbol();\n// console.log(symbol1 === symbol2);\nvar symbol1 = Symbol('i am symbol1');\nvar symbol2 = Symbol('i am symbol2');\nconsole.log(symbol1 === symbol2);\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n//# sourceMappingURL=16_1_es6_ts_symbol.js.map\n```\n\n16.2. Symbols Registry\n---------------------\n- `Symbols Registry` helps to store symbol so that we can use/share it in/with other files\n- `Symbol.for()` method is used store symbol in the global symbol registry/library\n- once two or more symbols added/stored in symbol registry than they become identical/non-unique\n- The `Symbol.for()` method first searches the global symbol registry to see `if a symbol with the key \"uid\" exists`\n- `Symbol.keyFor()` methods retrieve description/key/uid of symbol registry\n\n\u003e **Syntax \u0026 Example**: `Typescript 16_2_es6_ts_symbol_registry.ts`\n```typescript\n// exports{}\n\nlet oneSymbol = Symbol.for('SymbolRegistry');\nlet twoSymbol = Symbol.for('SymbolRegistry');\n\nconsole.log(oneSymbol === twoSymbol); // true - as uid/keys passed 'SymbolRegistry' is same for both\n\nconsole.log('key/uid:', Symbol.keyFor(oneSymbol));\nconsole.log('key/uid:', Symbol.keyFor(twoSymbol));\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n\nlet id = Symbol('uid');\nlet Employee = {\n [id]: 101,\n}\n\nconsole.log(Object.getOwnPropertyNames(Employee));\nconsole.log(Object.getOwnPropertySymbols(Employee)); // Symbol('uid')\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 16_2_es6_ts_symbol_registry.js`\n```javascript\n\"use strict\";\n// exports{}\nvar _a;\nvar oneSymbol = Symbol.for('SymbolRegistry');\nvar twoSymbol = Symbol.for('SymbolRegistry');\nconsole.log(oneSymbol === twoSymbol); // true - as uid/keys passed 'SymbolRegistry' is same for both\nconsole.log('key/uid:', Symbol.keyFor(oneSymbol));\nconsole.log('key/uid:', Symbol.keyFor(twoSymbol));\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\nvar id = Symbol('uid');\nvar Employee = (_a = {},\n _a[id] = 101,\n _a);\nconsole.log(Object.getOwnPropertyNames(Employee));\nconsole.log(Object.getOwnPropertySymbols(Employee)); // Symbol('uid')\n//# sourceMappingURL=16_2_es6_ts_symbol_registry.js.map\n```\n\n16.3. Iterating over Symbols\n---------------------\n- ECMAScript 6 has predefined symbols called `well-known symbols` that represent common behaviors in JavaScript that were previously considered internal-only operations, \n- There are many `built-in symbol` or `well-known symbols` in ES6, Each well-known symbol is represented by a property on the Symbol object, such as `Symbol.create`, `Symbol.match`,`Symbol.replace`,`Symbol.search`,`Symbol.iterator` and so on\n- `Symbol.iterator` is one of the built-in symbols, to run ES6 loops like `for...of`, the object must consist of `Symbol.iterator` method\n- `String \u0026 Array` have `Symbol.iterator` method, `Number \u0026 Object` does not have `Symbol.iterator`\n\n\u003e **Syntax \u0026 Example**: `Typescript 16_3_es6_ts_symbol_iterator.ts`\n```typescript\n// exports{}\n\nlet string1 = 'Dinanath';\nlet array1 = ['Dinanath', 29] \nlet num1 = 29;\nlet object1 = {name: 'Dinanath'};\n\n// check Symbol.iterator` method exist on which primitive data type\nconsole.log('string Symbol.iterator:', typeof string1[Symbol.iterator]);\nconsole.log('array Symbol.iterator:', typeof array1[Symbol.iterator]);\nconsole.log('num Symbol.iterator:', typeof num1[Symbol.iterator]);\nconsole.log('object Symbol.iterator:', typeof object1[Symbol.iterator]);\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 16_3_es6_ts_symbol_iterator.js`\n```javascript\n\"use strict\";\n// exports{}\nvar string1 = 'Dinanath';\nvar array1 = ['Dinanath', 29];\nvar num1 = 29;\nvar object1 = { name: 'Dinanath' };\n// check Symbol.iterator` method exist on which primitive data type\nconsole.log('string Symbol.iterator:', typeof string1[Symbol.iterator]);\nconsole.log('array Symbol.iterator:', typeof array1[Symbol.iterator]);\nconsole.log('num Symbol.iterator:', typeof num1[Symbol.iterator]);\nconsole.log('object Symbol.iterator:', typeof object1[Symbol.iterator]);\n//# sourceMappingURL=16_3_es6_ts_symbol_iterator.js.map\n```\n\nSection 17. Iterables and Iterators\n=====================\n- ES6 introduced `iteration` - a new way to traverse data makes working with collections of data easier\n- `Iterators` are just objects with a specific interface designed for iteration\n- All iterator objects have a `next() method that returns a result object`\n- The result object has two properties: `value`, which is the next value, and `done`, which is a boolean that’s true when there are no more values to return\n- The iterator keeps an internal pointer to a location within a collection of values and with each call to the next() method, it returns the next appropriate value\n- `Iterable` - any object that implements a method `Symbol.iterator(), which returns `Iterator`\n- `Iterator` - any object that implements a `next()` method, to access elements in collection which returns `IResultObj`\n- `IResultObj` - Contains two properties `value` (the next value) and `done` (indicates iteration completed or not)\n- `for...of` loop uses Iterator functionality/mechanism with `next()` method to loop through an object\n\n17.1. Iterators\n---------------------\n\n\u003e **Syntax \u0026 Example**: `Typescript 17_1_es6_ts_iterator.ts`\n```typescript\n// exports{}\n\nlet iterableArray = ['One', 'Two', 'Three', 'Four', 'Five']\n\nfunction createCustomIterator(_arr) {\n let curCount = 0;\n return {\n next: function () {\n return curCount \u003c iterableArray.length ? { value: iterableArray[curCount++], done: false } : { value: 'iteration completed', done: true };\n }\n }\n}\n\nlet customIterator1 = createCustomIterator(iterableArray);\n\nconsole.log(customIterator1.next());\nconsole.log(customIterator1.next());\nconsole.log(customIterator1.next());\nconsole.log(customIterator1.next());\nconsole.log(customIterator1.next());\nconsole.log(customIterator1.next());\nconsole.log(customIterator1.next());\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: `JavaScript 17_1_es6_ts_iterator.js`\n```javascript\n\"use strict\";\n// exports{}\nvar iterableArray = ['One', 'Two', 'Three', 'Four', 'Five'];\nfunction createCustomIterator(_arr) {\n var curCount = 0;\n return {\n next: function () {\n return curCount \u003c iterableArray.length ? { value: iterableArray[curCount++], done: false } : { value: 'iteration completed', done: true };\n }\n };\n}\nvar customIterator1 = createCustomIterator(iterableArray);\nconsole.log(customIterator1.next());\nconsole.log(customIterator1.next());\nconsole.log(customIterator1.next());\nconsole.log(customIterator1.next());\nconsole.log(customIterator1.next());\nconsole.log(customIterator1.next());\nconsole.log(customIterator1.next());\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n//# sourceMappingURL=17_1_es6_ts_iterator.js.map\n```\n\n17.2. Iterating objects\n---------------------\n- JavaScript `objects are not iterable`\n- `for...of` loop doesn't work on objects directly \n\n\u003e **Syntax \u0026 Example**: Type code in ScratchJS `Typescript 17_2_es6_ts_iterating_objects.ts`\n```typescript\n// exports{}\n\nlet HumanObj = {\n name: 'Dinanath',\n age: 35,\n country: 'India'\n}\n\n// for...of loop error - Symbol.iterator is not a function\n/* for (let info of HumanObj) {\n console.log(info);\n} */\n\nHumanObj[Symbol.iterator] = function () {\n let objProperties = Object.keys(HumanObj);\n let curCount = 0;\n let isDone = false;\n\n let next = () =\u003e {\n if (curCount \u003e= objProperties.length) {\n isDone = true;\n }\n return { done: isDone, value: this[objProperties[curCount++]] }\n }\n return { next };\n}\n\n// for...of loop with object\nfor (let info of HumanObj) {\n console.log(info);\n}\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n```\n\n\u003chr /\u003e\n\n\u003e **Syntax \u0026 Example**: Type code in ScratchJS `JavaScript 17_2_es6_ts_iterating_objects.js`\n```javascript\n'use strict';\n\n// exports{}\n\nvar HumanObj = {\n name: 'Dinanath',\n age: 35,\n country: 'India'\n};\n\n// for...of loop error - Symbol.iterator is not a function\n/* for (let info of HumanObj) {\n console.log(info);\n} */\n\nHumanObj[Symbol.iterator] = function () {\n var _this = this;\n\n var objProperties = Object.keys(HumanObj);\n var curCount = 0;\n var isDone = false;\n\n var next = function next() {\n if (curCount \u003e= objProperties.length) {\n isDone = true;\n }\n return { done: isDone, value: _this[objProperties[curCount++]] };\n };\n return { next: next };\n};\n\n// for...of loop with object\nvar _iteratorNormalCompletion = true;\nvar _didIteratorError = false;\nvar _iteratorError = undefined;\n\ntry {\n for (var _iterator = HumanObj[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {\n var info = _step.value;\n\n console.log(info);\n }\n} catch (err) {\n _didIteratorError = true;\n _iteratorError = err;\n} finally {\n try {\n if (!_iteratorNormalCompletion \u0026\u0026 _iterator.return) {\n _iterator.return();\n }\n } finally {\n if (_didIteratorError) {\n throw _iteratorError;\n }\n }\n}\n\nconsole.log('// ------------------------------');\n// console.log('// ------------------------------');\n```\n\nSection 18. String methods\n=====================\n18.1. Repeat\n---------------------\n- `repeat` is t","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fes6-ecmascript6-ecmascript2015-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinanathsj29%2Fes6-ecmascript6-ecmascript2015-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fes6-ecmascript6-ecmascript2015-tutorial/lists"}