JavaScript ES6 For Beginners | Bharath Thippireddy | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

29 Lessons (1h 18m)
    • 1. ES 6 INTRODUCTION

      3:01
    • 2. LET

      5:40
    • 3. Const

      2:15
    • 4. More about const

      3:29
    • 5. Template Strings

      1:55
    • 6. Variable Substitution

      1:06
    • 7. Introduction

      2:04
    • 8. First Arrow Function

      2:29
    • 9. Passing Parameters

      1:38
    • 10. OBJECT DESTRUCTURING

      4:37
    • 11. Array Destructuring

      1:56
    • 12. Function Destructuring

      2:52
    • 13. The for-of loop

      2:01
    • 14. Map and its functions

      5:09
    • 15. Looping through Map Entries

      4:26
    • 16. Set

      4:03
    • 17. INTRODUCTION

      0:50
    • 18. Create a Class

      3:50
    • 19. INHERITANCE

      3:26
    • 20. Inheritance Hands On

      5:22
    • 21. Accessing Functions

      1:16
    • 22. Overriding

      1:03
    • 23. Introduction

      1:21
    • 24. FIRST PROMISE

      3:48
    • 25. Handling the response

      2:13
    • 26. Handling Errors

      2:15
    • 27. Returning values

      1:26
    • 28. Catching Errors

      1:10
    • 29. MODULES

      1:47
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

53

Students

--

Projects

About This Class

If you are JavaScript developer who wants to learn ES6 then this course is for you.This course is not for beginners . You should have used JavaScript before you take this course or completed my free JavaScript fundamentals course.This course will help you learn the prerequisites for other JS frameworks like ReactJS,Node JS,Angular JS easily.


What Will I Learn?

Master the super cool features ES6 has to offer

What are the requirements?

Text Editor,Web Browser(Chrome, Firefox, IE etc)

Use new scopes like block level scopes

Use let and const prefixes to define variables

Define long and lengthy Template Strings and use variable substitution

Learn and Use De-Structuring on objects,arrays and function parameters

Use for-of for looping

Use Data Structures Maps and Sets

Create classes which are blue prints for user defined objects

Implement code reuse through inheritance

Understand and use JavaScript modules

Meet Your Teacher

Teacher Profile Image

Bharath Thippireddy

