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.
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. Also, some basic knowledge of HyperText Markup Language (HTML) HTML5 Essentials and CSS3 Fundamentals 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.
- Course Introduction
- Introduction to ES6-ECMAScript 6
- Transpiling ES6-ECMAScript 6
- New Variables—Creation Updating and Scoping
- Function Improvements objects
- Extended Parameter Handling
- Enhancing object literals
- Template Strings Literals
- Destructuring Assignment
- Loops
- Classes
- Modules
- Generators
- Sets and WeakSets
- Map and Weak Map
- Symbols
- Iterables and Iterators
- String methods
- Reference
- Whats Next Step?
Hi 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.
ES6-ECMAScript 6-ECMAScript 2015 will introduce us to the newest language features that can be used in JavaScript code - The Modern JavaScript.
This 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.
- JavaScript is standard implementations of standard specifications called ECMAScript
- The last ECMAScript Version is 5.0 ie. ES5
- JavaScript = Language in practice, ES5/ES6 = Langauge standards
1995- JavaScript invented/created by“Brandan Eich”atNetscapeoriginally named as"LiveScript"1996-Microsofthas developed new version of JavaScript named as"JScript"forIE-3- Due to different standards/version on a different browser, there was an urgent need to standardized language
ECMA (European Computer Manufacturers Association)is the governing body which provides standardization/specification or JavaScript language implementation1997- ECMAScript 1 released (JavaScript Submitted toECMAScript)2009- ECMAScript 5 released (for...each, array method, map, filter)2015- ECMAScript 6 released (tones of advanced awesome features -let, const, function default parameters, arrow function, classes, template string, new array/object methods)- ES6-ECMAScript 6-ECMAScript 2015 is the evolution of ES5...Future of JavaScript
- ES6 adds a tremendous amount of features to JavaScript such as let, constants, classes, Fat Arrow functions, etc.
ES6-ECMAScript 6-ECMAScript 2015 = ES5 + New Awesome Features
- Typescript is Open source/free development language
- Developed and maintained by Microsoft
- Typed superset of JavaScript which Compiles to plain JavaScript
- It consists of variables Data Types string, number, boolean, etc. but it is optional
- One can write safer/meaningful/easily maintainable/scalable code
Most 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.
Check current browser support and compatibility status for ES6:
Note: Internet Explorer does not support ES6/ECMAScript 6.
- If the browser does not support all of the ES6/ECMAScript 6 features than alternatively:
- we can use the
online transpilers (source-to-source compilers)free of cost whichtranspile our current ES6 code to ES5for better browser compatibility without leaving out the benefits of enhanced syntax and capabilities of ES6
- we can use the
- Transpiling is the process of taking
ES6 code and converting it into ES5, so browsers can read it - The transpiling process is also used for languages like
CoffeeScript and TypeScriptto convert code into JavaScript - There are many different transpilers/transpiling tools available, the most popular are:
- Typescript
- Babel,
- Traceur and
- Closure
- Some testing we can try in Chrome Canary - https://www.google.com/intl/en_in/chrome/canary/ a version of Google Chrome (some ES6 feature supported not all, unstable)
- All browsers
does not supports all latest new featuresof ES6/ES2015 - Chrome and Firefox supports almost 90% of features
Transpilers- converts ES6/ES2015 code into ES5 (plain JavaScript, browser understandable code)- Popular Transpilers - Typescript, Babel, Traceur, Closure
3.2. Babel.js (https://babeljs.io/) - working with Babel
- Babel is one of the most popular tools for transpiling ES6 code and gets ES5 code
- Babel was
created by Sebastian McKenziean Australian developer at Facebook ReactJS the UI library created by Facebook uses Babelas a preferred tool for transpiling the ES6 features back into ES5 JavaScript
- 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 - 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 = - To get rid of ES6 non/not support error in browser, download and use/include Babel transpiler script library like:
<script src="babel.js URL">and finally register/make it official with<script type="text/babel">
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.
Syntax & Example:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- include babel library to transpile/convert ES6 code to ES5 -->
<script src="../assets/script/babel/babel_browser_5.8.29.min.js"></script>
<!-- internal JavaScript - head section -->
<script type="text/babel">
// Write all JavaScript code here
// ES6 function syntax with default parameter
function showFullName(firstName='Dinanath', lastName='Jayaswal') {
console.log(firstName + ' '+ lastName);
}
showFullName();
</script>
</head>
<body>
</body>
</html>Alternatively, install babel with nodejs ie npm package and use respective commands at CLI to transpile ES6 files into ES5.
- https://webpack.github.io/
- https://webpack.js.org/
- For the larger scale applications its advisable to use a build tool like
webpackwhich helps to automate the process like transpiling, less/sass conversion, script/image/CSS bundling and more - Webpack is a module bundler (bundle your assets, scripts, images, styles)
- Webpack takes modules with dependencies and emits static assets representing those modules
- Create a package.json file (contains module/dependency, documentation, project information) with the command:
npm init - Install webpack with node/npm with the command:
npm install -g webpack - Install babel-loader (helps to convert ES6 to ES5) node/npm with command:
npm install --save-dev babel-loader - Create a
webpack.config.js - Run command:
webpack - In the .html file with script src use a path of newly created
bundle.jsfile
- Download and Install node (node comes with npm) (website: https://nodejs.org/en)
- After installation check version of node and npm by command:
node -v / npm -v - Install a
Text Editorto write code likeVS code,Sublime Text,Adobe Bracketsor any one of your choice - Install a
transpilerliketypescriptglobally to transpile/convert code into plain JavaScript, by using the command:npm install typescript -g - In VS Code editor configure typescript: Press
CTRL+SHIFT+B-> Choose Task Runner - > Typescript Watch Mode -> it will createtask.json
Syntax & Example:
task.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"option": "watch",
"problemMatcher": [
"$tsc-watch"
]
},
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
]
}
]
}- Create a typescript configuration (
tsconfig.jsonfile) by using the command:tsc --init- include/modify some settings in tsconfig.json:
"sourceMap": true,- map files helps to debug (.ts to .js mapping)"outDir": "./scripts",- typescript transpiler will generate/organize all .js files into scripts folder
- include/modify some settings in tsconfig.json:
Syntax & Example:
tsconfig.json
{
"compilerOptions": {
/* Basic Options */
"target": "es5",
"module": "commonjs",
"outDir": "./scripts",
"strict": true,
"esModuleInterop": true
}
}
- create a simple .ts file to verify its conversion/transpilation to .js
Syntax & Example:
Typescript 3_6_es6_ts_transpiling.ts
// 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 {}
// export {};
console.log('Welcome to ES6');
let firstName: string = 'Dinanath';
let lastName: string = 'Jayaswal';
const country: string = 'India'
let isMale: boolean = true;
console.log(firstName + ' ' + lastName);
// ES6 function syntax with default parameter
function showFullName(_firstName = 'Dinanath', _lastName = 'Jayaswal') {
console.log(_firstName + ' ' + _lastName);
}
showFullName();- check typescript version by command:
tsc -v - check typescript help by command:
tsc -hortsc --help - To convert/transpile individual .ts into .js file run command:
tsc fileName.ts - Run command for watch mode:
tsc filename.ts --watchor to watch all files at once type command:tsc --watch
Syntax & Example:
Typescript code converted to JavaScript 3_6_es6_ts_transpiling.js
"use strict";
// 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 {}
// export {};
console.log('Welcome to ES6');
var firstName = 'Dinanath';
var lastName = 'Jayaswal';
var country = 'India';
var isMale = true;
console.log(firstName + ' ' + lastName);
// ES6 function syntax with default parameter
function showFullName(_firstName, _lastName) {
if (_firstName === void 0) { _firstName = 'Dinanath'; }
if (_lastName === void 0) { _lastName = 'Jayaswal'; }
console.log(_firstName + ' ' + _lastName);
}
showFullName();
//# sourceMappingURL=3_6_es6_ts_transpiling.js.map- create an
index.htmlfile and include newly created .js file with script tag to check and verify the output
Syntax & Example: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- internal style -->
<style>
/* css selector: { property:value; } */
body {
font-family: arial;
}
</style>
<title>3_6_es6_ts_transpiling</title>
<script src="./scripts/3_6_es6_ts_transpiling.js"></script>
</head>
<body>
<h1>Working with ES6 & Typescript features</h1>
</body>
</html>- To Run a to run the app from virtual local web server install npm utilities like
serve, HTTP, lite-server, staticetc- command:
npm install lite-server -g - start server with the command:
lite-serverand check the output in the browser
- command:
- Typescript installation/transpilation process is pretty lengthy and tedious
- Alternatively, Simply we can add/install a
Google Chrome ExtentionnamedScratch 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 Scratch JSalso supportsCoffeeScript,LiveScriptand more compile-to-JS languages will be added soon- To install
Scratch JSas aGoogle Chrome Extention:- 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
- From searched result select Scratch JS and click -> ADD to Chrome
- 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
Hoisting- Behind the scene JavaScript declare variables at the topFunctional scope-varkeyword got functional scope (accessible through-out the function body), at the same time var keyword variables also get hoistedLet keyword block scope- let keyword variables exist only insideblock { }scope, but never hoisted
Syntax & Example:
Typescript 4_1_es6_ts_var_hoisting.ts
// 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 {}
// export {};
greetUser1('Dinanath1'); //hoising funciton declaration will move to top
function greetUser1(userName1: string) {
if (userName1 === 'Dinanath1') {
var greetings1 = 'Hello Dinanath, Welcome';
} else {
var greetings1 = 'Hello Guest';
}
console.log(greetings1); //var variables available outside as it have functional scope
var greetings1: string; //hoisting variable declaration will move to top
}
greetUser1('Dinanath2'); Syntax & Example:
JavaScript 4_1_es6_ts_var_hoisting.js
"use strict";
// 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 {}
// export {};
greetUser1('Dinanath1');//hoising funciton declaration will move to top
function greetUser1(userName1) {
if (userName1 === 'Dinanath1') {
var greetings1 = 'Hello Dinanath, Welcome';
}
else {
var greetings1 = 'Hello Guest';
}
console.log(greetings1); //var variables available outside as it have functional scope
var greetings1; //hoisting variable declaration will move to top
}
greetUser1('Dinanath2');
//# sourceMappingURL=4_1_es6_ts_var_hoisting.js.map- To
deal with scopein JavaScript we have new keyword namedletused to declare variables - We use the let keyword to
create block scopingin JavaScript in locations where we weren't able to do so before Let keyword block scope- let keyword variables exist only insideblock { }scope- let keyword variables cannot be used before declaration (
never hoisted) - let keyword variables
cannot be re-declared
Syntax & Example:
Typescript 4_2_es6_ts_let.ts
// 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 {}
// export {};
function greetUser1(userName1: string) {
if (userName1 === 'Dinanath1') {
var greetings1 = 'Hello Dinanath, Welcome';
} else {
var greetings1 = 'Hello Guest';
}
console.log(greetings1); //var variables available outside as it have functional scope
var greetings1: string; //hoisting variable declaration will move to top
}
greetUser1('Dinanath1');
// ------------------------------
/*
function greetUser2(userName2:string){
if(userName2 === 'Dinanath2'){
let greetings2 = 'Hello Dinanath2';
}else{
let greetings2 = 'Hello Guest';
}
console.log(greetings2); //error - let variables not available out side block
}
*/
function greetUser2(userName2: string) {
let greetings2
if (userName2 === 'Dinanath2') {
greetings2 = 'Hello Dinanath2';
} else {
greetings2 = 'Hello Guest';
}
console.log(greetings2);
}
greetUser2('Dinanath2');
// ------------------------------
var num1: number = 10;
var num2: number = 20;
if (num1 === 10) {
var num1: number = 100;
let num2: number = 200;
console.log('inside num1 : ' + num1);
console.log('inside num2 : ' + num2);
}
console.log('outside num1 : ' + num1);
console.log('outside num2 : ' + num2);
// ------------------------------
// let variables not hoisted
/* function greetUser3(userName3:string){
if(userName3 === 'Dinanath3'){
greetings3 = 'Hello Dinanath3'; //error - let variables not hoisted
}else{
greetings3 = 'Hello Guest'; //error - let variables not hoisted
}
console.log(greetings3); //error - let variables not hoisted
let greetings3;
} */
// ------------------------------
// let variables not be re-declared
// var firstName: string = 'Dinanath'; //error
// var firstName: string = 'DJ'; //error
let fName;
// let fName; //cannot redeclare block-scoped variable 'fName'Syntax & Example:
JavaScript 4_2_es6_ts_let.js
"use strict";
// 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 {}
// export {};
function greetUser1(userName1) {
if (userName1 === 'Dinanath1') {
var greetings1 = 'Hello Dinanath, Welcome';
}
else {
var greetings1 = 'Hello Guest';
}
console.log(greetings1); //var variables available outside as it have functional scope
var greetings1; //hoisting variable declaration will move to top
}
greetUser1('Dinanath1');
// ------------------------------
/*
function greetUser2(userName2:string){
if(userName2 === 'Dinanath2'){
let greetings2 = 'Hello Dinanath2';
}else{
let greetings2 = 'Hello Guest';
}
console.log(greetings2); //error - let variables not available out side block
}
*/
function greetUser2(userName2) {
var greetings2;
if (userName2 === 'Dinanath2') {
greetings2 = 'Hello Dinanath2';
}
else {
greetings2 = 'Hello Guest';
}
console.log(greetings2);
}
greetUser2('Dinanath2');
// ------------------------------
var num1 = 10;
var num2 = 20;
if (num1 === 10) {
var num1 = 100;
var num2_1 = 200;
console.log('inside num1 : ' + num1);
console.log('inside num2 : ' + num2_1);
}
console.log('outside num1 : ' + num1);
console.log('outside num2 : ' + num2);
// ------------------------------
// let variables not hoisted
/* function greetUser3(userName3:string){
if(userName3 === 'Dinanath3'){
greetings3 = 'Hello Dinanath3'; //error - let variables not hoisted
}else{
greetings3 = 'Hello Guest'; //error - let variables not hoisted
}
console.log(greetings3); //error - let variables not hoisted
let greetings3;
} */
// ------------------------------
// let variables not be re-declared
// var firstName: string = 'Dinanath'; //error
// var firstName: string = 'DJ'; //error
var fName;
// let fName; //cannot redeclare block-scoped variable 'fName'
//# sourceMappingURL=4_2_es6_ts_let.js.map- While dealing with
closures and loopsits advisable touse letinstead ofvar
Syntax & Example:
Typescript 4_3_es6_ts_let_loop.ts
// export {};
for (var i = 1; i <= 5; i++) {
setTimeout(() => {
console.log('var based for loop', i); //6
}, 1000);
}
// ------------------------------
for (let j = 1; j <= 5; j++) {
setTimeout(() => {
console.log('let based for loop', j); //1,2,3,4,5
}, 1000);
}Syntax & Example:
JavaScript 4_3_es6_ts_let_loop.js
"use strict";
// export {};
for (var i = 1; i <= 5; i++) {
setTimeout(function () {
console.log('var based for loop', i); //6
}, 1000);
}
var _loop_1 = function (j) {
setTimeout(function () {
console.log('let based for loop', j); //1,2,3,4,5
}, 1000);
};
// ------------------------------
for (var j = 1; j <= 5; j++) {
_loop_1(j);
}
//# sourceMappingURL=4_3_es6_ts_let_loop.js.map- Like the let keyword, we can also use
constan alternative for declaring variables - const is short for
constantallows us to set constant variables whichshouldn't be reassigned - We can not change the value of const variable, so use const to define
fixed set of valuesalso toprotect the valuesof certain variables - Creating/Using an existing const variable again or re-assigning value to const variable generates
TypeError, SyntaxError - const keyword is used to define/create
variable with read-onlyconstants - const must have some value
while declaration/initialized - const value is fixed,
not to change/re-assignedin future - const is also having
block scope - the const value
never hoisted - However, we can still change object properties or array elements
Syntax & Example:
Typescript 4_4_1_ts_const_var.ts
// export {};
let firstName
//const firstName1; //error - const must have some value `while declaration/initialized`
const lastName = 'Jayaswal';
// const lastName //error - const value is fixed, `not to change/re-assigned` in future
console.log(firstName);
console.log(lastName);Syntax & Example:
JavaScript 4_4_1_ts_const_var.js
"use strict";
// export {};
var firstName;
//const firstName1; //error - const must have some value `while declaration/initialized`
var lastName = 'Jayaswal';
// const lastName //error - const value is fixed, `not to change/re-assigned` in future
console.log(firstName);
console.log(lastName);
//# sourceMappingURL=4_4_1_ts_const_var.js.mapSyntax & Example:
Typescript 4_4_2_ts_const_array.ts
// export {};
const PersonArray = ['Dinanath', 'Jayaswal', 35, 'Male', true];
console.log(PersonArray[0]);
// we can re-assign value
PersonArray[0] = 'Vedika';
console.log(PersonArray[0]);
//error - we cannot re-assign new array
/* PersonArray = {
}*/Syntax & Example:
JavaScript 4_4_2_ts_const_array.js
"use strict";
// export {};
var PersonArray = ['Dinanath', 'Jayaswal', 35, 'Male', true];
console.log(PersonArray[0]);
// we can re-assign value
PersonArray[0] = 'Vedika';
console.log(PersonArray[0]);
//error - we cannot re-assign new array
/* PersonArray = {
}*/
//# sourceMappingURL=4_4_2_ts_const_array.js.mapSyntax & Example:
Typescript 4_4_3_ts_const_object.ts
// export {};
const Person = {
firstName: 'Dinanath',
lastName: 'Jayaswal',
age: 35,
gender: 'Male',
isMale: true
}
console.log(Person.firstName);
// we can re-assign value
Person.firstName = 'Vedika';
console.log(Person.firstName);
//error - we cannot re-assign new object
/* Person = {
} */Syntax & Example:
JavaScript 4_4_3_ts_const_object.js
"use strict";
// export {};
var Person = {
firstName: 'Dinanath',
lastName: 'Jayaswal',
age: 35,
gender: 'Male',
isMale: true
};
console.log(Person.firstName);
// we can re-assign value
Person.firstName = 'Vedika';
console.log(Person.firstName);
//error - we cannot re-assign new object
/* Person = {
} */
//# sourceMappingURL=4_4_3_ts_const_object.js.map- If variables have
one time assignments (fixed value, not changed in future)use const - If value re-assignments/
value updationrequires uselet - Const variables need value at the time of definition;
const name='Dinanath'; - Let variables can be defined/initialized with empty value;
let name; - Const variables are
immutable, not changeablevariables - Let variables are
mutable, can be changed or re-assigned
Arrow functionsalso calledfat arrow functions, have an abbreviated syntax for working with functions with the equal sign and the greater than symbolfat arrow functionsprovide syntactical sugar so that we can shorten old function definition, make it more readable and compact- Fat Arrow function
provides short/concise syntax/wayof writing functions, uses fewer lines of code - Fat Arrow function also
simplified behavior of thiskeyword in JavaScript
Syntax & Example:
Typescript 5_1_es6_ts_fat_arrow_function.ts
// export {};
//normal function
var getNormalValue = function () {
return 100;
}
console.log('normal function return', getNormalValue());
// ------------------------------
//arrow function
const getArrowValue1 = () => {
return 200;
}
console.log('fat arrow function return', getArrowValue1());
// ------------------------------
//arrow function - single line return
var getArrowValue2 = () => 500;
console.log('fat arrow function single line return', getArrowValue2());
// ------------------------------
//arrow function - parameter
var getArrowValue3 = (num: number) => num;
console.log('fat arrow function parameter', getArrowValue3(10));
// ------------------------------
console.log('type of getArrowValue2', typeof getArrowValue2);Syntax & Example:
JavaScript 5_1_es6_ts_fat_arrow_function.js
"use strict";
// export {};
//normal function
var getNormalValue = function () {
return 100;
};
console.log('normal function return', getNormalValue());
// ------------------------------
//arrow function
var getArrowValue1 = function () {
return 200;
};
console.log('fat arrow function return', getArrowValue1());
// ------------------------------
//arrow function - single line return
var getArrowValue2 = function () { return 500; };
console.log('fat arrow function single line return', getArrowValue2());
// ------------------------------
//arrow function - parameter
var getArrowValue3 = function (num) { return num; };
console.log('fat arrow function parameter', getArrowValue3(10));
// ------------------------------
console.log('type of getArrowValue2', typeof getArrowValue2);
//# sourceMappingURL=5_1_es6_ts_fat_arrow_function.js.map- Fat arrow functions can help us deal with the scope of the
thiskeyword in our JavaScript code - In
normal JavaScript function context creates their own scope this - Fat arrow function =>
does not create own scopefor 'this', but refers to itsparents this
Syntax & Example:
Typescript 5_2_es6_ts_fat_arrow_function_this_scope.ts
// export {};
var EmployeeObj1 = {
empId1: 111,
greetings1: function () {
console.log('this.empId1 : ' + this.empId1);
}
}
EmployeeObj1.greetings1(); // empId1: 111,
// ------------------------------
//error - internal function 'this' scope created
/* var EmployeeObj2 = {
empId2: 222,
greetings2: function () {
setTimeout(function () {
console.log('this.empId2 : ' + this.empId2);
}, 1000)
}
}
EmployeeObj2.greetings2(); */
// ------------------------------
//internal function 'this' scope created, work around with 'self'
var EmployeeObj3 = {
empId3: 333,
greetings3: function () {
var self = this;
setTimeout(function () {
console.log('self.empId3 : ' + self.empId3);
}, 1000)
}
}
EmployeeObj3.greetings3(); // empId3: 333,
// ------------------------------
//best work around with fat arrow function =>
var EmployeeObj4 = {
empId4: 444,
greetings4: function () {
setTimeout(() => {
console.log('this.empId4 : ' + this.empId4);
}, 1000)
}
}
EmployeeObj4.greetings4(); // empId4: 444,Syntax & Example:
JavaScript 5_2_es6_ts_fat_arrow_function_this_scope.js
"use strict";
// export {};
var EmployeeObj1 = {
empId1: 111,
greetings1: function () {
console.log('this.empId1 : ' + this.empId1);
}
};
EmployeeObj1.greetings1(); // empId1: 111,
// ------------------------------
//error - internal function 'this' scope created
/* var EmployeeObj2 = {
empId2: 222,
greetings2: function () {
setTimeout(function () {
console.log('this.empId2 : ' + this.empId2);
}, 1000)
}
}
EmployeeObj2.greetings2(); */
// ------------------------------
//internal function 'this' scope created, work around with 'self'
var EmployeeObj3 = {
empId3: 333,
greetings3: function () {
var self = this;
setTimeout(function () {
console.log('self.empId3 : ' + self.empId3);
}, 1000);
}
};
EmployeeObj3.greetings3(); // empId3: 333,
// ------------------------------
//best work around with fat arrow function =>
var EmployeeObj4 = {
empId4: 444,
greetings4: function () {
var _this = this;
setTimeout(function () {
console.log('this.empId4 : ' + _this.empId4);
}, 1000);
}
};
EmployeeObj4.greetings4(); // empId4: 444,
//# sourceMappingURL=5_2_es6_ts_fat_arrow_function_this_scope.js.map- ES6 allows function parameters to have/specify simple and intuitive default values
- It simply means that if no arguments are provided to function call these default parameters values will be used
- In ES6 we can set/enter/assign
default value to Parameters - If no value passed in functional call than default values/Parameters taken into consideration
- whille checking
arguments.length, default value is not considered/counted,only actual passed arguments counted
Syntax & Example:
Typescript 6_1_es6_ts_parameters_default_value.ts
// export {};
//normal function call
/* let showValue1 = function (value1) {
console.log(value1);
}
showValue1(); //undefined - as no parameters passed
*/
// ------------------------------
let showValue2 = function (value2 = 20) {
console.log(value2);
console.log(arguments.length);
console.log('// ------------------------------');
}
showValue2(); // 20
showValue2(200); // 200
// ------------------------------
let showValue3 = function (value3 = 20, value4 = value3 + 10) {
console.log(value3);
console.log(value4);
console.log(value3, value4);
console.log(arguments.length);
console.log('// ------------------------------');
}
showValue3(); // value3=20, value4=30, value3 20, value4 30, arguments.length 0
console.log('// 1 ------------------------------');
showValue3(200);
console.log('// 2 ------------------------------');
showValue3(200, 300);
console.log('// 3 ------------------------------');Syntax & Example:
JavaScript 6_1_es6_ts_parameters_default_value.js
"use strict";
// export {};
//normal function call
/* let showValue1 = function (value1) {
console.log(value1);
}
showValue1(); //undefined - as no parameters passed
*/
// ------------------------------
var showValue2 = function (value2) {
if (value2 === void 0) { value2 = 20; }
console.log(value2);
console.log(arguments.length);
console.log('// ------------------------------');
};
showValue2(); // 20
showValue2(200); // 200
// ------------------------------
var showValue3 = function (value3, value4) {
if (value3 === void 0) { value3 = 20; }
if (value4 === void 0) { value4 = value3 + 10; }
console.log(value3);
console.log(value4);
console.log(value3, value4);
console.log(arguments.length);
console.log('// ------------------------------');
};
showValue3(); // value3=20, value4=30, value3 20, value4 30, arguments.length 0
console.log('// 1 ------------------------------');
showValue3(200);
console.log('// 2 ------------------------------');
showValue3(200, 300);
console.log('// 3 ------------------------------');
//# sourceMappingURL=6_1_es6_ts_parameters_default_value.js.map- rest parameter represents
indefinite number of argumentsas an array ...arrayName - is used to convert the individual item into an array- Rest parameters don’t restrict the number of values that you can pass to a function
- The values passed must all be of the same type (
multiple arguments of the same type) - A rest parameter is specified by prefixing a named parameter with
rest operator (...) i.e. three dots - Rest operator is used as function Parameter/argument
Syntax & Example:
Typescript 6_2_es6_ts_parameters_rest_operator.ts
// export {};
// es5 normal function
let displayColors = function () {
for (let i in arguments) {
console.log('arguments color list:', arguments[i]);
}
}
displayColors('cyan');
console.log('------------------------------');
displayColors('cyan', 'magenta');
console.log('------------------------------');
displayColors('cyan', 'magenta', 'yellow');
console.log('------------------------------');
console.log('// ------------------------------');
// es6 rest operator
let showColors = function (...colorsList) {
console.log('colorsList rest operator:', colorsList);
console.log('arguments.length:', arguments.length);
for (let i in colorsList) {
console.log('colorsList rest operator array loop:', colorsList[i]);
}
console.log('// ');
}
showColors('red');
showColors('red', 'green');
showColors('red', 'green', 'blue');Syntax & Example:
JavaScript 6_2_es6_ts_parameters_rest_operator.js
"use strict";
// export {};
// es5 normal function
var displayColors = function () {
for (var i_1 in arguments) {
console.log('arguments color list:', arguments[i_1]);
}
};
displayColors('cyan');
console.log('------------------------------');
displayColors('cyan', 'magenta');
console.log('------------------------------');
displayColors('cyan', 'magenta', 'yellow');
console.log('------------------------------');
console.log('// ------------------------------');
// es6 rest operator
var showColors = function () {
var colorsList = [];
for (var _i = 0; _i < arguments.length; _i++) {
colorsList[_i] = arguments[_i];
}
console.log('colorsList rest operator:', colorsList);
console.log('arguments.length:', arguments.length);
for (var i_2 in colorsList) {
console.log('colorsList rest operator array loop:', colorsList[i_2]);
}
console.log('// ');
};
showColors('red');
showColors('red', 'green');
showColors('red', 'green', 'blue');
//# sourceMappingURL=6_2_es6_ts_parameters_rest_operator.js.map- Spread Operator is opposite to Rest Operator
- 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
- ...arrayName - takes an array and
split/convert an array into individual item/string - Rest operator is used to
combine, Spread operator is tosplit - Spread Operator is used while function called
Syntax & Example:
Typescript 6_3_es6_ts_spread_operator.ts
// export {};
let colorsList = ['red', 'green', 'blue', 'black'];
let showColors = function (...colors) {
console.log('spread operator:', colors);
console.log('arguments.length', arguments.length);
for (let color in colors) {
console.log('colorsList:', colors[color]);
}
}
showColors(...colorsList);
console.log('Elements in the colors List:', ...colorsList);Syntax & Example:
JavaScript 6_3_es6_ts_spread_operator.js
"use strict";
// export {};
var colorsList = ['red', 'green', 'blue', 'black'];
var showColors = function () {
var colors = [];
for (var _i = 0; _i < arguments.length; _i++) {
colors[_i] = arguments[_i];
}
console.log('spread operator:', colors);
console.log('arguments.length', arguments.length);
for (var color in colors) {
console.log('colorsList:', colors[color]);
}
};
showColors.apply(void 0, colorsList);
console.log.apply(console, ['Elements in the colors List'].concat(colorsList));
//# sourceMappingURL=6_3_es6_ts_spread_operator.js.map- When property names are similar/equivalent to variable name than ES6 provide shorthand notation for object literals
Syntax & Example:
Typescript 7_1_es6_ts_object_property_shorthand.ts
// export {};
//old plain javascript approach
let firstName = 'angular';
let lastName = 'typescript';
let Technology = {
//new property : variable
firstName: firstName,
lastName: lastName
}
console.log(Technology.firstName);
console.log(Technology.lastName);
console.log('// ------------------------------');
// ------------------------------
//ES6 approach - When property names are similar/equivalent to variable name than ES6 provides a shorthand notation for object literals
let version1 = 7;
let version2 = 3;
let newTechnology = {
firstName,
lastName,
version1,
version2
}
console.log(newTechnology.firstName);
console.log(newTechnology.lastName);
console.log(newTechnology.version1);
console.log(newTechnology.version2);
console.log('// ------------------------------');Syntax & Example:
JavaScript 7_1_es6_ts_object_property_shorthand.js
"use strict";
// export {};
//old plain javascript approach
var firstName = 'angular';
var lastName = 'typescript';
var Technology = {
//new property : variable
firstName: firstName,
lastName: lastName
};
console.log(Technology.firstName);
console.log(Technology.lastName);
console.log('// ------------------------------');
// ------------------------------
//ES6 approach - When property names are similar/equivalent to variable name than ES6 provide shorthand notation for object literals
var version1 = 7;
var version2 = 3;
var newTechnology = {
firstName: firstName,
lastName: lastName,
version1: version1,
version2: version2
};
console.log(newTechnology.firstName);
console.log(newTechnology.lastName);
console.log(newTechnology.version1);
console.log(newTechnology.version2);
console.log('// ------------------------------');
//# sourceMappingURL=7_1_es6_ts_object_property_shorthand.js.map- In ES6 we can use property names with space like
'first name': dinanath, - While referring/logging the property instead of
.DOTnotation usesquare brackets ['first name']
Syntax & Example:
Typescript .ts
//In ES6 we can use property names with space like 'first name'
let lastName = 'last name';
let Employee = {
'first name': 'Dinanath',
[lastName]:'Jayaswal'
}
console.log(Employee['first name']);
console.log(Employee['last name']);
console.log(Employee);Syntax & Example:
JavaScript .js
"use strict";
//In ES6 we can use property names with space like 'first name'
var Employee = {
'first name': 'Dinanath',
};
console.log(Employee['first name']);
//# sourceMappingURL=7_2_es6_ts_object_property_name.js.map- ES6 new feature
Strings Templateoffers a convenient way to work with string concatenation/interpolation - Template literals provide an easy and clean way to create multi-line strings and perform string interpolation
- Intuitive expression interpolation for single-line and multi-line strings
- Use
back-tick (grave accent)character and{ var name in curly brace }, no + plus sign required - The best part of Template Literals (Template Strings) is we can
use 'single' "double" quotes inside
Syntax & Example:
Typescript 8_1_es6_ts_template_strings_literals_interpolation.ts
// export {};
//old plain javascript approach
let user = 'Dinanath';
let greetMessage1 = 'Welcome' + ' ' + user + ' ' + 'to ES6.';
console.log(greetMessage1);
console.log('// ------------------------------');
//ES6 Template Literals (Template Strings) approach
let greetMessage2 = `Welcome ${user} to ES6.`;
console.log(greetMessage2);
console.log('// ------------------------------');
// ------------------------------
//ES6 multi-line string
let greetMessage3 = `ES6 Template Literals (Template Strings):
With Template Literals (Template Strings)
we can add multiple lines in string concatenation/interpolation
`;
console.log(greetMessage3);Syntax & Example:
JavaScript 8_1_es6_ts_template_strings_literals_interpolation.js
"use strict";
// export {};
//old plain javascript approach
var user = 'Dinanath';
var greetMessage1 = 'Welcome' + ' ' + user + ' ' + 'to ES6.';
console.log(greetMessage1);
console.log('// ------------------------------');
//ES6 Template Literals (Template Strings) approach
var greetMessage2 = "Welcome " + user + " to ES6.";
console.log(greetMessage2);
console.log('// ------------------------------');
// ------------------------------
//ES6 multi-line string
var greetMessage3 = "ES6 Template Literals (Template Strings):\n With Template Literals (Template Strings)\n we can add mutiple lines in string concatenation/interpolation\n";
console.log(greetMessage3);
//# sourceMappingURL=8_1_es6_ts_template_strings_literals_interpolation.js.map- Destructuring Assignment gives us an easy way to extract data from arrays and objects and assign them to variables
- An expression/ES6 shorter syntax that makes it easy to extract values from arrays, or properties from objects, into distinct variables
Syntax & Example:
Typescript 9_1_es6_ts_destructuring_array.ts
// export {};
//old plain javascript approach
let arrEmployee = ['Dinanath', 'Jayaswal', 'Male', 35, true];
console.log(arrEmployee[0]);
console.log(arrEmployee[1]);
console.log('// ------------------------------');
//ES6 Destructuring approach
//assign a meaningful name to each positions value
let [first, second, third, fourth, fifth] = arrEmployee;
let [firstName, lastName, gender, age, isSenior] = arrEmployee;
console.log(first);
console.log(second);
console.log(gender);
console.log(age);
console.log('// ------------------------------');
let [fn, ln, , , senior] = arrEmployee
console.log(fn);
console.log(senior);
// ------------------------------Syntax & Example:
JavaScript 9_1_es6_ts_destructuring_array.js
"use strict";
// export {};
//old plain javascript approach
var arrEmployee = ['Dinanath', 'Jayaswal', 'Male', 35, true];
console.log(arrEmployee[0]);
console.log(arrEmployee[1]);
console.log('// ------------------------------');
//ES6 Destructuring approach
//assign a meaningful name to each positions value
var first = arrEmployee[0], second = arrEmployee[1], third = arrEmployee[2], fourth = arrEmployee[3], fifth = arrEmployee[4];
var firstName = arrEmployee[0], lastName = arrEmployee[1], gender = arrEmployee[2], age = arrEmployee[3], isSenior = arrEmployee[4];
console.log(first);
console.log(second);
console.log(gender);
console.log(age);
console.log('// ------------------------------');
var fn = arrEmployee[0], ln = arrEmployee[1], senior = arrEmployee[4];
console.log(fn);
console.log(senior);
// ------------------------------
//# sourceMappingURL=9_1_es6_ts_destructuring_array.js.mapSyntax & Example:
Typescript 9_2_es6_ts_destructuring_object.ts
// export {};
//old plain javascript approach
let objEmployee = {
firstName: 'Dinanath',
lastName: 'Jayaswal',
gender: 'Male',
age: 35,
isSenior: true
}
console.log(objEmployee.firstName);
console.log(objEmployee.lastName);
console.log('// ------------------------------');
//ES6 Destructuring approach
//assign a meaningful name to each property
let { firstName, lastName, gender, age, isSenior } = objEmployee;
console.log(firstName);
console.log(lastName);
console.log(gender);
console.log(age);
console.log(isSenior);
console.log('// ------------------------------');
// ------------------------------Syntax & Example:
JavaScript 9_2_es6_ts_destructuring_object.js
"use strict";
// export {};
//old plain javascript approach
var objEmployee = {
firstName: 'Dinanath',
lastName: 'Jayaswal',
gender: 'Male',
age: 35,
isSenior: true
};
console.log(objEmployee.firstName);
console.log(objEmployee.lastName);
console.log('// ------------------------------');
//ES6 Destructuring approach
//assign a meaningful name to each property
var firstName = objEmployee.firstName, lastName = objEmployee.lastName, gender = objEmployee.gender, age = objEmployee.age, isSenior = objEmployee.isSenior;
console.log(firstName);
console.log(lastName);
console.log(gender);
console.log(age);
console.log(isSenior);
console.log('// ------------------------------');
// ------------------------------
//# sourceMappingURL=9_2_es6_ts_destructuring_object.js.mapfor...ofstatement it is kind of for loop but used to loop over Iterables like array,string- When for of loop is used with string words, it will split individual letters
Syntax & Example:
Typescript .ts
// export {};
// for...of loop
/*for(element of array/string) {
// Code to be executed
} */
// Iterating over an array
let arrDays = ["Monday", "TuesDay", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
for (let day of arrDays) {
console.log(day);
document.write('<li>' + day + '</li>');
}
console.log('// ------------------------------');
// Iterating over string
let name = 'JavaScript';
for (let letter of name) {
document.write(letter + ',');
console.log(letter + ',');
}
console.log('// ------------------------------');
// ------------------------------Syntax & Example:
JavaScript .js
"use strict";
// export {};
// for...of loop
/*for(element of array/string) {
// Code to be executed
} */
// Iterating over an array
var arrDays = ["Monday", "TuesDay", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
for (var _i = 0, arrDays_1 = arrDays; _i < arrDays_1.length; _i++) {
var day = arrDays_1[_i];
console.log(day);
document.write('<li>' + day + '</li>');
}
console.log('// ------------------------------');
// Iterating over string
var name = 'JavaScript';
for (var _a = 0, name_1 = name; _a < name_1.length; _a++) {
var letter = name_1[_a];
document.write(letter + ',');
console.log(letter + ',');
}
console.log('// ------------------------------');
// ------------------------------
//# sourceMappingURL=10_1_es6_ts_loop_for_of.js.map- 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.
- In Object Oriented Programming OOPS languages classes have been used for a long time to encourage reusability
- ES6 classes are a
syntactical sugar over the prototype-basedObject Oriented pattern - Classes are the
blueprint for the creation of an object - Classes are
special function but do not hoisted
Syntax & Example:
Typescript 11_1_es6_ts_class.ts
// export {};
// class can not be hoisted
// let person2 = new Person(); // error - Uncaught TypeError: Person is not a constructor
// console.log('// ------------------------------');
class Person {
// method
greetings() {
console.log('inside Person greetings methods');
}
}
let person1 = new Person();
console.log('typeof Person:', typeof Person);
console.log(person1.greetings());
// adding a method to a class is same like adding method to protorype object
console.log(person1.greetings === Person.prototype.greetings)
console.log('// ------------------------------');Syntax & Example:
JavaScript 11_1_es6_ts_class.js
"use strict";
// export {};
// class can not be hoisted
// let person2 = new Person(); // error - Uncaught TypeError: Person is not a constructor
// console.log('// ------------------------------');
var Person = /** @class */ (function () {
function Person() {
}
// method
Person.prototype.greetings = function () {
console.log('inside Person greetings methods');
};
return Person;
}());
var person1 = new Person();
console.log('typeof Person:', typeof Person);
console.log(person1.greetings());
// adding a method to a class is same like adding method to protorype object
console.log(person1.greetings === Person.prototype.greetings);
console.log('// ------------------------------');
//# sourceMappingURL=11_1_es6_ts_class.js.map- Class body is the main part with in
{ curly braces } - Will learn and cover 3 types of methods:
- Constructor method:
- Constructor method is
used to create and initialize objects - In one class there will be
only one constructor method - Constructor method is heart/initialization point of class
called during object creation - Constructor method is first method to run/invoke/initialize
as soon as class instantiate - Example -
constructor() { }
- Constructor method is
- Static method:
statickeyword is used to create static methods- Can be called without instantiating the class (
called directly with the help of class name) - Example -
static statiMethodName(); PersonClass.statiMethodName()
- Prototype method:
- Can be
called with the help of new object name - Example -
person1.methodName()
- Can be
- Constructor method:
Syntax & Example:
Typescript 11_2_es6_ts_class_body_methods.ts
// export {};
// class can not be hoisted
// let person2 = new Person(); // error - Uncaught TypeError: Person is not a constructor
// console.log('// ------------------------------');
class Person {
// constructor method
constructor(_name) {
this.name = _name;
console.log('constructor Person Name:', this.name);
}
// static method
static showGreetings() {
console.log('static method showGreetings() - Hello');
}
// prototype method
showMessage() {
console.log('prototype method showMessage() - Hello');
}
}
// new class object
let Person1 = new Person('Dinanath');
// invoke static method
Person.showGreetings();
// invoke prototype method
Person1.showMessage();
console.log('// ------------------------------');Syntax & Example:
JavaScript 11_2_es6_ts_class_body_methods.js
"use strict";
// export {};
// class can not be hoisted
// let person2 = new Person(); // error - Uncaught TypeError: Person is not a constructor
// console.log('// ------------------------------');
var Person = /** @class */ (function () {
// constructor method
function Person(_name) {
this.name = _name;
console.log('constructor Person Name:', this.name);
}
// static method
Person.showGreetings = function () {
console.log('static method showGreetings() - Hello');
};
// prototype method
Person.prototype.showMessage = function () {
console.log('prototype method showMessage() - Hello');
};
return Person;
}());
// new class object
var Person1 = new Person('Dinanath');
// invoke static method
Person.showGreetings();
// invoke prototype method
Person1.showMessage();
console.log('// ------------------------------');
//# sourceMappingURL=11_2_es6_ts_class_body_methods.js.map- one class can
inherit or extends from another parent or super classand use its properties and methods - ES6 classes make it easier to create objects, implement inheritance by using the
extendskeyword and reuse the code - Classes that inherit from other classes are referred to as
derived classes or child classes super()keyword refer to the parent or super class constructor which is extendedextendskeyword denotes inheritance mechanism
Syntax & Example:
Typescript 11_3_es6_ts_class_inheritance.ts
// export {};
class Car {
// simple constructor method
/* constructor() {
console.log('Car constructor');
} */
// parameterized constructor method
constructor(_name) {
console.log('Car constructor', _name);
}
// prototype method
getModelNumber() {
return 101;
}
}
// console.log('// ------------------------------');
class TataCars extends Car {
constructor(_name1) {
super(_name1);
console.log('TataCars constructor', _name1);
}
// prototype method - If same method present in child than it overwrite/override parent method
/* getModelNumber() {
return 1001;
} */
// to call same method from parent use super keyword
getModelNumber() {
return super.getModelNumber();
}
}
// simple constructor method
// let Nexon = new TataCars();
// parameterized constructor method
let Nexon = new TataCars('Tata Nexon');
// prototype method
console.log('Nexon.getModelNumber:', Nexon.getModelNumber());Syntax & Example:
JavaScript 11_3_es6_ts_class_inheritance.js
"use strict";
// export {};
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var Car = /** @class */ (function () {
// simple constructor method
/* constructor() {
console.log('Car constructor');
} */
// parameterized constructor method
function Car(_name) {
console.log('Car constructor', _name);
}
// prototype method
Car.prototype.getModelNumber = function () {
return 101;
};
return Car;
}());
// console.log('// ------------------------------');
var TataCars = /** @class */ (function (_super) {
__extends(TataCars, _super);
function TataCars(_name1) {
var _this = _super.call(this, _name1) || this;
console.log('TataCars constructor', _name1);
return _this;
}
// prototype method - If same method present in child than it overwrite/override parent method
/* getModelNumber() {
return 1001;
} */
// to call same method from parent use super keyword
TataCars.prototype.getModelNumber = function () {
return _super.prototype.getModelNumber.call(this);
};
return TataCars;
}(Car));
// simple constructor method
// let Nexon = new TataCars();
// parameterized constructor method
var Nexon = new TataCars('Tata Nexon');
// prototype method
console.log('Nexon.getModelNumber:', Nexon.getModelNumber());
//# sourceMappingURL=11_3_es6_ts_class_inheritance.js.mapModule divide section of code/program(Like in the Book we have different Chapters and Sections, in Store we have different Sections of Items, etc)- Code/Programm - needs separation of concern
- The module helps developers to easily organize, navigate/find different chunks of code
- We can
Export and Import functions/classes from different Modules - There are mainly two types of export:
- Named Export
- Default Export
- ES6 introduces file based module, in which each module is represented by a separate .js file
- We can use the
export or import statementin a module toexport or import variables, functions, classes or any other entityto/from other modules or files - We Exports/Exporting variables and functions so that it can be used in/by other modules
Exportkeyword makes variables/functions/classes ready to be used in other modulesImportkeyword makes variables/functions/classes ready to be used/access in current modulesImportstatement is hoisted ie moved to the top of declaration- Imported variables are
read-only, not changedbutobject properties can be changed
Let's create a module i.e. a TypeScript/JavaScript file named
script.tsand place the following code in it:
Syntax & Example:
Typescript script.ts
// export {};
// define variables/functions to export
let fName = 'Dinanath';
const DOBY = 1980;
function getAge(_curYear) {
console.log(_curYear - DOBY);
}
// Exporting variables and functions so that it can be used in other modules
// Export keyword makes variables/functions/classes ready to be used in other modules
// export let fName;
export { fName, DOBY, getAge };
// console.log('// ------------------------------');Syntax & Example:
JavaScript script.js
"use strict";
// export {};
Object.defineProperty(exports, "__esModule", { value: true });
// define variables/functions to export
var fName = 'Dinanath';
exports.fName = fName;
var DOBY = 1980;
exports.DOBY = DOBY;
function getAge(_curYear) {
console.log(_curYear - DOBY);
}
exports.getAge = getAge;
// console.log('// ------------------------------');
//# sourceMappingURL=12_1_es6_ts_module_script.js.mapNow create another TypeScript/JavaScript file named
app.tswhich can import named variables/functions/classes frommain.ts/main.js:
Syntax & Example:
Typescript app.ts
// export {};
// Import keyword makes variables/functions/classes ready to be used/access in current modules
import { fName, DOBY, getAge } from './12_1_es6_ts_module_script';
console.log(fName);
alert(getAge(2019));
// console.log('// ------------------------------');Syntax & Example:
JavaScript app.js
"use strict";
// export {};
Object.defineProperty(exports, "__esModule", { value: true });
// Import keyword makes variables/functions/classes ready to be used/access in current modules
var _12_1_es6_ts_module_script_1 = require("./12_1_es6_ts_module_script");
console.log(_12_1_es6_ts_module_script_1.fName);
alert(_12_1_es6_ts_module_script_1.getAge(2019));
// console.log('// ------------------------------');
//# sourceMappingURL=12_1_es6_ts_module_app.js.mapFinally create a HTML file
index.htmland includeapp.jsfile, notice the script tag withtype="module"attribute
Syntax & Example:
index.html
<script src="./scripts/12_modules/12_1_es6_ts_module_app.js"></script>
OR
<script src="./scripts/12_modules/12_1_es6_ts_module_app.js" type="module"></script> - Whenever a Module exports a single value or function, we can use
defaultkeyword - In the case of
Default Export-Importwhile export/importcurly bracenot required - Also while dealing with
Default Export-Importvariable name match not mandatory in case of import
Syntax & Example:
Typescript 12_2_es6_ts_module_default_export_script.ts
// export {};
let fName = 'Dinanath';
export default fName;Syntax & Example:
JavaScript 12_2_es6_ts_module_default_export_script.js
"use strict";
// export {};
Object.defineProperty(exports, "__esModule", { value: true });
var fName = 'Dinanath';
exports.default = fName;
//# sourceMappingURL=12_2_es6_ts_module_default_export_script.js.mapSyntax & Example:
Typescript 12_2_es6_ts_module_default_import_app.ts
// export {};
import firstName from './12_2_es6_ts_module_default_export_script';
console.log(firstName);Syntax & Example:
JavaScript 12_2_es6_ts_module_default_import_app.js
"use strict";
// export {};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var _12_2_es6_ts_module_default_export_script_1 = __importDefault(require("./12_2_es6_ts_module_default_export_script"));
console.log(_12_2_es6_ts_module_default_export_script_1.default);
//# sourceMappingURL=12_2_es6_ts_module_default_import_app.js.map- 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 - Generators are a new type of function that allows us to
pause functions in the middle of execution, to be resumed later - Generator function can be identified/indicated by
an asterisk symbolright before the function name or immediately following the function keyword (function*) - Generator Function can be paused by using the new
yieldkeyword - To call/invoke/execute Generator Function call
next()method - A generator is a function that returns an iterator
- All iterator objects have a
next()method that returns a result object - The result object has two properties:
value, which is the next value, anddone, which is a boolean, initially false and later true when there are no more values to return withnext()or no moreyields
- We need to use babel core polyfill
browser-polyfill.jsto use/execute generators function - generators are also used with
asynchronous external events or timers/intervals
Syntax & Example:
Typescript 13_1_es6_ts_function_generators.ts
// export {};
function *playCricket() {
yield 'Set Field';
console.log('1. yield Set Field');
yield 'Bowl';
console.log('2. yield Bowl');
yield 'Bat';
console.log('3. yield Bat');
}
// create a reference to the generator function
let cricket = playCricket();
console.log(cricket.next());
console.log(cricket.next());
console.log(cricket.next());
console.log(cricket.next()); // done - true;Syntax & Example:
JavaScript 13_1_es6_ts_function_generators.js
"use strict";
// export {};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
function playCricket() {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, 'Set Field'];
case 1:
_a.sent();
console.log('1. yield Set Field');
return [4 /*yield*/, 'Bowl'];
case 2:
_a.sent();
console.log('2. yield Bowl');
return [4 /*yield*/, 'Bat'];
case 3:
_a.sent();
console.log('3. yield Bat');
return [2 /*return*/];
}
});
}
// create a reference to generator function
var cricket = playCricket();
console.log(cricket.next());
console.log(cricket.next());
console.log(cricket.next());
console.log(cricket.next()); // done - true;
//# sourceMappingURL=13_1_es6_ts_function_generators.js.map- JavaScript only had one type of collection, represented by the
Arraytype - Due to the lack of other collection options, technique led to custom implementations of sets and maps using non-array objects
- A Set is a list of values but no duplicates set consists of unique values
- 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
Syntax & Example:
Typescript 14_1_es5_ts_sets.ts
// export {};
let currentSet = Object.create(null);
currentSet.name = true; //1, 0
// checking for existence
if (currentSet.name) {
// do something
console.log('name property exists');
}Syntax & Example:
JavaScript 14_1_es5_ts_sets.js
"use strict";
// export {};
var currentSet = Object.create(null);
currentSet.name = true; //1, 0
// checking for existence
if (currentSet.name) {
// do something
console.log('name property exists');
}
//# sourceMappingURL=14_1_es6_ts_sets.js.map- ES 6 adds a Set type that is an ordered list of values without duplicates
- Sets allow fast access to the data they contain, adding a more efficient manner of tracking discrete values
- Following are important methods/properties used with Sets:
new Set()- Sets are created usingnew Set()andadd()- Items are added to a set by calling theadd()method,size- To see how many items are in a set by checking thesizeproperty,has()- To check existence of value usehas()methoddelete- To delete value from set usedeletemethod
Syntax & Example:
Typescript 14_2_es6_ts_sets.ts
// export {};
// create new set
let currentSet2 = new Set();
// add items in set
currentSet2.add("Item One");
currentSet2.add(2);
currentSet2.add("2");
// check size / / number of items in the set
console.log('currentSet2.size:',currentSet2.size);
// duplicates will ignored not allowed - so size will not change
/* currentSet2.add(2);
currentSet2.add("2");
console.log('currentSet2.size',currentSet2.size); */
console.log('// ------------------------------');
// object property based set with chaining method
let objectBasedSet = new Set(), objKey1 = {}, objKey2 = {};
objectBasedSet.add(objKey1).add(objKey2);
console.log('objectBasedSet.size:',objectBasedSet.size);
console.log('// ------------------------------');
// set with duplicates
let techSet = new Set(['JS', 'jQuery', 'Angular', 'Node', 'React', 'JS', 'jQuery']);
console.log('techSet.size:',techSet.size);
// `has` method is used to check existence.availability of value
console.log('Angular present in set:', techSet.has('Angular'));
// delete
techSet.delete('JS');
console.log('delete techSet.size:',techSet.size);
console.log('// ------------------------------');Syntax & Example:
JavaScript 14_2_es6_ts_sets.js
"use strict";
// export {};
// create new set
var currentSet2 = new Set();
// add items in set
currentSet2.add("Item One");
currentSet2.add(2);
currentSet2.add("2");
// check size / / number of items in the set
console.log('currentSet2.size:', currentSet2.size);
// duplicates will ignored not allowed - so size will not change
/* currentSet2.add(2);
currentSet2.add("2");
console.log('currentSet2.size',currentSet2.size); */
console.log('// ------------------------------');
// object property based set with chaining method
var objectBasedSet = new Set(), objKey1 = {}, objKey2 = {};
objectBasedSet.add(objKey1).add(objKey2);
console.log('objectBasedSet.size:', objectBasedSet.size);
console.log('// ------------------------------');
// set with duplicates
var techSet = new Set(['JS', 'jQuery', 'Angular', 'Node', 'React', 'JS', 'jQuery']);
console.log('techSet.size:', techSet.size);
// `has` method is used to check existence.availability of value
console.log('Angular present in set:', techSet.has('Angular'));
// delete
techSet.delete('JS');
console.log('delete techSet.size:', techSet.size);
console.log('// ------------------------------');
//# sourceMappingURL=14_2_es6_ts_sets.js.map- The
Settype we learned last.earlier could alternately be called astrong set, because of the way it stores object references - WeakSets
stores only object referencesnot primitive values also the object references are weak
Syntax & Example:
Typescript 14_3_es5_ts_weaksets.ts
// export {};
let dummySet = new Set(), idKey = {};
dummySet.add(idKey);
console.log(dummySet.size); // 1
console.log('// ------------------------------');
// eliminate original reference
idKey = null;
console.log(dummySet.size); // 1
// get the original reference back
idKey = [...dummySet][0];
console.log('// ------------------------------');Syntax & Example:
JavaScript 14_3_es5_ts_weaksets.js
"use strict";
// export {};
var dummySet = new Set(), idKey = {};
dummySet.add(idKey);
console.log(dummySet.size); // 1
console.log('// ------------------------------');
// eliminate original reference
idKey = null;
console.log(dummySet.size); // 1
// get the original reference back
idKey = dummySet.slice()[0];
console.log('// ------------------------------');
//# sourceMappingURL=14_3_es5_ts_weaksets.js.map- On the fundamentals of Garbage Collection and to avoid memory leaks
weakSetsare introduces - The main advantage of WeakSets over Sets is
memory is handled properly - Weak sets
do not have a sizeproperty
Syntax & Example:
Typescript 14_4_es6_ts_weaksets.ts
// export {};
let peopleSet = new WeakSet(), nameKey = {};
// add the object to the peopleSet
peopleSet.add(nameKey);
console.log(peopleSet.has(nameKey)); // true
console.log('// ------------------------------');
nameKey = null;
console.log(peopleSet.has(nameKey)); // false
console.log('// ------------------------------');
peopleSet.delete(nameKey);
console.log(peopleSet.has(nameKey)); // falseSyntax & Example:
JavaScript 14_4_es6_ts_weaksets.js
"use strict";
// export {};
var peopleSet = new WeakSet(), nameKey = {};
// add the object to the peopleSet
peopleSet.add(nameKey);
console.log(peopleSet.has(nameKey)); // true
console.log('// ------------------------------');
nameKey = null;
console.log(peopleSet.has(nameKey)); // false
console.log('// ------------------------------');
peopleSet.delete(nameKey);
console.log(peopleSet.has(nameKey)); // false
//# sourceMappingURL=14_4_es6_ts_weaksets.js.map- A map is nothing more than a collection of key-value pair
- A map is a collection of keys that correspond to specific values
- Each item in a map stores two pieces of data, and values are retrieved by specifying the key to read from
- Maps are frequently used as caches, for storing data to be quickly retrieved later
- The only real difference between an object used as a set and an object used as a map is the value being stored
- In array we access individual element, in Sets we check some value is present/exists or not, in Maps we actually retrieve the value
Syntax & Example:
Typescript 15_1_es5_ts_maps.ts
// exports{}
let currentMap = Object.create(null);
currentMap.name = "Dinanath";
// retrieving a value
let nameValue = currentMap.name;
console.log(nameValue);Syntax & Example:
JavaScript 15_1_es5_ts_maps.js
"use strict";
// exports{}
var currentMap = Object.create(null);
currentMap.name = "Dinanath";
// retrieving a value
var nameValue = currentMap.name;
console.log(nameValue);
//# sourceMappingURL=15_1_es5_ts_maps.js.map- The ES6 Map type is an
ordered list of key-value pairs, where both the key and the value can have any type - Following are important methods/properties used with Maps:
new Map()- Maps are created usingnew Map()andset()- Items are added to a map by calling theset()method,get()- Items are retrieved by calling theset()method,size- To see/know how many key, value pairs are present in a maphas()- To check existence of value usehas()method / to determine given key exists in the mapdelete- To delete key, value from set usedeletemethodclear()- To removes all keys and values pairs from the map
Syntax & Example:
Typescript 15_2_es6_ts_maps.ts
// exports{}
let bookMap = new Map();
bookMap.set('bookTitle', 'Learn ES6');
bookMap.set('bookYear', 2018);
console.log(bookMap.get('bookTitle'));
console.log(bookMap.get('bookYear'));
console.log('bookMap.size:', bookMap.size);
console.log('// ------------------------------');
// console.log('// ------------------------------');
console.log(bookMap.has('bookTitle'));
bookMap.delete('bookYear');
console.log('bookMap.size:', bookMap.size);
bookMap.clear();
console.log(bookMap.has('bookTitle'));
console.log('bookMap.size:', bookMap.size);
console.log('// ------------------------------');
// console.log('// ------------------------------');
let personDetailsMap = new Map(), nameKey = {}, ageKey = {};
personDetailsMap.set(nameKey, 'Dinanath');
personDetailsMap.set(ageKey, 35);
console.log(personDetailsMap.get(nameKey));
console.log(personDetailsMap.get(ageKey));
console.log('personDetailsMap.size:',personDetailsMap.size);
console.log('// ------------------------------');
// console.log('// ------------------------------');Syntax & Example:
JavaScript 15_2_es6_ts_maps.js
"use strict";
// exports{}
var bookMap = new Map();
bookMap.set('bookTitle', 'Learn ES6');
bookMap.set('bookYear', 2018);
console.log(bookMap.get('bookTitle'));
console.log(bookMap.get('bookYear'));
console.log('bookMap.size:', bookMap.size);
console.log('// ------------------------------');
// console.log('// ------------------------------');
console.log(bookMap.has('bookTitle'));
bookMap.delete('bookYear');
console.log('bookMap.size:', bookMap.size);
bookMap.clear();
console.log(bookMap.has('bookTitle'));
console.log('bookMap.size:', bookMap.size);
console.log('// ------------------------------');
// console.log('// ------------------------------');
var personDetailsMap = new Map(), nameKey = {}, ageKey = {};
personDetailsMap.set(nameKey, 'Dinanath');
personDetailsMap.set(ageKey, 35);
console.log(personDetailsMap.get(nameKey));
console.log(personDetailsMap.get(ageKey));
console.log('personDetailsMap.size:', personDetailsMap.size);
console.log('// ------------------------------');
// console.log('// ------------------------------');
//# sourceMappingURL=15_2_es6_ts_maps.js.map- By using arrays we can set/add key, value pairs to maps during initialization
entries()method is used to retrieve both keys, value pairs at a time
Syntax & Example: Type code in ScratchJS
Typescript 15_3_es6_ts_iterating_over_maps.ts
let placeMap = new Map([
['country','Bharat'],
['capital','Delhi']
]);
// Iterating only keys with for...of loop
for (let key of placeMap.keys()){
console.log('key:',key);
}
console.log('// ------------------------------');
// console.log('// ------------------------------');
// Iterating only values with for...of loop
for (let value of placeMap.values()){
console.log('value:',value);
}
console.log('// ------------------------------');
// console.log('// ------------------------------');
// Iterating over key, value both at a time
for (let entry of placeMap.entries()) {
console.log(`keys: ${entry[0]} <==> values: ${entry[1]}`);
}
console.log('// ------------------------------');
// console.log('// ------------------------------');
// Iterating over key, value both at a time with destructuring
for (let [key,value] of placeMap.entries()) {
console.log(`keys: ${key} <==> values: ${value}`);
} Syntax & Example:
JavaScript 15_3_es6_ts_iterating_over_maps.js
'use strict';
var _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 && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _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"); } }; }();
var placeMap = new Map([['country', 'Bharat'], ['capital', 'Delhi']]);
// Iterating only keys with for...of loop
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = placeMap.keys()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var key = _step.value;
console.log('key:', key);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
console.log('// ------------------------------');
// console.log('// ------------------------------');
// Iterating only values with for...of loop
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = placeMap.values()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var value = _step2.value;
console.log('value:', value);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
console.log('// ------------------------------');
// console.log('// ------------------------------');
// Iterating over key, value both at a time
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = placeMap.entries()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var entry = _step3.value;
console.log('keys: ' + entry[0] + ' <==> values: ' + entry[1]);
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
console.log('// ------------------------------');
// console.log('// ------------------------------');
// Iterating over key, value both at a time with destructuring
var _iteratorNormalCompletion4 = true;
var _didIteratorError4 = false;
var _iteratorError4 = undefined;
try {
for (var _iterator4 = placeMap.entries()[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
var _step4$value = _slicedToArray(_step4.value, 2);
var _key = _step4$value[0];
var _value = _step4$value[1];
console.log('keys: ' + _key + ' <==> values: ' + _value);
}
} catch (err) {
_didIteratorError4 = true;
_iteratorError4 = err;
} finally {
try {
if (!_iteratorNormalCompletion4 && _iterator4.return) {
_iterator4.return();
}
} finally {
if (_didIteratorError4) {
throw _iteratorError4;
}
}
}- Weak maps are the way to store weak object references, every key must be an object
Syntax & Example: Type code in ScratchJS
Typescript 15_4_es6_ts_weakmaps.ts
let placeMap = new WeakMap()
let objKeys = {};
placeMap.set(objKeys, 'Bharat');
console.log(placeMap.get(objKeys));
objKeys = null;
console.log(placeMap.get(objKeys));Syntax & Example:
JavaScript 15_4_es6_ts_weakmaps.js
'use strict';
var placeMap = new WeakMap();
var objKeys = {};
placeMap.set(objKeys, 'Bharat');
console.log(placeMap.get(objKeys));
objKeys = null;
console.log(placeMap.get(objKeys));Symbolis anew primitive data type introduced in ES6/ES2015to generateunique idsbut we never get access to such ids- Because symbols are primitive values, calling
new Symbol()throws an error
Syntax & Example:
Typescript 16_1_es6_ts_symbol.ts
// exports{}
// let firstSymbol = symbol();
let firstSymbol = Symbol('First Symbol');
console.log('typeof firstSymbol:',typeof firstSymbol);
console.log('firstSymbol.toString:',firstSymbol.toString())
console.log('// ------------------------------');
// console.log('// ------------------------------');
// symbol always create a unique ids
// let symbol1 = Symbol();
// let symbol2 = Symbol();
// console.log(symbol1 === symbol2);
let symbol1 = Symbol('i am symbol1');
let symbol2 = Symbol('i am symbol2');
console.log(symbol1 === symbol2);
console.log('// ------------------------------');
// console.log('// ------------------------------');Syntax & Example:
JavaScript 16_1_es6_ts_symbol.js
"use strict";
// exports{}
// let firstSymbol = symbol();
var firstSymbol = Symbol('First Symbol');
console.log('typeof firstSymbol:', typeof firstSymbol);
console.log('firstSymbol.toString:', firstSymbol.toString());
console.log('// ------------------------------');
// console.log('// ------------------------------');
// symbol always create a unique ids
// let symbol1 = Symbol();
// let symbol2 = Symbol();
// console.log(symbol1 === symbol2);
var symbol1 = Symbol('i am symbol1');
var symbol2 = Symbol('i am symbol2');
console.log(symbol1 === symbol2);
console.log('// ------------------------------');
// console.log('// ------------------------------');
//# sourceMappingURL=16_1_es6_ts_symbol.js.mapSymbols Registryhelps to store symbol so that we can use/share it in/with other filesSymbol.for()method is used store symbol in the global symbol registry/library- once two or more symbols added/stored in symbol registry than they become identical/non-unique
- The
Symbol.for()method first searches the global symbol registry to seeif a symbol with the key "uid" exists Symbol.keyFor()methods retrieve description/key/uid of symbol registry
Syntax & Example:
Typescript 16_2_es6_ts_symbol_registry.ts
// exports{}
let oneSymbol = Symbol.for('SymbolRegistry');
let twoSymbol = Symbol.for('SymbolRegistry');
console.log(oneSymbol === twoSymbol); // true - as uid/keys passed 'SymbolRegistry' is same for both
console.log('key/uid:', Symbol.keyFor(oneSymbol));
console.log('key/uid:', Symbol.keyFor(twoSymbol));
console.log('// ------------------------------');
// console.log('// ------------------------------');
let id = Symbol('uid');
let Employee = {
[id]: 101,
}
console.log(Object.getOwnPropertyNames(Employee));
console.log(Object.getOwnPropertySymbols(Employee)); // Symbol('uid')Syntax & Example:
JavaScript 16_2_es6_ts_symbol_registry.js
"use strict";
// exports{}
var _a;
var oneSymbol = Symbol.for('SymbolRegistry');
var twoSymbol = Symbol.for('SymbolRegistry');
console.log(oneSymbol === twoSymbol); // true - as uid/keys passed 'SymbolRegistry' is same for both
console.log('key/uid:', Symbol.keyFor(oneSymbol));
console.log('key/uid:', Symbol.keyFor(twoSymbol));
console.log('// ------------------------------');
// console.log('// ------------------------------');
var id = Symbol('uid');
var Employee = (_a = {},
_a[id] = 101,
_a);
console.log(Object.getOwnPropertyNames(Employee));
console.log(Object.getOwnPropertySymbols(Employee)); // Symbol('uid')
//# sourceMappingURL=16_2_es6_ts_symbol_registry.js.map- ECMAScript 6 has predefined symbols called
well-known symbolsthat represent common behaviors in JavaScript that were previously considered internal-only operations, - There are many
built-in symbolorwell-known symbolsin ES6, Each well-known symbol is represented by a property on the Symbol object, such asSymbol.create,Symbol.match,Symbol.replace,Symbol.search,Symbol.iteratorand so on Symbol.iteratoris one of the built-in symbols, to run ES6 loops likefor...of, the object must consist ofSymbol.iteratormethodString & ArrayhaveSymbol.iteratormethod,Number & Objectdoes not haveSymbol.iterator
Syntax & Example:
Typescript 16_3_es6_ts_symbol_iterator.ts
// exports{}
let string1 = 'Dinanath';
let array1 = ['Dinanath', 29]
let num1 = 29;
let object1 = {name: 'Dinanath'};
// check Symbol.iterator` method exist on which primitive data type
console.log('string Symbol.iterator:', typeof string1[Symbol.iterator]);
console.log('array Symbol.iterator:', typeof array1[Symbol.iterator]);
console.log('num Symbol.iterator:', typeof num1[Symbol.iterator]);
console.log('object Symbol.iterator:', typeof object1[Symbol.iterator]);Syntax & Example:
JavaScript 16_3_es6_ts_symbol_iterator.js
"use strict";
// exports{}
var string1 = 'Dinanath';
var array1 = ['Dinanath', 29];
var num1 = 29;
var object1 = { name: 'Dinanath' };
// check Symbol.iterator` method exist on which primitive data type
console.log('string Symbol.iterator:', typeof string1[Symbol.iterator]);
console.log('array Symbol.iterator:', typeof array1[Symbol.iterator]);
console.log('num Symbol.iterator:', typeof num1[Symbol.iterator]);
console.log('object Symbol.iterator:', typeof object1[Symbol.iterator]);
//# sourceMappingURL=16_3_es6_ts_symbol_iterator.js.map- ES6 introduced
iteration- a new way to traverse data makes working with collections of data easier Iteratorsare just objects with a specific interface designed for iteration- All iterator objects have a
next() method that returns a result object - The result object has two properties:
value, which is the next value, anddone, which is a boolean that’s true when there are no more values to return - 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
Iterable- any object that implements a methodSymbol.iterator(), which returnsIterator`Iterator- any object that implements anext()method, to access elements in collection which returnsIResultObjIResultObj- Contains two propertiesvalue(the next value) anddone(indicates iteration completed or not)for...ofloop uses Iterator functionality/mechanism withnext()method to loop through an object
Syntax & Example:
Typescript 17_1_es6_ts_iterator.ts
// exports{}
let iterableArray = ['One', 'Two', 'Three', 'Four', 'Five']
function createCustomIterator(_arr) {
let curCount = 0;
return {
next: function () {
return curCount < iterableArray.length ? { value: iterableArray[curCount++], done: false } : { value: 'iteration completed', done: true };
}
}
}
let customIterator1 = createCustomIterator(iterableArray);
console.log(customIterator1.next());
console.log(customIterator1.next());
console.log(customIterator1.next());
console.log(customIterator1.next());
console.log(customIterator1.next());
console.log(customIterator1.next());
console.log(customIterator1.next());
console.log('// ------------------------------');
// console.log('// ------------------------------');Syntax & Example:
JavaScript 17_1_es6_ts_iterator.js
"use strict";
// exports{}
var iterableArray = ['One', 'Two', 'Three', 'Four', 'Five'];
function createCustomIterator(_arr) {
var curCount = 0;
return {
next: function () {
return curCount < iterableArray.length ? { value: iterableArray[curCount++], done: false } : { value: 'iteration completed', done: true };
}
};
}
var customIterator1 = createCustomIterator(iterableArray);
console.log(customIterator1.next());
console.log(customIterator1.next());
console.log(customIterator1.next());
console.log(customIterator1.next());
console.log(customIterator1.next());
console.log(customIterator1.next());
console.log(customIterator1.next());
console.log('// ------------------------------');
// console.log('// ------------------------------');
//# sourceMappingURL=17_1_es6_ts_iterator.js.map- JavaScript
objects are not iterable for...ofloop doesn't work on objects directly
Syntax & Example: Type code in ScratchJS
Typescript 17_2_es6_ts_iterating_objects.ts
// exports{}
let HumanObj = {
name: 'Dinanath',
age: 35,
country: 'India'
}
// for...of loop error - Symbol.iterator is not a function
/* for (let info of HumanObj) {
console.log(info);
} */
HumanObj[Symbol.iterator] = function () {
let objProperties = Object.keys(HumanObj);
let curCount = 0;
let isDone = false;
let next = () => {
if (curCount >= objProperties.length) {
isDone = true;
}
return { done: isDone, value: this[objProperties[curCount++]] }
}
return { next };
}
// for...of loop with object
for (let info of HumanObj) {
console.log(info);
}
console.log('// ------------------------------');
// console.log('// ------------------------------');Syntax & Example: Type code in ScratchJS
JavaScript 17_2_es6_ts_iterating_objects.js
'use strict';
// exports{}
var HumanObj = {
name: 'Dinanath',
age: 35,
country: 'India'
};
// for...of loop error - Symbol.iterator is not a function
/* for (let info of HumanObj) {
console.log(info);
} */
HumanObj[Symbol.iterator] = function () {
var _this = this;
var objProperties = Object.keys(HumanObj);
var curCount = 0;
var isDone = false;
var next = function next() {
if (curCount >= objProperties.length) {
isDone = true;
}
return { done: isDone, value: _this[objProperties[curCount++]] };
};
return { next: next };
};
// for...of loop with object
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = HumanObj[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var info = _step.value;
console.log(info);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
console.log('// ------------------------------');
// console.log('// ------------------------------');repeatis the new ES6 function/method returns new string number of times as passed in the parameterString.prototype.repeat(times);
Syntax & Example:
Typescript .ts
let strText = 'Dinanath';
console.log(strText.repeat(3));String.prototype.startsWith(searchString[, position]);
Syntax & Example:
Typescript .ts
let strText = 'Dinanath';
console.log(strText.startsWith("D")); // true
console.log(strText.startsWith("i",1)); // trueString.prototype.endsWith(searchString[, position]);
Syntax & Example:
Typescript .ts
let strText = 'Dinanath';
console.log(strText.endsWith("h")); // true
console.log(strText.endsWith("Dina",4)); // trueString.prototype.includes(searchString[, position]);
Syntax & Example:
Typescript .ts
let strText = 'Dinanath';
console.log(strText.includes("t")); // true- http://es6-features.org
- https://www.ecma-international.org/ecma-262/6.0/
- https://babeljs.io/docs/en/learn
- https://www.w3schools.com/js/js_es6.asp
This is superb! Thank you for joining me for JavaScript ES6-ECMAScript 6-ECMAScript 2015 Features for everyone. I hope you will start checking/testing and incorporating these features into your code right away. I hope now you have a solid understanding of ES6 new features. Your next step could be looking into ES7 standards/features which is very new and not purely tested, or look into TypeScript Tutorials.