You are the creator of your destiny

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. ES 6 INTRODUCTION: Yes, stands for easy amass script. These IAM, a script body, defines the standard for JavaScript language as a scripting language. An Ear six is a version that brings in several cool features into JavaScript. In the next few sections and lectures, you're going to explore all these features, starting with Scopes. Year six brings in a new scope called block level School before Year six. The earlier versions of JavaScript like years, Five years for hard only global and function school. But finally, we can use block scope using the Let Perfect when we define over variables. We can also use CONST to define constant variables, which should never be changed. Template strings are a super cool way to define long and lengthy strings in our application and by losing templates strings. We can also do variable substitution using the dollar syntax. The structuring can be applied to objects, arrays and even function parameters. It is a super cool and easy way to assign object properties are array values two variables . Yes, six also brings in a new four group called Far Off, which has several advantages over for each and for in it will also mastered that and there are data structures like map and sip. Map is used to store key value. Pairs set can store any number off values before here. Six. The only way we could store key and value pairs was through objects. But now we have map, and these data structures have several inbuilt matters that we can use classes. If you are a Java programmer or a python developer, then you know how painful it waas to create objects in JavaScript. How to simulate classes using their prototype pattern that JavaScript follows on inheritance was another thing. So everything in object oriented programming was difficult to implement in JavaScript. But now, finally, in yet six we how classes, which we can use to define a structure or a blueprint for our objects. It will explore that it will implement inheritance using those classes, which is a key concept in object oriented programming. And last but not the least, we have more dual support in JavaScript now, starting year six, that is, we can export out functions in one more deal, and then we can use that module by importing them in other scripts in our application. Not all the Web browsers. How the complete support for Year six. Yet chrome is the best Broza when it comes to supporting Year six and even in chrome, Sometimes that's Intacs off some off. The features that you are going to explore might be slightly different, but it's very close, and they're very good at implementing year six. 2. LET: up to the years. Five. Standard off JavaScript. There are only two scoops that is the global scope Onda function scope within which we were defining over variables starting here. Six. We have a block level scope, just like other programming languages like java dot net. The keyword let can be used to define block Scoppetta variables. Let's see the difference between using wear and let and how it saves us big time. Go to your text editor, create a new file. HTML is the root element inside HTML. We're going to use a body and within body defined a script block. Say of this, I'm going to save it under my documents. New folder E s six and the name offered is let dot html let dot history. Emma is the file name within which defined a function. Call it. Let demo and use where I is equal to 10. Let's see how our works first use a for loop. I is equal to zero. Our eyes equal to zero i e is less than or equal to 20. I plus plus do a console dot log off i console dot Log off I outside the four loop so here we're defining two variables, one right inside the function but outside the four loop. So this has a scope off the function, and here we're defining ever. I again inside the for loop in other programming languages. You would expect that this eye is only visible from here starting the four function body, and it ends here. Let's see if that's true by looking at the result involved dysfunction. Let demo right after the function body, Go to your folder Year six, where every house saved it. Let's make sure I'm saving it under the right for last save as he s six. Let demo or HTML. Now, if I go back, open that in the browser, go to the council. You can go to the council from view developer Java Council. Or you can use the shortcut command art I on every Mac and command shift I on your windows . But what is important here is the output. It starts from zero goes all the way to 20 as expected from the four loop. But here you would expect that the value off I would be 10. But as you can see, it is 21. So that's how the of our keyword defines a variable if you use where that means it is available for the entire scope. In this case, that's copious function and not just this far scope. That is the reason you are seeing 21 because it uses I Here we are really finding the value off a 20 Although it is assigned to 10 here at the end of this for Luke, I use 20. And at the end of the follow it is 21 because that is when the for loop stops. So I e is being used as 21. The value of 21 is being used as a value off I which is not what we want. We want it to be 10. So if that is the expectation use let right here. If you use, let instead off are starting year six, then this. I is available only for this cope. And this eye here refers to a variable that we have defined up top here. So save it. Go back to the lab, Rosa refresh. Now you see what you expect. It works. The for loop displays all the values up to 20. But then the value off the global I remains 10 is very useful, especially if you're using multiple loops in programming languages like Java. It is a common practice, very use multiple loops like this. And every time you start a new loop, you define that variable again, which will be only for that scope. So if you use let, it will be available only in that scope. If you try to access something which is defined within that scope outside after scope, it won't work. For example, within this for loop I'm defining let X is equal to 10 now if I try to access X outside off this for look console dot log X, save it back to the lab Rosa hit Enter and it stays on court reference. Error X is not defined. That is not the case. If you define it as far fuse, Var X is equal to 10. Go back refresh. You still get the value off X because whatever is defined as we're it is automatically heister to the function scope or the global scope. But that's not the case with let Let always belongs to that school within which it is defined, and it is not available outside off that scope. So let brings in block school 3. Const: when we defined variables using VAR or let their values can be changed or reassigned at any point in time. But if you want to define some variables with, values should not change. Then in Year six, we have a constant Cheever that we can use. So if we define a variable using constant, it cannot be changed. It becomes immutable. Go ahead, go to your text a later, copy the previous script. Create a new file based it. Clean up the script block on Let's tray out of our PI is equal to 3.14 by is equal to three point 79 So I'm defining Pie has 3.14 but some developer has decided to change it to 3.79 Then our application core will not. Book has expected. When we use the value off pie, save it as Const Dark html Open this in Aurora. Broza, go to the council. Let's go back to see what the problem is. Console Of course concerned Lord Log. Save it. Come back to the lab. Rosa Refresh. You see the value 3.79 No surprises there. You can always change it. No, change this to let go back. Refresh no issues there, so we still have the problem. Some developer is still changing the value off it without any problems. Now let's use Const save its evil and s t is the new key were introduced in year six. Back to the Web. Rosa the fresh and you see an error on caught pipe assignment to do constant variable. If you click on that, it will show you on which line we have. The problem by is equal to 3.79 So once we define a variable using the Const perfects or the Keeper, it cannot be reassigned or change it so in your application. If you want certain values never to be changed, then use Const instead. Off there are let 4. More about const: in this lecture will learn a couple more things about Const. The first thing is that Const just like let defines a variable at the block level on. The second important thing is, if you define object variable CONST. Product, for example, is equal to use the object. Literal syntax. Close it right there. Now, if you try to assign, product is equal to another object literal object you would expect. We'll see an editor if you go to the Web. Rosa. Let's fix the previous error. That's not the change. Not change the value off by command. That part out. Come back. Refresh. If you go to the console, you still have an error. But this time it's on our new objects. So once you define object, you cannot assign that variable a new object. But there is a problem here. We can still change the value on the right hand side. That is, if the object itself changes. For example, I'm going to add a property product. Off name is equality within double courts. IPhone. Close the double courts. Save it. Do a console dart. Log off Harnick. Save it. Go back to the Web. Rosa Refresh, Go to the console. We don't have any problems, no errors. We can see the object with its property, so that's a problem. So be aware that if you define an object using the CONST, that means that variable cannot be reassigned to a different object. But you can still change the object itself. So from my advanced JavaScript course lectures, he would have seen that you can use object dot freeze if you want to stop that from happening. So when we define this object here, you can say object dot Freeze within brackets past that Object to it Now, if you try to change that object, we should get a better the fresh. You see that there is no object. You can no longer assign a property to it, but it does not show any better because the strict more is not enable. So if you want to use the strict morning, you're a broza at the top off your script. Within the script, block used space strict and a semi colon, so you space strict with Telebras, or that it should use the strict more. If you're a fresh now, we will see a error it say's cannot add property. Object is not extendable. So how learned a lot of things in this lecture learned that Const Just like let is a block scope declaration it defines available within the bloc scope. Second, when you're dealing with objects and use CONST against objects, the object variable itself cannot be reassigned, but we can still add properties to it. So if you don't want that to happen, use javascript object or freeze on object. Darfuris will fail silently, as you have seen earlier on once you use strict more, then it will see the error on the console. 5. Template Strings: in this lecture will learn about template strings, which help us define long strings in our application that can spawn across lines. I got your text reader grabbed the previous script. Create a new script based it clean up the script block within, which define Let Corp is equal to within double courts. You are the in years five or before Year six will have to do plus and then go on to the next line. Creator off bless within double courts. You are destiny. So if you want to spirit ever string across lines, these are we have to do it. We have to use a plus operator than the courts at the beginning and the end off eat string . And if you have, if you want to. How each of these in on a new line in how to use the backward slash n the new line character Year six makes our life a lot easier. We need not do all this. We can simply use the back pick operator, which is below your escape key on the keyboard just before the digit one. So use the tactic. Define you Are the enter creator off you? Uh, next line Destiny and close the black pick operator semi colon console dart log off court. Save the file as template strings door. HTML. Open the template string in the web. Rosa, go to the console and you see the output beautifully formatted. Each off those strings went on a new line automatically, so that's the template string or the back pick operator for you. 6. Variable Substitution: in this lecture will learn how to do variable substitution When you are using the back pick operator, that is when you're doing stink templates or templates strings you can use variable substitution. Go back to the previous script that you how creator here at the end off it after the destiny, I want to include a name. So I define that placeholder using dollar within flower brackets Name. So this can be now dynamically replaced. Far Name or LEP, It's up to us. Let name is equality within single courts. John, this could go into double courts as well. Save it. Go back to the lab, Rosa the fresh. And you see that the placeholder are the string substitution works. And it replaces this with whatever variable we have defined here. To change this to Bob. Now that will change to Bob the sin taxes, dollar our brackets. And this works when you're using the back pick operator 7. Introduction: in this section will master what arrow functions are and how to use them. Adul functions are a super easy syntax to create anonymous functions. They are like lambda expressions in other programming languages, like Java, to create an arrow function. It's very simple. You start with brackets, and within that you mention all the parameters that needs to be passed to that arrow function, followed by a fat arrow symbol that is is equal to sign and a greater than symbol, followed by the body off the arrow function. As you can see here, there are no flower brackets, and there is no return statement here. By default automatically, this value will be returned back from the arrow function, so it's that simple to create arrow function with very little syntax. We can then assign that arrow function were variable, and in walk it are you can pass this arrow function as a callback function toe. Other functions. That's where it's used a lot. If you want to add the written statement, you can do that explicitly by using the flower brackets, and also, if you want to have multiple lines off court, you can use the flower brackets and place all that court inside ever out of function to add a functions super easy and sharp cut to create anonymous functions that can then be pass it to other functions are they can be. It walked by assigning toe variable. They start with brackets optionally. You can define the parameters inside the brackets. Those parameters can be used inside the arrow function, and if you want to explicitly at a written statement, you are welcome to do that. But by default, whatever you are doing calculating inside, they were at a function that will be returned automatically. And if you how multiple lines off court, you can wrap it in flour brackets. In the next few lectures, you will learn how to use arrow functions by seeing them in action. 8. First Arrow Function: in this lecture will create your first arrow function that will display a hollow message to the end user. To do that, grab the previous scripts. Create a new file Arrow function starts with brackets open and close brackets, followed by the fat arrow symbol is equal to symbol or sign on a greater than symbol, followed by whatever court should go in. If it's a single line, we contract. We use console dot log the 10 double ports. Hello, Save this. Create a folder under here six called Arrow Functions and call this hello dot html. Now we'll have to invoke this arrow function. Typically, we pass arrow functions dynamically has callback functions to other functions. But if you want to assign a narrow function to a variable, you can do that here. Let X is equal to that, and now we can in walk the arrow function using X X points to the new arrow function and to in work it Use X open and close brackets. Save it. Go to you a fuller. Wherever we have saved it, Open up the hallowed art. HTML. Go to the council and it will see Hello. So it's that simple to create arrow functions, they are shortcut to create anonymous functions. Now here, if you want to return this hello instead of using the council dot log or if you have multiple lines off court, then you should use the flower brackets just like any other functions. And then we can return this hello back. So offer the fat arrow. The body off the arrow function should go into flour brackets, followed by the return statement. Save it now. We'll have to do a console dot log on, then the invocation off X so that what our values returned back will be displayed on the Web. Rosa, go back to the Broza the fresh You still see the same or put so in this luxury have learned how to create out of function that's intact. Starts with brackets followed by the fat arrow symbol is equal to sign, and the greater than symbol. Followed by brackets are flower brackets within which you can define the body off your out of function, and you can assign it to a variable and in walk it. Or you can pass this out of function dynamically to another function as a callback. 9. Passing Parameters: in this lecture, we learn how to pass parameters Toe arrow function. To do that, grab the previous script, create a new file, and we're going to create a couple off arrow functions here. The first arrow function will add the given to numbers on the 2nd 1 will multiply or subtract them. Photo pass parameters is where we can define our perimeters. A comma be or numb, one comma numb to, and we can use them and return the result back. Return Numb one is equal to or normal place number two. Copy this based it. And here you can do the subtraction or division or whatever you want. Let's do the division, and we can call these functions with appropriate names. You can give whatever variable name you want. I'm calling this ad because it's adding the two parameters on this one is deal or division in walk. Add past two numbers to come out. Three. Copy that concerned or clock based. It in work are call do and passing 10 and five. Save it as para meters dot html. Insider Arrow functions folder save Go open it in the lab. Rosa, See that output five and two which is expected but the key. Here you have learned that passing parameters to arrow functions is very simple. It's just like how you pass parameters to regular functions within brackets. You define the arguments, and you can then use them in your function. 10. OBJECT DESTRUCTURING: de structuring use as a easy to use in tax to assign object and a property values to individual variables. That's the object de structuring inaction. Rodeo Extra later grabbed the previous script. Create a new one to see object restructuring in action we need to create an object. Let Student is an object is equal to use the object literal syntax, cynical in the end, and the first property is first name Colon John Last name Colon Bailey Score up. The student is the last property 90. Or they extract each of the properties on this, object the values off each of these properties and assigned them to variables. Before Year six will have to do Const first name or if name is equal to the object dot first name and same for the rest of the two properties and name and finally score. So student art, last name and student dart score and I say this to score will have to do it in three different lines, using the very same syntax in each line. Thanks to year six, our job is a large simple. Now use the de structuring since impacts you can use const where let whatever you want, followed by flower brackets within which we specify the property. We want toe extract colon, the variable to which it should be assigned to f name comma. Last name is the object property That should be extractor colon. It should be assigned to a very will call a lame comma. The last one is core. Colon s is equal. Do the object from which they should be extracted. So this is the object de structuring syntax wherein were performing what we have done in three lines before year six in one single line. So the object from which the property should be extracted goes on the right hand side on the left hand side, use the floor bracket syntax within the floor rackets You do the properties that should be extracted and the variables into which those property should go into separated by colon. You can get it off the older syntax. Here we were consoled art log F name copy that pasted couple off times. Second property is Ellen and the last one is score, which we are extracting to a variable called s. Save it by creating a new folder under year six. Call it be structuring the structuring object d'art hasty Emmel or with a folder called Restructuring Open Up the Object or Tasty Melinda Web. Rosa, Go to the console and they will see all the three properties. So it's that simple to use the object restructuring syntax and extract all the properties into variables in a single shot. Here, we can use whatever name you want. It need not be f name Alan. You can even use first name, last name and the score as well. So we can use the same names for the variables as the object properties. Save it, use them here, last name and finally the score. Save it. If you go back to the web, Rosa refresh output will still remain the same. But this is the shortcut anyways, yes, explorers as a shortcut. If you want to extract the properties into variables with the same name as the properties, you need not even use this. Simply get rid off everything on the right hand side of the colon and the colon. Also on automatically, thes properties will be extracted into variables with the same names as the properties back to the lab. Rosa, refresh it still works. So in this lecture have learned how to do object de structuring, wherein you can extract the values off object properties into individual variables by using the syntax off the property name, followed by an optional variable name. If you want to use a different variable name, otherwise you can simply get it off the variable name past but 11. Array Destructuring: Now that you have seen object restructuring in action, every restructuring is even simpler. Grab the script. Creating a new file Define const courses is the area is equal to within square brackets within single courts defined the area off courses. Angular coming out soon comma react that is also coming out soon. Comma Nord 33 off my popular courses that will be helped soon. Once we define that now toe, assign the values off each off these two unusual variables. We could simply use the object restructuring syntax const, followed by square bracket, this time for object de structuring. It was angler brackets for already. Structuring risk wire brackets within which you can use the variable names to what you want to assign these values, too. X comma. Why or course one comma course two comma course. Three. On automatically. These values will be assigned to the appropriate variable. If you use is equal to the array. Name is equal to courses. Unsold art log will give you course. One to end. Three. Copy that pasted a couple of times. Course to course. Three. Save it under de structuring as a raise or a resort resort. HTML. Open area Start history Molinaro Broza, look at the console and you see all the three courses listed. So that's in tax. Here is simply const where or let followed by square brackets provide all the variable leans in the square rackets on on the right hand side ever array should be given. 12. Function Destructuring: the last space or place where we can apply. The structuring is when we pass dynamic perimeters to a function as objects. A copy of the script Create a new file cleanup, defined a function called ad that can pick any number of parameters and add them up. Console door log this where we're going to display the result. And when we invoked dysfunction, we can use object literal, kind off its syntax and passing dynamic properties to this parameters. Here num one Colin. Then come on. Number two, colon 20 comma number three, colon 30. And to access these, we can use options. Door number one comma options thought options start number one plus options door number two plus options. Heart numb three. So this is one way to pass dynamic parameters. We can get it off number three if you don't want to at any point, save it as functions door teach similar function parameters dark hitched to Yemen. Open up the function perimeter start html. Go to the console and out pretty 60 which is not surprising. So this function receives these three parameters and adds them up. But this syntax here is very long. This where be structuring comes in instead off options. Here you can use angular brackets, and within those angler brackets we can rougher toe these properties. Num one, comma them to comma number three on. Then we need not use options at all. We can directly use numb one plus, but I am too, plus some three. Save it back to the verb Rosa. Refreshed output still remains the same, but this time it hard and function parameter the structuring and another advantage. You can't even define default values here. So if I don't pass numb one as a perimeter value, then you can use 10 here as a default value. Save it. Go back to the lab. Rosa Refresh. The output still remains the same If you change it, Duke 20. Save it. Come back refreshed now the or pretties 70. So use to use the function perimeter de structuring. Simply use the Inglis in tax but the angler bracket syntax, followed by the names off your variables, which you are using when you invoke the function and you can even define default values for those parameters. Using that is equal toe operator 13. The for-of loop: you are already aware off the classic for loop the for each loop, which can be used to look through the elements off an area and in walk a function which can process those elements. The far in loop, which can be used with objects to look through all right, rate through the properties of an object. Year six brings as far off loop, which will overcome the limitations off these loops. Here, the forage and foreign within these two lives we cannot use continue break return statements, etcetera. But with four off, you can do all that. And it's super simple way off, looping through a elements. Go to your text reader, create a new file and define and Harry let our const off names is equal to within square brackets. The first name is John. The second name. Ease Bob on the third name is ready. Look through this using the foreign Luke far. Let value off names so each value in the names will be assigned to the names here, and you can do a council dot log off value. Save it outside the six Marika. You can save it here for off dot html. Go back to year six. Open up the four off dot html or to the council on the output is all the three names. But the syntax here is far off. You can use break you can use, continue etcetera and you can even return from within the four off loop. So use the far off loop whenever you are looping through a raise. Alright, rating through arrest is the best way off doing it. 14. Map and its functions: Before Year six, the only way we could store name on values or key and value pairs was by using JavaScript objects. But starting here six, we have a data structure called map that can be used to store key value pairs. Let's see that in action. They have the previous script. Create a new file to create a map we use. Let a variable name is equal to new on the map object. Once we create instance off map, we can assign keys and values into that map. Using the set matter past the key, which is mats Comma. The score is 90. You can copy that line and paste it a couple off times. Second is physics. Third is chemistry and change the values to 95 80 were consoled art log scores to access the values off the map. Score start. Get past the key, and they will get the value back. Copy that line basted a couple off times. Second is physics. On Third is chemistry. Save it by creating a folder called Maps and Sets Under Your Year six and call this map start 50 Emmel. Open the map. Start html in your Web Rosa under map start sets pushed this under map start maps and sets for Let me close this. Re open it from here. Go back to the Ford Open Maps or tasty Molinaro. Broza. Go to the council and you see the output from the maps. So all these values are being deterred from the map. Map also provides as various useful functions unsold art log scores dot size will give us the size up the map. That is, the total number of properties in the map. The size is three you can also use. Has to check if a particular key is present in the map scores. Door has within double courts. I want to check if Matt's present that will return a Boolean value, which is true if their property or keys present. Let's try English. Refresh. It returns a boolean false because English is not present in the map to change it back to mats. You can also delete an element in a map. Scores door. Delete past the key. Say it mats and you can check. Do the same. Check after the deletion, so copy this line and paste it after their deletion. Save it go back to the Web Rosa Refresh. So it initially say is true. Then, after the deletion, when we check if Matt is present in the scores, it's no longer president, so it returns false. Another method is map. Start clear so maps dot clear will clear all the elements in the map. Start clear now. If you do a console dart, log and score start size coffee, this land based it after clear come back at a fresh concerned art log. It's not map that scores heart, clear the fresh and the sizes. Zero. So map is a data structure that allows us to stall key and value pairs. Set is a matter that should be invoked toe. Assign a key toe map and you can use Get to Fitch. The value off a particle property size to fit the total size off the map has to check if a property is present. Delete to delete a property clear to clear all the properties, and another shortcut to initialize values off a map right when it is created is to use square brackets on within the square. Brackets will use choir brackets again for each name and value pair so you can grab this maths and score and push it that comma Another square bracket. Copy the physics comma. The physics score based that comma square brackets again, chemistry and the chemistry core pushed that. Now we can get it off these three lines. Since we have initialized lemma right when it is created, save it. Go back to the lab, Rosa Refresh. Everything remains the same. So that syntax again his choir rackets within which each key value should go into square brackets separated by a comma. 15. Looping through Map Entries: in this lecture will learn how to use the far off syntax and looked through the keys values as well as the entries off a map. To do that, grab the country's off the file, create anyone based it, squall up, clean up everything else, except for the map. Declaration will use the scores map one more time, but this time with a for in loop or far off for let key off scores. Door keys is a function that will give all the keys available within this map. Within the body of the for loop were console dart Log off Key, which will have each key unsold dot Log off. If you want to get the value Cannon works core Start kit past the key. Do it. Save it as looping maps dot html under maps and sits and open it in the Web. Rosa go to the council, and the output is the key and the value key and the value so the dark keys matter will return all the keys back. We are looping through that key using the far off syntax were grabbing the key, displaying it and then passing the key to the map dark get mattered and displaying that on the console as well. Next, we can also retrieve the values directly, so instead off retrieving the keys. If you just want the values in your application directly, you can invoke score start values. That's another function on the map, and this time get it off the key and this will become value. You can use any name here. You can simply use we if you want. Oh, and display the value. Go back to the browser's. Refresh the scroll all the way down. We see it as undefined. Comeback V off scores dot values and here we need not in walk score, start kept. We're already getting a value, so simply display the value. Go back, refresh and you see the values which are 90 9580 Last but not the least. You can also get the entries in a map. Copy that for look, based it again. Let in three off scores dot Increase this. Will you all the increase in a map that is both the key and value pairs as an airy so each entry is an area entry off. Zero will give you the key comma entry off. One will give you the value. Save it. Go back to the browser, Refresh. At the end of it, you see the key and the value key and the value and so on. Here you can apply the object de structuring syntax instead off. Axing it like this. Use Squire brackets. You can say K comma. We are key and value whatever we want the variable names to be. So now the values off each area that is returned from here will be automatically a saint. Okay. And we And here we can use key comma V. So we have used the object be structuring syntax or the rady structuring syntax. So that weekend dynamically assigned the area values two variables back to the browser. Refreshed output still remains the same. So in this lecture, ho started accessing all the keys in a map using the keys function. You have looked through the keys using their far off syntax, and you have access to the value in the loop. Using the map dark it you have then retreat just the values using score start values looked through them and display the values. And last but not the least, you also learned that you can access the entries off a map using increase, which will return an array for each entry array index off. Zero will give the key terrain X off. One will us the value and how use the de structuring syntax toe assigned those array values two variables. 16. Set: a set is a data structure used to store any number off values. Unlike a map where we have keys and values there, said stores. Just the values and I said only allows in equal is it will not allow duplicates or your text editor grab the previous script. Clean it up to create a set. Let courses is equal to new SEC is the data structure of the object we want to create and toe Allah value to the set courses. Thought I'd double courts. You can add whatever value you want. Angular. Copy that with this semi colon at the end, Nord and Java. Now, once we have a set, you can look through the Elements office set using for let and three off courses. Console art, log off entry, save it under maps and six a set door html open said dot html In Aurora Broza, go to the console and you can see all the courses listed similar to map courses also has several methods, such as size, so console dart log courses. Door size is a property on the course. Object on the set object that Vicky was size off the set. You can also use has the chick. If courses has a particular value passing the value angler, it will return a Boolean True if the value exists like this and it will return a false if the value does not exist React Save it, Go back, Refresh! This time it returns a false. Similarly, you can also use a clear function. So if you can walk clear right here courses dot clear that will clear up the entire set for you. Save it. You can use the courts to start size before the clear and after the clear Go back for a fresh. That is a syntactical problem course one off the places we are using courts instead off courses right here should be courses door clear, Fresh So three is the size before the court is cleared out and then it becomes zero and we don't have any more elements. So this will result in false anyways And here, since we do not have any elements, the for loop does not display any elements at all. A couple more things We can initialize this set in using a shortcut instead off using courses Start add. We can chain this right when we create a set we can How add method in walked And this ad matter is changeable so we can invoke, admitted or function on another ad method. So get it off this cynical and then and the last The end off it will have a semi colon new sit dot add angler dart Add Nord and Dart hard job that's once in tax. Save it. Go back to the Web Rosa Refresh output is still the same and another syntax within this brackets Here you can pass on a which will have all the values Angula comma within double courts Nord Comma Java This is another way off doing it. So either chain that matters or just passing and Eric, the fresh output is still the same. 17. INTRODUCTION: Before year six. JavaScript did not have the concept off classes, which bite on Jabba and many other object oriented programming languages do. And we, as JavaScript developers, used to struggle to understand and use the prototype pattern, which JavaScript uses. Thanks to Ear six, we finally have classes. Classes are nothing but a blueprint to create objects. Once we define a class using the class keyword, we can define all the properties, which can be data properties as well as function properties for a particular object. And once we have a class, we can create any number off objects off that class using the new operator. But all those objects will have the same properties and functions. 18. Create a Class: In this lecture, you will learn how to create a year six class. You're going to create a class court passenger that will act as a blueprint for the passenger objects. And it will help three properties first name, last name and a frequent flyer number. To do that, go to your sublime text or even text editor. Grab any off the previous scripts. Create a new file based it. Clean up the script block. Save it another year. Six. I'm going to create a folder called Class Us. An underclass is the file. Name should be passenger dot html within the script block to define a year six class use the class keyword followed by the class name. In this case, the class name is passenger. It's a convention that we use upper case later as the first later in the class name, followed by flower brackets. This is where the template for the object is defined within these floor brackets to assign properties use a constructor. Constructor is a function which is used to assign properties to the class as well as to initialize those properties. So construct Rezaei inbuilt keyword used to define our function in here first name is the property that needs to be passed in last name, comma, frequent flyer number and inside the constructor used this dot First name is equal to the first name that is being passed in here. This daughter last name is equal to the last name that is passed in. And finally this Dort frequent flier number is equal to the frequent flyer number. Save it to create an object off this class outside off the class use our A variable passenger is equal to or use let its preferred to use let as much as possible use where only when required passenger is equal to use the new operator followed by the last name which is passenger Here we are in walking the constructor whenever we use the new operator Underclass name internally the JavaScript in jail in will you invoke the constructor So passing the parameters for this particular object The 1st 1 is the first name I'm using my first name. You are welcome to use the worse last name is the period e Come on. The frequent flyer number 1234 console dot Log off passenger So display the passenger on to the council for two classes. Open up the passenger dot html or to the council on the output is the passenger object If we expand the first name, His Paret frequent flier number is 1234 Last name is Tippi ready? So we are able to create objects by using a class as a blueprint. And once we have a class, it acts as a template toe any number off objects. So you can copy these two lines here, Every help created object based them. Changed the name to passenger to first name is John. Second name is Bailey, and his frequent flyer number is 789 and print passenger to save it. Go back to the Web. Rosa Refresh. Now we have two passengers. The second passenger off course is John Bailey, and he has his own frequent flier number value. So this is how we define templates, our blueprints using a class, and then we can have any number off objects in our applications. 19. INHERITANCE: inheritance is the process off, defining a new object with help off an existing object In typescript, we use the keyword extends to inherit. Let's take a look at two important things in inheritance with the popular iPhone example. The current version off iPhone out there is iPhone X, and I'm pretty sure Apple will release the next tuition soon. So the new worsen off iPhone that were becoming need not create everything from scratch. They can use some features on functionality that is available in iPhone X. The two important things in this process off inheritance are accessing the existing functionality and defining their own functionality. So a chilled class can access the existing functionality from a parent plus. And if it wants, it can update the functionality as well. For example, the new iPhone can access the existing functionality like taking pictures, sending out emails and all that, And if it wants to update and existing functionality, it could be a better camera. In the newer version, improved performance off the entire iPhone itself, etcetera. That can be done. Two other terms we hear when we talk about inheritance are reusability and is a relationship. Let's take a look at those two by looking at a different example, BMW on RT. Or two car brands. And they both can extend from a parent called Khar. So the common features and functionality in these to cars. We'll sit in the parent class, and we're going to reuse it across these carbons. Similarly, Wall warned, Ben's our bus branch, and they both can use a lot off functionality and features from a parent class called Bus. No Car in bus can. How some common functionality and they both can inherit from vehicle. This way, we're putting all the reusable chord in the parent classes, and they can be inherited by the Children as required. That is why the term reusability is used, it inheritance. It is also referred to ask dry principle, do not repeat yourself. So instead of repeating the same court, same functionality across our classes and then when we create objects were going to put them in parent classes and then automatically that functionality will be available to the child classes. It is also important that you should not apply inheritance everywhere. You should be careful when are playing inheritance. In some cases, we might not need a particular functionality at all in the chilled glasses. If you push it into the parent classes, it will be available to the child classes, although the chilled glasses do not use it, so we should design it carefully and easy. Is yester term used to refer to this relationship between the car and BMW or between the vehicle and card. The relationship is he's a car is a vehicle. The bus is a vehicle, a BMW is a car already is a car, always a bus and bins is a bus You cannot say already is a bus, but you can say already easy car, So it's just a relationship. 20. Inheritance Hands On: in this lecture will implement inheritance while working on a BMW use case. You will create a class called BMW, which will help three properties make moral on ear off a car. Then this class will be inherited or extender by three Siris on day five cities. The three cities, in addition, will how a property called Cruise control enable the fi series will also have an additional property. Corn parking is this enable, but these two will get all these properties on the parent class for free and they can be reused. 40 or text editor, grab the previous script, create a new one and define a class called B m W with three properties on it so we can go to the constructor directly. Make si woo NST are you see? People are make comma mortal comma Here at the three properties this dot make is equal to make this door mortal is equal to mortal, and this dot here is equal to here. Save it. As in Harry pens start HTML under classes defined the second class class three cities. This is the child class. To extend a class or two inherited class, we use the extents keyword followed by the class we want to extend and within this defined the constructor again. The very first line in a chilled glass constructor should be super super is a key word which we used to invoke the parent classes constructor. So before we initialize the change class, we should initialize the parent class where we need the mortal or the make make comma mortal comma here and passing make comma mortal comma here and then additional property that the change last will have is the cruise control enabled. So define that property as well. Cruise control enabled. These property doesn't exist on BMW, but this is something the three cities comes with. So this dot cruise control and a build and a belt is equality. The perimeter that is being passed in these a Boolean property which can be set toe through , are false. In a similar fashion copy this class based it changed this to fi series on the constructor takes make mortal here on the last perimeter. He's parking assist. Enable parking assist enabled. Copy that property based it inside the constructor instead. Off cruise control enable. It's now parking assist enabled. So we have successfully created a class that was extended by two changed classes. Not to create instances off these you use let. Three. Siri's is equal to new three Siri's and to the constructor. We need to pass in the make, which is, of course, BMW. The mortal within double courts say 3 to 8, and the ear is 2018 and the last perimeter decides whether the cruise control is enable or not. So true is the permitted there. Copy that line based it. Create an instance of the five cities. Let me scroll it up On the right hand side. This will change to five cities. 535 Is the mortal make or make make his BMW immortalised 535 2018 is fine, and this can be true or false. Let's leave it as true. Once we create those objects, you can access the properties on them. Consoled Art Log. Three cities dark. Make copy that based it three times more than year, and the last one is cruise control. Enable copy that based it. Similarly, you can copy these four lines and do the same for five. Siri's copied. If I cities variable best, it replace the three cities with price. It is the last properties. The parking assist enable. Four Fi series based Open the Inheritance Start Hates to Yemen. Go to the Web browser council view. Develop a council. There we go. If you scroll up, you can see the make mortal and ear and also the flag, which is set to true. Same for the second cities. So it's that simple toe. Extend a class in Year six By using the extents, Cheever and the change glasses will get all the properties off the parent classes for free . 21. Accessing Functions: we can actions from the parent classes. For example, here in the BMW, let's had start and stop, which are responsible for starting and stopping the engine off the car. Consoled art log start engine. This functionality is common across the cities, so three cities also needs this. And if I cities also needs Thies too, so stop will say stop engine Now you can in walk these matters and use them on three cities as well as five cities three cities dot start three cities dot stop to the Broza, the fresh on right here. Once it displays the details of the three cities, it states start engine and stop engine. You can do the same on the five cities as well. Copy and paste those stupid change this to five cities dot start and faisaly Start, stop, refresh, And that will work as well. So it's that simple. You can also inherit the function properties, not just their data properties 22. Overriding: you can shadow are override the functions and properties defined in the parent class by defining the exact properties in the chilled class. For example, if the fi series offers remote start, you can all right the function in the parent class and use the function definition again. Console dot log remote Start now when you in work fi series dot start, it should display remote start for the Broza Refresh. You see remote start and stop engine so the FISA is still uses. The stop engine derived are extended from the parent plus, but the start engine is from the five series, where we have overdone The Matador shot over the matter in the parent class with the same exact method signature in the chilled class, nor the stop at the start. But the implementation is different. Instead, off start engine, it is remote. Start 23. Introduction: a promise in real life is like a placeholder for something that we're going to do for somebody in the future. It's the same in case off year six version off JavaScript as well. A promise is a placeholder for something in the future. So I promise helps us with a synchro nous programming. When we how multiple things happening in our application, we can execute each one off them synchronously at runtime. That is one line after the other, or if a particular line is taking a lot off time. For example, here, if the DB call is taking a lot off time instead, off waiting for it, we can a synchronously process it and we can execute the rest. Call in parallel while the DB call is finishing. Typically, we don't promises. Before Year six, we would pass a function a callback function. So this DB call, which is asynchronous function and the DB call is responsible for calling the callback function whenever it finishes. But starting year six version, we can use promises, promises, so the same functionality off callbacks. But with the nicer syntax and better error handling a promise returns the same function as a callback function. He will see promises in action in the next few lectures 24. FIRST PROMISE: in this lecture will create your very first promise to do that. Grab the previous script, create a new file based it clean up the script block. Let promise is equal to new promise. We create a new promise object. And while creating the object, this promise constructor takes a inner function as a perimeter on. Within that function, we define all the asynchronous scored so we can pass in that function as a shadow function Open and close brackets Fat arrow, Open up the body off the function. This is where all our asynchronous scored, will you? You can make database calls. You can make calls to third party rest. Ap ice. Whatever is in Cronus. Cory Oneto using our application Can Lou here and that will be executed a synchronously for you. So here we're going to simulate a synchronicity by using the set time out matter from JavaScript AP. I said time out bigs function as a first perimeter comma. The time out are the time that should pass before this function is in. Walked as the second perimeter this time is in Mili Seconds up. The first perimeter is a function. Call these where we're going to defend our asynchronous scored will use the arrow function again. Use the fat at all Open and close bracket Simple console dart Log off Working a sink. Chronis Lee working a synchronously so Oliver isn't gonna score can go here. This is a simple demo. So we're using set time or to simulate a synchronicity where it will wait for a second and then it will execute the following court. Typically, we use promises inside functions. So let's define a function called My sink function are fun Within functions we create and return promises back and at the end of the function returned the promise we have created. Save it under Year six. Create a folder called Put all Missus going to that folder and call this promise Dark history. Emmel here we have successfully implemented our court. But tell that JavaScript engine that we had done with our work we can do it using two parameters that this inner function accepts. They are resolved. Come our reject. We can name these parameters whatever we want. But it is his general convention to call them resolve and reject and these results and reject our functions in turn that we can use. So if you use resolved right here, once we're done with our asynchronous score, we use resolve. Tell the JavaScript engine that we are done with the asynchronous work and now it can go back to the next step. And we can use reject to pass back errors. I'll show you how to do that in the next lecture. To summarize it in this lecture, he successfully created a promise. The promise Constructor takes inner function. We're all over it. Cinchona score loose. We could have simply use console dot log, But to simulate a synchronicity we have used set time or so that this court gets executed after Adolf one second. 25. Handling the response: In this lecture, you will learn how to invoke a function that returns a promise on how to handle when a promising results. That is, when it is done. It's done with its work. How to handle that? Go ahead in Walk Them, I think function Amazing Function returns a promise back so dark to attach a success or error handler to the promise we use. Then, I thought, then is a function that accepts two arguments. The first argument is a success function, which we can handle the success response. The second argument is a failure function, our function that can handle the error conditions so implement at a function that can handle the success response console dot Log off work done will handle the other later on. But right now you're only passing and no semi colon at the end. Just the success response for now. Save it. Go to your promises. Fulda, open up. The promised are tasty Melinda Web Rosa, go to the council and they will see that it in walks, working it synchronously, which is what we are doing here in this in Cronus Handler. And then once it is done, it will print console dot Log work done. If you refresh that page now, you can see that there will be a one second weep. There we go. After a second it print work. Working is in Cronus Lee and work done. You can also increase the time out to two seconds. If you want to delayed Father, save it. Come back, Refresh. Now it waits for two seconds and then you see the power. But the key here you have created a promise that executes a synchronously. And then whenever it results were handling the response using promise dot Then we're passing s success. We're passing a function that can handle the success response then can accept to arguments . The first argument is a function that handles the success response. The second function, which you will create in the next lecture can handle the error response. 26. Handling Errors: So when something goes wrong in our cinchona scored, we should Britain error response to simulate that here inside the promise let's define a variable called error is equal to true on inside the logic. Where are we are implementing logic will do it conditionally if error then use the reject call on reject is in walked. That means there is a problem, if not result. Cut it, paste it inside the else block. So we have simply simulating error condition here if there is an error while processing is in car, honestly, we are using the reject call. Reject is there. Second parameter is a function which tells the JavaScript engine that there is a problem in the asynchronous court and when we are in walking the promise here when we get the promise back inside. Then we defined a second function which can handle the error consoled art log and her simply display error message. Save it. Go back to the web. Rosa Refresh. We have a problem in the syntax, so there is no semi colon right here. They're just two functions The mother chemical and come back go to the council for fresh and after two seconds, we will see it better coming back. It's working is synchronously. But since we have changed this flag or we have initialized this flag to true, it will always reject in walk the reject method to simulate ever condition on men. That project happens this function here, the second function will be in work. Now. If you flip this flag to falls, that should return result and you should see the earlier output go back. They're fresh now. You see work done. Search that simple to handle resolve or successful responses and better conditions when you're working with promises. 27. Returning values: we can even pass values when we invoked the resolve and reject functions here. And those values can be accessed right here in the callback functions. Those values will be available as parameters. For example, inside the result on passing in, done on inside reject. I'm passing in better here we can access them using whatever parameter names we want value our say success and the 2nd 1 is e R R O r. Better now I can use success here, which is that pedometer which is going toe carry The following value done on the 2nd 1 is error is a variable that will carry the error response Whatever comes from reject. So save it back to the Broza, the fresh and you see done now for a success response If you flip the flag so true, in case off better, we should get at our back. There we go. You see better so you can pass values back from resolve and reject, and those values will be available as variables. You never success and error handler methods 28. Catching Errors: In this lecture, you will learn a second way, which is a much cleaner way to handle error responses instead of handling the other response inside. Then here we can handle it using a catch block So tremendous out and after then dot catch is a function that we can invoke on this catch takes a function perimeter that can handle the response or define arrow function. Error is the perimeter arrow followed by the body off the arrow function which can simply be consoled. Art log off error. So here we have commented out the error handling inside. Then remove this comma as well. Then we have used thought after that, then finishes catch, catch takes a function. So you how created at a function in the perimeter to it is the error that comes back from reject and we're doing a console dot Log off that error, go to the Broza refresh and we should see working it synchronously and the error still being handled 29. MODULES: for a long time, JavaScript did not have the concept off model, export and import. Many programming languages, like Python C Sharp on Java can already do this. And thanks to Ear six now, we can use the functions available in one JavaScript more dune in other JavaScript models. Before that, we had to use libraries like System Js to accomplish this, but we no longer needed. Year six has the support for marginalising, and we can import one more duel inside another model and use them. But not all the brothers. How the support for more deals yet and also, if you try to run a JavaScript model by including it in another more duel in Abercrombie Broza, he will see cars issues that is cross site scripting issues, which we can overcome by creating our scripts on the North's over but will not be going through all that pain. I will give you the syntax for now on. Whenever the brothers are ready, I'll come back and give you more examples. It's as simple as this. He will create a JavaScript file or a more duel on. Within that file, you can use the export keyword against your functions, and those functions will be automatically exporter. And you can then import that more duel and all the functions that are available in that order in any other JavaScript fire in our application using that import keyword followed by the name of the functions within floor rackets from the related path to that model. There are different variations off this in Texas, but this is the base syntax. And as I said, I will add the hands on example as soon as the issues are resorting Crow.