Transcript for:

hey girls Hussein and welcome to the full stack JavaScript masterclass so in this course you are going to be learning about every single thing there is to learn about in JavaScript okay so we are going to be learning about JavaScript for front end and also for a backend so these are the Technologies which we are going to be covering throughout this course and I have a dedicated courses on each of these topics like HTML CSS Channel and CSS react.js mongodb Mongoose node.js gcept react Hooks npm and all of that but you are going to be learning all of that stuff throughout this playlist okay so now you might be saying Hussein is that it like we are going to be just learning about all of these Technologies and that's it no you are going to be also Building 100 projects in this course okay so now you might be saying again like Hussein is there it we are going to be just learning about all of these Technologies plus this hundred projects nothing else well you are going to be also solving 60 JavaScript challenges is that even for you like you are going to be learning about JavaScript for front end and also for bikini as well and you are going to be building 100 projects in this course and also you are going to be solving 60 challenges in JavaScript so how the content of this course will look like this is how the content of the course looks like right here so in this specific video the current value which you're watching right now we are going to be covering all of these topics right here so first of all we are going to be covering the beginners section like what a JavaScript is and how it works and how to connect all of their HTML CSS in JavaScript and also the primitive data types the different data types and functions I mean like yeah functions and methods and all of that kind of stuff then we are going to be jumping into the intermediate part of this course where you're going to be mastering the ecmascript 6. after that we are going to be jumping into the Dom then we are going to be learning about JavaScript animation with gsap library and finally we are going to be diving into the advanced part of this course which will be the oop like object oriented programming and also the asynchronous program coming in JavaScript so after you complete this course then you can jump to react.js I have a dedicated course on react.js and in this course you are going to be building 10 projects in the down course you are going to be building six projects in the G7 course you are going to be building one projects and you are going to be also Building 100 projects in this course and I'm going to show you that in a second okay so after watching all of that then you can jump into the node.js then you can watch express.js course and then you can watch my mongodb and Mongoose course so finally if you complete all of that series then you will be able to call yourself as a JavaScript Champion or a JavaScript Superstar however you want to call yourself okay so it will take you this amount of time like in this specific value we are going to be just covering all of that and the first section will take you four however the second section will take you 3.3 hundreds the third one will take you just three hours the fourth one will be one and then we have a four hours right here and if you take all of these scores in search will take you that much but if you want to build that 100 projects with me so it will take you more than 30 hours of work okay so yeah that's all about it in this course so now let me just show you where in the world you will found all of that code which you are going to be writing in this course and also their projects and all of that kind of stuff so you don't have to go any further and you can just check out my YouTube channel right here and here you will found all of their projects right here so if you don't know what in the word HTML and CSS is so you can tag this entire course right here and in this course by the way you're going to also building 15 professional projects and then this course is totally optional like if you want to learn about Sans so in this course you are going to be also building six projects and if you also want to learn Italian CSS with me so in this course you are going to be also building these three projects and finally one of my favorite course this course is like totally optional like you don't have to take this course but I will highly recommend you to at least watch I don't know maybe the first hour of this course it will make you a visual studio core Superstar so this is my guarantee if you watch this course you are going to be calling yourself as a Sonic coder you don't have to watch this course because this course is already included in this video if you want to watch this video separately like you totally can Nothing is Stopping You from there but um I will suggest you like if you don't watch this video and also this one so you will be totally in a good share because all of these two various content is already available inside this video which you are currently watching right now so now let me just talk to you about their projects or you know before we're getting into the project first of all let me just show you where in the world you should go from this course so if you complete this video the current value which you're currently watching right now so then you can jump into the node.js course then the express.js scores and then mongodb if you wanted to but if you want to learn react.js first and all of them like a bit later so you can totally do that and you can just pick it right here and you can first of all learn react.js and then you can learn the node.js express.js and also the mongodb as well so now let me just show you that 100 projects which you are going to be building throughout this course so I've created this separate playlist for that projects right here so if I open that and here you will found all of their projects which you are going to be building throughout this course and it includes project for beginners for intermediate and also for advanced level JavaScript programmer as well okay like you're going to be working with a lot of external apis and you are going to be writing a lot of code and I'm gonna just hurt your fingers by by writing a code okay so these are all the projects so now let me just show you where in the world you will found all of the coding which we are going to be writing throughout this course and also for all of these projects as well so you don't have to go any further you just have to come to my GitHub reposit I mean like my GitHub profile and here you will found all of their repository right here so just click on this button and there you will find all of their repository for different kind of courses okay and now let me just show you these 100 projects right here so I will just spin the at the Top If you didn't see the top so you can just click on this repositories and then you can search it there and it will bring you to this repository right here I mean like not this one it will bring you to this repository if you open there and here you can see it will now include all of the coding which you are going to be writing in that 100 projects right here so you will also get the resources like the images and all of that and you will also get the coding for HTML CSS and JavaScript and notice we didn't use anything else except HTML CSS and JavaScript so I will highly recommend you to at least watch my HTML and CSS course but if you are feeling comfortable and you don't want to watch their course so feel free to skip that and then you will be able to watch this JavaScript course right here okay so now let me just show you all of the code which you are going to be writing this course so here this repository is currently private but I'm going to make the public once I publish this course on my YouTube channel and here you can see the beginner section then we have um this G sub section then we have like all of these sections right here and I'm gonna make that in order you don't have to worry about all of them for now but if you open there and it will now gives us all of the basic stuff like primitive data types control structure and all of that so if I just open this folder so each folder will include the already recorded Excel size and also the live coding so we are going to be doing both of them throughout this course like we are going to be performing the live coding as well and we are going to be also performing the challenges as well so I'm going to just open this exercise I'm going to just open there and here you can see first of all I'm going to just give you some sort of instruction let me just zoom in a bit first of all I'm gonna just give you some sort of instruction and then you have to write your own code for that and here is the solution of that course so you will have to watch this course in that manner if you want to become a real JavaScript developer so you have to perform all of the exercises which I'm going to give you throughout this course so yeah I guess that was it about all of the setup so before we getting into the actual content of this course first of all I want you to know like this course is like my hard work I put a lot of efforts into this course and I don't have anyone else to write a code and also to make a thumbnails and also the mega slides and also to edit my content so I do their all by myself so just imagine like how much time I put into this course so I will highly appreciate that if you subscribe to this Channel and also if you give a star to my GitHub repository so I would highly appreciate that so if you don't want to do that so you don't have to do that but I'm just saying like I put my heart in so all into this course and I will love to see all of your thoughts in the comment sections so if you like this course and I don't know if this course changed your life in some manner so you can post it in the comment section or if you don't like some part of this course so you can also post that in the comment section and I'm gonna just do my best to improve this course okay or improve my upcoming courses which are coming so yeah if you want to subscribe to my YouTube channel so feel free to do that and if you don't so that's completely okay so I'll see you in the course in a few seconds so before we getting into the actual content of this course first of all we have to ask ourselves is there what in the world is this technology which we are currently learning and why you should care about that so this definition is just a simple definition of a JavaScript but trust me JavaScript is more than that and throughout the course you are going to be learning all about that other stuff which I'm not going to be mentioning right now so JavaScript is a versatile and widely used programming language that plays a crucial role in web development specifically and it enables developers to create interactive and dynamic elements within a web page is something which you don't have to worry about for now and enhancing the user experience by adding functionality that respond to the user action something which you also don't have to worry about for now and JavaScript is primarily executed in the web browser something which we are going to be also exploring throughout this course but it also use the other environment like server-side scripting node.js and we are going to be also covering there in this course so for now I just want you to keep in mind like JavaScript is a programming language and it plays a crucial role in web development so I want you to just keep that in mind for now but throughout the course we are going to be learning all of that stuff like what in the word is a server-side scripting and what is a browser and execution and all of that kind of stuff like functionality and response to a user and all of that but you don't have to worry about any of this stuff for now okay so that was just a quick definition of what a JavaScript is and how it works so now let's start our conversation by where in the world we are going to be writing our JavaScript code so there are a lot of places where you can run and write your JavaScript code but I just choose this few of them right here so we are not going to be using any of them which I'm showing you right now but we are going to be making our own setup and all of that in a second so now let me just show you places where you can write your simple code and you can test the result of that code in a second so the first one in my list is this code sandbox.com and so here you can create just index.js file and you can place your JavaScript code and it will just work like so okay so this is the first one the second one is that on the line vs code right here like the browser version of the vs code and I'm going to just create a file and I'm going to just create like um you know I'm gonna just pour some so off you don't have to do that by the way I'm just doing it because I want to show you all of them but you don't have to okay so I'm going to just search for a JavaScript and I'm going to just select that and here you can see if I just pass this code I can run this code in my terminal and I can do whatever I want to do with that so this is the second base and now the third place in my list is uh this Corbin right here so you can play around with these layouts right here like you can make it like so or to make your left or to the middle or something like that so you can write your doc type HTML right here you can write your um CSS right here and you can write your JavaScript right here so what I'm going to do is that I'm going to just place this code right here and it will now open I'm like it will give us the result of that code right here inside a console somewhere and here you can see it is now giving us that hello world right here inside a console so that was just three places and you can also write your JavaScript code in some sort of a empty blank page or in also a different kind of browser but you just have to right click on somewhere and then just click on this inspect area and here you can see it will give us this elements Tab and then I want you to just click on this console right here something which we are going to be diving into in a great detail in this course but I'm just showing you where to find there okay so I'm going to just place it right here and I'm gonna hit enter and here you can see it will also give us that same result right here so there was just a few places uh where I don't run my JavaScript code but I just kind of want to show you like there are a lot of places where you can run and test the result of your recording I'm like specific JavaScript coding uh in the browser as well so that's there so there was it about a few places where you can run your JavaScript code so now let's just make a setup for our coding journey and then we will be able to write our code and also test our code so for this course I'm going to be using a visual story recorder right here and you are totally free to choose whichever kind of editor you like so you can use like Sublime atom jet blinds products and all of that kind of stuff but in my case I'm going to be using a visual studio code editor right here and as I said I have entire course on there so trust me if you take that course uh that course will make you according Superstar anyways there's other story so I happen to be using a Windows right here so here you can see it will automatically detect my operating system right here so if you're using like a Mac OS or Windows or Linux so you can also download vs code for that as well okay so in my case I'm going to just click on this one or you know I already installed there so I don't have to you just have to click on this button and then just hit next next and it will download and install it in your machine and then you will be able to run your code inside your vs code okay so the next thing which I want you to do is that I want you to use this Google Chrome for this course you can choose whichever kind of uh what we call a browser you like you can use the brand or you can use I don't know Firefox or something like that but in my opinion I will highly recommend you to use a Google Chrome for this course because Google Chrome is awesome and everybody likes to use that so this is just my personal opinion so you can choose whichever kind of browser you like and you can also choose whichever kind of quarter you like but don't tell me later like Jose and something is not working in my browser and something's not working in my vs code I mean like I will still help you but that would be a bit bad like I'm recommending you to use these products and you are using something else so this is not cool you know anyways so I want you to download and install both of them and once you are done then I want you to create a puller somewhere right here so in my case I'm going to just Square my folder inside my desktop right here you can give any name you want but in my case I'm going to just give my name apply false tag JS right here I'm going to right click on him and I'm going to open that in my visual studio code right here okay so it will now open their folder in my vs code right in here so I'm gonna also show you that extension and all of that kind of stuff which I'm going to be using throughout this course so I want you to just click on and by the way your coordinator will not look the same just like mine because I've changed a lot of stuff in my vs code right here so first of all I want you to just click on this extension area right here you don't have to install this one you don't have to install these so if you want to use this theme so I'm gonna highly recommend you to use this uh GitHub theme right here if you just have to just search for like you have theme and then click on this install button and it will just install it in your vs code you don't have to install these and you can install this JavaScript snippet right here but you don't have to and you will also have to install this live server and I'm assuming that if you are coming from my HTML and CSS course so now you know enough about this live server so that there's other stories so I want you to just install this theme if you want to install it so this one is optional and this one is not optional you have to install there for this course and you can also install a predator to make your code a bit pretty so I will also recommend you to install this one as well and for icons you can also install this one right here or you can install a material icon if you wanted to okay so once that's done so I want you to just create a file right here and give any name you want but I'm going to just give a name like index.html right here and now if I want to create a Javascript file so the first thing I'm going to do is then I'm going to just create this file right here you can give any name you want but you have to write this dot JS extension at the end so what I'm going to do is that I'm going to just write like app.js right here and now if I hit enter and here you can see it is also giving us these icons right here like this file will include the JavaScript code and this file will include the HTML code right here okay so now let's learn about how in the world we are going to be writing or JavaScript code inside your vs code right here so I'm going to just hide that top you don't have to because I'm just hiding it for this value purposes so I'm going to just write my doc type HTML and if I just write then it will now gives us the stock type HTML boilerplate right here if you don't know how to generate this so you can take my HTML and CSS course which is totally free okay so the next thing which you have to do is that we want to just save this file I'm going to right click on him and I'm going to just open this file with the live server right here so it will now open my file with the live server so now let's just wait for that and here you can see my file is now live I mean like my file is now open with this port right here I'm going to just right click on him and I'm going to just click on this inspect area one more time and then I'm going to just click on this console and here I'm gonna just refresh that and now what I'm going to do is that I'm going to just write a little bit of JavaScript right here so I'm going to just write a script opening 10 tag and script closing tag and it will allows us to write our JavaScript right in here so what I'm going to do is that I'm going to just write Alert in this case alert and I'm going to just pass like hello my name is Jose okay so I'm going to sell my file and here you can see it will now give us this pop-up box right here which will say like hello my name is Jose right here I'm going to click on this okay and that was our first line of JavaScript you don't have to worry about that because we are not going to be using this alert anywhere okay so what I'm going to do is that I'm going to just write console.log and if you want to log something to the console something which you are going to be diving into in a really great depth and now if you want to log something to the console so we are going to be just writing like some strings so you just have to write whatever I'm writing right here so I'm going just right like because then you can write your own name if you want to or you can just say like hello or Zen okay just like that come on because then and now if you sell there and here you can see it will not use like hello and Jose right here here you can unblock that I'm going to just click on these three buttons and you can just push that to the bottom or you can push there to the left or unduct that to the left and I'm going to just click on this undock so it will now gives us like so okay so everything is working just fine but we are not going to be writing our JavaScript code inside this HTML file right here we are going to be writing our JavaScript code inside this separate file which we've created a second ago inside this JS code right I mean like app.js file right here okay so I'm going to just cut this line of code and I'm going to just place it right here okay so if I save this file and if I save this file and now let's just check him out and here you can see it will not gives us anything why is that because we write or valid JavaScript code already I mean like everything is a okay inside this file but we didn't attach or we didn't link this app.js file with this index.html file in CSS if you just want right or external CSS so you will just write a link tag but in general script we are not going to be using their link tag we are going to be using something car we just have to write a script in this case and here you can see my vs code is already suggesting this right here so I'm going to just click on this one and this is the syntax of writing I'm like linking over Javascript file with our index.html file right here so I'm going to just hold Ctrl and hit space and here you can see it will now gives us every single thing which we have right here inside this current directory so I'm going to just choose this app.js file right here okay so I'm going to sell my file and now let's just check him out and here you can see it will not use like hello Hussein and we can write all of our JavaScript code right in here so here throughout the course we are going to be writing all of our JavaScript and here we are going to be testing the result of our coding right here inside our console okay so this is how we are going to be making a set of port or code and by the way I forgot to show you one thing if you want to work with that prettier so you just have to open your settings right here so if you want to open your settings so you just have to hold Ctrl and hit comma okay so I want to just hold Ctrl and hit comma and here you can see it will now give us all of that settings right here so I want you to just type like format and here you can see we'll not use uh this format right here so I want you to just click on this one which will just say like format on sale so I want you to just check there and you can also choose your D4 um default uh format okay so here you can see it will not use this like you just have to write like this default format and then it will gives us this power box right here so here you can see we have different kind of um extensions right here but in this case we are going to be just choosing this prettier right here so I want you to just click on this one and whenever you save your code like if I just write some sort of a code if I just write like on console.log and if you just write like hello and we provide like a lot of spaces and stuff and we forgot to include this column or something like that so it will also convert our single string to double string and all of that so it will just make our code pretty once we sell our file and here you can see our code is now looking totally pretty and if you're wondering like where in the world we are getting this hello from so I'm using this extension you don't have to install there if you don't want it to but I'm using this core I mean look this console ninja right here so that's why I'm getting this result right here inside my uh vs code right here but throughout the course you are not going to be getting this result right here instead you are going to be getting the result right here inside a console right here okay so that's there so that was it about the setup of this course so now let's learn the first topic of this course which will be a console so what I'm going to do is that I'm going to create a folder I'm going to give a name of like 01 Basics and inside this folder I'm going to create two files the first one will be index.html and the second one which I'm going to create will be app.js and by the way you can give any name you want like you can give name of like banana.js or orange or Jose like your own never you can give any name you want but in my case I'm gonna just go with app but remember this dot JS extension is very very important because it will tell our file that we are currently writing our scripts inside this file okay so which means like we are writing our JavaScript code inside this file so you have right there okay I'm gonna hit enter right here and let me just hide that uh activity bar from there anyways so now we create our two files right here the first one is index.html and the second one is f.js so what I'm going to do is that I'm going to just write my doc type HTML and I'm assuming that if you are watching this course you already know HTML and CSS so in HTML and CSS I'm going to go a bit fast I'm going to give a name apply console or something like that and I'm going to hide this head area from there okay so I am going to just write H1 of like um full stack Java Script let me just sell my file right click on them and open it with the line server so it will now open my file in live server so that we can see or changes and we will get our live reload okay so it is launching and there we go okay so here you can see we have our full stack JavaScript right here so now let's learn about how we are going to be riding our JavaScript inside this file okay so what I'm going to do is that I'm going to just remove this H1 and here I am going to just write a script and open it and close it right here so inside the script opening and closing tag what I'm going to do is that I'm going to write a little bit of code which you don't have to worry about for now later in this course we are going to be learning every single thing about JavaScript but for now I'm going to just write alert and I'm going to just say like a hello or Zen okay I'm gonna just sell my file and here you can see this pop-up box right here which is saying hello Hussein right here I'm gonna hit OK and that was it that was just our first JavaScript code right here so next thing which I'm going to do is that I'm going to write a console.log of hello world in this case bird I'm gonna send my file and now inside here I'm going to just right click on them and click on this inspect area and it will now open this um what do you call a developer tools right here so I'm gonna adopt that to the right and here I'm going to just click on this console right here I guess probably in your case it would be like this let me just show you there in your case it would be looking like this so you can just tuck that to anywhere you want so just click on these three dots and you can duck that to a right to the left or like you can induct it if you want to and you can make it like a whole bigger screen if you want to but in my case I'm going to just click on these three dots and dock it to the right and now here you can see we have this console I very zoomed in sometimes if you were zoomed in so you would not see that console you can either click on these three buttons or these two arrows and click on this console and here you can see we are now getting this hello world right here or you can just hold Ctrl and go back in your mouse or zoom in and then you'll probably see all of that stuff I'm gonna make it a bit bigger so you guys can see everything a bit better and here you can see we are now getting our hello world right here inside the console I'm going to show you what this console will do for us and there are a lot of things which you have to learn about console but first of all we have to learn about how we are going to be riding our JavaScript so that was just a basic way to write your JavaScript but this is not the best way to write your JavaScript code why because later uh in this course or maybe probably in the upcoming courses we are going to be writing a lot of JavaScript so for them we are not going to be writing this script opening tag and script closing tag because this is kind of like a uh inline uh inline CSS like whenever you're writing inline cssu so I already mentioned that in my HTML and CSS course so you would have provided all the stuff in one line in one page so that will make it clearly you know let me just give you example let's suppose we have a header inside this header we have a navigation then we have a UL Airline inside this Airline we have a and let's suppose we want them to be like would be fine and here you can see we have our HTML code right here in one place and JavaScript in one place and later if you also want to provide a CSS so that would be suck and here you can see this is just a basic HTML right here and this is just one line of uh JavaScript which is not doing anything but just logging this hello world to the console and things are looking colored so what I'm going to do is that I'm going to just remove that coding from here and I'm going to also remove the script tag from here as well okay so let me just zoom in a bit and now I'm going to open my sidebar right here and here you can see we've created this app.js file right here and if I just write that same alert right here alert of like um something to show or something like that I'm gonna send my file and let's just refresh it and here you can see nothing is happening why now we successfully create our file right here we write our code inside this file but we didn't link this app.js file with this index. HTML file so if you want to link this app.js file with this index.html file so for that we have to just write this one line of code so we have to write a script and if you are using original story recorder so here you can see we have this auto correct suggestions right here so I'm going to just click on this SRC one and here you can see you just have to write there and now inside this SRC or inside this Source here you have to provide your Source right here I'm going to hold Ctrl and hit space so it will unlock uses every single thing which we currently have inside our repository so inside our repository we have this app.js file in in index.html file I'm going to just click on this app.js file I'm going to sell my file and here you can see we are now getting this something to show right here inside our console I'm going to click on this ok so which means like everything is working the web experiment to work I'm going to remove that alert from there and I'm going to just write a hello word of like console right here I'm going to just send my file and here you can see we are now getting this hello world inside World console right here so everything is working the way we expect him to work but throughout the course we are going to be writing our code just like there I'm gonna just make that side by side so you guys can see everything a bit better I'm going to click on these three dots and undock there first of all and let me just push there to the right right here okay so I that's very zoomed in let me just push that right here we are going to be writing our JavaScript code at the left side and we will see the result at the right side so that was just read about how you are going to be linking over Javascript file into a HTML and how we are going to be writing our JavaScript code so we've been writing this console log for a lot of time now and I'm going to just remove that and let me just tell you what in the world is that console loan and why would you need that it doesn't matter if you're a beginner or advanced level programmer you will need this console.log all the time like you will work with this console.log 90 and not 90 but maybe 80 or 85 percent of your time okay as a developer anyways so what I'm going to do is that I am going to just write console and this console is an object you don't have to worry about what an object is at this point of the course later in this course we are going to be learning what object is how you are going to be creating your objects and all of that kind of stuff but for now you just have to remember that console is an object and inside this object we have a lot of methods so I'm going to just write Dot and then in this case I am going to just here you can also say like it is now giving us the preview of all of these methods right here so we have console log console error warn in assert and clear all of them right here so these all are methods inside this console object so what I'm going to do is that I'm going to use the first one which is Log and anything I write inside this log will show up right in here so let's suppose if you want to write some sort of a strings you don't have to worry about what a string is so in this case I'm going to just write opening code and closing code and inside this course I'm going to just write like my own name hosan web dev okay I'm going to sell my file and here you can see inside a console we are now getting this hosen web dev right here if you just remove that and if you just write a console.log of 2 and plus 2 seller file here you can see it is now giving us four we can write like object you don't have to worry about what an object is I'm going to just write name of um I don't know Alex I'm gonna sell that and here you can see it will not gives us that name as object and it will now show up right in here so this console is an object and inside this object we have a lot of different kind of methods so I'm going to just give you a quick test or a few of them but not all of them because there will be suck it will waste a lot of your time to I will show you every single thing about a console so if I hold Ctrl and hit space it will now gives us the preview of all of these methods right here so I'm going to just choose this um I don't know one one right here so it will now give us a warning so I'm going to just write like this is a warning I'm going to sell my file and here you can see it will now give us that same message but with different kind of color right here like a warning color we can also write um what do we call it error if you wanted to we can do a lot of stuff but one of my favorite one which a lot of people don't use but I use it all the time uh is console.table and inside this table you have to specify an object something which we are going to be learning later in this course I am going to just write name of uh Hussein and I'm going to just provide like I don't know um edge of 20 maybe or yeah that would be fine I'm gonna sell my file and here you can see it unlock uses their data as a table right here so name will be a Hussein Edge will be 20 and you can specify how many you want I'm going to remove that and there are a lot of things which you can do let me just write a console log of like hello or right here I'm going to duplicate that like I don't know four times I'm going to sell my file and let's suppose if I just write console dot clears it will just clear out this screen so I'm going to save my file and here you can see it will not clear out the screen and let's suppose if I just copy these two and underneath this clear I'm gonna Place her so what do you think will happen so if I sell my file it will now give us the clear and hello world hello world two times right here why is there like aren't we clearing over screen right here well it will clear all everything which is above this console.clear it will not clear out anything which is underneath there I don't want to confuse it you don't even have to worry about that I'm going to just remove all of this scoring and sell my file and here you can see everything is gone so the next thing which I want to talk to you about is comments in JavaScript so what in the world are comments and how you're going to be creating your own comments so comments are those code which is ignored by our compiler which means like our code will not work but we can see our code and we use comments for notes or maybe in some situation we would want a test or code so for some reason we would want to comment out our code so let me just give you example of that uh if you want to write a comment you just have to write two forward slashes and you can write anything you want so let's suppose if I just write anything and if I send my file nothing is happening we are not getting any errors we are not getting any warnings or anything like that and let's suppose if I just remove that and sell my file and here I hide that what do we call it and there are errors right here that's because of this um Firefox error which you're seeing right here come on where is that yeah this Firefox and this Firefox error so that's why I comment this out you don't have to do that by the way I'm just doing that for recording purposes and here you can see if I just write this gibberish it will not it will not give us like this gibberish is not defined you can write your gibberish inside this file this is a Javascript file not an HTML file so let's suppose if you just want to comment this line out and save our file and here you can see that error is gone okay and we can do whatever you want to do with that so let me just sell that file and this error is I don't know where is this area coming from uh cannot rear cannot read a property of uh undefined Firefox or something like that for now I'm going to just hide this error right here and later I will unhide there for this section I am going to hide it anyways so let's suppose if you have some sort of other code like Consular log of hello world right here I'm going to just write console log of hello world I'm gonna send my file you already know it will now give us hello word inside a console but later if you just want to comment this line out so we will just put our cursor right here I'm going to hold Ctrl and hit forward slash and here you can see it will now just comment this line out and I'm gonna sell my file and nothing is showing right here inside a console why that's because our code is now currently commented and Oracle will not be compiled by our compiler so if our code is not compiled by our compilers which means like nothing is going on so this is just a simple text right here this is not actual code this is just a simple text and you can write anything you want like this is just a simple text period save my file nothing is happening right here so now let me just show you the shortcut for writing that console log so you don't have to write this console.log and something right here instead you can either write l o g and then you have to select the second one and then here you can write anything you want or you can use this shortcut which is a CLG and throughout the course I'm going to be using the CLG if I hit Tab and here you can see it will just Auto completed for me you just have to either write a log and then select the second one and hit enter it will auto compute your console log or you can write CLG and hit Tab and here you can see it will also write a console log for you so what I'm going to do is that I'm going to just write a comment for myself like um the CLG or console.log and a log and select the second one and it will also give this console.log okay so this is how we are going to be writing a comments throughout the course and that was it about the console in JavaScript so those are about the consoles and comments in JavaScript so now let's learn about uh something called variables there we go so word in the word is variable and why you should care about learning variables in the first place so what is variables a quantity which value can be changed during the execution of the program is called variable and you can say like a variable it's just a box where we store our data and later if you want to reuse that data or maybe change their data so we can totally do that so now we are going to be creating a box where we are going to be storing our data some sort of data but before we do that first of all I am going to write a pseudo code so what in the word is a pseudocore a pseudocode is a chord which is used for just implementation purposes like just for a diagram or something like that but it will not work I'm going to make that a bit bigger so you guys consider thing a bit better the first thing which you have to do like whenever you are creating a variable first of all we have to write a reserve e word so we are going to either writing a war or the lead or the cons keyword which I'm going to show you in a second and then we have provided some sort of a name folder variable so we would have to give some sort of a name Tool variable and finally the type of value the type of value which we are going to be storing inside our variable so this is how you are going to be creating a variable in JavaScript first of all you have to write some sort of a result keyword like either war const or alert then you have to give some sort of a name to your variable then store the value which you want to store like uh I don't know strings or booleans or numbers or anything you want to store okay so what I'm going to do is that I'm going to just write either you can either write a lead keyword you can either write a one keyword or a cons keyword but let me just say that a one wizard keyword cannot be used that much often like you will never find like you will never found um any developer nowadays you're using a war result keyword but you will found a old code bases which are using the swar user keyword okay so I'm going to just remove them and in this case I want to declare my variable using the lit keyword okay so I'm going to just write a let result keyword then you have to give some sort of a name to your variable you can give any name you want but in my case I'm going to just write name right here so this is how we are going to be declaring our variable but we didn't assign any value to this variable so I'm going to just remove that and declared uh variable so this is how we are going to be declaring our variables I'm going to just log there to the console like name and now let me just sell there and here you can see inside a console we are now getting undefined why because currently we are not storing any value inside this variable so that's why our variable is undefined by default like if you didn't specify any value to your variable so your variable will have the value of undefined by default so let's suppose if you want to provide some sort of a value to that and by the way we are going to be learning about values throughout this entire course so we are going to be learning about objects we are going to be learning about function Z1 we are going to be running a lot of stuff but in this case let's suppose if you want to just store some sort of unnumbered inside this variable so I am going to just write equal to sign first of all and then I don't know the number you want to store you're going to store like 5 000 if you want to but in my case I'm going to just store five I'm going to send my file and here you can see we are now getting this five right here inside a console and let's suppose if you want to provide a string we are going to be learning about string shortly but currently let me just write my own name like Jose and web dev I'm going to just save my file and here you can see it is now giving us Jose and web device console so this is how you're going to be declaring a variable uh or not just declaring this is how we are going to be declaring a variable and this is how we are going to be assigning a value to our variable okay so you know what I'm going to just remove there and this is how we are going to be declaring our variable and now let me just assign value come on a double s i g n assign value to your variable so let's suppose if you want to assign some sort of a value to your variable at one place so you can also do there so now let me just create a new variable I'm going to give a name of like um I don't know banana or something like that uh b-a-n-n-a it doesn't even matter the name doesn't even matter and now let's suppose if you want to assign value to this variable this is how we are going to be declining our variable and now let's suppose if you want to assign value to this banana variable so we are going to be first forwarding the banana uh name like the name of the variable then we are going to be writing a space equal to and then you can store any name you want but in my case I'm going to just write string or banana and now I'm going to just copy this banana from there and now let me just log there and I am going to just send my file and here you can see we are now getting banana right here inside of console so this is how we are going to be declaring a variable and this is how we are going to be assigning a value to that variable okay so I hope that makes sense now let's talk about the conventions of writing a variables and the things which you cannot do inside a variable so so obviously you already know that anytime you want a query variable first of all you're going to be either writing a lit result keyword or the cons result keyword or the one result keyword but in my case I'm going to go with a letter result keyword in this case and I'm going to just write like let's suppose if I want to give a name of like uh let's suppose if I want to give my variable the name of like console suppose so I'm going to just write not a cons but uh I guess I'm going to just write a wall result cover right here and I'm going to just store the value of like a variable and what do you think will be the result like it is already giving us this errors right here I'm going to copy there and I'm going to just place this a variable right here so I'm going to sell my file and here you can see it is now giving anything it is giving us this warning right here this error to be precise I'm gonna just hide there and here you can see it is now giving us like uncut syntax error and expected token War part so which means like you cannot provide a result keyword as a name to your variable like you cannot write if statement you cannot write um what do you call it and throughout the course I'm going to be also showing you all of the results which you need to know you cannot write like a full result keyword you cannot write a class result keyword it will give you an error so that was the first thing which you have to keep in mind anytime you want to create a variable you cannot write the name as a result keyword this is a big No-No and let me just remove that wall from here and I'm going to just change the variable name to like something else like uh I don't know my own name let's suppose if I want to provide my own name so I'm going to just write Hussein and if I just write space and web develop let's suppose if I just logged into a console like Hussein web dev it will give us an error why is there because our JavaScript we think like we are now declaring our variable at this point so what in the world are we doing in this point it will just over JavaScript compiler will think like in this case we are declaring or renewable and in this case we are assigning a value to order variable but this variable is not defined okay like we didn't Define this variable somewhere inside our program so what JavaScript will be confused which means like we cannot provide spaces whenever we are writing variables okay you can either just remove this space from here and then make it uppercase and this will work so let's suppose if I just log that to the console let's suppose because then web dev I'm going to send my file it will now give us this value right here which is a variable right here and let me just remove this come on what the hell it's Error right here from our console it will now give the sled hose and web dev and everything is working the WebEx I am to work but there is one more thing which you can do whenever you are creating your variables so let's suppose if I just write like um I don't know 10 and 10 oz in web devs so here you can see it is now giving us an error why is that that's because if you want to create your variable you cannot write the first letter as a number so let's suppose if I just cut that from here and I'm gonna just place it right here it will work but you cannot provide the variable name at the beginning and you can write it at the end if you wanted to so let's suppose I'm going to copy that I'm going to press it right here semi fine and here you can see it is working just fine and if I just cut there and put it right here at the beginning it will give us an SD error so that was the second thing which you have to keep in mind and you can also not write dashes if you wanted to so let's suppose if I just write Dash and then W and if I sell my file or JavaScript compiler will think like you create one variable right here and you're subtracting something from this variable but this variable is holding the value of string so how can you subtract something from this variable so it will give us an SD error so you can write your variables with the dashes instead you can write this underscore if you wanted to like underscore you can like totally do that this is totally valid I'm going to copy that I'm going to place it right here send my file this is totally valid but if you destroy like this Dash This is not valid okay so you can either also provide this dollar sign right here at the beginning this one will totally work I'm gonna copy that and I'm going to just place it right here send my file here you can see it is just working totally fine and you can also provide this underscore at the beginning even if you wanted to I'm going to copy that and I'm going to just place it right here let me just sell my file and here you can see this is totally working just fine but you cannot uh write this whatever you call it this minus sign the over this Dash whatever you want to call it so if you just write this Dash sell or file and it is giving us that nasty error which I comment comment not comment button which you just hide right here so syntax error here you can see it is now giving us this error here so uncut syntax error invalid left hand side in the assignment at that line so 101 we have this first line right here so I'm going to just remove that from here this Dash and I'm going to just remove it from here as well and let me just hide these errors from here so yeah that was just a basic theory of variables so now let me just show you a convention for writing of variables so there are a lot of convention a lot of developers use but you have to choose your own ones so you can choose whichever kind of convention you want but if you're working with a company so you have to follow their conventions so let's suppose we have a lot of cases like upper uh case so we have this uppercase convention so anytime you want to declare your variable so some people use I've never seen to be honest you some people use uppercase so you can give any name you want but your name should be uppercase like uh this is a name okay so this is upper case you can also write a lowercase if you want to and you can write something called a kebab case or something like that which is like um position and then um this underscore and then the web dev right here so you can also write there but I have seen a lot of python developer use this convention of writing a kebab case but in JavaScript community and you will found there very soon and in JavaScript Community whenever we are declaring our variable the first letter will be a lowercase so let's suppose if you want to just create a variable of like a YouTube channel or something like that so let me just write a YouTube and then you have another name or another word so you cannot write a space as you already learned there you cannot write the dashes you already learned there if you want to provide this underscore so you can but I've seen a lot of python developer do that but not a JavaScript developers so as a JavaScript developers this is a convention by the way you can choose whichever kind of convention you like but for me and for a lot of JavaScript developer they use their first word as a lowercase and the second word first letter will be uppercase and then like let's suppose YouTube channel there we go so here you can see what I did is that the first word is lowercase and in the second word the first letter is uppercase right here so this is how you're going to be writing uh these conventions if I just copy there and I'm gonna just place it right here I'm Gonna Save my file and here you can see it is now giving us this variable right here inside a console so you can choose whichever kind of convention you like you can write uppercase lowercase um snakes or Kebab case and by the way this case is something called a camel case notation so here you can see that Camel is notation right here anyways so that was it about a very oh that's not yet about variables so now that we learned about how we are going to be declaring or variable by using a lit keyword so let's suppose if I just change that to a const result keyword so let me just save that and here you can see it is totally working just fine but um you know what first of all let me just show you this let one so if I save that it will just work just fine and I'm going to just change this variable value let's suppose later I decided to change the value which is inside this YouTube channel variable right here to something else so I'm going to you know currently I am going to just store like Mr Beast right here I'm gonna sell there and here you can see we're now getting this Mr Beast and let's suppose if I want to change this variable name to something else like I'm going to just write YouTube channel and I'm going to just change that to my own name like Hussein web dev right here so I'm going to save my file and here you can see it is now giving us Hussein web dev rather than uh Mr Beast right here so now we successfully change the value which was inside this YouTube channel variable right here so later in some situation we would also do that and this is quite useful and we would do that like all the time uh like first of all we will declare one value two or variable and then later we are going to be changing that value to something else so this is how we can change the video from one thing to another thing so we can do that this is totally valid by using a lit result keyword we can also do that by using a one result keyword so let me just sell that and here you can see it is now working just fine like we are now totally able to change the value of Mr Beast to this hosen web dev but if I just write a const desert keyword right here and I'm going to sell my file and here you can see it really gives us a beautiful error which you can see right here it will say like uncard type error assignment to a constant variable you cannot change the value of your constant variable once you declare it right here so if you declare a variable by using a constant result keyword and you specify some sort of a value to this constant you cannot change there you have to keep that in mind a quantity ritual you cannot be changed during the execution of the program is car constant a quantity which value can be changed during the execution of the program is called a variable so we can do this like we can change the value of or variable by using either result keyword or the war result keyword but we cannot do that by using our constraints so keep that in mind I'm going to save my file and here you can see we are now getting this beautiful error right here and similar supports if you want to just change that to like alert save or file it will give this Jose and web dev let's suppose you change that to one server file and this is how we are now getting Jose and web dev right here inside of console so I hope you learned a lot of stuff about variables in this video so I'm going to remove the scoring and now it's time for you to perform this challenge so I want you to just perform this challenge if you can do it that's completely okay I'm gonna also give you the solution in a second so the first thing I want you to do is that create a variable name with the name so I want you to create a variable with the name of name and store your own name inside that variable then I want you to create a variable with the name of what you wanted to become in your life by using this same convention right here and store the name of programmer and then create a variable with a gender and store your gender if you are male or female or Gmail whatever and then create a variable with the name or Twitter handle and store your Twitter handle inside them and finally log everything to the console like log name like what you want to become in your live lock gender and Twitter handle as well so give it your best shot if you can do it that's completely okay I'm gonna also give you the solution right now so the first thing that you have to do is that we have to declare variable with the name of name and store all your own name so my name is Hussein web dev right here and the next thing which you have to do is that we have to cheat a little bit I'm gonna just place this variable name right here and store uh programmer there we go and the next thing which you have to do is that we have to declare variable with the name of uh gender and I'm gonna just store mail and then we have to declare variable um with a torture handle and we have to just store your Twitter handle hosen web dev and now let's log everything to the console so I'm going to just log our name let me just duplicate that a few times uh what do you want to become in your life and gender and finally the trailer handle so what I'm going to do is that I'm going to save my file and here you can see we are now getting Jose and web dev programmer Mel and Hussein web dev right here okay so everything is working the way we expect him to work and that was our first challenge of this course so so congratulations if you did it correctly but if you are not able to perform it that way that's completely okay I already give you the solution then layering this course you have a lot of challenges to perform so stay tuned alright so that was at about a variable and that was it about the variable challenge so now let's learn about the first Topic in A Primitive times in a JavaScript pre-made two times which will be uh number come on SO in this video or in this section to be precise we are going to be learning about a JavaScript and the first JavaScript primitive we have is a number so we are going to be learning about number in this section so how can we write the numbers in JavaScript well that's obvious so we can first of all declare a variable we can give any name we want so I'm gonna just give a name up like num and I'm gonna just store the video obtain inside there let me just log there to the console like num and I'm gonna sell my file and here you can see we are now getting this 10 right here inside a console so that's cool but let's suppose if you just want to write that amount of numbers can we do that let me just sell there of course we can here you can see this is a JavaScript man so we can totally do that and now let's perform a little bit of arithmetic operation but before I do first of all let me just show you like we can um all right a positive number like 10 we can also write a negative number like minus 10 let's suppose it will work just fine ah come on where in the world is that error is coming from I'm gonna have to hide there and here you can see this 10 is working just fine I'm going to just remove this minus from here and we can also write a floating Point numbers like um 10 period 10 dot uh I don't know zero one or something like that I'm gonna sell my file and here you can see this is how you can write a double or a floating Point numbers right here let's suppose if you want to check the type of this variable right here so how can I go about doing that well first of all we have to just write type off operator right here and and by the way this is also a reserved keyword in JavaScript just like I let cons and War this is also a result keyword in JavaScript so I'm going to just save my file and here you can see when log uses number right here so this is the type of number which we are storing inside this variable so that's why this operator or this result keyword will help us gives us that gives us the type of this variable and the type of this num variable is number right here so that's why it is now giving us this type right here so I'm going to just remove there and we can store like positive number negative number or floating Point numbers if you wanted to but in my case I am going to just write like uh I don't know I'm going to just put a 2 inside there and save my file and here you can see it will not give us two right here best so now let's just learn about a basic basic math in JavaScript so we're not going to be working with a lot of math of course you can do that like there's a lot of libraries which can help you with that but in this case we are going to be just writing a basic arithmetics like addition subtraction multiplication division and all of that kind of stuff so what I'm going to do I'm going to just write 2 plus 2 semi-file it will now give us four we can just duplicate this line of code and we can write 2 minus 2 in several file it will give us zero and let's suppose if you want to just write a multiplication so I'm gonna just write this essay symbol and you can hold shift and hit add button that is the air button so hold shift and hit add button and it will now give you the star or asterisk symbol whatever you want to call there will allow the story a multiplication so I'm going to just save there and here you can see 2 times 2 is 4 I'm going to duplicate that and now let me just write a division symbol right here so this is just a forward slash I'm going to save that and here you can see it is now giving us this one right here uh two two divided by two yeah is one we can also provide a modulus operator if you wanted to and it will give us the remainder so let me just save there it will now give us 0 the remainder is 0 says why it is giving us the remainder of zero we can also write the power to double uh star or S rushes or S I can't even pronounce this name these two double Stars well it gives us the power of these numbers so I'm Gonna Save that and it will now give us four and we can also write an increment and decrement but for that we have provided some sort of a counter variable so I'm going to just create a variable I'm going to give a name of like counter and it will be now currently set to zero right here like our counter is currently set to zero and let's suppose let me just log there to the console like counter right here so I'm going to send my file but before I do I'm going to comment these nine out so that our console is not looking clutter I'm going to save my file and here you can see it is now currently set to zero right here but now let me just write um increment or counter so I'm going to use counter plus plus right here and by the way these are openers in JavaScript so this addition subtraction multiplication division power and all of that is known as an opera in JavaScript and this is also operated so it will allows us to increment one time so let me just save there and here you can see or 0 now become one right here so let me just duplicate this line of code one more time let me just save there it is now become two and let me just do that a lot of times so let me just save there and here you can see this is how we are going to be incrementing or variable value by using this double plus right here okay so this double plus allows us to increment our value at one number and we can also do a decrement if you want to Let's suppose we have like 10 right here and I'm Gonna Save that it will now make it 11 because here we are incrementing there but let's suppose if you want to decrement this we are going to be writing minus minus right here let me just save that and here you can see it will now make it nine right here let me just duplicate that two times say or file it will now give us a 7 and this is how we are going to be incrementing and decrementing them but let me just show you one you know what I'm not gonna show you that thing not right now so that was in about the basic math in JavaScript so first of all you can store either um positive number the floating Point number or negative number and this is how you're going to be writing a basic math operation like addition subtraction multiplication division the modulus operator which will give us the remainder and this is how you can write your power and this is how you can decrement that and we already learned about the increment the increment right here okay so let me just save that and this is how you're going to be doing the incrementation and the decrementation so now let me just give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay I'm gonna also give you the solution by myself but I want you to please please if you want to learn JavaScript so you have to perform these challenges by yourself if you can do it that's completely okay but you have to at least give it a try like spend I don't know four to five minutes or something like that write your record by yourself and then you'll be able to become a JavaScript monster I'm gonna remove all of this according from here and I'm gonna just place this comment right in here okay so I'm going to just save this file the first thing I want you to do is that create a variable with the name of first favorite number and store your first favorite number inside the variable then create a variable with the name of second favorite number and store your second favorite number inside the variable then add the first favorite number and the second favorite number with each other and then subtract the first favorite number and the second favorite number multiply divide uh first favorite and second favorite and check first number mod like the modulus operator which I'll show you just a second ago which will give us the remainder and the second variable the second favorite variable and then check the power of the first favorite number to be precise alright so perform this challenge by yourself at least spend I don't know five five minutes or something like that and here is my solution so the first thing I'm gonna do is that I'm going to declare my variable first favorite number and it will be now set to like 21 my favorite number let's check and I have number eight will be now equals two just seven right here so I'm gonna log to the console this first favorite number uh plus second favorite number so if you sell file and here you can see 27 uh I mean like a 21 plus 7 will give us 28 right here so let me just duplicate there and I'm going to change that to minus and here you can see it will now give us 14. let me just change that to the times semifine it will now give this one 147 let me just duplicate it there and the Y there same Wi-Fi it will now gives us three and let me just use my modules over it so it will give us the remainder of zero and let me just duplicate there and let me just write a power symbol and let's just save it and here you can see this is the power of my number which I specified or right in here so that wasn't about this challenge so if you perform there by yourself so congratulations so congratulations you are now becoming a JavaScript in India but if you didn't do it correctly that's completely okay too because there are a lot of things you currently have to learn about JavaScript and you cannot learn JavaScript in one day it will take you a little bit of time so you would watch this course you will watch my other courses in JavaScript and also you will just go to your and so you will just go to internet and you will find a lot of great resources and a lot of great challenges and you do that you will become a great JavaScript developer so enough talking I'm going to remove this coding and the next thing which you have to do is that we have to learn about booleans in JavaScript so what in the world is a Boolean what in the word is a Boolean a Boolean is a value which can either be true or false okay so anytime you want to work with either true value or you want to work with a false value so for them you're going to be working with booleans and we will get this booleans all the time because this is the essential part of JavaScript so now let's learn about booleans in this section so what do we want to do first of all I'm going to declare variable given name of light is true okay so we can write a question mark but I'm going to give a name of like it's true and I'm going to just set there to true true right here and now let me just log that to the console is true and now let me just save my file and here you can see it is now giving us the value of true right here let me just change that to like false save my file and here you can see it will now give this false so a variable is just like a bulb it can be either on or off so if it's on so that's true if it's off so there's false okay so and there's a variable but we can do a lot of stuff with there and throughout the course we are going to be working with a very I mean like throughout the course we are going to be working with the booleans all the time so let's suppose we also have a nan n a n so which means like not a number so let me just sell that and here you can see it is now currently set to a nan which means like this is not a number so I'm going to give you one more example what I'm going to do is that I'm going to declare variable I'm going to set that to number and it will be now set to 10 right here and now in this case I'm going to just remove this screw from here I'm going to even remove this is true from here as well and I'm going to just write number and plus undefined see if I just write undefined and numbers here you can see it will still gives us not a number because we are adding undefined with over numbers it will say like what are you doing hosan you are adding undefined with your numbers so this is not a number this undefined is not a number so that's why it is now giving us not a number right here inside our console okay so that was it about how we can work with the booleans and numbers but I'm going to remove that and now let me just talk to you about a truth new value and falsy value so in JavaScript we have a 4C values right here so these are the fancy values in JavaScript so I'm going to just write this Arrow so we have the policy value of phones and we have the phone C video of no we have the policy value of undefined false it just means like the fonts values and other than there will be a true value okay so we have a zero we have a negative zero and let me just remove that and we have a n a n and finally we have a quartz so empty quotes will be undefined as well so I'm going to just write so I'm going to just write a single empty codes double empty codes and also the these backpacks which you are going to be also learning empty ports let me go back and here you can see all of these values which you are seeing right now are fancy value other than that is all truthy value okay so if you see either false null undefined 0 negative zero nand or empty strings so which means like all of these values are policy value which means it will gives us the value of false but other than that if you just set that to object or array or I don't know some sort of a number or a string or something like that that all is considered to be as a truth value but this list which you are seeing right now are all a false C value I hope that makes sense so I'm going to just remove that I'm going to also even remove that as well so let me just show you the other one which was undefined so you can also set your variable to undefined if you wanted to so I'm going to just write like not uh defined or something like that you can give any name you want as a variable but I'm going to just give a name of like not Define and it will be now set to and Define let me just log there to the console not the point and by the way this undefined is considered to be like uh errored in JavaScript but you can also set the value of undefined as your variable in JavaScript that's why JavaScript is a bit weird so I'm going to save that and here you can see we have this undefined right here inside a console we can also change that to null uh and what is the difference between undefined now I'm gonna also tell you that let me just save that and here you can see it will also gives us this no right here so the difference between this null and undefined is that no it can be set by a programmers and undefined can be said by a JavaScript compiler so anytime you have some sort of error so it will just throw that error at here but if the value is not defined so in the JavaScript compiler will give you this undefined right here but let's suppose if you don't want to pour any value to this variable this one will be currently undefined by JavaScript but let's suppose if you don't want to provide anywhere you do this video like the current state of this variable do not have any value so for that you can just write null right here so the null can be said by a programmer and undefined can be said by a compiler of JavaScript so I'm going to sell that and here you can see it will now give us this null right here so that wasn't about a Boolean so now let me just give you a quick challenge you have to perform this challenge by yourself if you can do it then I'm gonna give you my solution let me just pass that right here and let me just go back come on variable piano all right so the first thing that you have to do is that we have to create a variable with the name of is Javascript programming language you just have to create this variable and store the true as a value then query variable is Javascript hard and store the fonts as a value then create a variable with the name of favorite nump like a favorite number and store the value of your favorite number inside now add your favorite number with the value of undefined and see what happened so give your best shot if you can do it that's completely okay and now it's time for me to write this coding so the first thing I'm going to do is then I'm gonna just cheat a little bit I'm gonna copy there and I'm gonna just place it right here and it will be answered to true the second thing which I'm going to do is J is hard and it will be now equals to false false there we go and then let parent number as you already probably know that my favorite number is 21 Savage and now let me just lock the console there is Javascript hot now is Javascript programming language I'm going to duplicate that and I'm gonna just write is just script are hard let me just duplicate that and my favorite number plus undefined so now let me just save this file and see what will happen so the first result it will use is the JavaScript is true why is there because we currently stored the value of true inside there so it will not give us true and we store false inside this is Javascript hard variable so that's why we are now getting this fonts right here and inside uh or I mean like inside this console log what we are doing is that we are adding undefined with the our favorite number and our favorite number is 21 and we cannot um bind or we cannot add undefined with a number so it will gives us not a number so this is what I want you to do if you did it correctly so congratulations if you didn't do it correctly that's completely okay you will learn JavaScript I mean like you will still learn JavaScript by just watching this course okay so that was it about a booleans in JavaScript so we already learned about just a basic arithmetic operator Words which are addition subtraction multiplication division and all of that kind of stuff so now let's learn about something called a comparison operators and comparison operators as the name suggests that it allows us to compare two values so it will either gives us a true value or the false value so that's how we are going to be using comparison over and comparison operator is still divided into two more categories like subcategories the first category we have is a relation or relational operator so I forgot the error here relational operators and the second one uh is divided with come on uh what do we call it equality overall so equality operators right here so first of all we are going to be learning about a comparison operator and comparison operator is still divided into two categories relational operator and equality operator so we are going to be learning about the relational operator first the we are going to be jumping into the quality over it so what I'm going to do is that I'm going to just write oh you know first of all let me just remove all of these comments from here so we are going to be learning about relational overalls and relational operators we have is a greater then then we have is a list less than then we have is a greater than or equal to greater than or equal to and then we have a less than or equal to so you have less than or equal to okay so these are all the relational operators in JavaScript um so now let's just start working with all of them so I want you to just keep that in mind or you can also take a screenshot right here if you want to but I'm going to just remove that from here so now let me just log to the console like 10 uh plus 10 in this case let's suppose if you sell our file it will give us 20 right here but let's suppose if you just remove this plus from here and if you just write a greater than right here so is 10 greater than 10 is there true or false so I want you to just give me the answer of that is there true or false so I'm going to the same way file and now let's just see what will happen this is a false because 10 is not greater than and 10 is not less than 10 because 10 is equal command then is equal to 10 but in this case if you just write um what do you call a greater than symbol so it will give us points right here so I'm going to just remove that and now let me just log to the console one more thing 10 is less than 10 right here so what do you think will be the reason for there I'm going to save my file it will still exist fonts why because 10 is neither greater and nor less than 10 right here 10 is equal to 10 so that's why we are getting the pause so let's suppose if I just write like uh I don't know 12 right here and not in here come on less than greater than 50 so here you can see it will now give us true right here anyways uh let me just log to the console one more thing which will be 10 is greater than or equal to 10 is that true or false so now let me just save there it will give this true word here why that's because here we use equal to right here is 10 greater than or equal to this 10. so that's why we are now getting this true right here inside a console so let me just write true and let me just log to the console one more thing which will be 10 less than or equal to 10. so what do you think will be the result for there I'm going to sell my file and here you can see we are now getting through right here inside a console why because 10 is less than that's true but 10 is equal to 10. so I'm going to just write true right here I'm going to send my file and here you can see we are now getting through right here so this is the relational operator in JavaScript so I'm going to just write uh relational operators in JavaScript so I'm going to comment all of them out and I'm going to just write a separator for myself like some because this code will not be compiled so that was the relational operator so now let's learn about the compare not a comparison operator but equality operators right here so what are the quality operators equality operators are triple equal signs right here and strict quantity which will check that type lose the value I'm going to also show you that in a second just word for me and then we have a um explanation mark and then double equal right here which means like trick none or not or non-equality over Raiders okay we should also check their type plus the value as well let me go back and then we have a loser quality operator so I'm gonna write lose the quality operator it is a not equality operator right here so first of all we have a strict equality operator which will check the type and the volume then we have a strict non-equality operator which will also check the type and the value then we have a loser quality operator which will just check the value but not the type and then we have this non-operate so not equal to operate so this is not equal or lose not equal to overall right here and it will also just check the value so what I'm going to do is that I'm going to just write console.l log 10 and triple equal to and 10. so if I just write there and now let me just save there and here you can see it will not use a screw right here it will check that type and also the value so what do I mean by the time it will check like is this number and is this number or this one is a number or this one is a string so now let me just store that as a string right here and now if I just store that as a string here you can see we have these two double quotes right here and here you can see this is a number and this is a string and string is also something which you are going to be learning shortly I'm going to sell my file and it will now give the sponsor right here why because that type doesn't match this one is a number and this one is a string so that's why we are now getting false inside the console but let me just remove that from here and also from here and now let me just save there it will now gives us true right here why because the types and the values are the same okay so let me just change the value let's suppose if I just change that to 20 save my file it will not use a still false right here why is that that's because this one is less than this one right here like 10 is less than 20 and we are using this trigger quality operates that's why we are getting fonts right here inside our console so let's suppose if we change that to 10 one more time and seven fine it will now give us true and that was it about um trigger quality over here but now let me just talk to you about the not equal to operate so you just have to write this explanation mark and then double equal and then hit space and 10 okay so now let me just save that it will now give the spawns right here and it will also check that type and the value in this case so let's suppose if you change that to like string or something like that and now I'm Gonna Save my file and it will now give this true right here why is that because 10 is currently not equal to this 10 right here this is a string 10 and this is a number 10 so this 10 and this 10 is not match and this 10 is not equal to this 10 why because this is a string and this is a number so this 10 is not equal to this string if you just change that to uh like so and if you sell fine it will not give response because this 10 and distance I mean like this 10 and this 10 are now match so that's why why we are now getting false and we are using the not equality operator right here in this case we are using the equality operator in this case we are using the not equality or the non equality operator right here okay so I hope that makes sense I want you to try this stuff by yourself then you understand all of that stuff a bit better I'm gonna use a loser quality over here by using double equal to signs and I'm gonna write 10 right here I'm going to sell my file it will now give us true I'm going to copy these two lines out it will now give us true why because in this case it will just check the value right here if we change the value to something else like 20 semi-file it will give us false and it doesn't matter uh if you just specify the course or not the course so let me just write a course and if I just write 10 and if it's seven point it will still give the student because it just care about the value like 10 and 10 it doesn't care about the time like whether if that's a string or a number it doesn't care about there like this loser quality over here so that's why a lot of people are not using this loser quality operator so let's suppose if you change that to 275 it will give us false if you change that to 10 so this is how the loser quality over a word I'm going to unlock the console like 10 is not equal to 10. so this is a strict loser quality and this is just a loser quality right here okay so let's just comment this line out save my file and here you can see it is now giving us pause right here it is saying that 10 is not equal to 10 well 10 is equal to 10 so it is now giving us false right here but if you just write like 20 10 is not equal to 20 yep that's true so it is now getting us true right here but if you just write 10 is not equal to 10 it will give us false and it will also not care about what we call it if you just write a strings right here cell or file it will also not care about the string as well if you change that to 20 in this case and now if you save there it will now it will not care about uh what do you call it the type but it will just care about the value so that's why a lot of people including me not use this loose stuff because I mean like these loose stuff because we use a strict equality operator and strict non-equality operator all the time so that was the comparison operator in JavaScript so inside a comparison operator we have a relational operator and we have a quality operators and uh relational operator will be a greater than less than greater than or equal to less than or equal to any equality operators are strict equal to or restrictive quality non-stick quality I mean like strict non-equality and lose equality and not lose equality operas right here so now let me just give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then I'm gonna give you my solution so I'm gonna just place these comments right here and you'll say oh my God Jose and there's a lot of JavaScript I have to write well you have to write them but it's not that much difficult so the first thing which you have to do is that we have to create write a variable with the name of first favorite number and store your favorite number inside there then create a variable with the name of second favorite number and store your second favorite number inside there then check the first value number is greater than the second favorite number check if the first Fair number is less than or equal to then greater than n equal to the second less than and equal to this very second number equal to the favorite second number using a strict quality over and um equal to a second favorite number using a lose equality over and favorite uh number is not equal to the second favorite number using a strict non-equality over and check if the favorite number is not equal to the second favorite number using the lose non-equality operator so I want you to read that through or you can also take a screenshot if you wanted to and perform this challenge it will not take that much time I promise like it will take I don't know maybe if uh five minutes or so for you I don't know so just give it your best shot if you can do it that's completely okay and here is my solution so I'm gonna just go inside a little bit and I'm going to declare my variable which will be a first favorite number and it will be now equals to 21 you already know that let's second favorite number and it will be now equals to 10 right here now let me just look to the console like first favorite number is greater than the second favorite number is semifinal true and now let me just duplicate there and change that to list and save my file false now let me just write greater than or equal to save and true let me just write less than or equal to serve and false and I'm going to now use my what do you call it uh equality operator right here so I'm going to use my console.log and first favorite number is triple equal to second favorite number semi-file it is false I'm going to comment these out for a second so you guys can see everything a bit better semifinal we have a false now let me just log to the console this first favorite number is not uh equal to by using a trigger quality strict non-equality as second or favorite number and it is now set to false and now let me just use Consular log of first favorite number and double equal to which means like use equality operator and send my file and it is now set to false now let me just lock the console first favorite number is not equal to the second favorite number so I'm going to save my point and it is now set to True right here and you can see all of the code right here you can comment this out you can comment like uh each one of them if you want to check one by one so let me just comment this line out so is Earth's number which means like is 21 greater than 10 well semi-file and that's true so that's why we are now getting true right here and then uncommon this line out then uncommon this line out and you can think about these variables just like that instead of uh first favorite number you can think about your favorite number like 21 or whatever you provide right there and then you can see this over like greater than or equal to and then you can check your favorite second number like I don't know in this case I just provided like 10 right here you can provide 7 or whatever you want to provide so uncomment all of these line out and then sell your file and check the results and then convert all of that stuff out and you can also found all of these code in my GitHub repository one by one so that was it about uh comparison over in JavaScript so then was it about a comparison over here so I'm going to remove that and now let's learn about strings in JavaScript so what in the word is a strings and why you should care about learning strings and first place so anytime you want to work with a tank so for that you're going to be using a string data type so uh in some situation you're going to be writing your own name or in some situation you are going to be writing some sort of a lot of text like this is a lot of text around in here or something like that or in some situation you're going to be writing your own HTML markup in JavaScript or and then you'll be appending there which we are going to be also learning later in this course so for that kind of reasons we would work with strings in JavaScript a string data type to be precise so what I am going to do is that I am going to write lead for its name right here and I'm going to store my first name right here and here so anytime you want to work with a string so you can either use a single course or you can use a double quotes or you can use these vertex right here and I'm going to also show you what's the difference between all of them in a second so now let's suppose if I want to store my first name inside the string so I'm going to just write a single string right here like a first single string opening tag not a tag or single string opening and then closing and I'm going to just write Hussein right here in this case and now I'm going to just log there to the console like comfort's name and I'm Gonna Save my file and here you can see we are now getting Hussein inside a console right here let's suppose if you just write alert um second come on come on second name and it will be now equals to double quotes right here and by the way when I save my file my single quotes will be replaced with these double quotes that's because of their pre-rear extension which I've been using and I'm gonna just write a web dev right here okay so I'm going to just write second name in this case I'm going to just save my file and here you can see it will now gives us this Hosanna right here and we can also change that to these backticks so these Bank text will be underneath your Escape key and above your tab key there you will found these backtex and now let me just save there and everything is working just fine so now you might be thinking like which kind of way should I use to when I'm writing a strings so you can do whichever one you like but there's just a bit of catch by using this syntax which is a um template literary syntax which I'm going to also show you in a second so this is how you're going to be writing a strings and now let's learn about a shrink concatenation so in some situation we would want to concatenate this string with this string and you know I'm going to just chain there to this double quotes right here and you would want to add both of these string into one string so how can I go about doing that so you already learned that but in case if you forgot so here's how you're going to be doing that I'm going to write that full name and it will be now equals through the first name plus the last name come on last name not last name but um second name yep second name would be fine and I am going to just lock the console this full name right here so I'm going to save my file and here you can see we are now getting this hosen web dev right here if you want to spec it the middle so you can provide a space right here and save your file and here you can see you got your space right here but if you don't do just like that so for that you have provide Space codes space and then plus one more time so it will also give you a spare so I'm going to sell my file and here you can see it will now also give you a space so this process is called a string ignition so we are storing this Horizon value as a string inside this first name variable then we are storing this web dev as a string inside the second variable and inside this third variable which we have like a full name variable we are storing this value and I am going to just remove this from here I'm going to just replace it with one space and I'm going to provide a space right here and we are just adding this first variable with this second variable so it will give us the value of full name which will be Hussein space web dev right here so I'm going to save my file and here you can see we are now getting hosen web dev so this process is known as a shrink concatenation but we have a lot of ways to do this string concatenation which I'm going to also show you in a second so I'm going to just remove there and I'm going to just write a 1 of concatenation you know what I'm going to declare a variable I'm gonna also give you the name of like full name right here and I'm going to just write first name then don't concat right here con care method and inside this concat method I'm going to just provide the last name right here not local storage but the second name I'm going to copy then I'm going to just place it right here so what are we doing first of all let me just go back so what are we doing first of all we are declaring these two variables and we are storing these values inside there and in this case we are doing a concatenation you can think about this concave method this is something called a method you don't have to worry about what a method is at this point we are going to be learning about method in a very great detail but you can think about this method is just like a plus symbol which we saw a second ago just like that so this concare method will allows us to join or combine both of our string variables right here so what are we currently doing we are concatenating the second name variable inside or not inside but with this first name so I'm going to log that to the console then you will see the result so I'm going to use full name and now if I sell there and here you can see we are now getting this whole Zen space and then web dev right here then it's because of this concat method so that was our first method which we just saw okay so what I'm going to do I'm going to comment this line out and I'm going to also comment this line out now the next thing which you have to learn is something called a pen so how we are going to be appending a new value to our existing values so I'm going to just write first name variable and in this case here you can see inside first name variable we are storing Hussein right here and in this case what we are doing is that we are going to be appending a new value to that string so I'm going to use plus equal not just equal but Plus equal and then something else right here so I want to provide this something else text with this Hosanna right here so essentially what I'm doing is that I'm going to be just cutting there from here and I'm going to just place it right here so this is what I wanted to do so if I want to provide this text or append this text right here so for that I'm going to have to write it right here and then we're going to be using this plus equal to sign and it will just successfully append that data so I'm going to use first name first name there we go I'm going to save my file and here you can see we are now just appending this something else to this first name variable right here so that's why we can see who's in and something else so we can change that too [Music] come on YouTuber or something like that I'm Gonna Save that and here you can see this how we are going to be appending a new text to the existing ones so I'm going to just console I mean like comment this both out and then the next thing which you have to do is that we can also check the length and which is also very important and very simple so we have this first name variable and if you want to check the length of this first name variable so for that we can use just Dot and then length and if I sell my file and here you can see the length is just four characters right here so we have one two three and four okay so that's why it will give us this length right here so the next thing which you have to do is that we have to learn about the cases so I'm going to just write four cases there we go and cases are also very important and useful so I'm going to lock the console this first name variable I'm going to sell my file and here you can see this is now I don't know whatever case you want to call there but the first layer is uppercase the second one is lowercase the third one is uppercase and then the last one is lowercase so if you want to make all of these sticks like a lower case so for that you can use just dot two lowercase and then call there right here so just for these opening parenthesis and closing parenthesis so it will just make it for a little lower case so I'm going to save my file and here you can see we are now getting this hose in at the lower case so if you want to make that to a upper case so for that we can use two upper kiss and then just call there I'm gonna sell my file and here you can see it will now just make it uppercase right here so this is how you're going to be making it as a lowercase and this is how you're going to be making it as upward case so I'm going to comment both of these out as well and now I'm going to just write it 5 and slice so now let's learn about a slice method in a string so we are going to be learning about a slice method in arrays as well but in this case we are going to be learning it in strings as well so I'm going to just write a first name and then what I'm going to do is that I'm going to just write dot uh oh you know what yeah I'm going to just write slice right here and if I call there so here you can see the definition so slice it will take a starting point and it will take a number is a starting point and it will also take an end and like the end point and it will also take a number as endpoint right here and what is this method will do for us the index to the beginning of the specified portion of a string object and it will return a section of our string right here so this is what a slice will do for us in a string so what I'm going to do is that I am going to just specify the start and comma the N right here so I'm going to just write the start will be like um zero index base so anytime you want to grab a value from your string so the first uh letter will be starting from the 0 in this case like it will be a zero index base so this one will be zero this one will be one this one will be 2 and this one will be 3 right here and then I'm going to just provide a comma and then the ending point will not be a zero index base ending point will be just like one so this one will be one this one will be two this one will be three this one will be four okay so I know it's kind of a weird this last method is weird and it confuses me all the time so this one will be a zero index best and this one will not be a zero index so let's suppose if we just want to get this H right here or H right here so for that we are going to be using one so if I just provide one right here and I'm Gonna Save my file it will now gives us H right here why because the first starting point is the zero index pair so we are getting the zero index base and from where you want to go through so you just want to get through the one so here you can see we are now getting the H word here but let's suppose if you want to get through like this x right here so we are going to be writing one two three so I'm going to just write read right here so I'm going to send my file and here you can see it will now gives us h u x right here but let's suppose if you want to start from this u i mean like from this U and we want to go to this end right here so for that we are going to be using one and we have to write 4 right here so I'm going to send my file and it will now gives us u x and right here so this is a slice method you can explore that by yourself but my recommendation will be to not spend that much time in a slice method then slice method can be used in strings and also something called arrays which you are going to be learning later in this course now let's learn about the split and the join method so as the name suggests their split will allows us to split out our strings and join will allows us to join it back okay so that was just a quick definition of the split in the joint so I'm going to just write like a first name right here and I'm going to just use a split method right here and here you can see uh it will take a lot of separators and symbols you don't have to worry about this syntax split a string into substring using the specified separator and return them as an array you don't have to worry about what array is but in this case I am going to just write a split and I am going to just specify a quotes right here so if I just provide a course no space is nothing so if I sell my file and here you can see it will now gives us an array right here so we have a 0 1 2 3 and this is also a zero index base so it will just split out over uh what do we call our strings to array so this is the syntax of array you don't have to worry about that for now and it will just split out over string 2 array but let's suppose if I provide a space right here and if I send my file it will just make it one item inside that array I know that's confusing you know you don't want you don't have to worry about this split method but I'm just showing you like there is a spare method once you learn about arrays then you can come back and see what a split method is but I just kind of want to show you right now and then we have a join so we can also write a join method and it will also take a separator as a string a string used to separate one element of the array from the next in this resulting string if omitted the array elements are separated with a comma so I'm going to just specify the join method and I'm going to just provide space right here so if I save there and here you can see it will just gives a score a result and it will just join it back in this case it will make it as array and this one will join it back as a string but we can also provide a lot of things like if I just put a dash and if you sell or file and I don't know why is that dish not working I guess that's because we didn't connect these two so that's why but anyways you can also provide different kind of stuff by using this join method but in this case we are just working with a one string so that's why we are not able to do that and you don't even have to worry about that stuff as well so that was it about a split and join in some situation you would need there but in the majority of a situation you won't and then I'm going to use 7 and includes it will gives us a Boolean either true or false so I'm going to use um first name and then does it includes uh one does it includes I don't know I'm going to just search for X maybe I'm gonna just search for X in this case I'm going to write a chord and I'm going to use uppercase X so I'm going to save my file it is saying true why is that because this first name includes this x right here so here you can see we have this x right here so that's why we are getting true but let's suppose if we just write instead of uh x view just write w any V7 there it will not give us false so it will just gives us uh Boolean values like either true or false and then finally we have come on finally we have a trim method rim and trim allows us to remove the empty spaces right here so I'm going to just write first name and I am going to Port a lot of spaces at the end like a lot of spaces right here so I'm going to just write a lot of spaces at the beginning and also a lot of spaces at the end so I'm going to just save my file and let's just see so here you can see we have a space at the beginning and we have a special thing right here so if you want to trim out this space so for that we can use Dawn uh trim okay so I'm going to sell my file and here you can see it will trim out all of these empty spaces from here okay so that was it about this stream method and all of that stuff so now let me just show you how you are going to be working with the backticks in string so what I'm going to do is that I'm going to write a lot of descriptions so let's suppose that um DC SC would be fine and I'm going to just use a double quotes right here this is some random and then hit enter text right here okay so if I just write there and now let me just log there to the console like see come on we are not even able to do that and I'm going to just write the ESC and it really gives us a beautiful error it will say like you are not able to write a multi-line string by using these uh double quotes or a single quotes but if you want to prevent that from happening so for that you're going to be using these backticks right here so I'm going to use these backticks and our problem is solve but the thing is that it will write it as it is so I'm going to just save that and here you can see it will say like this is some random and then it will give us this text in a new line it will include all of these spaces and all of their stuff so if I just write like one two and something like that I'm gonna sell my file and here you can see it will also include these spaces and it will make it as we write it like so and there is one more beautiful thing about that we can also appear new variables so let's suppose uh this one will be our full name right here so let's suppose we have alert our first name and we just write a Zen right here then we have let last name and we just write a web dev right here so in this case we can append this first name and last name right here by using these back text right here I'm going to explain to you what this template literal will do for us later in this course but not right now so I'm gonna just write a dollar sign and then the opening curly brace and then the closing curly brace and here we can write our first name right here then provide a space and then I'm going to just write a last name right here so if I send my file and I'm gonna have to copy this full name I'm gonna press right here so now my file and here you can see it will now uh write this was in web dev right here and we can write anything right here and if you save there and everything will work and if you just change there to like uh I don't know Alex and let me just change that to Merson I'm gonna sell there and here you can see it will now change that to Alex Merson or something right here okay so this is how we can use the back text and this is how the vertex will work for us I'm going to remove this coding from here and now I'm gonna give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay but you have to at least give it a try Okay and then I'm gonna give you my solution so I'm gonna place this description right in here I'm going to copy this variable plus plus Factory and I'm going to place it right here so the first thing I want you to do is that I want you to create a favorite actor first name variable and store your favorite actor first name then the launch name then concave the first name and the last name then capitalize the name of their full name and yeah and then I want to write this message by using this template literal like my favorite actor is that actor here you have the specified actor name and then say something about their favorite actor like I don't know if you like this I don't know just write something just write something good about your favorite actor like why you like that actor and now append this message to your favorite actor like his best show is his best show right here so in my case it's a Silicone Valley so I'm gonna append there but in your case if if you like a TV drama or I don't know it depends on your favorite actor so you can just specify his or her um best show or film or anything like that anyway so I want you to give it your best shot if you can do it that's completely okay and here is my solution so what I'm going to do is that I'm going to just write let favorite actor first name and it will be now equals to and then let favorite actor last name will be now equals to kill foil and then I'm going to just write alert full name and it will let me know equals to ferrator first name plus favorite actor last name yep and I'm going to log that to the console like full name I'm gonna send my file and here you can see it will now use a spectrum gilfoil right here so I am going to have this provide a space right here I can do it up above or I can do it that way and it will work just fine and now I'm going to write a perfect case in this case and I'm gonna just make it uppercase like a full name dot two come on two upper not lower two upper case and let me just sell them and I'm going to copy this uppercase variable and I'm going to just place it right in here semi file and here you can see my name is now uppercase not yeah my name is uppercase let message uh and write this message like uh my fail right actor is and then the actor name which will be uppercase right here and then comma uh and you know I'm gonna just log this message to the console save my file and my favorite actor is Bertram Gill foil and now here we have to apparent something to this message so a message plus equals to and I don't know uh yeah I'm gonna just write like as best TV show is silly con really okay the edible ey there we go and now I'm going to lock the console this message save my file and here you can see my favorite actor is back from guilfoil in uppercase his best TV show is Silicon Valley or one silicon really anyway so that was it about the strings and if you did this challenge by yourself so congratulations if you didn't did it by yourself so congratulations one more time because you are currently at least learning something and you are trying some parts those are about a string so now let's learn about a type conversion in JavaScript so how we are going to be converting a value of one time to another time so let's suppose if you have some sort of a money I'm gonna score like I don't know 50 will be fine and if I log there to the console so you already know what will be the results I'm going to save my file and it will now give us 50 right here inside a console so now if you want to change this type like let's suppose I'm gonna uh change that to like a string and now if you save there and here you can see it will log uses a string type right here we can check the type so we can check type off and it will give us the type of this value or this variable right here so type of will be string in this case if you just write um 50 without any quotes or anything like that so if you save it and here you can see from log uses a number but now I'm going to wrap it as a string and the type is now set to string right here so now let's suppose if you want to convert this string of number with just a number so how can I go about doing that well for that we can do a lot of stuff so I'm going to just write convert string to number so I'm going to write my money and my money will be now equals to parse and in this case and we are going to be just passing our money right here so if you sell there and here you can see the type is now set to number and I'm going to just write console log one more time also log of money semi file and here you can see it will no print this as a number and it will also give us the number I mean like the type of number right here okay so the time will be number because we convert that to a number so that's why we are seeing number inside our console so this is the first way to convert a string number uh to just a regular number right here so I'm going to just write money and this is a shorter way for writing that or send and all of that stuff and I'm going to just write loss and money so it will also convert it to a regular number so I'm going to sell my file and here you can see 50 and also the type will be set to number here if I just comment this line out and check it the time is string and it is also giving us the string uh number right here but if you uncomment this line out sell or file and here you can see it will now give us this number in a kind of a purple color and it will also show us this number right here the type of number so this is the second way the third way and I guess this is going to be the final way will be to use The Constructor number Constructor is something which we are going to be also learning throughout the course in a very great detail but I'm going to just provide my money right here I'm going to send my file and here you can see the type is still set to number and we are getting this number right here so that was a three way to convert uh what do you call it a string of number and we're going to be getting the in some situation from like uh I don't know from apis and all of that kind of stuff but I just kind of want to give you the test of that and you don't have to worry about the apis and all of that kind of stuff so now let's learn about how we are going to be converting number two string okay so how we are going to be converting a number two or string so what I'm going to do is that I'm going to just remove their course from here seller file and here you can see it will just give this number and also uh 50 right here so I'm going to just remove this stuff from here and now let's learn about how we are going to be converting a number to a string so we are going to be just writing like uh I don't know I'm gonna write like money my money will be now set to money start to string and by the way this is also a method which will allows us to convert a number to a string or anything to a string by the way I'm going to sell my file and here you can see it is now giving us 50 and it is also giving us the type of string right here okay so that's that I'm going to cover this line out as well and I'm going to use money in this case and I'm going to use a string Constructor right here and I'm going to just pass my money right here I'm going to send my file and here you can see you're not getting um the same result right here in in this case as well so now let's learn about how we are going to be converting a string value to our decimal so you don't even have to worry about all of that stuff but I'm just showing you how you're going to be writing uh there later in some situation if you need that so you'll already know all of that stuff so convert um string to decimal okay so how we are going to be converting a string to a decimal I'm going to write some sort of a decimal as a string like 50.3245 or something like that so this is a decimal value but it is wrapped inside this ring right here so what I'm going to do is that I'm going to convert that to a regular number or a decimal to be precise so I'm going to use my um whatever you call it I'm going to use my money right here and money will be now equals to pause load in this case and I'm going to just parse my money right here so if I sell my file and here you can see it is now giving us a number and it is a number if I comment this line out and save it and here you can see it is string and it is also giving us this value as a string so this is how you're going to be doing uh what do you call it a type conversion uh in JavaScript and version there we go semi-file and that's there all right so now let's learn about control flow in JavaScript so what I'm going to do is that I'm going to change that to O2 and by the way all of the code will be available inside my GitHub repository and I'm just changing the name because we started a new section and I'm going to just give a name of like control load okay and inside this control flow we have this f.js file and index.html file and everything is working the way we expect him to it but I'm gonna have to stop my server because I changed the name stop the server and I'm going to right click on M and open it with the live server one once again so I'm going to just remove that stuff from here I'm going to also remove uh yep I'm going to just hit F12 to open my console and let me just push all of their stuff sideways oh you know that's fine that's totally fine let's just go back and that's cool all right so now let's learn about a control flow in programming so in every programming language there there are some ways to control the flow of your programs and that includes if statements instruments while Loops do while Loops fold switched elements and cases and all of that kind of stuff which we are going to be also learning in JavaScript as well okay so in some situation we will have two direction and we would want to check the condition if something is true go on One Direction if something is not true go on another Direction so now let me give you example like uh let me just write a little bit of pseudocode then you'll get to know what I'm talking about if you have money like if you have uh money so what do you want to do just print to a user log um why um some stuff or buy um groceries or anything like this I'm gonna just try to buy some stuff if the user does not have any money so what do you want to print to the user um bring some money dude okay so if the user is like this is just a pseudo it will not work by the way and we are going to be also writing this course so it will work so if the user have some money so the user can buy buy some stuff if the user don't have any money whatsoever so you just want to print to the user like you're broke dude bring some money okay so this was just a silly example by the way and you can also write it let me just give you one funny example um you know what there was this awful example which came to my mind I'm not going to give you any example but now let me just write a little bit of real code then you will get to know what I'm talking about so the first thing I'm going to do is that I'm going to destroy if and then some condition if that condition is true so what do you want to do we just want to print this result right here if that condition is not true so what do you want to print we just want to print the user else if and we just want to pour another condition right here and if that's also not true so then finally we just want to print to the user some sort of a message so we are going to be first forwarding the if reserved keyword then we are going to be writing parentheses right here like opening parenthesis and closing parenthesis right here inside these parentheses we are going to be placing over condition right here if this condition is true so this code will work not this one not this one this one will be ignored and also this one will be ignored if this condition fails then it will jump to this condition and it will check if this condition is true print this code if this condition is also false and this condition is also failed so then finally it will jump to the else block right here and it will just print this code right here okay let me just say that one more time so it will stick to your mind if this condition is true then print this result if this condition is false jump to this ends if block right here and we can write as many else if conditions as we want okay so then it will jump to this condition right here then check if this condition is true print this code if this condition is also not true then finally jump to the else block part here so now let me just write a little bit of code then you'll get to know what I'm talking about so what I'm going to do is that I am going to just write it like um I don't know let a equal to 10 right here and I'm going to also put a comma and let me just declare a b but you know what that was a horrible idea I'm going to use alert b and it will be now equals to 20 in this case okay so what I'm going to do is that I'm going to just write a little bit of conditional statement for myself and I'm going to just sorry like if a is greater than b so what do you want to do we just want to log to the console like uh a is greater then B okay so I'm Gonna Save my file so so now let's just see is this condition true or false so a is holding the value of 10 right here and B is holding the value of 20 right here so is a greater than b so is it true or false so you know what let me just try it I'm going to just write a is greater than b so that's false condition so this one will not work okay so if I just write like instead of 10 if I just write 100 right here and now if I send my file okay so it will now give us like a is greater than b right here I'm gonna have to remove that it will give us a is greater than b right here Y is that because this condition is now certainly true so this code will work if this condition is false so this code will not run so let's suppose if I just change that to like I don't know 10 right here if I sell there and here you can see nothing is showing right here why because this condition is false because a is not greater than b a is less than b in this case okay so that's why we are not able to see anything right here if we change that to like 100 or anything like that and if it's several files so now in this case the a value is now greater than b value like a is 100 and B is 20. so obviously 100 is greater than 20 so that's why we are seeing a is greater than b okay so this is our first condition right here so now let me just change that to 10 right here one more time and what I'm going to do I'm going to sell my file and here you can see we are not able to see anything right here I'm going to use else if uh block right here and then here we're going to be passing one more condition so what I'm going to do I'm going to write a condition in a second but I'm going to have to write a curly braces like opening curly brace and a closing curly brace one more time okay and you can by the way write all of these conditions just like that if you wanted to but you have to write a condition right here and the syntax will look like there okay so I'm gonna have to remove all of these spaces from here and now let me just write some other condition like um a is less than b okay so I'm going to just log to the console um a is less than B I'm going to save my file and here you can see it is now giving us a is less than b why is there why aren't we getting this a is greater than b why we are getting this a is less than b well because once our code is executed so it will first of all check this line out then it will jump to this line it will store the 10 then it will store the 20 inside memory then it will check if a or to be precise if 10 is greater than b no 10 is not greater than uh 20 to be precise is 10 is greater than 20 so no 10 is not greater than 20 so this condition fails it will not run this score then it will jump to this new block right here then it will check this condition is 10 less than 20 yeah that's true 10 is less than 20 so it will now gives us this result right here like a is less than b or 10 is less than 20. so here you can see it is now giving us a is less than b right here and finally if all of the condition is false and by the way we can write as many as lcf blocks as we want we can write it like a thousand times if you want to but this is just a simple example I want to give you and finally if this condition is spelled if this condition is also false so then finally we have to destroy the S block right here and here we are going to be writing some sort of a chord which will run and by the way currently we are just writing these uh console logs right here like console log here console log there console log at the final statement but later we are going to be using like a document object model or Dom for sure we won't even learning all of that stuff later but for now I just kind of want to give example of like how you are going to be controlling the flow of your program okay so what I'm going to do is that I am going to just write like a is equal um to B okay so I'm going to just send my file and I am going to just write um 20 in this case as well I'm going to send my file and here you can see it will now gives us a is equal to b y is there because this condition is spelled like 10 is greater than um 20 that will fail then we'll check like a uh I mean like 10 is less than 20 this condition is also fails like 20 is equal to 20. so here you can see finally we are getting this result right here like a is equal to B like 10 I mean like 20 is equal to 20. so then here you can see we are now getting a is equal to B so that was the first example I want to give you but now let me give one more example so what I'm going to do is that I'm going to just um time example so I'm going to declare variable given name of like time and it will be now set to like 10 in this case and I'm going to just write a condition for that if the time is less than and right here so what do you want to do you just want to print a user like I don't know uh I'm gonna just write I'm going to declare one more variable let greetings and it will be not set to anything so you would just want to agree to the user the readings will be a good more name and I'm going to also log there to the console uh greetings okay so this is going to be the first condition else if if that fails so then we wanted to check like time is less than 20 then you want to just uh copy that code and we just want to change this to um good day or something like that and then finally if there's also false so then we want to just greet the user and we will say um good evening okay I'm going to send my file let me go back so you guys can see everything a bit better now time is set to 10 and here we are checking if time is less than 10 so you will just want to print the user like good morning so this condition is already false why because here the time is equal to 10 the time is now less than 10 so this condition fails and if the time is less than 20 so it will now gives us like good morning if none of this is a case and finally we are going to be getting like good evening word here so if you check it here you can see we are now getting this good uh I mean like good day right here inside a console wines there because we set the time to 10 and here we are checking the time is less than 20 so we just want to print the user like good day okay and yeah and let's suppose if I just write like I don't know um time is less than so I'm going to just write like five and I'm Gonna Save it and here you can sit along gives us like good morning right here and if you just write like uh I don't know 50 or something like this seven or five and here you can see it will not give us a slide good evening right here so this is something we are going to be controlling the flow of our program by using a conditional statement and all of these if and else if and all of that is score a conditional conditional statement there we go conditional state state E Mills there we go so that was it about a conditional statements and my job is done and now it's time for you to perform a challenge and I want you to do it by yourself spend a little bit of time if you can do it then I'm gonna give you my solution I'm gonna place these comments right here SC h-a-r-s-c there we go all right so the first thing I want you to do is that I want you to create a variable with the name of password and store nothing inside there and then if the password is equal to add then print welcome if the pencil is less than or equal to add then print like pencil is too short if the password is greater than or equal to add print uh two long pencil and password should be add characters and if all fails print please provide a pencil right here so give it your best shot if you can do it that's completely okay then I'm gonna give you my solution and here is my solution so I want you to pause the video and anyway so I'm gonna now give you my solution alert password and we are not going to be storing anything inside there and here if password is equal to end so what do you want to do we just want to print to the user like welcome right here okay so yeah this one will not work if you sell a file and here you can see okay my computer just jammed and here you can see nothing is happening right here why because the password is not holding any value and the password is undefined in this case and here we are checking if the password is equal to n characters or add to be precise then just print a welcome so pencil is set to nothing that's why we are not seeing anything okay so then we are going to be checking else F and we are going to be writing like our password is greater than or equal to or you know not greater than or equal to but a less than or equal to eight character so what do you want to do I'm going to just lock the console like answer is too short okay so if the password is less than or equal to air character the password will be shown else if the password is greater than or equal to eight character so what do you want to do we just want to print to the user like um on not pencil but two long transfer and also um password should be come on should be and Erectors there we go and finally I'm going to just write the else plans and lock the console um please provide a password right here I'm gonna go back and this is how currently things looks like right here so we are first of all checking if the pencil is equal to add characters so print welcome to the user if the password is less than or equal to add characters print like pencil is too short if the password is greater than or equal to air characters print the user like too long pencil and password should be add characters otherwise if none of the condition matches we just want to print to the user like please provide a pencil right here okay so what do you think will be the result so I want you to pause the video and tell me what will be the result if I save my file and check it out here you can see it is now giving us please provide a password because in this case we didn't specify any password whatsoever so that's why we are not getting anything and it is saying like please provide a password so let's suppose if I just provide a characters on maybe nine characters or something like that so you know first of all let me just write add characters so I'm going to just save my file and here you can see it unlock users welcome because our password is ADD characters or add to be precise we are not getting welcome right here let's suppose if we just poured lower than uh airport here like five or something so it will Now Pronounce cancel is too short so I'm going to save my file and like password is too short right here okay and let's suppose if I just put something greater than it and send my file and here you can see it is now saying it is giving us two outputs right here two long password and password should be add characters right here okay so that was our simple program that we built by using a conditional statements in JavaScript and I hope you learn a lot in this conditional statements once I learned conditional statements in programming then I get to know like yeah programming is something anyway so that was the first way to control the structure of our program and in the next section we are going to be learning about switch terminals in JavaScript I'm going to remove all of this clothing so now let's learn about the switch statements in JavaScript so a switch statement worked the same like exactly the same like even else there man but the syntax is totally different from FNL statements so it will also allow us to control the flow of our program so this is another way to control the flow of your program okay so how the syntax will look like first of all we have to write a switch result keyword then we have to write our opening parenthesis and the closing parenthesis and inside these parentheses we have to provide our expression right here then or opening curly brace and closing curly brace and then inside these curly braces here we are going to be passing or cases right here so if for case is true then what do you want to do we just want to print some sort of a result and then we want to break out from this case right here and then if that case is not true we have to create another case and the step will go on and on and on okay so we have to print some other code and break out from that case if that's not true so this is just a basic syntax of a switch and cases looks like I'm going to delete this sort of core from here you know I'm going to delete it I'm going to just write X in this case and I'm going to store the value of 0 right here and now in this case we are going to be using our switch statement right here so we have to first forward this switched wizard keyword uh what did I do and then here we have provided our opening parenthesis and closing parenthesis and inside these parenthesis we are going to be providing our Expressions so in this case we are going to be passing this x right here which is holding the value of zero string right here okay and now let me just go inside there and here we are going to be writing our first case and we are going to be checking if the case is set to zero so what do you want to do we just want to write some sort of a text right here so I'm going to write uh live text and it will be not equal to nothing over here currently so I'm going to just write like um 10x will be now set to off okay off like so and I'm gonna also break out from here I'm gonna go back hit enter now let me just write one more case if that's not true so then jump to this case one right here then we are going to be just writing thanks off uh on in this case and I'm gonna also break out if that's not the case so then finally this is going to be or else Clause right here so we are going to be writing our default case in our default case we just wanted to print a user like no value oh right here so I'm gonna just send my file go bank and this is how currently things looks like we are first of all providing our expression right here then we are checking the first case if the case if the case is zero so we just want to print to the user like text is off uh or you know what bulb would be oh so I'm going to just write b u l b u l b there we go so baby off if the case is zero so orbital will be off if the case is one so or bulb will be on if the case is nothing so we just want to write like no value or something like that okay so I know this is a horrible example I'm going to give you a real world example in a second but this is going to be just for demonstration purposes so I'm going to save my file and here you cannot see anything because uh this is a string I'm gonna have to sell there oh we are not console logging anything so that's why uh I'm gonna have to hit enter right here and lock the console just this bulb right here so that's why you wouldn't able to see anything inside our console I'm going to save my file right now and here you can see what bulb is now set to offered here if you want to make it on so you would want to write one seven and here you can see we have on right here and if you just provide something else like uh I don't know 10 maybe I'm going to send my file and here you can see it will not give us like no Value phone right here so if you you want to refactor this code to FNL statement so you can totally do that but now let me just give you one more example of this switch and cases and then it will be time for you to perform a challenge so what I'm going to do is that I am going to declare a variable given name of like dang and I'm going to just store one day in this case Monday for now and I'm going to use my switch and cases right here so I'm going to just pass my day as expression and here I'm going to just write my case if the case is set to Monday uh Monday so what do you want to do we just want a lot to the console like today is Monday okay and then we want to break out from this um whatever color this turbine right here then we want to write another case and if the case is Tuesday uh use day t-u-e-s DIY there we go and then we want to just lock the console today is to use uh there we go and now I'm going to just write break right here let me just write one more case right here and Wednesday and I'm going to just write console.log today is Wednesday and break out from there kiss one more time and I'm going to write use a day in this case and lock the console today is Tuesday and let me just write a break right here uh I'm gonna have to go back so you can see everything a bit better anyways I'm gonna just take my time let me just write my case one more time such array let me just write Saturday lock the console today is there you go and break out and then finally we have a case of Sunday and I'm going to look at the console like today is Sunday break out uh and finally we have to just write a default statement so default the user specifies something else so we just want to print the user like um don't know what uh day is today come on don't know what day is today so I'm gonna just send my file go back and here you can see we just write a lot of statements right here so first of all we just declare variable given name of like day and we store Monday inside this variable and then we just write work statements right here if the case is set to Monday just print your user like today is Monday if the case is set to Tuesday just print a user like Tuesday Wednesday Thursday Saturday Sunday if none of the case matches then finally just show the user like don't know what day is today so currently what do you think will be the result if I just save my file and and I want you to tell me the result where you think will be the result I'm going to sell my file and today is Monday right here if you change that to like Tuesday I'm gonna copy there and I'm going to just place it right here today is Tuesday today is Thursday like so and today Saturday and everything will work right here so if I just read it Sunday and save it and today is Sunday right here so you can provide more logic than there but this is just a basic example to teach you how to work with this uh what do we call it a switch and cases and all of that kind of stuff let's suppose if I just provide um instead of Friday if our idea why if I just start Friday uh okay I just missed it right here uh Friday I guess I I guess I didn't specify the Friday right here Monday Tuesday Wednesday Thursday Saturday Sunday and I've got to include the Friday okay so I'm gonna have you know I'm not gonna add Friday because it will waste a lot of our time so you can provide party if you wanted to just duplicate one of the case and just write a Friday anyways so here if I just write like uh I don't know instead of Tuesday I just write Tuesday and sell my file and here you can see it will not use us like don't know what uh day is today or don't know what day that you specified or something like that anyways so this is how you're going to be controlling the flow of your program by using a switch in cases and now I'm going to give you a challenge and you have to perform this challenge by yourself if you can do it that's completely okay and then I'm gonna give you my solution let me go back and I'm gonna just place it right here so the first thing I want you to do is to create a variable with the name of fruit and store banana inside there and check if the case is banana print banana is good if the case is orange print I am not a fan of orange if the case is Apple then print like how you like them apples and the default case will be like I have never heard of that fruit which you've been talking about so I want you to perform this challenge by yourself if you can do it that's completely okay come back watch the solution and here is my solution let me just swim in a bit so I'm gonna just declare a variable given enough like fruit or fruit yeah fruit would be fine singular and I'm gonna just bless banana like so and then use my switch statements I'm gonna pass my period inside there let me just check the case of banana and I'm going to just lock the console like banana is good and let me just break out and now let me use case of orange okay lock the console like I am not a fan of orange or oranges or something like that let me just break out as well let me write a case one more time and apple okay lock the console how you like them apples Christian Breakout and finally we have our default yes I'm going to lock the console like I or you know double quotes if are never heard of that fruit okay go back semi-file and this is how the current code will look like first of all we are declaring a variable with the name of banana then we are checking then we are specifying their fruit variable as expression to the switch statement right here and we are checking if this case is true then print like banana is good if this case is orange I mean like if that if the user provide banana so just print like banana is good if the user provides orange then print like I'm not a fan of orange or orange juice oranges come on there we go and then finally uh if the user provide Apple then you just have to write like how you like them apples otherwise just print your user like I've never heard of that heart actually a r b of their fruit so I'm going to save my file and here you can see it is now giving us banana is good if I just copy that orange and I'm gonna just place it right here save my file I'm not a fan of oranges let me just copy these apples I'm going to place it right here or a pull to be precise and here you can see how you like them apples and if I just pour it like I don't know um mango or something like that let me just sell that and here you can see I have never heard of that fruit in my life anyways so that was a switch in cases in JavaScript and the next topic we are going to be learning about four Loops in JavaScript so now let's learn about a four Loops in JavaScript so word in the word is a for Loop and why you should care about that so for loop loop variable in programming in general in some situation you want to repeat a block of code a lot of times so we can copy and paste them because then we are going to be violating the famous rule of programming which is do not repeat yourself or try to be precise Dr y d r y don't repeat yourself so now let me just give you example of don't repeat yourself and then we are going to be refactoring that code by using a for Loop so let's suppose if I ask you to print like I don't know 100 console logs and which will say like uh hello Hussein okay so if I give you a chance to print this console log of like hello Hussein or maybe your name like 100 times or maybe thousand times so the first way is you are going to be holding your mouse and just selecting that and then right click on it I don't even know how to copy that okay I'm gonna copy there and then hit enter and then right click on M and then pass it right here the second way is to just use Ctrl V control e control V all the time Third Way is to just hold alt and shift and down arrow so it will just uh like duplicate your code all the time but look at this code like this code is first of all taking a lot of time to write and the second thing is that we are repeating our code and our code is looking more than clutter and in some situation trust me we would want to do the same thing like that I mean like not exactly the same but in some situation we would want to repeat our code like that but for that instead of repeating our code we can use four Loop right here and for Loop will allows us to repeat our code a lot of time and it will also allow us to iterate Uber through a lot of data and filter our data and we can do all our sort of stuff with the full Loops which I'm about to show you so how the syntax will look like first of all I'm going to remove there so how the syntax will look like first of all we have to write a four result keyword then we are going to providing the opening parenthesis and the closing parenthesis and inside this parenthesis first of all we are going to be providing our initial expression right here then we are going to be passing our condition condition there we go condition there come on SO ndit ion then we are going to be writing either increment or decrement expression so increment expression or the decrement expression exp r e double s i o and there you go so this is how the for Loop syntax look like so we have first of all look for result keyword then or opening parenthesis and closing parenthesis then here we are going to be passing our initial expression here we are going to be declaring our variable to be precise then we are going to be checking that condition so as long as that condition is true it will just repeat itself a lot of time like if you just write like 5 500 or I don't know how many time you want to repeat your code as long as this condition is true it will repeat yourself and then either the increment or decrement operator we are going to be writing it will allows us to break out from this condition it will make this condition false so if you make this condition false so or Loop will stop so this is just a pseudo code and the theory of for Loop and now let me just write a little bit of code then you will get to know what I'm talking about so I'm going to just remove the pseudo code from here and I'm going to just write a full result keyword and by the way if you're using original story you quoted it so I want you to just hit the down button and here you can see that box right here like that kind of a home or laptop or something like that I'm going to click on there and this is the for Loop syntax is it looking horrible yeah it is yeah and nowadays we have a lot of alternative to uh iterate Uber through our data and to repeat our code a lot of time we don't even use for Loops that much but it is still a good skill to have in your belt so what I'm going to do is that I'm going to write a full result keyword then our parenthesis right here and or initial expression will look like this I'm gonna write let I equals to zero and this is our initial expression right here you can give this variable any name you want you can give like index you can give idx you can give banana if you want to but the convention is anytime you see a full loop you would either see the I you will see the index or you will see the idx but for me I'm going to use I and probably you will too and then we have to specify our condition right here so I'm going to just use like I as long as I is less than or equal to 5 this code will run again and again and again and so finally we have to provide some sort of a code to make this condition false otherwise this code will run again and again for Infinity so what I'm going to do is that I'm going to just write I plus plus right here in this case and you already know that it was just increment it by 1. so once this I reaches to 5 and it will just increment it right here so our Loop will stop so what I'm going to do is that I'm going to just write hello uh word or something oh you know I'm not gonna oh yeah I'm gonna just sorry hello world right here and I'm gonna just put a comma in there and then specify my Index right here or my I variable right here so I'm going to just sell my file and now let me just check and here you can see or Loop will start from 0 because here we specify 0 right here and then it will run through 5 right here and once it reaches to 5 it will just increment it and or Loop will stop working and now you can also provide one right here and you can just remove that equal to sign and now if it's silver file and here you can see how you have to provide this equal to Sun my band I'm going to have the seven and here you can see our Loop is start from zero I mean like from one through five right here so you can like specify 500 if you want to Let's suppose if I just I don't want to go with that much crazy but I'm going to just pour 100 right here I'm going to sell my file and here you can see it is now giving us 100 right here and here you can see this world it will print this hello world all the time and yeah that's looking powerful and very crazy I know the syntax is looking a bit awful but if you practice enough and you will get there you can provide anything you want like you can provide um your name like Alex you can write whatever you want to write right here okay so in this case let's suppose if you just want to get these numbers so I'm going to just save my file and here you can see it will just give me all of these numbers right here okay so this is how we are going to be working with the loops in JavaScript so that was just so that was just a basic example of a for Loop we can also write a while loop do while loop nested Loop which we are going to be also learning and let's suppose we also have another concept of nested Loom thank God I said it because I was almost forgot and now let me just write another loop inside this Loop and this Loop or this is something called unnested Loop this nested Loop can be used very rarely like nobody used nested Loops but anyways I'm going to show you if you need that so you can use nested Loop but if you don't so you don't have to so what I'm going to do is that I am going to just lock the console like uh Outer Loop and here I am going to just pour a little bit of separators right here so like separator here separator there okay and now let me just create one more Loop inside this tube so this is something called a nested Loop I'm going to just write let J in this case because we can write I right here we already write I right here so if you just write this I again so it will give us an error so in this case you can give like jdx or whatever name you want to provide but in this case I'm going to just write J and it will be now equals to 1 as well and this J will be less than uh or equal to maybe 5 and you know you know there will be five and this one should be uh 10 right here and then finally I'm gonna have to write my J plus plus in this case and now let me just lock the console something like you know I'm gonna copy this console out I'm going to print it right here okay so Inner Loop and I'm going to also product comma and here I have to provide my J and here I have to specify the I like the index let me just save this file and here what you can see is we are now getting the inner loop and our Loop that much time so it will now first of all gives us the outer loop it will iterate over through all of the data it will give us the outer loop then it will print five of uh five times this inner loop then it will go outside it will print us that Outer Loop and then it will print us that inner loop all the time five times and then it will print us that our Loop one more time and the step will go on and on like that I know that will be looking confusing and I can guarantee like you're not going to be using nested Loops like ever maybe in some situation you would need this nested Loop but not all the time but anyways there's a good uh tool to have in your belt so now I'm going to give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch the solution and then I'm going to give you my solution so what I'm going to do is that I'm going to delete that and I want you to print your name and numbers from 0 through 1000 right here without you original Loops I'm just kidding with using a loop so I want you to print your name and numbers from 0 through 1000 give your best Sean if you can do it that's completely okay and by the way this is not something where you're going to be using a nested Loop so you can use there by only using one Loop okay so give it your best shot if you can do it that's completely okay and here is my solution so I'm going to just write four I'm gonna write a four and I am going to select there let me just change that to I and it will be started from there it will be starting from zero and I'm going to just specify 100 or 1000 to be precise let me just lock the console this my name first of all was then web there and I'm going to also pour my eye right in here okay so now if I sell my file and boom here you can see 99 uh 999 there we go but I'm gonna have to start from one seven and it will gives us oh come on okay okay okay okay my bad it should be less than or equal to and here you can see it is now giving us 1 000 web devs right here inside the console and I know that's a lot yes a lot uh so yeah there was about four Loops in JavaScript and the next section we are going to be working with a while loop in JavaScript so now let's learn about a while loop in JavaScript so while loop will do exactly the same thing like a for Loop but the syntax is just a bit different okay so what I'm going to do is then I'm going to write a pseudo chord for y Loops I'm gonna write a while reserved keyboard first of all then the opening and closing parenthesis and here we have to specify the condition and here we have to write our curly braces and inside these curly braces here we are going to be riding our core block to be executed right here okay so we are going to be writing our chord right here and here we are going to be passing our condition so this is just a pseudo code for riding a while loop so now let me just give you a real word example of how while loop and then you will get to know what I'm talking about so now first of all let me just declare my index and my index will be starting from 1 and I'm going to use my wild wizard keyword right here and I'm going to just check while I is less than five so what do you want to do we just want to print to the user like hello word um or right here and I'm going to just write my I right here and then finally I'm going to use my I plus plus at the end and if you didn't specify this I plus plus at the end so it will give us something called an infinite Loop and our code will run again and again it will create our browser or our application so I'm going to also show you there but now this is just a syntax of writing a while loop I'm going to sell this file and here you can see it will start from one through five if you change that to like I don't know maybe to 10 or something like that let me just sell there and here you can see it will now gives us 10. we can change that to 100 if you want to and it will now give us 100 right here okay so let's suppose if I just write like five in this case let me just say over there and we forgot to include uh I plus plus and I guess I'm gonna have to stop this recording and then I'll come back to you anyways if you just forgot to include this I plus plus at the end or we just comment this line out and now I'm going to save my file and watch what happened here you can see our code will run that much time and at some point in time it will just crash our browser so I'm gonna have to uncomment that and save it and let's just stop man come on okay oh I'm gonna have to stop it uh let's just remove all of the code refresh my browser okay it's not refreshing I'm gonna have to close it and here you can see our browser is spinning uh yep come on man I'm gonna have to open my index.j HTML file one more time and click on this open with live servers it will now open or find in live server but it will take a little bit of time okay so why is taking that much time you shouldn't have to take that much time and here you can see it unlock users this console right here so if you just right click on M and inspect go to the console and if I just write hello word or something like that if you save it and here you can see it is now giving us this hello world right here anyway so that was it about a while loop and now I'm gonna give you a challenge and you have to perform this challenge by yourself if you can do it you already know where to find me I'm gonna place it right here go back like so so the first thing I want you to do is to print your name to the console like 100 times and iteration will be start from 10 not from zero not from one but your iteration will be start from 10. okay so this is what I want you to do kill your best shot if you can do it so now let me just show you my coding all my solution to be precise so I'm going to just write let I and it will be starting from 10 as I said and then I am going to use my while loop right here and I'm going to just provide my eyes less than or equal to 100 right here and then constant log because then web dev and finally never forget to include design plus mods you have to write this I plus plus at the end I'm going to send my file and it is giving us 91 but now I'm gonna just put a comma and or index so now let me just sell there and here you can see it will now give us 100 Hussein web devs our iteration will be starting from 10 right here from 10 through 100 right here so that was at about one Loop in JavaScript next we are going to be learning about a do while loop in JavaScript so I'm going to delete this code and now let's learn about do while loop in JavaScript so ardu while loop will also do exactly the same thing but the syntax is just differently a bit so what I'm going to do is that I'm going to declare my variable or index outside and our index will be starting from uh one right here and then I'm gonna just write do result keyword and then we have provided our opening parenthesis and closing parenthesis and inside this parenthesis what I'm going to do is that I'm going to write my logic word here so I'm going to just write like Hello World in this case and I'm going to also provide my eye right here then I'm going to just write I plus plus like never forget there otherwise it will give you infinite dupe and outside from these parentheses I'm like outside from this curly braces you have provided one result keyword and then opening parenthesis and closing parenthesis and here you have to provide your condition right here so I'm going to just write I is less than or equal to 5 and that's at about a do while do so if I sell my file and check it out so here you can see our iteration will be start from 1 through 5 right here and we can do whatever you want to do with there like here we just print like Hello World right here we can do like document object model which we are going to be also learning later but you don't have to worry about that for now so we are not going to be using do while loop that much or maybe ever in this course but I just kind of want to show you like there is something called a do while loop in JavaScript so now you're aware of that and you know the syntax and you can now tell other people's like I learned about do while loop in JavaScript but anyways maybe you would use that but I've used that in professional work maybe for three to I don't even remember like how many times I use this do while loop in my life anyway so that was it about a do while loop in JavaScript oh oh wait wait wait wait uh I'm gonna give you a challenge and you have to perform a challenge by yourself if you can do it then I'm gonna give you my solution let me just place it right here and go back the first thing I want you to do is there print your name 400 times in the console and then iteration will be start from 20 in this case so that's quite simple and easy first of all uh you have to do it by yourself if you can do it then watch a solution so I'm gonna just write let I equals to 20 in this case and now I'm going to just use my do and hit Ctrl space and it is now giving me ah it is not helping me in this case I'm gonna have to write it manually so do while loop I'm going to use my console.lava hosen web dev and you should write your own name inside you can print that I yeah I'm gonna just print it right here so I'm going to use my I plus plus and then I'm going to use my wine right here so while I is less than or equal to 400 times and boom I'm gonna sell my file and it will now print it 400 times right in here and or iteration will be start from fraction will be start from 20 right here so that was at about a while loop in JavaScript all right so I'm going to delete this coding from here and now let's learn about logical operators in JavaScript so in JavaScript we have three kinds of logical operators and logical operators simply means like which produce a logic so a logical operators allows us to produce a logic so what I'm going to do is that I am going to just write like a logical uh and operator and the syntax will look like that so we just have to write double end symbol and this is the logical and operator and the second one which will also produce some logic so this is a logical or operator and I'm going to write all right here and let me just put that in parenthesis and then we have the final one we have is The Logical not operator and it will look like this so let me just give you a definition all of them and I'm going to just write one error right here so this is just a basic definition of logical and operator so it will use as true if both of the operands are true like both of the operand or you can also color Boolean values are true otherwise if both of the value is not true it will gives us false let me give you a definition of this core operator as well so I'm going to just write like it will give this true if either of the operand's Boolean value is true and it will evaluates to false if both are false okay and now final one we have there it will just do a toggling Okay so it will give us true if the off Rand is false and wise word suck okay so it is kind of like a Toggler if something is true so it will convert it to false if something is false it will convert it to true I know this definition and all of that is looking horrible so now let me just give you example and then you'll get to know what I'm talking about so I'm going to just declare three variables so const a will be now set to true and then const B will be now set to false and then we have a cons C and it will be now equals to 4 in this case okay so what I'm going to do is that I'm going to write a consular log of a and and B so what do you think will be the reason if I send my file and check it out and here you can see it is now giving us false right here why is that here we are checking true and false Like A and B search will gives us fonts why because logical n operator will gives us true if both of the operands are true okay so if one of them is false search well it gives us false and here in this case one of them is false so it is giving us false right here so if you change that to true as well save my file and here you can see it is also giving us this true right here okay so if both of the operands are true then it will give us true but if it found one of them to be false it will give us pause okay so I'm going to sell there and it will not use us false right here so you can also do uh you know I'm gonna comment this line out and I'm going to also write to the console like uh C is greater than 2. and C is less than 2. so what do you think will be the results so I'm assuming it will give us a false I'm going to send my file and here you can see it is giving us a fonts right here why is that here we are just checking the C value C is currently set to 4 and we are checking C is greater than 2 so this condition here you can see is totally true like C is greater than 2 right here and then here we are specifying the N operator and we are checking C is less than two so this is not true because 4 here you can see C value is 4 select 4 is not less than 2 so it will give us fonts right here so one of them is false it will make the entire condition as a false so that's how we can use the N over in JavaScript so now let's jump into the old operator and it will give us true if one of them is true it will give us false if both of them is false so now what I'm going to do is that I'm going to just try to console.l log and I'm going to log um you know I'm going to cut this out I'm going to also cut this comment from here and let me just comment this out anyways so now what I'm going to do is that I'm going to just write um A or B right here so the a value is now set to true and the B value is set to false so we are checking if a or b so what do you think will be the reason if I save this file and here you can see it is true why because the logical o over here will give us true if either of them is true if you'd found one of them true it will give this true if it found like both of them false so then it will give us false so now in this case it found this one true so that's why it is now giving us true right here but let's suppose if I make this one fall so it will obviously give response because both of them is now set to false so that's why it will give us false but if it found like one of them to be true or both of them to be true so it will use this true word here so now let me just make there as a false right here so let me just write false and here you can see it will now use this true right here so it is searching for one of them to be true if it found one of them to be true it will give us true it doesn't care about other properties but it is searching for one to be true if it found one of them to be true so it will give us True Value otherwise if both of them is false it will give us the font C value right here okay so that's there and now I'm going to just write console log of b or B right here like once or false so I'm going to save that it will obviously give us false and now I'm going to just write C is greater than 2 or C is less than 2 right here in this case we are not using this n operator right here in this case we've used the N over and N operator will be searching for one of them to be false if you found one of them to be false so it will give us false and here this one is searching for true if you found one of them to be true so it will give this true so now if I sell my file and here you can see it is now giving us true because this one is true like uh 4 is greater than 2 and this one is false like 4 is not less than 2 this one is false and this one is true so it is searching for one of them to be true that's why we are getting this true right here inside a console and now let's talk about this final one and it will just do a toggling like if something is true so it will just make it false if something is false so it will just make it true Okay so so uh let me just show you that uh let me just hide them let me just comment these out and finally come on let me just hide them out and finally what I'm going to do is that I'm going to console log uh a right here first of all so if you sell there here you can see it is now giving us true but if I just write this explanation mark at the beginning or you can call it a logical note operator if you wanted to but I'm going to sell my file and here you can see it is now converting over True Value to false right here and now let me just lock the console B value right here I'm going to send my file and here you can see it is now giving us false right here but now if I want to convert this false value to true so for that we can use this explanation mark or logical node operator so I'm going to sell there and boom here you can see it is now converting or false value to True right here okay so yeah dance now I'm going to just write a little bit of um more chord and then it will help you master logical and not and or over it so I'm going to remove this coding from here and I'm going to just write a password variable right here and I'm going to store the password here okay so now let me just check if the pencil.live is uh greater than or equal to add character and I'm going to go back and password dot includes uh whatever you call it web right here so what do you want to do we just want to print to the user like a valid password right here otherwise we want to print the user like console.log in Reddit as well right here okay so now let me just save my file and it is now giving us the valid password right here why is that because the word password left is greater than 8 or greater than or equal to it and password includes web right here here you can see it is including web right here let's suppose if one of them is set to false line I'm going to remove this web from here and I'm going to sell my file and here you can see it is now giving us invalid password right here if I just undo this step say our file it is now giving us the valid password right here but now I'm going to cut it one more time so that if I gives us invalid pencil but instead of writing the N operator I'm going to just write the O operator right here and I am going to just save my file and here you can see it is now giving us the valid pass so right here why is that because it will just search for one of them to be true and it found one of them to be true like where password link is greater than or equal to Airline one two three four five six seven and eight and here you can see it will just spawn one of them to be true and it will give us the Valiant answer right here and we can also make that other stuff to be or you know let um is true and it will be now set to True right here and I'm going to just lock the console as true so you obviously know like it will use us uh true inside our console so here you can see it will not use a screw right here but let's suppose if I want to convert that to false I'm going to just use this explanation mark and if I sell my file and here you can see it will now convert it to false word here so that was it about a logical operator in JavaScript and that was it about the second section of this course so now let's learn about our first data structure in JavaScript which is car arrays an arrays on our data structure which allows us to restore a collection of data at once and arrays are also something called zero index best okay so now in some situation you will want to store like multiple data at once so you cannot store that in variable Kenya so like let's suppose if you want to store like fruits so fruits and it will be now equals to I don't know I'm going to store a lot of data like mango and I'm going to also store like orange and I'm going to also store like something else right here and here you can see like it is already giving us this error right here like we can only store one value inside this variable so if you want to store like multiple values inside all variables so for that we would need a data structure some sort of a data structure you can either use arrays or you can use objects something which we are going to be also discussing later in this course okay so what I'm going to do is that I'm going to just remove them and now let me just start by defining the empty array so we are going to be creating an array with no content nothing inside there so you can either create it by using a const result keyword or let result keyword or guard for Bear don't use the word user keyword but anyways I'm going to just write my const and my list you can give any name you want so now let me just use this opening bracket and closing bracket and this is how we can create or empty array right here and this is the JavaScript data structure which I've been talking about so now let me just log there to the console like my list right here I'm going to send my file and here you can see it is now giving us this array with no content nothing inside there and here you can also see the length is zero but let's suppose if you want to provide some sort of a data to it so you totally can I'm going to remove this comment from here and I'm going to change the name of there to like uh numbers or numbers array will be fine and I'm going to just store a little bit of numbers like I don't know uh one two three four and five so I'm gonna just throw that inside my array right here okay so I'm going to just sell that and here you can see it unlock uses all of these values right here like one two three four five so this is a data structure so it is now allowing us to structure our data at one place right here so we are now able to store all of our data at one place in this one variable right here numbers array you can give like nums or something like that and that would probably work just fine so I'm gonna just write num I'm gonna sell my file and here you can see it is working just fine right here so that was a number array so now let me just delete that and write a string array okay so here I'm going to just store like I don't know um eat sleep and corn repeat there we go so eat cold sleep and repeat so I'm gonna just sell my file and now let me just log that to the console like string array I'm going to sell there and here you can see it is now giving us all of that array right here so we are now getting air sleep code and repeat and as I said that arrays are a zero index base which means like array will be starting from zero so here you can see our array is now starting from zero then we have one two three and all of that kind of stuff so now let's learn about how we are going to be accessing um items items from or array okay so now let's learn about how you're going to be accessing items from our array so to access item from this array like I don't know like let's suppose if you want to get this item or this item or this item so you first of all right array name and then you will just write these brackets right here and then here you have to provide the index so in my case I'm going to just provide 0 right here as I said like arrays are a zero index base and I want to get this each right here and now I'm going to just save my file and here you can see it is now giving us this gate right here let me just remove that zero and I'm going to just put one semi file it is now giving a sleep right here so I'm going to just provide a zero and I'm going to duplicate that a few times so I'm going to write 1 2 and also the three right here so I'm gonna sell that and here you can see it is now giving us Eid sleeve chord and repeat so everything is working the way we expand work and this is how we are going to be creating our array right here and this is how we are going to be accessing the item from the array Okay so so that was it so you can also write a nested array if you wanted to so now let me just give you example of nested uh arrays so a nester just simply means like array inside another array you don't even have to worry about that much of this data structure but I'm just showing you the example so like you can totally do that if you want to so I'll just write nest or for nested array and I'm going to just write like uh one and then I'm going to just write a necessary array inside this array right here like so so now this array is inside this area right here and I can write like I don't know two and three or something like that and then I'm gonna just write comma I can write one I can write true I can write um I don't know whatever I want so I'm going to write false and we can do whatever you want to do with this array right here so I'm going to just save this file now let me just log there to the console like Nest array I'm going to sell there and here you can see we are not getting all of these items right here and if I click on this one right here so it will just expand it so here you can see we have this Mr array inside this array right here all right so what I'm going to do is then I'm going to just um get this array right here so if I want to get there so first of all I'm going to have to access this array right here I'm going to have to write the array name so I already write that right here and then here I have to provide the index of this array right here so I'm going to just write 1 right here why because this one is a zero index base and this one will be a one uh I mean like the first Index right here so I'm going to just save there and here you can see we are now getting this array right here so now let's suppose if you want to get this item inside this second array so you will just write this uh curly brace I mean not curly braces by brackets and then here you will also write one right here because this one is zero and this one is one so that's why I just provided one right here so I'm gonna just sell there and here you can see it is now giving us this three right here okay so this is also called Nester array and some people call it like uh two our Dimension array you can also call it like two-dimension array or you can call it I'm going to write a or symbol and or nested array right here okay so this is how you can work with that and by the way you're not just limited to store like um single you can even go further than that you can create like more arrays right here so then you can specify more items inside the elect item uh blah or something like that and it will totally work and then you will just go nestedness to nested and again and again so what I'm going to do is that I'm going to remove that and now let me just give you example of mixture array or you know what uh let me just give you example of just storing a layer so I'm going to just write on my letter or letter there we go and it will be now equals to array of like Edge e l l and O okay so now I'm gonna just log that to the console my letters and letters to be precise so I'll just write letters I'm going to send my file and here you can see it is now giving us all of these letters were here we can also iterate over through all of this array and we can get each of these item one by one but that's other topic which we are not going to be learning I guess in this section but in future we will learn them and you are not just limited to write these strings and numbers you can write a necessary arrays and later we are going to be learning about objects and you are totally able to provide objects right in here if you wanted to so erase our data structure which allows us to store multiple data at once so this is how we are going to be creating our array and this is how we are going to be accessing the items from that array so we have a lot of array methods which we are going to be exploring in a second but now I guess this is the time for you to try array by yourself I'm going to delete this code I'm going to go back and I'm going to just place this instruction for you right here so the first thing I want you to do is that I want you to create an array with the name of favorite singers and store three favorite singers like if you have like I don't know your favorite singer so you can just put their names inside the array and log the first singer in the console uh in that array so first of all I want to restore three your favorite singers and then log the first singer inside the array and then create an array with the name of favorite numbers and store four favorite numbers inside there then create an array with the name of mix array and or mixed error and store the string other array one two three and true right here and now access each items in their array by using this bracket notation right here so give it your best shot if you can do it that's completely okay then I'm going to give you my solution so here is my solution so first of all I want you to pause the video and do it by yourself but if you can do it here's my solution so what I'm going to do is that I'm going to just write bam singers and I'm going to store weird singers I really love this singer so Savage 21 Savage that's the only reason I like this 21 um what do you call it a 21 number there we go post Malone a little bit my favorite singer but not that much and NF ah come on NF is awesome and now let me just log that to a console like fail singers and I'm gonna just sell my file and here you can see it will not give us all of these uh favorite singers right here so let's suppose if you wanted to get this first one so for that we are going to be writing our brackets and the zero index best song either save it and here you can see it will now give us 21 Savage right here okay so that was the first one now the next thing that you have to do is that we have to create an array with our favorite numbers and it will be now equals to like some sort of a number so I'm gonna just write like uh three two one and I don't know comma one two three comma and one I don't know 23 or something like that and now I'm gonna just log this array to the console like parrot numbers I'm going to sell that and here you can see it will now gives us all of these numbers right here and so that was the second array now the third array which I'm going to be creating I'm going to just create it by using a constant insert keyword and mixed array and it will be now equals to this array I'm going to copy the I'm going to cheat a little bit you don't have to cheat you shouldn't cheat you can't cheat if you did then you cannot become a better JavaScript developer you shouldn't do that but I just shoot to save a level of time anyway so here is a string value then we have a nested array right here or a multi-dimensional array then we have a one two three as the numbers and we have a Boolean right here okay so what I'm going to do is that let me just log mixed array to the console I'm going to sell there and here you can see my mixed array so we have a string we have other array we have one two three as the numbers and we have a Boolean right here okay so what I'm going to do is that I'm going to just comment these two out and I am going to duplicate there a few times I'm going to console log this one I'm like comment that out and I'm going to write 0 then I'm going to just write the one then I'm going to write a 2 then we have I guess three items so I'm gonna just sell there so we have string other array one two three and true right here okay so that was the challenge and this is how you're going to be creating an array this is how you're going to be accessing the items from the array but one topic is left which is called iterating over through array and getting all of the items from the array which I'm not going to show you not right now so I'm going to just delete all of this coding from here and that was it about arrays alright so now let's learn about basic array methods and later in this course we are going to be also learning about Advanced array methods but for now we have to just learned about the basic array methods so for that I already prepared a readme.md for you to check it out and come on what the hell read me start read IAD and then m e there we go come on read .me.md yep there we go we have our readme.md I'm gonna just place that right here and by the way all of the code will be available in my GitHub repository if you want to check it out so now we have these methods available on our array and there are a lot of them but for now uh we have this few of them I'm going to have to remove their heads there we go yep that's looking better so the first method we have is a concare method and as the name suggests that it allows us to join two or more arrays and return a result and includes will check if an array contains a specified element push material allows us to add a new element to the end of the array I want you to notice that at the end of the array and return the new length of that array and unshift will add a new element to the beginning of a new array and Returns the new length of the array then we have a pop method and pop will remove the Lost element the last element of from the array and shift allows us to remove the first element from the array and sort of allows us to sort our array alphabetically slicer allows us we already learned about slides but I'm going to also give you the Quick Test of there as well slicer allows us to select a part of an array and Returns the new array splines will allows us to remove or replace existing element and or adds new elements right here so I'm going to go a little bit slow in this case because there are a lot of methods right here and it will confuse you a lot so the first thing which I'm going to do is that we are going to be starting from pushing items to the array so what I'm going to do is that I'm going to just write a lot of fruits right here and cons and fruits will be now equals to this array so I'm going to write apples and you know I'm going to just fast forward a bit grip right here so this is my simple data structure right here my simple array right here so if I log that to a console like fruits and I'm going to just send my file and here you can see we have all of these fruits available right here okay so the first method which I'm going to be using I'm going to remove that the first method which I'm going to be using is a fruits and our push method and now let's just check out the description of um push method right here and it is already giving us this preview right here like new elements to add to the array so it will add or append new element at the end of this fruits array right here so let's suppose if I want to add like uh I don't know banana so it will now add this banana at the end of this array right here okay and now let me just show you their description one more time so we have um push there we go and it will add a new elements to the end of the array right here and return a new length So currently let me just comment this line out currently if I log to the console the fruits dot length right here and if I sell them and here you can see the length is now six but if I just push this banana to my fruits array right here so the length will be now seven so I'm going to just sell this file and um it will be just uh let me just lock that to the console first of all so we have fruits I'm gonna sell there and here you can see the link is now currently set to 7 and here you can also see their banana at the end of this array right here you can also just specify that by using the length property right here so let me just sell that previously the length was six and now it becomes seven right here why because we push this new item to this array right here then swine okay so I'm going to just remove that that one's or first item I mean like that was our first method to be precise so arrays our data structure and we are now using this method on the array and we are just pushing then items to this array now let me just use approves come on fruits dot pop method and as the name suggests that it is kind of like a poop so it will just remove one item at the end of the array and we don't have to specify any strings or anything like that so it will just remove one item from the end of the array so now let me just show you this and it will just remove the Lost element of the array okay so I'm going to just sell there but before I do I'm gonna have to write long log of consoles we have fruits dot yeah I'm gonna just write fruits right here so I'm going to copy there and I'm going to place it right here so currently it will give us this banana and then this pop method will remove their banana from this list and it will give us that um six items one one more time so I'm gonna just save there and here you can see this one is now seven let me just highlight that for you here you can see this one is seven and this one includes six items right here why is there because this pop method allows us to remove the loss item from our array so I'm gonna just expand this one uh first of all let me just expand this one right here so this one have this banana right here but it is not showing it right here anyway so this one have this banana right here just uncollapsed there and here you can see we removed their banana from this list so that's why this one is six and this one is seven right here so let me just remove both of them from here and now let me just use the shift method so I'm gonna just write console log of uh what did I do this what in the word is there I don't even know what that is okay there's a CS or HTML comment anyways so I'm going to just write fruits dot um what do we call it shift method and first of all okay so we already have this description right here so it will just remove the first element from our existing array right here so which means that it will remove these apples from our array so now let me just log that to the console and see the results so we have approves and limit the sale there and here you can see that apples is gone so here you can see we don't have any apples inside this fruits array right here let me just copy that and put it right here and in this case this array will have their fruits and then here I mean like this array will have that apple right here but here we are just removing the first item from the array which will be apple and here it has this apple right here and here we remove that Apple from this list so that's how we can use this shift unshift and all of that method so I'm going to remove that as well and now let's use unshift so I'm going to use uproots dot on shift method right here and now let me just call there so this unship method allows us to insert element at the start of the array let me just check my uh description right here so we have um I'm sure I guess I didn't okay there we go there's a new element at the beginning of an array okay so let's suppose if you want to provide uh something else like orange maybe so here we don't have any oranges whatsoever so here we are appending uh this orange at the beginning of this array so let me just say that and let me just log into the console this fruits and I'm gonna just sell them and here you can see we have this Orange right here at the beginning if I comment this line out and let me just sell there and here you can see that apple is gone let me just uncomment there and here you can see we have this Orange right here so this is how you are going to be adding element at the beginning of the array so that's there now the next thing which you have to learn is something called a Concur and concur material allows us to earn more than one arrays at once so what I'm going to do is that I'm going to create a new array um const uh I don't know um uh new rules or something like that and I'm gonna just add these fruits um well you know I'm gonna just do this entire array first of all let me just write a fruits and it will be now equals to Apples okay so this is going to be our first array let our const more uh roots and it will be now equals to um more fruit so I'm going to just write strawberries pineapples and grapefruit some okay so we have these are two arrays right here the first one is including all of these items the second one is including all of these items so if you want to like uh concatenate both of these array or join both of these arrays so for that we have a concave method so what I'm going to do is that I'm going to just write a cons uh total roots and it will be now equals to this fruits and here we are going to be concatenating these small fruits right here so I'm going to just use more fruits and now let me just log to the console uh total fruits or all fruits or whatever you want to call there I'm going to sell this file and here you can see we have six items right here this one will be three items and these are also three items so three plus three is six so that's why we are now getting six items right here okay so this is how we are going to be using this concat method on this fruits array right here and now that was it about a basics of them and still we are going to be still learning about the basics uh but later in this course we are going to also learning about everyone stuff about arrays as well so now let's learn about a little bit Advanced fun but not that much so I'm going to use like a PL and I'm going to just create a programming languages uh array right here so uh Java Script then we have on golang one of my favorite programming language all the time I love golden programming language I really love that and then we have a python and then we have PHP okay and now let me just create another array response numbers uh and it will be now equals to um I don't know some sort of a number is like three comma I don't know five comma two comma four comma one or something like that so now we have these two arrays right here the first thing I'm going to do is that I'm gonna just lock the console.pl that includes this array going uh I mean like um this programming language dot includes we already learned about this includes method it will just gives us the Boolean value either true or false so PL does this array includes this item is that true or not I'm just asking you a question is that true or not that's true because calling is right here so that's why it will give us true so I'm going to just save my file and here you can see it will not use a true word here if you just provide like uh I don't know dark or something like that and now let me just save that and here you can see it will not use this phones right here okay so this is how they includes method work and this is how you can search for simple items anyways so that was the include so I'm going to just comment this out and now let me just use console.log and pl dot join and I'm going to join this array by using this Dash okay so now let me just save there and here you can see it will now join all of these items by using this dashboard here so let me just zoom in a bit so here you can see we have JavaScript Dash calling Dash python PHP and we would use this join method a lot once we jump into the node.js and expressions because we are going to be working with the URLs and in the URLs we would do something like that all the time so that's why I want to mention it right here you can either write like you can write anything you want like let's suppose you can write a dollar sign I'm going to save that and here you can see it well and join the array by using this dollar sign you can write like my own name to be honest or h u x n semi file and here you can see JavaScript Jose and golang Jose and python Jose and PHP so you can like write anything you want excuse me you can write anything you want so I'm going to just write this Dash and I'm going to comment this line out now I'm going to use um the reverse method first of all let me just lock the console this PL and here you can see first of all we have a JavaScript then we have a goaling then we have a python then we have a PHP right here okay in this order and now if I just write dot reverse method right here and I'm going to just call there and I'm going to just sell my file and here you can see it will now reverse or array first of all it will give us PHP then python then going and finally it will give us JavaScript programming language right here okay so this is how we are going to be reversing our items and I'm going through a little bit pass on this stuff because these stuff are very easy okay so what I'm going to do is that I'm going to use that slice method as we learned previously on strings so I'm going to just use PL right here and I'm going to just write a slice right here and I'm going to just start from the beginning first of all we have to specify the start value as a number and we also have to provide this n as a number okay so I'm going to just start from 0 index space and I wanted to get like I don't know maybe I'm going to just provide this going so I'm going to write one send my file and uh I mean like come on this one the first one will be zero index space but the second one will not be a zero in Express that's why it is now giving us this JavaScript right here okay so if I just write 2 then it will give us this goal and one of my favorite programming language right here so it will now give us General script and going and you get to just I'm going to comment this line out and finally let me just use a sore method on this numbers array and here you can see first of all we are getting three five two four one let me just write the numbers right here then you'll get on what I'm talking about first of all we are getting three five two four one so if you want to sort the sound so for that we can use numbers dot sort right here so we have to just call there and now if I sell my file and here you can see it will now give us one two three four five right here so this is how the sort array method works so that was all of the list of the basics array methods anyways so now next we are going to be learning about objects in JavaScript all right that was at about arrays and arrays methods now let's learn about a new topic in JavaScript or a new data structure in JavaScript card objects one of my favorite topics and objects as I said are a JavaScript data structure which allows us to store a collection of data but in this case it will also allow us to store our data with a label so label and then the value for that label so in arrays we cannot label our data like we would just store some sort of our data but we cannot provide a label for our data but in objects objects allows us to store a collection of data and this is a JavaScript data structure which allows us to store a collection of data with the key value appearance which means like we can label our data and we can create objects for anything we want and like for cars for person for building for school for computers for laptops for phones for anything we want okay so we can create objects for anything we want so that was just straight about the introduction of what object is so now if you want to create an object first of all you are going to be writing either let const or War so in this case I'm going to just use const Reserve keyword right here then you can give some sort of a name to your um object right here so in my case I'm going to just give a name of like person and it will be now equals to these curly braces in arrays we use these brackets but in objects we are going to be using these curly braces right here and inside these curly braces I'm going to just specify my key and some sort of value for that key okay so like I can provide anything I want okay I'm gonna just remove that and now I'm going to just create a person object which means like I'm going to be providing a person keys and the percent values so I'm going to just create a simple object in the word and I'm going to just give a name of like first name and it will be now equals to Hussein my own name I'm going to write a last name as a key and if you want to separate that you have to write this column right here and then you can provide any kind of data right here like you can give them a string value you can give a number value like uh in 20 or something like that you can give them a Boolean if you wanted to like true or false you can even create a nested object which I'm going to also show you in a second you can store arrays if you wanted to but in this case I'm going to just store like Hussein web dev right in here but before I do that first of all let me just cut this out and let me just save there and let me just log to the console this person object right here so I'm going to just sell my file and here you can see it is now giving us this empty object right here if I expand there it also have a lot of uh properties and methods over here like uh we are going to be learning about Constructor in advanced course not in this one I'm going to just comment there I mean like hide that out and now let's suppose if you want to provide a properties and values for their properties so this is known as a property and this is known as a value for that property okay so this is how we are going to be writing a key and value or a property and value and we can also even write something called Methods inside object but we are not going to be writing method not right now because methods are functions and we're going to learn about functions yet okay then I'm going to provide a comma and don't forget this comma I forget this comma all the time and it is giving me that same error all the time okay like a lot of people do that not only me so now I'm gonna just provide edge of 19 comma and then the location so I'm going to just for a location as an array and I'm going to just probably like plan it um come on land and then Earth okay yeah e e a r d h there we go I forgot the H then comma I'm going to write like is programmer is programmer and it will be no certain true I'm gonna go back and here you can see I just simply create a person object which is taking the first name the last name the edge location and its programmer as a Boolean so we are providing a string value we are providing a number value we are also providing this nested data structure which is array and here we are also passing a Boolean right here okay and we can even pass uh what we call it um some sort of other object right here if you wanted to but I'm going to show you that in a second let me just sell that and here you can see it is now giving us our object right here so these are all the properties which is specified right here and here you can also see the values and this is going to be the length of our array I guess we can see the length of our array so I mean like objects I'm going to use the length l e n g t h yep we can it is giving us 100 Point okay and now let me just check the type of person and now I'm going to sell there it is now object right here but let's suppose let me just create a simple array like empty array and now let me just check out the type of this array right here let me just comment this line now come on comment comment this line out and now I'm gonna stay over there and here you can see this is also an object so what's going on behind the scenes something called Constructor and objective oriented programming which you are going to be diving into in a really great depth but I just kind of want to show you let's suppose if somebody asks you like what is the type of this array so the type of array is not array the type of array is object okay so it is allowing us to store a collection of data just like this object but in this case in arrays we cannot provide a keys and values we can just order data and that's it I'm going to just remove that and let me just uncomment this person object right here okay let's just remove that from here send my file and here you can see we have our object right here so now let's learn about how we are going to be accessing items from or array not array but objects so now we are going to be learning about how we are going to be accessing either first name last name Edge or any any property which you have right here so there are two ways to access your items or properties from your object right here so the first way is the dot notation and we have a break in notation as well so if I just write Dot and here you can see we have all of these properties right here like we have Edge we have first name we have is programmer last name and location let's suppose if I want to just get this Edge I'm going to sell that and here you can see it is now giving us this 19 right here and let me just remove that and hit Ctrl space one more time it is now giving us all of the stuff which I provide right here in my object word here so let me just like get all of them like first of all I'm gonna use first name then I'm going to get my last name then I'm gonna get my Edge location there we go duplicate there and is programmer I'm Gonna Save that and here you can see this is how we are getting all of the properties and its values right here by using the dot notation so that was the first way to get your data or to access items from your object so now let's learn about this bracket notation so I'm going to just remove that and here instead of that dot I'm going to remove there and here I'm going to just provide these Breakers right here but let's suppose if I just write like first name in this case and if I sell that and it is giving us this nasty error but I comment I mean like I hide that errors but here you can see it will now gives us this error right here it will say like uncard reference error first name is not defined our JavaScript compiler will think like here we want to access some sort of a first name variable like let first name and some sort of a variable right here but we don't have any personal variable available inside our Global scope so what's going on so that's why it is now giving us this error here like on card uh reference error first name is not defined okay so I am going to just remove there and here I'm going to have to provide a quotes and inside This chords we have to provide the property or the value name right here so now if you sell that and here you can see we are now getting Jose but I'm going to have to hide these errors from here so here you can see we're now getting Jose and I'm gonna get my location I'm gonna sell there and location is only for it I'm gonna have to copy there and place it right here and here you can see we have our location right here okay so everything is working now you might be asking like can I use the dark notation or these bracket notations so for that I'm going to give you the answer like there will be a situation where you would need this break-in notation uh and there will be also a situation where you need a DOT notation so what do I mean by that let's suppose if I just write like a property of something like uh I don't know so I'm gonna just write 10 right here and I'm gonna just store the value of 10 inside there and let's suppose if I want to get there by using a down notation so if I just write Dot and here you can see we have this 10 right here so if I click on this 10 and here you can see it is now order completing for me but I'm going to just write this 10 manually and if I save my file it will give us that error so here you can see it is now giving us this error right here like uncut syntax error missing that bracket right here after argument list which means like it will gives us an error and we cannot do that instead we can write this bracket notation so first of all we have provide this bracket notation and inside this bracket notation we have to specify the quotes and inside this quotes we have to get this 10 right here so I'm going to just save there and here you can see this is how it works so that was just about how we are going to be creating our object how we are going to be providing a properties and Value Store objects and how we are going to be accessing their properties and its values by using a DOT notation and the bracket notation okay so yeah that was it and we also learned about the type of array and the type of object so yep that was it but in some situation we would also want to provide a new value to our or array so I'm going to just write first name right here and first name will be now equals to Hussein in this case and now if I want to quad uh another value to this array so for that I'm going to just use the uh why am I saying array all the time I mean object so I'm going to use the object name and then I'm going to use uh person Dot and here I am going to just use uh the property name which I want to add so I'm going to just write last name and it will be now equals to a web dev right here okay so I'm going to just delete there let me just log to the console person and now if I save it and here you can see we have these two properties the first one will be um first name and the second one will be last name right here so let's suppose if you want to provide something else like person dot uh location or anything like that and I'm going to just provide a location of um planet uh and then Earth okay so let's just sell them and here you can see that will be added right in here okay so this is how we are going to be providing a new value to our array or this is how we are going to be providing a new elements to our rare to be precise okay so that's that and let's suppose in some situation we would want to delete one element from our array so we are going to be using our delete result keyword and then we are going to be using person dot like uh I don't know written DOT first name or something like that and now if it's out there and here you can see their first name is gone and we have this last name and or location right here so this is how we are going to be deleting something from our array not array object anyways so this is how we are going to be creating and doing all of their stuff with or object so now let me just give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then I'm going to give you my solution let me just press that right here and create an object with the name of car add type model and color as a properties check the time of that object update the type property to Toyota and update One update the type property uh to Toyota and new property wheels and lock car to the console so give it your best shot if you can do it that's completely okay then I'm gonna give you my solution so what I'm going to do is that let me just give you my solution I want you to pause the video and do it by yourself and then come back and here's my solution so I'm going to just create an object right here and type will be set to build or whatever name you want to store and then model will be now set to uh 500 and I'm going to also provide a color of white part here okay so now let me just log with the console type of car and now if I save there and here you can see it is now giving us object I'm gonna go back it is now giving us an object and now updating a property this is how we are going to be you know let's just remove that from here we don't care about them and now let's suppose if you want to update a property so we are going to be using car DOT type and we don't yeah we already have this type right here so let's just log there to the console so I'm going to use console.log and server file and here you can see it is now giving us this type right here now let's just update their time to something else like uh to your top there we go save my file and here you can see we have this Toyota updated value right here so let's just log there to the console Consular lock card save it and here you can see the type is now updated to pre-order right here okay so this is how we are going to be updating our car object and now let's just learn about how we are going to be providing a new values to our car objects I'm going to use car.wheels and it will now equals to like four wheels okay and now let me just lock the console car right here I'm gonna comment this line out I'm gonna also comment these stuff as well let's just sell our file and here you can see we have this new property which is called Wheels and wheels are now set to 4 right here so yeah that was it a lot about objects and this is not aired because objects are a huge topic and objects are a huge data structure in JavaScript so we are going to be diving into objects in a very great detail later but not right now so there was it about objects so the next topic which we are going to be learning in this video is functions so what are function and why you should care about learning functions in the first place so the the first thing that you have to ask yourself is that warrant in the work is a function a function is a block of code that performs a specific task so this is just the actual definition of a function and functions are not a new thing just specifically tied to a JavaScript because we will found functions in every programming languages out there I shouldn't have to say every because some programming language don't use functions anyways that was a side topic functions are the heart of JavaScript so a function is a block of code that perform a specific task and function makes the code reusable you can declare it once and you can reuse it multiple times so that's why it allows us to work with something called a drawing which I will get to in a second so function makes the program easier as each small task is divided into a function and function increases readability that's for sure which you will also see in a second and it allows us to work with the dry principle Android principle just simply means like do not repeat yourself okay there are a lot of economic names out there like Kiss like keep it simple stupid and there are a lot of them but right is one of them and the most popular one okay so this is what a function is and now if you want to declare a function first of all you have to write a result keyword or function then you have to give some sort of a name to your function then the opening parenthesis and the closing parenthesis and inside this parenthesis this part is totally optional in some situation we would want to provide a parameter to our function and a lot of time we are not going to be providing any parameters anyways so these are also called a local variable just specifically for the specific function and then here we are going to be writing our actual code so that was just a basic introduction of a function and now let me just Square it over first function in this course so if you want to declare a function first of all we have provide a function result keyword then we have to give some sort of a name to our function in my case I'm going to give a name of like grid right here and then or opening parenthesis and or closing parenthesis right here then we're opening curly brace and closing curly brace right here and inside these curly braces we can write anything we want to write right here okay so in my case I'm going to just write console log of like uh hello from a function or something like that function there we go now that we successfully create our function which means like we successfully register our function inward JavaScript if I sell that and check it out here you can see nothing will happen right here why is that here you can see we successfully created our function we provide our logic inside that function but now we have to call run an execute this function you will find a lot of developers who use these terms interchangeably like some would call someone would call it as call the function someone would say like run the function someone would say execute the function okay so all of these terms mean the same that we have to call this function now we register this function right here now we have to call it so if I want to call this function first of all I have to write the name of a function and then I have to provide our opening parenthesis and the closing parenthesis and that's it that's it baby I'm gonna have to sell my file and here you can see it when log uses like hello from a function now you might say like why do we have to write all of their stuff like if we can just write this concept along all the time well in this case I just write a console log but later on you're going to be creating a function for like a lot of things I cannot show you their complexity not right now because it will make you confuse and it will make you a lot of confused okay but later as you go through this course you will found all of their complexity and you will get to know why do we need this function and trust me you will fall in love with this function keyword or maybe in some situation when you're writing error function you're not going to be writing a function result keyword anyways so what I'm going to do is that let's suppose if I want to call this function like a lot of time so I'm going to just duplicate the score a few time and I'm going to save there and here you can see it will gives us that same result like three times so here you can see we call it three times it will give us that same result three times right here okay so this is how we can register or a callback not callback function but this is how we can can register or functions so function decoloration and come on d e c l e l a r a t i o and there we go now let me just create a new function and it will take a perimeter in this case so I'm going to just write function result keyword I'm going to give a name of like say hello say hello right here and my parenthesis and now if I want to take a perimeter inside this function so how can I go about doing that well here I'm going to just provide a local variable or parameter some people call it perimeter and some people call it like local variables because they are a local variables so you can choose like however you want to go in there like either perimeter or um local variable so in my case it will just say like say hello so this function is about like say hello to the user so we are going to be just passing the username right here like you can give any name you want so this is just a variable like you can call it anything you want which will be only accessible inside this function not outside from the function but inside this function okay and later we are going to be also learning about Scopes in this course so you don't have to worry about that for now so let's suppose I'm going to just pass like name right here and I'm going to just write like console.log and here I'm going to just say like hello and then let me just render my name right here okay so you can write this code like that or you can use like console.log of uh I don't know hello and then plus and then you can report a space and you can provide the space one more not a space but plus one more time and then you can render your name just like that you can either write this code or you can write this code anyways I'm going to delete this one because I don't like that syntax and I'm going to just write or function just like that so now we register our variable right here inside this function and we also use this function I mean like we also use this variable inside our function right here so how can we specify a value to this function I mean like come on how can we specify a value to this variable there we go I can't even speak today I'm going to just write say hello right here and I'm going to just execute that and let's just see what will happen if I execute this function and if I send my function I mean like sell my file and here you can see it will not uses hello and undefined right here why are we getting this undefined well we declare our variable right here but we didn't assign any values to it it's kind of like this one like let name and or you know I'm gonna just change that to like uh one name or something like that and now if I log this one name to the console and if I sell that and here you can see it will now give us undefined so that's why we are getting this undefined right here we declare our variable but we didn't specify any value to this variable so now you might be thinking like if I want to provide a value to this variable so I can do that like uh it will be not equals to uh some something like uh I don't know my own name like cousin and if I send my file and here you can see this one will work but this is now how we are going to be writing our code so I'm going to just remove there from here and now if you want to provide a value to this uh function dynamically so for that we are going to be passing this value right in here because this is a perimeter so here we are going to be passing an argument to that parameter I know this like you don't have to remember this name like perimeter and arguments but a lot of developers are using these words so I'm saying as well if you pass some sort of a variable right here this area is called a perimeter and here you can also see that perimeter right here then import any arguments right here but here this area is called augment okay so parameter and argument so what I'm going to do is that I'm going to pass Dynamic radio to this function so I'm going to just write chords and then I'm going to just write Hussein right here so if I send my file and here you can certainly not gives us hello Hussein right here so let's suppose if I duplicate there and if I change that to Alex instead so what do you think will be the result if I sell this file and here you can still agree to the annexe as well and we can agree to like anything or any one we want so I'm gonna just save there it will not give us hello John right here so we can reuse this function again and again and this is how we are going to be declaring our function and this is how we are going to be passing an argument or a local variable to a function and this is how we are going to be passing argument to that function so that was just it about basic functions and now let me just give you one more example of a function or you know what let me just talk to you about a return keyword in function so return keyword in function so like what in the word is a return keyword and how to use them so I'm going to just create a function function and by the way you can also use this shortcut just write func and then just select the second one and hit enter and here you can see to unlock uses function name and then you can hit tab to write a parameter hit tab to write your code right here so what I'm going to do is that I'm going to just change this name to air right here and here we are going to be specifying who are parameters so we can specify like more than one parameter you can provide countless of them by just separating them by a comma we can port a lot of parameter if you wanted to but in my case I'm going to just write like a number of one or just write I don't know X and Y right here and now in this case I'm going to be using something called a return keyword and I'm going to just write X Plus y right here and I'm going to expand this return keyword in a second but now let me just uh write this ad right here and I'm going to just specify like 10 comma 20 and now if I sell my file and here you can see we are not getting anything why is there that's because we didn't use this console log anywhere inside our program right here so that's why we are not able to see anything so now you might be thinking like what's the point of writing this return keyword we can write a console log well in a real world projects you are not going to be writing console Vlog like ever I mean like you will right there for yourself but you your client will not know what in the world is a console log they will just open their browser and they will just navigate through their website or you can use JavaScript for anything else but they do not know nothing about console.log so this console.log is only for developers it is not for clients so we are not going to be writing any code to just print something to the console we are going to be using this return keyword and this return keyword as the name suggests that it will return some data from this function so I'm going to just remove that and it will now allow us to return this data from our function okay so we are just providing this expression like we are adding X Plus y like if you provide the value of 10 to the X and the value of 20 to the Y so it will just add then it will give us 30. now you might be thinking like how in the world can I see the result of this function so I'm going to just delete these comments right here you can either use like console.log right here and just wrap this function inside your console.log just like that and if you sound then and here you can see you are now able to see this result right here and you can also do something like I'm going to remove there and I'm going to also remove that and so you can store the result of your function in some sort of a variable so like in this case I'm going to just throw that in ons res cons res and it will be now equals to uh this the result of this function right here you can give any name you want like this is just a variable which we are declaring right here and we are just storing the function value inside that variable okay so I'm going to just log this rest to the console and it will work just fine so I'm going to just sell there and here you can see when log uses 30. I'm going to just change the name to like I don't know res one I'm going to duplicate that a few times so we have rest 2 and then we have a Race 3 right here in this case I'm going to just specify 100 and 200 and in this case I'm going to just specify 1000 and 2000 right here and now I'm going to just log to the console res 1 rest 2 rest 3 so rest two and rest 3 right here okay so this is how we are going to be creating a function this is how we are going to be calling the function and this is how we are going to be returning the data from this function and this is how we are going to be storing the result of this function call inside your variable and now if you sell there and here you can see we are now getting 30 300 and 3 000 right here so everything is working the way we expand the world and I can guarantee like later on in this course we are going to be writing a lot of function for a lot of different kind of things and if you join me in my 100 days of projects I build like 100 projects in 100 days and all of the videos are totally available for free on my YouTube channel if you want to check it out so feel free to do that and then you will be able to create a lot of projects and I use this function like countless I can't even imagine like like how many times I use this function keyword and how many time I've created a function and you will get a lot of experience once you finish this course and you jump to that 100 projects and if you at least build like I don't know 30 project or 40 project you don't even have to create like all of their projects with me but if you build like I don't know 30 or 40 Projects so you would be calling yourself as a JavaScript hero okay so yeah that was it about the functions and we'll learn about how we are going to be declaring our function how we are going to be storing a value inside there we also learned about parameters and arguments we also learned about we also learned about the return keyword or the return result keyword to be precise and all of that kind of stuff so that was it about a function so now I'm going to give you a quick challenge and you have to perform this challenge by yourself but if you can do it that's completely okay then watch a solution I'm gonna place these comments right here go back like so so the first thing I want you to do is that I want you to create a function with the name of my function and this function will take two parameters and any number we pass as argument it will multiply that number as arguments as your favorite numbers and log everything to the console so now I'm going to give you the solution but first of all I want you to go to your own coordinator and write your code by yourself so I'm going to just create this function right here and I'm going to give a name of like my function I'm going to use my P1 p2s parameters you can give any name you want and now let me just return my P1 times P2 and now let me just call that I'm going to just throw the value in the X variable my func and I'm going to just pass my I don't know I'm going to dispense like four comma 3 or something like that and now let me just log there to the console so let me just pass X I'm going to save my file and here you can see it will now gives us 12 why because uh here we are doing our multiplication right here and here we are passing a value to these parameters so that's why we are getting 12 in the console so now let's learn about what in the word is a function declaration and word in the word is a function expression okay function f u n c e i o and there we go so what's the difference between function declaration and function Expressions so now that we already learned about how we are going to be creating a function so we are creating the function by using this result keyword and we are given some sort of a name to it and we are not passing or we are passing some sort of a parameter like username and we are just returning some value or we are logging some value to the console so in my case I'm going to use like uh hello and then the username right here okay so this is how we are going to be creating a function declaration so this is a function declaration right here and a function expression is a function which we store inside a variable so a function declaration is this function which you are seeing right here and a function expression are those function which we store inside our variable now let me just give you example of that and then you will get to know what I'm talking about so let me just call this function like say hello and we are going to be passing the value of like my own name right here so save there we are now getting hello zenward here that was obvious so now let's learn about what in the word is a function expression so let's suppose we have some sort of a function I'm going to give uh all you know I'm not going to give any name uh right here because this function will be anonymous function and now I am going to just log to the console like um that same value like hello user right here here and it is giving me this error right here it is saying like you have to specify some sort of a name to it but in this case I don't want to provide any name I want to store that in some sort of a variable so I'm going to just use like cons greetings like so and it will be now equals to this function right here so now we store this function inside a variable so now this function is called a function expression this function is a function declaration and this function is a function expression y because we stored this function inside this gradings variable so that's why this function is called a function expression right here so we can pass a value to there if you wanted to so what I'm going to do is that I'm going to write a greetings and I'm going to just pour it like I don't know John would be fine a knife is several file and now no I don't want to run it right here come on I'm gonna have to stop there like so and here you can certain log uses hello Hussein and hello John right here so both of the function will work just fine but there is a bit catch right here let's suppose if I cut this function call from here let me just cut there from here and if I place it right here at the top of the file here we are first of all calling the function and then we are declaring the function and now let me just save my file and what do you think will be the result if I sell my file and here you can see everything is working just fine right here like nothing is breaking we are not getting any errors nothing right here but if I just cut this out and if I place it up above this function and now if I sell my file and we are getting that we are not getting that other one but we are getting a nasty error which I hide right here so we are now getting this error right here what are they saying it is saying like uncode reference error cannot access greetings before initialization then at that line right here so now here you can see we create this function by using a cons reserved keyword and here we are calling it right here it is now saying like I don't have any idea where in the water you create discrete functions and then once it jumped to this line of code it will say oh we created there right here but I'm gonna still throw you in error it will read this uh function right here but it will still throw us an error and it will not gives us any result whatsoever so just be aware of the function expression and function declaration so you have to call it underneath your function call right here I mean like underneath your function uh registration so this is how we are going to be registering declaring whatever name you want to call there and this is how we are going to be calling our function so now if I say on my file and here you can see we're not getting not this Arrow again come on I got to do something about that but I'm gonna have to check out the documentation about the anyways so here you can see we're now getting the same result right here so this is a function declaration and this is a function expression right here in JavaScript alright so that was about a function declaration and expression I'm going to delete this coding and now let's learn about something called a callback function in JavaScript so what in the word is a callback function and why you should care about that so this is what a callback function is so when we provide a function is an argument to other function that function is known as a callback function so let's suppose we would have some sort of a function like I don't know I'm going to give a name of like show call Punk right here and here this is a function call by the way this is not a registration this is a function call and if you provide another function right here so this function is now known as a callback function and let's just read this definition one more time when we provide a function as an argument to other function their function is known as a callback function right here so now let me just give you example of there and then you will get to know what I'm talking about so now let me just create a function and I'm going to just give a name of like show called punk right here and I'm going to just part out FN this is just the local variable but I'm just calling it a F10 and you can call it anything you want and here what I'm going to do is then and here I'm going to just write a const value and it will be now set to 10 and here I am going to pass this value to this function right here which I'm going to be creating in a second so here I'm going to just pass it right in here so what are we currently doing we are first of all declaring this function which is a show called function we are passing this callback function and we are calling this function inside this show called function and we are providing this value from this function to this FN function which we will create just in a second I know that sounds confusing but it's not so I'm going to just write show called func and here I'm going to pass my callback function right here so now if I want to provide a callback function so here I'm going to just write a function result keyword and then I'm going to just specify my value as perimeter right here and then my curly braces this function let me just highlight that and this function is known as a callback function why is that because we are passing this function as an argument with this function so that's why this function is known as a callback function okay so I'm going to just log to the console uh that value which we are getting as a parameter right here so I'm going to just send my file and I'm going to explain this quoting in a second and here you can see it really long uses this 10 right here so what are we currently doing first of all we have this function first of all we have this function right here and we are passing another function as a argument to this function and this function is known as a callback function okay I'm going to expand that one more time and here we are just declaring a variable and we are storing 10 value right here and we are passing that value it is now taking that value as a parameter and it is now calling their perimeter right here and we are passing the value to this function right here so we have this variable which is holding the value of 10 and we are passing it right here I know that that sounds confusing but if you write a little bit of functions by yourself so I can totally guarantee like this is the most easiest thing in the world I shouldn't have to say the most easiest one but it is like easy it's not that much difficult to learn anyway so now let me just give you one more example so what I'm going to do is that I'm going to just pass um you know first of all let me just write my grid function one more time and it will take two parameters the first parameter it will take a name and it will also take a callback function CB you can provide like any name you want but in my case I want to just give a name of like CB and that's there I'm going to log to the console like uh hello right here and I'm going to just write my name right here where is their name coming from this name is coming from this parameter right here and we're passing it straightly to this function and now that's done but we also have to call this CB function right here as well so I'm going to just write CB and I'm going to just execute this function execute call or run or whatever you want to call it I'm going to do that okay underneath this function what I'm going to do is that I'm going to just write function and I'm going to just write call me and I'm going to require nothing inside there I'm going to just write like uh console.log and I'm going to just write like I am callback function right here and so that's cool as well now the final thing which I'm going to do is that I'm going to and now it shouldn't have to be a call me function it should be a CB function my bad okay and the final thing which I'm going to do is then I'm going to call this function and I'm going to just specify fi this value right here this function has a radio I'm going to use my grid I'm going to go back so you guys can see everything a bit better I'm going to call my grid function right here the first video I'm going to provide as a John right here so what are we doing first of all we declared this function right here it is now taking two parameters the name and the Callback function we are passing their name right here and we are also passing the value to that function right in here the next thing which you are doing is that we are now creating this function separately and we will pass this function right in here so I'm going to just write CB and now that we successfully register this function right in here so I'm going to just save my file and here you can see it will now give us hello John I'm a callback function right here so what's going on we can also tank this function I'm going to cut that from here and I'm going to just press it right here so you can either do that this will also work if I send my file and here you can see it is still giving us this hello John and I'm a callback function right here or you can just extract drag this function from here and just place it right here and then you can just pass the reference of their function right here as a call so I'm going to just save my file and that was the most difficult Topic in this entire course and now that's not that that was the most easiest one I'm just kidding uh so yeah my callback functions can be useful like all the time we are going to be using this callback function all the time and you have to learn that like because this callback function can be used all the time like there is no way around you have to learn about callback function if you didn't get what I was talking about so you can rewind the video or you can do whatever you want to do you can read the documentation you can go online and search for a callback function but you have to learn about a callback function anyways so that was just a quick introduction of what a callback function is and how to use that so now let me just give you exercise and you have to do that by yourself but if you can do it then I'm gonna give my solution let me just delete all of this coding right here and I'm gonna just place it part here h-o-l-d-s there we go I'm gonna go back so you guys can see everything just like that so the first thing I want you to do is that create a function with the name of show called func then I want you to provide a FN as a parameter to that function inside the function create a variable which holds a value of 10 and pens that value to the Callback function now create a callback function and print the value which you pass as a perimeter to their callback function so give it your best shot if you can do it that's completely okay then I'm going to give you my solution so I'm going to just write a function right here and I'm going to just give a name of like show called punk it will take this FN as a parameter and we are going to be writing our value and it will be now set to 10 and I'm going to just call this fnr right here and I'm going to just pass my value inside there I'm going to call my function right here and I'm going to just specify my callback function it will also take a parameter of the value and now let me just log to the console that uh value right in here so that was just a little bit quick but this is the code which I want you to write so here you can see we are now declaring this function we are passing another function as a callback to this function and here we are just declaring a variable and it is holding the value of 10 and we are passing that value dynamically as an argument to this function we are now calling or executing or running this function right here and we are passing this value as a parameter and we are finally logging that video right in here okay so here you can see it will now gives us 10 we can also change that to like something else and I want something else and know if you sell there and here you can see to unlock users something else right here so yeah that was it about a callback functions in JavaScript Arts so now let's learn about the Scopes in JavaScript so what in the word is a score and why you should care about that so what is a scope first of all a scope in JavaScript refers to the current context of the code which determines the accessibility of a variable in JavaScript so like where in the world you are going to be accessing your variable and where not so where can you access the variable and where can our so this is what a scope will allows us to do so there are two types of Scopes in JavaScript the first one is a global scope and the second one is a local scope so a global scope variables are those variables which are declared outside from the Block and it can be accessible anywhere inside our program and then we have a local scope variables and local scope variables are those variables which is declared inside of a Blog okay so now let me just give you a coding example and then you will get to know what I'm talking about okay so here I'm going to first of all write a simple variable so let on text message and it will be now equals to hi okay so if I log this to the console like text message right here and now if I save my file and here you can see it when log uses high right here so this variable is now declared outside from uh something called these uh curly braces right here these curly braces this is not inside a block so this variable is outside from these curly braces which means like this variable is a global variable but if you put this variable inside these blocks right here so this variable will no longer be accessible outside from these blocks and it will be a local variable so you just have to keep that in mind so I'm going to just put that up above and I'm going to just remove this braces from there global variable right here so now let me just give you example of a local variable so I'm going to just write a function and I'm going to just give a name of like I don't know show a message or something like that and it will not take any parameters so I'm going to remove there and I'm going to just write lead or text message right here that same variable which we create up above and here we are going to be also storing there as a high okay and now let me just log this to a console so if I just write like text message and here instead of writing a high I'm going to just write hello so now I'm going to save my file and here I'm going to execute this function right here so show message and I'm going to execute this function right here so what do you think will be the result like we already created this variable or declared this variable outside from this curly braces right here like this variable is available globally and this variable is also available locally right here but we just change the text like here we just write high and here we just write hello right here so what do you think will be the result if I save my file it will give us high and hello why is that but let's suppose if I just cut there from here I'm going to come in this line out and I'm going to place it right here underneath okay so what do you think will be the result you can all probably see there right here so if I sell my file and here you can see it will not give is this beautiful error right here if I can see it so here you can see it when log uses this uh error right here like syntax uncut syntax error identifier text message has already been declared okay so it will not gives us that error but if we cut there from here and if we put it right here so this variable is only accessible inside these curly braces right here you cannot access this variable outside from this curly braces so don't believe me let me just show you there so what I'm going to do is then I'm going to comment both of these line out and here you can see we have this um variable which we have created right here and now let's suppose if you want to call this same variable outside from these curly braces right here so I'm going to just write like console.log and I'm going to use my text message right here so now what do you think will be the result so if I sell my file and here you can see it is still giving us this error right here like uncart reference error text message is not defined or JavaScript compiler will first of all run our code like it will say like hmm this is some sort of a variable but they have been commented out so I'm not going to run that I'm gonna just ignore them and then it will say like we already have this function and we are now declaring this variable inside this function but this function I'm not function come on but this variable can only be accessible inside these blocks it cannot be accessible outside so here if our JavaScript compiler will see it so it will say like oh then you cannot do that you are violating the rules because you declared this variable as a local variable which means that you can only access this variable inside these curly braces not outside from this curly braces so you either have to come in this line out or you should have to delete that so I'm going to just delete there and now let's just call it and here you can see we are now getting more hello but I'm gonna have to remove this error from here anyways so dance there and now let me just give you one more example of a local variable so let me just write a comment a local very very come on variable there we go so this one will be a global variable which means like we can access this variable anywhere inside our function I mean like inside our program and we can also even access this variable like Global variable inside this function as well so now let me just uncomment this out and now let me just comment both of these line out and let's suppose let me just write a console log I'm going to copy that from here and I'm going to just place it right here send my file it will give us this high right here or why is there because this variable is declared globally which means like you can access this variable anywhere you want you can even create another file and you can call it there but first of all you have to export there from here something which you will learn in a node.js course I already covered there anyways so now you get the idea of a global variables and a local variables in JavaScript and now I guess I'm going to give you one more example and that would be it oh you know I'm gonna just delete this coding from here and you can find all of their code in my GitHub repository so now if I just write a full result keyword and here you can see we have this I I is less than or equal to something I'm going to remove that and I'm going to just change that to five right here and now let me just use console.log of I right here so what do you think will be the result if I save this file and here you can see it from Long uses numbers from 0 through 4 right here and we already know Y is that but now here you can see we can only access this I variable inside of these curly braces right here but what if we try to access this I variable outside from their codes not codes about Curly braces but I'm going to just send my file and here you can see it will give us this result right here that's because we are just logging this one right here but let's suppose if I just unhide um like what you call it errors right here and it will give us this error right here which will say like on card reference error I is not defined and this is coming from this line of code right here you cannot access this variable this I variable outside from these blocks right here why is there because our I variable is currently or local variable there we go and now we are accessing this variable as globally globally if I can spell it so it will give us an error so I hope that makes sense and that was at about a local scope and a global scope now let me just review that one more time and that would be it so scope in JavaScript refers to the current context of the code which determines the accessibility of a variable to the JavaScript and there are two types of Scopes in JavaScript Global scope which can be accessible anywhere inside our program then we have a local scope and local scope can be only accessible inside a curly braces there we go okay so that was all the definition of a Scopes in JavaScript so those are about Scopes in JavaScript so now let's learn about methods in JavaScript so word in the war is a method and why you should care about them so a method is nothing much but it is just a function inside an object so what I'm going to do is say first of all I'm going to just create a separate function and then I'm going to just pass the reference of that function inside an object so first of all let me discard some sort of a function and I'm going to just give a name of like read and it will not take any perimeter or anything like that and I'm going to just write like hello come on my name is and person.name which we are going to be rendering in a second okay we are going to be creating our object in a second and I am come on I am um person.edge right here okay and years or there we go so I'm gonna go back so you guys can see everything a bit better so now we totally register our function right here so now I'm going to just create a person object and we are going to be just calling our function inside this object so I'm going to just give a name of like I don't know if John will be fine and I'm going to also provide this Edge right here and I'm gonna just give him like I don't know he will be 30 or something like that and I'm going to destroy this function right here okay so now we separately create this function right here and we are passing the reference of this function right in here inside this object so now this is known as method in JavaScript so now we successfully provide our object right here so now how in the world we are going to be able to use this object by using this person so I'm going to destroy like a control log person and now I'm going to just execute that function right here so here you can see we have this grid and now I'm going to just select them and now let me just pour these parenthesis and now let me just send my file and here you can see we are now getting hello my name is John and I'm 30 years old right here so this is the first way of creating a function I'm like this is the first way of creating a method and passing the reference of their method right here inside this object so now the next way which I'm about to show you is a real method and throughout the course you are going to be writing your method just like that okay so what we are going to be doing is that first of all we are going to be creating some sort of object and this object will take some sort of a name and this properties and values okay so I'm going to just write like 19 in this case and I'm going to just create my read method right in here okay so I'm going to just first of all provide this property and now I'm going to just provide a function to their property so I'm going to give a name of like you know we already provided name to it so I'm going to just paste it as Anonymous function you can totally provide a name to it if you wanted to but in my case we already provide this name right here so we don't have to rewrite this name again and again and I'm going to run this code one more time so I'm going to just use like return hello and let me just write a comma my name is um pearson.name let me just go back and I am a person.h years old I'm going to pour the comma and now let me just save that and now here if you want to use this grid method inside this person so we are going to be just first of all writing like Consular log and person.greet right here and now let me just execute that so if I sell my file and here you can see it really not users like hello my name is Jose and I am 19 year old right here okay so we can provide a lot of logic right here but in this case we are just creating a simple person object word here so I don't want to Port like a lot of objects I mean like a lot of logic so yeah this is how we are going to be creating a method in JavaScript so later in this course we are going to be jumping into the section called es6 so then we are going to be learning about enhanced object literal then you don't need to provide this oh you know that's other story that's other stories so this is how we are going to be creating a method inside a person I mean like this is how we are going to be creating a method inside an object in JavaScript so this is now known as a method in JavaScript so now let's learn about Json in JavaScript and why you should care about that in the first place so what in the word is Json so Json just simply stand from JavaScript object notation and it is nothing more but it is just a lightweight data interchange format that is easy for humans to read and write and also for machine to parts and generate so Json is often used for like transmitter between servers and application and stuff like that something which you don't have to worry about for now but we will learn all of that stuff once we jump into like the express.js part of this course so if you join me in my node.js journey with Express so you are going to be learning all of their stuff so as I said like Json is often used for transmitting a data between servers and web application as well as for storing a configuration settings and data okay so in JavaScript Json is just represented with a string first of all we are going to be writing uh these curly braces and inside these calibrous you can think about that it's like um a JavaScript object but any key we write in Json there should be read with these curly braces I mean like these double quotes right here you cannot provide a single code that will give you an error you are totally able to provide these double quotes right here okay then you can provide any value like like you can store primitive values you can also store like a reference values like object arrays and all of that kind of stuff which we are going to be learning in this section so later in this course we are going to be creating a separate file for Json but you know let me just also create a separate file right here so you can give any name you want to your file but at the end you have to provide this Json like this dot Json and it will tell our file that we are currently working with the Json right here okay so what I'm going to do is that I'm going to just write a little bit of Json right here so first of all you are going to be writing these curly braces right here and all of your Json code will go inside these uh curly braces right here so in this case what I'm going to do is then I'm going to just write a simple user there like I don't know the username will be some sort of a name and we are going to be separating there and I'm going to just draw like um John Doe or best friend and then we are going to be also storing our Edge right here so he will be I don't know like 20 years old or something like that and I'm going to also write an email for him like uh I don't know JD gmail.com or something like that and I'm gonna just also write his subscribe and here we are going to be just pressing the Boolean where you like true and we can also provide or array right here so I'm going to discuss like a hobbies and he will like uh reading he will also write running he would also write like I don't know cooking or something like that and we are going to be providing our comma in there and finally I'm going to just write address there we go did I spell it correctly and release address there we go and now here I'm going to just for a nested object right here so I'm going to just pass like Siri and he will be from like New York and I'm going to also pass like something else like I don't know and it will be no equals to True okay so this is how we are going to be creating or Json right here so if I sell my file and here you can see this code is totally valid but if I just remove these chords from one of this property right here so here you can see it is now giving us this error here so if I hover my mouse over to it it is giving us like property key must be double coded right here okay so if you are working with the Json first of all you have to provide these double quotes once you are writing your property right here okay so this is how you're going to be creating a simple Json so what I'm going to do is that I'm going to just leave there right here and we are going to be working with Json later in this course uh once we jump into asynchronous JavaScript and all of that kind of stuff so I'm going to just copy there and now let me just leave that right here here and one site come to the JavaScript order so I'm going to remove all of that stuff right here I'm going to just place it right here and I'm going to just throw that in some sort of a variable like conspiration and it will be now equals to this Json right here so once I save my file so here you can see I'm using a prettier so my prettier will remove their course from here but this is still a Json code right here I mean like this object right here JavaScript wire is a method to work with that Json data like we have a json.stringify it will convert our JavaScript code into a Json string and we have a json.parts you know first of all let me just show you this so I want you to just keep that code in mind right here so we have this person right here inside this person we have a few properties and it's values right here okay so now let me just show you the Json dot stringify strn gifi there we go so what in the world is this method on this Json right here so this Json dot stringify will convert what JavaScript object here you can see them and it will convert that into a Json string so what I'm going to do is that I'm going to just lock the console this person I'm going to save my file and here you can see it is now giving us that object I mean like uh yeah it will not use that object and all of their properties and its method right here so what I'm going to do is that instead of writing this person I'm going to just use uppercase Json that I'm going to just write Dot and here you can see we have these two method right here here you can see that we have this parse method and we also have the stringify method so I'm going to just first of all use this stringify and now I'm going to just use there so convert a general script value to a JavaScript object notation yeah that's a horrible definition so I'm going to just store that I mean like sell there and it is now giving us undefined so what I'm going to do is that I'm going to store them some sort of variable like const I don't know Json string or something like that and now let me just log to the console this json's ring right here so if you save that and we are still getting this undefined I don't know why oh that's that's because we are not providing this person over here okay so I'm gonna just copy there and now let me just place this right here okay so if it's same or fine and here you can see it will now convert our object which you see right here here to a Json format right here okay so this is now fully a Json format like the keys are with this double quotes right here and also the radius it will now convert our Pearson object to a string or Json to be precise so this is our first method inside this Json so now let's use the other one which is a parse one so now we already convert our data into a Json so now if you want to revert it back so for that we are going to be using json.parts and now you get it what it will do for us so what I'm going to do is then I'm going to just remove that from here and I'm going to just write like uh cons Parts uh object right here object come on equals to Json dot parse then in this case what we are going to be doing is that we are going to be passing the string data or Json data into this Parts method right here and what it will do is that it will just pass a Json string and returns a JavaScript object based on that okay so I am going to just lock the console this person will begin okay come on um past RPG personal obj so now let me just place it right here save our file and here you can see it will now gives us that object backward here okay so this is how you are going to be working with a Json in JavaScript so later in this course once we jump into the asynchronous JavaScript we are going to be diving into this um Json right here and how we are going to be reading our data from like from this specific data.json file and all of that but that was just a quick introduction to what a Json is and how it works and why you should care about that alright so now let's work with the date and time with JavaScript so how in the world we are going to be working with the dense and time in JavaScript so in JavaScript you can work with this by using a built-in Dev object which is something which I'm going to show you in a second and that date object which you are going to be creating in a second will allowing you to create manipulate and format the dates and time okay so what I'm going to do is that first of all if you want to work with the Dead first of all we are going to be writing a new result keyword then we are going to be using order instructor right here okay so what I'm going to do is then I'm going to just throw down some sort of a variable like there or something like that and now let me just lock the console this current date right here see if it's ever file and here you can see it will now gives us this format and this date right here first 10 and 2023 and it will also gives us this time right here okay with different kind of formats so this is how we are going to be getting uh what do we call it edit right here and also the time by using this dead Constructor so what I'm going to do is that I'm going to just put a specific value to that date so this is how we're going to be providing a specific values to that did and so the first value which we are going to be providing is a year the second one will be for month the third one will be for a day the fourth one will be four hours and then main nuts there we go and then finally we have a seconds and we can also pass a milli Milli seconds as well all the value so these are all the values which you are going to be passing to this object word here so the first video I'm going to just space like I don't know 2024 okay and I'm gonna also pass like um six right here for the month and all you know two is for the month and I'm gonna also provide like 25 or 24 for the hour like for the day I'm gonna also provide like 12 for the power and I'm gonna also for I don't know 30 or yeah I'm gonna dispense like 30 for the minute and I'm gonna also part zero and also zero for seconds and milliseconds so I'm going to just log to the console like her and then and now if it's ever file and here you can see it unlock uses this therefore here okay and it will also gives us different kind of time zones right here something which you don't have to worry about there oh no okay so this is how we're going to be passing our own properties to this new network here okay so what I'm going to use then I'm going to just remove that from here and I'm going to just create one more like constant and it will be now equals to new date one more time and now we are going to be extracting the value from this new there for here so first 4 if I want to extract the value of like here so I'm going to destroy it first of all cons here is a variable and I'm going to just use there dot get pull here all year there I'm gonna just execute there and now let me just log to the console like uh here I'm gonna part my server and also this year's knife is out there and here you can see it will not give us the current year when I'm recording this course right here okay so now let me just extract uh what do you call it the month so I'm going to just use like month and it will be now equals to dead dot get dead um not get there but get months there we go I'm gonna just execute there now let me just duplicate there and I'm going to just provide a month about here and this one will be also a month okay so if you sell there it will also gives us the seven month right here when I'm recording this course and I'm going to also extract like the day so I'm gonna just use like there dot get day um oh you know I'm going to destroy get day there we go I'm going to execute there and now let's just duplicate there let's just change that today I'm gonna also write the date right here so if you sell there and here you can see it will give us the second day okay so now let's just use like const and I'm going to destroy like I don't know how our standard Philippines equals to dead dot get hours now let me just execute that one is oh you know first of all let me extract all of the value then we'll log that your console and I'm going to just use like main notes uh come on if I can split it m i n u t e s and now I'm going to just use like get minutes and I'm going to finally also lock the console like millise m-i-l-i-s-e-c-o-n-d-s and I'm gonna also get my millisecond so if you just use like dead dot get millisecond and now let me just execute there for m-i-l-i come all right there we go so what I'm going to do is I'm going to just log to the console all of them I'm going to duplicate that a few times so we have a day then we have a hour and I'm going to just write a hover right here and I'm gonna also write minutes and I'm gonna dispense my minutes right here copy there place it right here and I'm gonna also pass my let me just copy that from here here let me just pass it right here and also here so now if it's our file so here you can see if I just refreshing find where we are not getting all of that data oh where is there we go so if you have to just write hours and here you can see one log uses the year the month the day hour minute and the second so if I just refresh my browser it will give us different kind of data right here okay so if I just anytime I refresh my browser and here you can see it really gives us different kind of data over here so now that you learned about updates so now you can totally use it with domes uh and we already built a project on that so if you want to check it out on my YouTube channel so so feel free to do that so we can also for different kind of formats forwarded so what I'm going to do is I'm going to just convert date to string representation in different formats so I'm going to just log to the console this day dot to that string I'm going to just execute there and now if it's out there and here you can see it unlock uses this representation of different kind of format by using that string and now I'm going to just lock the console this dead.2 ISO string I don't even know this method by myself but they are just a different kind of formats for using these dirt so I'm going to just save there and it will now give us this format right here and now let me just lock the console this state DOT to local and I'm going to use local string right here now let me just execute this save my file and it will not use this this kind of format of that there right here so we have this dead and we have this time right here okay so this is how we are going to be working with different kind of formats with this and now what I'm going to do is that I'm going to just provide like um so you know I'm gonna just increment my day by one so I'm going to just use like dead dot set that okay so I will set that will allows us to like do whatever you want to do like we can put like own uh debt right here so I'm gonna just use like get there right here I'm going to execute there and I just want to add one day right here so now if you look to the console or that and now if you sell that and here you can see it will now gives us the next day right here okay so if you want to remove one so you just duplicate it there and now you will just um remove one and now if you sell there and it will give us the previous step right here okay so this is how you're going to be working the dates and time in JavaScript so now let's learn about set interval and set timeout in JavaScript so what in the word is a set interval and why you should care about this so set interwo okay so a set interval function is used to repeatedly execute a function or a block of code it is specified interval so we are going to be specifying some sort of interval or duration so it will repeat or execute that code again and again and once it hit that interval then it will stop executing okay so then there was a lot of theory uh first of all let me just show you some sort of a code then you'll get to know what I'm talking about so I'm going to remove that from here and I'm going to just use like set in trouble and in this case I'm going to just pass my function right here so you can Pence your function like this or you can pass your function like Arrow function or you can even create your function somewhere else and you can pass the reference of that function right in here so in this case I'm not going to go that much crazy and I'm going to just provide my arrow function right here and it will just say like I don't know it will just say like this function will be executed um every two SEC cards there we go let me just go back and this is how currently things looks like right here the next thing that you have to do is that we also have to provide the time like how much time time it will tag to run that code so it will take the time in a millisecond so I'm going to just write like r2000 it means like two seconds so I'm going to just save my file and here it will tag I mean like it will give the slide um one two times and it will give us that code again and again so this function I mean like this code will execute again and again so we can stop there by using something called a clear interval so we are going to be learning that in a second but first of all let's just learn about uh what we call it first of all let's just learn about a set timeout then we are going to be jumping into the clear interval with a set interval so I'm going to just remove all of their code from here and now let's learn about a set time um come on time out and we are going to be using this set timeout throughout this course like not that much time but we will use there like a few time in this course so the set timeout function is used to execute a function or a block of code after a specified delay so we are going to be just passing some sort of a number like millisecond okay so it will take that amount of time and once that time is done then it will run our code okay so what I'm going to do is that I'm going to distribute there and now let me just give you example of this so I'm going to just use like set time out and in this case we are going to be passing our function so I'm going to just pass my function you know I'm going to just pour my regular function right here I'm not going to recording any name to this function because we are not going to reporting I mean like we are not executing this function anywhere inside our program except uh this set timeout so we don't have to provide that name right here so this function is also known as Anonymous function in JavaScript by the way so that was a side topic so I'm going to just log to the console like this function will be X security come on this function will be executed after three seconds so I'm going to just pass my three seconds right in here so I'm going to just provide a milliseconds which means I'm gonna write like 3 000 instead of writing uh 300 or 30 or something like that so in this case it will take that mail is I mean like in this case it will take that uh delay in milliseconds so which means like this code will only run once we hit three seconds so I'm going to just save my file one two and three you should give us something man okay there you know certain log is like this function will be executed after a three second so there was just a main difference between set interval and set timeout functions in JavaScript so once we use a set interval function then it will run our code again and again until we use something called a clear interval okay so now let me just give you example of there so what I'm going to do is then I'm going to store this value like um interval ID so it will give us that ID right here as a result so I'm going to just use like set control I'm going to just pass my function to it I'm not going to be providing any perimeter or any name right here and I'm going to just pass like 1000 right here and you know what I'm going to destroy this comment right here so this code will stop the interval after 10 seconds okay so I'm going to just lock the console like this function is being executed and the interval okay Enter Wall come on int i n t r v l let me just go back and now if you sell there and here you can see it will run this code again and again like for countless Infinity time right here until we pass something called a clear interval so now let's just work with there so stop the interval after 10 seconds okay so what I'm going to do is I'm going to just pass my set timeout function okay right in here we're not going to be passing any parameter or anything like that and here we are going to be just using a clear interval okay this function and now we are going to be just passing this video so it will just give us like one let me just show you that in a second I'm gonna just comment this line now so now let me just use that I'm going to just lock the console like interval interval ID right case if you sell that and here you can see it will give the step one and it will now start executing that code right here okay so I'm going to just cut there from here and now let me just uncomment this clear interval and I'm going to just pass my interval ID right here okay and I'm gonna also log to the console like and curl walls top or stop come on s t o double p e d there we go and I'm going to just pass like I don't know I'm gonna dispense like 10 seconds I'm going to destroy like one two three four okay so I'm Gonna Save my file and now let's just wait for it to clear my interval so first of all this code will start executing again again we're right in here and then finally it will give us interval stop right here okay so this is how we are going to be stopping over interval and that was the main difference between the set timeout and the set interval function in JavaScript so the first thing I'm going to do I'm going to create a folder and I'm going to just give my name up like part two and you can give any name you want I'm gonna right click on him and now let me just open that by using my visual story recorder as throughout the course I'm going to be using a visual story recorder and you are totally free to choose whichever kind of code already you like okay so and probably your coordinator will totally be different than mine and now let me just hide these um what do we call it activity bars and all of that kind of stuff and we are going to be starting over conversation in a second but first of all let me just create a file I'm gonna just give a name of like index.html and the second one would be um I don't know app.js or something like that and you probably know all of that stuff which I'm doing right now if you don't so you should definitely check out my previous course on JavaScript which is a part one of this course and now let me just link there I'm going to send my file all right click on M and I'm going to open with the live server so it will not open my file in a live server so say bye to this one and now let me just see why it's stacking anyways so now I'm going to just right click on him and click on this inspect area then I'm going to just click on these three dots unduck into separate windows so I'm going to just click on them and now I'm going to just click on this console right here and it is already giving me that error and I didn't figure out because I don't have any time to figure this out anyway so I'm going to just remove this error from here and everything is working that we've explained to work so I'm going to just zoom in a bit and this is how we are going to be writing our code and this is how we are going to be testing the result of our coding like so now let's start our discussion by learning about our template strings in JavaScript so one are template strings and one you should care about that so template strings and also known as a template literals are a feature in JavaScript they're allowing you to create a strings with embedded expression something which we are going to be discussing in a second and they are denoted by these big text which I'm going to also show in a second and instead of using a single course or a double quotes and template strings provide more flexible and concise where you construct a string especially when they involves variables or Expressions so this is what are template literals or strings definition is so now let me just give you example and then you will get to know what I'm talking about so first of all what I'm going to do is that I'm going to log something to the console by using either a single chord or by using a double quotes right here okay so what I'm going to do is that I'm going to just write hello right here inside my console I'm going to save this file and here you can see we are now getting this hello right here okay by the way you can also see there whenever I save my file it will convert my single quotes to double quotes why is that that's because of this extension which I've been using right here so prettier and you can install there to format your core but you don't have to if you want to install it so feel free to install it if you don't want to do that so you don't have to anyway so that was a side topic I am going to just remove that from here and I'm going to just write like single course of like I don't know this is some and then I'm going to hit enter right here and I'm gonna just write like random next right here so now here you can already notice like we are now getting this error right here like this red squiggly lines underneath Vortex winds them that's because we cannot write our Android here like we're gonna write a new line by using this uh what do we call it uh these single chords right here so if you want a new line for that we have to just write this four slash and these are something called a string sequence you don't have to worry about that I'm going to sell my file and here you can see it when log users like this is some random text right here but this is not a better way to write your code if you need some sort of a new line or spaces or indentation or anything like that so for that we can use something called a template or literal some people call it literals some people call it a template strings so what I'm going to do is that I'm going to just write a console log and I am going to just use my back text right here so where is that vertex located inside our keyboard so these back ticks are located underneath your Escape key and above your tab key so anything you write inside these vertex will be written and as it is so in this case if I just write like this is sum and if I hit enter right here and if I just write like a random text any period it is not giving me any error whatsoever right here but if I sell my file and here you can see if unlock uses this new line right here if I just pour a lot of spaces right here like I'm gonna end in the code like a lot of time so let me just write my credits ring here so here you can see if unlock users like this is sum and it will give us that amount of indentation which I provided right here and then it will give us this random text right here so this template literal or string whatever you want to call it will be very useful and it's very like powerful I'm going to show you why it's so powerful in a second but first of all let me just save this code and here you can see it will not use that exactly the same message right here okay so what I'm going to do is that now let me just introduce you the expression inside this template literal so what I'm going to do is that I'm going to just remove these text from here and now if you want to write your JavaScript expression inside this core or you know first of all let me just give you the older way of writing this course so what I'm going to do is that I'm going to destroy like uh I don't know yeah you know I'm gonna first of all I need to show you that Expressions uh so I'm going to just write this dollar sign and then I'm going to just write these curly braces right here like my opening curly brace and closing curly brace right here if I just write two plus two inside there and if I send my file and here you can see it will not use this full right here why is that because if you just write this dollar sign and also these double curly braces so anything we write these curly braces will be totally valid JavaScript like unlike this one if I cut this score from here and if I store it in some sort of a like I don't know variable or something like that so it will just word exactly the same like this so don't believe me let me just show you them first of all images are declare some sort of a variable and you know what I'm going to just remove this stuff from here and now let me just declare some sort of a variable so I'm going to use like const first name let me just zoom in a bit so you guys can see everything a bit better and it will be now holding the value of like Hussein now let me create one more variable which will select last name and it will be now holding the value of web dev right here okay so now if I want to render the content or render this variable dynamically to this uh string course right here or whatever you want to call it screen codes uh this is attempted literal or template strings anyways so the name doesn't matter you can call it whatever you want to call it okay so now I'm going to just write this a dollar sign and then my opening curly brace and closing curly braces and this is the JavaScript Lan or the JavaScript word right here like I can even declare variable I can write whatever I want to write which I'm going to also show you in a second so let's suppose if I want to render this value I mean like this value which is holding this variable right here so I'm going to just copy that from here and I'm going to just place it right here I'm going to sell my file and here you can see we are now getting this housing right here inside a console okay so that was the first step and now I'm gonna just write like space and then I'm going to write my dollar sign one more time and then my opening curly brace and closing curly brace and I'm going to just write my last name and now I'm going to save my file and here you can see we are now getting this uh Hussain web right here and we are not just limited right um what do we call our variables we can even write arrays and we can also write a lot of stuff so in this case I'm going to just write like I don't know my name is and then I'm going to just write a special file and here you can see it really long use like my name is and then this February right here which I provided right here and it will give us my first name and also my last name right here so as I mentioned a second ago there we are not just limited right over variables we can write arrays as well so I'm going to write my dollar sign and opening curly brace and closing curly braces and inside these curly braces as I said that we are now inside the JavaScript plane so we are going to be writing our Breakers right here and here we can write like whatever you want to store inside our array so I'm going to just write like one two and three or something like that and now if I sell my file and here you can see we are now getting one comma two comma three right here inside this array so that's there what I'm going to do is that let me just uh declare some sort of or not declare uh let me just create a function I'm going to give my name of like intro or info to be precise and I'm not going to be providing any parameters I'm going to just return like uh I don't know uh hello or not hello but my name so now if I want to render this function dynamically into my template literal so how can I go about doing that well the syntax will be exactly the same so I'm going to just write a dollar sign and then this curly braces right here so if I just write info so this is now known as the reference to this function right here so if I save this file and here you can see it when long uses this entire code right here but if you just want to get this uh result of this function so for that we have to execute this function inside this uh template literals I'm going to have to execute this function right here I'm going to save my file and here you can see we are now getting like that same result like my name is Jose and I'm 19 year old okay so this is how you can render your JavaScript expression your arrays your variables you can even render these objects but for that you will have to pause that and all of that stuff which I'm not going to be showing you not right now so that was just a basic example of what attempted literals is and how it works and why you should use them rather than um es5 older way so let's suppose if you just wanted to render this first name and last name variable by using the older way of JavaScript so for that you will have to write code like this first of all I'm going to write this first come on first name and then I'm going to write a plus and then I'm going to write an empty space right here and I'm going to write plus one more time then last name and yeah I can just do that I'm going to save my file and here you can see we are now getting this within web right here but if you want to write some other message so I'm going to just write it like um this is some mess message or something like that I'm gonna have to close that then we have to write plus one more time and now if you sell there and here you can see it is looking clunky and we would have to write code like that we would want to write a code like that nowadays so now we are going to be writing these template literals a lot of time but not all the time because in some situation as I mentioned like if you just write like hit enter somewhere it will use that text as it is so it can be dangerous in some situation but in majority of time we are going to be using it and it is going to be just fine okay so then was it about just the basics of what our template Littles are and how it works so now I'm going to give you a quick challenge and you have to perform this challenge by yourself and if you can do it that's completely okay but you have to at least give it a try so what I'm going to do is that I'm going to just select everything and remove them and I'm going to place my instruction right here so the first thing I want you to do is that I want to restore this in the template literal right here so you can create a variable and store that there or you can and just log to the console this and the next thing which I want you to do is that I want you to create two variables the first name and the last name so I want you to store your first name and your last name and then use that variable in the template literal so log everything to the console and then there will be here so give your best shot if you can do it that's completely okay and now I'm gonna give you my solution so what I'm going to do is that I'm going to unhighlight all of their coding I'm going to copy that and not recording but just a text okay so now I'm gonna just write I don't know variable and it will be now equal to text and I'm going to just store this text as it is inside these template literals I'm going to log there to the console by using a text I'm going to save my file and here you can see it from logos like the quick round fox jumps over the lazy dog and by the way this text includes all of the letters uh or alphabets whatever you want to call it uh in English so it includes so it includes everything from it through Z I know you're probably aware of that but anyways they aren't aware of this uh sentence so now you know what this is anyway so now I'm going to just write const Earth's name and it will be now equals to Jose and now let me just write launch name and it will be equals to web dev and now let me just log to the console by using a bank text and first come on not like that Juan Jose and you are teaching and you don't even know what the hell you're teaching anyways I'm gonna steal my file and here you can see it when long uses Hussein web dev right here inside a console so that was your first challenge in the second course and that was it about our temporary literal so next we are going to be learning about error functions in JavaScript so I'm going to erase every single thing which I currently have on my screen so now let's learn about what in the world are error functions and why you should care about there so Arrow functions also known as a fat Arrow functions are a concise and surer way to define functions in JavaScript they were introduced in ecmascript 6 some people also call it es6 for short import a more compact syntax compared to the traditional function expression okay so this is just a basic definition of a arrow function and and what basically error function allows us to do is that it allows us to a lot shorter over code and you will see that in a second why I said this sentence so what I'm going to do is that first of all I'm going to just create a function right here and I'm going to just give a name of like grid and if we take one parameter of user and I'm going to just return uh hello and then this username right here now I'm going to just log this function with the console by using a grid method and I'm going to just provide my own name right here if I save the file and here you can see we are now getting Jose I mean like hello Jose right here inside a console so this function is totally fine like you can always use this function and you will always use this function not always because now I'm going to introduce this Arrow function so you will fall in love with arrow functions but this function is like totally okay but if you want to refactor this code to the arrow function so it will now look more shorter and awesome so I'm going to duplicate this lineup code and I am going to comment this line out so if you want to refactor this code to using Arrow functions so for that first of all you will have to remove this function result keyword from here so say bye to this one the next thing which you have to do is that you have to write this equal to sign right here the third thing which you have to do is that here you are going to be writing this fat arrow and that's it baby now we have the same or file and here you can see we are now getting this hello Hussein in the console if I refresh that and we will still get this hello Jose Insider console okay so this is the arrow function which I've been talking about so now you might be thinking like hmm this isn't that much cool I mean like you just have to remove this Arrow uh I mean like this reserved keyword of function we didn't do anything at all and here we also have the provided spared Arrow right here and it will confuse me a lot so instead of doing there I would prefer using a functions like this you are totally wrong because now I'm about to introduce you to a bit more more cleanliness so what I'm going to do is that if you have one parameter right here if your function takes only one parameter you can also omit these parentheses from here if I sell my file it will edit again but that's because I'm using this prettier extension which I am going to show you right here I'm using this earlier extension it will just prettier my code that's why it will provide these parentheses right here but if you just have only one parameter right here then you can totally omit these parentheses from here so I'm going to just remove that if you have like more than one parameter like I don't know username uh username two or something like that then you will have to provide these parenthesis right here it will give you an error if you import these parenthesis if you have like more than one parameter right here and also if your function is not taking any parameter whatsoever so you cannot remove these parenthesis from here you have to provide these empty parenthesis right in there but if your function is taking only one parameter so you can totally omit that parenthesis from your function so I'm going to just write username I'm going to remove these parenthesis from here okay and the next thing which I am going to do is that I'm going to also remove this return keyword from here so I'm going to just remove this return keyword from here but if you remove this return keyword from here you will also have to remove this uh curly braces from here as well so I'm going to just remove these curly braces right here and why did I do that like I removed these curly braces and I already removed this return keyword right here then because currently my function is only holding this one line of code if you have like more than one line of code like I don't know line one line two so then you'll probably use this return keyword and you will also need to use these curly braces right here so currently we just have this symbol function okay so then we have to just write this uh what do we call then we totally can remove this return keyword from here and also these curly braces from here as well okay so if I just remove there oh my God what did I do if I just remove that and there we go this is your function now okay if I sell my file and by the way you can totally omit these parenthesis and I'm using the period extension so anytime I sell my file and it will just add it right here if I send my file one more time and here you can see it will give us that same result right here inside our console it will give us hello Hussein right here and in some situation we would also want to store our function in some sort of a variable and that function is known as a function expression which I already covered in my previous courses if you want to check it out so I am going to just write like const result keyword and there we go from this area to this area we are creating our variable and from this area to this area we are now adding this function inside this variable right here if I sell my file and here you can see it will work just fine okay so that was our Arrow function and now let me just give one more example and double bear okay so I'm going to just create one more function I'm going to give a name of like I don't know double or something like that it will take only one number right here I'm going to just return there and I'm going to just use like I don't know number times two and now let me just log there to the console like console.log and double come on double and if I just provide like two it will make it four I'm gonna sell there if I just write like five if it will make it 10 if I just write like I don't know you like 10 it will make it 20. so it will just double everything up right here so this function will only double anything which we provide right here so this is what currently this function is doing right here okay so now if you want to refactor this code to using an arrow function so for that first of all we are going to be removing this function result keyword from here instead I'm going to just write a console result keyword right here because I prefer discounts keyword you don't have to if you don't want it to but in my case I'm going to just use this constret keyword the next thing which I'm going to do is that I'm going to just write this pad arrow and I'm going to also remove the anytime I say oh not a fair error here I'm going to have to just write this equal to sign right here and then I can poorly remove these parenthesis from here and then I can write my arrow function right here I can totally remove this return keyword from there and I can also remove these curly braces as well and here you can see this is our function we can pick that a little bit more if you want to so instead of writing this number I'm going to just write n right here and then there we go so this is Now awardable function right here not taken from their place but taking from this area to this area this is our double function by using using this Arrow syntax right here so now if I sell my file and here you can see it gives us that same exact eraser right here if I just write one it will make it two if I just write like 100 maybe it will make it 200 right here so that was it about this Arrow functions so now I'm going to give you a quick challenge and you have to perform this challenge by yourself and if you can do it that's completely okay then watch the solution and then I'm going to give my solution so I'm going to remove every single thing right here and I'm going to just place these instructions right here and now I'm going to go back so you guys can see everything a bit better so here I give you a little bit es5 of writing this set timeout function right here and you don't have to do anything except I want you to just refactor these functions to a es6 arrow function so this is what you have to do I'm going to uncomment this call right here and you just have to like uh I already totally like how to create error function and all of that kind of stuff and in this exercise you will face a little bit difficulties not just a lot of difficulties but just a little bit but I want you to give it your best shot if you can do it that's completely okay then watch a solution and here I am about to give you my solution so first of all I uncommit that code and now I'm gonna just select my first function right here and I'm gonna just hold Ctrl and hit D hit D hit D hit d one more time okay so I can totally remove this function result keyword and here I'm gonna just have provide this Arrow function right here and there we go now you might be thinking like I can totally remove this curly braces right here can I so if I just remove that and if I just remove this uh right here so it will now gives us this error right here it uh not error but it gives us this uh error right here and it will say like unexpected this cone if I just remove that let me just remove that right here it will still gives us that error which means that we cannot provide that oh I mean like we cannot remove these curly braces right here why is that because here currently we have like this set timeout right here and we are passing this function as a callback function right here but this function is not aired like we are just returning a lot of function from this function anyway so that was the other story so now if I just sell my file and here you can see it will take a little bit of time because these two second it will gives us hello two seconds later it will give us hey then it will give us I don't know on the must-have it will give us um high and then finally it will give us uh where is the bonjour there we go come on we have to get this one sure it's not giving me bonjour um I guess we messed up something or what's going on okay there we go it's now give us this bonjour right here yeah so that was it about the arrow functions in JavaScript and next we are going to be learning about enhanced object literals in JavaScript so now it's time to learn about enhanced object literal so I'm going to just paste the introduction up there so what in the word or enhanced object literal and why you should care about them so enhance object literals introduced in ecmascript 6 or es6 whatever you want to call there and they are a set of enhancement to a Syntax for defining objects in JavaScript so these enhancements make it more convenient and concise to define object properties and methods so it will just allow this to shorten our code just a little bit okay so what I'm going to do is that I'm going to just create a function and inside this function it will take come on I'm going to just create a function and this function will tag a little bit of parameters right so I'm going to just write it like name Edge and work as a parameter and now I'm going to just return some in card object from this function okay then celebrate new one you can totally like Define this object uh outside from this function right here but I'm just doing it for this example right here so what I'm going to do is that I'm going to just write a name as a property and the value will be coming from this user perimeter so I'm going to copy then I'm going to just place it right here I'm going to provide my comma and then I'm going to also set the edge to this same user perimeter which we are going to be getting once the user provides some sort of a value to it okay so you will see that in a second and then finally I'm going to just write work to work right here okay so if I sell my file this is how currently things looks like right here and now let me just write like const Jose and it will be now equals like user and we're going to be passing this position right here as a value and the edge will be 19 and the work will be programmer right here now let me just log this Jose into the console and this is how currently things looks like so now let me just Define the score a little bit and then you will get to know what I'm talking about so here we are just defining a function right here and the function name is user it is taking three parameter of name H and work right here and inside this function what we are doing is that we are just returning this object from this function right here and here you can see as a property to that object we are just writing name Edge and work and as a value speaking for these videos manually if I just write like nine uh I don't know well then manually I can also write like 19 and I can also write some sort of a work or anything like that but I'm not going to why is that because I'm going to be creating this function for a lot of user and a lot of users is going to be providing their name their Edge and their work okay so if I write this property manually like if I just provide this value manually so then if I just rerun this course so it will give us that same data but if I just write uh this data dynamically so the user will be able to provide their own name their own Edge and their own work or profession or whatever you want to call there so now let me just save this file and here you can see we are now getting this object right here we have this edge of 19 we have this name of Jose we have this work of programmer right here we can create this uh what do we call it we can call this function for a lot of users so if I just write like I don't know Alex or something like that I'm going to just use my user right here and I'm going to just write nlex there we go and Alex will be I don't know 18 year old and he will be like designer or something like that b-e-s-i-g-n-e-r there we go so if I sell that and now if I log to the console this analytics semi file and here you can see when log uses their data for this LX right here so what enhanced object literal will do for us which we learned a few seconds ago it will allows us to shorten our code or specifically the object code so if you want to use enhance object literal in JavaScript so if the key and the value or the property and the value are totally the same so you can either remove the property or the value it doesn't matter but you have to remove one I mean like you don't have to do that but if you want to use the enhanced object properties like the newer way of writing a JavaScript code so you can totally remove that so if I just remove that from here and now if I sell my file and here you can see our core will still work totally just fine right here like we are now getting this Hussein we are also getting this LX right here if I refresh there and here you can see it will still use us that Hussein and also this LX right here so this one is working now let's suppose if I just remove this Edge and we are now getting this name right here and we are getting this Edge right here if I sell the edge is also working why is that that's because we are using something called enhance object literal and it provides some sort of enhancement to shorten our code okay so what I'm going to do is that I'm going to also remove this work from here let me just remove the semi file and here you can see everything is working just fine so if you want to use enhanced object literal in JavaScript or in es6 specifically if your property and the value are totally the same so you can either remove the property or the value and then your code will work just fine so that was the first enhancement it provides the second enhancement it provide is something called the methods which you already learned in the previous course but let me just say that one more time methods are a function available inside objects only okay so then we can call that a function a method so now let's suppose if you weren't using the es6 enhanced object literal so for that you will write your function like this intro now control like so and then you'll have to write your function result keyword then you will have to give some sort of a name or you if you want to remove the name so you can totally do that and now let me just log to the console like uh I don't know I don't know I'm going to start like my name is and then the name and I am Edge years old period I guess that would be fine oh you know and I uh you know and I am a word and I'm a work so if I sell that so now let me just call this method inside of these properties so I'm gonna remove this Alex from here and I'm gonna just write this Dot and then intro there we go so I'm gonna have to sell the server file and here you can see we are now getting um my name is Jose and I'm 19 year old and I am a programmer so or function or not function or our method is working poorly fine but if you want to use the enhanced object literal so you can remove this function result keyword so you just have to remove this colon and you have to remove this function result keyword right here so if you do that and now let me just save my file and now let me just refresh and here you can see this is working totally fine if you want to convert this score to like Arrow function so you can totally do that if you want to so you can just write this colon right here and then here you just have to specify this Arrow right here go back like so and this is how you can introduce this uh enhancement of es6 so now let me just save there and here you can see this is also working totally fine so that was it about enhanced object literals in JavaScript uh and now I'm going to give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch a solution but first of all at least give it a I don't know two or three seconds and not a second at least give it a two or three or maybe four or five minutes and if you can do it then watch a solution so before we proceed with our challenge first of all let me just say this uh this challenge is devoted to I don't know maybe two or three categories so you'll have to perform either two or three challenges so I'm going to just place it right here so this is going to be the first part of your challenge so here is some sort of a es5 code and I want you to convert that to the es6 core right here oh you know first of all it will it will just confuse you so I'm gonna just have to write one result keyword right here and I'm gonna just remove these columns from here so here you can see we have these three variables right here by using the es5 we use this water reserved keyword right here and then we have this like one object right here which is holding these properties and it's very used right here so what we are currently doing is that we have this object we have this same property of a and we are now rendering like we are tagging this a variable and we are placing it right here so it will give us one it will give us two it will give us three if I sell my file but before I do I'm gonna have to log that to the console obj let me just save that and here you can see it when long gives us this a 1 b 2 c 3 right here so I want to refactor this chord to using the es6 way of enhanced object collaterals and you're your best shot if you can do it like this completely okay then I'm going to give you my solution so now it's time for me to show you the solution so I'm going to just click on one of them and I'm going to hold Ctrl and hit d d if you're using a visual studio coder and I'm going to just change that to either using a constant third keyword or using alert wizard keyword so I'm going to just stick to the cons result keyword I'm going to go back so there you guys can see everything a bit better now that we learned about enhanced object lateral so we can totally shorten the score by just removing these properties and there we go I'm going to just remove this column from here and this is how currently our code looks like right here so now let me just test out my code is that everything working let's just refresh there and here you can see yes indeed it's totally working just fine it is showing me the value of A1 B2 C3 so that was the first part of our challenge so now it's time for the second part of our Challenge and then we are going to be jumping into the default function not a default function but yeah I guess we are going to be jumping into the default function parameters but now let me just give you the second challenge of this enhanced object laterals so what I'm going to do is that I'm going to remove all of this coding right here and here you can see we have this es5 core right here so what are we currently doing is that we are creating a library with a useful function or a useful method inside it so we are just creating a library and inside this Library we have like useful method this will this sum method will allows us to add two numbers this multi method will allows us to multiply two numbers right here and you can add more if you want to but this is just my simple little library right here okay so what are we doing is that if we call this sum method on this Library uh property or in this Library object to be precise so if you just provide some sort of a value so it will add it and it will multiply it right here okay so this is the es5 way of writing this library but I want you to convert that to the es6 way of writing this uh object so give it your best shot if you can do it that's completely okay then what the solution in here is my solution so the first thing which I'm going to do is then I'm going to just select this one and I'm going to just replace it with const you don't have to do that you can change it to let if you wanted to but in my case I'm going to just stick to the cons result keyword and now the next thing which I'm going to do is that I'm going to use my enhanced object literal so I'm going to just select this one hit Ctrl D and I'm going to just remove that or we have to write this because here we are going to be using the arrow function so we have provided these um what do you call a semicolons or columns whatever you want to call there and then I'm going to just use my third Arrow now let me just remove these curly braces and also these braces as well I'm going to also remove this return keyword from here and if you are wondering like how am I doing this uh Magic so then you'll have to watch my visual story recorder course which is totally free by the way so yeah that was it but instead of writing these columns we have to just write this comma right here because this is an object which we are currently working on right here so now if I sell my file so now here you can see it when log uses this addition which we were expecting and it will also give us this multiplication which we were already expecting right here so now let me just see like do we have the third part of this challenge or not and then I'll come back to you in a second and it turns out we have yet another challenge right here so what do you want to do first of all let me just comment this line now so first of all we are going to be creating a function of es5 come on ES file so this function is a es5 function right here so the first thing I want you to do is that I want you to change the name from es5 to es6 code and then here you just have to use this enhanced object lateral you can even convert that to a error function if you wanted to but you don't have to do that anyways so just convert the name to es6 and use your enhanced object literal this is a simple challenge which you can perform just in a second so I want you to give your best shot if you can do it as completely okay then watch your solution I'm going to select there I'm going to just change that to es6 right here so it will change it right here and here as well and now what I'm going to do is that I'm going to just remove this properties from here now let me just save there and let's just check it out is it going to do that magic or one liner yep it does so I am going to ride right here so now if I send my file and let's just log this to the console because we're returning a value from there so if I save my file and here you can see we are now getting the edge of 19 the height of 200 height of 200 and the name of Jose right here so yeah everything is working just fine so that was at about enhanced object literal and next we are going to be jumping into the default function parameters time to learn about a default function parameters so what they are and why you should care about that so let me just place it right here so default function parameter introduced in ecmascript 6 or es6 allowing you to assign a default value to a function parameter and when a function is called and its argument is not provided for a parameter the default value will be used instead so we are going to be providing some sort of a default value so then the value will be used and this feature makes it easier to handle cases where the arguments might be missing or undefined so this is just actual definition of what a D4 function parameter means and now let me just give you examples so let's suppose in some situation we would have some sort of a function and we can assign different kind of default values to it so we can provide either true we can import false we can import some sort of a number all the data types are available we can just work with the arrow I mean like uh arrays we can work with objects anything like that so in this case I'm going to just create a function and I'm going to just give my name up like count two five so this is going to be the name of my function and it will just take this count right here and we're not going to be providing any default value to it not right now and now let me just pour a little bit of like awful logic it's not important by the way but I am going to still provide it anyways and if your account is certainly true so what do you want to print to the user you just want to print to the user first of all I'm going to just write a four and I'm going to just write let I equals to 1 and I is less than or equal to 5 and then I plus so we just want iterate over and we just want to log to the console like count and then let me just render this eye right here okay so here what we are currently doing is that we are just creating a function with the name of count to five and if our count is equal to true then what do we want to do we just want to lock the console like count and then from one through five right here so what I'm going to do is that I'm going to just execute this function right here and if I save this file so what do you think will be the reason if I just save this file without providing any value to that account anything like that if I save this file here you can see we're not getting anything right here inside our console but instead if I just provide the value of false let's suppose and let me just sell there and here you can see this condition is now currently false so that's why we are not getting anything why is there because this function is taking some sort of account and here we are checking if that count is equal to true so then we want to just print a user like count and count from one through five and here we are just porting the True Value right here and and as a value to that local variable or a parameter we are passing false right here but let's suppose if I just write true right here and now let me just sell there and here you can see our code is working just fine right here so now in this case we can totally provide the value of like some sort of a default value to it so we can either provide an empty array we can provide some sort of a string we can provide anything we want so in this case I'm going to just provide the default value of password here so once our game is totally started so it will not do anything but if you just write true right here as a call to this function so then our game will totally work just fine so if I just sell this file and here you can see it will still gives us uh that uh what do we call it there are numbers right here from one through five right here that's because here we just specify true right here but let's suppose if I didn't provide anything and if I sell there here you can see this is not working but instead if I just remove that and if I just provide the default value to True right here and now let me just save that and here you can see this is working just fine we are not even providing anything to this function why is there because we are already by default providing the value of True Word here so that's why this function will run and it will give us this I right here from 1 through 5 right here so that was the first example now let me just give you one more example and then it will be time for you to perform some sort of a challenge so let me just create one more function right here and the function name will be some sort of ratings right here already things would be fine I'm going to give a name of black ratings and it will take some sort of a red right here so we are going to be just providing some sort of a red and now let's check if our rate is equal to 5 so if the user provide the rating of 5 so what do you want to print to the user we just want to print your user like uh I don't know High array things or high ratings and smiley face right here and if that's not true so what do you want to print your user else f um and I'm going to just write one more condition like if rating is equal to zero so we just want to lock the console like uh low rate things and then this server face right here okay so let me just say on this file currently our function is now taking this red parameter right here then inside this function we are checking this reading already to be precise if our rate is equal to 5 so we just want to print a user like higher ratings in smiley face and if we're rating is equal to zero so we just want to print a user like low ratings and third place right here so now let me just call this function right here this ratings I'm going to sell this file and here you can see it will not give us nothing right here why is that because here it is requiring some sort of a value but we are not providing any value nothing so now let me just add like five and now let me just save there and here you can see it is now giving us the high ratings right here but if you change that to zero let me just change that to zero and now if you sell that then it will now gives us the low rating and the surface right here but we can also provide our default value to it so like once our program runs and the user didn't specify any rating whatsoever so their current rating will be set to zero okay so if the user didn't specify anything so the user will just see the low ratings right here and the third phase and now if the user decided to provide like if the user provided like I don't know five or something like that and if you sell that and here you can see we are now getting higher ratings right here so this is how we are going to be providing a default value and you are not just limited to write like a numbers you can write arrays of values in some situation you would need some sort of arrays of radio but I'm not gonna go into that much detail later in this course obviously you are going to be learning all of their stuff so now let me just give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch the solution so I'm gonna just place this description or instruction right here so the first thing I want you to do is first of all let me just go back so the first thing I want you to do is that I want you to create a function with the name of multiply with two parameters it will take a and b as a perimeter which will multiply the perimeter value so provide 1 is the default value to that parameter B not to this one but to this one right here and by the way I forgot to um okay and so not to a but to B so give your best shot if you can do it that's completely okay then watch your solution and then I'm gonna give my solution so what I'm going to do is that I'm going to create a function and I'm going to give a name of like multiply there we go it will take the perimeter of A and B and B will be now equals 2 by d41 okay so now let me just return uh come on what the hell is going on and so now let me just return the a n times B There we go so this is going to be our multiply function now let me just log to the console this multiply and I'm going to just provide five right here so it will just multiply it with one right here I didn't specify any value for the B but I specify the value for the a which is 5 right here so I mean like 5 times 1 will give us five if I save there and here you can see we are now getting five we can find more values like five two like five times two will give us 10 so if you save there and we can provide more values to it just like that but here currently our math will be starting from I mean like math banks will be starting from one because this is the default value if the user didn't specify any values whatsoever right here so if I just write 2 it will give us that two once again right here so that was the first one but I'm thinking to give you one more challenge but you know what you know what that said like you don't even have to do any you can yeah I guess that would be it so now the next thing which we have to do is that we have to learn about a spread operators in JavaScript all right so time to learn about a spread operators in JavaScript so I'm gonna go back so what in the work is a spread operator and why you should care about that so the spread operator is a new addition to a set of corporators in JavaScript ecmascript and it takes an iterable for example an array arrays are iterable and there are a lot of things like strings and all of that kind of stoves so it takes an iterable just like array and expand it into individual elements and the spread operator is commonly used to make a shallow copies something which I'm going to be also talking to you in a second of JavaScript objects and using this operator makes the core consigns and enhance its readability so that was it about a quick introduction about a spread operator so next thing which you have to do is that we are going to be learning about a Sprint operator in different kind of ways so we are going to be learning with functions we are going to be also learning it with arrays and we are going to be also learning it with objects right here so now let's talk about the functions first so what I'm going to do is then I'm going to just create a function and I'm going to give a name of like give me four so this is going to be my function name and I'm going to provide a lot of parameters to it like comma a comma B C D and there we go so now let me just lock with the console like a and then here I'm going to just write a comma Now let me just pass this a right here so now let me just duplicate that a few times then we have a b and we'll take a b then we have C it will also take C and I guess yep then we have finally D and now let me just provide a d to it so now let me just log that to the console like console.log and here what I'm going to do is that I'm going to describe one no not here but here first of all we have to just but you know what I'm going to just try to give me four and I'm going to just provide one two and three four five there we go okay or maybe four will be fine because we are passing four perimeters right here so now let me just save there and here you can see it now gives us the a value of one B value of two c value of three and D value of 4 right here okay so there is a little bit problem so first of all let me just create array and I am going to pass that array as um argument this function right here so I'm going to just write counts colors and it will be now equals to some sort of a colors like red uh I don't know green and we have blue then we have um I don't know chill or something like that so now that we want to pass this colors array to this function right here so I'm going to just paste these colors right here and now if I sell there so what do you think will be the result if you check it out and here you can certain log uses the a value of all of this area right here and the rest of them will be undefined right here so what's going on well first of all we are just providing the perimeter I mean like we are just providing the array value to this first parameter and we are not providing anything to this B and to this C and also to this D right here so what will be the solution if you want to provide this with these values to this array right here I mean like this function right here as an array so the solution will be you guessed it we are going to be spreading out this array and then we are going to be providing that same value I mean like that exact value which this array is holding to this function right here so how the syntax will look like well the syntax will look like this so we just have to write three dot dot dot dot so this is the array spread operator right here okay so now if I just write like dot dot dot in this case and now if I just save this file so now here you can see a is now holding the value of red B is holding green blue and teal right here so now what we did we just spread out or we expand this array into individual elements here which you can see right here so we just expand all of these items out from this array and we just put them as in individual elements to this array right here I mean like to this function right here so what I'm going to do is that I'm going to go back and this is how currently things looks like if I didn't specify the spirit operator so if I just remove that here we are going to be specifying this value to the first one and the rest of them will be undefined but if I just write these dot dot dots right here now let me just save there and here you can see everything is working just fine so that was it about spread Operator by using a function or with using a function so now let's use it with arrays and then we are going to be jumping into the objects as well so I'm going to just create a simple array I'm going to give a name of like certain nums or something like that and I'm gonna just store a few numbers right here like one uh two and also three right here so I guess that would be fine now let me just create one more so I'm going to just write const more nums or something like that and here I'm gonna just store a few more numbers like four then five and then uh six right here so now if you want to combine both of this array into one array so for that we can use a spirit operator one more time so I'm going to just write a cons you can give any name you want but in my case I'm going to give you a name of like current care because in this case we are just concatenating both of these array or we are joining both of this array into single arrays so for that we are going to be writing first of all these brackets and then we are going to be writing this dot dot dot and the first array name then comma dot dot dot the second red name which will be the more um string nums or something like that and now let me just lock the console this concat and what do you think will be the result if I sell my file and here you can see are now combine it into one compound I mean not component but into one array right here so here you can see we have one two three four five and six for here so this is how we can use the spread operator with arrays so it will first of all spread out or expand all of the items which this currently this array has and it will just make it like a separate elements okay and then we can combine there into this um one variable right here so that was the second example by using arrays and now you know let me just give one more example so I'm going to use like alert and pupils or something like that and I'm going to just add a few pupils like Rosanne and Alex and also Jordan or something like that so we have these three pupils right here now let me just log with the console um some new person like I don't know Kumar or something like that and then I'm going to just use like dot dot dot and then this pupils array so what we are currently doing is that we are expanding these items to individual elements and we are passing it right here just like that let me just copy that from here or you know I'm gonna cut the knot here come on not this one I'm going to select them I'm going to take my time I'm going to select that and let me just cut it out and I'm going to just place it right here so this is what's going on behind the scenes so or array will not be empty we will still have their items but we are going to be taking all of these values right here and we are going to be placing all of these items right here by using this spread operator syntax so I'm going to use dot dot dot and pupils right here so that's what we are doing behind the scene so now we can add more items to it so what we are currently doing is that uh you know instead of their console log I'm gonna write like const all peeps or something like that and it will be now equals to this array right here okay so now let me just write this array and here we can provide more items here like um I don't know um John or something like that so now let me just log to the console this all peeps this was a horrible name I'm gonna sell that so here you can see it will now first of all gives us this command then it will give us Jose and Alex Jordan and John right here so what we are currently doing is that first of all we are just creating this empty array not an empty array but we are just creating array and we are adding this first person inside this array and then what we are doing is that we are cutting out all of these persons or pupils from there and then we are adding it right here and then finally we are providing this John as the last item to this array right here so now let me just go back so this is what's going on behind the scene and this is what we are currently seeing right here so now I'm gonna just go back and let's suppose if I didn't use this spread over right here so now let me just remove these three doors from here so now I'm asking you a question what do you think will be the result of this chord right here so I'm about to save this file and I want you to give me the answer I want you even speak the answer by your own lips so now I'm going to sell this file and here you can see it can log uses first of all this array item right here I mean like the first item inside the array then it will give us the nested array right here why is there because we are creating this array right here and we are passing it as the nested array to this array right here so it will not use this nested array or two-dimensional array whatever you want to call there and then we are adding this new person to this array right here okay so if you just use like dot dot dot and now if you sell there and now let me just check it out and here you can see it will not give us all of the pupils which this array has right here it shouldn't have to be one of pupils you can just write like a fruits you can write on numbers you can write anything you want okay so that was a spread operator with arrays and now let me just give you example of spread Operator by using objects so what I'm going to do is that I'm going to just Square two objects and it will give us something or um shallow copies so the arrays was also shallow copies but it will also allow us to copy the objects as well so I'm going to just use like object one and we are going to be writing some sort of object with a I don't know it will hold some sort of a video like X and then we would just write 2 for the Y and I'm going to create one more so object two and him will be now equals to Z and we have this 3 as a value to it right here so if you want to combine both of these object into one object like if you want to contain both of these object into one object so we can also do that and you already know how to do that so I'm going to use object 3 in this case and I'm going to just write like first of all the object syntax then dot dot dot object one comma dot dot dot object two okay so if you sell fine now let me just log that to the console so I'm going to use my object 3 right here and now let me just sell there and here you can see we are now getting this object one and object two I mean like property one with the value of one I mean like property ends with a value of 1 and property one with the value of 2 and property Z with the value of three right here but if we weren't using this um um what do we call a spread operators or dots now let me just remove that so what do you think will be the reason if I just sell this file I'm gonna sell my file and here you can see as you guessed it it will give us a nested objects inside this huge object right here so first first of all we have this huge object and inside this object we have these two objects right here Y is there because we are currently creating this object separately and we are passing these objects so now let me just cut there and we're passing these object just like that so now let me just uh pass it right like so and I'm going to just remove that and this is what we are currently doing right here inside or array I mean like inside or object and yeah so let me just go back and spread operator will launches to do exactly that so it is now a cleaner syntax and we can do a lot more than that so now let me just give you one more example of this so I don't know I'm gonna have to just try it like once person and I'm gonna just use like name of Zen my own name and I'm going to also write the age of 19 and I'm gonna also write the gender come on gender oh male that was obvious and now I'm going to just clone that person so I'm going to just write conse clone you can give any name you want by the way it doesn't even matter and then here what I'm going to do is that I'm going to just write like dot dot dot person and I'm going to just add I don't know a few more properties to it so if you just write dot dot person and now let me just log to the console this clone and now if you sell there so now this clone property I mean not a property but in this clone will also hold the value of all of these properties and its values right here so here you can see we have uh Edge we have gender and we have male right here okay so we can just look at the console if I just lock the console this person and if you just sell there and here you can see it gives us that exactly the same thing so in the first line of code we are cloning that um object right here and in the second line we are just printing the exactly the same one so I'm going to just remove them and we can you want to specify more properties to this object if you wanted to so we can just write a comma and we can just write like I don't know one more property or something else like uh I don't know work and here will be like a programmer and now let me just provide one more like location of like I don't know or something like that I'm gonna send my file and here you can see we know just word uh the work and we already provide this location right here so that was it about the spread operator in JavaScript so now I'm going to give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch the solution and then I'm gonna give you my solution so the first thing I want you to do is that I want you to make a clone of this array and also the array too by using the spirit operator and I already give this arrays right here then I want you to clone the user object by using the spread operator right here and I already do this uh user right here so users have to go your best shot if you can do it that's completely okay then watch the solution time to clone or array 1 and array two so I'm going to just write like R and it will be now equals to like don't and then R and also I'm going to provide a comma and then dot dot or two right here okay and I'm going to just throw that I don't know const and this one will be R3 to be precise um why are we getting this error and it should be three dots not two dots right here and now I'm gonna log there to the console by using error three kind of awful name for a variables but anyways I'm Gonna Save that and here you can see we successfully cloned it by using a spread over and now let's just clone this user as well into a separate variable so I'm going to just use like const clone user and it will be now equals to um this object.user and now let me just log this alone user into the console so now I'm going to sell my file and here you can see we have an edge will be now set to 22 and name will be set to Jenny or gen whatever you want to call that okay so then was it about a spread operator in JavaScript and next I don't even know what we are going to be learning next but it's coming time to learn about the rest cooperator in JavaScript so word in the word is a rest operator and one should care about that so as we already learned like a rest I'm an expert opener so the center X was looking like this so the syntax will be totally the same in the rest popular as well so this is going to be the spread operator and this is going to be the rest operator in JavaScript so now let me just provide the definition of that then you will get to know what I'm talking about so the risk parameter syntax allows the function to accept an indefinite number of arguments as an array and providing a way to represent a periodic functions in JavaScript so we have periodic functions in golang and in C plus plus as well so periodic functions are those function which except like unlimited amount of parameters so in JavaScript we can now totally do that as well okay so that was just a quick definition of what in the work is a risk operator and now let's learn about that so what I'm going to do is that I'm going to just create a simple function right here and I'm going to just give a name of like user and it will take one parameter of like user data over here okay and it will also lock the console on this user data okay come on data and now let me just provide some sort of a data for this user function I'm going to just point my own name right here so now if I just sell this file and here you can see we are now getting this version right here inside a console so everything is working just fine but in some situation we will want to provide a lot of values four or different kind of parameters so like we would have I don't know edge of 19 we would have a profession of like programming and we would have a Hobbies of like football or something like that okay so if we log there to the console nothing will happen well obviously nothing will happen because we are just logging this user data to the console but now if you wanted to make this function as a variative function in JavaScript so how can we go about doing that well as I said the syntax will be totally the same as a rest operator I mean like the spirit operator so we are going to be just writing dot dot dot and if we just write this dot dot dot right here like three dots and if we save our file and here you can see it is now giving us all of their values which we specified to this function as array right here so here you can see this is array which is holding all of these value so this is how we are going to be making our function variating which means like this function can take unlimited amount of parameters right here but there is a bit catch if I just write like if I just brought a comma right here and if I just write something come on something else and here you can see it is already giving us this error so if I roll my mouse over to it so here you can see it will say like a rest parameter must be at least in a parameter list so which means like this is not in a parameter list no more but if we cut there from here and if we just brought a comma right here and if you write it again here so here or problem is totally solved so what are we currently doing we are providing this something else let me just log that to the console I'm going to write a console log of something or you know there's something else was awful but I'm going to just write X right here and I'm going to support x squared here so what are we currently doing is that we are creating a function which is taking two parameters not or two but a lot of them but here for this X1 we are going to be passing this Hussein radio but for this unlimited parameters it will take all of these parameters and I just provide these three right here and you can provide countless and it will give you that countless data over here inside your console so now let me just save this file and here you can see first of all it will give this whole Android here why is there then it's because we are taking this parameter of X we are logging that inside this function and this x is now holding the value of this Jose like the first parameter like the first value which we are specifying to over function and the rest of them will goes to this user data right here where we are using this a rest operator right here so we cannot write this rest operator uh here it will give us an error but we can write it like before all of these other parameters so if I cut that from here and I'm going to just follow the comma and I'm going to just write not before but after so this is a rest parameter so now let me just give one more example and I guess that will be here so I'm going to just give you uh one more example so what I'm going to do is that I'm going to just use function and I'm going to give a name of like person and it will tag like first name it will take the last name and it will also take dash dash dash non Digital Dot Dot and hobbies there you go or Hobbies can be unlimited amount so that's why I just write dot dot of hobbies or rest parameter of hobbies so I'm going to write like first name and my first name will be first name there we go and now let me just duplicate that a few times then we would have our last name and then we would have our hobbies and let me just remove that name from him let me probably separate right here like so so this one will be now taking the last name and this one will be now checking the Hobbies there we go so if I sell this file now let me just put a lot of values through this function so I'm going to just use person and I'm going to just first of all provide my first name of Jose then I'm going to write my last name of web dev and now let me just pour a lot of hobbies like I don't know if programming is also my hobby football is also my hobby and guess what singing I'm pretty good at singing as well I'm going to sell my file and here you can certain log uses like first name or Hussein last name of web dev and now my hobbies are programming football and singing so that was it about rest operator in JavaScript or in es6 to be precise and now I'm gonna give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch the solution and then I'm gonna give you my solution I'm gonna remove all of this so I want you to create a function which will take unlimited amount of parameters and I want you to log every single one of them to the console so yeah I know that's easy you can totally do them so what I'm going to do is that I'm going to just create some sort of a function the name doesn't matter but I'm going to just give a name of like uh I don't know uh very yeah dick and I'm going to lock the console.dot of all of their programs or not dot dot but I'm gonna just use params right in here come on let me just copy the params and I'm gonna just place it right here now let me just log to the console like um what's in and web dev let me just check there and now I'm going to save there and here you can see it will not use this hosen web dev if I just write 19 and 20 and something else like some sort of array or something like that let me just save that and everything is working just fine so that's how we can use the very edit parameter or the rest over in JavaScript so I guess this is the best time to learn about the best part of this course which will be restructuring so what in the word Rd structuring and why you should care about them in the first place so destructuring allows us to unpack the value from the data structures like array objects into a separate distinct variable so we are going to be learning about restructurings with arrays with objects and also with function as well okay so destructuring as the name suggests that it allows us to destructure our data structure and it will allows us to unpack the radius or the data from the arrays or from the objects and we are going to be also learning about a function as well okay so it allows us to unpack or extract data from different kind of data structure so that was just a quick introduction about destructuring in JavaScript and now let me just give you a quick example of restructuring so first of all we are going to be learning about these structurings with arrays then we are going to be jumping into the objects and finally we are going to be learning about restructurings with functions so first of all let me just create some sort of array and I'm going to just give a name of like two like just random name and I'm going to just store like one two and also uh three inside the array and what I'm going to do is that if I just log to the console like I don't know if I just lock the console like one and if I just write zero send my file so here you can see it unlock users one and now if I just duplicate there like two times now let me just write one and now let me just write two and now if you sell that so here you can see it will not gives us like one two three right here inside the console but let's suppose if we have like 1000 of these items so you would be difficult for us to like extract the data by using this syntax and then it will be difficult for us to store them in some sort of a variable like const uh I don't know I'm going to give a name of like one so this is going to be the first value which we've extracted from this full array and now we store there inside this one variable so now if you just log that to the console by using this console log of one cell there and here you can see it will now give us one right here so instead of doing there we can use something called restructuring in JavaScript so the syntax will be looking a bit weird but I want you to stick with me first of all I'm going to just write a const result keyword then I'm going to just use my brackets right here and here I didn't specify any name to it right here I want you to notice there as well and here I am going to just use the equal to sign and then the data structure in which you want to unpack or extract data from so in my case I'm gonna just copy there and I'm going to just place it right here and in this case I want to just get this one right here and I wanted to store that in some sort of a variable so if I just write like 1 on and now let me just log with the console come on Consular log of one and now let me just say over there and here you can see it will now extract this data from this data structure right here and it will store in this one variable right here okay so um this is how we are going to be getting the data this is how we are going to be storing that data and this is how we are going to be logging that data from this array and this is how we are going to be destructuring that value from the array right here let's suppose if you also want to get this 2 and 3 as well so I'm going to just write const not cost but comma 2 and also three okay so now let me just log to the console the other ones like two and also this one three and now if you sell there and here you can see we are now getting one two and three right here inside a console okay so that was the first one but let's suppose let me just remove that from here and I'm gonna just give him like I don't know two values right here I'm going to remove that third one and now if I want to lock the console icons red uh and I'm gonna also pour it like yellow and I'm gonna also support like green I'm gonna also provide blue and it will be now equals to the spur okay so currently we don't have any values like red green and all of that kind of stuff so now let me just look at the console this red and knife is out there and here you can see it will now gives us one right here why is that why are we getting this one Insider console the name but once we are destructuring the array so the name doesn't matter we can give banana we can give Apple we can give any name we want so here we are just storing two values right here like one and two right here and we are just giving the first item the name of red right here if you're just given the name of like well I don't know my own name let's suppose if I want to just give a name of like my own name and I'm going to just place my own name right here let me just save that it will still give this one right here why is there because currently we are destructuring the first item from this array and we are now storing it inside this joseon variable right here and we are logging this position variable into the console so that's why we are getting this uh one right here so now let's suppose if I want to get this blue let me just copy there and if I just write blue right here now let me just save there it will give us undefined word here Y is there because currently we just have these two items right here so we have one then we have two if you just log to the console let's see alone let me just put a yellow and here you can see it when along gives us two right here but if you try to access this green it will give us undefined right here so you get the gist how we are going to be destructuring the values from this array and how we are going to be storing there in some sort of a variable okay so that was the second example so you can also provide a default values to or array so we can just write like let a comma B and what I'm going to do is that I'm going to just use my array syntax and a will be now equals to 5 then I'm going to also provide a comma and B will be now equals to like error something like that and it will be equals to this one right here so now let me just log to the console this a and now if you sell there and here you can see it will not give this one right here Y is there because currently we just specify this one right here but if you didn't specify anything to the array and now let me just save that it really gives us 5 right here why is there that's because currently we are adding this value as a default value to the item of that array okay so this is how we can destructure there but we can provide more values to that like let's suppose if I just write like one in this case it will give us one and if I just write comma of 2 and silver file and it will now if you lock the console B and now if you save it it will now gives us two right here but this is how we can provide default values to it so like let's suppose if I didn't specify any value for the second one and if I log to the console this B and what do you think will be the result so I'm just asking you a question so here we are just declaring these two variables right here we are assigning a D4 values to that and here we can totally specify like a new value if you wanted to so what do you think will be the result for the score I'm gonna sell my file and we are going to be getting the advert here why is that because we are specifying this ad as a default value to this B variable and here we are not specifying any new value whatsoever so we can just specify new value right here uh new video or anything like this if you sell there and it will now take this new value right here okay so then once our default videos for our rings by using the already structuring but we can also parse an array which will be returned from a function so let me just create some sort of a function and I'm going to just give like for the Simplicity I'm going to just give a name of like f in this case and it will just return like one and two it will just return there this is a simple example and I'm going to just create two variables Like A and B like so and now in this case what I'm going to do is that I am going to destructure the value from this function which this function is giving us first of all let me just call this function I'm going to call this function right here and now I'm going to destructure both of these values right here or unpack both of these values and I'm going to just store that in different kind of variables right here okay so I'm going to just use this array syntax one more time and I'm going to just use like a comma B right here so we already created this a comma B and I mean like we already created this area variable and we can also create this variable by using the B just like that I mean like just write it the let result keyword and we can also create it by using this syntax but we don't have to I'm just doing it like one liner so yeah let me just put my comma in here so now let me just lock the console that a and I'm gonna also console log this B so if you sell that and I want you to first of all take a look at this code and then I'm going to show you a result in a second so here you can see it will now give us one and two right here Y is there and where you want this one and two are coming from well first of all this function is just returning array of one and two like array with the properties or the values of one and two right here then we are creating like these variables Like A and B and we are storing that value which is this which is coming from this array we are storing that we'll use from this a variable and B variable and then we are logging that any variable right here and B variable right here so that's why we are getting there one and two right here so now let's learn about how we are going to be ignoring some return values for from a function okay so this is how we are going to be storing or extracting some data from a function by using this array method I mean like this array data structure and now let's learn about how we are going to be ignoring some return values from a function so I'm going to just write that function and I'm going to just write F right here um just for function name and it will take no parameter nothing and I'm going to just return like I don't know one comma two comma three okay insert will just return this array right here and I'm going to just use a little bit weird syntax in this case one more time and I'm going to just write a comma and then I'm going to just provide one more comma and then I'm going to just use B and it will be now equals to F and now let me just call that okay now you might be thinking like Jose wait a second you forgot something right here well I didn't forgot something but here we are ignoring the second right here like this second video from this function so this is how we are going to be ignoring that in this structuring so anytime you want to do a restructuring and you want to ignore one thing so for that you just have to write this empty space and then just write a comma and which means like we are now ignoring the second value from this um return value of this function right here okay so now let me just log to the console this what the hell did I do so now let me just go console log this a and then also B to the console so I'm going to sell my file and here you can see we are now getting a and three right here so we are not getting this 2 why is that because we are not even destructuring the we are destructuring the value of one and we are also restructuring the value of 3 right here which you can see so we are destructuring and we are assigning it into this a variable right here and we are destructuring the value of 3 and we are assigning it to this B variable right here okay and the name doesn't even matter you can give Apple name you can give any name you want but that can only work on a radius structuring it will not work on uh something called object destruction which will go into a bit shortly so that was just the basics of a ready structuring and now let's learn about how we are going to be assigning the rest of the array items to a variable so this is how we are going to be doing that you know first of all let me write a comment like assigning okay so how can I go about doing that first of all you'll have some sort of array so I'm going to just write a so we are going to be destructuring the first item from the array and we are going to be storing that in the a variable and then we will just store all of the rest of the items into this B right here okay so it will just store all of the rest of the items into that b so I'm going to just write like I don't know one and uh I don't know two and then three now let me just log to the console a and now if you save there and here you can see it will just gives us this one right here but if I look to the console this B and if you save there so here you can see it will now just create an array a separate array why is there because here we are using this syntax and it will now give us the two and also the three right here okay so it will just make a separate array for them and it will just store it I mean like it will just store the rest of the item inside the array like we can provide countless of them you can write a true we can write uh I don't know numbers also of I don't know we can just write a nest array or something like that and now if I sell there and here you can see it will now store it inside this beam it will just create a separate array for there and it will store all of that items inside that server array and if you just log to the console this a it will just gives us that one right here which is the first item of their array so that was just at about the basics of the structuring and the basics of already structuring and now let me just give you a quick challenge you you have to perform this challenge by yourself and if you can do it that's completely okay then watch your solution and after that we are going to be jumping into the object restructuring so I'm going to just place this coding right here or instruction to be precise so here you can see I already give you this array right here and your task is to use the array destruction to extract the first three colors from their colors array and assign them into a separate variable's name color 1 color 2 and color 3. after extracting the colors lock each variable's value to the console so give it your best shot if you can do it that's completely okay then watch a solution then I'm going to give you my solution alright so now it's time for me to give the solution so the first thing I'm going to do is that I'm going to just create a restructuring I'm going to give a name of like color one and color two and I'm going to also pour the color of three right here and it will be now equals to one it will be now equals to this colors array which we've created up above I'm going to cut there from here and I'm gonna just put it right in here come on I'm gonna put it right here and oh I forgot it should be color it's not a color and now let me just lock the console each of their color I'm going to use color one comma color two and comma color three right here so now if I sell my file and here you can see it when log uses the red green and blue right here because we store the red green blue as the first values so that's why we are now getting the red green blue is inside the console we are extracting each of these variables I mean like we are extracting each of these values and we are scrolling there in separate variables and we are giving him different kind of names right here so yeah that was that about already structuring in JavaScript so now let's learn about object destructuring in JavaScript so in a ready structuring the order does matter but the name doesn't like you can give any name you want and it will still work but on the other hand in object destructuring the order doesn't matter but the name does okay so now let me just put there right in here so in object destruction string order doesn't matter but the name does okay and the syntax will be totally the same but instead of writing these curly braces we are going to be using I mean like instead of writing these brackets we are going to be using these curly braces okay so now let me just go inside and now let me just write some sort of a code and I'm not going to be spending that much time in the object restructuring because it is simple and easy so I'm going to just write a object of student and it will be now equals to the value will be now equals to name opposition and I'm going to also write a position of like um p o s i t i o n of like I don't know first position or something like that and I was on the first position by the way and roll number I will number my rule number was I guess 27 or yeah I guess it was 27 yeah I'm gonna go back so this is going to be just our first object word here and now if you want to restructure these properties and you want to store them in some sort of a variable so how can we go about doing that I'm going to just write like const research keyword and then here instead of writing these brackets we are going to be using these curly braces and let's suppose if you just want to restructure this name from this student variable I mean like student um object so we can just write a name and then we have to just write equal to sign and then the data structure name in this case it is a student so I write a student right here now let me just log to the console this name right here and now if I sell them and here you can see we are now totally getting Jose and right here inside of console why is there because we are just destructuring this name of uh I mean like we are restructuring this name right here and we are pencing it right here so that's why we are getting this name but let's suppose if I just give name of like I don't know color one as we did a second ago so now let me just save that and I'm going to have to use this color one right here I'm going to sell my file and here you can see it when long uses undefined right here why is there it was working a second ago but why in the world is not working right now well that was uh already structuring and this is the object restructuring and as I said that objects are also data structure which allows us to label our data so here we are already labeling our data so we don't have to provide a new level for our data I mean like we can totally still do them which we are going to be learning next uh but we don't have to like here we are already labeling over there now so we don't have to label over data once again so I'm going to just write a name and we desstructure the name now I'm going to write a name as separately and now if I want to like restructure this position or the wrong number or something like that I'm going to just write my position and roll number and now let me just log to the console like position and I'm going to also lock the console roll number okay just like that a knife is several final and here you can see we are now getting this Hussein and first first inside a console first and it will log uses first and 27 so yeah my rule number in University was I guess 27 yeah I know that so that was the object destructuring in JavaScript and now let me just give you a quick challenge and you have to perform this challenge by yourself but if you can't do it that's completely okay then watch a solution so I'm going to remove all of this coding right here I already give this object so your task is to use the object restructuring to extract the name page and country properties from this person object after extracting the properties log everything to the console let me like store everything inside a variable and log the videos to the console so here you can see we have this object right here and I want you to restructure the name the edge and Country but not the gender I didn't specify this gender word here so you're don't have to okay and I give your best shot if you can do it as completely okay then watch the solution now here is my solution so what I'm going to do is that I'm going to just write name Edge and Country right here and it will be now equals to come on it will be now equals to the prison right here and now if you lock the console this uh name let me just duplicate that a few times we have the edge and also we have the low not location but country and now if you sell them and here you can see we are now getting John Doe it will be 30 and the country will be USA okay so let's suppose if I destructure there like so if I just cut there from here and I'm going to just write country here and I'm going to provide my name right here and here I'm going to just provide my Edge right here like a reverse like in a reverse order if I sell that it will still work right here but we are not able to write code like this in the already structuring so you just have to keep that in mind we cannot provide a label for that I mean like we totally can which you will also see in a second but if you provide some sort of a level like let's suppose if you just instead of fighting a country we decide my my own name and if I just write instead of a country like my own name so it will give us undefined right here okay so you just have to keep that in mind anyway so that was it about object restructuring in JavaScript and next we are going to be learning about how we are going to be renaming or restructuring in JavaScript all right so very quickly we have to learn about how we are going to be renaming our variables and this one will only work with uh objects so what I'm going to do is then I'm going to just write const nominative equals to like X will be equals to 100 coordinates and Y will be equals to 200 coordinates okay and now if I want to change the name so first of all you know I am going to restructure that I'm going to use X and Y and we are going to be just restructuring it from this num and I'm going to lock the console this X and also this y right here let's just save then it will not give us 100 and 200 right here so now if you want to change the name of this X and Y to something else so we can poorly do that you just first of all write this corner right here and then we can give any name we want so in my case I'm gonna just write like I don't know new one and yeah I guess that would be fine and then I'm gonna just also write this uh colon right here then we have to write a new two right here and next we just have to write this new one and we have provided this new two and now if you sell them and here you can see we're now getting the same result like 100 and 200 right here inside a console but now if I try to access this x right here I'm gonna just write X and if I just write Y and server file and here you can see we are not going to be seeing anything if we just see or errors so here you can see it will now gives us this error and it will say like uncar reference error X is not defined why is that because here we are changing the name of this restructuring so that's why okay you just have to keep that in mind anyways so that was it about how we are going to be renaming the names of the variables and now let's learn about object restructuring and a rest operator with or object restructuring so what I'm going to do is that let me just write a comment like object destructuring um and rest operator there we go okay so what I'm going to do is then I'm going to just use my object destructuring and I'm going to just write a and b and then I'm going to use dot dot dot and then I'm going to give a name of like rest okay so first of all the first thing it will do is that it will take the first two video I mean like the first value it will take and it will store inside is a variable the second value it will take in it for the story inside this P variable and then it will take the rest of the values and it will store inside this rest variable right here so what I'm going to do is then I'm going to destroy it like hey a and a will be not equals to uh this is my object by the way I can write it separately but I want to do it in one line I just kind of want to show you this one as well so we have a of 100 and B of 200 then we have CO3 come on 300 and then we have d a b c d i even forgot the ABCD and now we just have to write 400 and E of 500 there we go and now if you sell that let me just go back come on let's just go back I don't know what the hell happened to my visual studio coder so this is how currently things looks like but now if I look at the console a if you say our file and here you can see we are getting this 100 but I don't know where the hell is this area coming from so I'm gonna have to hide it so we are now getting this 100 right here and now I'm going to duplicate there and now let me just change that to B save my file and we are now getting 100 and 200 now let me just comment both of these out and I'm going to lock the console this rest right here and sell my file and here you can see it will now store all of the rest of the values in inside this object right here so this is how we can clone that and this is how we can do whatever you want to do with that so we are cloning and we are destructuring the radius at one time right here so this is what I want you to know so we are cloning and we are um destruction at one time anyway so that was it about object restructuring in JavaScript and now let's learn about or not learn but I'm gonna give you a quick challenge and you have to perform this challenge by yourself if you can do it then watch the solution I'm gonna go back and I'm gonna just place these instructions right here okay so here I already give you this object right here and your task is to use the object destructuring to extract the name Edge and Country property from the person object and assign them into a separate variables name person one person two or like person name and person Edge and person country after extracting the properties log variables value to the console so this is what you have to do so give your best shot if you can do it that's completely okay then watch a solution and now it's time for me to you are a solution and I'm going to just write like const and I'm going to get my name and also let me just write first of all name Edge and Country I want to make sure that we select everything from this person now let me just log this name Edge and Country to the console seller file and we are now getting John Doe 30 USA so everything is working the way we expect him to work but now I'm gonna rename them so if you want to rename them first of all we have to write this column and then we can give any name we want so in my case I'm going to just give a name of like person name and in this case I'm going to just write colon person Edge person Edge there we go and in this case I'm going to just write like person country or location whatever you want to call there I'm going to go back and now let me just log to the console let me just duplicate it there person name let me just log to the console this person Edge person Edge there we go and finally let me just lock the console person country so I'm going to send my file and here you can see we are now getting John Doe 30 in USA United instead of America so that was it about how we are going to be renaming stuff by using a restructuring in JavaScript so now let's learn about a function destructuring in JavaScript so let's suppose we would have some sort of a function so let me just zoom in we would have some sort of a function which will prove the name of the function will be like print person info or something like that and I'm going to just pass like a person as an object so a person as an object there we go and I'm going to just destructure the name of the person and I'm gonna just render that name and I'm going to duplicate it a few times then I'm going to destructure the edge and I'm going to just print my Edge right in here and find I'm gonna have to get the prison country there we go and I'm gonna also report that country right here okay so this is how first of all we are going to be destructuring something from the perimeter of the function and we are going to be passing the videos right here like name Edge and Country and now what I'm going to do is that I'm going to just pass or you know first of all let me just create some sort of object which we are going to be passing so I'm going to use conspiration and him will be now equals to name of uh John Doe and also the edge will be third 20 would be fine and I'm going to also part a country and he will be from like I don't know a REV or you know I'm gonna just go still stick with this USA now let me just say over there and I'm going to use a person not a person but the Korean person info variable right here so what are we currently doing I'm gonna copy there I'm gonna place it right here so what are we currently doing we are creating a person with a lot of properties in its videos right here then we are creating a function and here we are just tagging the person as an object and we are now providing that person this person object is a value or as an argument to this person right here so now if I assemble this file what do you think will be the result here you can see we are now just getting the name and we are not getting anything if you want to get the name so we can just write like um person Dot and name and now if you sell there and here you can see we are now getting the person name of John Doe right here and now if you want to get the ads for that we can use like person.h and let me just settle there and here you can see the edge is now still working just fine and now if you want to get the country you obviously know what we have to do so I'm going to sell my file and here you can see it will also gives us this country right here but here we are like some sort of a repeating Oracle right here like we're writing person dot name Person dot Edge person dot country so instead of doing all of that we can destructure the properties from this function uh I mean like the properties from this object which this print person info function is tagging so we can restructure it right here so what I'm going to do is that I'm going to just write these curly braces right here and I'm going to just desstructure the name I'm going to destructure the edge and I'm going to also restructure the country so now I don't have to like no longer write this person again and again I'm going to select this one I'm gonna hold Ctrl or command and hit D hit d one more time I'm going to remove that say bye to them and now if you save our file and here you can see our code is still working don't believe me let me just refresh there and here you can see everything is still working just fine okay so this is how we are going to be providing a d structure or this is how we are going to be doing destructuring by using the functions okay so that was the first example now we can provide like different kind of nymphs to our function I mean like uh we can rename the property from that function uh function destructuring so we can still do that I'm going to give you example of that real quick and this one will look a bit ugly I can guarantee so I'm going to use like let options and it will be now equals to uh this object right here the title will be like mine menu and I'm going to also write items and the items I'm going to just store like item one and item two in this case and now let me just create a function of show menu and here what I'm going to do is that I'm going to just pass something but before I do I'm gonna have to log to the console like title which we are going to be structuring I'm going to also have to report W as a width and I'm going to also provide our height H as a height there we go I'm gonna also get my item one duplicate there in item two so what I'm going to do is then I'm going to just call this function right here and I'm going to cut this I'm not a curve but I'm going to copy this option from there and I'm going to just place it right here and now if I send my file and we are not getting anything why is there because we are not destructuring anything it really won't give us an error I forgot to show you them but it will give us that error right here it will say like uncalled reference error title is not defined so I cannot go any further you have to specify the title right in there so if you want to specify the title first of all we would have to destructure their properties from this object and then we will be able to use it inside our function okay so if you want to destructure there so the first thing I'm going to do is then I'm going to just write my destructuring like so and I'm gonna just give a name of like uh I don't know I'm gonna just write it first of all let me just destructure the title and then I'm going to specify more values to it so I'm going to write a comma and I'm going to just provide it with w i d t h and with will be now we are going to be renaming that with by the way I'm going to just rename that riff and I'm going to just specify the value of 100 right here then I'm going to write a comma and I'm going to write a height and let me just rename there as well and I'm going to use 200 as a height and then I'm going to also provide a comma of items and now let's just destructure their items which is already available inside these items array right here so we are going to be restructuring this item one in item two so for the IV right these um what do we call this array syntax right here so for that I'm going to just use like item one comma item two right here okay so now everything will work just fine so I'm gonna write item two instead let me just save that and as I told you like the syntax will look a bit weird but if you say our file so my menu is 100 and 200 and we are now destructuring this item one and this item two right here we can even import a default value to this title if you wanted to because in function parameters we already learned about the default function parameters so we can provide like a different uh like a default value like on title or something like that on title like so I'm going to sell my file and let's suppose if I just forgot to include this title like uh I don't know how we cannot do that but we still can provide this or you know let me just remove this title from here and it will now provide on total 100 and 200 right here so this is how we are going to be destructuring stuff and this is how we are going to be renaming the property names and all of that kind of stuff okay so that was at about a function restructuring in JavaScript parts now let's talk about a nested destructuring in JavaScript so an s3d structuring like you already know the name nested so destructuring inside restructuring is known as a Mr destructuring so we have array and inside this array we are going to be creating different kind of objects with different kind of properties in its value so like I'm going to just store like different kind of songs names which are my favorite songs so like lucky you all right so these are one of my favorite songs right here and now what we are going to be doing is that we are going to be doing destructuring inside the structuring so first of all we are going to be using a radio structuring and inside this already structuring we are going to be using the object destructuring so how can you go about doing that first of all we are going to be writing our cons wizard keyword then we are going to be starting over already structuring and we are going to be skipping these two items right here like let's suppose if you just want to get this person I mean like this song right here so for that we can just remove our two persons so I'm going to just write comma and then I'm going to write space and then I'm going to also write one more comma right here and now in this case we just want to destructure the singer so the singer will be this Kendrick Lamar or I can't even pronounce the guy name but we are going to be just writing these curly braces right here and here we are going to be using a singer and it will be now equals to these songs and this is how you can do a nested destructuring so if I log singer to the console let me just save there and here you can see to unlock users that singer right here we can even ignore one more person and now let's just say then it will now give us oh I don't like this guy no more but anyways there was an old chord and we can even rename this singer to something else like I don't know S I guess s would be fine and we can just write s and now let's just sell there and here you can see it will give us still that same result right here so this is how you can do a nested destructuring in JavaScript so the final thing I want to talk to you about in destructuring is something called the destructuring mixture okay so here is a craziness right here I'm gonna also give you the link to my GitHub repository and you can get all of the code anyway so we have this data object right here inside this data object we have the user object inside this user object we have the user ID name Edge email address and inside the address we have City and Country outside from the areas we have the Hobbies of reading panning and cooking then we have a scores or in different kind of subjects like Math Science History outside from that we have a products array and inside this products array we have different of IDs and different kind of names different kind of prices right here outside from there we have different kind of settings right here like dark mode will be certainly true and notification will be set to like email through SMS fonts push will be true and finally we have a language of English right here so now we are going to be doing a craziness destructuring so first of all I'm gonna write like extract oh you know I'm not gonna writing anything like that I'm going to use first of all cost reserved keyword and here we are going to be starting from the user first of all so we are going to be structuring the name of the user the edge of the user the address I'm going to also provide this address right here like a city right there and I'm going to support the country and what I'm going to do is that I'm going to provide a comma in here and I'm going to also restructure my hobbies I'm going to also restructure my score as a math sport I'm going to also restructure the science code I'm going to also restructuring the history scores uh history not schools yeah score yeah there we go and after there what I'm going to do is that I'm going to also write an email I'm going to also restructure their email right here and outside from there I'm going to just write this comma and here I am going to just destructure these products right here and it will be now equals to product um not products but product one product two and we have product three right in here and here I write an object but it should have to be an array because the products was an array of objects so I'm gonna have to write this array right in here I'm gonna write a comma as well and now we have to be structure our settings right here and settings was a dark mode somewhere dark mode there we go and comma and then I'm going to write my notifications and it was um yeah it was also an object and now I'm going to just write an email right here and email will be email uh email naughty email notification so we are now renaming the SMS was SMS no notification if I can spell it I hope I didn't miss it push and push naughty push notification there we go and otific ADI on I'm just hoping that I didn't misspell something and finally we have all languages come on languages product comma in here and provide a comma there and finally it will be now equals to the data okay so we are now destructuring all of that items let me just go back so you guys can see everything a bit better we are not destructuring all of these items right here and we are storing them in different kind of variables here we are doing a craziness like we are doing a nested destructuring and we are like renaming the stuff right here and we are like doing crazy destruction right here so now it's time to log every single thing to the console and then you will get to know what I was talking about so now let me just lock the console the name I want to just write a name because I give my name off name and the language right here so I'm going to send my file and now let's just check it out so why aren't we getting anything inside of console I guess we are getting some sort of error amount of time something okay so we cannot read a property of undefined reading math we did a mistake inside of math so we have math right here and already structuring their own nodes so we have this Math Science and History it should be scores rather than a score so I'm going to sell that and here you can see everything is working just fine so let me just hide these errors and here you can see we have a name of John Doe Edge address hobbies and math Maths for the science core history scores product one laptop and its points then we have ah come on we have to write product two in here and also product read in here semi-file let me just sell there and we have a dark mode of true and then we have an email notification through SMS notification forms push notification true language uh language will be now set to English so this is what I call a craziness of restructuring so I hope you enjoy the structuring part of this series next we are going to be learning about eternity operator in JavaScript so now let's learn about alternative operators so what in the work is a ternary operator in JavaScript so the ternary operator in JavaScript is a conscience way of writing a conditional expressions and it is the only JavaScript operator that takes three operands so first of all a condition followed by a question mark an expression to execute if the condition is true followed by a colon and the expression to execute if the condition is false so this is how currently things looks like first of all we are going to be providing a condition if this condition is true run this code if this condition is false jump to this condition so basically this is a sure way of writing the if and elsewhere else if statement you just have to keep that in mind so this is just a shorter way a conditional expression is just a shorter way of writing this if statement in L statement but not else if statement so I'm going to just remove there so now let me just go in and here I'm going to give you a quick example and then you're getting what I'm talking about so I'm going to just write like that password and it will be equals to 2 in this case and I'm going to just Square some sort of a function it will say come on function and the name of the function will be transfer War pants were uh Checker come on see HPC okay here and it will take one parameter of BS like a password and what I'm going to do is that I'm going to just write a conditional statements like if PS like a password is equal to zero so what do you want to print to the user we just want to return like um I don't know if the password is added by the way not zero if the password is aired so we just want to print the user like strong answer and if the password is not equal to zero so what do you want to do we just want to print the user like and carry first there we go okay so if you just sell this final and now I'm going to just use password checker and I'm going to just pass like I don't know two and if we sell that and it will not gives us nothing um it should give this password isn't okay or that's because we are not storing it in some sort of a variable now let me just write res and now if it's out there and here you can see we are now getting like password should be add characters right here why is that because currently we just specify 2 right here and it is requiring air so that's why we are now getting like pencil should be add characters but if we change that to like uh I don't know uh if we change that to here it's right here and I'm going to dispense this add password dynamically I'm going to paste this password dynamically from the variable so I'm going to save there and it will not use a strong password right here why is there because this password variable is holding the value of and and it is requiring air if the password is air character so we just want to put into a user like strong password otherwise we just want to print it using like yes or should be at least add characters so now if you want to refactor this code we use a conditional another conditional statement but maternary operators so how can I go about doing that first of all I'm going to comment this line out and we can make this code as a one liner so how can we make this quota one liner first of all we are going to be riding a return statement and here we have a condition right here so first of all we are going to be providing some sort of a condition so our condition is right here so if our password is ADD character so what do you want to print the user we just want to print to the user like password not a pencil but strong pencil right here okay if the password is not equal to zero I mean like if the pencil is not equal to n so we just want to print to the user like password should we at least add characters so we will just print this to a user so now if you sell there and now let's just check him out and here you can see it is working just fine right here it is now giving a strong password but if you change that to like something else like I don't know four or something like that and if you seven and it is now giving us password should be add characters right here okay so now we refactor this code to use the conditioner why am I saying conditionals but to use uh what do you call it internally or there we go so this is how we are going to be first forwarding a condition if this condition is true run this code if this condition is false then run this code right here okay so you just have to keep that in mind so now let me just give you one more example and I guess that would be it and then it's time for you to perform a challenge so first of all let me just create a variable and it will be now equals to 25 and now I'm going to just use my ternary operator right here so is adult and you LT I guess this is how you spell adult yeah I I guess you do and here we are going to be passing our condition first of all so our condition is if Edge is greater than or equal to 18 so then that person will be um adult ADD your LT there we go if Edge is not greater than or equal to 18 the person or the boy or the goal is not uh in and oh there we go so now let me just log this is Addle to the console now let's just save it and here you can see it will not use this error right here why is that because here we are just checking if the person is greater than or equal to 18 if the person H to be precise is greater than or equal to 18 so then the person will be adult and here we are checking uh that right here and the person is totally like valid like the person is 25 year old so he is adult or she is an adult and let's just change that to like 10 maybe and now let me just save there and here you can see it will now print us like not in adult okay so this is how we can use our internally operator in Channel script so now let me just give you a quick challenge and you have to perform this challenge by yourself if you can do it then watch the solution so now let me just place it right here if the person have money so you just have to put into the person like buy products if the person don't have any money so you just have to print to the person like they should bring some money okay so yeah I know it's a silly exam so give it your best shot if you can do it that's completely okay then watch the solution so here's my solution so what I'm going to do is then I'm going to just declare a variable of person money and it will be not equals to true and now let me just check and I'm going to just write like let have money first of all we are going to be providing our condition if the person have money uh will be equals to true so what do you want to print to the user buy products okay if the person don't have any money so we just want to print a user like dude your blog or I'll just say like they should and bring money or something like that now let me just log to the console have money and now let me just sell that and here you can see it will not bring us like my products right here because the uh because the person have money right here in this case but if you change that to false so now let me just save there and they should bring the money then they will be able to buy the products so that was that about alternative over Indian script and next we are going to be learning about four in Loop in general script time to learn about a four in Loop in JavaScript so what is a four in Loop in JavaScript so the four in Loop in JavaScript is used to iterate over through the innumerable property open object and it is a way to Loop through the keys the property names of an object so how the syntax look like so this is how the syntax will look like so first of all we're going to be writing our full result keyword then we are going to be writing our parenthesis and alert result keyword then we have to write keys and then the object in which we want to iterate over through and here we can do whatever you want to do with their properties so that was just a quick definition of what in the world is a four in Loop and now let me just give you example of the so I'm going to just declare an object right here and I'm going to distort the video of like Jose as a name and I'm going to also store edge of flag 19 and gender will be male okay so this is my simple object right here so if I want to iterate over through all of these properties of this person object so by using a poor in Loop so how can I go about doing that first of all I'm going to write a for result keyword and then I'm going to just use the lead key in person right here okay so key in person so it will lock it for a cool word through all of the keys which this person have and we can do whatever you want to do with there right here so let's suppose if you want to just look to the console like these keys right here so if I just write key all keys rather I'm going to just call it keys because they are like more than one they're not just singular I'm gonna sell them and here you can see if unlock uses the name Edge and gender as a keys right here and now what else I can do is that I'm gonna just provide the value so I'm going to just write cons not cost per person come on person and then here I'm going to just specify my keyword here not key but just keys I'm going to save my file and here you can see we are now getting these uh videos right here so these are our keys or properties to be precise and these are the videos specifically tied to their properties right here okay so that was the first example now let me just remove them so now let me just give one more example by iterating over through array data structure so I'm going to just write a delete list and it will be now equals to like one uh come on one then I'm going to destroy 2 and 3 g h on double e and then we have to write four and that's there so now if you want to iterate over through there so for that we can use let index in uh and then we can just write our list right here and now let me just log to the console that index and also let me just lock the console.list and I'm going to just use my index word here so I'm going to save that and here you can see it will not gives us the index of the array which we currently have right here and then it will give us the values right in here so that was a four in Loop in general script so you can do like more crazier stuff than there but this was just a few examples to help you understand a four in Loop in JavaScript so that was that about a four in Loop and now I'm gonna give you a quick challenge and you have to perform this challenge by yourself if you can do it then watch the solution and then I'm going to give you my solution so I'm gonna just place it right here so it read over through this object which I already gave you and log the property in the value of that object using the four in Loop verb so this is quite simple and easy so give it your best shot if you can do this completely okay then watch your solution and here's my solution so the first thing I'm going to do is then I'm going to just write a full research keyword and then I'm going to just write a property and I'm going to use my in reserved keyword of object right here so property or proper T is to be precise PR or P or t-i-e is like more than one in that object so I'm going to log to the console the properties first of all properties and I'm going to just write a separator for myself and then I'm going to use my object and now let me just pour these properties right here so that's what you have to do I'm going to save my file it will now gives us the property of a it will announce it to 1 the property of B will be set to 2 and c will be set to 3 okay so that was at about four in Loop in JavaScript so that was in about a four in Loop so now it's time to learn about a four off Loop in JavaScript so what is a for off Loop so the four off Loop in JavaScript is a modern iteration statement introducing ecmascript 6 that provides a concise and easy way to Loop over through elements in iterable object like array strings Maps sets and more and it also allows us to iterate directly over the values of the elements rather than dealing with their indices and keys which makes the code more readable and less error prune so this is how the syntax will look like so instead of writing the in result keyword we are going to be just writing the off result keyword and this one is a bit more powerful than the previous one I shouldn't have to set the sermon I just scratched their previous sentence anyways so now let me just give you a few example and then you will get to know how to work with a full off Loop so let's suppose we have some sort of array of peoples and we are going to be using a few pupils like Jose and Alex and then I'm going to use like uh I don't know John and I'm going to also use like I don't know bread or something okay so now if you want to iterate over to all of these people so for that you can use let people off pupils few pulse there we go so this pupil will be just a singular and these pupils will be or array right here okay so now let me just log this pupil to the console so if I sell my file and here you can see it really long uses all of the values right here inside rather than just dealing with these pupils and providing this pupil which we did a few seconds ago so I'm going to undo that and this is how you're going to be iterating over to the array and this is how you're going to be getting the items from the array so this was the first example I'm going to comment this line out now let me just give you one more example by iterating over through a string so strings are also iterable so I'm going to use cons text and I'm going to just store like I don't know hello I guess hello will be fine so I wanted to just give you a simple example so we have not this one do we have or in Loop we have for overflow I'm gonna hit enter right here so it will take a iterator and then the object so now in this case I'm going to just write Char as a character and then text right here okay so now let me just log this chart to the console and you already know what would be the results if I save my file and here you can see it will not use as h e l l o okay if you just write like my own name uh like Jose or Zen if you sell that and here you can certain log uses this so then right here inside a console so this is how you are going to be iterating over through stuff by using a 4 off Loop in JavaScript so now let me just give you a quick challenge and you have to perform this challenge by yourself if you can do it then watch the solution and then I'm going to give you my solution so I'm going to delete all of that stuff from here and I'm going to just place it right here so I want your iterate over through this array which I already give you right here and lock the videos using the port of loop okay so give your best shot if you can do it then watch a solution and here's my solution so what I'm going to do is then I'm going to just write a full result keyword and I'm going to just use the cons result keyword and then element of array one okay so now let me just log to the console this element okay or elements to be precise so I'm going to just say over there and here you can see we are now getting ABC which are stored inside this area right here so that was that about a fork off Loop in JavaScript time to learn about our first array helper in this course so the first array helper which we are going to be learning is the for each Helper and by the way these are advanced stuff from now on which you are going to be learning is uh array advanced stuff or array Advanced topics to be precise so when we call that for each helper we have to pass an anonymous callback function and once we pass that Anonymous callback function the function gets called one time for every element in that array and whatever is inside their function that logic will happen so let's suppose you know what instead of um wasting your time by defining all of that stuff by using a theory and I'm going to give a real world example so let's suppose we have con colored array and it will be holding the values of like TL and I don't know blue or red come on and I'm going to also provide a green right here so now if you want to iterate over through all of these items inside the array by using a for each method so what do you have to do first of all we are going to be passing a callback function to that for each method which you will see in a second and that callback function will run for each of these item inside this array right here so first of all we are going to be providing some sort of a function right here function function there come on function again or entire function all right so first of all we are going to be creating some sort of a function inside this function we are going to be putting some sort of a logic so this function will run for each item inside the array so first of all it will run that same logic which currently this function has it will run it for the steel for teal color then it will run it for this blue color then it will run it for this red color it will iterate over through all of these items which this array has and then it will provide or it will run that same logic which you are going to be storing inside this function for all of these items inside this array right here so now let me just write some code then you will get to know what I'm talking about so if you weren't using array for each method so we will do something like them so you don't have to write this code which I'm writing right now and we would do something like that this is The es5 Code by the way and it will be now equals to zero and we are going to be iterating over through our array just like that we are going to be getting our array length first of all and then we have to write our I plus plus incremented there and then we would do whatever you want to do with that like let's suppose in this case we want to get all of the items which currently this array has so we already learned about a four in and for off Loop there was also a new array to write or to iterate over through a JavaScript array so this was the code which we had to write before the array for each method so we were first of all right uh or initial expression then we'll write our conditional logic then here we will write either the increment expression or the decrement expression and then we will provide some sort of a logic word here and that core is sucked so for that kind of reason they introduced something called array for each method so now I'm going to just use like array name first of all and I'm going to just use for each method right here and this for each method is an advanced array method if I hover my mouse over to it certain log is like performance specific action for each element inside that array okay so now first of all we are going to be iterating over through all of the items inside the array and then we are going to be performing in some sort of a logic and their logic will be performed for every item inside that array I can't stress that enough okay so let's suppose we are going to be providing a callback function right here so you can Port your callback function just like that or you can cut this logic right here you can create your function anywhere you want and then you can reference to that variable I mean like their function right here you can write your code like that or you can write an arrow function as we introduce in this course what I'm going to do is that I'm going to just write a color right here this is going to be my contact function and here in this case it is taking like one parameter so I don't have to write this uh I mean like this parenthesis right here as we learned a second ago but if I send my file my ID or my visual studio will edit anyways so I'm going to just write this Arrow function right here and I'm going to just log everything to the console so this is how we can use this for each method on this array right here so if it's seller file so first of all it will iterate over through all of these items inside the array and it will log each one of them right here so I'm going to send my file and here you can see it will not use a steel blue red and green right here okay so we can do whatever we want to do with the array which we are going to be also learning in a second so this is how we can use this for each method on that array so first of all we are using this for each method then we are providing a callback function right here in this case we are providing an arrow function but we don't have to we can if you wanted to but we don't have to we can write a regular function right here but in this case I don't want to write a regular function I want to write Arrow function because we are now cool people and we want to use a cool stuff and we'll learn about the cool stuff in this course so that's why we are going to be using that cool stuff that we'll learn in this course so this is how we are going to be reporting our function as a callback as a callback function to this for each method right here so that was the first example I'm going to remove that from here the next example I'm going to give like const words and it will be now because do some sort of array of like hello and then we are going to be writing like uh I don't know bird and I don't know camel and finally I'm gonna just write code right here I'm gonna go back so this is my array which is holding all of these items right here what I'm going to do is that I'm going to iterate over to all of that item by using a four uh each method right here and in this case it is taking a lot of perimeter right here like three parameters so I'm going to just pass my word I'm going to also part the index I'm going to also pour the actual array right here I wonder if I can see it and not double quote so that's looking better and now you can also store the result to like cons cap uh words or Capital words or something like that so in this case what I'm going to do is that I'm going to just first of all get my array right here just write a little bit of logic you can write anything you want and I'm going to just like get the word first letter right here so I'm going to just get the first letter and I'm going to just use the two upper yes right here to make it uppercase so it will just make the first layer upper case and I'm going to just uh add this word dot substring substring come on substring sub string and I'm going to just pass one right here but I just write one right here so it will just capitalize all of the words I'm going to log to the console that words and here you can see the H is the smaller case the B is smaller case the t is smaller case the f is smaller case and all of them is a smaller case right here but if we save our file and here you can see it will not just capitalize the first letter right here so H is capitalized the b t f p and C is also capitalized so it will run all of that code I mean like it will execute this function for all of the items which currently this array has and it will perform all of that logic which we provided right here so that was that about array for each method now I'm going to give you a quick challenge and you have to perform this challenge by yourself if you can do it that's complete okay then watch a solution and here I'm gonna also do my solution in a second so I'm going to remove all of their stuff from here and I'm going to just place it right here so the first thing I want you to do is that I want you to create an array of numbers then create a variable to hold the sum then create the error function which takes the perimeter of number and add there with some variable then Loop over through array by using the for each method incrementing the sum variable except this time a function get referenced in therefore each and then print the sum variable right here so give your best shot if you can do it as completely okay then watch a solution so what I'm going to do is that I'm going to go inside and let me just create numbers variable right here let me like array right here it will hold like one two and I don't know some of three comma four five would be fine I guess and now let me just create a sum variable which will hold 0 inside there let me create my Adder function like adder and here I am going to just specify a number as a perimeter and then I'm going to just use some plus equal to and then this um not header but then then this number right here which we are going to be specifying dynamically okay and then I'm going to just iterate two way through all of the items which is already available inside that number so I'm going to use for each method and in this case I'm not going to be providing a callback function like so like a arrow function in this case I'm going to pass my error function so I'm going to just use adder and now let me just log to the console.sum and let me go back so you guys can see everything a bit better and now if you server and here you can see the sum is no sir 215 right here so that was it about the array for each method next we are going to be learning about a map helper in JavaScript I'm going to learn about array map helper in JavaScript so the map method creates a new array populated with the results of calling a provided function on every element in their calling array okay so in the previous example like a second ago we just learned about a for each method but on that case we didn't create a new array but in this map method this map method allows us to create a new array and it will also take a callback function like the syntax will be exactly the same as for each but instead of writing a four each we are going to be just passing the map and in this case it will create a new array populated with their logic which we are going to be providing in a function okay so now let me just give you a quick example and then you'll get to know what I'm talking about so what I'm going to do is then I'm going to just write in numbers right here and I'm going to just store a few numbers like one two three four come on four five there we go so we have these numbers array and what I'm going to do is then I'm going to just use double right here and I want to double this up so I'm going to use my numbers and instead of using a for each method I'm going to use my map method right here okay and I'm going to just pass my callback function and what I'm going to do is that I'm going to just use num times two so what's going on behind the scenes so here's what's going on so each number inside this array is passed through this callback function so that was the first step and whatever this function return is placed into a new array so whatever this function will return something and we are placing there inside this new array or we are storing there inside some sort of a new variable and it will hold that new result right here it will not modify this one but instead it will create a new array right here which we are going to be storing right here inside this double array right here okay so after each and has been proceeded the new array will be returned okay so we can Port our callback function right here or I guess that would be fine you know what we are not going to reporting that function wizard key or anything like this now let me just lock the console this double and that's there so if I send my file and here you can see we are now getting instead of one we are getting two instead of two we are getting 4 6 and 10 right here so everything is now totally doubled up let me just say that once again what's the difference between map method and the for each method for each method will also iterate Google through every single item of the array and we can do whatever you want to do with that and same will apply for this um method as well but map method will not modify or existing array instead it will give us a new array whatever we pens like whatever this function will give us the result we are going to be placing that inside a new array but on the other hand if you use a for each method it will still give us that result but it will modify find this array and then we would have to print these numbers rather than this double right here so let's suppose if I just print like numbers right here if I just write numbers and if I sell my file and here you can see we are now getting one two three four five which means like this is not been modified we are now modifying something the result of this array and we are storing it inside this double array right here so now let me just store that inside uh double right here and now if you save there and it will now give us this double version right here so I hope that makes sense if it's not making any sense well you have to re-watch the video so it's not that much difficult thing to learn but this one will give us a new array on the other hand for each will not gives us a new array as a return value anyway so that was just the difference between there I'm going to delete this coding right here let me give you one more example and I guess that would be it I'm going to write a people's array right here and I'm going to just write a few objects inside there like first name of the person will be I don't know make home Ma com ment last name the last name should be now equals to [Music] um so now we have this array and inside this array we have different kind of objects right here where different properties like first name and last name and different values so what I'm going to do is that I'm going to just write const results because it will give us a new erase so that's why we have to store that in some array right here or in some variable so I'm going to just write a map method it will take that person it's a callback function parameter and then we have to just return this person.first name and then we have report a comma person dot last name right here okay so now let me just log with the console let me go back let me just log to the console um these results right here so I'm going to just write results and now if I send my file and here you can see it will now convert it from object to this array right here so if I just expand there it is now giving us this item so we can iterate over through the even more if you want to so let me give you some Challenge and you have to perform this challenge by yourself and then if you can do it that's completely locate and watch a solution so let me just place it right here so the first thing I want you to do is that I want you to create array with the random numbers map over each item in the array and multiply each item by 10. so give it your best shot if you can do it that's completely okay then watch the solution so I'm going to just write um random numbers so I'm going to just write the numbers and Equipment equals to I don't know it's six to five 44 and 12 I don't know four we find something like that let me just create a function because we are going to be passing this function as a callback function okay to our map method and I'm going to just write a num and now let's just return num times 10 from him and now let's just write cons new ER because it will create a new array for us and now let's just write our numbers and map okay so in this case I'm going to just write my function and now let's just log this new er to the console now triple R's Bar two seven and it will just give us times 10 of their numbers which we specified right here so 4 times 10 will give us 40 and I don't know 12 times 10 will give us 120 120 and 44 times 10 will give us 440 and 65 times 10 will give us 650. yep so everything is working just fine and that was it about a map method or map helper in JavaScript I'm going to learn about array filter method in JavaScript so I'm going to just place this description right here so what in the word is the filter method is the name suggests a filter it will allows us to do filtering so the filter method is a built-in array method in JavaScript that allow you to create a new array containing elements that passes a certain condition so it will allows us to create a new array and we are going to be passing some sort of a condition so if the condition is true so it will give us some result best on that condition if it fails so it will gives us some result of the voice it provides a clean and concise way to filter out elements from an array based on the specified criteria so that was just a quick introduction about what a filter method is and now let me just give you a real word example and then you will get to know what I'm talking about so I'm gonna just provide this array right here and here you can see we have the songs array inside the songs array right here we have different kind of objects inside these objects we have different kind of names of the songs like look you and all of their kind of array and then we have a duration for that song so I'm going to just send my file and what I'm going to do is that I'm going to just write uh Consular log of songs our filter method and now I'm going to hover my mouse over to it and here you can see it will return the new element of the array that meets the condition conditions specified in the Callback function okay so it will give us a new array based on their condition so what I'm going to do is that I'm going to just specify my callback function it will take one parameter of cons and not cons but callback function and I'm going to just specify like song in this case and I wanted to get like a song's duration like I want to iterate over through all of these items which is currently available inside this array right here and I just want to filter out the duration which will be like I don't know which will be greater than four or three or something like that I'm going to just write a song right here and then I'm going to write my duration and I want to just get a song Swiss duration is greater than three so I'm going to sell my file and here you can see it one long uses these three songs right here from their list and it will ignore the rest of these other songs right here so here you can see it will not gives us the lucky U the duration is 4.34 it will give us just like U duration is 3.23 it will give us the bond whose duration is 5.23 and now let's check out the other one so we have the search whose duration is 2.33 so it will skip there then we have the Old Town Road the duration is 1.43 so it will also skip this one as well okay so this is how we can do a basic filtering by using this filter method right here okay so it will take some sort of a condition if that condition is true it will give us one result if the condition is false so it will give us another result okay so now let me give you one more example and then it will be time for you to perform a challenge so now let me just comment this line out and now let me just give one more example okay so let's suppose we have const computers and computers there we go inside these computers we would have like Ram object it will have like four and hardest Drive will be like 100 in this case I'm going to Port a comma and now let me just add a lot of computers the ram will be aired gigabytes and we have 16 Giga bytes and then we have a 32 gigabytes 32 there we go and I'm going to just remove the last one and this one will have the ram not Ram but hard disk drawing of like 200 because this one will have 300 and this one will have 400 right here okay so now I'm going to sell my file and now if I want to iterate over to all of the this item and I want to just get one computer whose Rim is like greater than 16 so it will just gives us this 32 right here so if you want to just get this 32 first of all I'm gonna have to iterate Uber through all of these items right here each one by one then I'm going to be checking like if this condition is true so then we want to get one result if the condition is false then you want to get another result so now let me just write also the log of computers and I'm going to just write my filter method as the name suggest that it will now just to filter the items and it will take a callback function so I'm going to just provide my arrow function right here and I'm going to just write like com like computer for short and then I'm going to just get my Ram from here and if the ram is greater than 16 so we just want to get that computer I'm going to send my file and here you can see it only gives us one item right here and it will give us the ram the ram will be 32 and the hardest Drive is 400 right here and now if you want to get a computer whose Ram is like less less than or no less than I guess 16 would be fine so I'm going to send my file so it run log uses this add one and it will also gives us this for one right right here so I'm going to just check it out and here you can see we have this Ram of four and we have this realm of f right here so that was at about a filter method in general script so I'm gonna give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch a solution so this challenge will be divided into two parts so this is going to be the first part so the first thing I want you to do is that I want your iterate over to all of the edges array and print only the orders or the adults however you want to pronounce this name and those people whose Edge is greater than 18 so I want you to just print that so do your best shot if you can do it then watch a solution and here's mine one I'm gonna create my function separately and I'm gonna give my name up like check adults add your LTS there we go it will take one parameter of Edge and now let's just return Edge is greater than or equal to 18 right here okay so the final thing I'm going to just pass um or not yeah it is Edges right here so I'm going to use my filter method right here and I'm going to dispense my check arrows function I'm going to copy that and I'm going to paste it right here and now let me just throw it in some sort of variable right here and now let me just log to the console this variable I'm going to save this file and here you can see it when log uses 32 33 and 40 years old right here so we have 32 and 30 32 33 and 40 right here and it will skip this 16 one right here okay so that's that that was the first challenge now let me just give you one more and you also have to perform at least give it a try because these challenges are not that much hard like they are totally awesome and simple at least give it a try I'm gonna place it right here go back so the first thing I want you to do is that I want you to reiterate over through this words array which I'm already giving you right here and print only those words which length is greater than six so I want you to give it your best shot if you can do it that's completely okay and watch a solution and here is mine one okay so I'm going to just write console results and it would have been equals to words um come on special words and then dot filter it will take a callback function I'm going to just pass my arrow function right here and I shouldn't have to provide these curly braces I'm going to use word starter length and if it's greater than six so we just want to lock the console these results there we go so if I sell my file and here you can see it will not give us all of these three words and it will remove or if I skip the other ones right here so it will just skip I don't even know which one it is okay so it will just skip these three and it will give us finally it will give us the final ones it will give us these ones and it will skip the first three right here so that was it about array filter method and next we are going to be learning about every and some helper in JavaScript so now let's learn about a fine array method in JavaScript so what in the word is apparent so the find method is another built-in array helper in JavaScript that allow you to find the first element in the array that matches the specific condition so we are going to be passing a callback function inside that callback function we are going to be specifying some sort of a condition if it found that condition true so it will give us I mean like it will only work for the first element inside the array and it will return the value of the first element that satisfy the given testing function otherwise it will give us undefined for no elements if it found nothing okay so now let me just give you example and then you will get to know what I'm talking about so here is my array right here and inside this array I have different kind of objects and inside these objects we have different kind of properties like name for different kind of peoples then we have an inch for like different kind of edges right here so now if I want to just search for this Alex person so how can I go about doing that well I can achieve that by going or by iterating over to all of the pupils and I'm going to use my find method for that and I'm going to just provide my callback function as my arrow function and I'm going to just use person.name it's equal to Alex so then just give me that one person right here so I'm going to just use contrast and now let me just lock the console this result right here and if I send my file and here you can see it will now uses this analytics I mean like the name of annex with the edge of 20 right here it will not bring us this uh LX right here with the edge of 30 why is there because as I said that it will only work for the first element inside the array it will iterate Google through all of the items and it will check the condition if it found one of them to be true it will give us that same but if you have like more than one and it will not work for all of them so it file just gives us this one right here okay so this is just a basic example of a fine method now let me just give you one more example and then you will have to perform a challenge okay so I'm going to just write a post uh array right here and we will have a lot of posts right here like with the audio one the content will be like uh I don't know good post a good post and I'm gonna just duplicate that a few times and this one will be now second post this one will be a third come on third pause and this one will be the fourth one okay so this one will be a good post then this one will be a funny post and this one will be a post Malone I mean like I said uh post right here come on post and I'm gonna just remove the last one right here so now if I want to iterate Google through all of these items inside the array and I want to just get a funny post because I'm a funny guy so that's why I want to get this funny post and I don't want to get the other ones so for that we can use uh what do you call it a fine method so I'm going to just write conspost res for post results I'm gonna iterate two way through all of this post and I'm going to use my find method let me just put my callback function as Arrow function and I'm going to just use post dot content is equal to um funny or funny post then we just want to get that post and now let me just log to the console this post razor right here and I'm gonna just sell there and here you can see inside a console it will now give us the ID of 2 and the content will be funny post right here okay so that's there you can get like a set post or good but you know I'm gonna just quite a good post right here save there and it will now gives us this good post right here but let's suppose if you have like um the idea of pool right here and or five whatever you want to call there and if I just write a good post right here and here again so if I send my file it will just only gives us the first item but not the last one I mean like not other than that it will just only give us the first Iron word here so if you want to get like all of them so for that you can use the filter method as we already learned a few seconds ago you know let me just use this filter method right here instead of that point and I'm going to just save that and it will now give us both of their results right here so it will give us the ID of one and also the ID of two why is there because this filter method as the name suggested it will allows us to filter through our items and then it will give us that item so it will uh iterate over through all of the items and it will filter through all of them if it found like if this condition matches it will give uses all of their result right here so this filter method is more powerful than the spine method so you can choose them interchangeably like if you wanted to so now let me just give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch the solution I'm going to remove all of their coding from here and the first thing I want you to do is that I want you to iterate over through these edges array which I'm giving you right now and print only those edges which is greater than 18 okay so give your best shot if you can do it that's completely okay and watch a solution so I'm going to just write my function separately because I also want to show you there like you control to do that if you wanted to and it will just return Edge is greater than 18 so not it just come on man Edge come on uh Edge there we go and now let me just lock the console there or you know and destroyed in some sort of a variable of raise and energy start fine and we want to just find these edges I mean like we want to provide that callback function and we want to just record the result as a console so it will now gives us 20 right here because it found one of them to be um greater than 18 so 20 is greater than 18 and it will just give us that 20 right here so now I'm going to give you a bonus challenge you don't have to do that if you don't want to do that like it doesn't even matter if you do it or not but I'm just still giving you just in case if you want to give it a try so here's another challenge for you and give your best shot if you can do it that's completely okay then watch a solution I'm gonna place it right here and this is some es5 code and I want you to refactor and this is not a es5 cord by the way but this is just an older way of writing um that find methods so you can refactor this code to a point method right here so what are we currently doing so first of all we have this products array right here and inside these products array we have different kind of items right here and then we have this variable and we are iterating all through all of their items and what we are currently doing is that we are just searching for this books array I mean like this books right here if you found one of them to be true and it will now just push that book to this product right here and then finally if you log that to the console it will just give us that book with the name of Harry Potter and category will be booked and that stamp so give it your best shot to convert this code into the es6 find method and if you can do this completely okay then watch a solution so what I'm going to do is that I'm going to just remove there and I'm going to just write con product and I'm going to use my uh what do you call it A6 phase I'm going to use products.point method and I'm going to just provide my product and in this case I'm going to use product.category is equal to books and that's it baby and we have to save that and here you can see it but it still gives us that Harry Potter but it will just ignore this learn PHP right here or learn gold and one of my favorite programming language so here you can see we have it we it will not give us that learning right here that's because we are not using a filter method if you are using a filter method it will give us their goaling uh programming language book as well and it will also give us that Harry Potter one as well so that was it about a fine method in JavaScript and next we are going to be learning about the reduce or reduce method in JavaScript so now let's learn about array area and some method in JavaScript and I'm about to place a lot of comments which I'm going to be reading throughout so I I promise that would be fun so I'm going to just press it right here and here you can see now let's talk about the array method and the sum method and they are not difficult thing to learn but I want to read this out for you so the area and some methods are two built-in array methods in JavaScript that allow you to check the elements of the array based on the given condition so we are going to be specifying some sort of a condition and also the callback function and inside that callback function we are going to be passing some sort of a condition and both the method takes a callback function as the argument which is applied to each element of that array okay so what is the every method first of all so the area method tells whether all the elements in that array passes the condition specified by the provided callback function okay it returns true if the Callback function returns true for every element for every element and false if any elements forms in the condition okay or the condition whatever you want to call there on the other hand we have this sum method and the sum method tests whether at least one element in that array passes the condition specify the provided callback function okay and it will return true if the Callback function return true or at least one element okay and false if no elements passes the condition so this is what area and some functions are and now let me just give you a quick example and then you will get to know what I'm talking about so I'm going to just write const and I'm going to just create a pupils array right here I'm going to just store like a few pupils like Jordan and I'm gonna also store uh Alex in this case and in this case I'm going to just write pupils down uh every okay so I'm going to just specify a callback function right here and I'm going to just check if people don't lift is equal to 4 it will give us true if this condition which we are specifying right here is true for every item inside this array right here okay so it really gives us pause if one of them is false it's kind of like a or in a logical or in logical and operates but anyways there was another story so I'm going to just write res and I guess a res one would be fine and now let me just lock the console this res one and if I sell there and here you can see it will not use as false word here now let's just check h u x n these are four characters not four yeah h u x and these are four characters but this one is not four characters so that's why we are getting false right here j-o-r-d-a-n one two three four five six so it is now six characters that's why we are getting false right here but if I just write like uh I don't know John right here and if I sell there and here you can see it when long uses true because it will it read over through all of the items right here inside the array and it will check if this condition is true for all of that item then it will give us true but if this condition is like failed for one of the items inside the array so then it will give us false so I'm gonna just change that to you and Jordan one more time so that was it about some I mean like that was it about every as the name suggested it will run that condition for every element inside the array and now let me just write cons res 2 and it will be equals to pupils dot uh every and then this one will be sum I'm gonna pass my callback function let me just go back come on let me just go back and I'm gonna just write my arrow function pupils dot length is less than three let's suppose if I just write less than three and now let me just log to the console this rest to rather and I'm gonna sell my file and it will now gives us fonts right here why is that because this length is not less than three this Lin is not less than three and this length is also not less than three so all of them are false so that's why we are getting false right here but if I just write like a b and if I just write a and if I just write C or something like that and if I save it it will not use a screw right here okay so all you know what if I just write a b c for this one 1 SEC for this one and this one will be like less than um um three characters right here so if I save that and it will come on it will still use a shoe right here because it will be searching for one of the items to match this condition so if it found one of the item who is matching this condition so it will give us true uh it doesn't matter if I write like anything right here if I save there it will still use a screw right here why is that because it is searching for one of the items inside the array who matches this condition if it found one of them to be true it will use this true word here this one will be searching for one of the item if you found one of them to be false it will make the entire statement false and this one will make the entire statement true so that was the difference between every and sum and now let me just uh give one more example and I guess that would beard I'm gonna even remove there I'm gonna place this array right here so we have their same songs array right here and now I'm going to use my area and same method right here I'm going to use every res the result of every method and I'm going to just use song Start every method and I'm going to just place my callback function songs dot duration or songs but just a singular song Start duration is now greater than three so just print their song so every rest I'm gonna sell that and here you can certainly not gives us false why is that because I'll search for all of the songs whose duration is greater than three if you'd found one of them to be false so it will make the entire statement false if you found one of them to be true then it will give us their true right here in this case there are a lot of I guess so songs greater than three this one is greater than three this one is greater than all of them is greater than not not this one is greater than three so it will just skip both of these two and this one is greater than three this one is greater than three and also this one is greater than three so that's why it is now giving us uh false for all of their items and now let me just use Consular some arrays like response for the sum item so I'm gonna use uh song star sum in this case and I'm gonna just pass my callback function and I'm I'm saying a lot of time like songs response let me just use songs that are duration is greater than three in this case and now let me just log to the console um this sum rest I'm not saying that by previous but I don't know I'm gonna sell that and here you can see this one will now gives us true right here why is that because it will search for one of the item to be true if it found one of them to be true it gives us the result of true on the other hand it will just search for one of them to be false if you found one of them to be false it will give us false so that was it about a error not error but was it about every and some method and now let me just give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch the solution and then I want to give you my solution so I'm going to remove every single thing which I have inside this file and I'm going to replace it with this one right here now you might be thinking like there's a lot of coding no it's not so here is a code in some places I use the es6 and in some places I use the es5 so I want you to refactor this code to use the Airy and sum method okay so give your best shot if you can do it as completely okay then watch a solution and now here is my solution so what I'm going to do is that I'm going to just remove that stuff from here entirely um I guess that will be fine I'm going to remove that from here we just have our array right here and now let's just check for do all products have a category of books question mark and now let's just check for that so I'm gonna just use come on question mark and now let's just remove the empty space from there and I'm going to use let all products books and it will be now equals to products at every okay so that's why all for all we are going to be using array and here we are going to be just specifying our product and now let's just um return like product.category and it will be now equals to book um so yeah or book or books to be precise so now let me just log to the console all products category I'm going to save that and it will not use this fonts right here because this one of them have the category of books but uh not for all of them so that's why we are getting false and now let's just check for um do any products products uh have a category of books okay so now let's just check for that I'm going to use some products books in terminal equals to products.sum I'm gonna provide my product in here and we'll probably don't sell product I'm going to provide my product rather not Laurel but just a singular and arrow function like so and I'm going to just use product.category um is equal to books as well not a capital but a lowercase oh okay as there we go I'm going to save my file but I'm gonna also have to oncoming this line out and if I sell that and here you can see it one long uses true right here because it will run for all of them um I mean it will run for all of them and it will form if one of them is true it will give us true if uh all of them is false so then it will give us fonts right here so that was it about a sum in every function in JavaScript next we are going to be learning about a fine method in JavaScript so now let's learn about array reduce method in JavaScript so I'm going to remove this coding from here and this is what array reduce method is so the array reducer method applies the reducer function to each element of the array accumulating the result into a single value so this is what this reducing method will do for us and it is often used to perform calculation or aggregations on array elements and simplify the array into a single value so basically what this reducer method will do for us is that first of all it will take some sort of uh like um whatever you call it array and inside this array we will have like some sort of items inside this array so I'm going to just write one two three right here and if we call this reducer method so first thing it will do is that it will take a callback function inside their callback function we are going to be providing some sort of for logic and then the reducer method will run for each item inside the array so it will first of all run for this item then it will run for this item then it will run for this item right here and it will take these values which are currently available inside this array and it will just make it one value and the reducer method does not execute the function for empty array you just have to keep that in mind and the reducer method does not change the original array so it will just make a copy of that array and will just make it as a simple or a single item inside the arrays so there was a lot of theory behind this reducer method right here so now let me just give you a quick example and then you will get to know what I'm talking about so I'm going to just create a numbers array right here and I'm going to just store a few numbers like one two and four five so I'm going to just store it there and now I want to run this reducer method on this array so first of all I'm going to just write like cons sum because I want all of this items to be added and I just want to get a sum of this array so I'm going to just write numbers and I'm going to use my reducer method right here so the first parameter it will take is the Callback function and the second parameter it will take a current index okay so I'm going to just provide my callback function right here and I'm going to just provide two values right here like a p for a previous and see for the current state right here okay so I'm going to just remove that stuff and now let me just provide my curly braces right in here currently I'm going to just provide 0 right here in this case and if I roll my mouse over to this array right here so here you can see it will not use a slide because the specified callback function for all the elements in the array the return value of the Callback function is the accumulated result and is provided as the argument in the next call to the Callback function okay so the network uses like it will take a callback function it will also take an initial value which we are currently specifying right here and that's there so inside this array what I'm going to do is that I am going to just return P plus C and what do you think will be the reason if I call this function or if I just log to the console this sum right here so what do you think will be the result if I sound this file and if I check it out so here you can see it will not give us 15 right here it will give us the sum of all of these item and it will now gives us that sum right here inside a console so everything is working the way we expand the word I know you are still confused about word and the word is this p word and the word is this C and what are we currently doing so this p is the previous value of or array then this C is the current value of our array so now let me just log that to the console and then you will get in what I'm talking about so so let me just comment this out and I'm gonna just console log this like a previous p r e v i o u s and I'm gonna just lock the console this p and I'm gonna also just lock the console like a current uh right in here and I'm gonna also already see right here and now let me just uncomment there and now if I save my file and here you can see it will now give us first of all the previous index was zero here you can see this is the P so this P like a previous value was Zero why is that because currently we are providing this zero right here okay so that was our previous value so then we have our current Index right here so once we iterate over to this array so it will now give this one right here so here you can see it is now set to one so zero plus one will gives us only one right here then we have this previous thread one more time then it will now check this array like it is executed one more time it is executed one time let me just highlight that for you so then you'll get to know what I'm talking about so first of all in the first iteration or previous value was zero and now we have are going to be adding this one right here so it will now give this one right here so it will just gives us 1 because 0 plus 1 is 1. so now the next iteration here you can see our next iteration will be starting from this so we currently have this one right here so we are going to be storing this one as a result inside our previous value right here so our first iteration was done because here we just write over 0 right here then we are going to be jumping into this first value inside this array right here so I'm going to just write uh one and then we are going to be adding our current index so what do you think will be the current index if we check it out so here you can see our current index in the second iteration is 2 right here because here we specify this two right here so we are going to be just writing 2 and 1 plus 2 will gives us you guessed it three so what will happen to the third iteration so here you can see our previous value now in this case it's going to be three so we are going to be just writing like um 30 right here three plus and what is our current index or current index is is 4 right here here you can see um or I guess I must have something because here you can see we have these three right here so then we have to also check this third one as well I forgot that so we are going to be also writing this three right here so I'm going to just write three and in this iteration it will now give us the value of six so now that we have our previous value of 6 right here which I'm gonna place it right in here so now let me just write six and now what will be our current stats so now if we check it out so here you can see our current start was six we added that right here so we want to add this 4 right here because here so now these iterations are done and now you want to iterate over to this fourth one as well so we are going to be just writing on six plus four and it will now gives us 10. okay so now we have the value of 10 right here and now in the final iteration we have this 10 value somewhere just store this 10 I'm gonna write my Plus symbol and then we have to check this pipe right here so 10 plus 5 will gives us 15 right here so we are going to be just writing 15. let me go back and this is how currently things looks like so I'm going to send my file and here you can see it is now giving us this 15 right here inside a console so now let me just log that to the console and now let me just discuss that one more time so currently what we are doing is that we are iterating over through all of these items which are currently available inside this array and we are creating a new array based on this reducer function uh or method to be precise right here and this reducer method will take one callback function and the current value or the previous value right here and then here we are specifying the previous values some people call it like accumulated video or accumulated whatever you want to call there the name doesn't matter even like you can specify whatever you want to provide right there but here we are going to be just specifying our previous state and here we are going to be specifying our current stats so so once our iteration starts or current value will be 0 and then we are going to be adding this one right here so why are we going to be adding this one well because here you can see we have this first item inside this array is one but now you might be asking yourself is like where in the world is this zero came from this zero came from here here you can see we just poured this zero right here so here you can see we are now getting this zero right here so zero plus one will give us one and then it will take this one value and it will put it right here just like that and here this is going to be our previous turn and in the next iteration so this iteration is done then it will jump to this iteration right here this second iteration and in the second iteration we previously have this one right here so we are going to be adding this two so one plus two will gives us three so now we have this 3 right here so we are going to be storing the inside our memory and we are going to be storing that as a previous layer and then we are going to be adding one more three right here so with this three is coming from this third iteration which you can see right here then it will give us 16 I mean like three plus three will give us a 6 right here then we are going to be taking this 6 and we are going to be placing there and then we are going to be adding our fourth iteration right here so six plus four already gives us 10 and then we are going to be taking this 10 value and we are going to be putting it right here as a previous third and then we are going to be adding the final iteration it will give us 10. I mean like 5 so 10 plus 5 L gives us 15. so then we are logging that to the console and we are getting the result of 15 right here inside our console so that was the basic example of what a reduce method is so now let me give one more example and then you will get to know a little bit better so what I'm going to do is that I'm going to just write const pupils or yeah pupils will be fine inside this people's array I'm going to create a few objects right here I'm going to write my name oh hosan web dev and now let me just write my Edge right here of like 19 year old so I'm going to just duplicate the array I mean like that object inside the array right here and I'm going to just change this name to like something else I don't know I'm gonna write like LX mid or something like that and he will be a 29 year old and I'm going to also change that to brain or brain um Griffin from Brian Griffin print from the Family Guy and I'm gonna just write 40 right in here let me just write 40 and now if I sell my file so here you can see we have this array and inside this array we have a few objects right here inside these objects we have a few properties and its values right here so that's there so we are going to be using array reduce method with ternary operator in JavaScript so I'm going to just write it like so now I want to get like the oldest guy inside this array right here so how can I go about doing that let's suppose if you have like I don't know a thousand people or something like that and you want to just get the oldest guy from this list so we can achieve the same result by using the filter method but in this case we are learning about reduce method so I'm going to just write reduce method right here so I'm going to just write like all this Edge or something like that and then I'm going to use people.reduce method come on reduce and it should be few pulse not just a singular people okay and now I'm going to just call that I'm going to provide my previous thread and current instead and now let me just write currently I'm going to just write 0 right here because we are iterating over through the edges in this case and you know what instead of writing these curly braces I can write there as a one liner so I'm going to just write it first of all about my parenthesis or explicit return so I'm going to just write C dot Edge it's greater than p and then I'm going to just write it um C dot Edge so if that condition is true we are now iterating over through all of these items right here and we are providing this previous uh straightforward here and the current start so inside this current start if the current start Edge property we are checking this H property of all of these items right here or peoples to be precise and we are checking if this uh what do we call it if this current state DOT Edge is greater than the previous thread which we are specifying right here so then just gives us C dot Edge word here this result if that's not true then just gives us this P right here like a previous turn and now let me just look with the console this old disk Edge right here and I'm going to just save my file and here you can see from now gives us 40 right here why is that because this 40 is the highest value inside this overall uh array right here so that's why we are getting this forward right here so this is reduce method with ternary over you can refactor this code to like if an L statement or switch and cancels if you wanted to but in my case that was it so what I'm going to do is that I'm going to give you one last example and then it will be time for you to try it out by yourself so I'm going to just write a words right here and it will be now equals to A few words like I don't know or maybe I'm going to just write fruits I'm gonna write like a fruit so I guess that would be a better example and I'm going to write like a banana and then I'm going to just write orange and let me add my banana one more time okay so then I'm going to also uh write like apple one more time I guess and then I'm gonna also write my orange let me write this apple one more time and finally I'm gonna just write grab that will be fine so this is my array currently right here and now I want to iterate over to this array and we just want to get um unique values from this array like we just want to get apple banana and orange and I guess grab as well so what I'm going to do is that I'm going to just write like const War uh frequency okay so um come on not this w o r e there we go or frequency so we are going to be just writing like uh words dot reduce method we are going to be using a reduce method and I'm going to just provide my frequency map okay so this is going to be our first item f r e q u e n c y c y just without an e and then here I'm going to dispense my word right here okay and I'm going to just write my frequency map and I'm going to just pour my word right here and it will be equals to this frequency map come on free currency map and here I'm going to dispense my one one more time and now let me just check if that's equal to zero or uh then we have to just plus there and now let me just return this frequency array right here and now finally in this case we are going to be providing this object right here okay so now let me just log to the console this word come on I'm going to copy that and now let me just pass that right here I'm going to sell that and here you can see it when log uses this apple of one banana off one and graph of one and orange of one as well right here inside the object why is that because currently here we are specifying the object and you can provide arrays you can provide anything you want okay so that was a third example by using the reduce method in JavaScript so now let me just give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch your solution I'm going to remove all of that stuff from here and now let me just pass this in instruction right here so the first thing I want you to do is that I want you to write a function called this calculated product that will text an array of numbers as an argument and return the product of all the numbers in that array and I by a product I mean like multiplication of that array we are going to be specifying some sort of a numbers so then it will give us the multiplication of the array by product I mean there so write the calculator product function using the reduce method to achieve this task so something like this so your code should execute like this so here you can see we have this numbers array right here and we are just specifying like two three four five and we're going to be specifying it right here inside this calculator products um function right here and we are going to be specifying this numbers array right here and as output is sure gives us like 120 okay so it will give us the product of the array which will be 120 so give your best shot if you can do it that's completely okay then watch the solution so here is my solution so what I'm going to do is that I'm going to just cut this stuff from here and now let me oh you know let me just copy that from here and I'm gonna just comment it out for you and now let me just paste it right in here okay so what I'm going to do is that let me just create that function I'm going to just create a function with the name of call cooler product and it will take array as a perimeter so I'm going to just write like er now let me just write con's product and it will be now equals to array.reduce Method reduce and here we are going to be just specifying our accumulators first of all a double c u m l a t or I guess this is how you spell it and I forgot the U right here so I'm going to just add that and here I'm going to just provide my current value there we go some people write this code like that and I just like to call this one a previous and this one occurred anyway so it doesn't even matter and I'm going to just instead of writing these curly braces I'm going to just write my accumulator times current value so I guess that would be it and finally let me just return all you know we can also return in one liner we don't even have to write this product so I'm going to just return that stuff from here okay and it will do the job so I've just created this function right here and I'm just specifying this array as a call to this function I'm like uh yeah I'm just passing this array as a chord with this function and now let me just save there and here you can see it is now giving us 120 but if you change that to something else like I don't know if you change that to like 20 10 I don't know 40 50 or something like that and here you can see it will now gives us the amount of product if I just write 120 it will now change the product right here 10 and 20 so now if I sell that and here you can see even log uses 200 right here so everything is working the way we expect him to work and that was at about reduce method in JavaScript so now let's learn about a map data structure in JavaScript so I'm going to review all of that stuff from here and I'm going to just place these Commerce right here so what in the world is a map and why you should care about that so map is a built-in data structure introduced in ecmascript 6 that allow you to store a key value appearance where both the keys and the values can be of any data type right here and it is similar to the object but with a few key differences so in maps keys can be defined of any data type like unlike objects where keys are limited to just strings and symbols or anything like that but mems allows us to use any data type is key including the numbers booleans objects and even the other map instances right here so it also allows us to maintain the insertion orders so may preserve the order of the key value pair as they were inserted while object Keys may not be guaranteed to be in a specific order and it also allows us to iterate over through some stuff so iteration and Maps provide built-in method for every iteration over its element okay so that was just a quick definition of what a map is and now let me just give you a little bit of a real world coding example then you will get to know what I'm talking about so if you want to create a map first of all you are going to be just writing the new result keyword and maps are something called Constructors and we are going to be learning about Constructor later in this course or maybe in the upcoming course and I'm going to just write map right here so this is how you are going to be creating a map so now let me just throw down some sort of a variable so I'm going to just give a name of live map and what I'm going to do is that let me just lock the console this map right here if we sell there and here you can see it when log uses this data structure right here with entries but we don't have any properties no values and here you can can see the size is set to zero so now if you want to provide a new way to do this map right here so the first thing I'm going to do is then I'm going to just first of all create some sort of a value and then I'm going to just add that to this map so I'm going to just write like I don't know const key one and it will be now equals to like a string or something like that and then const key two and it will be equals to like I don't know maybe in this case an empty object and then const K3 and in this case it will be now set to some sort of like Anonymous function right here so now if you want to provide these variables as the key to this map so first of all we are going to be just writing like a map dot set method and now if I hold my mouse over to it and here you can see it will not gives us their definition like uh it will add a new element with the specified key and value to the map if an element with the same key already exists the element will be updated okay so what I'm going to do is that first of all let me just add my key one right here and I'm going to just provide a comma and now let me just forward a value to that key so here you can see we have this key of string and now you are going to be adding some sort of a value like value of key one right here and now let me just log to the console this map and now if I sell there and here you can see it will log uses the key of string right here and the value is now set to value of key one right here which I'm specifying right here okay so the next thing which I am going to do is that I'm going to use that set method one more time so it will allows us to set the key and the value so I'm going to just write key 2 in this case and I'm going to just write like value um of key two and now let me just add this final one as well I'm gonna write K3 in this case comma value come on value 4 or off um key three I guess that would be fine okay so now if I sell my file and here you can sit with long uses this map right here so we have this first property right here which is holding this data as a object right here because this is our data structure and it is now providing a key of string word here Y is that because here we are just storing this key of string right here but we can give any name we want like because then if you sell there and here you can see it will not gives us that value of Zen I mean like their property of Jose and the value of their value of the one I'm like really of key one and then it will give us the object and value of K2 and it will now use this function value of key three right here okay so this is how we are going to be setting the properties and the value stress method right here or map to be precise and map also provide us with a few methods so I'm gonna just use like constral log CLG Consular log for map dot keys and now let me just execute the server log uses the amount of keys we have inside this map so I'm going to just save there and here you can see it from now gives us this iterable object right here and if you expand that and here you can see it from log users like um the first value the second value and the third value and now let me just duplicate that and we have one more one so if you want to check the value so we are going to be just writing like a values right here we'll use I'm going to sell that so here you can see it unlocked just gives us these values right here so value of q1 Q2 and value of key three right here with down these Hosanna and object and function right here so it will now gives us this key I mean like radio 4K one value four key two and value four key three right here we have one more so let me just comment this out so we have one more let me just write console.log so if you want to delete like I don't know some sort of a property or a key from their map so we are going to be using this delete method right here and then here we are going to be specifying the key name so in this case we are going to be just writing key two and now let me just save there and here you can see it will not use a screw right here but now if I log there to the console and now if I sell there if you check it out so here you can see that key 2 was gone where we stored this empty object right here so here you can see we don't have any M2 objects right here so we just have hosen and we just have this function right here okay so this is how we are going to be deleting a key from this map right here so next thing which I'm going to do is that we can also check the size so I'm going to just write like map dot size and now let me just save there and here you can see it will not gives us the size of two why is there because here we are adding three items right here and here we are getting these two dance because here we are removing that Q2 from here so that's why we are getting this size of 2 right here so that was edit about a map but now let me just show you how we are going to be iterating over through a map and how we are going to be getting the keys and the values by using iteration method which we've already learned in this course so we are going to be first of all writing the phone off Loop so we are going to be using like lead and then here we are going to be specifying the key and the value right here and we are going to be just writing off and then the method right here are not a method to be precise another method but the map the structure right here and now let me just log to the console this key and here I'm gonna just provider two dashes for myself and now let me lock this values as well so now if I sell there and here you can see it when log uses the key then the dash is and then the values right here this is how we are going to be iterating over through our map and this is how we are going to be extracting or getting the values from that map I'm going to come in this line out and now we can also it read over through just like the keys so we can just write let key of map dot Keys the function which we learned at just a second ago and we can just log to the console this key right here so now if I save there and here you can see it will now just gives us these keys right here so we have the key of Jose we have this empty object and we have this function right like Anonymous function right here okay so this is how we are going to be getting the keys and this is something we are going to be getting even the values as well so now let me just comment this line out as well and now let's learn about how we are going to be iterating over through the values so we are going to be first forwarding uh four lead value of map dot values right here so I'm going to just execute method right here and now let me just log to the console this video and now if you sell our file and here you can see it just gives us all of these values which we are providing are right in here okay so that was just the basics of what a map is and how it works uh and one you should care about learning maps and how should you use maps in your project so so Maps is nothing much like nothing special but it is just a advanced way of object uh to store your keys and values inside your object anyway so now I'm going to give you a quick challenge and you have to perform this challenge by yourself if you can do it as completely okay then watch the solution and then I'm going to give you my solution so I'm going to remove all of this stuff from here and now let me just place that right here so the first thing I want you to do is that I want you to create a new map right here then set these properties like a b and c then set these values as this property is like 1 2 and 3 and then get the value of a from that map then check the size of their map delete the property B and check the size of that map so give it your best shot if you can do it this company really okay then watch a solution and here is my solution so what I'm going to do is then I'm going to destroy like um cons of map one and I'm going to just write like new result keyword and map right here and what I'm going to do is that I'm going to destroy map.set method again and I'm going to destroy the key or the property of error here as a string and I'm going to just pull out one now let me just duplicate that like two times this is going to be where B this is going to be the C and now let me just write 2 and this is going to be the C I mean like the three and now let me just lock the console map one dot get method of a just a so if you just sell there and here you can see um why are we getting this a you're reporting ABC why aren't we getting that let's just refreshing oh that's because here we are specifying this map it should be map one to be precise so I'm going to just write map one and I'm gonna just save there and here you can see it will now just get only one item right here okay we also have to check the size so I'm going to just write like map one dot size and now if you save there and here you can see it unlock with this one and now let me just delete one item from that map so I'm going to use map one dot delete and I am going to distribute this P1 right here and I'm gonna also um check out the size of that so I'm gonna just comment this line out and if you sell there and first of all it will give us three and once we remove the second like the B value or the b key to be precise so then it will give us two right here because we just remove this one so it will now use these two properties right here so yeah that was it our maps in JavaScript so that was there about a maps in JavaScript so now let's learn about what in the word is a sets and why you should use them so set is a built-in data structure introduced in ecmascript 6 that represents a collection of unique values and unlike arrays set allow you to store only unique values which means that duplicate values are automatically removed from the search and each value can occur only once within a set and set objects are useful when you need them to store a list of unique elements and quickly check for the existence of a specific value so this is what a sets are and now let me just give you a quick example and then you'll get to know what I'm talking about so if you want to create a set so first of all we are going to be using a set Constructor so we are going to be just writing the new result keyword and then we are going to be just writing a set and opening parenthesis and the closing parenthesis okay so this is how you're going to be creating a set and now let me just throw then some sort of a variable like cons my set or I don't know and now let me just log to the console myself right here and if you sell them and here you can see it will not uses this set right here if we expand this we have this no properties and the size is zero so this is how we are going to be creating an empty set right in here okay so now if you want to Port some sort of a radius to this set so let's suppose I'm going to just create some sort of a value like honest um I don't know initial values or something like that and I'm going to just store like a random value like one two and I guess three would be fine so you know I'm gonna just put the up above right here and I'm going to copy that from here like this initial value from here and I'm going to just place it right here inside this set and now let me just lock the console and here you can see to unlock users like one two and three right here and the size will be three okay so now let's suppose if I just provide this uh two like a lot of times so I'm going to just write 2 come out um comma two comma two comma two like that much time and now if I save my file and here you can see it only gives us one two three right here it will not include all of these twos right here it will just only work once why is there because currently we are passing this array to the set right here and search will only work with the unique values okay it will just automatically remove what is that so here you can see it will automatically remove if you have like duplicates right here so this is the first way we can pass values towards server here and we can also do that manually if you wanted to so how can I go about doing that so I'm going to just remove that from here and what I'm going to do is that I'm going to just write like my set first of all and then we have a property of another property but a method of error here and this error will allow us to add anything we want so we can specify like a number we can specify the string in anything like that okay so in this case I'm going to just Port A few items right here like apple and I'm going to duplicate that a few times so I'm going to just add like banana then I'm gonna also add this Orange right here and now let me just add this apple one more time so what do you think will be the reason if I send my file and if I sell my file and here you can see it will only use a sample banana and orange right here it will not include it will totally even remove that from our array right here if you just remove it so this is how currently things will look like right here inside these search and it will only work with a unique values it does not work with the duplicate values so we have a few useful methods on this sets right here so what I'm going to do is I'm going to just write like my set and then I'm going to just use like hands method and hence method as the name suggests that it will just give us a Boolean uh do we have this property or if you don't so it will just give us false so if I just write banana in this case b a n a there we go and now if I send my file and here you can simply now use a screw right here why is that because here you can see we have this banana so it is now giving us this true right here but let's suppose if I just write my own name like Hussein and if you sell there and here you can see it will not use a spots right here why is that because this property is not available inside this set right here so that's why we are now getting false inside a console okay so now let me just search or you know that that was it about this has method you can duplicate then you can play around with that in your spare time but that's that now if you want to delete a specific property from this set so how can you go about doing that first of all you just have to write like the set name and then you just have to write this delete method right here and then here you have to specify the value which you want to delete so in this case I'm going to just remove like this orange already or you know I'm gonna just remove this banana from here I'm gonna copy that I'm gonna just place it right here I'm going to save my file and here you can see I'm gonna have to log my set one more time so I'm going to save my file and here you can see it will only give us this apple right here and this orange it will not gives us this banana right here because we remove this banana right here from our cell we have one other method which is called uh you know first of all let me just save that and it will not use apple banana and orange right here but if I use like um my set and if I just write dot clear method and now if you sell there and here you can see it will not get just clear around all of the properties I mean like all of the values which this set has so it will remove every single thing from this set and it will just give us clear set or empty set right here okay so that was it about sets just a basics of sets I'm going to remove there and let me just remove these steps from here as well I guess I'll be fine and now let me just iterate over through this set and now let me just get all of these values so what I'm going to do is that I'm going to just write a full result keyword and I'm going to use like item off and then set okay or my set to be precise and now let me just log to the console this item right here and if you save that and here you can see it will now give us all of the values which this set has right here so we have this ample we have banana and we have orange right here so then was it about the basics of sets so now I'm gonna give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch the solution I'm going to remove all of that stuff from here and here what I want you to do is that I want you to create a set with the name of letters and I want you to add these letters like a b c as a properties and a b c as a values and iterate over to the set and log each of the values into the console okay I don't even know why I just write that I'm going to just remove that and I'm gonna just set that to two and this one should be um three okay so give it your best shot if you can do this completely okay then watch the solution all right so here is my solution so what I'm going to do is I'm going to just write console letters and it will be now equals to new set right here okay so next thing which I'm going to do is that I'm going to just add my uh letters right here like a b c so I'm going to write a b c and I'm going to just lock the console um this letters right in here so if I sell there and here you can see if unlock uses this letter with the key of 0 and the radio one right here so that's then so now let me just iterate over through all of their array I mean like not array but uh set and then we have to get all of the radius so what I'm going to do is then I'm going to just write a full result keyword then let radio off uh letters come on letters and we just want to lock the console this video right here so if I just write value and sell there and here you can see it will not give us a b c right here inside a console so that was at about a sets in JavaScript so that was it about a sets in your own script so now let's learn about the symbols in JavaScript so what in the world are symbols and why you should care about that so symbol is a unique and immutable primitive reader time so what in the world is this immutable mean immutable just simply means like the value cannot be changed so symbol is a unique and immutable which means like the value cannot be changed primitively at a time introduced in ecmascript 6 and assemble is often used as a identifier for the object properties so just keep that in mind to avoid a potential naming complex okay so we are going to be using um what do we call it sample as the identifier for our object properties okay unlike strings or numbers samples are guaranteed to be unique when you create a symbol it is unique and cannot be recreated it or changed this uniqueness ensures that a symbol will not be colloid with other property names even if they have the same string representation okay so that was just a basic introduction of what in the world is assembled and symbol is not a huge topic but it is just new topic which I also want to include it in this course okay so first of all how in the world you are going to be creating a symbol so you are not going to be writing a new Wizard keyword instead you are going to be just writing the uppercase s and then same Bowl name right here then you just have to execute there and this is how you're going to be creating a sample okay so now let me just throw that in some sort of a variable like const my sample or something like that and now let me just lock the console my symbol and now if you save there and here you can see it will now use this symbol right here so now let's just check the type of this symbol and it will now use a symbol the type of symbol assemble it's not an object it's not a string or it's not anything but the type of symbol will be symbol because this is a primitive but is that this is a primitive data type and it is immutable which means like the value of the symbol cannot be changed okay so I'm going to just quickly remove there and now let's suppose if you just want to provide a value to this symbol so we can just write a value like this so I'm going to just write like my uh custom sample or something like that and now if it's out there and here you can see it will now hold the value of my custom sample right in here okay so that's there so you know what first of all let me just create two symbols and we are going to be compared there so I'm going to just write compare ring symbols there we go okay so I'm going to just write like const my same symbol one and it will be now equals to sample that's why m b or kind of awful name and now let me just duplicate there and this one should be assembled too there we go so in this case I'm going to just write like my custom um sample one and I guess that would be fine yep that should totally do and I'm going to just uh compare this so what I'm going to do is that I'm going to just write well you know instead of writing that stuff I'm going to just write name and this one will also have the value of a name right here and now I'm me just log to the console on my sample one and Triple A quantity operator and then my symbol two okay so now let me just sell them and here you can see it will give the spawns right here why is that because as I said like the value will be always unique where is that the value will always be unique uh as I said like here you can see the oh the value will always be unique and this uniqueness ensure that the symbol will not be Collide so that's why we are going to be using these symbols as the identifier or the object properties okay so it's not a huge thing I don't want to waste your time more on symbols but now let me just uh create some sort of object like totally empty object right here and now if you want to provide a video for that object come like the properties for the object so I'm going to just write obj and I'm going to just put like my symbol one as a property right here which means like we are just writing this code like that I'm going to just write my symbol one and some sort of a value so so here we are going to be using our symbol for this object right here so I'm going to just remove that so here you can see we now provide this property of our unique sample and we are going to be providing some sort of value for that so I don't know um I'm going to just write like a value one right here so now let me just duplicate that and this one should be value two and I'm gonna also change the symbol to um symbol I mean like my Assemble two there we go and now let me just lock the console obj like this simple object right here so I'm gonna just save that so here you can see it will not use this symbol right here with the name and here you can see the value which we specify to our object right here okay so that's there and yeah uh you know what let me just um you know I'm gonna just remove this coding from here and now let me just create two more symbols so I'm going to just write con sample one and it will be now symbol come on not assemble one but just assemble and now let me just remove there and change that to symbol right here and I'm gonna also write my name and here I'm gonna also part my name right here and what I'm going to do is that I'm going to lock the console uh not lock the console let me just create um then object right here and we're going to be specifying some sort of a property series object so I'm going to just write like Zen dot h and it will be now equals to 19 and I'm gonna also provide this Hussein and here I'm going to just specify some sort of a gender and it will be now equals to mail obviously and yeah in this case you know what let me just change my gender let me just show you there and I'm going to just change that to female and what am I doing this one should be gender okay so gender it will be now equals to email okay but if you use word sample as the property identifier so I'm going to just write symbol 1 and it will be now equals to Alex and now let me just duplicate there and this one should be John right here and I'm going to just write 2 right here symbol 2 and now let me just lock the console this was in and now if you sell there and here you can see it will not give us like edge of 19 the gender will be now set to female instead of a male right here Y is there because here we change the value of this property which is this gender right here and here you can see we specified this symbol one right here and we store the value of Alex right here and here you can see we specify the symbol 2 and we specify this new value of John trade okay so if you just write like symbol one and now if you save there and now let me just check it out and here you can see it will not give us the sample one of John right here okay so now let me just undo that and this is how you're going to be creating a symbol this is how you're going to be providing that symbol to this object right here and this is how you are going to be playing around with symbols in JavaScript so what I'm going to produce that I'm going to just give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch the solution and then I'm going to give you my solution I'm going to delete all of that stuff from here so create assemble and provide the value of food and check the time of that symbol create empty object and store the symbol as the property to that object it read over the symbol and I guess I forgot to show you how to infrared over the symbol but you know you don't have to do this long step you don't have to do that so now let me just give you my solution so here I'm going to just write like a lead result keyword and I'm going to just write a Sam for assemble and I'm going to just store my symbol as a value okay so I'm going to just write Foo here's the name and then I'm going to just check the type of that symbol like type of Sam and now if you save there and it will now give us that the same over here inside of console and now what I'm going to do is that let me just create an object right here just empty object right here and I'm going to just specify this symbol as a value so I'm going to this word symbol and here we are going to be providing a simple value of a and here what I'm going to do is that it will be now equals to like um some value or two okay and now what I'm going to do you know I'm going to just lock the console my object right here and let me just say over there and here you can see we have this sample and here we are just specifying some sort of a value some value for that field so I'm going to cut that from here this View and I'm going to just place it right here save my file and this is now assemble off here okay so that's there and now the final thing which I'm going to show you is that we are going to be also iterating over through our map so I'm going to just write index and then inside that object and now let me just get my Index right here so or items to be precise not index so if you sell there and here you can sit when log uses this um symbol right here so it'll give us some value of 4 few and we can provide like more values if you wanted to so you can just write like words come on first name and it will be now equals to analyx and then this last name will be now set to a need or something like this if you save then it will now give us the first name the last name and this view right here so everything is working the way we expect him to work and that was out of our samples in JavaScript before getting into the actual content of this course first of all we have to ask ourselves is that word is a d o m even mean so if you ask for a good old friend like Google that word is a Dom even means Turtle gives us that definition that Dom simply stands for document object model like d stand for document how stand for object M stands for model document object model you just have to stick it into your mind but now the question is what does that even mean like what is the meaning of document what is the meaning of object and model so let me just give you a quick definition of there when a web page is loaded the browser creates a document object model for the page so like let's suppose you use it to some sort of a web page like I don't know Twitter Facebook Instagram YouTube whatever you visit some sort of a web application or web page so their browser will create a document object model for us and I'm assuming that you are still not with me so let me just give you a quick example in coding the camera all right so here you can see we have like this HTML code right here and I'm assuming if you're watching this video is that you already know HTML and CSS if you don't so you can check out my 16 hour long course if you want to anyway so let's suppose we have a file inside that file we have this code in like we have body inside this body we have H1 with the text of hello then we have a ul and two allies inside there so we have one and two other levels so this is our code we sell our file everything is working the way we expect them to work we open their file in the browser I want to consider this is like a browser okay so we open their file inside our browser so their browser will convert our coding into a document object model so it will just create a huge document object and it will just create object for body object for H1 for UL Li if you have section article navigation a full assigned bars all of this stuff it will just create object for all of that stuff which we have inside our files okay so I want you to just stick their structure in your mind so whenever we visit to some site so that browser will convert their web page to something called document object model so there was just a quick definition of document object models so now let me just show you everything in a coding then you will get to know what I'm talking about so attached to this value you will find a link which will bring you to my GitHub repository so you can either clone my repository or you can download the starter files and you can also download the Finish file as well so if you just open this folder right here so we have a few other folders like we have um what is a Dom accessing the ROM enter text content HTML classes getting and setting attribute sibling style blah blah blah and we also have this uh folder for projects as well and so I want you to just download the starter folder then I'm going to be just right clicking on it and click on this get bash and then I'm going to just write code and period and throughout this course I'm going to be using a visual store decoder as my coder and as a web browser I'm going to be using a Google Chrome and if you want to use some other web browser or some other uh coders so you're totally free to use there but for me I'm going to be using visual Source recorder and a Google Chrome as my browser okay so I'm gonna just get into it let me just zoom in a bit so starting from the first thing is that what is a dome we already learned there so we have this index.html file and we have this app.js file right here so inside this index.html file we just have our basic um HTML structure right here and then inside this body we just have our H1 with the text of hello world and then we have another H2 we have like hello not not hello welcome to the Dom section of this course and then finally we just link our JavaScript to our HTML so I'm going to just right click on it and open it with the live server so it will now open this file in a live server so the next thing which I'm going to do is that I want you to just click on these three dots and then I want you to just click on or hover over your mouse over to this more tools and then I want you to just click on this developer tools or you can also use this uh shortcut if you want to and throughout the course I'm going to be using a shortcut so chances are your will be set to elements so if it's set to elements you just have to click on the console okay so it will just open a console for you anyways so now let me just prove my point about the document so what do I have to do I'm going to just write console.log of documents if you just write console.log of document and if you sell a file and here you can see we get a document right here so if we expand that and now here you can see we are getting all of that properties in its value different kind of values and by the way if you're not getting all of these properties and its values so what do you have to do you just have to write instead of console.log you just have to write console.dr for directory or whatever so if you sell a file so it will now gives us that same result right here okay so what I'm gonna do I'm gonna just click on these three dots and like so so now here you can see I just proved my point like here you can see we have a location property a URL and we have countless other and I will highly encourage you to spend a little bit of your time on this document object and we are going to be also uh using this document object throughout this course so now let's suppose if you want to get your body like uh you know what you want to get like a head area like this head area which you have already so head opening tag and head closing tag so if you want to get there so I'm going to just write instead of console.er I'm going to write console.log and I'm going to comment that first line and I'm going to start period this document is an object so we can access our properties in its method which we have inside this uh document object right here so I'm going to just write period to X's uh some sort of a property or LMR so in this case I'm interested in the head property so I'm going to just write head and then if you sell that and now here you can see from log uses that head area right here so we don't have nothing inside that that's not true let's just see we have a metadata but it's not showing it anyways you know what we can also get a title so I'm going to just duplicate this line of code and instead of head I'm going to just write title and if you sell there it no longer uses the title of Dom right here so we provide a title of Dom in this HTML so it will give us their Dom and our console okay so I'm gonna just duplicate there and let me just write a body let's suppose we want to get body so I'm going to semi file and now here you can see we have this body if you expand there and now here you can see it for long uses all of the properties and its values and a different kind of methods related to this body right here okay so we have countless properties in its methods and all of that good stuff so we have inner HTML of that H1 of hello world and then we have a new line of 10 H2 of Welcome to the Dom section of this course and you can also see the inner HTML I mean like inner text and inner HTML the input mode is set to empty string and you can explore all of that in your spare time okay so let's suppose if you want to get like best URI so you just have to write document.best uh not best you are but you just have right document that URI so if you sell that and now here you can see it online gives us that URL in which we are running our applications so this one right here okay so run long uses there so that was it about a definition of a document object model so I'm going to just close this file close that file as well and I am going to close that folder and I'm going to expand this second folder which is accessing the Dom okay so we have two files so we have two other folders inside this accessing the Dom folder we have exercise one which you're going to be doing there by yourself and of course I'm going to also give you my solution as well but I will highly encourage you to solve this exercise by yourself now I'm going to expand this one so we have this index.html file and then we have our app.js file right here okay so close that one okay we wrote a little bit of code in there I'm going to close that one like so and notice just get back and here you can see we have a basic setup or for HTML right here but we have a little bit of styling right here so we select or H1 H2 H3 H4 H5 and what do we did we just poured a little bit of border of uh CCC one pixel solar we provide 10 pixel of padding and we also give him the max width of 400 pixel and we also pour the Box shadow of 0.5 and blah blah blah of CCC you will see the result just in a second but inside the body area we have our H1 with the level of get Elements by tag name then we have our H2 with the ID of Main and we have a level of get element by ID then we have H3 with the class of CLS get element by clon's name then we have a H4 with a class of cls1 and also the ID of one and we have a query selector then we have our UL then we have a label of query selector all and a few allies and each of these allies will have one two three A4 yeah just four and finally we just add our script area right there so if you just right click on it and open it with a live server certainly open or file analyze server and I'm going to be also opening my developer tools I'm going to stick that to the right like so and this is how it looks like right now okay so say bye bye to the other one and now we are going to be working on or accessing our Dom elements so I want you to just go to your index.net index.html file but app.js file I'm going to just zoom in a bit so if you have previously worked the CSS you already know that first of all you have to select something and then you can play around with that like let's suppose if you want to select something like uh I don't know CSS selector logs some sort of a selector selector and then you can just provide a property and a value specifically to that property okay so you already know this so the same will apply in JavaScript as well so like the Dom so we have a few method to access our elements so if you want to access something by using JavaScript so we have a few methods right here so we have get Elements by tag name get Elements by ID get Elements by class name get not get or query selector and query selector all and you don't have to worry about this one for now so as the name suggests that get Elements by tag name will allow us to select something by tag name okay like HTML element by tag name and then we have a get Elements by ID so it will allow this to select something or HTML element by using ID so then we have a get Elements by class name so as the name suggests that it will allows us to select our HTML element by using a class name okay so in CSS if you want to select something like maybe by the tag name so you're going to be first of all writing H1 or H2 or whatever the tag name is so in my case I'm going to just stick to that H1 and then you can provide your content inside there so this is the HTML I mean like this is the CSS tag selector and now if you want to select something and buy ID in CSS you're going to be first of all writing a pound symbol and then the name of the ID okay so then we have a class selectors if you want to select something by a clause you're going to be writing a period or dot where you want to call it and then the class name and then opening curly brace and closing curly brace and you don't have to worry about these two for now so this is a CSS selector so I'm going to just remove that from here I just kind of want to show you if in case if you guys already don't know about that so that was just kind of a CSS selector so now if you want to select something by using a JavaScript so we have a few methods so now let's just use that first of all what do we have to do I'm just asking you a question so like what do we have to do first of all if you want to select something so we are going to be writing our document because this document is over man objects so we are going to be accessing all of our properties and Method from this document so now if I want to access this method like get Elements by tag name so what do I have to to do I'm gonna just write dot or period whatever you want to call it and then I'm going to just use the name of that method like get Elements by tag name okay and then opening curly brace not curly brace but opening parenthesis and closing parenthesis and inside this parenthesis we just have to specify the element name so which one we want to select so if in this case we want to select that H1 so I'm going to just write H1 in it okay so now let's just log that to the console real quick so console.log and like so so if you sell them and now here you can sit unlock users the collection of their elements so we have zero value because there's some sort of array but it's not an actual array it's a collection if we have our Mouse ordered so here you can see it will now select that H1 right here and the length is one now let's suppose if you have more than one H1 inside or HTML document so if we just duplicate that a few times and now if you sell there and now here you can see inside this collection we are getting all of their H1s right here so we have one two and blah blah blah through nine and here you can see the length is 10 right here and you can also see the inside or web page right here so I'm going to also get a length so in some cases you need the length of or HTML selector so we can just duplicate this line and we can just write a length property on there so if you sell there and now here you can see it will now gives us 10. like the length is 10 so we have 10 items starting from the 0 through 10 so it will just gives us 10. uh well videos whatever you want to call it so that was the first selector about get Elements by tag name I'm going to comment these and I'm going to hit enter right here just for separation purposes and I'm going to remove uh all of these electron except that first line and zoom in a bit so that was just the first selector like get Elements by tag name if you want to select something by a tag name so you can just specify the tag name it doesn't matter if you provide like H1 H2 H3 4 UL span article section aside header footer etc etc you just have to provide it inside these double quotes right here okay so selected four years so that was just it about for first selector now the next selector we have is a get element by ID selector it's a method but it will allows us to select something by using ID so what do we have to do I already gave the answers I want you to give me the answer what do we have to do to access this element well first of all we just have to write document and then we can access or get element by ID method on there so what do we have to do in this case we just have to give the ID name right here so what is the ID name the ID name is main so I'm going to just copy there and I'm going to put it right here and let's just log there to the console and see what will we get and now if you sell there and now here you can see we have that H2 with the ID of men right here so if you click on that we have different kind of properties and its values for this H2 right here okay so this is our H2 and this is how we can select something by using get element by ID method right here so if you have another ID like I don't know maybe if you want to select this one so I'm going to just copy this ID and I want to pass it right here and I'm going to just send my file and here you can it will not use that H4 with the ID of one and also the class of one so like cls1 so here you can see we have a class of cls1 okay so this is how we can select something by using ID get element by ID selected so I'm going to copy this Main and I'm going to pass this menu right here it will not give us that main right here I'm going to comment this line out as well and let's just start working on our next one like get Elements by class name and S name suggests that it will allows us to select our element by using our Clauses so first of all we have to write a document so then we want to get or get element uh by class name kind of a long method right here but here we have the specify or class name in a quote so which kind of class we want to select so if you want to select the CLS class I'm going to copy there and I'm going to paste it right here so if it's Sarah file then we have to log there to the console so that we can see everything a bit better I'm going to zoom out and this is how it looks like so we have a console.log then we have our document and we are accessing this method on this document okay so the value we provide or CLS and now you want to check if their value is available or not so if you sell a file and now here you can see it online users there um value right here so we have this H3 with the class of CLS and now if you have our Mouse ordered it will now select or highlight there and that kind of an orange color right there okay so we are now selecting this one what if you don't have like that Clause if you just put uh invalid class like I don't know maybe if I just borrowed apple and if you sell that error log uses nothing because this HTML collection did not found uh that Apple closet will now gives us empty collection right here okay so what if you provide uh this class right here so like cls1 copy there and I'm going to paste it right here so if it's several file and now here you can see it will now select that H4 with the idea of id1 and also the class of CLS one right here okay so it will now select this CLS one right there anyways that was just it about for get element by tag name get element by ID and get Elements by class name so now what about this query selector and this query selector all so now let's just discuss that bit I'm going to comment this line out and I'm going to start working on our query selector so query selector is the most used one and my favorite one selectors so throughout the course you're going to see me using query selector if you want to use like some other select like maybe tag Name ID name blah blah blah which we already learned so you can also use that but for me I'm going to be using this one and I'm not saying that you don't have to use the other one and you should use this one I'm just saying like I really like query selector because it allows us to select something or select or Elements by using just a CSS selector so if you want to select something by query selector so you just have probably like um I don't know if you want to select like clouds so you have to just write a period if you want to select ID so we have right pound symbol if you want to select a tank so you just have to write a tag name okay so I'm going to show you that just in a second first of all we have to destroy a document then query and then selector okay so query will be in lower case and then this s will be uppercase and and then the rest of them will be in lowercase okay so this is how the syntax will look like and then we have our opening parenthesis and closing parenthesis and inside these parentheses we are going to be writing our strings so here if you want to select something by tag name let's suppose so you just have to write a tag name like H1 maybe if you want to select this H1 so we are going to be just writing or H1 and now let's just log that to the console real quick so console.log and now if you sell a file and now here you can see it and now select that H1 right here okay so if you want to select something by class so you just have to write period or done and then the class name so it was the class name the class name was CLS I'm going to copy there and I'm going to paste it right here so if you say our file it no longer uses their H3 with the Clause of this CLS if you don't have some Clauses like maybe I just want to write my own name and if you sell a file admin log uses nil or null whatever you want to call it and let's suppose if you do provide this class right here but we forgot to include that period and now if you sell there it will still give us that nail Clause right here and that's because we forgot to include that period right here okay so that was it about how you can select something by tag name and class name now let's just learn about ID selectors so if you want to select this ID so we are going to be copying this name password here but first of all we have provided over pound symbol right there so we have to specify this pound symbol and then the ID name is just like a CSS selector and knife is server file it will now select that H4 right here so here you can see we have that ID of one on this selector so yeah that's that's there anyways so that was it about query selector but it will just gives us one element at a time so if that selector like I don't know let me just show you that real quick so we have cls1 so LS2 you know I'm going to duplicate this line of code a lot of times and now if you sell that okay so I'm gonna put my CLS right there so CLS and now if you sell that it will just select that first one it will not select all of them here you can see we have like one two three four five six glasses right here so we we reuse this class like six time but it will just select the first one like this H3 it will launched like this one this one that one and not any of them but it will just select the first one so if you want to select all of them it wants for that we have another method called query selector and all right here okay so I'm gonna comment this line out and instead I'm going to be just writing like document dot query selector all and now let's just provide or create selector all like just period and CLS and by the way if you want to select something by using a ID so you just have to provide a pound symbol if you want to select something by tag name so you just have to provide a tag name like H1 or span or section or whatever all of them will work in here as well just like a CSS selector but now in this case we want to select all of that allies I mean like uh CLS classes so you just provide CLS I'm going to just write console.log and if you sell a file it will now select all of these CLS right here like I mean like why am I saying CLS yeah CLS is the Clause that's what I'm saying okay there will now select all of their CLS I'm going to comment this line out and now let's suppose if you want to you know I'm going to remove there now let's suppose if you want to select all of these allies at once so for that we can use this query selector all as well I'm going to just write console.log of document um dot query selector all this method inside this query selector all I'm going to explore Li right here so if you sell that it will not select all of these and like right here so we have Li one two three four right here and the length is also four and we can also provide dot length property in this one as well so it will not use the length of four anyway so that was it about a little bit of query selectors and all of that kind of a good stuff uh okay we have the providerable quotes in there what else I wanted to show you okay so if I just write like Li right here and instead of a query selector all if I just remove that all and if you sell there and here you can see it will not just select the first one right here like this one a lot of talking I'm gonna just provide a creative selector all I'm going to comment this line out so now here you can see we are just console logging all the time we have like console log one two and blah blah blah a lot of times right here so instead of logging everything to the console we can also store everything in variables and I'm assuming that you already have a little bit of knowledge about JavaScript if you don't have a level of knowledge in JavaScript so you can check out my course or entire playlist I've got all the entire playlist for you you can check it out and it's totally for free so now let's suppose if you want to select something and you want to store the value of that in some sort of a variable so you can also do this so let's suppose if I want to select that H1 so I'm going to just write const H1 or let H1 or 1 H1 so you can use which aircon if you like but in my case I'm going to just select the H1 and here I'm going to just write a document uh document.crew ready selector of our H1 Okay so we are using uh tag selectors so if you just log that to the console like H1 and if you sell there it'll just log the direction to the console and the name doesn't matter you can game like apple name let's select that apple and it will still work but you have to specify the correct selector inside this method right here okay this is just a simple variable so you can store your values inside this variable so I'm going to just set back there to H1 so H1 you can also just set that to like uh I don't know h1l or element if you want to but in my case I'm going to just stick to that H1 so if you save there it no longer uses that each one if you want to select if you want to store multiple values like query selector all and you want to select that Alloys so if you sell there it will not use the collection of all of these allies right here okay so everything is working the way we expect him to work uh okay so we are totally done with this section so in this section we just learned about a few selected we learn about get element by tag name it allows us to select something by using a tag name then we'll learn about get element by ID we also learn about get element by class name we'll learn about a query selector and query selector all query selector and query selector all will allow the students to select or element by just using a CSS Clauses like period pound symbol and all of that kind of a good stuff but this will just gives us the first element where it will not use the collection and this one will give us all of the collection like so okay so now it's challenge time I want you to just open this file and I want you to just open this app.js file and I want you to just read through this instruction and solve this challenge by yourself if you can do it that's totally okay then I want you to come back and continue with the value and now I'm going to give you my solution so what are they saying select element H4 which holds the text of red by using get element by tag name so let's just explore order HTML I'm gonna hide this head area so we have this H4 with the text of red right here so what do we have to do we have to select that by using an element by tag name oh my goodness this the most simplest uh the most simplest challenge I can give you so let's just write const and let's store the inside H4 and I'm going to just use document dot get Elements by tag name elements byte tag name like so now let's just put our Edge port in there and now let's just log that to the console I guess four and now if it's out there and boom okay so we have launched this index.html file my bad launch this one say bye to the other one open order console and here you go we have our H1 and we I mean like we have our H4 right here with one element selector right here okay so let's just refresh there open it and there we go we have our H1 I mean like S4 all right so that was the first solution now the next thing which you know the next thing which you have to do is that we have to select a day with a class of green which hold the text of green as well by using your element by tag nav so let's just explore there we have a day with a class of green and we want to select them by using this get element by tag name so let's just write or const and then Green in this case and document dot get Elements by word by class name and now let's just put or not period but if you just have to specify the name because we are not working on a query selector and now let's just log that to the console like green then if you sell that it will not okay so something isn't working get element by class name it's a green oh my God it's a green and knife is still there and it will not give this div with a glass of green right here okay so the Second Challenge is also done I'm gonna comment both of these cons logs from there because we don't want it to clutter or uh console so the third thing which you have to do is there select div with the idea of blue which holds the text of Blue by using get element by class name yeah there we go so let's just see we have a day with the cloud not class but ID of blue and the text is also blue so we just have to write like cons blue and inside build blue and it will be equals to document dot this get element by class name I just copy there I cheated a bit you can also cheating if you want to and now let's just lock this blue to the console and now if you sell there okay so the one the class of one the uh select the div with the ID of blue okay so we are using a close name not a class name get element by id id my bands sorry this one is a time this one is a class now get element by ID copy there and I'm gonna paste it right here and see it all right so here you can see it unlock users div with the class or blue and by the time you're watching this already you will get this correct instruction you will not see that query selector or whatever that was I mean like I'll get animated by class name it will be a get element by ID I'm going to comment this line out and now what else do we have to do select div which has the class and ID of yellow real low by using query selector let's see okay so this one do have a w at the end so David the class of yellow ID of yellow and takes off yellow so we are going to be using the using a query selector I'm going to just write cons a yellow and it will be nice to document dot uh word query selector uh document dot query selector of just a yellow in the class and let's just lock that to the console real quick lucky yellow so there it will now select it as a clause we can also select it as ID because we have a yellow ID as well and we can also select oh we cannot select it for anything else so we just have either selected by uh class or by ID all right so that's working let's suppose if you just forgot to include that pound symbol save it it will not give us nil we already expected that comment this line out so the final thing which you have to do for this exercise is that select all of the elements which has the class of deal by using query select row okay so let me just show you that in real quick cons all teals you can give any name you like document dot query selector all and inside there we are going to be selecting our TL okay so let's just log there to the cons like all teals and now if you sell there it will now select all of these Tails right here so if I hover my mouse ordered certain no select coil of these teals right here okay so let's suppose if you just provide query selector instead of query selector row and if you sell that it will not just gives us the first one it will not give us the rest of them so that's just the difference between query selector and query selector all so in this section we just learned about uh accessing element by using the Dom accessing the Dom element by using JavaScript there we go so now that we learn how we can access elements from a Dom the next topic which we are going to be discussing is how we can get the inner tags inner content and inner HTML so we have two folders We have a live coding so I'm going to just open my index.html file and also the app.js file and then we will have our exercise okay so just right click on it and open it with a live server so now just open it or find in a live server and I'm gonna also open my Dev tools as well so now I'm going to just clip this head area for now and now here you can see we have our P tag inside this P tag we have a few um just random words right here and we also have this strong tag right here and we just put a little bit of text inside this strong tag as well and then we have a script tag inside this paragraph as well and then we just log that to the console like Jose here right here okay and then finally we just have our H1 with the text of hello world so in this video we are going to be learning about I mean like in this section we are going to be learning about three problem parties the first one will be inner text the second one will be inner I mean like text content and the third one will be inner HTML so this is what we are going to be learning so first of all we are going to be selecting our paragraphs so you already know how to select that we already learned a lot about selectors so we are going to be providing P document.org query selector and you can choose whichever kind of selection you method you like but I just choose query selector so now let's just start from the first one which is that inner text so if you want to get the inner text from some sort of element so we can just use the inner text property for that let me just write a console.log of paragraph and then dot enter text right here so if you sell that and now here you can see the log uses that inner text right here poorly poorly formatted you know I'm going to open that in separate windows so you guys can see everything a bit better here you can see we have that Hussein here that's because of this script tag right here so we have like Consular log right here inside this console.log we just have for Zen here right here and you cannot see that script tags right here it will give us all of their HTML content right here by but we cannot see that script tag and we can all see that who's in here right here if you just hit Ctrl F and we can also search for the script and it will not give us any script tag right here because we don't have any this inner text property will give us all of the text but it will be totally formatted and it will not give us any uh content like any HTML in any JavaScript kind of a Content it will just gives us a pure text right here just a simple pure text all right so that was the first one now let me just duplicate that and I'm going to comment this line out and now let's just change that to something called a text content so if you sell that and now here you can see we are now getting this text right here but it's totally unformatted and we are also getting this console.log right here but we cannot see that script tag that's because the script opening tag and script closing tag is HTML elements and also these strong tags are also HTML elements so we cannot see either a strong tag and we cannot also see see that script opening tag and script closing tag right here so this text Quantum probability will just gives us the content which is inside our HTML documents so it will not give us the HTML elements and stuff like that it will just give us a pure text it will give us a pure content and this final property will give us everything so we have an inner HTML and field cell there and now here you can see it will also include this strong tag right here like strong opening tag and strong closing tag and it will also include the script opening tag script closing tag and also this content inside the script tag and it will now give us everything okay so we can also change that if you want to you know what I'm going to comment both of these line out sell file and we just have our clear console I'm going to also remove that oh you know I'm going to comment that out for a second so there we have a clear console right here so we can also change their text if you want to so what I'm going to do I'm going to select this H1 right here and I'm going to change its content so I'm going to write H1 document dot query selector of H1 so now if you want to change the inner text of that H1 so I'm going to just write H1 dot enter uh text so I'll just write t-e-x-t and it will be now set to text changed okay so if you sell there I'm gonna stick that to the right and here you can see we are now getting text changed if I comment this line out and by default we are getting hello world that's because of this H1 of hello world and if you want to change that so you can just write dot inner H so we can just put dot inner text property and we can change this text to anything we want and if we save a file it will now change this text to text changed okay so we can also change the HTML if you want to so I'm going to just write H1 dot inner HTML and it will be now equals to log I don't know emphasis what we find so I'm going to just use M I'm going to just write one two three in it okay so let's just close that real quick like M popning tag and M closing tag and then this as the name suggests that it will also provide the inner HTML so if you sell there and here you can see it will first of all gives us one two three and it will also italicize that right here okay so if you just provide like my own name like Hussein web dev and if you sell them and it will just make it italic and also uh what we call it um it will also change the text to be like Jose and web dev okay so we can also Port uh I don't know a Dell tag so if you just provide a Dell tag Del and if you sell that it will just line through we can use or HTML by using this inner HTML property so this stuff can be very useful and very dangerous in some scenarios but you don't have to worry about all of them for now you're gonna learn all of that once we jump into some sort of a project so we are totally done with our inner text property text content property and inner HTML property as well so I'm going to just remove there and now let's just get into or exercise so I'm going to open this index.html file style.css file app.js file okay so right click on it and open it for the live server so we can see everything in a live server like so all right so we have a few content I'm going to collapse this head area from here so let's zoom out a bit first of all we have a section with a class of container we have a section with box one and box two inside of this box we have our H1 with a class of first and we have a few alarm Epsom right here okay then we have a section two with a class of two and box then we have H1 of second and we have a little bit of text in there then we have box three and then we have H1 of third and we also have a span of special right here and we just wrap this text inside that span and finally we just have old strong tag right here like strong opening tag and strong closing tag and this is the result of all of that right here okay so in CSS we don't have crazy CSS but first of all we have our resets then we just change the background color of the body to only black the text color will be wide we select all boxes so all of these boxes so we have box and here this one is a box this one is the box and so on and so forth we provide a Max with 600 pixel module with 20 pixel padding will be 20 pixel ball will be border will be one pixel all around then we have a special class which is this special class right here like these spans and we just bought a color of teal and font size I mean like font style of italic and then finally we just select word strong which is that strong right here and we just give them a little bit of color of kind of a orangish or brownish or card or whatever you want kind of a brownish color right here so this is it about our HTML and this is it about world CSS so what do we have to do in our JavaScript check the inner text of the first element so what is the first element let's just see if you just hit okay so we have this first element right here so if you want to check the text of that first element so for that we just have to create our variable cons first and it will be now equals to document.query selector of period and first okay so now we get that let's lock that to the console 7 and here you can see we are now getting this H1 and we have a little bit of lorem F7 inside there so if you want to get a text of that first so for that you can just like dot inner text so inner text and now if you sell there and it will not use this the inner text of all of there H1 right here okay so that's it about our first step so what do we have to do in the Second Step so check the text content of the second element so first of all we have to see do you have word second yeah we do have that section right here let's just select that I'm going to just write con second and when I go to document.co already selector of second okay so now if you want to check the text content so I'm going to just write second uh dot text content but we have to wrap that in or console.log so we can see it I'm going to comment this line out and I'm going to save my file and now here you can see it unlock uses the content but without formatting whatsoever right here okay comment this line hour the third thing which you have to do and the funny thing which you have to do for this exercise is check the inner HTML of the third element so let's just see what do we have inside this third element so inside this third element we have our span with the class of I mean like with yeah with the class of special and then we have a strong opening tag and strong closing tag so it will it'll show up all of these spins in all of these gibberish so let's just select that first of all cons third and it will be now equal to document.covery selector of third okay so we just have to provide console.log third dot uh enter HTML in this case and if you sell there and now here let me just um separate that and now here you can see we are now getting span with the Clause of special and the text of I can't pronounced and we also have this strong opening tag and strong closing tag if I change it to like um I don't know uh inner text right here so if I just change that to Inner text so it will not include all of there but it will give us there in a formatted fashion if we change that to Inner not inner but text content and if you save that it will give us that like so without any uh codeword search so if you just write like inner HTML server it will give us that another coding inside that inside that text so that was it about inner html text content and inner text right here property so now that we learned that what is a Dom how to access elements from a Dom and how to see the text content in our HTML and the text inside that element now the next thing which you have to do is that we have to learn about a classless property and how we can add classes to our elements and how we can remove Clauses from our elements and how we can do toggling of our Clauses so we just have uh app.js file and we have our index.html file right click on it and open it with a live server so it will not open this file in a live server I'm going to open my Dev tool set there to the right like so I'm gonna just hide my metadata from there and inside this body area we just have our H1 with a class of styles and we just provide or hello word inside there and now if I expander and here you can see inside this styling we have our Styles class right here and we just brought a color of crimson font where it will be totally normal font size not font size but font family will be sensors and text decoration will be line through okay and we are now getting all of these Styles right here okay so now let's get into or close this property first of all so now let's just select or H1 and then we can interact with that so first of all let's just write or cons of H1 you can store it in Latin Concepts uh I mean latent War as well and now let's just select or H1 right here so now let's just try like console.log of H1 Dot clauseless and now if you sell that it will not use the list of all of the classes which we provide to this specific element right here so we have just one class right here so that's why we are getting the length of one right here but if you have multiple Clauses like I don't know if I just remove the Styles if I change that one two three four five and if you have a lot of classes and now if we sell there it unlock uses all of their classes right here all of the list of their classes right here okay so I'm going to just undo that to Styles sale there and this is how it looks like right here so this classless property will allows us to check all of the Clauses which this specific element has so we just have word selector and then we can just use this class this property on there okay that was it about for Clauses now the next thing which you have to do is that we have to learn about how we can add Clauses to specific elements so how can we go about doing that let's suppose if I just remove these classes class from here so if you save that and now here you can see we don't have any Clauses any styling in whatsoever on this hello world and we don't have any values inside our console right here so we don't provide any Clauses anything inside this H1 but we do have that class of styles right here but now if you want to attach this class to this H1 by using JavaScript and interacting with a Dom so for that we can just use that H1 one first of all you will just select over H1 and then we are going to be selecting our class list property which allows us to gives us the list of their property and then we can use a useful method called ads so as the name suggests that it will just add Clause 2 over element now we have to give the name of that class inside double quotes so I'm going to just write Styles right here and now if you save there and here you can see it will not apply that cluster right here so here you can see we are now getting these Styles we don't have that class right here on this element but if you just right click on it click on inspect here you can see it did provide that stylus uh cluster right here okay let's just go back to the console and now let's just see I'm gonna copy this line out past it right here I'm uncomment it and save it and now here you can see we are now getting the Styles Clause right here and the value will be also Styles and the length is set to one okay so this is how we can set Clauses to our elements now the next thing which you have to do is that how we can remove Clauses from our elements so now in this case we attach this class right here so now if you want to remove this class from this H1 so what do we have to do I'm going to duplicate this line of code and now instead of add I'm going to just write remove right here so remove and then let me just remove real quick so remove and then the class name so now if you sell there and here you can see that styling is gone and if you just right click on it and click on this inspect so here you can see it also gone from here so we do have that class keyword right here but we don't have any value for that so that's why we are not getting there let's suppose I'm going to comment this line out and several files you already know that we don't have any classes on or H1 right here but if I just add you know I'm gonna also comment this line out as well server file so we don't have any classes whatsoever on or H1 so let's just write our class right here of styles right here so if you sell that okay so I messed it up something copy it copy paste it and now we are getting the Styles all right so now if you want to remove that style from this H1 so we just have to uncommon this line of code so we have first of all the selector like the tag name then we have a class list and now we are removing this specific class from this H1 elements now if you sell there it will not just remove that loss from it if you just provide Apple in this here so if you sell that it will not remove that Apple because we don't have any Apple claws on this H1 we don't have any ever class in this class list so that's why we cannot remove that so let's just provide Styles back and we'll now just remove that and now finally let's just learn about my favorite property or method to be precise which is known as a toggle so as the name suggests that it will just toggle the classes if we have class so it will just remove it if you don't have a closer it will just add their specific cluster so I'm going to just show you that just in a second I'm going to write H1 then classless and then toggle okay so inside this toggle I'm going to give him a class of like I don't know apple and we don't have any Apple Clauses anywhere so if you sell that and let's just see okay so let's just remove that class from here and we don't have any Apple class anywhere I'm going to right click on it and go to inspect area and now here you can see it did provide that Apple class right here that's because we are using this toggle class right here what if I just provide a styles to it so if I just write Styles so now just add that style class right here I removed it from I removed that class from here but we do provide it right here and what if I just provided right here let's just write class of styles and sell there it will just remove it so it will just go the other way around so if we have class it will remove it if you don't have that specific clone so it will add it this is how the toggling works so how can I put that in other words let's suppose if you have a class of um you know what you know what that that's why you just have a play around with that by yourself so let me just say that one more time so you guys can just understand it a bit better if we have the style clause on this H1 so it will remove it it will just remove it but if you don't have access to that style clause on this H1 so it will just add it right here so this is what the toggle do for us so I'm going to just comment this one you know we're not going to be commenting anything so we are totally done with this section as well now what else do we have to do the next topic which you are going to be learning about is something called getting and setting attributes so this is what we are going to be learning I'm going to click on this live coding go to the app.js file and index.html file as well I'm going to comment or collapse's head area and now inside this body area we have just one anchor tag which will just go to a Facebook home page and then we have our one input area right here with the type of text so this is what we have so far alrights that's it for index.html file I'm gonna right click on it and copy open it with live server and this is how it looks like I'm gonna also open my developer tools as well so we are going to be learning about href attribute value attribute type and also get element I mean like get attribute and then the attribute name and then set attribute the attribute name and its value okay so we have this href right here so first of all what do we have to do we want to select that anchor tag and we want to get that href attribute from there so first of all we are going to be writing const and then a and let's just store there in the anchor tag and now let's just get over error here okay so if you just log there a to the console you already know what we will get so we will just get this anchor tag right here so if you want to get an attribute from this anchor tank so for that we can use dot href so if you sell file it will not use the value of that edge ref right here but if you don't have the value of that a trip so let me just cut that from here save it it will not gives us nothing right here because we don't have access to that href second log gives us nothing I'm going to pass it one more time so we do have this href value uh of just a facebook.com so that's why we are getting this a trip uh right here it's trip value right here all right so there's the first thing you know we can also change that to something else like maybe uh I don't know www.youtube.com and forward slash hosen web dev my YouTube link guys let's just zoom out of it and this is how it looks like I'm gonna sell there so here you can certain law change there to youtube.com Okay so this is how we can provide a new values to it and this is how we can get elements or get values of our elements so that's the first attribute now let me just duplicate there and you know what I'm gonna also get my input tags as well so this input I'm talking about I'm going to write cons input android set to document.queryselector of just a simple input right here okay so that's the first attribute now the next attribute which you're going to be learning is that let's just log that to the console first of all input dot value so if we sell that and we will see nothing that's because we don't have no values nothing inside this input area right here so you will get nothing but if you do have a value let's just put a value to it so let's just write value of uh I don't know hello and now if you sell that and we are not getting this header right here and that's the value which we provide right here okay so that's how we can get a value from our input so that's the second attribute we get now the next attribute which you are going to be getting is a type attribute so I'm going to remove that value and set that to the type and now if you save there and type is set to text and we set the type to text right here so that's why we are getting this text type right here so if you just change that to like I don't know email save it it will not use email if you just write a password it unlocks editor password it will if you just write something else like something else and now if you save that and it will give us a text because this something else is invaler okay and by default it will just set there to text and if you serve there and everything is working the way we expect him to work so that's it about how we can get a different kind of attributes from different kind of elements now let's just learn about how we can set values to the different kind of elements and now we have our anchor tag and now we can just change this href to something else like I don't know maybe my own YouTube name like www Oh you know what https and then colon colon www.youtube.com forward slash at the red Husain web dev okay and now if you save that and now we have a Facebook so if you click on that and it will now brings us to my YouTube channel right here let's just wait for it to render all right so here you can see that go just here already I'm gonna close that one this is how we can get the values or getting the attributes so Gooding getting attributes and this is about setting attributes like a setting attributes like so all right so now if you want to set the value of something else like maybe this is right console.log of input.value and if you want to change that to something else like hello and now if you sell that and we're not oh we already have a Hello if you want to just say that to like buy seven and we are now getting Buy in here and also in here so let's just log their time to the console real quick so input DOT type is already set to text but if you want to change that to password and now if you save that it will not change it to password in here and here you can see this will also be effective right here okay so this is how we can set the attribute and now let's just learn about a placeholder so we can also just provide a placeholder to our forms and inputs so um please provide a strong password would be fine okay so let's just zoom out this is zoom out of it and now if you sell that but we have to comment this line out and now if you sell that and let's just remove this value from there save it oh my God we already sort of value in here so coming this line out and now you're getting like please provide a strong pass for this because of this placeholder attribute so this is how we can get attribute and this is how we can set new attributes so I'm going to comment both of these line out as well all right so now the next thing which you have to do is that we are going to be learning about a method called get attribute and then the attribute name so let me just write that in here oh my God let's try it again attribute and then the editor name like a attribute name in here so I'm going to just write concept.login here and then let me just select my input and we can just write again attribute method right here and now let's suppose if you want to get a type so we will just provide a type save it and we will get like text right here so let's suppose if you want to get like I don't know let's explore the placeholder to it as well so placeholder will be uh email so placeholder is now set to email here you can see there and now if you want to get an email so you can just write an email seven uh okay instead of writing email we can just write a place older like so and now if you sell there and we are now getting email right here okay so this property or this method to be precise will allows us to get attribute from a specific kind of elements okay so we can also set attribute to elements so so that was it about for getting attribute so now let's just learn about a set attribute so I said attribute aw t r i b u t e did I spell it correctly so set and yeah let's just copy that and I'm going to paste it right here and then add your name like the attribute name and we can also pour a different kind of values to it so uh let's just write console.log let's just write console.log of input first of all we have to get our input and now let's just use set attribute method on it and here we want to get like Place holder plsce holder right here and now you want to put a value of like I don't know password maybe so we can just provide a new value of password it is currently email so you can also change the two passwords so if we sell that and here you can see it will not change it to password and we don't have to provide that in console so let's just remove this console from there and this is how we can set a new value so now let's just change that to like I don't know type to be password as well so I'm going to also change the time to be pencil so if you sell that and the type will be also set to transfer so this is how we can get attribute and this is how we can set attribute and these are the methods we have for getting attribute and setting attributes all right that was a lot of talking now let's just get into our exercise and now let's just tackle this exercise and I will highly encourage you to do that by yourself but if you can't do it I'm already always right here collabs this head area right here so we have our anchor tag with a trip of Twitter and then we have our input area with the type of text then we have anchor tag with the class of A2 and no and no hrefs on this anchor tank all right so what do we have to do first of all let's just get into it select the anchor tag let's just select that by using what was that anchor tag yeah I'm gonna write const anchor tag will be now equal to document.query selector of anchor text so the first step is finish boss what else do you have to do use a get attribute attribute name to check the attribute all right so now let's just do that real quick so constant log of a DOT get at tribute and let's explore attribute name of like which kind of attribute should we check okay so we have an attribute of href so now let's just put our href inside then if we sell there it will not use a straighter right here so that's correct now what else do you have to do select the A2 and set hdf attribute trade that's kind of awesome so we can just write like uh I don't know um let's just select this A2 where is the r so we have this A2 right here let me just write a cons A2 and we're going to equals document.query selector of a-2 okay so what we have to do is set hdf attributed so A2 dot set attributes of like I don't know actually report will be fine and we can just give our own YouTube channel links so https colon Corner www dot uh youtube.com forward slash at the red hosan web dev my channel link and let's just log that H2 to the knowledge to head to to the console so if you sell that and we are now getting this A2 okay so it's a udemy to YouTube save it and now if you click on there it will now bring this to our YouTube channel right here okay all right so we are totally done with this uh exercises as well but for a bonus yeah you know I'm not gonna give you any bonus you're not worthy of it I'm just kidding we don't have any bonuses all right so now we are totally done with the getting and setting attributes so now the next topic which you are going to be learning about is something called siblings I'm gonna open my index.html file and app.js file right click on it and open it with a live server hide the metadatas from there and let's just see okay siblings fine so we have a UL inside this UL we have three not three but four Alloys but we have a fourth one with a class of fourth and for this port when we have a class of fourth and the other one don't have any Clauses and any IDs whatsoever so this is what we have inside our body all right so now let's get into our app.js file and now let's just learn about a siblings so first of all let's just get our first Ally so I'm going to just write let first li and it will now equal to document.queryselector of or alloy so we already know that it will just give us the first alloy and now if you just log there to the console like first l i and now if you sell there and open it with a console and say bye to that one so here you can see we are now getting our first li right here okay so now if you want to get the parent of this Ally so like what will be the parent of this Ally the parent of this Ally will be this URL so what will be the parent of the zero the parent of this URL will be this body so what will be the parent of this body the parent of this body will be our document and then finally it will give us nail so let's just see what will be the parent of this first uh alloy so I'm going to just write um parent elements so it will give us the first parent of their element so if it's out there so here you can see we are now getting a URL right here so the parent of this alloy is this URL so that's why we are getting this URL right here what if you just duplicate this line of code and we just use that same method I mean like same property as well like parent element one more time I'm going to zoom out of it and now if you sell there it will not uses a body right here because the parent of the UL is no body if you just wrap that in a section let's just write a section cut there from there and I'm going to pass right here certain log is this section right here because the pattern of this URL is now this section server log uses this section if you have article navigation assigned header if you have all of there so it will just go on and on and on and on and you can check that again and again and again like so I'm going to just remove this sections from there and we already know that we have uh the parent of body but if you want to check the parent of this body I'm going to just duplicate this line of code and I'm going to just change that to parent one more time parent element and now we are getting this HTML right here like a root uh HTML so we have uh first of all UL uh then we have first of all we have a ul and then we have a body and then we have our HTML document but finally let's just check and let's just use their parent element one more time like parent element one more time I'm going to just zoom out a bit so if you sail there and it will now give us nil because we don't have any parents for this HTML so it will not use nil okay so this is how we can get a pattern for each of the elements so uh this is the so we can also just go from this one so the parent of this one will be ul and so on and so forth you get the idea so this is how we can get a parents from our element so I'm going to just comment this line out and let's just learn about uh children so how can we get a children so let's just write first of all that ul and document dot query selector and we are now selecting this UL right here okay zoom in a bit we are now selecting this URL and now if you want to access the children so for that we have or children property so I'm going to just write console.log of UL dot children so if you just write children and now if you sell there it will now gives us the collection of all of these allies right here okay so we can also access each children if you want to like uh we can just specify the index of zero it will not use the first one so if you save that and now here you can see it unlock is the first one we can also get like the second one the third one the fourth one if you want to if you sell there it will not use all of that but if you try to access the fourth one in this case so it will not use undefined because we just have allies from one through four we don't have more than that so that's why we are getting this undefined right here I'm going to remove that all right so now we can also change the inner text to be like something else maybe or we can also get the inner text if you want to so let's just start console.log of maybe ul and then children uh chill come on children oh my God children there we go and now let's just select the first one I'm gonna commit the other one and now let's just get like inner uh text inner t x t like so and now if you save that so enter text is set to one so we are now getting one so if you just change that to something else like uh I don't know uh one as a letters yes if you sell that certainly change it to one like so we already learned about text and stuff like that I'm gonna comment this line out so this is it about how we can get a parent and this is it about how we can get a children so now let's just learn about a siblings as well so uh we have a first Ally I'm gonna comment or you know I'm gonna copy this line of code comment this line out and I'm gonna also comment this line out as well so now let's just learn about a sibling so we have our first line one more time and now let's just write console.log or first alloy dot one next element sibling certain log use the next element sibling and now if you save there uh let's say sorry text content so that we get to see our content so we are now getting the second one right here so this one is the first element and if you just use that next element sibling property on there certain log uses the second properties so I'm gonna hit enter right here Zoom whatever and duplicate there and now let's just use this next element sibling one more time and just write a dot in there save it and it will log uses three and the list will go on and on and on I wanted to show you everything but you don't have to go like that much crazy uh okay so save it and log is four but if you try to X this is one more time uh like so let me just write it one more time period save it it will not use uncut type error uh cannot read a property of nil because this is a nail certain log is nil okay so this is how we can get all of that siblings so I'm going to remove that final one because this one is a little bit cluttered so we already learned about how you can get a pattern how we can get children and how we can get a next element sibling so I'm going to comment both of these line out uh okay and now let's just finally select or fourth alloy which is this one and let's just learn about the previous elements uh sibling real quick let me just write let fourth alloy energy goes to document.create is selector of this fourth alloy and I'm going to be just let's just log that dot console line fourth and line and now if you sell that and you already know that it's that 420 if you just write text content of save there it will not give us four okay so if you want to just get a previous element sibling so we can just write it previous let me just write the previous element siblings so if you just write then save it it will now use the third one we can duplicate this line of code and we can reuse that property copy there pass it right here 7 admin log uses the second one right here we can still reuse that one more time like this list can go on and on if you have a lot of elements and I'm going to use it one more time and save it it will not use this the first one but if we try to access this the final time so save it and nil it will not give us a nail okay so I know these are a lot of talking and a lot of typing and stuff but you just have to remember that if you want to get a parent of some sort of element so for that you just have to use a parent element property and this list can go on and on like you can go as much deep as you want but I just kind of want to give you these examples now if you want to get a children's over there you have a children property if you want to get a next element sibling so for that you have a next element sibling if you want to get a previous element so for that you have a previous element sibling property so that was it for these siblings now the next thing which you have to do is that we have to learn about styling like how can we apply styling using JavaScript and not CSS we already learned how we can toggle Clauses and stuff but in this section we are going to be learning about how we can provide a stunning through a specific element I'm going to zoom in a bit first of all and then we have we just have you know let me just launch there and you'll get to see what it is so we have a color of teal let's just open our Dev tools real quick so that's because we are providing this steel Clause right here so I'm going to just remove that from here and we have this hello word and it's stacking the color of these styling right here so we just selected there and we provide a color of crimson right here okay but if you want to pull out a styling using or JavaScript and interacting with a Dom so for that we can use just a stylus property let me just get my H1 real quick so I'm going to write document.covery selector um oh my God what is the zoom in a bit and let's just select where H1 log that to the console real quick and now here you can see we are now getting that H1 now let's just type Dot and now let's just select what style so if you save there and here you can see it unlock uses a CSS style declaration property so if you just click on there and we have crazy amount of styling right here we have uh s and color we have a line counter line items a for animation animation delay Direction duration film mode iteration count name and all of different kinds of properties and its values set to empty because we don't provide any values to it so let me just split there so that you guys can see everything so we have a border we have a background properties we have like width and height a clear clip Path property columns the display forward so we have all of this CSS properties inside their style property which we wrote right here this one is very very very powerful but my suggestion would be to do not use that instead use Clauses and then toggle the Clauses but don't use that because it provides something called an inline style so let's suppose uh the color is now changed to you let me just see the color is changed to come on oh my God the color is changed to Crimson right here but now if you want to change the color to be something else like maybe teal so we can also provide that so I'm going to just write like you know I'm going to remove this constant lock from here and write a DOT and now let's suppose if you want to provide a color property so I'm going to just write color and change that to teal and now if it's sale there and it will now change the color to TL so why is that I'm gonna just click on this mouse and I'm going to select that and now here you can see it will not provide inline style to it so we are now selecting and we are providing this inline style of Color teal if you want to pour the background color so you can just write a background background and by the way you're not allowed to write a CSS kind of styles like background Dash color it will just think it's JavaScript remember it will just think like we have a background variable then we have a color variable and we are just uh removing something from this color like we are just subtracting something from a color and we are just adding that to a background so we'll just think about that I'm going to remove this Dash and I'm going to just write a camel case right here so background color as a camel case you can also go with uh no you cannot go with a snack case because this is a JavaScript and you're working on a style so you have right there camel case so the background color will be now in this case set two Crimson so if you sell there the background color will be now set to Crimson and the text color will be now said to teal we can also change that to White if you want to we can provide hexadecimal values we can do all of the CSS craziness by using the style property but my suggestion will be to avoid using the style property because it's very powerful and here you can see it will provide the styling inline right here okay so I don't know you can just play around with that in order you can just change that to like sky blue and that's how it looks like and you can just provide a transformation animation you can use all of these properties which I show you let me just show you that one more time H1 dot style and let's just comment both of these properties go to our console split there and just expand the CSS property so you can just change like whatever you like you can change the background image background or you can change the background origin change the position X is a reputation the sizing of the background images or whatever powerful and also very huge like you can do whatever you want with that anyway so enough talking we are totally done with this timing and stuff now let's just get in towards styling I mean like our exercise and now I want you to do this exercise by yourself uh okay so we do have a lot of selectors and stuff let's just zoom out a bit and let's just see open word console real quick oh you know what this is a styling tag so you don't have to open our console for that gml we just have or this style and we just we just have our style and we select or H1 we provide a color of crimson to it but I'm gonna just hide this head area from there so inside a body we just have one container inside this container we have over H2 with a class of main headings and we just say like Welcome to the Real World then we have a paragraph with a class of subheading and we have a little bit of lorem ipsum then finally we have our anchor tag with the class of BTN and it will just say learn more and finally we just add our Scripts so there's a HTML and now what else do we have to do we are now selecting our container uh this container right here what else we are doing we are selecting H1 paragraph and also that button so what we have to do is a challenge provide 400 pixel of height to container element so that's the first thing we already select our container element right there so provide a 400 pixel height to it I'm going to just select first of all my container I'm going to use tile and then hide come on not get element whatever but style and I'm gonna just provide a height to 400 pixels so it will be on quotes and now if you sell that we cannot still see something because we don't have any background colors all right so what else do we have to do change the background color of the container to teal let's just do that baby container dot style dot background and we can also just write a background color but yeah background color will be fine you can go to Just background if you want to and now it will be set to teal and voila we are now getting there so then we have a change the color of which one to Sky Blue so we already select the electron right here so let's just write h1.style dot one what should we have to do uh describe looser color it will be now set to sky blue and now if you sell that it will not just change this text to Sky Blue what else do we have to do change the font family of the paragraph to send serves so we already select that paragraph and let's just write paragraph.1 style.phone family to sense Seraph save it and we'll now just change that to sensor if it will remove the cells from this font alright so change the color of the paragraph to White let's just do the P dot style dot color and it will now set two totally white save it and the color is not policy to White and change the color of the button to Pink so let's just select we already select that button right here so beaten that uh uh change the color of the BTN to Pink So the style dot color to totally pink seven yeah we have a little bit of open standing right here but guess what that's it and we are totally done with our challenge all right so we now tackle this challenge we to learn about the styling and now let's just learn about a complicated topic called create element a pen element preprint element insert adjacent remove child and remove these are a lot of methods we have inside our Dom I'm going to open my index.html file start.css file and app.js file so we don't have anything inside any of them and inside this Edge inside this Edge inside this HTML file we just have our basic stuff I'm going to comment or you know I'm gonna collapse this head area we have a URL inside this URL we have a four allies then we have a paragraph with a little bit of lorem Epsom in there then we have a section then we have a new list and then we have a level of allies inside there all right so let's get into that so in JavaScript we just have a little bit of comments so the first thing which you are going to be learning in this section is how to create element and how to use this create element method then we are going to be learning about how we can use this apparent child a pen method prepared insert before insert element insert adjustment element remove child and remove okay so we are going to be learning these methods in this section so starting from the first thing which is that create elements so if you want to create element using general script so first of all we are going to be writing our comments for our stuff like creating elements or element to be precise just a singular so suppose if you want to create a element so first of all you're going to be writing a document and then you have a method called create element is self-explanatory so if you want to create anchor tag you could just provide anchor tag if you want to create like a bold tag so you can just Part B if you want to create H1 so you can just put H1 and you can just write a section uh if you want to you can Port article if you want to embody in my case I'm going to just write H1 in it and I want to store that in some sort of a variable like H1 so now we successfully create our H1 so now if you log that to the console console.log H1 and now if you sell there and we have to launch this index.html file like so you save a buy to the other one open or console right here all right so now here you can see we just have our empty H1 right here we don't have any classes we don't have any IDs we don't have any content inside this H1 right here okay so basic H1 all right so now we successfully create our H1 so what else do we have to do and then if you want to uh add content to this H1 so we already learned how we can add content to our elements so for that we have H1 dot text content property and we can just provide like hello word and now if you sell that and let's just check the text content property like text content and now if you save that it will not gives us that text content right here okay so we can also Port Clauses to it if you want to we already learned how we can provide Clauses to it so you can just write H1 dot uh classdays.ed and we can just for different kind of Clauses to it like I don't know uh greetings would be fine so greetings if you sell that let's just remove that text content and here you can see we have H1 with the class of greetings right here and we can also do styling if you want to so you can just write H1 but we cannot see the styling because we're in a pin there toward Dome so this is it about how we can create or element how we can add text to our element how we can attach classes to our element how we can remove even Clauses from our element like just write remove Clause if you want to so now the next method which you are going to be learning about is a pen chart method and apparent child will just append or whatever text we have or whatever thing we have it will append it at the end of the list so let me just select first of all the body I'm going to just write Khan's body it will be now set to document.body so now we successfully select our body now we create our element we provide text over element we provide class to our element but we don't have that element inside our body so if you want to push that element the newly created element to this body so for that we can just use a pen child so I'm going to just write body dot a pen and then child okay so I'm gonna just set that H1 so if you save there and here you can see it unlock uses that hello world right here but it will be at the end of this body it will be not it will not be at the top it will not be at the center it will not be anywhere in here but it will be at the bottom because as the name suggested it will just append or element at the bottom of the list so what is the bottom of the list the bottom of the list is that the final area right here so it will just push it right here if you change the text to be like uh good boy so if you save that it will not change the text you goodbye and also let's just make sure that we provide a Clauses to it let's just click on it so here you can see we are now getting these creating greetings class right here okay so everything is working the way we expand to work so this is how we can create our element and this is how we can append it to somewhere so we can like append it or uln Allies and all of that kind of good stuff which we learn so you can just select like this URL and you can append it right here at the end of this allies right there so now let's just do that you know what I'm gonna comment all of this coding from now and I'm gonna just make a separator for ourselves so all right so now that we learned about a create element method and a penchine method but now in this case we are going to be learning about insert before and then apparent prepared and insert before and stuff like that all right so first of all we have to select our UL so I'm going to just sorry document.queryselector of this UL okay so now let's just create our new item so new or you know let me just give a name of like new Li and it will be now set to document dot create elements so we want to create an element we have to just provide Li right here okay so if you want to create an online so that's why we provide Li now let's just provide a text to it so dot inner text to it and it will be now set to IM alloy tag okay and now let's just append there to UL so we already learned like how we can append that URL so you can just use like ul.appen child this kind of reviews new alloy so now we successfully apparent there to UL okay so now let's just get our first alloy so cons first alloy and it will now equals to document.covery selector and we want to just select our first align which is this one okay and now let's just learn about word insert before it's kind of a weird one so insert before method is a little bit weird one you have to remember the so first of all we have a selector then we have insert before method on there so it will just take two parameter like what do you want to insert and then where do you want to insert it so let me just show you that you know so now let me just write UL and then insert uh insert before and we want to provide uh so we want to provide new alloy and we want to put it in a first alloy so if you just sell there and it will now just put it at the top right here okay so this is the first alloy and it will now insert it before this first Ally right here okay so the syntax is a little bit weird first of all we have to select something then we want to use this insert before and then what do you want to insert and where do you want to insert it okay so that was just kind of a quick introduction about insert before element and now let's just learn about insert edges and elements so let me just comment out all of these lines so now I'm going to comment it out and let's just copy this line out and I'm going to paste This Server right here so we just learned about create element apparent child insert before now let's just learn about insert adjacent element party here okay so go to the bottom and now let's just learn about insert edges and so first of all we have to select or paragraph which is this paragraph right here so so we are going to be writing cons first paragraph so we are going to be just writing document.query selector of paragraph So we already select our paragraph now let's just create our eye text I'm going to write I and then document.create elements so as the name suggests that it allows us to create our element of I and then I dot inner text will be now set to I am italic size it all lists italics or whatever you want to call it and you can also provide a starting to it so the style dot color will be now set to Sky Blue okay so now we successfully create our element we provide a style I mean like we provide text to it and we also provide a style to it okay so now if you want to insert there so for that we can use a method called insert adjacent element so I'm going to just first of all right first paragraph and then insert a Json not HTML but elements so element like so okay so it will just take like where do you want to insert it and what do you want to insert it okay so it will also take two parameters like where do you want to insert it and what do you want to insert it so we have a few values for that so we want to just write like before begin so before begin s m suggested it will just insert it before it begins so if you just save there and it will not place it right here I'm going to just remove that serving now place it right here I'm going to duplicate this line of code and I'm going to just change that to after begin uh f t e r b e g i n now if you sell that I don't know place it right here okay after it begins I'm going to duplicate that one more time and then we have before n and 957 it will not push it right here before the end of that uh line right here okay so now if you duplicate there and then we have a final parameter for that like after and and now if you sell that and it will now just put it after the end of that paragraph So This is how you can work with the insert adjacent element and then now let's just learn about this appear and then preparing these are kind of a similar ones so I'm gonna just comment out this one and now let's just place this separator for here and now let's just learn about a pen and preparing so uh for a pendant preprint it's kind of a similar and simple one to learn uh let's just get our section first of all so we have this section with the text of hello inside there so now if you want to get this I'm going to just write section it will be my requested document dot query selector of section okay so now let's just appear in our Ally to it you know what I'm gonna cover it uh uncover this line or you know I'm going to copy this text from here and I'm going to pass it right here I'll cut that one paragraph and uncover these so now we successfully created our itag right here and we just uh poured an inner text to be like I'm metallic and we all support a color to be sky blue and now let's just push that you know I'm going to cut there from here I'm gonna pass it right here okay so now if you want to push this eye tag to this section by using a pen Clause so we can also do that so let me just write a section let's just write section and then a pen of this eyes so so now if you sell there and now here you can see it on now apparent this uh I metallic with the hello so we are now appending this I tag on this section right here so we can just create another one like let's suppose cons H4 and we know equals to document dot create element uh create element oh my goodness come on create element of H4 and then H4 will have the text of like I don't know inner text will be now set to maybe my own name like Hussein and now let me just uh change the 4. style.color to be Crimson crimson and now let's just append that as well at the same time so I'm going to just sorry H4 and now if you save that and boom here you can see It'll now apparent this one as well so if you just change that to span and also change these two spans and now if you sell there and it will know you can see it will not be in line right here okay so this is how we can appear in multiple things at once so then the next thing which you have we have three pins so now if you sell a file so here you can see It'll not append it at the beginning of that section and if you just use that append so it'll just push it at the end of that selection so if you save that it will not push it to the end and this pre-pin will just push it at the beginning right here okay so now let's just learn about remove Channel and remove okay so it's kind of a self-explanatory so if you want to remove that um span so you can just write span dot remove you know what not spin let's just see uh we have a new list first of all let me just get my new list real quick and I'm going to comment all of this score right now create a separator for myself and now let me just write a new list first of all cons new list and it will be now equals to document.crewary selector of new list okay so we have different kind of elements inside this new list so I'm going to write new list new list dot remove child c h i l d and which child we want to remove so if you want to remove this one oh you know what this one fourth one I'm going to give a class of fourth so copy that and let's just get our fourth as well as a const fourth will be now equals document.query selector of fourth okay so we have to just specify this fourth in it so let's just write fourth and now if you sell that it will not just remove that Port from here so we have one two three and five we don't have that fourth one and if you want to remove all of them at once like if you want to remove all of their lists for that we have new list that remove and boom okay so we'll just remove that so if you want to remove the other stuff so you can just use this remove method and it will just remove it poorly from the Dom so in this section we learn about different kind of methods like we learned about create element method and create element method as the name suggests that it will allows us to create element then we'll learn about append child it will just push or anything we just created at the bottom of the page at the bottom of the list and then we have insert before it will just insert it before and let me just put like what and where okay then we have a pen method and append will append over element at the end of the list and preprint will append or element at the beginning of the list we also learn about insert adjacent element before we have a few properties for that and we also learned about remove child and also the remove method so we learn enough about in this section so what else do we have to learn so now the next thing which we are going to be learning is something called event listener in the Dom all right so now that we are totally done with creating element appending and prepending in all of that kind of a good stuff so now let's just learn about something called events in JavaScript so uh this is our HTML coding is not that much but before we get into all of this scoring let's just ask our good old friend like what in the world is events so work is even JavaScript interaction with HTML is handled through events that occurs when the user or the browser manipulate a page so when the page loads we have different kind of events for different kind of things which we are going to be learning in this video so like ins for example when the web page door it can call an event the user can if the user click on some button the specific event can be called or if the user scroll down if the user drags something if we just click on somewhere else if we move almost to somewhere so we have different kind of events for that so I just kind of want to give you the definition of what event is so let me just say that one more time JavaScript interaction with HTML is handled through events that occurs when the user or the browser manipulates a page when the page loads it is also called event when the user click on the button that click is also an event as well so there was this kind of a definition of events so now let's jump into our coder and let's just see what we have so first of all we have our Dr HTML just a structure up there then we have our button with no classes nothing inside there but we just have a level of Click me then we have another one with the class of second button with the text of learn or you know what bad way would be fine so with the text of bad way and then we have a button with a class of best and best way and finally we just have our paragraph with the class of Pera so this is it for our HTML now let's get into or JavaScript and now let's start working oh you know what we're not going to be jumping into a JavaScript right first of all we have to learn about the inline event so how would you attach in inline events to an inline or specific element in your web page so now in this case you are going to be learning about inline event but my suggestion will be to never use that so if you want to attach inline events so first of all you are going to be writing on and then we have a click and we have a lot of events for a lot of different kind of things if I zoom out if I just zoom on a bit like so and if I just write on so we have on a board on blur on can play on can play through change click context menu double click drag and we have different kinds of events right here for different kind of things but in this case we are just interested in the click one so we are going to be just working with the on click event right here so now what do we have to do let me just write Alert in here and I'm gonna just put a video of like hey okay so if you sell file and let's just launch this in our live server so it will now just launch it alright so now if I click on this click me button right here so here you can see it unlock uses this a right here it's this because of this event like on click so whenever we click on this button so something will happen so we just attach alert we can also just write like I don't know console.log of like hello so let's just do that oh you know what our single chord would be fine so that it doesn't give us an error like so if you sell file open our developer tools if you click on this click me so anytime we click on this bone it will not use this hello right here that's because of this button and my suggestion will be to never ever use inline uh JavaScript like that and never ever use inline uh events but I just kind of want to show you like for some cases if you just see like all core basis so you will found this on click inline events so be aware of that so I'm gonna just comment this line for now and now what else do we have so we have a second button and we are going to be learning about yet another build way and then finally we are going to be learning about a great way to attach even listener and we are going to be also learning about event object okay so now let's just write or bad way so first of all if you want to work the bad way first of all we have to select something so that we can attach or even listen on there so let's just select our second BT again and let me just write a document.covery query selector this one and let me just get my second BTN zoom out which is this second BTN right here okay so now we totally select our second button now if you want to attach your event listener and this is the second bad way to attach your event listener so first of all we have word selector like second button and then we have on clicks so if we click on that button so what do we have to do we are going to be just firing this function right here or you can just put Alert in here and by the way if you just put alert alert right here and if I just put my own name and if you sell file it will now gives us that alert right here and our webpage does not loads up this is another story but I want you to know that it felt block or web pages from execution so if I just click on OK it will just paint or browser right here but never use this Alert in this kind of a bear stuff so instead we can just use a function if you just use a function like so and if you just write console.log of Hussein maybe then web dev web dev and now if you sell file and now if I just click on this bad way it will now pronounce that who's in web dev right here and we have different kind of events like we have on Mouse move I guess a cell file so now if I move my mouse over to that button so it'll now print my name that much time like so here you can see countless time so we have different kind of events but for now I'm gonna just stick to on click event and this is the bad Patriot event so I'm gonna comment this line out okay discording out and now let's just learn about a great way to attach events using JavaScript Dom alright so let's just select or best so I'm going to just select my best document.query selector of best and now if you want to attach even listener on this best by using a best way so first of all we are going to be selecting your best like some sort of a selector and then we are going to be using a method called add event listener and this is the best way to attach your event listener to different kind of elements so now here we have to specify like which kind of events you want to listen to We have click we have a DBL click we have a mouse move click we have mouse or we have a lot kind of uh events which you are going to be learning just in a second but in this case we are just interested in Click event so you'll just password click and then we have to pass some sort of a function in this case we just pass our function manually right here but now in this case we can also pass our function finally as well like just pass Anonymous function and then just write like console.log of hello world and now if you sell that and now if I click on this best face here you can see it will still print that hello world right here in the console but we can also just separate that function to somewhere else so if you just copy that or cut there from here from here and if you just put it right here and we have to give some sort of a name like uh greetings would be fine and now we successfully create our function now we have to just pass the name of their function or the reference of their function inside this admin listener is the second parameter so if you save our file and now if you click on that one more time so it will still work right here okay so everything is working the web experiment work and we can just still pass what we call it of Arrow function so I'm going to copy this line out and let's just remove these greetings from there and we can still pass the error function and by the way if you guys don't know about error functions I've got entire course on es6 and there if you want to check that out or it's totally free on my YouTube channel so es63 is whatever the best way is coming up so I have a course on es6 ES whatever like all of these bleeding in JavaScript I have entire course on there if you want to check that out anyways so if you want to check out the error function value so feel free to do that I've got a video on that error function as well so this is how you can pass Arrow function and you can just write like whatever you want right like console.log of uh yellow and now if you save there and if you click on there it will pronounce yellow and if you are using an arrow function so you can also omit these curly braces from there so if you sell there and now here you can see we get all one liner right here and now if you click on this best way it will now still pronounce that yellow okay so this is how we can attach event listener so in this video we just learned about three ways to attach event listener this is the first way the oldest like the 90s way of attaching even listener by using inline event listener and then we'll learn about the bad way which is that we by using this on click methods and then we learn about a great way which is by using add event listener and this is also modern one uh okay so let's just comment this line out and I'm gonna also comment this line out as well so now let's just learn about something called the event object so and let me just select my para which is this paragraph right here so let me just select that conspira will be now equals to document.covery selector or Pera okay so now if you want to attach event listener on this paragraph so we can just use like a para and then add even listener and we can just listen to a click again and here we are going to be passing our error function but we are going to be also passing over event object right here so this is going to be a special object it's not a parameter it's a special object so if you just log that to the console like console.log and event and knife event to be precise if you save a file and now if you just click on this paragraph right here so here you can see we are getting this event uh pointer event right here so this is an event object which contains information about a particular event which you're working on so we are currently working on a clicking certain log uses information about this click event right here if you are working on some other events that will just store the information about that specific event okay so we have uh Alt key and Bubbles and bottom and all of this kind of stuff uh let me just use that in some sort of um input right here inside this form we have an input right here and let me just give a value of like uh oh you know we're not gonna be a game anyway I'm going to review this value from here and also this action right here as well instead of their Pera I'm gonna just get my input and select that as an input and this one will be also a input so if you sell that we get our input box uh right here and we okay so if you click on there so it will not just fire there let's just write form right here so let's say seven and now once the form is submit so you want to listen for a submit event so we have something and we have to create a input of submit as well come on man submit and no value is nothing okay so we do have to provide a submit value to it like so if we're forming submit so it will just uh furnace something so all of this score means that first of all we are getting our form like this form right here and we are just attaching event listener of submit like when our form is submit like once we click on the submit button so we want to just print like this event object but if you just click on the submit button right here so did you see that let me just click there one more time let's just click there did you see that flash of that event there's the form default Behavior like whenever we submit our forms so it will just refresh our browser right here so I want you to just notice this tile and here you can see it will just refresh your browser so if you want to remove their default behavior of the form so for that we can get our event and then prevent D4 method right here so we can use this method and we can just listen for that and now if we sell there and now if I click on it here you can see it will not refresh your web browser right here and it will give us that uh data specific about that submit event right here okay so so we have different kind of events and we can also get a values if you want to so let's just get our input area let me just write cons input and it will be now set to document.query selector of inputs now we get our input right here and let me just write input and we can also get a value of that input so if you sell that and let me just write apple and now if you click on the form and we are now getting Apple if you just write banana and if you click on this banana everyone log uses banana right here okay so we can do crazy stuff by using forms and events so we can also shorten the to instead of writing events so we can just change that to e and we can also change this one to E so dance now let's just uh you know what we are going to I'm not going to give you that much of other example but I guess that would be about how we can attach him and listener and what is events so let me just review there one more time and then we are going to be jumping into different kind of events for different kind of things so so JavaScript interaction with HTML is handled through events that occurs when the user or the browser manipulates the page when the page loads so we have different kind of events for page loads like term counter loaded it is called event and when the user click on a button so there is also an event so let's just save a buy to their page or that side and we'll learn about a few or not a few but we just learned about three ways to attach even listener and we also learn about even object okay so I guess that would be it for this section and now let's just get in towards new section can't even in depth so we have mouse event and we have keyboard event and I'm not going to be going into that much detail like we have different kind of events for like let's let's just quick Google search that um Dom events certainly now gives us different kind of events so we have um form events we have keyboard events we have mouse event we have a lot of them like here you can see animation and blurness can play change click copy double click drag Rob and there are countless events like here you can see I I can't like show you all of them it will take like new course to show you all of them but I'm gonna just show you a few of them like those which you need in every single day or not you want to sing every single day but uh one time in a month so I'm gonna just show the important one and you can explore others if you want to in your spare time okay so say bye to that one and now in this video uh we are going to be starting working on or Mouse events so first of all we have index.html file and we have a mouse event so now let's just collapse this area so first of all we have our body then we have a paragraph not one but we have a lot of paragraphs inside there and we just give a Clauses of different kind of events like click and uh right click one double click Mouse down Mouse enter mouse leave Mouse move Mouse out mouse or Mouse up for different kind of events we have different kinds of uh definition of them so I'm going to right click on there and open it with the live server and this is how everything looks like right now I'm going to open my div tools as well all right so we have a definition for the first one the event occurs when the user click on the elements so and let's just start working on that and by the way we have a few colors like red blue teal steel uh blue orange purple pink Crimson chocolate Aqua so we have different kind of uh colors right here so we are going to be using there uh in or app.js so you have click event we have context menu double click Mouse down and all of their events which you are going to be exploring in this video and we also have a reference so like all of these events came from this w3school so if you want to go there you just have to hold Ctrl and click on this link so it will just open it right here inside a Google Chrome for you so if you want to learn more about this you can in your spare time but in my case I'm going to just show you all of them one by one so let's just attach event to our first element like one so I'm gonna zoom in a bit and I'm gonna just write like 1.8 event listener of Click so when somebody clicks on their element so what do we have to do on or not on but one now class list dot toggle and we want to just toggle this red so now if you server file and now if you click on this element right here so here you can see the text color is changed to Red that's because we are toggling this red clause and we have their red Clause right here inside or css file right here so we are just toggling this class and we are going to be also toggling the other Clauses just in a second all right so that was quite simple and easy so like if somebody clicks on the element so this element will fire the next event we have is that when the user right click on the elements so to open the context menu so we have that one as well so let me just write two dot add or you know I don't want to waste your time let me just duplicate that change these two to like two and now let's just change the event name to be context menu okay so if you want to attach or you want to change the color to be blue so if you just save our file and if I just click on there can you listen to that if I just click on there nothing will happen but if I just right click on it so here you can see it will now change the color to that kind of a blue colors if you just right click on it one more time it will just toggle that class again and again so if you just right click on it and now here you can see it will just work like there right click on it and it will just attach or fire that function so let's just duplicate there one more time and change that to the third one third is that third or three okay it's a three three and change the event name to one uh DBL and click as the name suggest there it will just um if you have a user double click on there so then this event will file so change the color to TL so file if you just click on it one time nothing will happen if you click on a double uh time like double click on it so here you can see this event will fire and it will not use this kind of a teal color if you double click on it one more time so that class will be gone because you are doing toggling let's just duplicate that one more time and change that one to one four and also change the event name to Mouse down and also change this color to be steel blue and now if it's several files so first of all let's just learn about the event occur when the user presses a mouse button over an element if you just click on it so here you can see this will this even will fire it's kind of like a click event but this is another word to use the mouse down come on man all right so then we have another one which is the event occurs when the pointer is moved on to the element and this one and I guess the mouse move or both of them are the same let me just show you that one by one so we have a four then we have a five and let's just change that to instead of mouse down we have Mouse enter uh like so and change the color to be orange and so file so what do we have uh okay so once I hover my mouse over to it it's kind of like a CSS Tower once you have a mouse ordered so something will happen so in this case we are doing a toggling so this what's happening right now okay so this is the mouse enter it's kind of same like a however one and let's just change that to six one so Sixth and also change this event to Mouse leaves so let me just write Mouse leave and change the name or not the name but the color to purple purple like so and now if you sell there if you just hold a mouse over to it nothing will happen but if you just Mouse leave here you can see that everyone will fire and if you just hover over it that even when nothing will happen but if it is a hover Mouse out like Mouse out so this area will fire okay so let's just duplicate that and you can learn more about that in your spare time and s-e-v-e-n mouse move and mouse enter it's kind of like the same one Mouse move let me just show you that one as well so we have purple we have a pink so if you sell that and now if you must move not that one so if you Mouse move so uh first of all if you mount smooth so it will now take this pink color if you Mouse out so it will just remove that color from it that's because you are doing your toggling and this is how everything looks like you know what instead of mouse move seven let's just copy this liner seven not come on seven Now text content let me know so do hello and now if you sell that and now if you are almost ordered it will not give us that hello all right here I'm going to comment that one cut that one to be precise and duplicate this one and then we have a eight also change this one to Mouse out so once we Mouse out it's kind of like the same one so change the crimson color to be Crimson so this one not that one so one three miles up so let me just refresh this page and now once we our Mouse over to it nothing will happen if you just hover it back and the same one will fire like so nothing is happening uh if you just go back so that event will fire like so okay so you can just play around with that if you want to but all of them are the same kinda so let's just change that one to nine and mouse over we already learned about uh Cho c-o-l-a-t-e why why did I include that again and again once we Mouse enter is that almost enter m-o-u-s-e over uh okay this one is not working i n e n i n e okay so mouse or uh Mouse over okay so we give him a class of mouse over and we swore there in the ninth one n-i-n-e Mouse over and we just toggle the Clones ch-o-c-o-l-l-t-e-s-c-h o c c h o c o l a t e like so now if you must over so everything is working the way we've expand work and then the final event we have is most of it's kind of a stupid one I know why people would create such an event like that 10. and then Mouse up all of them are the same you know and now if you click on it so here you can see all of them are kind of the same like I mean like what's the point of just making two areas like Sam click on this one click on that one and it will do the same thing the event occurs when the user release a mouse button or an element okay we have to click on the kind of a streamer anyway so that was or uh Mouse events we have or click then we have a on context click menu then we have a double click Mouse down Mouse enter mouse leave Mouse move Mouse out Mouse over Mouse up so we have different kind of events and we already learned all about that and if you want to learn more you just have to hold Ctrl and click on there it will bring you to this W3 School documentation and you can learn about a transition page transition event you can learn about a POP stand you are in progress and there are countless of them if you want to learn more about that let's just click on this one and only one objects of the Dome are based on the event blah close that one close that one as well and now let's just learn about a keyboard event so I'm gonna launch my index.html file right click on it and open it with the live server and open our developer tools right here or Dev tools and let me just zoom in a bit and inside this body we just have our input with the type of text and we don't have nothing special in or HTML okay so we just have a link you can learn more about the keyboard events by going to w3school if you want to but we have a cons input dot query selector and we select or input all right so now let's just start work on our first event which is a key press so once we press some sort of a key so that add event listener and let me just write a key press and here we just have to find some sort of event like I don't know I'm gonna just write uh console.log of key pressed if you just press some sort of a key so this event will not fire until we press on case so I'm going to just press some random key right here so these are random keys I'm pressing right now and that event will fire that much time like so so that was the first one let's just duplicate that and change this one to you know I'm going to come in this out and change this event to key up if so if you just hold our keys so that event will not fire if we just release our key so that even will fire so key uh kind of a stupid one and if you just um let me just hold some button you know I'm gonna hold this Edge so I'm gonna hold this Edge and that event will not fire but if I just release that and here you can see that even real fire so if I just press this and here you can see that will find that much time that even will fire that much time anyways there was a key up and then we have the final one let's just duplicate that and learn about something called a key down so if the key is down lucky down key press and key down is kind of a same like key down save or file and if you just key down like if you just hit some key so here's what this element wealth is still fire like that much time anyway so that was just it about four keyboard events and now let's just learn a few useful properties and Method related to this uh keyboard event so I'm going to just write like useful properties p r o p r t i e is and methods like so so now let's just use that let's just get our input not that one input and use add event listener and once we press some key so we want to get or eat because this is important and now let's just write console console.log of e and then Char code certain log uses that character code so if you just type something like if I just type A Certain log uses the character code of 97 and then b98 C 99 d e f and blah blah blah okay so any any key I press it will give us different kind of character code based on the specific key which I'm pressing right now okay like so and we are going to be building a project by using this Char code and code and stuff like that let me just duplicate that and change this one to code and I'm going to comment the other one line so Sarah file and now if I hit a certain log uses key a if I hit b c d a f g it will just gives us key and the specific key name and then let's just use console.log of e dot Ctrl key and we'll just check did the user hold that key while pressing some sort of a key so let me just write a so I don't know it gives us false B still false but if I just hit control and if I hit cancel long uses true control and hit B certain log uses true it will just give this true if the control key was whole but if it will use the spawns if that wasn't the case so now let's just log that to the console like key not keyboard e dot key and now if you save there if you just write answer it will not give this a b c d e f g and blah blah blah it will just print us all of the keys which you are pressing right now and then we have a shift keys so it will just check did the user hold a shift while hitting on that key or not so if I just write a so nothing will happen it will give us false if I just hit uh I don't know B it will give the still false but if I hold shift and hit Q so long uses two and if I just hold shift and hit G it will also gives us true and so on and so forth okay so these were just a few methods and uh properties which you can use throughout and we are going to be also building a project by using these keyboard events and stuff like that all right so now we are totally done with our Dom cools but you can practice there by going to like random websites if you want to like uh in my case I'm gonna just go splash.com and I can just explore there like I can just play around with the Dom I can change the things I can even change the images if I want to and I can do a lot of stuff with there and I'm going to be also giving you a project like we are going to be building this six project in this video but my recommendation will be to first of all go to random website like I don't know in my case I just came to unsplash you can go to Google and you can just play around with there you know just select something by using a query selector to check how it's called I go to the elements panel and go to the body like the app or you know you can just click on that and click around like anywhere you like and it will give us different kinds of like uh classes so you don't have to let me just show you a quick real quick uh trick so now that we click on this unsplash oh like we just selected there and splash award 2022 but if you just hit dollar sign and zero and if you hit enter and here you can see it will now just select their paragraph for you but this will only work on developer tools so now if you just select this one Splash right here and if you go to our console and then dollar sign in zero and if you hit enter certain largest select that and splash right here so we can just store that to some variables and stuff like uh I don't know uh what can I do I'm gonna copy just single class of it and I'm gonna just store that to like const uh site name and it will run equals to document.covery selector of that site name and by the way don't forget to include their period because it's a class and now we selected their site name let's just see site name and if you hit enter okay so we can just use site name dot uh enter text we can check out that one or we can also change it to our own name like Hussein web dev and if we hit enter and here you can see it will now change the unsplash to hosen web dev you can also find out how many images we have inside this all uh website so we can just use like const imgs for document.query selector I'll just use IMG and if you hit enter and now if you just explore this imgs and if you hit enter certain log just gives us the first one because oh come on because you just use a query selector not query selector let me just refresh that one more time and now let's just use or a query selector all in this case and I'm going to just use const imgs and document.query selector all and let's just use or IMG and if you hit enter and if you just hit on IMG so we have 17 images on just this one landing page right here so if you just click on that we can explore more like we have this image that one we have other images down here we can explore that we can get a Clauses of them we can do a lot sort of stuff with them like we learn enough stuff we learn crazy stuff throughout this course so my recommendation will be to just spend a few seconds and not a second I shouldn't have the second second but my recommendation will be to just spend a few hours um just going to random sites and just exploring it there like you can even change the background color of this side let's just get into you know I'm gonna click on here somewhere and Okay roller additional router let's just select that real quick I'm going to hit dollar signs and dollar sign in zero and now let's just get this class I'm gonna cut that or copy this class and you can even change the classes like um the beginning one change different kind of stuff like I don't know const uh header or you know what sex section when it goes to document.covery selector of that um element or whatever and section dot Style background color luminos are two sky blue if you hit okay so something is there cannot read a property of un null uh so we did miss something in here you know you can change the color of something else like I don't know excuse me so what should we do you know I'm gonna go to some other side like let's just go to Google Chrome site official web page and now let's just play around with that I'm going to right click on it and go to the inspect area go to the console and select their body and let's just use dollar sign and zero hit enter and let's just copy that and what do we have to do I'm going to just store that in variable like section or header would be fine so document dot query selector of that kind of a weird selector and if you just check the header it will not use the header we can change the background color of that header.styler bank around uh color of that to like something else like maybe uh sky blue and if you hit enter and there we go your Google is now totally sky blue you can even remove this stuff from here let's just right click on it uh oh you know what let's just what can you do with that let's just remove this SVG from there selected okay so we have different kind of lazy loading and stuff okay this image I thought is an SVG but it's an image so now let's just use dollar sign zero hit enter and oh my God this is a huge Colossus let's just let oh my God let's just select this just lazy loading oh my hmm oh you know what we can also remove all of these images at once I guess let's let me just refresh this browser let me just refresh that one more time and go to the top let's just get all of the images which we have like I don't know const or not consulate I am G's and it will equals document dot query selector oh let's just get all of the images and IMG IMG star for each image and what we have to do for each image so for each image we want to remove img.remove okay so all of the images are now gone from this Google Chrome right here so you cannot phone any image right here you can change the name you can change the text you can replace you can even put your own image if you want to you can do crazy stuff with there so I will highly recommend you to go to any site you want your own site like I don't know you can go to any site you want and just play around with that you can even change the background color of this button you can increase or decrease that you can import animation and all kind of a good stuff like that okay so finally let's just jump into this project and start building our first project so we have our first project which is this random emojis and we have index.html file in there we have this CSS file and we have this Javascript file so I will already give you this um scss as well so you don't have to type this CSS again and again by yourself so here you can see we have like just a basic doctype HTML but we just have one div and we have the smiley emoji and by the way if you want to get emoji I'm not sure about the Mac User but if you are a Windows user so I want you to just hold a Windows button and hit dot so it will now give us a different kind of emojis right here so you can just give a name of the Emoji and it will give you that in my case if I just hit s kind of a weird guy so that's why we are getting kind of a smiley faces so if you just select that and there we go you get your SVG I'm going to remove that and this is how we provide our text or or image you can also provide what do we call it a font awesome if you want to you can also render different kind of things but in my case we just have a div with the ID of emoji and we just have one emoji inside there and now inside the CSS we are just providing 100 pixel of height and displays uh Flex Flex direction is column align items is standard Center and background is kind of a grayish kind of a background and then we have our Emoji the font size we just increased it to 10 RAM and we just provide a little bit of filter of create scale of 1 and cursor will be a pointer once you hover over to it and transition we are just providing our transform of filter and then we have a transition duration it will take 200 milliseconds and once we hover over it so it will just scale for its uh size to 1.3 and the grayscale will be announcer to zero this is now set to one so once we have it over to it so the grayscale will be set to zero I'm going to launch that real quick and open it for the live server and now here you can see we have this image right here if I just zoom out and now if I hover my mouse over to it so here you can see that grayscale is setting to zero and this image is taking I'm like this Emoji is growing just a little bit like 1.3 all right so you're scanning everything is working the way we expand work but first of all let me just show you we have a few things so we are first of all selecting our button or Emoji to be precise not apart Emoji Emoji like so and now here you can see we have different kind of emojis right here I don't want to waste your time so that's why I provide all of these emojis by myself if you want to get some other emojis so feel free to choose whichever kind of emojis you like but here you can see we have these emojis right here all right so now let's get into the event listeners and stuff so we already select for emojis so now let's just select the and attach event listener on them so once we Mouse move or mouse let's start mouse or so once we Mouse over to that emojis what do we have to do we wanted to just fire this um function right here so what do we have to do inside this function you want to select that emoji and we want to just change the inner text of that emoji to these emojis we wanted to get these emojis like a plural uh and be which we store inside this emojis variable right here so you want to get there and we want to just get a random emojis so in JavaScript if you want to get a random numbers random colors random emojis or whatever so first of all you're going to be just writing a matte dot random and then you're going to be just writing like uh times uh whatever you want so times and then emojis emojis dot length okay and yeah I'm gonna also wrap that inside uh math dot floor as well okay so just zoom out of it and this everything looks like and now if you sell a file and now if I hover my mouse ordered I know that was just a one-liner code but it's now giving us different kind of result right here and we can achieve different kind of Reason like we are now getting different kind of emojis first of all we are just attaching our event listener of mouse move and once you have our Mouse overturned so the element will fire and it will now give us random emojis okay so that's the first project I'm going to just remove everything and now let's just get into our second project I'm going to open my index.html file style.css file and app.js file right here I don't want you to write all of this code by yourself so I've already give you a CSS and by the way I've already built this project so you can check out all of this project plus 100 more projects on my YouTube channel so I have already built like 100 projects so that will give you a huge and that will give you a lot a lot of practice if you want to sharpen your Dom skills so I've already covered 100 projects on my YouTube channel if you want to check that out anyway it's inside this HTML file we just have our content container inside this content container we have on navigation inside this navigation we have a few inputs right here like button button all of them will be button and we just provide a different kind of value straight like purple blue red green yellow and teal and we just came a class of BTN to all of them and then the same color of the which is like the value okay like purple blue red green yellow and teal so this is going to be it for the HTML so what about the CSS I'm going to just right click on it and open it with the live server and this is how everything looks like right now so what about a CSS we just first of all right our research then we change the background color to that kind of a bluish kind of background then we select colorful button which we give this class right here button button button button and all of them and we brought a pairing of 10 pixel for a top and bottom left Android will have 20 pixel cursor will be pointed like once I hover my mouse over to it so cursor will be pointer we remove the background I mean like the Border we change the color to totally white the board will provide two pixels solid white we give a width of like 120 pixels the height will be 100 pixels pixel the margin will be 20 pixel in text transform will be capitalized like so okay then we select each of the color like this one so we have purple blue red green yellow and teal we select each of them and we just change the background color of them to like that and finally we just have our content container I'm gonna have to put that up above like here and we just give a heart of 100 vs and everything is now totally at the center and that's why we provide this content container close to it all right so we have folded in with our HTML and CSS so now let's get into our JavaScript and provide our interactivity to it so what do we need for this project first of all we will need a button and a body so first of all let's just get all of the buttons so document dot query selector and all so we have to just get all of this button okay not btns but just a BTN so we have this one this one and all of this button right here okay so and the next thing we would need is a body so you're going to be just writing document.body okay so now word selection is done now what else do we have to do we have it right over through all of these buttons so if you want to just use like four each and so for each button we want to attach event listeners so once we click on each button so what do we want to do with that so you want to change the number to be like ptn dot value okay so whatever the button value is we want to change that to a numbered so this is writing value come on man and also we are going to be using change background uh yeah change background function which you're going to be creating just in a second and we are going to be passing that number in there all right so that's there and now let's just create their function real quick so I'm going to just create that function like change background and it will also take the parameter of number okay so let's just write a body and the body class name will be now set to empty Clause because we don't want to provide any Clauses and stuff for the body so now let's just use switch and cases and you can also use uh FNL statement if you want to and we are going to be working on the parameters so like this number which is coming from this one and we are going to be passing the button value inside this change number uh unlike change background right here okay so you get the idea so now we have to write our first case like purple if the color or the number is purple so p u r p l e like so um well you know what it's rough number it should be a color isn't it so I'm going to just change that to I'm going to hit F2 okay it's not taking that F2 so I'm going to select that manually it should be a color I guess that color would be fine why the hell do I just write number if the color is uh purple so if you want to just set the body not class list Dot and we want to attach this purple b-u-r-p-l-e clustered so and then we want to break out from this Loop and we have this purple Clause right here so right here you can see that and we want to break out from this Loop and you know I'm gonna oh you know I'm not gonna do duplicating there so then we have another case for a blue so if our case is blue so what do we have to do we want to just write a body that Clause this dot add the color of blue turret and we already wrote that insideward CSS if you want to check that out so you can and then if the case is set to run so you want to just write um body dot uh class list dot add the color of red to it and we also want to break out from this Loop and then we have a case of green okay so let's just write a green case and body dot class list dot add a green color to it and we also want to break out from it then we have another case for a yellow yellow like so a body that closed the list Dot N uh color of yellow and Breakout and finally we just have a lost case for the teal color and we are going to be just setting the body dot clones list dot add and we are going to be changing the color to be teal and let's just break out from this Loop break and we also want to provide a default for its default will be just break and now if you save that let me just show you the coring or you know what let's just test it out if you click on it so purple blue red green yellow and teal everything is working but we have a few cases we can also use ifnl starter for that if you want to but I guess there are switching cases are looking a bit better so I'm going to just go with that so if the case is purple so you want to just change the background color to be purple if the case is blue so you want to change that to Blue to the red to green yellow teal and finally we just want to break out from the loop okay so this is the second project and we are now totally done with our second project as well now let's just start working on our third project so I'm gonna just open all of these files and we are going to be building a feedback UI so first of all let me just show you the feedback UI coding so we have HTML so for HTML we have a section with a class of panel container and we also have ID off panel then we have our strong uh then we have our strong tag with your feedback as a level and then we have a day with a class operating container and inside this writing container we just have our singular rating I mean like singular container and then we have different kind of ratings for like we have a rating then we have an icon for that specific rating and we have a small tag of unhappy then we have a neutral and then we have a satisfied right here okay so finally we just have a button at the bottom and the Clause will be button and the ID will be sent and it will just say like send feedback and now if you right click on that and open it with live server and once again I'm saying that once again if you want more practice on the Dom so I have 100 projects on my YouTube channel which also include all of this project like I've already covered all of this project in a real great div in my course like 100 projects in 100 days course if you want to check that out I'm just skipping through all of this HTML because I have already have a various like entire section of the videos on these projects as well so if you want to check them that would be a great fit for you and then we have a style sheet so we have like first of all reset then we have a body we just give them a color of uh we just change the color to kind of a blackish kind of a blue color then we have font family of scent itself and we want to Center everything we provide a height of 100 VH we want to or if you're hidden and margin will be zero then we have our panel container which is this panel container so we just give them a background of that 1d1c kind of a bluish kind of background then we also give him the Box Shadow and we also give him a border radius of 4 pixel and we have font size of 90 percent and we also set out everything to a center and we have a padding of 30 pixels with maybe 700 pixel and the color will be totally white then we have our container which is that container right here which is holding all of these ratings so like we have rating one rating two and then we have already three right here okay so then we are just first of all centering everything and we give the max width of 500 pixel on there then we have a panel container and which is holding a wrong which is the come out strong oh my God all right this is a small one yeah this one your feedback so we are just game a line out of 20 pixel and text alignment will be totally standard so it's now Center then we have a reading container rate Kings container which is this one and we're just using display of flex and margin of 20 pixel for top and bottom and for left and right we have a 0 pixel and then we have a rating just a singular rating which is that one we are just giving a flex of one curse of a pointer pairing will be 20 pixels more than top and bottom will turn 10 pixels left and right will be 5 pixel and once you hover over to it and if our rating is active so you want to provide a border radius of 4 pixel and background color to be that CCC and transition will be attacking one second ease so if you just hover over it and if you click on it so like one when it's become active we are going to be providing the active functionality once we jump into our JavaScript but I just kind of want to tell you that and then we have a rating icon which is that one and we'll give him a width of like 40 pixel and the font size will be fine frame and the module for the right will be 10 pixel and then we are just styling our small tag and or button just a little bit and if or button is active so you want to use a transform of scale you want to just scale it a bit gonna lose someone okay so you have a hard once we submit or feedback anyway so now let's just get into our JavaScript and write our code first of all and then you will get to know how this project will look like so first of all let me just zoom in a bit so you guys can see everything a bit better and getting elements from the Dom so we would need a few things so we would just first of all need a ratings and it will be now equals to document that query selector of O and you want to get all of the ratings okay not a singular rate but rate things like plural and then we have a cons ratings container it will make us document.quarius covaries selector uh query selector just a singular query selector and we are going to be selecting our ratings container which is this writings container right here and then we have our send button so cons send BTN Network equals to document dot query selector query selector come on man like so and we are going to be using a pound symbol of send which is ID I guess yeah we are going to be selecting that one and cons panel available now equals document dot query selector of panel like so all right so we are totally done with all selection so now the next thing which you have to do is that we have to select word selected uh rating this kind of this is going to be over D4 selection like set is fine okay zoom out it will be now set to satisfied and now let's just attach events to their ratings container so we have already scan container and if you just uh for anyone listener to it if you click on it so then you want to get our event object and now let's just check if or E dot Target dot uh parent node dot class list dot contents uh rating so let's just check for that if that contains writing so what do we have to do we are going to be first of all logging that to the console like e dot Target uh okay let's just copy that from here so you guys can see everything and I want to paste that right here and now let's just sell that and open our developer tools click on it so true true everything is working yeah it is including that so let's just comment this line out and we are going to be passing over function which we are going to be creating just in a second like remove active Okay so we are going to be passing our function and then we just have to use like uh e dot Target that parent you know what I'm gonna bless her right here instead of their contains I'm going to just write add and let's just write active instead and then selected ratings which we've created this variable right here up above and will be now equals to e dot Target dot next uh element sibling element s i b l i n g and then inner HTML like so it will be now equals to there underneath all of there let's just attach or even listener on the send button so send button.ed event listener and once we click on it so what we have to do we have to just fire this function so panel dot inner HTML will be now equals to this template literal and we are going to be placing our own HTML so we have our paragraph with the class of heart and we already styled This Heart right here as I forgot just a second ago and let's just put or hardener so we have a heart right here and let's just close that paragraph tag right here right is strong I thank you close that strong right here and then we have a br for breaking and finally we have another strong feedback and b-a-c-k and then selected feedback rating and now let's just scroll Crow let's just close that strong tag as well all right so now we are totally done with there but now let's just create this remove active function and we are going to be totally done with this project as well so remove active Okay so it will not take any parameter or nothing but inside there we are going to be iterating over through like let R equals to zero I is less than ratings dot length so we are just iterating over through these ratings length and then ratings dot uh index dot Clause list that remove so you want to just remove that active from it so now if you sell them and let's just zoom out of it and this is how first of all we have a selector then we are just attaching our first event listener and we are just checking if e.target.parentelement class test contains the class of reading so if there's two so you want to remove that egg and we want to add that active clause on it and we want to set the selected rating to this next element Perrin so if you want to select this selected ratings which you've created up above so we want to select it there too uh selected writing which is like either neutral and heavy or satisfied and then if you just click on the select Ascend feedback so we are just attaching even listen around there and we create our own panel and we just change the inner HTML to like first of all they will get like hard they will get like strong tag oh thank you then you have or feedback so it will just show up that kind of a feedback for them and we are iterating over through that now let's just check him out unhappy send feedback thank you feedback unhappy and now let's just click on neutral send it one more time thank you feedback neutral now let's just click on the satisfied and satisfied so everything is working the way we expect them to work all right so now we are totally done with our third project as well the next project is kind of a simple uh you already have everything which you need and we are going to be building there just in a second if it's not that much hard this one the key code is the most simple one I should have put that in the first one I just I want you to know that this one is simple one that's what I meant right click on it open it with live server and if you press some key nothing will happen inside the body we have first of all a div with a class of insert and then we have our div with a class of key and then the level of press any key to get the key codes we are going to be just getting a key codes and all of that kind of a good stuff we are just uploading a research for it we have a height of 100 pixel we have sensor of and everything is Center and then we have overflow is zero we are just providing background of linear gradient to it and we are selecting that insert ID right here and the background color will be white like so this one and padding will be 50 pixel and we are not getting a key which you will see just in a second and we are starting that key and also their small Tech X inside their key so that's it for HTML and that's it for a CSS and by the way you can check out my hunter project for more details if you want to alright so for JavaScript we will get our insert key first of all so document or get element by ID we didn't use that for a while so now let's just use get element by ID of insert okay so now let's just attach what event listener on a Windows if you just attach even listener on a window if you just hit key down so we want to get our event like uh event and or event will be now equals to uh insert dot inner HTML will be now equals to this back text right here so we are going to be just rendering over David class of key and let's just close that real quick so let's just close that now let's just render our data inside there like event dot key so we are getting that event and we are just getting a key which you learned just in a second ago in a keyboard event so if that's equals to empty strings so we are just using alternative operator right here if that's equal to space so if you just write expense so we want to just get a space and if that's not equal to expense you want to just get or key let's just duplicate that or you know what yeah I'm gonna just duplicate that two times so the ID will be key or the class will be key and then we have event dot let's just remove the other stuff it will now set to key code and this one will be now set to just a code simple code I want to write a code in here and I'm going to also put a small tag in here as well so small and then event dot key code copy that and paste it right here and event dot code will be fine and now if you sell that and now if I hit uh any key and now here you can see it unlock uses the key name okay so we are missing something right here so copy that one and I'm going to pass it underneath that one and this should be just a key so if you save that and now if I just hit a certain log uses the key of A the key code of 65 and the code will be just key a if I hit B it will not use this B and 66 and the key code will be b c d e f g and everything is working the way we expect them to work okay so we have this interactive function or interactive project right here so we are not only done with this project as well so now the next project which we are going to be building is a simple calculators so you already have a styling and you already have your uh HTML code and I've already built this project in my 100 projects as well so if you want to check that out first of all we have already with a class of main then we have a day with a class of inputs so we are going to be storing different kind of inputs in there and then we have our H1 with the class of results so we are going to be printing or results in there and then we have our select options so we have different kind of options right here so plus minus division multiplication then we have two inputs with a class of number one and number two and both of them will take that type of input and placeholder will be number one and number two and then we have a day with a class of a submit button and then we just have one button with the ID of ptn and the label of submit some in there and as a CSS first of all we have 100 pixel of height and we are just centering everything background will be Crimson text will be white and font will be sensor if we are just getting a 10 5 pixel of uh padding for top and bottom and left and right will be zero Texan alignment will be set to Center input will be Flex everything will be Flex direction will be column and then we have for input border will be non-board radius will be five pairing will be we just commit that out betting will be one room at the top and bottom and 10 rim for the left and right and outline would be none margin will be margin for bottom will be 10 pixel for select option we have margin bottom of 10 pixel and pairing of 10 pixel and outline will be none and we have a button a little bit of styling for there button right click on it and open it with a live server and this other thing looks like okay so now let's jump into our JavaScript and provide our interactivity to it so first of all let me just write my document document dot get element by ID and I want to get my button first of all and I'm gonna just attach or even listeners straight in okay and let's just fire this function okay let's just zoom out of it and first of all let's just get elements from the Dom zoom in a bit and let's scare our elements so like let num1 will be now equals to document dot query selector of dot dot or period num1 and we want to get a value straight away and now let's just duplicate there and change this one to num2 and this one will be also num2 then we have results or result to be precise and then we have a document dot query selector of result like so then we have operator op-e-r-a-t-o-r of document.org document Dot get element by ID or select or B yeah not t but just op and you want to get the value of that one as well so now we totally get elements from a Dom and now let's just use our switch and cases and you can use um what do we call it FNL statement if you want to but in my case I'm going to just stick to the switch and cases so the first case we have if the operator is plus so we want to just get the results on come on uh result dot enter HTML will be now set to just plus and then num1 so this just simply means it will now convert one number or a string to just a number like so and then we have a number two num two okay you know first of all I will just write it that way and then we will refactor code if there's a plus we want to just get that result if the operator is not plus but it's minus so you want to get a result for the minus so instead of plus I'm going to change that one to minus and break out from a loop and then we have a case for the division and then let's just place that to the wide and also break out from it and then we have another case for multiplication so I'm going to just run multi in here m-u-l-t-i like so and I'm going to pass this one right here and change that one to multiplication sign sell file zoom out of it and now this is how it looks like so we have a few statements like if the case is plus so you want to change the result the inner HTML to the just a number one string and number two string and we are converting this string to a number and we have a operator of plus then we have minus then we have Division and then we have multiplication right here so now let's just check them out so we have two and two and if you click on this submit so it unlock gives us four and if we change the operator to minus and 2 minus 2 will give us 0 and then two divide by 2 will give us one two times two will give us four okay so everything is working the way we expand work now let's just try it on 10 and 10. uh let's start let's destroy it on plus and 20 minus zero and the white is one and times will be 100 yeah everything is working the way we expand work so now what I'm going to do I'm gonna select all of these numbers by holding Ctrl and hitting D I'm going to remove that remove the other one as well and now let's just put a plus right here so it will also work the same like it will also convert or string to a number so let's just put a 2 and 2 in here so four then we have two minus two then we it will give us a zero two multi two divide by two will give us one and two multiply by two will give us four everything is working the way we expand to work all right so now let's just start working on our final to do application and there's going to be the last project of our course okay so right click on it and open it with a live server and there we go we have our to-do list right here uh let's just send that one to to do to do list okay so collapse this head area so first of all we have already with a class of container then we have one form inside that container and inside this form we just have One Import with a class with the type of text and the placeholder of enter to do and then outside from there we just have or to use container right here all right then we have a styling for reset then we have margin I mean like the body will be totally Crimson the background first of all we have to get our elements from the Doms so getting elements from the Dom let me just write a form first of all and it will be equal to document.query selector of form okay so duplicate that a few times so then we have our input and then finally we have or to Do's okay so change this variable names to be like input and also this one to be to Do's like so all right so now let's just create our function and give a name of like get to do and let's just put a value inside there and creating new elements so first of all we are going to be creating our new elements so if you want to create a new Elementor select to do in this case we are going to be using document.create element as we learned that just in a second and we want to just create a simple div and we want to also create our text elements so we are going to be using document dot create element and we are going to be just pressing what Span in there all right so that's it for creating introduce oh no let's just write um setting values and style and styles for or text elements so I'm going to just write text element dot inner HTML and it will now equals to the value whatever the value for like value all right so now let's just append the append or element to the Dom okay so we are going to be using to do dot append child we are going to be using a pen child CH a l d like so and then text element now let's just create or close button real quick like let's close Elementary document dot create element I'll spend this course is getting longer and longer so that's why I'm just going a little bit of fast inner HTML will be now equals to this HTML entity so first of all we are going to be placing our and symbol then we have our times and then closer like so and then we have a close element close l dot class list let's just attach or ADD and delete class delete which we have right here inside our CSS this delete class and we also have a class for to do which we created right here this to do all right so Sarah file and let's just attach or event listener to its attach events like so and now this is attached even listener on close element and if you click on it so it even oh my God event listener oh my God close element Dot and event listener like so now if you click on it so what do we have to do we have to just create a function and we want to get our object and to do is uh dot remove child and we want to just remove that to do from it if you click on that close element and what else do we have to do so you want to just write to do dot a pen append Channel off close element and we also want to just provide a class of add and then the to-do class which we've created right here okay so then let's just return to the cell refine everything is working now let's just get our form dot add event listener and once that form is submit so then you want to get over element or object and let's just get our prevention let's just set that to D4 let's get our value and input dot value so whatever we have or video and then now let's just check if value dot Rim because we want to remove their empty spaces from there so then we want to just return in this case we can also part curly braces if you want to and then to do start append child and apparent child let's just apparent or get to do off value to an input dot value will be now set to empty string and blah we are not only done with all projects so if you just write like one it will now gives us that one right here with the styling so if you just click on this x so it will just remove it from a Dom so we have one two three four five six seven and so on and so forth and you can remove whichever kind of element you like and everything is working the way we expand work there was a lot of talking for me I don't know how long I record this video but there was a lot of challenge a huge challenge for me to record all of that video anyways so I'm assuming and I hope that you learn enough about a Dom and if you want to practice your skill like if you want to learn more about a Dom if you want to practice on a project so I've got you covered I have 100 projects and I'm currently working on new projects to add on that uh playlist so you can check out that if you want to learn more about HTML CSS so I've got a 16 hour plus course on that one with with Building 16 project by just using HTML and CSS I have a source course I have different kinds of other courses I have ecmascript courses you can just check out my YouTube channel and you can just learn a lot of stuff about JavaScript and goaling and all of these Technologies so thanks for watching and that was it about the end of this course so I'll see you in the next one bye bye hey girls Hussein and welcome to YouTube channel so we are going to be learning crazy amount of stuff about animation but first of all I want you to just come to this link which is at greensock.com if you want to type it manually so you can otherwise I'm gonna also give you this link in the description below so you can learn more about that if you want to but in this course we are going to be learning about animations so here you can see if I click on that will give us a different kind of animation and a lot of creative designer and a lot of creative people did very well job on this learning page okay so you can learn more about them and here you can check out some other great uh animation and stuff if you want to but hey we are going to be just learning the basics of it and if you want to advance your skills so this website will be the best friend for you okay so if you want to learn more about that feel free to do that so before we getting into any of these stuff like gsav stuff so first of all I want to show you everything from the beginning like how you would apply a JavaScript animation like a vanilla JavaScript animation without using G7 so we are going to be starting this course from the very beginning so the description below I'm going to give you a link which will bring you to my GitHub repository and there you have found two folder the star folder and the finished folder so I'm going to launch the Finish folder once this course is launched and by the time you're watching this video you will find the startup folder so just open there and then download there like you can go to my GitHub repository then just download this folder it's nothing but just a simple star file so first of all we are going to be learning about a JavaScript animation just a vanilla JavaScript animation after that we are going to be learning about the twin set method from and from two staggers controlling the train timelines and finally we are going to be building just a simple project not that much huge but just a simple project Okay so and this is what we are going to be covering and if you want to learn more like advanced stuff so there are countless things you can do with this G7 okay so you can just search for that like you can just search for anything you want and it will give you that uh result and you can play around with that anyways we are going to be started working on our starter file I'm going to right click on it and I'm going to open it my visual story recorded so it will now open that folder in my visual story recorder so what I'll do I'm gonna just open this folder and I have three files right here so the first file I have let me just zoom in a bit so the first file I have is their index.html file then we have standard CSS file and then we have app.js files so we don't have no content nothing inside there so what I'll do I'm gonna just start from the very very beginning so I'll just write doc time HTML and lowercase come on Jose DOT type HTML just avoid a plane and I'm gonna just write like I don't know JS animation maybe and now let's just link it with our CSS file and also let's just link it with old Javascript file as well I'm going to hide this head area because we don't need that now let me just create a section with the class of sidebar and now inside this sidebar I'm going to just write UL Li and I am going to just duplicate them maybe four times so let me just write four and boom okay so what I'll do I'll just do multiple curves of selection and I'm going to just write a pound pound symbol and I'm going to write a home and about after that we are going to providing our projects and finally let me just write a context section Okay so now let's just write I don't know D with a class of Center will be fine and I'm going to just put my button there so I'm going to write a click in here and now if it's certified right click on it and open it with live server so it will now open this HTML file in a live server just in a second okay it's taking a bit of time oh come on open it yep there we go so finally we have our um star HTML file right here inside our browser so now let me just get into this timing and now let me just start a little bit of styling so first of all I'm going to just write my research like padding will be zero margin would be zero box sizing I'm gonna give him like box sizing of bull box so now let me just save that yep everything is working so what I'll do I'm gonna just change the color of the background to be something like uh I don't know maybe one b one b one b would be fine and now if you sell there yeah this is kind of professional black color it's not poorly black color but it is something in that shade uh anyway so let me just get my section with the class of sidebar so this is the section which I'm talking about right here and I'm gonna just give him a heart of like 100 VH and the width will be 20 percent okay so I'm gonna also give a background of like I don't know 29 29 29 will be fine if you sell there and now here you can see that sidebar right here okay so I'll support a position of fixed to it if you scroll so you want to scroll this sidebar with a song already flicks and just if I control will be Center align items will be also totally Center and I'm gonna also provide a little bit of transition to it not duration but transition of one second and ease okay so if you sell them and yeah this is how it looks like so now let's just take care of the other stuff very quickly so I'm gonna just um write a class form I said oh you know let me just do that a bit later I'm gonna write UL Li and I'm going to also pour the anchor tag in here as well so I'm gonna just select my anchors or you know what I'm going to remove this anchor tag from here now let me just select my UL Alli and I'm going to just remove their list style of nuns so I'm going to support a little bit of margin for the bottom like 10 pixel would be fine and now if you sell there and boom this is how it looks like right here anyways now let me just get my UL alloy and also the anchor tag in this case so I'm going to just write text decoration of none the font size I will just increase it like 1.2 Rams and phone family will be totally sensitive as usual and color will be totally Pure White so if you save there and yeah this is looking better now let's just take care of this center button so we have div inside this div we have a center button right here so now let me just take care of that real quickly so I'll just make it Center so that you can see it in a center so I'm going to write a display of two Leaf Flags just if I counter will be now set to Center alignment will be also set to Center and hide I'm going to give like 100 VH so if you sell there boom we have one right here so now let's just take care of the standing of that Bond so I'm going to just write Center and let me just skip my button inside there I'm going to pour a padding of 10 pixel for Tomb and bottom 20 pixel for left and right for font size will be set to 1 Ram and board let me just remove that ugly border from it so if you save that so yeah this is looking better so now let me just take care of the colors and stuff a bit I'm going to just write a background of I don't know ffa31a this is going to be the background color and the text color will be totally white and cursor will be pointed see if you sew there yeah I know it's not looking that much cool but hey we would just want to work with a JavaScript animation so um yeah okay so we write this class right here so we style this sidebar right here but now let me just create a class for myself which allows us to hide this sidebar like hide and unhide this sidebar once we click on that button so now let me just write the class 4 or so so I'm going to just write hide you can give any name you like like you can give him unhide class or toggle class whatever you want but in my case I'm going to just give my class name of hide and the transformation will be now set to translate to the x-axis or minus 230 pixel okay so if you just sell our file nothing will happen so I'm going to copy there and I'm gonna just put this class right here for a second so if you save that boom that's gone and here you can also see so you know what instead of this three uh 230 I'm gonna write 340 will be fine and yeah that's totally gone from there as well anyway so that's looking better now let's get into our JavaScript Android or interactivity to it so we're not going to be writing them at JavaScript but first of all we are going to be just selecting our button and sidebar so I'm going to write cons and then sidebar and it will be now equals to document dot query selector of sidebar okay and I'm gonna also select my button as well so I'm going to write document.queryselector off button okay so let me just get both of them I'm going to write a button of add event listener because once we click on this button so whatever you want to do if you want to just fire this functions so what is that so inside this function I'm going to just write sidebar dot class list and we want to just toggle this class which we have created right here okay so I'm going to just write toggle and hide okay so if we sell file and now if I click on this button and here you can see this is all simple JavaScript animation but it took a lot of time for this animation but trust me if you are using some sort of a JavaScript library like gsab so it will be like very easy to work with Okay so this is a lot of coding right here so you still have to write the code I'm not saying that you will not write this dialing you will write that styling but hey there was just a JavaScript simple we never JavaScript animation I want to show you and now let me just get into the tween like water twin is and all of their kind of good stuff so here you can see inside this folder we have three files so we have index.html file we have app.js file we also have the style.css file as well so we have a little bit of styling right here and we just have our boiler player right here but I'm gonna remove this CDN because I want to show you everything from scratch okay so we don't have nothing so I'm going to open this folder I mean I can this file in a live server and here you can see we have a blank screen right here nothing no content nothing inside there anyways so what I will do I'm gonna hire this uh head area and I've already attached that to my style sheet right here so I'm going to hide that head area right here and what I'll do I'm going to just write section with the class of container inside this container we will just have our simple box so if you just sell our file and here you can see that styling applied to it so their signing is coming from the style sheet right here so we just have uh or a little bit of reset then we are just centering everything inside this container we are changing the background and we are also just turning our box a little bit and this is how it looks like right here so the main focus of this course will be on a g sub not on a CSS if you want to check out my CSS course so I've got like 14 hour or so CSS cores including a lot of projects okay so now it's time to attach all link of a green sock or gsap Library so if you come to this site so here you can see that link okay so if you just click on it I guess it will just copy it to clipboard yeah it is okay so you can just click on on there okay so it's not I guess it's okay it's it is copying if you want to download as npm package so you just have to write like npm installed in gsab and if you want to download that so you can just click on this ZIP and it will just download it into your machine and then you can use this gsab but in my case I'm going to just click on there and I am going to just copy this so I'm going to just click on it so it will automatically uh copy it to my clipboard and I'm going to just paste it right here okay so if you sell a file and now if you just open or network panel let me just go to my network panel right here real quick let me just zoom in a bit so you guys can see everything a bit better and now let me just refresh there and here you can see we have this gsap.min and the status code is set to 200 so everything is working they will expect him to work anyways so here you can see we just have or one box right here so we want to pour a little bit of Animation to it by using our gsubs so as I said like gsab is a script animation Library which allows us to do animation so now let's just write a little bit of Animation so before we get into all of their animation and stuff first of all we have to learn about a g sub object so the gcap object like this object which I'm writing um serve as the access point for the most of GCF functionality like it's just a generic object with a various method and properties that creates and control tweens and timelines so so the key player in all of their G cells so you can say that this gcept object is a key player in all of the GSAT World okay so this is the heart of a g sub so now let's learn about a twin so what in the word is a twin a twin is just a single moment in an animation and yeah let me just write a twin so first of all we have to create our G7 object and then inside this GSAT object we have methods so I'm going to just write method and then we have a element and then we have a Wars object okay so Wars object this is just a pseudocode which I'm writing right here let me just zoom in a bit so you guys can see everything first of all we have to work with a g-sep object then we are going to be attaching some method like this GSA have a lot of method which we can use we are going to be using some sort of a method and then we are going to be selecting some sort of element like H1 or I don't know if you're using like uh I don't know selector uh class selector or if you're using ID so you just write a pound symbol and then ID selector whatever you have so in my case I'm going to just put the element right here okay and then we have a Wars object in which we are going to be doing most of our work so this is just a pseudo uh element so now let's learn about a gcep.2 method so I'm going to just write gsab dot let me just write G sub come on and then I'm going to just access my two method inside their gsav object and here I said like we have to uh specify some sort of an element right there so first of all we are going to be specifying what elements so what is the name of our element in this case the name of our element is this box right here because we want to animate this box so what we have to do I'm going to just write period and box just a CSS selector like a class selector and after that what I'll do I'm going to provide my words object trust me this stuff is not hard but at first it will look a little bit confusing so I'll just write like I don't know I'm going to just write Y and hundreds so if I just write y Hunter if you sell a file and here you can see it will just push it to the y-axis right here okay so if I change that to the X and now if you serve there and here you can see it will now push it to the x-axis right here so if you also want to provide a duration so we can also just provide the duration so duration of maybe two seconds so you don't have to specify the S inside there as you do in a CSS but you just have to write two and now if you sell a file and let me just refresh that one more time and here you can see it will move our element to the x-axis in two seconds so it will just take two seconds as a duration and you can also provide like a yoyo property so you know what let me just show you the repeat so let me just write repeat okay so repeat will be now set two like minus one if I just write -1 and knife itself there and this animation will happen again and again like Infinity time so now let me just explain this according so what is this x mean this x means like transform to the x-axis strong transform to the x-axis like 100 pixel okay so you can just specify the symbol pixel or you can also pour the negative value if you want to so if I just specify the negative 100 and now if it's out there it will just push it to the negative side right here if I just remove this negative from there it will just push it right there okay so at the positive direction so this is a shorthand for writing like a translator to the x-axis and stuff so we just have X and we also have a y so if I just write y to like two two thousand maybe so if you sell file and here you can simply just push it right here to the bottom okay so this stuff will take a little bit of time so I'm going to just remove this x axis cell file here you can see it will just repeat our animation that's because of this repeat uh minus one so if I just remove that and if I just put like 2 if we sell a file so one and two and or animation okay so that was the second one so animation will stop working right here so that's just a simple stuff you can work with uh this gcap two objects so I forgot to show you like what a g sub 2 object is so this two method is the most common type of Animation in the G7 so these two method allow you to define the destination object and most of the people think in term of animating to a certain value so you can think about that if if you want to but hey we learned about our first object so now let me just close all of these files and now let me just get into the set methods so I'm going to open my HTML CSS and also the JavaScript files as well and here you can see we just have link towards CSS file and we just have a link for or G sub right here so I'm going to just hide this head area from there and I'm gonna write that container inbox one more time so I'm gonna write a container and also a box if it's out there and here you can okay so we have to launch it first of all so I'm gonna launch it right here so here you can see we have our simple box right here and we have their containers so we just brought a little bit of styling to it everything is working the way we spent works so now let's just learn about the set method so the third method is used to set the properties of an element before animating you can also use it for like immediately setting the properties of an element or if you want to create a zero duration animation so you can also use it for that if you want to so what I'll do I'm going to just write a g sub and then I'm going to access my set method inside there so what will I do I'm going to just select my box in here okay so then I'm going to also part my Wars object and you know what I'm going to provide opacity and I'm going to set that to zero and I'm gonna also pour the background of probably maybe yellow would be fine so now we set these two properties inside this G sub so if we sell a file and you cannot see there because the opacity is now currently set to zero and the background is also set to Yellow okay so you cannot see both of them the next thing which you have to do is that we have to use our gcev.2 method as we learned just a second ago and we also have the select word box one more time and we have to provide our Wars object and I'm going to just provide opacity of one in this case so if you sell file and boom here you can see the opacity is now changed to from 0 to 1 okay so that's why we are getting this circle right there and I am going to also change the background to be like something else like maybe Crimson would be fine and now if it's out there and here you can see their background is changed to Crimson we can also pour the duration if you want to so duration of three seconds in this case so it will take a little bit of time let me just refresh there it will take a little bit of time to apply that crimson color to it and also that opacity so what I'll do I'm gonna also provide like I don't know I want this to be like um go to the y-axis of 100 and now if you sell a file and here you can see it will take a little bit of time and all of that animation is applying and uh I'm going to just provide a repeat um repeat of minus one and you already know that it will just repeat infinite times so if you just save that and this animation will happen again and again from the beginning through the end but we also have a new property in G7 which is called a yoyo and as the name suggested it will just yoyo or an immersion like it will just start our animation from the beginning and through the end and it will just start from the end through the beginning you will see there uh just in a second so yo yo I'm not making this up but this is a property inside a G cell so if you save that to true if you said that virtue and here you can see it will just go from the bottom to the tops so animation will start and it will just go go from the bottom to the top and stuff like that if I just come in this line now let me just copy and comment this line out and here you can see that blink in this animation so if you don't want that you can provide this yoyo property inside your animation okay so that was the second one let me just close all of this file and now let me get into you this from end from two so I'm gonna open all of these three files so you already know that we have the star file right here but in this case we are going to be providing three boxes so what I'll do I'm going to just select my I'm going to write a section maybe I'm going to give a class of container and I am going to just write box and then box uh one would be fine okay so no content nothing inside there and I'm going to duplicate that two times so 2 and box three we have so if you sell file and let me just launch that really quickly so I'm gonna open it with live server and this is how it looks like so here you can see we just have three boxes right here no animation nothing just a little bit of styling to it so here you can also see their styling I just provided I just sent the width and height and poor little bit of background color and stuff like that you can check out if you want to so now let's just learn about a from and also the from to method in G7 and from method you don't have to specify the initial State like it will just figure out by itself let me just write there first of all uh from so in from method you don't have to specify the initial stat it will figure out by itself okay so I'm writing this definition because in some situation if I say something and you don't get it so you can also take a look at through this node so I'm going to write from 2 and from 2 and from two method you have to specify specify the default value and also the new animation stat as well like from where you want to start your animation and for where your animation should end okay so this is just a difference between the form and the from two methods so now let me just get to the coding and then you'll get to know what I'm talking about so first of all let's just learn about a g sub are from and come on I forgot to pour I don't oh my goodness now let me just write it one more time so we have G serve then we have come on Jesus then we have a DOT and from I'm gonna select my box inside there box one in this case not the other one but just a box one and we have uh what do we have I'm gonna just move there to the Y axis like uh 200 would be fine and I'm gonna also for a duration trade like three seconds it will take and I'm going to also put a linear uh easing so you can learn more about this linear easing and stuff by yourself so if you sew that and here you can see let me just refresh that and here you can see it will just come from the top through the bottom right here like one time if you want this one to repeat so let me just try to repeat uh repeat like minus one so this animation will happen again and again we can also just provide our yoyo property and we can set that true and boom this is how it looks like right here okay so it will just come from the top through the bottom and in this case we are using the from and as we saw that in the from did I just write it from okay that that's from in the from method you don't have to specify the initial step it will just figure it out by your itself so now let's just learn about this other one which is that from two methods so I'm going to comment this line out and you know what I'm gonna cut these comments from here and let me just put it right here at the end and now let's just learn about the from 2 method I'm gonna press X as my gcept I'm going to use their from Two and I'm going to just select my box 2 in this case so in this case I'm going to be using two objects right here so so the first one will be for the initial State and the second one will be for the changing the animations so you will get what I'm talking about but first of all as the initial State I want this animation to happen from y x is like 200 pixel and I'm gonna also provide the opacity of zero dirt so this is going to be the initial state of my animation and what else can we do for them we want this n or animation by providing the opacity of one to it if you want to uh we also want to provide the y axis and we want to set that to like minus 200 and we also want to provide a duration of three seconds we also want to provide the easing of linear okay so we will discuss this easing and stuff in a second but you don't have to worry about that for now but now let's suppose if you want to provide also like a border radius so you can just write Bolder radius are adrius and you can set that to zero okay so if you want to report like something else in CSS like I don't know um maybe I don't know if you want to provide something else like you can have access to any property of a CSS but you are not allowed to provide the dashes like uh I don't know font and family this is invalid if you want to use a font family so you'd use that an uppercase and then you can specify the form family but we're not provided any families in animations and stuff but that was just a little bit of side notes and I'm gonna also provide a repeat to the minus one so if you want to repeat this uh animation like countless times so we also want to provide a yoyo of truths if you sell there and here you can see this animation will happen and here you can see the initial State let me just refresh there the initial state will be zero and it will just come from the y-axis which is there y-axis let me just go back and the initial state will be y x is uh 200 N opacity will be zero so here you can see the opacity is zero and then opacity is set to 1 and also we are changing the Border where are you the border is setting to zero and here you can see let me just see that and the border is Now setting to zero and this is going to be the initial stair and this is going to be the what do you want to do with that animation so that was just quite simple and easy and you can learn more about that in the docs if I'm confusing you up I'm sorry about this now let's discuss about staggers so now let me just open this index.html file and we have just a little bit of styling for this uh elements and stuff so what I'll do I'm going to hide this head area from there and in this case we are working on a stagger so we would need a lot of boxes so I'm going to just select my container and I'm gonna just create a div with a class of box and I want them to be like seven maybe okay so we have seven boxes inside that container if we sell that and now let me just launch that very quickly I forgot that stuff all the time and here you can see we have seven boxes right here and we are going to be discussing that stagger but let me just go to the docs because stagger is a little confusing thing and not confusing it's very cool thing to work with but it's a little bit confusing that I'm explaining to you okay so I'm gonna just search for stagger s t a double g e r s there we go stagger I'm going to click on that and you can learn explanation about the radio uh okay so we have different kind of Statistics so stick around these kind of animation and you cannot apply stagger to just one element and stuff you would provide that with a lot of uh elements so here you can see this stagger is starting from the center we can also change that to n and this is how it will start from the end if you want to provide it from the edges so you can also work with the edges if you want to start a randomly so it will just work with it randomly if you want to provide 11 indexes so this is how it will looks like um you can also Port X is like to the y-axis or through the x-axis if you want to and easing is something which we didn't discuss but you can also part easing you already know easing if you've tagged my HTML and CSS courses so I've discussed this easing and stuff in a really great depth but anyways so that's them so now let me just get into my coding and now let's just write a little bit of coding so what I'll do I'm going to just write gsab dot sets so dot come on gsab dot set I'm going to zoom in a bit and I'm going to select my box first of all so we have our box and I'm going to just change the Border radius there we go and I'm going to set that to zero because this is the initial stand and I'm going to just write gsap.2 and I'm going to select my box like all of the boxes not one box but I mean all of the boxes right here okay so I'm going to select all of their boxes I'm gonna provide my Wars object and the Border radius property will be now set to like 100 because we want to provide a border radius to it and I'm going to also support a duration of one and at the Y axis it will just move to the y-axis like 100 and we have a ease of power one okay so I didn't discuss this easy but hey this is just a property for easing anyways I'm going to show you that just in a second but we have a yoyo it will be now set to true and let's just provide a repeater so repeat will be -1 so if you sell a file and this is how my current animation looks like like a bouncy animation and that's not looking cool we want this tiger animation we don't want this ugly animation so for that we are going to be using a stagger so if I just write stagger then we are going to be specifying that objects so we want to point the property of amounts so what will be the amount you want to work with so this amount property is the total amount of time in seconds so if I just pour like four in this case so that's there and then we are going to be also providing another property which is each so e s c h and then I'm going to just set that to like 0.5 second would be fine not seconds but so the each property is the amount of time in second between each subtwin start times so that's that and finally we are going to be on supporting the from and it will be now set to zero so the from is the position in the array from which the striker will eliminated so if you just sell a file and boom this is how it looks like right here okay so you can work with that or you can provide like different kind of other animation if you want to just like uh copy these animations we have create they use a grid we don't need there you can also provide the X's if you want to and let me just write you know what I guess this is looking cool but let me just show you this animation first of all I forgot to show you this animation I've watched this animation a lot of time so that's why I don't notice that I want to show you that this is the first step and boom boom boom boom okay so that's how you can work with this uh stagger so staggers are massive if you want to work with that so feel free to work with that you can also learn about Advanced staggers but I just kind of want to give you a test and here you can see that definition that um amount like among you in the amount property you'll provide a number it will not take any string and nothing the total amount of time in second that gets split among all of the staggers so if amount is one and there are like 100 elements the Stagger is uh nearly there would be like 0.01 seconds between each subtween start time um if you prefer to specify a certain amount of time between each twin use the each property instead okay so we have each we have grid we have x's and ease properties and you can learn more about that in your spare time uh so this is just a basic animation I want to show you in the staggers and yeah you can explore more of them if you want to so yeah now let's get into the controlling tweens so I'm going to open these three files right here and we have just a little bit of styling I'm going to cut there and we don't have nothing inside this app.js file and yeah we just have a little bit of HTML just a boilerplate and we have or linked to a style sheet I'm gonna hide this head area from there and what I'll do is that I'm going to start working onward section and I'm going to just write a container okay so I'm going to give a class of container inside this section I'm going to write my box of container container okay so inside this box container I'm going to create box and I'm gonna also give a class of box one to it and yeah that's looking better underneath that box I'm going to create my new section with the class of um buttons container so this buttons container section will contain all of four buttons so I'm going to just write a button I'm going to give them a class of play and I'm going to also provide a text of play Third so we have play we have pause and we also have a restart okay so let me just write a pause and we have to write a restart animations so yeah that's that this is our HTML if you sell file and this is how it looks like so now in this case we are going to be uh controlling or animation like if we click on this bouncer we'll just play over animation if you click on this pause button it will pause over animation if we click on restart so we'll just restore our animation and you can go crazier like you can provide a staggers if you want to but in my case I want to show you just a simple uh way of controlling your tweens and animations so uh I think like one box would be fine so now let me just get my buttons first of all so I'm gonna write let play will be now equals to a document dot query selector of play okay so I'm going to duplicate that a few times and I'm going to change that to like I instead of play I'm going to change that to pause and I'm gonna also select my play and I'm going to change that to restart okay so that's them and now let me just write my tweet so I'm gonna write let tween and I'm going to store that in variable so I'm going to write gsap.2 and we already store that inside or tween variable you can give any name you want and I'm going to just write box one and like we will select this box one right here so that's why I give the class of box one to it inside there I'm going to provide this object to it and it will go to the y-axis like -2 minus 200 and we want to provide a little bit of duration like five second and the background color I'm gonna change the two like uh I don't know it's gonna maybe I will go to a teal color okay so if you sell fine and yeah here you can see we have this animation but it's not control like if I click on this button nothing is happening right here like nothing is totally happening anyway so if you want to control our twins so for that we have to attach a few event listeners to it so so now let me just select my play and I'm going to attach this ad event listener uh if we click on that and play buttons whatever you want to do we want to find this event so what do you want to do with this event we want to write the tween dot play Method okay so p-l-a-y-n so this play Method is a built-in method of this G7 okay so it will allows us to play our animation and by default it will be play like by default it will be played but now let me just duplicate that a few times so we get the same functionality as we want so I'm gonna write pause and I'm going to also write restart so these three are the method which gsep provides to us and which allows us to play our animation puzzle animation and restart our animations so I'm gonna just write a pause in here and now let me just write restart come on restart so we've already selected there right here up above and now we're just controlling our animation so if it's zero file and now if I just refresh that here you can see this animation will be uh coming so if I just click on restart so here you can see my animation is restarting if you want to pause this animation so I'm going to just click on there and we'll just pause my animation if you want to play it again so I'm going to click on there it will just play it again if I want to restart it and here you can see this is how you can play around with this animation by yourself okay so that's cool like you can work with that that's awesome thing to work with but now let's just discuss the final Topic in this video which is a timelines and yeah let me just explain that to you so I'm going to just give you two examples of these timelines because they are cool stuff not hard to be precise not hard but they are cool thing to work with so that's why I want to give you two examples of timelines and after that we are going to be creating our projects so now let me get into the timelines so I'm gonna hide this head area from there and what I'll do is so you guys can see everything a bit better I'm going to create a section with the class of container and I'm going to just write box and I'm gonna also give him a special class of box one duplicate that two times box two and box three so if you sell file right click on it and open it with the live server and this is how it will look like but I don't know why we don't have any styling for I guess I must have container there we go I'm going to copy them I'm going to paste it right here server file and yeah this is how it looks like anyway so I'm going to cut this stylishing style sheet from there and now let's just start working on our G7 so now let's just discuss our topic which is a timeline and as the name suggests that it will be a timeline for our twins so what do I mean by that first of all let me just declare a variable I'm going to give a name of like War TL for like timeline and I'm going to just write gsap and I'm going to just write like timeline inside there okay so now we have our timeline so I'm going to write TL and then we are going to be using this two method inside there I'm going to select my box one so what do I want to do with that I am going to just write like duration of like two seconds and I want to scale it up a bit so I'm going to write scale of 0 opacity will be set to zero and delay will be also set to deliver this is just to like one maybe and now I want to attach that two method one more topology oh so what I'll do I'm gonna just select my box one now I mean in this case I'm going to select my box two in this case I I select my box one in this case I selected my box two right here so what do we want to do I'm going to just repeat myself again and again and by the way we are going to be refactoring this code just in a second but hey I want to repeat myself I want to show everything so we have like 200 right there and now let me just attach one more to because you want to also uh animate this third box as well so I'm gonna just write like box three and now let me just write my worst object and duration will be now set to 2 and x-axis will just go to like uh 200 pixel and Border radius are ADI IUS will be now set to just zero in this case and also rotate will be set to 360 Degrees okay so this is going to be for my box three and finally let me just use my set method right here so I'm going to also change my set method and I'm going to select my box of uh one one more time okay so I'm going to write a duration of two seconds third and scale will be also set to 1 and we have opacity of one so if you sell file and now if you just refresh it out okay so it's not working and I don't know why okay I forgot to include this is a knife ISL file and here you can see these animation so first it will just animate our first box which is right here so what are we doing with it we are just providing a duration of two seconds to it and we are just scaling it to zero providing a opacity of zero to it and we are just delaying there for one second so what else we are doing we are just providing we are just selecting our box two and we are providing a duration of two and we are just pushing that to the x axis of like uh minus 200 then what else we are doing then we are providing a duration of two seconds to the Box three and the x-axis it will just move to x axis like um Dash 200 pixel and the Border radius will be set to zero and the rotation will be just set to like 360 degree and finally we are just setting the box one Edge duration will be now set to 2 scale will be now set to 1 and opacity will be also set to 1 again so if you just refresh there and here you can see this is the animation for the box one then box two then we have our box three and then we have our box one again right here okay so this is a timeline but we can do better than that so what I'll do I'm gonna just select everything right here and I'm going to just comment it up right here or you know what uh I'm going to comment it or you know let me just uncomment there I'm gonna duplicate all of this code right here and now I'm going to comment the first version of it so I'm going to comment that out and now let me just hit enter and we have that version right here so now let's just refactor this version so I'm gonna write like a refactor Okay so refactor uh boom yeah that's looking better so we can also put our default values for this timeline so we can just pass or curly braces right here and we can just write a defaults okay so defaults will be there and I'm going to just provide defaults of like duration one second maybe so now what I will do is that I'm going to go inside this timeline and I we've already select our box one so I'm going to remove this duration of two seconds we provide a scale of zero we all support a opacity that's looking better that's looking better and then after that we have our box two we will just remove this duration one more time and yeah that x-axis will be fine after that we are working on our box three so we can just remove this duration from here so I'm going to just remove this box three and yeah this XX is there that's fine this rotation is fine so finally I'm going to just write like x axis will be now set to 200 and also I'm gonna attach one more two method in it and I'm going to select my box so one one more time comma and now here what I'll do I'll just write a scale of one and also opacity will be another two one so if you sell there and now here you can see there's a box one there's a box two there's a box three there's a box one one more time okay so this is how you can refactor your code into your timelines and you can learn more about timelines if you want to so here you will phone okay so we have our timelines and you can do crazy stuff with this timeline so our timeline is just a powerful sequence tools that X is a container for twins and other timelines making a symbol to control them as a whole and precisely manage their timing without the timelines building complex sequence would be far more uh cumbersome because you need to use a delay for each animation for example like these and then that code is referred to these and stuff like that so that was just the first example of a timeline and the second example is also kind of the same like the first one but hey we will just see that anyway so so let me just hide this head area from there and now inside this body what I'll do I'll just Square my section and I'm going to give him a close-up container and I'm going to just write a box of container inside this box container I'm gonna write like H1 of hello uh Hussein my own name Jose and web dev and then underneath this div I'm going to create my own section give a class of buttons container inside this buttons container I'm going to just write a box and also box one okay so duplicate that a few times so we have box two and then we have a box three okay so if you sell fine and that's there if you check him out right click on it and open it with the live server and that's looking like that and I don't know why I require a black color to it but hey that will work first of all I'm gonna create my timeline and I'm going to store The Insider TL variable so I'm going to write G sub and then timeline okay so inside their timeline I'm going to provide my Wars object uh then I'm going to provide my defaults object and I am going to just provide the default value of duration will be now set to one okay so that's our timeline now let me just attach my two method to it I'm going to select my H1 just like that and after that I'm going to provide a y axis of 100 and also the color will be now set to totally white in this case and now let me just attach my one uh the two method one more time so I'm going to just select my box one and yeah let me just provide my x-axis it will be now set to 100 pixel and then we have our background color of it will be now set it totally pink okay so that's that now let me just attach my two method one more time and I'm going to just provide a box of two okay so y-axis will be now set to 100 and background color will be now totally set to purple in this case and finally let me just attach my um whatever you call it two method one more time to the Box three so I'm going to just write box three and let me just write x axis and it'll be now set to 100 and I'm going to provide a background color of Crimson crms on and now if you sell that so here you can see that animation will happen for this uh text right here then we have our box one box two and then box three and here you can see we select our two method will be select for H1 and we provide that standing to it then we select our box one and then we select Roblox 2 and then finally we select or box three so this is what I want to show you in this course I know it's not a long course unlike my other courses which is like I don't know 80 hour or 14 hour long courses uh I have already covered like 100 projects so uh last time when I was checking that so I guess it was like about 30 hour of course or I'm not sure about that but I guess it was just like 30 or maybe 35 hour of course I'm not sure about that so then so this course was just like a sweet course to work with so now it's time to create reference projects so here you can see we have this one image right here which is box Walder is better and it is Cam from unspatch.com if you want to check it out so you can otherwise I'm gonna give you a link to my GitHub repository which will bring you to my GitHub repository and then you can download it from there if you want to so the first thing I would do is that I'm gonna just start from my HTML so we have our metadatas we just link that to our CSS file and we have the Syrian of their gsab okay so inside this body what do we have to do I'm gonna write my navigation inside this navigation I'm going to write a divider class of logo container okay so inside this logo container I'm going to just write like creatives uh oh yeah you know I'm gonna just write lowercase creatives there you go and underneath this div I'm going to write my UL inside this UL I'm going to write my uh alloy so Li and I want them to be like I don't know maybe a full time would be fine okay so I'm going to just write like a main features okay so then we have a products after that we have a shop and we have a contact right here okay so I'll just put my uh pound symbols inside there just like a pounce come on pound symbol there we go and now underneath there we are going to be creating our section with the class of uh section with the class of site bar underneath this sidebar I'm going to create a new section with a class of content container inside this content container I'm going to just render my image which is this image right here as alternative text I'm going to just write like uh how do you know I'm not going to give any alternative text I'm going to give a class of main image because we just have one image and this is going to be our main image okay so I'm going to just write a Content so content and yeah inside this content I'm going to just write my main title and it will be like create tools okay so underneath there I'm going to write a paragraph of main info and I'll just put my welcome to the real word uh word and period I'm going to all support a br tag and explore or Gallery case if you sell that and now let me just right click on it and open it up okay so it will just open it right here and that's looking awful okay so now let me just back there a bit smaller yeah it is looking awful so now let me just take care of it yeah so I'm gonna go to my CSS and now let me just type that a bit so here you can see we just have two fonts right here so the first one is Roboto the second one is Kumar one outline or whatever you want to call it these fonts came from a fonts.google.com if you want to check there so link is like phone start google.com if you want to check that out anyways so now let me just start working on our navigation so what I will do I'm going to select my nav and I'm going to destroy a display of flexster just if I counter will be space around and align items will be now said to call the center position uh Position will be now set to is fixed because we want our navigation to be totally fixed then the width will be set to 100 the index will be set to 99 and margin for the top I'm gonna give like 20 pixels so if you sell there and you cannot see that because we have to take care of that image poster this image is taking the entire area come on let me just select first of all their image so that we can work with our project so I'm going to write main image and I'm going to give him like I don't know the width of like 440 percent and the model for the top will be nicer to three Ram more than for the left will be no sir to six Rams okay so if you sell there and yeah this is how it looks like and this is how or man creative navigation looks like anyways so underneath this navigation what I'll do is that I'm going to just write my nav and UL display will be now set to totally flex and boom this is how it looks like and I guess I messed it out something inside this navigation so we have logo container and we put all of our stuff inside this navigation but we don't want that I'm going to just close my navigation underneath this UL yeah that's looking better alright so now let me get into my CSS one more time and now let me just select my Ally so nav UL Li and I am going to display a list tiling of an Android and module for the left I'm going to provide a 4A pixel and font size I'm going to increase that to 12 pixel and I'm going to use a font family of sense setup as you guys know me so instead of any others looking awesome yeah so underneath this Li I'm going to select my new UL Airline also the anchor tag and the text decoration will be now set to none and the color in this case I'm going to be using like a three so here four five six so four five six there you go so yeah totally black color underneath this anchor tag I'm going to select my logo container of H1 so I'm going to just provide a form family of sensor after it so if it's out there and that's looking a bit um Bolder and now let me just get my sidebar so I'm going to write sidebar here spell it correctly or not so copy there I'm going to pass right here that was correct anyway so I'm going to display a background of D7 let me just write d751 uh five seven there we go five seven there we go and with will be just 30 percent and I'm gonna also for the height of 100 VH Position will be totally set to fix and the Z index will be now set to minus one so if you sell there and yeah this is how it looks like so we are getting there but it will take a little bit of time and now let's just take care of all content container okay so which is that content container where we are placing all of our content like our image and we're info okay so now let me just take care of there so I'm going to write a display of flex to it Flex wrap will be no set wrap and justify content will be now set to Center and align items will be also set to centered so how it will be also set to 100 VH and the font family I am going to change that to Roboto and send serif if you don't have access to that Roboto and yeah this is how it looks like right here after that now let's just take care of this title so underneath this main image I'm going to just write main title and I'm going to just write transform of rotate rotate we want to rotate our text to the 90 degrees so 90 degree and also the margin for the top I'm gonna give like 10 rims and the font family are not formed but font size will be now set to 3 RAM and the font family in this case will be that uh Kumar let me just write Kumar one outline if you don't have access to that so then you want to use or occur save font so there we go yeah so if you save there and this is how it looks like you know I'm gonna make it a bit bigger yeah that's looking better and now let's just take care of our main info so I'm going to write main info um main info and the transformation for that will be oh you know what I I messed it out something no this one that's fine that's fine rotaren will be also minus 90 degree because you also want to rotate this text as well so Fawn family I'm going to set that to send serve and text alignment with me also set to center with I'm gonna give him like 200 pixel and the margin for the bottom I'm gonna give him like five pixel not pixel but rims okay so underneath that I'm going to just write margin for the left of seven ramps if he's out there and yeah that's looking better but the funny thing which you have to do is that we have to provide our animations to it so what we have to do we have to go to our Javascript file and provide our animations to it so what do we want to do well we want to uh declare a variable and we want to just store our timeline inside this so we want to write timeline and now let me just provide my words objects or defaults and now let me just provide the opacity to zero this is going to be the default one the ease will be set to linear uh l-i-n-e-a-r and comma duration will be now set to 1 and that's there underneath all of them what I'll do is that I'm going to just access my timeline and I'm going to use my from 2 method right here and now first of all let me just select my sidebar and I'm going to just provide the default value of like with width and it will be now set to zero I'm going to provide a comma and I'm going to also provide this curly braces and opacity will be now set to one the width will be now set to how much 30 percent okay so underneath there I'm going to also select my timeline prompt 2 and I'm going to select in this case I'm going to select my main image which is that image we just have one image right here so x axis will be set to zero and I'm gonna also support opacity and it will be now set to one okay so that's looking better and finally let's just write our timeline from two of our content and I'm going to destroy the x axis of like 100 Pics pixel or whatever and then we have a comma then we have opacity it will denounce it to 1 and the x axis will be also set to zero so if you sell there and boom boom boom boom we are totally done with our project and that's there and by the way I forgot to show you one thing which is that um what was that what was what was I thinking I was thinking about um I don't know man I forgot that uh what was that linear I was thinking about Laney I use linear summary okay so we have an easing so let me just write ease visualizer was that easy visualizer uh or any Mission visualizer let me just type A visual b i s u l i z e r or whatever that was you know I'm gonna just click Google search so G sub realizer okay so yeah there we go so we have a ease visualizer I kind of forgot the name of it and here you can see we have this visualizer right here and you can do crazy stuff with that so by default it will be like there if you run it and boom or animation will look like there we can also provide our power and we can also even change these degrees and you can get all of this code right here so if you just copy ease it will copy it to your clipboard and there we go you can also provide the Expo and this is how it will look like you can go crazier like uh sine Theta and you can go slower it will just move it too slow you can go rough like kind of rough nobody wants that this is kind of an awful one you can do bouncing if you want to and we have elastic elastic is kind of a weird one and then we have a bank so you can just go back so I've used this easing right here and I've and I provide just a linear thread and you can use all of this stuff right here so that's the end of the course I know that was a short course like this is the shortest course I have ever made but hey this is like the most this is like one of the one of my favorite quotes that I've enjoyed making it because this animation course if you want the advanced version of this course so feel free to comment it out and I'm gonna do my best to provide great projects using Advanced Techniques of gcepts so that was just a course for beginners it's not only for beginners like we cover a lot of stuff inside there but hey uh I guess that was just a quick introduction for beginners to like gsab and you can learn crazy amount of stuff and like gsep is the most awesome and the most love uh JavaScript animation framework so you can check like anything you want so we have different kind of tools like scroll trigger which is like awesome thing to work with we also have a developer tools for GSA so final words will be like thanks for watching and I've got a lot of courses if you want to check that out I have courses I of course on a table in CSS with a lot of projects I have got of course on a JavaScript I have 100 project scores I have a lot of courses if you want to check that out that's going to be awesome anyways so thanks for watching and I'll see you in the next video bye so now let's begin our conversation by talking about what in the word is oop and why you should care about that so oop or object oriented programming is a programming language immoral or style okay so basically oop is not a programming language some people think like it's a programming language but it's not and we're not going to be installing some sort of third-party libraries or anything like that to work with oop we are going to be still writing a valid JavaScript code but oopl allows us to organize our code in an objects manner so from now on I'm going to be introducing the advanced topics of objects like how to create a Constructor function how to create a factory function how to create a classes and all of that kind of stuff but before we get into all of that nitty-gritty first of all let me just throw you on mine grenade their JavaScript is not purely object oriented language so JavaScript is a versatile and dynamic programming language that supports multiple paradigms and by the way oop is also you can call it like a Paradigm or model or style of writing your core but anyways so it supports multiple paradigms including procedural and functional so in this course we are not going to be learning about a functional programming in JavaScript because it requires a knowledge of mathematics and I know it will confuse a lot of people so maybe I'm gonna make a separate course on there but we're not going to be discussing functional programming in this course so JavaScript support like procedural functional and also the object oriented programming but while JavaScript is not purely object oriented language like Java or C plus plus it provides the tools and features to implement the oop Concepts effectively okay so one of those features and how all of that works we are going to be learning all of that in this course so how are we going to be writing oop or the object oriented programming in JavaScript so all op in JavaScript refers to the practice of Designing and structuring the course around objects and in their interactions it is a programming Paradigm that allows developers to model real world entities and their relationships using objects and clauses so we already know where in the world are objects in JavaScript but there are still a lot of things that we don't know about objects like Constructors and clauses and all of that kind of stuff which we are going to be learning in this section so I want you to keep that in mind like JavaScript is not purely object oriented programming language and oop is just a style of writing our code and it will allows us to organize our code by using the objects oriented programming so that was just a basic theory about what in the world is oop and why you should care about that so enough about a theory and now let's just write a little bit of code I'm going to create a folder right here and I'm going to just give a name of like Advanced JavaScript I'm going to open this folder by using my visual store recorder right here if you are using some other editors so feel free to use there I'm going to create three files or two files like index.html and the second file will be app.js and this file will be totally optional you don't have to create this file which I'm creating right now readme.md and yep I'm going to tell you why I created this file in a second but I'm going to just place this instruction right here and you don't have to and now I'm going to just write like Doc type HTML and I am going to link it with my JavaScript and if you guys don't know what I'm doing uh well you should watch my previous courses or the first part of this course so now I'm going to just open my console or right in here and I'm gonna just undock there two I guess that would be fine I'm going to descend up there right here so yeah we are going to be riding our code right here inside our corner and we are going to be testing the result of our core by using this console log right here so I'm going to open this as a markdown preview so now we are going to be talking about what in the word is a this result keyword in JavaScript and why you should care about that so the JavaScript this keyword refers to the object it belongs to and it has different values depending upon where it is used okay so like let's suppose if you use this is just a result keyword like that you are going to be just writing that this and that's it okay which I'm going to be showing you in a second so if you just use this result keyword inside some sort of object this result keyword will refer to that same object where you use the result keyword and if you use it alone like without any objects or without any I don't know without any curly braces or anything like that so that this result keyword will be referring to the global object and if you use the inside of function so it will be referred it will still refer to the global object and there is one more thing which is by using an arrow function which I'm going to be also talking to you in a second but this is just a beginning so here we are using the this reserved keyword by using our method right here this is going to be some sort of method and we are going to report an object and inside that object we will have this method and inside the method we would have the this result keyword and we are going to be referencing that this result keyword to something come on okay so uh this result keyword in this case we are using it as a method inside our object in an object method this will be referring to the owner of that method so I'm going to show you that in a second but if you use it alone like without any method without any functions or anything like that so this result keyword will be referring to the global object and now if you use the this result keyword inside some sort of a function so this result keyword will still refer to the global object or the window object so that was just a quick theory behind that this result keyword in JavaScript and now let me just write a bit of code then you'll get to know what I'm talking about so I'm going to just close the other files right here and I'm going to just write like on construct log and in this case I am going to just first of all write this window object right here so now if I save that and here you can see it unlock uses this window object if I expand there and you are probably aware of this window object if you are um coming from my dom course like which means like you have to complete my own course anyway so here you can see we have different kind of methods and we have different kind of properties on this window object so this is going to be the main or the heart of our document object model so this is all Dom so what I'm going to do is that now in this case I'm going to just come in this line out and I'm gonna just write like this in this case I mean like this in this case I'm going to just write that this reserved keyword in this case and I'm going to just sell them and here you can see it will still gives us this window object right here why is that in this case here you can see we are using the this result keyword outside from anything like we are not providing any curly braces just like that or anything like this so in in this case that this result keyword will refer to the window object okay so just keep that in mind so if I save that here you can see it will give us that window object and now let me just compare both of them then you'll get to know what I'm talking about so I'm going to just lock the console that this result keyword and I'm going to compare there with the window object right here okay so what do you think will be the reason if I save this file I'm going to save my file right here and it is giving us true right here because that this result keyword is not is but refer to this window object okay so in this case that this result keyword is a window object and we are just comparing both of them so it is now giving us True Value rightly inside our console so I'm going to just come in this line out as well so what I'm going to do is there in this case I am going to just write window dot like prints come on press name or something like that and I'm going to just provide my first name and now let me just log to the console this window right here so if I save my file and here you can see we already know like it will give us this random object I'm going to hold Ctrl hit F and I'm going to just search for my variable which I just squared like first name and there we go here you can see we have this first name variable inside this random object we are now creating this variable inside this window object right here so that's why we will be able to access this variable anywhere inside our program so let's suppose if I just write code like this if I write this result keyword and if I write like last name and it will be equals to web dev okay so I'm going to save this file one more time and I am going to search for in this case the last name come on what the hell am I doing I'm gonna have to expand there and now if I just search for the last name and here you can see it will also work just fine like this result keyword here you can see that this result keyword will also allow this to provide our variable into the Dom or to that object which we've just uh saw a second ago okay so both of these things are totally just fine like this result keyword and the window so what I'm going to do I'm going to just oh you know let me just show you um I'm gonna comment this line out what the hell I'm going to comment this line out and now let me just give you the example of using the this result keyword in some sort of a function so I'm going to just write a function result keyword and I'm going to just give a name of like print um this or whatever the name doesn't matter I'm going to just return to this result keyword right here and now let me just log there to the console but before I don't have to store then some sort of a variable now let me just log that to the console I'm going to save my file and here you can see it will not uses the window object one more time now you might be saying like oh then I get it like this result keyword will always refer to the window object but no not all the time so here you can see if we use the this result keyword without any functions without any object or anything like that that this result keyword will be referring to the window and if we compare there with the window so it will gives us the result of true right here and here we also sound like how we are going to be declaring our variable or how we are going to be attaching our variable to our Windows object by using the window dot in the variable name and also that this result keyword Dot and the variable name you already saw there and now here I also show you like if you use this result keyword inside a function so that this result keyword will also be referred going to the window objects so I'm assuming that at this point you are totally with me I'm gonna just um place this everywhere right here and what I'm going to do is that in this case I'm going to create an object I'm going to create an object I'm going to give a name of like obj the name doesn't matter and I'm going to just write like first uh or you know username would be fine and I'm going to just store my own name right here like Hussein there we go okay so oh you know this is this one should be like first name or something like that and I'm gonna just write like a last name and this one will be set to web dev there we go okay so what I'm going to do is that I'm going to also create a method inside there and I'm gonna just give a name of like full name and this method will just print as our full name right here okay so I'm going to remove that and also the name and now if I just write return of this result keyword and I'm going to just create an instance of that and I'm going to just write console res and it will be now equals to obj dot full name and now let me just console log this res and sell my file so what do you think will be the result of this score so if I run this code what do you think will be the result first of all I want you to notice that this result keyword we are using this result keyword inside this object and inside this object we have this method right here in this case if we use the this result keyword inside a regular function it will give us window so what do you think will be the result in this case if he's several fine and here you can see it will now gives us that same object right here this object it will not gives us the window in this case it will give us the owner come on Owen ER I guess this is how you spell it really gives us the owner object right here so in this case the owner object is this obj so it will just refer to this object word here so now we can write all of our stuff right here by using this result keyword okay so what I'm going to do is that I'm going to just write like I don't know this star first name and I'm gonna also write like this dot last name right here come on launch name now I'm going to save my file and here you can see it will now be the slide first name of joseon and last name of web live right here inside a console that's working just fine and now you're totally happy but there is just a bit catch I'm gonna duplicate this line of code and I am going to uh comment this line out so for you to give you the reference and I'm going to also place this separate right here so I'm going to save there it will obviously gives us this was in Red Devil right here because we just duplicate our code right here so what I'm going to do is that I'm going to just convert this function to using the arrow function okay so if I just remove the function wizard keyword like everything will work just fine but here we're using this result keyword and if we sell that and here you can see it will not gives us the undefined and undefined so why is that but before we getting into this result keyword and all of that stuff I'm going to just return that this result keyword right here inside this method by using this Arrow function right here so if you saved and what the hell is going on a second ago this result keyword was referring to this object right here so why it's not referring to this object one more time well let me just say this if you create a function by using the arrow syntax so that this result keyword will be referring to the window object so this Arrow function don't anyone know what the hell you're talking about like this uh Arrow function don't even know what the hell is this uh this result keyword so that's why this will be referring to this window object and it will search for the birds name and it will also search for this dot last name inside a window object right here so inside a window object we don't have that first name and last name so that's why we are getting the undefined undefined so I'm going to just remove this coding from here let me just remove that and let me just place it right here and now if you save that and here you can see it will give this undefined and undefined right here why is there because in this case that this result keyword will be referring to the window object just like that like window come on not like that but window dot prints uh first name and when do the last name but we didn't declare these functions on Windows we have these uh properties inside this object so that's why we are getting that uh what do we call it the undefined right here okay so let's just change that to the regular function oh you know I'm gonna just leave it right here because you already have this reference right right here so that was that this result keyword in a nutshell so the JavaScript disk keyword will be referring to the object it belongs to and it has different values depending on the where you use it so if you use it inside a method so it will be referring to the owner of the object if you use it alone it will refer to the global object or the window object and if you use it inside a function this will instead refer to the global object and we also saw about the error function as well so here you can see if we use that inside some sort of a method this will refer to the object if you use it alone it will refer to the window object if you use a read function this will refer to the window object so that was just about this Reserve keyword in JavaScript and now it's time for you to perform a challenge I'm going to give you a challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch the solution and then I'm going to give you my solution I'm going to remove every single thing which I have right here and I'm going to just place these instructions right here so the first thing I want you to do is that I want you to create a person object and store your name and Edge and inside this object I want you to create a method with the name of grid regular and I want you to create this method by using the regular function and inside this function I want you to just print this result right here underneath that function or underneath their method to be precise I want you to create one more method the name will be grid arrow and I want you to create this function by using the arrow syntax and still print this result right here so give your best shot if you can do it that's completely okay then watch the solution now I'm going to give you my solution so what I'm going to do is that I'm going to just write conspiration and I'm going to just store my own name or you know instead of writing a name I'm going to just write like username there we go and I'm going to just store my name over Zen right here and the edge will be 19 come on 19 there we go I'm going to create a greed um Regular method right here by using a regular function okay so I'm going to just remove these parameters because I don't need that and I'm going to cheat a little bit I'm gonna copy this code right here and I'm gonna just place it right here and now I'm going to duplicate this line of code and I'm going to point my comma in there and I'm going to use my arrow syntax okay so I'm going to just use my air come on oh my goodness error syntax and instead of writing a grid regular I'm going to change that to grid Arrow there we go so now if you sell our file and now let me just call this function or this method to be precise inside this person dot person dot uh what do we call it greed regular I'm going to call that and now let me just save there and here you can see it will not use like hello my name is undefined what the hell in this case we do use this regular method so why it's giving us undefined and I am 19 okay that's because I cheated and I shouldn't have to cheat I'm gonna copy that let me just place it right here and let me just place it right here I'm Gonna Save that let me go back I'm going to send my file and here you can see it will not use like hello my name is Hussein and and I'm 19 years old now I am going to duplicate this line of code and I am going to replace this grid regular with this grid arrow and now let me just save there and here you can see it will not be just like hello my name is undefined and I'm undefined 0 and now you know why it's giving us this result right here that's because here we're using this Arrow function inside as a method of this person object and here we are using this regular object called amilac here we are using this uh regular syntax or by creating this method inside this person object okay so then was it about this result keyword in JavaScript so enough about this result keyword and now let's learn about the factory function in JavaScript so what in the world is a factory function and why you should care about that so a factory function is a type of function that is used to create and return objects from a function it's a design pattern that provides an alternative way to create object compared to using a Constructor and the new keyword so we didn't learn about a Constructor function in the new Wizard keyword just here we are going to be learning about that very surely but now let's just learn about a factory function a factory function is nothing more but it is just going to be a function which will just return an object okay so if you just return some sort of object from your function so this function is known as a factory function okay so I want you to just keep that in mind so before we begin to create our Factory function first of all we have to learn about why you should care about creating a factory function rather than just creating a simple objects okay so first of all let me just give you example of that and then you'll get to know what I'm talking about so I want you to imagine for a second like we are creating some sort of like database and inside their database we are going to be creating different kind of users so like I'm going to just create um I don't know a user and this user will have a first name and the first name will be Hussein and then you'll have our last name and we are going to be storing the web dev then we have a full name and we are going to be creating some sort of a method for that let me just remove these perimeters and I want you to just notice like how much time will it take for us to write all of that code I'm going to just write hello my name is um we already learned about this result keyword so you already know what but it gives us the result and this start loss name right here and outside from there I'm going to just write an I uh love JavaScript or something like that okay so I'm gonna just save this file so I'm gonna go back so you can see everything a bit better here you can see we just create a one object right here so we have this user object really stacking two parameters I mean like uh it has two properties and its values and then we have this method just a simple method inside this object so I want you to imagine like let's suppose we are creating some sort of a database and inside their database we want to store like 1 000 um or whatever we call it users how can you go about doing that you are going to be repeating yourself like a thousand times let's suppose I'm gonna just duplicate there first of all we are gonna have to change that from Jose to am Alex I'm going to change that to Alex then you'll have to update the first name of Alex then we have to update the last name of like mid or something like that and everything is fine uh and here you can see we are first of all repeating ourselves we don't have to write this score like a thousand times and we would have to change all of their values again and again okay so that would be so so instead of writing all of that code the JavaScript introduced this new design pattern called the factory function and Factory function is nothing more but it is just a function it returns a simple object okay so once you return some sort of object from a function that function is known as a factory function so in this case so I'm going to just recreate their same example I'm going to just give a name of like queer person or something like that and this will take a parameter of Earth's name and it will also take the parameter of launch name and pl for programming language there we go so I'm going to just return this object from this function so now this function is known as effective function in JavaScript so now in this case I am going to just provide my first name right here and in this case the value of this first name um property will be equal to this perimeter value right here so I'm going to just pass it and then you'll get to know what I'm talking about and now I'm going to just write last name and I am going to just provide last name one more time and then I'm going to just write a PL for programming language and I'm going to just pass this PL right in here so we are providing this as a property so this is going to be the property which you are providing to this object right here and the value will be whichever thing the user provides so the user will provide like their name I don't know like Alex or Hussein or Jordan or anything like that they will provide their first name as a first parameter to this function they will provide the last value I mean like the last name value here and we are going to be passing that value we are going to be grabbing that from there and we are going to be placing it right here so this is how everything work first of all we are providing some sort of a property we are setting the value of their property to the perimeter of this function right here okay so now let me just Square um object or method to be precise right here and it will say I don't know maybe I'm not going to reporting any names but I'm going to just give a name of like full name right in here okay so now let me just log to the console hello my name is and then this start first name I'm gonna also render this start last name go back and I'm gonna also write like and I love and some sort of a programming language for my um what do we call it this dot PL there we go so this is how we are going to be creating our first factory function right here so now we have to provide different kind of values to this Factory function right here so let's suppose we are going to be creating our first user and I'm going to just write like cons I'm going to give a name of like John and it will be now request to create person right here and I'm going to just pour the first value so this value whatever I'm providing right here will go to this first name right here then I'm going to just for the comma then I'm going to pour a new value and it will come to this launch name then I'm going to provide the third value and that value will come to this PL right here from here it will take the value of that perimeter and it will print it right here it has the first property of this function right here okay so I'm going to just write a little bit of code like I'm going to current name of like John this is going to be the first name and the last name will be do or something like that I'm going to just write a dough right here and I'm going to provide this comma and here like I don't know he would like a Python programming language and now let's just log to the console this John and now if you sell a file and here you can see it will now give us this John object right here and the first name will be John the last name will be do the pl for programming language he would like like Python and the full name will be this method right here so if you want to call this method on this uh John object right here so I'm going to just write dot full name and I'm going to execute this method right here several file and here you can see it is now giving us hello my name is John Doe and I love Python programming language and if you're wondering about this undefined this because we are already providing this console log right here and we are also wrapping this code inside a console log so that's why we are getting this undefined so if I just remove this console log and if I send my file and here you can see that undefined is totally gone anyway so that was just a side topic right here and now let's suppose if you want to create a new object so I'm going to just write cons my own self and I'm going to just write create person and I'm gonna point my first name and I'm gonna also provide my last name right here and I love I love golden programming there come on in lowercase gold and there we go and now if you just oh yeah I'm gonna come in this line now and let me just lock the console myself and here you can see it will not give us the first name of Jose and the last name of web dev and the python not the python but the programming language I like this calling right here and now if he execute um their full name and actually I have to write a full name it should be the intro because we are specifying the Android it's not a and we are not logging to the console the full name I'm going to change that to intro I'm going to also change the drawing tray as well so now let's just sell that and hello my name is Jose and I love golang programming language right here right here so yeah this is how we are going to be creating a factory function in JavaScript so it's nothing but we are just returning this object from this function right here then we are specifying different kind of perimeters through these functions and it is taking that perimeter the user reports some sort of a value to that parameter it will take the value from that user and it will take in it will grab it right here for the first name and then it will take the launch name value and it will place it right here then it will take this PL it will place it right here so this is how everything is going on behind the scene and now we already learned about enhanced object literal so which means like we can remove these properties from this object right here we can totally do that and now if you sell a file and here you can see everything is working just fine right here okay so that was just a little bit of if you wanted to provide I mean like this code is much readable than this one you're like I don't know it's just only on you if you want to write code like this or like this it's only on you so I am going to just save this file and that was the number of factory function in JavaScript now I'm going to give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch a solution I'm going to remove all of that stuff from here and I'm gonna just place this instruction right here so the first thing I want you to do is that I want you to create a factory function that generates different types of vehicles and each vehicle's object have um the properties like Thai brand model and year and you can specify whichever kind of type you like whichever kind of brand model and year you like okay so give your best shot if you can do this completely okay then watch the solution and here is my solution so I'm going to just create a function I'm going to just give my name of like create create V account and it will take the perimeter of time brain model and also the year and I'm going to just return this time I'm going to use a shorthand of writing enhanced object literal and I'm going to put a brand the model and the year as well okay so this is our Factory function and now let me just create uh I don't know two cars or something like that like two vehicles so vehicle one and it will be equals to create vehicle method which we created above not a method but function and I'm going to provide the first name of car like the type of car and the name will be Toyota and I'm gonna also provide the model of a Camry or whatever then I'm going to provide the year of 2020. there we go now let me just lock the console this is a vehicle one right here so now if I go back and sell my file and here you can certain log user start card with the brand the model the time and the year now let me create one more so I'm going to just duplicate it then change it to two and I'm going to just provide like motorcycle or something like that I guess this is how you spend motorcycle and then we have Honda and I don't even know I'm going to just specify some sort of um property I don't know I don't even know about motorcycle damage so that's a I'm going to part the year of 2019 and uh oh you know I'm gonna just for the year of 2024 and I'm going to look at the console this vehicle too and now let's just sell there and here you can see it will just still gives us all of their properties and its values right here so yeah that was it about a factory function in JavaScript so that was that about a factory function and now let's learn about what in the world is a Constructor function and why you should care about that so Constructor function in JavaScript are regular function used with a new result keyword to create an initialize object with the share properties and methods so basically the Constructor methods or Constructor function to be precise uh they egg is a blueprint for creating multiple instances of object with the same structure and behavior okay so this is what uh what we call a Constructor function allows us to do so it allows us to create a blueprints for query reading different kind of objects okay so that was just a basic theory about Constructor function and now let me just give you an example of that and then you'll get to know what I'm talking about so what I'm going to do is that I'm going to just create a regular function right here so whenever you're creating a Constructor function so it is convenient like this is a convention you don't have to do that if you don't want it to but it is the convention like whenever you're creating a Constructor function the first letter will be uppercase and the rest of them will be lowercase right here and here you can see we are like getting this order completely Constructor so if you just write like I don't know you create a pupil or something like that so this is how we are going to be creating a Constructor function and now I am going to just provide FPU like properties I'm going to just put like first name and I'm going to provide a lost name and I'm going to also provide this PL for programming language right in here so as I said in the definition right here like it will allows us to create a blueprint for the objects so in this case what we are doing is that we are providing uh these properties right here so in this case we are going to be using this result keyword to point to this first name and last name so what I'm going to do is that I'm going to just write this result keyword and I'm going to just write the first name right here and I'm going to also just write like the first name right here so now you might be thinking like wait a second Jose you use the this result keyword and you are pointing to this first name right here and now you might be saying like this is a function and we are calling this result keyword inside this function so it will gives us a window right here you are totally 100 and thousand percent totally correct but we are going to be using something called the new Wizard keyword in a second so it allows us to change all of that stuff but first of all let me just write a code then you will get to know what I'm talking about so then I'm going to just use this dot last name and it will have been equals to this last name right here and I'm going to just use like this dot PL for programming language and I'm going to just write like PL right here so what I'm going to do is that I'm going to just create an instance of this function right here okay so I'm going to just write like const John and he will be now equals to first of all we are going to be writing a bit weird sent not a weird but we are going to be writing something new and you guessed it we are going to be writing this new right here okay so we are going to be writing the new result keyword and then we are going to be writing the Constructor name so in this case our Constructor name is Korean people there we go and now we are going to be recording different kind of release straight like John and I am going to provide down and I'm going to also part the I don't know hero like Google link and now let me just lock the console this John and now if you sell there and here you can see it will not use their Constructor method and what are you seeing is that it is talking as the first name of John the last name of doe the pl of calling right here so what in the word is going on we are using the this result keyword inside a function and it is now equal to these parameters so what's going on so now I'm going to have to say that all of there magic is possible because of this new result keyword right here so what is this new Wizard keyword this new result keyword will first of all create an empty object okay just an empty object so if you create some sort of function by using this new result keyword so it will first of all create a new object word here then it will search that this result keyword and it will point to that object like this newly created object right here and we can also omit the what we call the return statement right here here we are not writing any returns Tyrant and anything like that so that's why this new result keyword will allows us to do all of their magic right here behind the scene all of their stuff can be done by this new Wizard keyword so I want you to always keep that in mind so whenever we are creating a Constructor function we are going to be writing this new research keyword first of all and this new result keyword will first of all create an empty object behind the scene then it will search or it will points to this result keyword to that of the required here if you are writing this code just like that we are going to be writing some sort of a method amulet object and then we're going to be using this reserved keyword and some sort of a first name and last name object right here okay so this is what's going on behind the scene and we can also omit the return sermon as well okay so this is what this I mean like this wizard keyword allows the studio so I'm going to just place it right here and there's snap so now if you save there and here you can see we are getting the spirit's name of John the last name of doe and pl04 programming language of go language here okay so I'm going to just create one more person I'm gonna just write like Zen In this case and new and create pupil right here come on and I'm going to just pour a little bit of new video trade like I don't know but then and web dev and my favorite programming language is calling but John took there from me I'm gonna just change that to your JavaScript for the John come on ciao calm the hell man JavaScript and I'm going to also change that to you go like there we go now this chord is looking better I'm gonna go back and now let me just sell there duplicate this line of code and I'm gonna just pour the Hussein so here you can see it will now give this first name of Jose and the last name of web dev and the programming language is goaling okay so yeah that's cool but we can also provide a methods if you wanted to so let's suppose if you want to write a method of this dot info so if you want to just print something about the user so we are going to be just we are not going to be taking any perimeter I'm going to just lock with the console like hello my name is uh I don't know this star first name I'm gonna also render like this to our last name and I'm going to just write like and I love this dot PL for programming language so I'm going to sell my file go back and this is how all of the code looks like so I'm going to execute this method on this uh John right here so I'm going to just remove both of these to come on what the hell I'm going to just call this method on this Joan person and now if you sell then here you can see it will not use like hello my name is John Doe now I love JavaScript programming language yeah you do nothing right what's in and then I'm gonna write info and send my file and here you can see my name is hosanna Dev and I love Google link programming the language so that was the first example by creating um what we call a Constructor function now let me just give you one more so what I'm going to do is that I'm going to create a function and I'm going to give a name of like book and here you can see I'm using their same convention which a lot of developers are using like the first letter come on what the hell am I doing like the first letter of the Constructor function will be uppercase and the rest of them will be lowercase so it will take like title author and it will also take the year as well okay so I'm going to use like this dot title and it will be equals to title and I'm going to use this dot author and it will be equals to all three and I'm going to also use this third year and it will equals to year okay and what I'm going to do is then I'm going to also create a simple get info method as well so let me describe right here and it will take no perimeter and it will just return like um they start for not first number this is our title and buy the author name so this dot author let's just go back and then finally I'm going to just wrap and the year right here so I'm going to just write this down a year right here I'm going to save this file and now I'm going to create first book like cons book one and I'm going to just provide a new result keyword and I'm going to just execute my Constructor function right here and I'm going to just forward like I don't know the turtle art of not giving a I can't pronounce this word but I want you to at least give it a try to this book right here which I'm suggesting like it will totally change your life I cannot promise but I can probably guarantee like this function will change your life I mean not function but this book will change your life so this book is written by Mark Manson Mark somewhere that's right Mark so this is that you can either listen to the audiobook if you want to or you can just read through the book but I want to just at least give it a try for this book The subtle art of not giving a f and it is written by Mark Manson and I don't even know when this book was written so I'm gonna just write like 2000 and I don't know I read that in 2020 so I'm gonna just log there to the console so if you if you're looking for a good book to either read or to listen to so this is going to be my totally 125 percent guarantee like this book will change your life I'm gonna send my file and here you can see we are now getting the first book now often will be Mark Manson and the title will be the serial art okay so so now let me just create one more instance of this I'm going to just use cons book and it will be enabled to new book and I'm going to just provide like I don't know Atomic habits and I I guess it was written by James Lear or something like that I'm not sure about that but this book is also the best book in my category so I read that in 2022 and now let me just talk with the console this um book right here this book two and here you can see we are now getting this Atomic Habits by James clear I'm not totally sure about uh the author but the book was totally awesome so that's why I put it inside this course so I'm going to call this method right now so I'm going to use like get info what the hell am I doing book one dot get info and now let me just execute there let me just save that and it's not working I guess we have to okay there we go I'm gonna have to write conscious or book res one and now we have a log there to the console um book res one there we go in 957 and here you can certain logos like the subtle art the book name and now we are going to be just writing Ponce boob um book wrist two and book two book two and get info and now let me just log to the console book dude there we go book a restaurant oh Chris too I guess I'll be fine so I'm Gonna Save that and it will not use that same result right here okay so that was it about a Constructor function in JavaScript and now I'm going to give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch your solution so I'm going to remove every single thing right here and I'm going to just paste this instruction right here so the first thing I want you to do is that I want you to create a person Constructor which has a perimeter of name Edge and gender now access parameter will use to the call object and create a method name info which will just print the info and then create a few instances of that what do you call it their prints and Constructor and access each property so give your best shot if you can do this completely okay and watch the solution and here I'm going to give my solution okay so whenever we are creating a Constructor function so it is convenient to Port the first letter or to make the first layer uppercase I'm going to give a name apply person and what the hell just happened I'm going to change that to person it will take the perimeter of name Edge and gender and now we have to just write this dot name and it will be equal to name then we have to write the start H and it will be R equals to H this dot gender will be now equals to gender I'm gonna also create that method so this dot info will be now equals to some sort of a function it will take no perimeter or nothing like that and we are going to be just logging to the console the name and this dot name and I'm going to also write I don't know Edge or something like that and now let me just write um this dot Edge or something here I guess I'll be fine but I'm gonna have to pour my dollar sign in there and then we have to render or gender as well okay so we have provided this dot gender that's what's up so I'm going to have to save this file and now let me just create a few instances so creating um oh come on oh my goodness object instances there we go okay so I'm going to just write conspiration or one and you know I'm gonna remove that and it will remain equals to new person and here I'm going to provide a John and I'm going to write like 20 or something like that and he will be a male transfers person two and e or she will be equal to or you know I'm going to just pour the same and 25 year old and I'm going same or uh Jenny or something like that or Genie however you want to pronounce that she will be female and now let's just look to the console person one dot name and save our file and here we are not getting anything I don't know why um okay here I wrote a person so I'm gonna have to write person one we are getting a John person two you're getting a Janet right here okay so yeah that's that and we can also execute that method on them so I'm going to remove that person one dot info and here you can see we are getting the name of John the general will be 22. I mean it will be 22 the gender will be male and now let's just call it on the person too and don't come on person two dot info what the hell I can't even type today so the difference name will be changing the edge will be 25 and the general will be male I'm going to give one more optional challenge so if you want to do it so that would be cool if you don't want to do it that's totally completely okay you can fast forward the video if you want to but I still wanted to give you one more challenge because this will make you a better developer so I'm going to remove every single thing from here and this one will be a bit long one but a bit precise so in this exercise you will create a Constructor function called car that will represent a card with a specific properties such as Mac model year Additionally you will Define two methods start and stop to simulate starting and stopping the car okay so first of all I want you to Define you know I want you to just read through this instruction right here and I don't have any stamina to like um read all of that through so I want you to just pause the video and read that through or you can get the same instruction from my code exercise files and yeah give it your best shot if you can do it as completely okay then watch the solution and here is my solution I'm gonna go in first of all and I'm going to just create a funk function the name will be car and it will take the Mac the model and year also the color and now I'm gonna use that distort make and it will be now equals to make this start model will be now equals to model and this chart here will be now equals to here and this start color will be also equals to color right here okay so this is how we are going to be creating over uh what do you call a Constructor function and I'm going to just write this start start start as a first method and it will take no perimeter or anything like that and we are going to be just returning like starting on starting the this start um Mac um this dark model okay so we are going to be specifying that and now let me just duplicate that one more time and here instead of writing a start we are going to be writing a stop there we go and now let's just write like stopping they start making the star model go back so this is the first score and now let's just square a few instances of this Constructor so I'm going to just write const car one and it will be equal to a new car and here we're going to be specifying first of all Toyota and then we are going to be also specifying memory I don't even know how to spin pronounce that word 2022 and the color will be silverware now let's just lock the console this card one save our file and here you can see we have all of these properties and all of their method right here now I'm going to just call that method on him so I'm going to use start and now let's just start boom boom and here you can see we are now getting starting the Toyota and now if we just use the Stop and here you can see we are stopping the Toyota right here now let me just create a final instance and that's going to be it about the Constructor function or Constructors in JavaScript okay so Honda CRV and 2020 come on 2019 or yeah antenna will be fine and the color will be blue and I'm going to just comment this line out and log there to the console card to cartoon and we are going to be using this uh what do you call it let's just log that to the console and here you can see we are now getting the color the mag the model and all of these stuff okay so I'm going to just write info not in what the hell am I doing start there we go so if you save our files so starting the Honda CRV and now let's just stop that so we are going to be using a stop method and stopping the Honda CRV all right so that was it about a Constructor functions in JavaScript all right so that was it about a Constructor functions in JavaScript and now let's learn a little bit more about Constructor functions in JavaScript so which is called a built-in Constructor in JavaScript so built-in Constructor also known as a native Constructor or the standard Constructor provided by JavaScript that allow you to create an object of various data types so these Constructors are available globally and do not need to be explicitly defined do not need to be explicitly defined and they provide a convenient way to create an instances of a primitive data times and built-in objects okay so that was just a basic definition of what a what do you call it a Constructor I mean like built-in Constructor Zone and trust me they aren't that horrible as they are defined in their instructions so let's suppose if you want to create a number so you're probably aware of how we are going to be creating a number in JavaScript like 10 20 or all of that so we also have a built-in Constructor method for that you can also use this new result keyword and we can use a number right here and here we can specify whichever kind of number we want okay so we can log there to the console by using num1 and cell file and here you can see it will not give us this Constructor function inside this Constructor function we have this parameter value often right here okay we are going to be learning about this prototype a bit later maybe in the next not next but maybe just in a second so this is a built-in Constructor for creating a numbers in JavaScript so we are not going to be writing code like this error but I'm just still showing you how we are going to be creating Constructor functions or built-in Constructor we have inside our JavaScript so we can also check the type if you want to so we can use like type off and save then it will now use the object right here and if if you just write like constant num2 and we just draw like 10 inside there and we just write num2 it will give us number right here so these aren't a regular number and these are a built-in uh what do you call it built-in Constructor functions in JavaScript so that's why we are getting the uh type of number okay so I'm going to just remove there so that's how we are going to be creating a number by using a JavaScript built-in Constructor and now let's just uh create a string so I'm going to just write conster one and it will be equals to new Wizard keyword and we are going to be just writing upper class string okay so in this case you can write a string like that you cannot write string a lowercase you have provided in uppercase because currently we are working with a built-in string Constructor so that's why you have provided them so we can pour any value you want so I'm going to just put my name okay so now let me just log to the console stir one or come on this should be stir one so if you sell there and here you can see it is now giving us all of their values as a key I mean like the keys will be from 0 through 10 and the values will be all of that each letter which we specified right here inside this Constructor right here okay so this is how we are going to be creating a string or that's a built-in string Constructor in JavaScript and now let's just learn about how we are going to be creating a Boolean so we also have a Boolean so I'm going to just write boot one new and we are going to be just writing a Boolean and I'm going to just write a false let's just log that to the console like boom one and now if it's out there and here you can see it will gives us their Boolean with the Primitive value of false right here we can also create I guess like arrays we can create even a functions but we're not going to be going into all of that because we are I guess never going to be using a built-in Constructor in JavaScript but I'm just showing you anyway so if somebody else will like how we are going to be creating some sort of a stuff by using a built-in JavaScript Constructor so this is how we are going to be using as soon as suppose if you just want to create an array by using the built-in array Constructor so we can just write like I don't know or I'm gonna just write like one comma two comma I don't know I'm gonna distort a few things inside there and I'm going to just write her one and now if you sell that and here you can see it is now giving us this area right here and now let's just check the type of this uh so here you can see it will now gives us this object right here so these are a built-in Constructor in JavaScript and I'm not gonna give you any challenge because these are this kind of stuff where which you're not going to be using that much so no challenges for this one so I guess that will be it about a built-in Constructor methods and now let's learn about the object.create method in JavaScript so what is the object.query method so the object dot create method creates a new object using the existing object is the Prototype of a newly created object so what in the world is this prototype we are going to be exploring this prototype in a very great depth in a second but first of all we have to learn about what in the word is this object I'm I'm going to say this definition one more time so the object.create method creates a new object using the existing object is the something of the newly created objects so now let me just write a bit of code then you will get to know what I'm talking about so what I'm going to do is that first of all I'm going to create um it's an object right here inside this person object I'm going to just create this method right here which will take no perimeter or anything like that and I'm going to just lock the console uh I don't know hello my name is and I'm going to just write like this start first name come on let's just go back to the DOT first name and I'm gonna also provide this dot lost name right here so now you might be thinking like we didn't report any first name I lost them to it well we can totally do that but for that first of all when we are creating the instance of that object like const Jose here we are going to be using this object and then we are going to be using this query method on this object right here where it's an object that has the specifier Prototype or that has a null prototype okay so what I'm going to do is that in this case I'm going to just specify my person object right here okay so I'm going to just lock the console there person object and all of that kind of stuff but first of all let me just provide these properties and various to it so I'm going to just use like present our first name and it will be now equals to my name of like Hussein and then I'm I'm going to use like Hussein Dot last name and it will be now equals to web dev right here and now I'm going to use this grid method on him so I'm going to use this grid and now let me just execute that if I send my file and here you can see we are now getting like hello my name is Jose webdev right here inside of console okay so what we are currently doing is that we are creating this object what we call it this object like the instance of this object using the existing object as the Prototype of a newly created object which we have specified right here okay so if that sounds confusing don't be okay so we are going to be learning about the prototypes in a very great depth but I want you to just be patient for a second so I'm going to just use like cons John and we can also rewrite this chord by using this method as well okay so we are going to be still using this object dot create method let me just create uh I mean like let me display the square method right here first of all we are going to be providing the existing object then we can provide these curly braces and we can pour a different kind of Prelude straight so now if you want to provide a value here we have to first of all write this our curly braces and inside these curly braces we have to explicitly tell them like we are going to be reporting some sort of a video and the value will be John okay so now I'm gonna have the product comma and I'm going to just write the last name we have to explicitly tell them one more time and we are going to be destroying the John Doe right here so the first name will be John and the last name will be done and now if you look with the console this John and Sarah file and here you can see it will still gives us that same object right here and now if you use that method on him so if I just write like John dot grid methods so now what do you think will be the result so here you can see we didn't specify any method like uh grid right here but we are currently using this method on this John right here so I'm going to just send my file and here you can see it will still gives us like hello my name is John Doe right here so this is how we are going to be working with this object.create method and we are going to be diving into the object.create method once we jump into the prototypical inheritance in this course so no challenges for this one as well so now let's learn about a prototype model in JavaScript so what is a prototype model and why you should care about that so in JavaScript object has Anonymous property card prototype which I'm going to show you in a second and remember functions and arrays are also an object okay so we already saw the type of both of these functions and arrays and both of them was an object okay so the Prototype will be the parent of that object and prototype property is the object by itself which have some special properties and methods so there was a lot of theory right here behind the scene but first of all let me just create some sort of an object and then you'll get to know what I'm talking about so if I just write const obj and now let me just log to the console this obj right here so if you sell our file and here if we expand this empty object right here so what are we currently seeing we are now seeing this prototype right here so what is this prototype this prototype is my itself an object and also the parent to put it in simple words you can think about a prototype is the parent of this object right here so what's going on behind the scenes this is what's going on behind the scenes so I'm going to just place this right here so in JavaScript every object is associated with another object for example the object a is associated with this prototype right here in this case I'm going to just replace that with uh obj right here so this obj is associated with this prototypoid here which you saw a second ago which means this a or I shouldn't have to write this a I'm going to change that to obj which means the obj object will inherit all the properties of this object dot prototype or you can also set this prototype right here so I know that sounds a bit confusing but let me just say that one more time in JavaScript anytime we create an object two things happen or two object is created the first object is this object right here and the second object is this object right here okay so it is hidden or it is not hidden to be precise like it is just underneath inside this object right here so anytime we create an object by using a JavaScript so two things will happen first of all we are going to be creating this object and this object will be created by yourself by a JavaScript and this object has a lot of properties and methods that can inherit from this object word here so I'm going to just expand there and here you can see we have a lot of different kind of properties and methods right here so we have Constructor has own property is prototype off and we have a lot of them right here which we don't have to worry about it right now okay so now this object is also inherited by other object which is called this dash dash Proto right here so I'm going to just expand that and now if I click on this object and now this object what do you think this object will be inherit from and now if you click on him one more time it will now gives us null right here so now let me just say this Theory one more time then you'll get to know what I'm talking about let me just refresh that right here so anytime we create object in JavaScript but like it doesn't matter if we just create an object or a function or array or anything like that like the type of is objects so that object will be inherited I mean like two object will be created for us the first of object will be this one the value which we are specifying to over variable right here and underneath this object we will also have this prototype object as well okay and this prototype is the parent of this object right here which we are creating and this will be created for us totally by default okay so if we expand there this prototype object is created by this Proto right here so if you expand this one and now if we expand this last one and now if you check out the Proto property of that and now let me just check then here you can see it will now gives us no so first of all what's happening behind the scene is there first of all we have like no object nothing and once we create an object it will first of all create this object and now inside this object this object will be created right here and now outside from this object or own method or own object will be created so I know that sounds confusing but I want you to do not get confused by that it is like totally simple thing let me just say that one more time every JavaScript object has Anonymous property card prototype and remember that functions and arrays are also a prototype I mean like objects and the Prototype will be the parent of that object so in this case what is the Prototype of this object or the parent of this object the pen or the Prototype of this object is this prototype right here so now let me just read through the other stuff so every object is associated with another object so like this object which we are currently creating right here is associated with this prototype object right here and now this prototype object is also associated with this Proto right here if we expand that here you can see this is also an object if you click on him let me just expand there and this one is not associated by anything right here like this is going to be the guard level or the parent of all of the objects right here okay so that was just a basic theory behind the prototypes and now let me just explore that a bit more so now if you want to check the Prototype or the parent of this object so we can either expand there and we can check out the Prototype or the pattern just like that but if you want to do it in coding so there are three ways to do that so we can either check the Prototype of something in three ways like we can either check it by using this Proto or we can use the start Constructor dot prototype or we can use this property own method to be resized like object.gear prototype off and it will take some sort of an object right here so now let's just check there by using this prototype right here so all of them is like totally the same like this one will be the same this one will be the same and all of them will be the same and all of them allows us to check the Prototype of our objects so in this case I'm going to use this prototype right here so I'm gonna just write it down and then double underscores and I'm going to just use Proto and then double underscores one more time so now if you sell there and here you can see it will not use that Constructor method which we saw a second ago so now let me just log to the console um this will be J One More Time same way file and here you can see we have these Constructor properties and now if I expand this prototype right here I'm going to just highlight that for you so now if I expand this prototype right here it will also include all of these prototypes right here so now let me just expand that and here you can see we have all of these properties and methods right here inside this pattern or the Prototype right here and now if you check them out and here you can see both of them are totally the same so we have this Constructor has on property and we have this Constructor has own property and all of that kind of stuff okay so now if you wanted to check the Prototype of this prototype right here like the parent of the parent so we can use this method one more time if you wanted to so I'm going just write down and then Proto one more time so now if I sell my file and here you can see it gives us null as I showed you a second ago so the Prototype of the parent of the Prototype if you want to check there it will give the snow so I don't want you to get confused but these stuff are important that's why I want to put it in this course and you have to know that okay so now let me just check the Prototype of something by using this Con Constructor method uh in Prototype so I'm going to just remove this according from here and I'm going to just use Constructor let's see when spructor and then prototype so I'm going to just send my file and here you can see it will still give us that same value right here exactly the same and now let's just check him out by using the uh whatever you call it object dot get prototype off okay so in this case it is requiring an object so in this case I'm going to copy my object and I'm going to just place it right here send my file and here you can see it will gives us the result just like the previous one right here so the Prototype is nothing much but it is just a parent of or object so I want you to keep that in mind and it will be hidden underneath or object right here okay so that was the first example so now let me just give you one more example and then you will get to know what I'm talking about so let's suppose we are going to be creating some sort of array so I'm going to just write const array and now in this case I'm going to use my built-in array Constructor right here and now I'm going to just lock the console this area one more time in knife is out there and here you can see we are now getting this array right here if we expand that we have this prototype or the parent of this uh Constructor I mean like or the parent of this object right here if I expand that it has different kind of methods and properties right here like we have ADD and connect Constructor we have fill every filter fine and all of that stuff which we already covered in I mean like we didn't cover all of them but we did Cover like the majority of them like um what do you call it every and entries and fine method we have for each includes we have map push and all of their kind of methods right here and here you can see we also have this prototype object one more time so if I expand there let me just expand there and now it will give us that Constructor and all of that kind of stuff and now if I expand that E1 more so here you can see we have this array of zero and now if you expand there it will still give us that one array so here you can see this rapid hole will go on and on okay so I I don't want you to get in that much detail but here you can see we have this Constructor and it will just work for all of their different kind of methods and finally we are now getting this null right here okay so yeah these or what do we call these properties I mean like these prototypes are the parent or poor objects and now what I'm going to do is that I'm going to just create my own Constructor function and then we are going to be checking the Prototype of that so I am going to just write function and I'm going to just give a name applied person it will take the perimeter of first name and I'm going to also provide the Lost name and I'm going to also provide a PL for programming language and I'm going to just use this our first name and reference equals to first name the star launch name uh will be equals to launch name this dot PL will be a equals to PL and that's there and now let me just create an instance real quick so I'm going to just use new person and I'm going to just provide a hosam property and I'm going to also provide a web dev property and I'm going to also provide like JS for JavaScript now let me just log there to the console same way file and here you can see we have our built-in Constructor function right here if we expand that so we have this prototype right here or the Prototype object to be precise if we expand this one so here you can see we have yet another Constructor function which is stacking these values right here like we have this method and we are providing the first name the launch name and the programming languages right here so if we expand this uh prototype right here so finally it will give us uh where is that I'm going to expand that finally it will give us that no oh my God there's a lot of appearance right here then it will give this null right here and there we go so this is how we are going to be creating our Constructor function and this is how we are going to be checking the Prototype and now you might be asking yourself is there like why in the world should I care about prototype or the parents well you have to because you are going to be creating a built-in Properties or methods on your prototypes which I'm gonna also show you in a second but now in this case now let me just check the Prototype of that so I'm going to just use Dot and then photo or done.pro some people call it Dunder and some people call it like underscore whatever you want to call it so if you sell there it will give us this Constructor function now if I use this Dunder Pro right here semify and it will give us the final Constructor now let me just use it and here it will give this the null right here inside our console okay so this is how we are going to be checking the Prototype of our property and now let me just comment this line now and now it's time for us to change the built-in methods uh prototypes so this part will be a little bit on one so I'm going to just write a separator for myself and I'm going to just write like uh changing the build in a method but you shouldn't have come on there we go but you shouldn't have to write code like that once you're working with a real world project if you want to just you know that's completely okay but if you are working with a huge project so you shouldn't mess with the built-in object so I'm gonna just say that like that was just a caution like you shouldn't have to mess with the built-in uh prototype so I'm going to just write like array dot prototype first of all and now if you check it out and here you can see it will not use all of these methods right here like we have aired and we have fine we have pump method now let's suppose if you want to change the functionality of this pop method to something else like it will just remove the loss item from our array so now if you want to change that to something else so how can you go about doing that by using this a radar prototype so we can totally do the in general script that's only allowed but you shouldn't do that in the real world projects and I'm going to just write um array.protype in this case and now in this case we have all of these properties and methods right here so in this case I'm just interested in this pop method and I want to change that to something else like I want to create my own method and I'm not going to be providing any names to it and I'm going to also remove that stuff from here and I'm going to just use like return and the functionality I'm going to just change that to like pop it up baby pop it up baby that's something like that and now if you use this pop method so now in this case it will not remove the Lost item from the array but it will just give us like Pump It Up Baby and now let me just create some sort of array like my R and Equipment equals to like I don't know one and two and three or something like that sell or file and now if you use this pop method on our race if I just write like answer the log my array and then pop method okay so if I execute that and save my file and here you can see instead of removing the last item from or array it is giving us pop it up baby and now if you lock the console um come on let me just lock the constant my ER server file and here you can see it is now giving us uh all of their stuff like nothing is removed but if I log I mean like if I comment this line out and if I sell my file and here you can see see that the launch item will be removed from my array so this is how we are going to be modifying or changing the existing build tin methods from the JavaScript like built in everything okay so I'm going to comment this line out as well so you can like play around with all of that stuff if you want to but I will highly recommend you to like play around with there but not in a real world projects okay so now we can also Define our own methods on their prototype if you wanted to so let's suppose if you want to provide our own method on this string so we can also do that I'm going to describe string.protype and I'm going to just specify like hello method right here now let me just create some sort of a Hello method and in this case I'm going to just log to the console this I want to check like what in the world is this we're going to uh I'm going to just lock the console and this dot two upper case and now I'm gonna just uppercase whatever the user provided or yeah whatever the user points I'm going to just write like answer a log of hello or you know I'm going to just write everything in the lower case like Hello uh hello and welcome or something like that and now I'm going to use this method which I create right here inside my string so I'm going to just use this method and I'm going to just use Dart hello and now I'm going to execute that if I sell my file and here you can see I want you to notice like everything is totally lowercase and now here you can see everything is not only at uppercase why is that because we are providing this hello method right here and it will allows us to uppercase all of the stuff and here you can see that this result keyword will be now equal to this built-in Constructor method and you already know why is that we are currently working with the Prototype and the Prototype is an object so that's why the this result keyword will point to this object right here okay so this is a function yeah that story is a function but this is not a function this is an object here you can see that let me just remove that stock from here I'm going to also remove all of that stuff from here so I'm going to just write const uh error and it could be equals to uh hello and I'm going to just write like um yellow and I'm going to just write like blah or something like that and if you lock with the console this third cell or file and here you can see it is array right here if you expand there and it will give us all of that stuff right here but if you expand this one and here you can see this prototype is now set to object right here which means that that this result keyword well point to this prototype right here so I hope that makes sense so now let me just uh review all of the stuff which we learned in this section and then we are going to be jumping into the prototypical inheritance or a prototype inheritance so every JavaScript object has Anonymous property card prototype and remember functions and arrays are also in objects and the Prototype property the Prototype will be the parent of that object and prototype property is the object by itself and which have some sort of a special properties and methods which you already saw a second ago and every time we create some sort of an object in JavaScript so it will create two objects behind the scenes and every object is associated with another object and the object uh which we saw a second ago is associated with this prototype object and which is itself an object which we saw a second ago which means that that same object which we acquired will inherit or borrow you can use the same word like inherit or borrow all the properties and methods from this object are prototype okay so if you want to check the Prototype so you can either use this syntax or you can use this one or you can use this get prototype off method but it will take some sort of a object here you have to specify the object now then we saw how we are going to be creating um Constructor function then we saw the Prototype or for Constructor function we also somehow we are going to be changing the existing methods on some sort of array or object and then we also provide our own prototype or method on the string Constructor as well okay so that was it about a prototypes in JavaScript so now let's learn about prototypal inheritance in JavaScript so yeah I know there's a lot of words right here but what in the word is prototypal inheritance and why you should care about that so Pro table inheritance is the mechanism in JavaScript that allows objects to inherit the properties and methods from the other objects it is a fundamental Concept in the language and it is based on the prototypal model something which we saw a second ago and we will explore it in this one as well so in prototypal inheritance objects can serve as a prototypes or other objects forming a hierarchical chain of inheritance so in JavaScript every object has an internal property called prototype which we saw a second ago it will often refer to as a dash dash or Dunder Pro time which points to its prototype object we already saw that a second ago when you access a property or method on an object and their property and method is not found on that object itself and so JavaScript will look for it in the object's prototype or further in the Prototype chain as well so if needed until it finds that property or reaches the top of the Prototype chain which is usually the object or prototype okay so I know there's a lot of words but first of all let me just explain this topic like what in the world is prototypical inheritance and then we are going to be jumping into all of their Nitty Gritty like JavaScript will search for some sort of a property if it didn't found so then it will jump to this prototype and all of that kind of stuff so first of all what I'm going to do is that I'm going to explain this prototypical inheritance so now let's discuss what in the world is this prototypal inheritance so inheritance just simply means like borrowing the functionality from the parent object into the child object or you can also select inheriting functionality from the parent to the children without repeating or chord okay so this is what inheritance means and I'm going to also show you all of that stuff in a second first of all what I'm going to do is that I'm going to just create a function and I'm going to just create a Constructor function to be precise so any mole and it will take the parameter of name right here so we are going to be just using this dot name and it will be now equals to your name we are not going to be going into that much craziness and in this case I am going to just provide my animal I'm going to just provide a built-in prototype right here so I'm going to write like sound so it will make some sort of a sound right here so if you just write a function and then we are going to be just using all returning like any mull sound or something like that okay so now we are creating this function or this method on this animal right here which means like all of these animal instances can access this method right here so whenever we call this sound method or any of the instances of this animal so this will happen like animal sound will happen and you can provide like more crazier logic right here but in this case we are going to be sporting this sound I mean like animal sound right here so now let me just square one more so I'm going to just write a function and I'm going to just create a Constructor function for a dog okay so it will take the name and it will also take the breed right here okay so I'm going to destroy like animal the I mean like this start breed uh I guess that would be fine so I'm going to just use like breed and it will be now equals to these breeds right here okay so now we cannot call this sound method on this dog right here why is that because this uh sound method is available only for these animals it is not available for these dogs right here if you want to create this sound method right here for this talk but then we are going to be duplicating that so I'm going to have to copy that we have to change there and we have to destroy this dog and then this method will work for this dog right here currently this code will not work for this talk so now let me just write the instance of this dog so I'm going to just write const dog one and we are going to be just writing like new dog and I don't know buddy and I don't know genius or something like that this is going to be my dog name and if you just look to the console like construct I mean like one dot name and if you sell them it will give us undefined because we didn't specify this start name will be equals to the name send my file and it will now give us this buddy right here so now if I want to access the sound method which you specify inside this animal so it will not work I'm going to lock the console.1 dot sound and now let me just execute this method right here so if it's several file and here you can see it will give us their error but I just hide them because of this I don't know where the hell is this area coming from so that's why I just hide my error anyways so it will now give us this beautiful error it will say like dog one sound is not a function okay which means like you are trying to access some sort of a function which is currently not available on this dog right here okay so if you just lock the first of all let me just create an instance of this animal like const one and it will be equals to like new anymore there we go and I'm gonna just pour a name of like um I don't know frog or something and now let me just console log this animal one and now if we use this sound method right here I'm gonna have to um I'm gonna have to remove these errors from here and I'm going to also comment this line out so what do you think will be the result if we sell our file and here you can see it is now returning this animal sound right here but if we try to access this sound method on this dog so it will not work why is that you already know why is that because this uh sound method is totally available inside this animal prototype don't believe me let me just show you so I'm gonna just remove this sound from here and I'm gonna also cover this line out and I'm going to send my file and here you can see it will now give us this animal right here and if we expand this prototype so what are we getting we are now getting this sound right here here you can see we are now getting the sound okay but if we try to access this one if you just remove that and if you just log to the console this dog won say our file and here if you expand that if we expand the poor time here you can see we don't have any sound method right here okay in this case we do have this sound method right here inside animal and in this case we don't have any sound method inside uh this dog right here so now if you want to take this sound method without copying or call or not just sound but if you want to borrow all of the functionality from this animal to this dog like whenever we call this sound I mean like this dog dot one uh dog one dot sound method and we also want to call this result as well so their process is known as inheritance so we are going to be inheriting the functionality from this animal Constructor function to this dog right here so their process is known as inheritance in JavaScript okay so how can we go about doing that or how can we go about writing that inheritance like taking the functionality from this animal to this dog right here okay so this is totally easy and simple so first of all we have to go to the function where we wanted to inherit the properties from the parent so first of all I'm going to just remove that from here in this case I am going to write my Constructor name first of all then we are going to be using this call method and this call method allows us to call that parent properties in this case we are going to be just specifying that this result keyword and here we have to specify the name we are taking okay so I'm going to just write a name so now if you sell there nothing will happen if you expand that and here you can see we have the breed of genius and I mean like we have all of their properties right here but if we just open that here you can see we are not getting that same method which we are creating right here this sound method so now if you want to get that method so for that we are going to be using the object dot create and do you remember that object that create so which we saw a second ago their object.create method allows us to do the inheritance so I'm going to just write like dog in this case I'm going to have to write the underneath right here so I'm gonna have to write it here I'm gonna just write it down first of all and then I'm going to use the Prototype and in this case it will be now equals to the object dot create method right here and in this case I'm going to just specify my animal don't prototype okay so what in the word is this object that create I'm going to tell you that in a second I'm gonna place these instructions right here so what in the word is this object.create method as I show you at the beginning of this video so the object.query method creates a new object using the existing object is the prototypo of newly created objects so now you totally get the definition of what I was talking to you about earlier so let me just say that one more time so the object.create methods creates a new object using an existing object so in this case uh where in the word is or existing object or existing object is this animal right here and it will create a new object right here as the Prototype of their newly created object so in this case all of their method which we are specifying right here is the prototype to this animal we are currently just specifying this and I mean like we are currently just specifying this sound right here so their sound will be now in this case available inside the doc prototype guys now let me just save my file and now if you check out the dog and now if you go to the Prototype you go to the object and here you can see we are now getting the sound right here okay so this is what this object.create method will do for us okay so now if I run this code like we have this doc one dot sound right here and now if I sell there it will give us sorry uh I shouldn't have to say it gives us that animal sound right here okay so yeah everything is working just fine and now we can specify our own prototypes if you want to on this dog as well so we can just write like Don star prototype and we can specify like bark bark or something like that I'm going to just create a function right here b-a-r-k I guess b-a-rk there we go it will not take any parameters or anything like that and not the name so in this case I'm going to just return like wolf or something like that and now if you sell there and now if you expand that and here you can see we have this bark method right here if we expand this prototype we have the sound method which means like we can use the bark method and also the sound method as well so I'm gonna just lock with the console um dog one dark [Music] b-a-r-k method as well and now let me just say over there it will now give us wolf as well so I hope you totally understand the prototypal inheritance and by the way once we jump into the classes in JavaScript we are not going to be writing or prototypes like that we are going to be just creating a simple clasp and we don't even have to worry about the prototypes but I'm just showing you because interviewers ask about prototypes all the times and you will see a lot of people's they will ask you like if they're a programmer they will ask you about a prototype so that's why I said it or that's why I mentioned it in this course so yeah so this approachable inheritance in JavaScript so that was it about a prototypical inheritance in JavaScript and now let's learn about losses in JavaScript so what are classes and why you should care about them so classes are one of the feature introducing ecmascript 6 and classes are nothing much but a blueprint for an object okay so you can create an object from that class and you can think about the Clauses as a sketch or product Drive of a house it can contains all the details about the floors the doors the windows based on these descriptions you build the houses okay so since many houses can be made from the same description we can create many objects from the same class okay so the syntax will be totally easy and trust me you will fall in love with classes in a second first of all we are going to be writing a class Deca deck coloration first of all we are going to be writing a class declaration so anytime you want to create a class first of all you are going to be writing the class result keyword then you're going to be giving some sort of a name to your class and the convention is to write the first letter as uppercase and the rest of them lower case so in this case I am going to just write person and I'm going to destroy my opening curly brace and closing curly brace and inside this person we are going to be executing our Constructor function okay and inside this Constructor function we are going to be providing all of our properties and our methods so I am going to just write first name and I'm going to also part a last name and I'm going to also provide the edge as well and now this area is known as the instance members area okay so here we are going to be specifying our instance members like this our first name will be now equals to first name digital last name and last name just like a Constructor function here you can see we are even using the Constructor function inside uh this person uh plus right here and then or Edge will be now equals to our Edge so everything will work just fine so we are going to be also using the new Wizard keyword so that's why we are totally able to use our this uh result inside this Constructor right here so you don't have to worry about that for now if you want to provide methods so you can also do that so I'm going to just write print user and enforce something like that and we are going to be just specifying our function it will take no perimeter or anything like that and we are going to be just returning like name of the user and I'm gonna have to go back and this is our first name and this dot last name and we are going to be also writing our ends so I'm going to just write and distort Edge there we go I'm going to save my file and this is how we are going to be creating our class right here so first of all this stuff are known as a class declaration so this is known as a clause declaration inside this declaration we have our instance members right here okay so I'm going to just sell this file and now if you want to create an instance of this person class so for that you are going to be writing first of all some sort of a name for the variable and then you're going to be writing the new result keyword and we already learned about a new result keyword what this is and how we should use that and I'm going to just provide like I don't know I'm going to describe first name right here and we are going to be just specifying the first name of the Zen just like that and then we are going to be also specifying the web there for the launch name and the edge I'm going to just specify 19 right here okay now let me just log with the console this John and now let's just save our file and here you can see it will still gives us that image first name last name and this method right here so if you expand there here you can see we don't have any methods right here because we're in user prototype well we are not going to be using any prototypes in classes Okay so I'm gonna still show you how you're going to be accessing all of their stuff like the Prototype stuff but we are not going to be writing the Prototype wizard keyword no more okay so yeah that's that and now let me just call that method like I don't know print user info or something like that I'm going to sell my file and here you can see it will not use like name will be hosen web dev and Edge will be 19 right here so this is how we are going to be creating a class so now let's just talk about the prototypes in classes so if you want to provide a prototype members to your classes so this is how you're going to be just writing it outside from this Constructor method you are going to be writing your prototype members right here so I'm going to just write some sort of um comments for myself like prototype um members there we go okay so here I'm going to just create a simple method I'm going to give a name apply greed and in this case I'm going to just return like uh hello um hello there um this DOT first name and this don't last name so we are going to be just writing this weird method right here and now if it's several file I'm going to remove this print info right here I'm going to remove that sell my file and here you can see we have this person object if we expand there here you can see we have this print info method right here now you might be thinking like where in the world is this grid method well you guessed it this is a pro type of member so it will be available inside a prototype so I'm gonna just have to expand that right here and here you can see we have this query method right here okay so which means like we can call this grid method for all of the instances of this class right here so if you want to call this grid method on John or on Jose or anything like that so we can totally do that so I'm going to have to just execute this grid several file and here you can see it is giving us hello there Hussein and undefined and let's just see here we specify loss instead of lost name so server file and hello there Zen web developer right here inside a console so this is how we are going to creating a class this is how we are going to be providing instances for our class and this is how we are going to be providing a prototype methods and properties to our clause and now let's just learn about the final topic which will be inheritance in Clauses so how can we borrow the functionality from this Clause into the child class so to do that first of all for that we are going to have to create one more class as well so I'm going to just write a class result keyword and we are going to be writing our same convention like programmer or something like that programmer there we go and in this case if you want to borrow the functionality from this person object we are not going to be using object.create and their animal heart call and all of that kind of stuff instead we are going to be using one result keyword which is called extends and this extends the result keyword will allows us to borrow the functionality from this person object to this programmer right here okay so I'm gonna just have to call this person so we are taking the functionality from this person object or we are inheriting or we are borrowing the functionality from this person object to this programmer right here so in this case we just have provided our Constructor right here and we just have provided our bird's name or last name all of their properties on our Edge we can specify more properties like programming language and experience or something like the EXP e r i e and C there we go and here we have to just write our curly braces but don't forget to write something called a super keyword not it's not a keyword it's a function it's not even a method but it's I guess this is a function or method I'm not sure about that but some people call it a method some people call it a function you can call it whatever you want to call it okay so in this case uh what in the word is this function I mean like this super function in JavaScript so this just cause the parent call cons instructor okay so it will just only call the parent Constructor which we have right here so it will just call this Constructor and here we have to specify all of their properties which this Constructor is tagging so we have to specify this first name the last name and also the edge as well okay so I'm going to you know I'm gonna you know I'm not gonna copy that because I'm going to show you every single thing from the beginning so I'm going to just write first name the last name and also the edge as well okay so that's what you have to do and this amount of code will allow you to inherit or to borrow all of the functionality from this person object to this programmer right here okay so I'm going to just write this star PL or programming language and I'm going to just power this PL and this PL is not available inside this person let me just check that here you can see this PL is not available inside this function but it is available inside this Constructor of programmer right here so here you can see we are now porting there and you can provide a countless of them if you want to you but in my guess I guess that would be fine and then we have experience and it will be equals to experience come the helm on man I'm gonna copy that I'm gonna just place it right here and that's that so now if you want to create an instance of this programmer so we can totally do that I'm going to just remove that from here and I'm going to just provide the instance of Jose and I'm going to just write a new reserved keyword and in this case we are going to be using the programmer and now let me just uh write like John and I'm going to just write it uh not John I'm writing my own name what the hell and in this case I am going to write Hussein web Dem and now I'm going to provide the edge of like 19 the favorite programming language will be going and I don't know the experience I have like 30 years of experience in programming language or not just a specific programming language but overall the programming so now let me just sell that and here you can see we have this object right here if you expand that and now let me just go to the Prototype and inside this prototype we have an Master prototype right here if we expand this one and here you can see we are now getting this grid method and yeah this grid method is coming from this prototype right here okay so now we are totally able to inherit all of the functionality from this person to this Constructor function right here I mean like to this programmer uh class right here so I'm going to just write like grid right here and now let me just save that and here you can see hello there Jose and web dev and if you want to change that to like um John and dough and now let's just change that from hosen to John and several file and here you can see we are now getting hello there John though right here so this is how you're going to be creating a classes in JavaScript so now let me just give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch the solution I'm going to remove every single thing from here and I'm gonna just place this instruction right here so the first thing I want you to do is that I want you to create a class with the name of hero and the properties it will take like name and the level and then I want you to create a grid method which will just agree to the user and then I want you to create an instance of a hero class and then create a new class with the name of Miga and inherit the properties from the hero clause and provide property of spell and create instance of Mega clause and that's that so give it your best shot if you can do it that's completely okay then watch the solution so the first thing which I'm going to do is that I am going to go and now let me just write a class of hero and now I'm going to describe my Constructor it will take the name and the level and inside this Constructor what I'm going to do is that this start name will be equals to name and this style level will be the level will be equals to level there we go and I'm going to also provide as a grid of prototype method and it will just return like um this start name um says God says hello or something like that and that will be fine now let me just create a hero one instance right here and new hero and I'm gonna just write like um this hero name and for the one let's just log to the console is 0 1 0 file and here you can see we are now getting the level and also the hero name right here and if you expand that we are also getting our grid method right here okay so this is how we are going to be creating our first class and now let's just create our second class so I'm going to just write a class and I guess there is there is any shortcut available if you just use their clones and anyways so I'm going to just write Omega or not Mega but extern extends um here and now let me just write a Constructor method I'm going to write name the label and I'm going to also write my own spell property inside there and now I'm going to use my super and here I have to provide all of their properties from up above this one like we are inheriting all of their properties from that one so that's why we have to just provide it right here so this starts spell webinar equals to spill or spell whatever you want to call there and now const hero tier and it will be now equals to new and then the uh what do we call it class name I I don't even know these um what do you call it these Heroes right here but I just randomly search on Google and it gives us all of third uh anyways it gives us all of it so magic Missile okay so now let me just lock the console is zero two and now let me just sell there and here you can see we are now getting this uh another user right here or Another Hero to be precise and here you can see the lower will be now set to 2 name will be this one the spell will be a magic Missile and we have this okay we don't okay we have a great method inside this prototype right here okay so we can just screw it to this here or two by using our grid method say hello to this guy right here or this guy says hello so yeah that was it about classes in JavaScript so now let's learn about modifiers in JavaScript so what they are and why you should care about them so class modifier also known as a access modifier or visibility modifier are keywords in other programming languages like in other oop programming languages they Define the visibility or the accessibility of class members field methods and instead Clauses from other parts of the program they control the level of encapsulation something which you are going to be learning in a second so they control the level of encapsulation and help enforce encapsulation principle something which you are going to be also learning um by restricting direct access to a certain class member so these are modified but modifiers are available in other programming languages like Java C plus plus and I guess in C sharp we also have these modifiers and yeah but in JavaScript we don't have modifieds okay so now what do I mean by in JavaScript we don't have modified so in JavaScript class modifier are used in the context of classes and objects although JavaScript does not have a traditional access to modifiers like some other programming languages like Java however we can achieve the similar effects using a different conventions and techniques which we are going to be learning so if you learn modifier in JavaScript so it will open a huge gear for you then you will be able to learn about the four fillers of objective oriented programming so what are those four fillers they are encapsulation abstraction inheritance and polymorphism so we are going to be learning all of them in a really great depth and we are going to be also writing a code for each of them but first of all we have to learn about what in the or modifiers and why you should care about them so now that was the basic theory behind modifiers so now let me just give you a real word example okay so what I'm going to do is that I'm going to just write a private key b r i v a t I guess this is how you spell it if we Mark any of our property or any of our method inside a class by using the private so that method will not be or method or property will not be accessible outside from that class okay so uh this um this will make oh you know I'm not going to write any descriptions so you just have to keep that in mind so it will make our method or property totally private so as the name suggests the next one we have is a public modifier and public modifier s m suggests that it will make it like publicly available for all of their classes or like in which you're inherited all of their properties and all of that stuff so if you mark either your property or a method by using this public research keyword so it will just make it accessible publicly okay so the next one we have is a protected so protected okay and protective allows us to only use that same property or their method which you label it by protected keyword it will be only access accessible inside their class but not outside from your class so these are the concept which other programming languages use but in JavaScript we don't have any result keyword like private public and protected so that we are going to have to use either a closure or this result keyword okay so first of all let me just write some code then you will get to know what I'm talking about so I'm going to just go back and I'm going to just create a Constructor function right here and I'm going to just give my name of like my class okay and here I'm going to just write like public field uh public view the name doesn't matter you can give any name you want but I'm just giving them this name because I want to show you like what are public Fields private fields and protective Fields so here I am going to just write private and then I'm going to just write protected okay so now I'm gonna go back so that we can see everything a bit better and here what I'm going to do is that first of all I'm going to just introduce the public field and you already know like how you're going to be creating a public field if you're watching this video from the beginning so you already know how to work with the public fuel so you don't have to do nothing you just have to write this result keyword and then the fear name so in this case I'm going to just write a public field and it will be now equals to this public field right here so it will be now accessible globally so that we can use this sphere anywhere inside our class right here and by the way you can also refactor this code to user Clauses as well but I'm just giving you the example of Constructor function so now let me just introduce the private members or the private modifier to be precise so I'm going to just write private um feel I guess and now let me just write closure okay so we are going to be writing our private modifier or private field by using a closure so we can make something private by using just a closure so how can I go about doing that well you just have to write const and the convention is to use the underscore you don't have to do that so this is a convention if you want to make something private in classes or in Constructors so you're gonna have to first of all write this underscore and then the name of the field so I'm going to just write this underscore and I'm going to just write like a um private and it will be now equals to uh this private field which you have up above okay so now this one is totally private and it will not be accessible outside from this class I'm gonna also show you the testing out there in a second but let me just write all of their coding so now let's talk about how we are going to be making a protective field and by the way this underscore will not make it totally protected but we just have a concept of like uh if you write this underscore so this is the convention like other developer will think like we don't have to do anything with this field because this is a protected field right here okay and this is just a convention in JavaScript but in other programming languages instead of writing this um underscore and this uh const result keyword we are going to be just writing like um private or we are going to be just writing protected so if you are coming from the typescript background so in typescript we have these modifiers but in JavaScript we don't have them okay so I'm going to destroy this underscore right here so it will not stop us to use this property but this is just a concept like uh we are going to be making this period as a private field so this is just a concept okay so now let me just talk to you about the protected field so I'm going to just write Pro tag cheat field right here here and I'm gonna just make um const and the convention will be totally the same like protected field and it will be now equals to this protected field okay not a private but protected field there we go so this one is now public field right here like which means like it can be accessible anywhere inside our program this one is a private field which means like this property will not be accessible uh or we you can even read that in other programming languages but in JavaScript you can totally read that which I'm going to also show you so now let me just make a method protected or private or public right here so I'm going to just make a few method like three methods so I'm going to just write like first of all public method so you already know how to make a protected field in Constructor function first of all you are going to be just writing this result keyword and then the public field and here or pump uh lick method to be precise and it will be now equals to some sort of a function we are going to be removing the name and everything and I'm going to just return like public um field and here what I'm going to do is I'm going to just access this public field right here inside this method and what I'm going to do is that now let me describe the private method so I'm going to just write a private Bravia to you there we go private method by using the closure so now let me just make their method and here the convention is to first of all write this underscore so I'm going to just give a name of like private um method to be precise and I'm going to just remove there and here I'm going to just write a return statement and private method and now I'm going to just write like this protected method or private method uh which is this private field come on we have this pirate field right here so now let's just access that inside this paragraph method and what I'm going to do is that I'm going to just write protected method right here and it will be also using a closure okay so now I'm going to just write a function and I'm going to also label it as an underscore first of all and I'm going to just give a name of like protected method okay it will not take any perimeter or anything like that we are not going to be doing any crazy stuff and we are going to be just writing Pro tag but there we go and I'm going to also just render my underscore and protect it video there we go okay so now underneath all of there we are going to be just creating one more method method to access protected uh protect attitude of method there we go and now let me just Square the methods real quickly so I'm going to just write X's protected method so this is going to be the name of my method and now let me just create a function and I'm going to just remove all of that stuff from here now let me just return my protected method which we have uh right here so I'm going to just execute there right in here I'm gonna go back I'm going to show you all of their stuff in a second but first of all let me just review all of that stuff which I just said in other programming languages we have a result keyword which allows us to label our data by either using a private keyword or the protected keyword or the public keyword so in JavaScript we don't have their built-in uh result keyword like private protected and all of that in JavaScript we are going to be either using enclosure or we are going to be using this result keyword so it will allows us to either make something public or private or protected okay so these are the three examples of protected or private or public fields and these are the three methods right here the first method will be public method the second method will be primer method and the third one will be a protected method right here and this one is also a public method which allows us to just access this private I mean like this protected method so now let me just test this code then you'll get to know what I'm talking about so I'm going to just create my object and it will be not equals to new um class which we've created above and I'm going to just specify different kind of fields to it so like public select public data and I'm going to also provide this private data and I'm going to also provide this protected data right here okay let me just go back and here what I'm going to do is that I'm going to just log to the console first of all my object right here Dot Public field okay so I'm going to just execute there and now let me just send my file and here you can see we are now getting this public field inside a console why is that that's because we are using the this result keyword to access this field as a public field so now let's just try to access this private field right here so what I'm going to do is that I'm going to just console log an object not object but my object and then we have to access my private field right here and now if it's out there and here you can see it will now gives us undefined right here why is that because here you can see we didn't use the this result keyword we are marking that as a const reserved keyword and here we are using a closure so that's why this is a private right here okay so now let's just access this protected one so I'm going to just lock the console console.log my object then Dot and then what do we have we have this protective field right here and now if we serve there and here you can see it will also gives us this undefined right here okay so now let's just use these methods like public method private method and protected method so what I'm going to do is that I'm going to just um comment these nine out so now let me just use like console log my object dot private first of all dot private method or not rememberable public method there we go okay so I'm gonna just execute there and now let me just send my file and here you can see it will now give us like public field public data is right here so here you can see we have this kind of message right here inside this ah no this one inside this public field right here on inside this public method right here okay so now let me just log to the console the other one so I'm going to just use like my object and then I'm going to use my private um see your old private method to be precise and now let me just execute that right here okay so I'm gonna send my file and here you can see it will not gives us anything even it will give us an error so if you just see here you can see it from the long uses this error it will say like my object private method is not a function which means like you cannot use this method outside from this function right here okay or this class to be precise like this install your private so that's why you cannot use that so you have prior method right here now let's just use this protected one so what do you think will be the result if you just lock the console my object and then I'm gonna just write my protected field okay so I'm going to execute not field but method and now let me just comment this line out and save my file and here you can see it will now uses the error of this one right here it will say like my object this protected method is not a function okay so this is how we are going to be making something either private or protected or public right here inside a class or in Constructor method right here okay so now let me just use this method which you have like access protected method so it will still allow this to do uh or it will still allows us to use this protected method right here so that's the only thing this JavaScript is not good at so I'm going to just write um this axis and this protected method so if you sell that and here you can see we are now getting this protected method and protected data right here okay so here you can see we are now able to access that data inside this method which we've created right here and now we are totally able to access this method like even we give a name of like a protected method but the name doesn't matter we even create this method right here by using a closure but we are still able to access this protected method right here inside this uh function then we can also access over what we call it our prior method right here so I'm going to just write um private here not a field but private method there we go and now I'm going to save my file and here you can see it will now use the layer of private method and private data right here okay so it is just a convention to tell other developers like you don't have to mess around with this data because it is label as this underscore right here and it is built by using a closure and here we are not using any this result keyword so it is just to tell other developers like this is either a protected key or a private key or a public um not a keys but it is either a protected field or method or a private field or a method or it is a public peer or a map so these are the convention and that was it about modifiers in JavaScript I knew that was confusing you don't have to get confused by that it's not a difficult thing to learn but in other programming languages we have this result keyword of private uh p r i v a t e and we also have a protected one so if you join me in my typescript course so you are going to be also learning about private protected and also this public uh result keywords right here so public okay so there's other topic you don't have to worry about that for now so this is how we are going to be labeling our data by using a closure and we also learn about modifiers like public field private field and protected field in JavaScript so now they will learn about modifiers in JavaScript so now it's time to learn about the basic four pillars of objective oriented programming so what are those so in this section we are going to be learning about the first pillar which is called encapsulation in JavaScript so what is encapsulation so encapsulation is the concept of building data which you can call a properties and methods functions together within an object allowing the object to control access to its internal data and behavior so this helps to hide the implementation detail and expose only the necessary interface to interact with the object so in JavaScript you can achieve encapsulation by using either a closure or assembles or you can also for the naming conventions for that to similar private members and expose the public interface okay so this is where encapsulation is and now let me just write some code then you will get to know what I'm talking about so I'm going to remove this previous code right here and I'm going to just place this instruction right here so in general script we can achieve encapsulation by using closure to create a private members okay so I'm going to just remove that from here and now let me just give you a quick example of that so I'm going to just create a function right here I'm going to just create a Constructor function in this case and you can create a class if you want to and I'm going to just create this count variable and I'm going to just set the value up there to zero and this one will be a private uh very able or private property or field whatever you want to call there so for you a sec I just give a name apply count and this one will be a private variable right here so now let me just create three methods and their method will be a public methods okay which means like there can access and more okay find the private variables okay so variable there we go so in this case we are going to be creating three functions inside this counter right here and there will be a public method and they can access discount right here and we are going to be writing or encapsulation logic inside there so what I'm going to do is that I'm going to just write at this start increment right here and I'm going to just create this function right here let's just remove this perimeter and all of that kind of stuff and now let me just access this count variable right here I'm going to access that and here I am modifying this so what are we currently doing we are hiding the internal implementation details and we are only exposing the necessary interface right here here we can see this variable is totally private so we are hiding all of the implementation detail and here we are just only providing the necessary interface to interact with their um their property to be precise right here so you know I'm I'm going to just show you that in a second but first of all let me just write a call for there like we have a deck decrement and it will be equals to that same function let's just remove all of their empty spaces and all of that and I'm going to just use like count and it will be now just decrementing there and now let me just use like this start whatever you call it I'm going to just use like um get count and it will be now equals to this function again and let's just remove all of that stuff and I'm going to just use um what do you call it just return or simple account right here let me just go back and let me just say that one more time like where in the what are we currently doing we are now creating this variable and we are also creating these three methods right here so currently we are doing encapsulation this so how are we doing encapsulation we are hiding the internal implementation right here which means like we are creating this variable primarily and which also means like this variable will not be accessible outside from this counter right here okay and here you can see we are writing this logic so the user can use this increment method the user can also use this I mean decrement method the user can also use or the programmer can also use this gear count method but they are not able to work with discount right here so what are we currently doing we are hiding the implementation detail and we are just exposing the necessary interface for interacting with discount right here okay so this is how we are doing interface I mean like encapsulation so now let me just use that and then you will get to know a bit better so I'm going to just create an instance up there I'm going to give a name of like counter and it will be now equals to new counter there we go come on not like that counter and we're not going to recording any value to that so I'm going to lock the console like counter.get count method right here so currently it will be now set to zero why is that because we are storing the initial value of that count and here you can see we are storing zero inside this if we sell there and here you can see it will not use a zero right here so now let's suppose if you want to increment there while one so we can just use like counter.increment and now let's just call that three times so the first time it will just make it one the second time it will make it two and the third time it will make it three okay so now let's just log to the console that counter dot get count get count there we go and now let's just sell there and it will give us the result of three so if you save there and here you can see it is now giving us a result of three right here okay so now what I want to show you is that here you can see like we can get the count we can increment the count we can decrement you in the count I forgot to show you there let's just use like counter dot decrement right here and now let me just lock the console uh this counter dot get count method right here so it will give us that same it will give us this minus one right here Y is there because the current value was set to zero and here we are decrementing that value or VR just removing one from this count so here you can see it will not give us minus one right here so we are now able to use this increment we are also able to use this decrement we are also able to use this get count right here and they are modifying this count right here like here you can see we are incrementing there here you can see we are decrementing there and we also saw the result there but if you just remove all of that coding from here let's just remove that stuff from here oh you know let me just remove you in this entire line from here and I'm going to just write console.l log of counter and then if I want to access this count right here so we are not able to access that if we sell our file and here you can see it will give us undefined so we are hiding the implementation detail and we can work with only the necessary interface to interact with it okay so we are totally able to interact with our account variable but we cannot access that outside from this counter variable I mean like outside from this counter Constructor right here okay so that was encapsulation in action so that was about encapsulation in JavaScript so now let's jump into another filler of oop which is called abstraction so what is abstraction abstraction is the process of simplifying complex system by breaking them down into smaller and manageable parts and it allow you to focus on the essential features of an object and hide the unnecessary details so in JavaScript you can use abstract classes to Define abstract structure and then Implement that in a concrete object so that was just it about the quick introduction of what abstraction is so now let me just write some code and then you will get to know what I'm talking about so I am going to review every single thing from here and we are going to be starting on a conversation about abstraction by defining or abstract class first of people okay so providing a blueprint for sub a losses so we are going to be creating this abstract class by defining our class result keyword and we are going to be just giving them off like animal and Nemo there we go and inside there we are going to be defining our Constructor method and we are going to be just taking our name right here so this dot name will be now equals to name right here it's underneath all of that what we are going to be doing is that we are going to be creating our abstract method to be Implement 10 by subclasses okay so now let me just create this abstract method so I'm going to just use like make sound and here what I'm going to do is I'm going to just throw a new error and I'm going to just pass my method of uh whatever you call it I'm going to just pass like make sound must be implemented there we go okay let me just go back so you guys can see everything a bit better I'm gonna copy and paste that right here now underneath all of that let's just Square it or new class which will be a dock loss so I'm going to just create a dog and we are going to be extending the functionality from this animal right here okay so what I'm going to do is I'm going to just write a Constructor right here and I'm going to just give a name of my name and we are going to also have to pour this name as a super because we have to call our parents so underneath this Constructor what we have to do is that we have to implementing on the abstract method right here okay so we are going to be implementing our abstract method so I'm going to also give a name of like make sound with this one as well and I'm going to just return the whoa okay right here so now let me just create one more concrete subclass so I'm going to just write a concrete sub plus right here okay so I'm going to just write a closer insert keyword and then my can and we are going to be extending the functionality from this animal and now inside there I'm going to just Square my Constructor it will also take one name and we are going to be also providing our super we are going to be calling our parent and now underneath there we are going to be just writing our Max sound abstract class I mean like abstract method here as well and we are going to be just returning like meow or something or you know me yo I guess this is how you guys spell that okay so now underneath all of that now let me just create a few instances and I'm going to explain all of their code in a second so I'm going to just write a dog and it will be now equals to new dog right here okay so here we are going to just give a name of like buddy and now let's just log to the console this dog dot name and server file and here you can see it will give us buddy and now if you use console.log of dog make sound and now if you sell files it will give us the name of wolf but if you use like uh limited square one more instance right here like const cat and we are going to be just writing new can as the instance and I'm going to just give a name of like um and then I'm gonna lock to the console let me just log to the console this CAD dot name and I'm gonna also let me just say that and here you can see it will not use that name obviously and we are going to be also using this care.maxx sound so if you sell there and here you can see it will now gives us meow uh I mean like meow it will give us that okay right here so what are we currently doing first of all we are creating this parent class right here and we are given name of like animal we have this abstract method inside this animal right here which is just throwing a new error and saying like method make sound must be implemented then we are creating one more class right here and we are borrowing the functionality from this animal and here you can see we are also implementing the abstract class right here th down there we go abstract method to be precise and we are also creating this Max um max sound method inside this dog as well and then we are creating one more CAD method right here and inside there we are doing all of that stuff and we are also creating this abstract Max sound method and we are just passing this Neon right here so we can call like this Max sound on each of this Constructor I mean like this clones and it will give us different results right here so here you can see we are just logging to the console this dog name so it will give us buddy if you use this make sound so it will just run this method right here and it will say like and if you use this one I mean like uh if you use this care.net so it will give us the card name and if you use this care dot make make sound method so it will just gives us this meow right here so you already know all of their stuff so now let me just explain where in the world we've implemented the abstraction all right so I'm going to just write a little bit of definition so I'm going to just Define all of that code which we wrote up above so in this example we have abstract class animal that contains an abstract method make sound so the make sound method is declared in the animal Clause but doesn't provide any implementation it is meant to be implemented by a subclasses like dog and care so the dog and the can Clauses are concrete some Clauses that inhered from the animal Clauses they implement the abstract method make sound with their own specific implementation for making a sound so in this one we provide implementation of wolf so this one will just say wolf and this one will just only send me over here okay so then so by using abstraction we Define a common interface make sound that each subplots must Implement while hiding the internal detail of how each animal make its sound so this simplifies our code and allows us to work with animals at a higher level of abstraction so without worrying about the specifics of each animal's sound and implementation okay so I want you to just look at 3D score and this is what abstraction is in JavaScript or in oop to be resize so those are about abstraction in JavaScript so now let's learn about inheritance so you already learned about inheritance in a very very depth in this course but we are going to be relearning them once again why because currently we are learning about the pillars of oops we have to really learn them so what is inheritance just in case if you don't know so inheritance allows a class subclass to inherit or to borrow the functionality like the properties and the method from another class from a super class and this enables call reuse and a creation of hierarchical relationships between Clauses okay so in JavaScript inheritance can be achieved through prototype based inheritance for ecmascript 6 or using the ecmascript 6 Colossus with the extend keywords so we already learned all of that stuff but now let's just rewind all of their stuff once again so what I'm going to do is that I'm going to first of all give the example of uh what do you call it the es5 chord okay by using a prototype and then we are going to be refactoring that code to use classes so I'm going to just create my Constructor method I'm going to just give a name of like animal it will take one parameter of our name we are going to be using this star it will be now equals to this name right here then we are going to be creating a prototype method so method method uh shared among among all animal instances okay so I'm going to just write like animal name and I'm going to just use my prototype and I'm gonna just write make sounds so it will now just make some sort of a sound I'm going to just create this function right here and now let me just return like unknown sound there we go okay so this is going to be our first prototype which will be attached only on this animal right here and now let's just create our sub Clause uh from animal so I'm going to just create this dog right here so I'm going to just give a name a flag dog it will just take anymore and we are going to be using our animal uh dot call method and we're going to be specifying that this result keyword and also the name okay so it will call the super gloss Constructor okay so now underneath there we're not going to be doing anything I'm going to go back and then once WhatsApp Plus right here or sub Constructor function to be precise and now let's just set up a prototype chain or dog to inherit in h e r t from any mode so now we are going to be set up in our prototype champ for the docker in here animals we are going to be using the dog Dart prototype and we already know how we are going to be doing there so we are going to be using this object dot create method right here and it will allows us to create an object based on the other objects so in this case we want to provide this animal dot prototype so it will now create this prototype chain for us and now let's just write our method uh specific to Doc okay and I'm going to just write like dog dot prototype dot Max sound and it will be equal to function and we are not going to be porting anything to that and we are going to be just returning like wolf okay W double o f I guess this is how you spell that and now outside from there we are going to be creating an instances so I'm going to just write creating instances of the classes there we go so let's just make that uh instances in the lower case and I'm going to just write const uh I don't know generic animal or something like that g e and e one r i see there we go generic animal and a plus two just in simple animal and we are going to be providing the properties of generic animal there we go and now let's just log with the console this generic animal dot name so now let's just sell there and here you can see it will give us this name and now if you just write like um Consular log of this generic animal dot then now let's just use or make sound method so if you just save that it will give us unknown sound and now let's just cover both of them out and now let's just check are we doing or are we inheriting where is there are we inheriting this makes sound from this animal to this dog so now let's just check that okay so what I'm going to do is that I'm going to just um I'm going to just comment this line out first of all so now let me just create a simple instance of their dog first of all so I'm going to just write like phones dog and it will be now equals to new dog and we are going to be just providing the name of like buddy or something like that and then we are going to be just checking like just let me just lock the console this dog and now if you sell there and why aren't we getting this talk we are providing this dog and we are providing everything so why aren't we getting this talk to the console let's just check the warnings and animal dot class is not a function animal dot class is not a function what the hell is then supposed to mean oh here we are using a clause instead of a class we have to just write a call and now if we save there and here you can see it will not gives us that dog of body and I don't know where the hell is this area coming from so I'm gonna just hide there very quick here you can see we have this dog with the name of Buddy and if we check the Prototype chain so it will not give us this anymore if we even open that further so we have this object and we have this Max sound right here so if we just call this make sound right here so make sound and if we execute this or find it gives us unknown sound and we can Define our own specific ones by using this talk dot prototype and we can just write a warp right here so if you sell that and here you can see it will just gives us this woof right here okay so that was the es5 way of writing all of that code so now let me just convert all of that code to use the es6 classes so I'm gonna just go further and I'm going to just Define super foreign super gloss there we go and I'm going to just give an a reply Clause of any model and inside there we are going to be defining our Constructor function and we are going to be using the star name and it will be equal to this name right here okay and now outside from there inside a prototype chain we are going to be defining the max sound method and now let's just go inside there and let's just return the unknown or WN there we go and don't sound okay so now outside from there we are going to be using our inheritance or you know first of all uh let me just create a sub class right here then we are going to be inheriting um the functionality inheriting from any mod there we go and I'm going to just write class and I'm going to create one more so I'm going to just give a name of like dog just like that and it will be now extending the functionality or borrowing the functionality from this animal clause and now let's just use our Constructor inside this Constructor we are going to be using old super and inside this super we are going to be passing our name and now let's just spread our own method outside from there and we are going to be just providing the max sound okay and now let's just return there and let's just write our wolf okay so we are now writing this method as a prototype of this dog so now let me just create cones generic animal and it will be now equals to new animal uh come on the hell any more and now let's just provide generic animal I can't even type today and now let's just log to the console generic animal dot uh make sound and now let's just execute there and here you can see it will give us unknown and now let's just create an instance of this dog and we are going to be just giving name of like dog and we are going to be recording a buddy and now let's just write a construct log of dog dot make sound and now if you sell there and here you can see it will now give the spoof right here and if you just look to the console this dog and now let's just check him out and here you can see it will now borrow the functionality from this animal if we open this chain so here you can see we have this Meg sound right here okay so this is how we are going to be using the inheritance in JavaScript so that was at about inheritance in JavaScript and now let's learn about the final pillar of oop which is called a polymorphism so polymorphism allows object to be treated as the instances of their parent classes even if there are instances of a subclass sources and this facilitates writing a code that works with different types of object in a generic way in JavaScript polymorphism is achieved through the methods overriding something which we are going to be discussing in a second whereas some class provides its own implementation of a method that is already defined in the parent clause and we already kind of touched them but we are going to be retouching them once again on that time we didn't discuss about a polymorphism but in this time we will so the code can then use the same method to work with both the parent and the subclass instances okay so that's the basic definition of polymorphism in oops so now let me just write some code then you will get to know what I'm talking about so I'm going to remove all of their previous codes so I'm going to just remove them and now let me just place this instruction so in JavaScript polymorphism is typically achieved through the method or writing so first of all we are going to be creating some sort of like parent class inside their parent class we would have some sort of methods then we are going to be inheriting that method from their pair and then we are going to be overriding that method so then we are going to be able to work with the polymorphism so whereas subclass provides its own implementation of a method that is already defined in the parent Clause okay so now let me just write some code then you will get to know what I'm talking about I know there's a lot of gibberish but trust me it's not that much difficult thing to learn so now I'm going to just give you the example of that any mole once again because I like typing anymore I heard and now let's just write the star name and it will be now set to name right here okay so now we successfully create our parent class this is going to be our super clause or you can call it a parent class whatever you want to call there now inside this parent class what we are going to be doing is that we are going to be just writing a Mac sound method right here and we are going to be just specifying uh I don't know I'm going to just return like unknown uh un known sound right here okay so now underneath there we are not going to reporting any other logic so here you can see we just create our animal um class right here inside this animal cross it will just take the name and it will also take this method right here which will just return like unknown sound right here okay so now let's just create one more class so what I'm going to do is that I'm going to just write a class of dog and we are going to be inheriting or extending or borrowing the functionality from this animal right here and now let me just write my Constructor and here we are going to be just providing a name and we are going to be using a super analysis provide one name and here what we are currently doing is that we are uh overriding over method right here okay so or OVR r r d i n g r i d i n g I guess this is how you spell it so in this case we are borrowing the functionality from this animal which means like we are getting this method like we are getting this message from this animal method right here I mean like animal class right here into this dog right here and now in this case we are going to be overriding that method so we are going to be providing our own implementation so I'm gonna just use like Max sound and this one allows us to work with the polymorphism so now let's just return a wolf right here so as I I said like we've already created or we already use this polymorphism in JavaScript but I didn't specify what a polymorphism is okay so this one will be now set to Wolf and now let me just create one more so I'm going to describe one more plus and I guess we don't have any shortcut to create any classes so I'm going to just use extends keyword one more time and we are going to be borrowing the functionality from this animal okay so we are going to be preparing our Constructor we are going to be passing the name we are going to be all supporting our super and the name underneath that we are going to be using the make sound and now let's just overwrite this functionality one more time so I'm going to destroy meow I'm going to just copy that we're writing from here and now let me just pass that right here so we are now overriding this method we are borrowing first of all the functionality from this nmo we are getting or we are stealing the functionality of Mac sound from this animal and here we are just changing this return server from that Port so we are overriding our method right here okay so now let me just create a final uh function so just a simple function I'm going to just create a function function there we go I'm going to just give a name of like any mode and for right here and it's gonna just take any mult there we go animal I guess I spell it totally correctly and now let me just lock the console this name and it will just say like any mole dot in just name like sorry and I'm going to also write this sound right here and it will just say like any mole dot make Excel okay so we are going to be also executing that make sound right here so that's then now let's just create our instances so what I'm going to do is that I'm going to just write generic uh animal and it will be now equals to the new result keyword or for animal like so and I'm going to just pass the generic generic uh anymore come on anymore I can't even write to the generic g-e-n-e-r-i-c I guess this is how you write it and now I'm gonna just pass this generic animal to this animal info right here okay so I'm going to just use generic animal and I guess I'm gonna have to sell my file and here you can see it will not use the name of generic animal and it will also gives us the sound of unknown sound okay so here you can see we are passing there we shouldn't have to create this function but I'll just wait for its Simplicity sake okay so now let's just create a dog instance so I'm going to just use like new dog and we are going to be just providing a name of like buddy or something you can pour it any name you want and now I'm going to just write animal info and we are going to be passing our dog and now let's just comment this line I want to save our file and here you can see in this case it will give us the name of Buddy the sound will be set to Wolf okay so we are overriding this wolf right here and we are doing a polymorphism right in here okay so now let me just log with the cons I mean like let me just comment this line out and now let me just create an instance of this new cat right here and it will be like a wish I I can't even pronounce this name but I'll just copy that from a Google so that's that so I'm gonna just write animal and we are going to be just passing the cat and seven fine and here you can see it will give us this name and it will also give the sound of meow or Meow whatever okay so I'm going to just comment this line out and now let me just discuss this polymorphism in the instruction and then you are totally 100 you get to know what a polymorphism is all right so I'm going to go back and that's a lot of read if you want to read it like if you don't get to know like what in the world is polymorphism so if you didn't get it what a polymorphism is so you can read with me but if you already know what a polymorphism is so you can skip ahead so in this example we have a super class animal with a Constructor that initialize that initialize the name property and the method make sound that Returns the unknown Sound by default the subclass dog and cat inherit the animal and override the max sound method with their specific implementation okay so here you can see we are now overriding this Mac right here and we are also overriding it right here and here we are defining it okay so the answer and the animal function will just print us there what do you call it that makes sound and the name and the method right here now let's see how we are going to be demonstrating the polymorphism in there so when we call the element info and we provide the value of black generic animal the function prints the name of the animals generic animal and the sound as unknown sound so this is because the generic animal is an instance of an animal subclass and the method makes sound is called from the animal Supercross so now in the second iteration we provide a docs it will give us the wolf okay as a I mean like their name will be buddy and it will give us the sound of wolf this is because dog is the instance of the dog clause and the method makes sound is called from their dog's subclass overriding the method from the animal super class which we are overriding right in here there we go um dog there we go and then the final thing we are doing that same thing so we are just providing that CAD as animal info and we can create like countless animals if you wanted to but in this case we just create like these two animals right here and the function prints the name of the animals like I don't know their name and then the sound is meow this is because cat is an instance of that can't clause and the method make sound a scar from the care subclass or writing the method from the animal Supercross and this Behavior illustrates the polymorphism as the animal info function can work with different types of animals like animal dog or cat and you can provide more if you want to in a generic way without knowing the specific Clauses the appropriate method implementation is determined at the runtime based on the actual object type pass to that function okay so that was it about polymorphism in JavaScript or in oops so in the next section we are going to be starting our conversation by learning about a synchronous JavaScript in JavaScript so now that we know enough about object-oriented programming in JavaScript and now it's time to learn about asynchronous programming in JavaScript so the first thing which you have to do is that we have to unscore ourself is their word in the word is synchronous and what in the word is asynchronous in JavaScript and so synchronous JavaScript refers to their traditional way of executing our JavaScript code where each operation is performed in a sequential and blocking manner in other words each line of the code is executed one after another and the program will wait for each operation to finish before moving into the next one if an operation takes a long time to complete it can potentially slow down the entire application and making it less responsive so this is one asynchronous means like each of the block will run one after another okay so this is the synchronous score which we've been riding throughout this course so we are going to be shifting our gears to learning about n synchronous JavaScript but before we do that first of all let me just show you the example of synchronous JavaScript so this is the code which we've been writing throughout the course so here you can see we have this function which is just adding and the next one is just multiplying and all of that kind of stuff so here you can see we have these two functions the first one is adding two numbers the second one is multiplying two numbers and here you can also see like we store the result of the first function in the result one and the result of the second function in the result 2 and here you can see it is now giving us the output of 20. so this code will run in a sequential manner which means like first of all JavaScript compiler will register this code I mean like this function then it will jump to this function and it will register there and if you log there to the console so first of all it will give us the result of the first one then it will give us the result of the second one okay so this code is blocking our code right here like if we have some sort of a task which is taking a lot of time so this will block our code and I'm gonna also show you there in a second okay so now what in the word is asynchronous Javascript so in synchronous JavaScript along certain operation to be executed independently from the main program flow so that they don't block the execution of other tasks so this is typically achieved using techniques like callback function promises and asynchronous and I mean like asking an event which allow developer to handle asynchronous operation more efficiently okay so we are going to be learning about like callback function promises anything and aware keywords and all of that but first of all let me just say that asynchronous will allows us to run our code independently so it will not block our code it will first of all check if some operation is taking a lot of time so it will just take that time and it will jump to the next line and it will run that code and once that operation is done then it will give us the result of that operation so I know that sounds confusing but I'm going to give you a lot of examples so so everything will clear it up but first of all I want you to notice that in this code we didn't use any callback functions right here but in this code we are going to be using callback function we are going to be using something called promises and we are going to also learning about asynchronous and aware okay so we are going to be learning about uh Quebec hell something called a Quebec hell which you will see in a second so this code allows us to use the asynchronous JavaScript this code is a synchronous JavaScript which we've been writing throughout the course but from now on we are going to be working with the asynchronous JavaScript code which looks just like that so I'm going to give you a lot of examples in a second but I just kind of want to show you like what's the difference between synchronous and what's the difference between asynchronous JavaScript so there was a lot of theory about synchronous and N synchronous now let me just give you a real example of that then you will get to know what I was talking about so I'm going to just write like first of all let me just give example of synchronous um code I don't even know how to spell the synchronous but I'm going to just wait for him to give me some sort of example there we go so this is how you are going to be spinning synchronous code so let's suppose we have some sort of a function and we are going to be just writing like I don't know I'm gonna give my name bunk and I'm going to just remove that and I'm going to just write like inside a function or anything like that so now I'm going to just log there to the console I'm going to just write start and I'm going to just write like my funk and I'm going to execute there and I'm going to just write Android here okay so if you send our file and here you can see it will now give us first of all start inside a function and it will give us Android here okay so this is the asynchronous core which means like first of all we're just compiler will run Discord I'm going to register this code and then it will jump to this line it will execute the result of this score then it will jump to this function and it will run uh this code the function code which you have inside this function and then it will jump to this Android here I mean like this end console and it will give us the result of inverty and installer console so here you can see we are now writing start inside a function and also the Android here but now let's suppose if some task is taking a lot of time so what will you do on that situation so um you know what I'm going to just remove that from here and oh you know let me just give you example of the answer quickness JavaScript so that was it about a synchronous I'm going to comment this line out and now let me just give you example of asynchronous I don't know how to spell this I'm gonna have to copy that from here and I'm going to just place it right here and A and S so this is air synchronous code there we go okay so now let me just give you example of that and now I'm going to just log to the console like start first of all and now I'm going to just write a set timeout method right here which allows to run or code which will take some sort of a time so in this case I'm gonna just provide like 2 000 which means like two seconds so this code will take two seconds to run so what do you think will be the result if we just write like inside set time out or something like that and finally I'm going to lock the console this end right here so what do you think will be the result of this score which we are already here so first of all it will run the start right here then it will take like two seconds so while it is taking two seconds here this code will not be executed okay so uh I know that sounds confusing but if I just save my file and here we are passing a callback function so if I sell my file so here you can see it will give us first of all start and then it will give us n and here it will give us like inside a set timeout let me just refresh there one more time so we are getting start and in two seconds later we are going to be getting inside this set timeout right here why is that that's because here we are using this callback function right here so this code is an asynchronous code which means like it will not wait for any of the stuff which is happening right here so our JavaScript compiler will first of all see this code it will register this console along and then it will jump to this code and it will say like oh man you are taking a lot of time like two seconds I'm not gonna wait for you because we provide this callback function right here I'm gonna just jump straight into another task if other task is taking time so I'm gonna just go into some other task which is not taking a lot of time so now in this case this task is not taking your time this one is also not taking a time this one is taking a time so first of all it will run this code then it will jump to this one it will take a time so it will say like yeah you can wear it and you can do whatever you want to do but I'm gonna just jump into this code right here so it will run start then it will run n and two seconds later it will gives us this score right here now let me just give you example of a YouTube some sort of like YouTube channel or something like that let's suppose you have account in a YouTube and you want to upload a video to that YouTube so uh you are going to be uploading some sort of a video to the YouTube while that video is uploading you can change the title of the video you can change the description of the video you can even import the keywords you can provide your thumbnails you can Port all of that stuff while the video is still uploading like it is not blocking you to provide all of that credential all in our credential but to provide all of their title and all of that description and all of that so that is known as the asynchronous JavaScript okay so as synchronous JavaScript is a JavaScript code which takes some times so later if you decide to learn mongodb with me so you are going to be fetching some sort of a data from this some sort of a database while you are fetching the data from a database that will be instant instance so for that you are going to be either using the Callback function or you are going to be using a promises or you are going to be using the Nsync and a word keywords which I'm going to also show in a second so that was the quick introduction about synchronous JavaScript and the asynchronous JavaScript uh in JavaScript all right so now let's learn our first Topic in and synchronous JavaScript which is called a callback hell and I'm not making this name up by myself but this is a known pattern in asynchronous JavaScript which is called a callback hell so if you are not using promises or anything in a weird keyword so then you will end up using a lot of callback Hills okay so I'm going to just give you example of that I'm going to just write a callback I mean like call back and Hell something like that it will take one parameter of come back just like that and now inside there I'm going to just return oh not return but I'm gonna just run my set timeout and inside this set timeout I'm going to just write my data it will say like in the sign call back hell and now I'm going to just write function there we go I'm gonna go back and now let me just log this data to the console and I'm going to also get this callback right here so this is going to be the function which we are going to be creating in a second and which this function is taking as a perimeter uh and we are going to be passing the value as a callback right here okay so you coloring all of that stuff if you are watching this course from the beginning so I'm going to just write a callback of data so we are going to be passing this data we are going to be grabbing that data and we are going to be passing it right here and this callback will take that um I mean like their parameter right here we are going to be also supporting their perimeter into this callback function in a second and now this function will take two uh yeah it will just take like two seconds right here and that's it about the first callback function and now let's just create another one so I'm going to just write a function and inside there I'm going to just write it first uh Funk or something like that and it will take the perimeter of data which we are going to be specifying in a second and it will also take one more callback word here and we are going to be using a set timeout right here and now we are going to be passing our callback function here we are going to be just writing like process uh p r o c e double s e c e s d process data and it will be now equals to some sort of a data so we are going to be first of all providing our data right here and then we are going to be writing our separator for ourself and now process double s e d there we go okay so now I need that what we are going to be doing is that we are going to be logging this to the console I can inside I'm going to just write my first Punk and then I'm going to just write a function right here okay so underneath that I'm going to just uh write my callback function which this function is checking as a perimeter right here and we are going to be just passing this data I'm going to just press it just like that and now let's just create one more but before we do that we have to just specify like one second there and now let me just create one more so I'm going to just write function and this function name will be a second Funk and we are going to be specifying the data first of all and also the Callback function okay so now let me just use my set timeout and now inside we are going to be passing yet another callback function and we are going to be using processed okay so it would be not equal to this same method um which we've created above like this data and it will be equals to this um okay so now I'm going to just lock the console inside second Funk and I'm going to just write a function right here okay so now let me just uh write my callback function right here which this function is taking as a perimeter and I'm going to just pass my uh process data I'm going to just specify 1500 right here and that's that so now let's just execute all of these functions so I'm going to just go back first of all and here you can see we have this first callback function then we have the second callback function then we have this third callback function right here so what I'm going to do is that we are going to be working with a call back hell right here so first of all we are going to be providing a data for this first callback hand right here so it will take this perimeter so what I'm going to do is that I'm going to just write my callback help function I'm going to execute there it is taking one parameter like that here you can see it is taking this one perimeter of callback so we have to provide some sort of a video for that so we are going to be providing this data it will take this data and then we are going to be just passing that argument as a comeback function to this callback handle right here so now let me just get inside there so you guys can see everything a bit better and now what I'm going to do is that I'm going to just execute this function which you have right here so we have this first Punk right here so now we are going to be executing that function inside this function right here I know that sounds a bit weird but we have to do that anyways this is a callback uh hell so we have to just use that now this function is also taking one perimeter I mean like two parameter right here the first one is data and the second one is a callback function so I'm gonna have to provide this data which we are providing is the Callback to this function and we are going to be just providing this data right here and then the next one we have to just write or processed data as a second callback function right here okay so it will take this first uh it will take this callback function and it shouldn't have to be fixed it should have to be f i r s t there we go I'm going to copy that and I'm going to also place it right here and I'm going to also place it right here so my bad and now inside this function we are going to be passing yet another callback which will be the second right here so I'm going to just copy then now let me just paste it right here right so our code will look something like that once we are fetching some sort of a data from a database or if you are working with some sort of third-party libraries or anything like that okay so if you want to work with the N synchronous Channel script so we are going to be writing our code like that so actually we are not going to be providing all of their callback function just like that we are going to be using first of all the promises and we are going to be also learning about anything in a word in a second so I'm just showing you if you weren't using a promises and anything in a weird keyword so you would have to write code something like that and that would look horrible so now I'm gonna just provide my process data one we already passed there so I'm gonna just write my process data to in this case and now let me just pass that as a callback function right here okay so it will take a process data one just like that and now we are passing that perimeter right here inside this function and now let me just log to the console um I'm going to just remove these single strings and I'm going to just provide my template lateral so I'm going to just write final result of all functions okay so I'm going to just write my separator right here not here inside there and let me just part my space and I'm going to just render my process there are two there we go okay so now let me just save that but before we get into the testing of this code first of all let me just show you like this is all of the cover back here right here but we can go more nested than that we can provide like countless of this callback function right here but the thing is that we don't have to do all of that I just kind of want to give the example of what a callback function is but we don't have to go that much deeper because we are going to be also refactoring this code to use a promises syntax first of all and then we are going to be jumping into the NSYNC in a weird keyword in JavaScript so first of all let me just save there and here it will take two seconds first of all it will give us like inside a callback function then it will run like inside of the first function and it will on gives a slide inside a second function and then finally it will give us like final result of all the functions inside of Earth's called by hell then it will just proceed the first one and then it will proceed the second one right here okay so now we are getting all of their results from all of these callback functions right here and that sucks so that was it about callback function right here and this is a valid asynchronous core by the way here we are passing all of their callback function but this is a asynchronous call which is taking time so that's why we report this callback functions to it but so now let me just show you one more thing callback functions cannot be asynchronous all the time so we can also have synchronous callback function as well so I'm going to just give you example of callback uh is not always a synchronous okay so covet function cannot be always asynchronous it can be sometimes synchronous and uh sometimes asynchronous now let me just give you example of that but before we do I'm gonna just comment all of this code out and now let me just give you example of there real quick so I'm going to just write constant.log I'll start first of all and then I'm gonna just write like cons numbers and it will be now equals to A lot of numbers like uh one I don't know a comma two comma three comma four five six seven eight and I don't know nine and ten or something like that and what I'm going to do is then I'm going to just use my numbers and I'm gonna use my for each right here and in this case we have to specify our callback function right here don't we so we are going to be just passing like uh I don't know I'm gonna just pass my n and we are going to be just logging this into the console okay so now if I just uh log like uh I don't know and right here see if you sell there and here you can see first of all it is giving us this star then it is taking like it is running all of that code let's suppose if you have like a thousand line of code it will execute all of that code and this one should have to wait it is not giving us this uh I mean like it is not giving us the result of a start and end and then it is executing the code it is not giving us the results something like that first of all it will run this code then it will run all of that stuff all of that operation right here and then finally it will give us that Android here so I want you to keep that in mind callback function cannot be always asynchronous in some situation it can be synchronous and in some situation it can be asynchronous right here okay so that was it about a callback hell and we are going to be refactoring this code to using something called a promises in a second but first of all let me just give you a quick challenge and you have to perform this challenge by yourself if you can do it as completely okay then watch the solution so I'm going to remove all the desktop from here and now let me just paste these instructions right here so I know that's a lot of instructions but not that much so first of all let me just write this um control log of start I'm going to duplicate that and I'm going to just write invert here okay so now let me just for the spaces at the middle of the start and the end do this first of all I want you to create a function with the name of get user data from the database so I want you to just imagine you are not going to be getting some sort of a data from the database not yet but later so I want you to just create a function again this name which will take the name and the Callback function as a parameter use the set timeout and inside there's a timeout I want you to just print like getting the username and then Pence your name as an argument to their callback parameter and this process should take two seconds so I want you to just provide this on two seconds and you already know how to do that then I want you to create a function with the name of kid user hobbies and then which will take like the name and the Callback function as a perimeter and use the set timeout and print like getting the user hobbies and then Pence your hobbies array as an ongoing to this callback function it will also take two seconds as well and execute the get data I mean like execute I get user data from the DB function so pens your name as the first parameter and callback function for the second argument and this callback function should also take the data and the perimeter so in this callback function log data into the console and execute the get user's home bits function and pass your data param like parameter and also pans another callback function which will tag obese or hobby as a perimeter and just lock the perimeter to the console run the code and see the results so this is how you're going to be running your core so we are going to be just I'm going to just uncomment there so first of all you're going to be creating some sort of a function first of all you are going to be reporting the name and based on this name it will first of all give us the name of the user and then it will give us the Hobbies right here okay so give your best shot if you can do it that's completely okay then watch a solution and here is my solution so I'm going to just comment this line out and inside this third and Method I will inside the start and end callback functions I'm going to create a lot of callback functions right here so I'm going to just write like function the name of the function will be get a user data from the DB it will take the parameter of name and also the callback function okay so now inside there I'm going to just use my set timeout so I want you to just imagine like in this case this operation will take like a lot of time so in this case it is not taking that much time like it is taking two seconds so I want you to just imagine like you are getting some sort of a data from the huge database so it will take a lot of your time so I'm going to just use like getting username dot or dot underneath them we have to just password callback right here and we are going to be just passing our name so that was it about our first callback and now let's just work with the user's hobby so I'm going to just write a function and I'm going to just give a name if I get a user hobbies and it will take one not one by two parameter of name and also the Callback function and we are going to be using a set timeout right here and we are going to be just passing over array already I mean like or function and now inside there we are going to be just writing like getting the user Hobbies there we go okay just a message for us and I'm gonna just also provide a callback function and we are going to be passing our Hobbies like as a ray I'm going to destroy it like I don't know I'm gonna write like football or soccer I'm gonna support a reading and I'm gonna also part like a singing or something I'm I'm pretty good at singing so that's why I put it okay so no let me just execute all of their function first of all we are going to be executing this function and based on this function we are going to be getting the user Hobbies okay so I'm going to just uh get user data from the database and we are going to be specifying or we are going to be searching or we are going to be querying the user by the name of Jose and we want to just get the data from our database and now I am going to lock the console this data first of all and I'm going to also use the get user Hobbies right here and it will take first of all the data and it will also take the whole b or Edge I'm going to just pour the whole B right here what the hell okay and now inside there I'm going to just lock this hobby to the console now let me just go back and that was it about this challenge first of all we create this git user from a database it will take um name and call the function as a perimeter and now then in this case we are providing get user hobbies and we are providing the name and also the Callback function right here and finally we are executing this function and now inside this function we are executing this one okay so now let me just save my file and here you can see it will now give the start and end it will not wait for all of these instructions right here because here we are passing all of their stuff by using our callback function so it will not work for all of this execution I mean like all of these function to execute like view first of all we're for this one like two seconds and I forgot to mention uh um two seconds right here so we also have probably two seconds right here it will give us like start and getting username then and now it will give us the getting the user Hobbies right here so in this case we are now getting the user's hobby the user is for like football and reading and singing and all of that kind of stuff right here so that was a callback hell in JavaScript I get it writing a callback function is sucks so for that we have to learn about promises in JavaScript so what is a promise A promise is an object representing the eventual compilation or failure of an asynchronous operation so get it I bet you don't so now let me just go a little bit further in promises so a JavaScript promise object contains both a producing chord and call to the consuming core and it can be used to deal with asynchronous operation in JavaScript so I promise how these three stairs the first one will be pending the second will be either fulfilled or resolved and the final one we have rejected so I want you to keep that in mine so word in the world is all of that starts means so initial start not yet fulfilled or rejected will be pending if all promise is completed so we can say This Promise is fulfilled or resolved so if our promise is failed we can say This Promise is rejected okay so these are the three stairs of a promise so pending fulfilled result or rejected so how can we work with promises first of all we will have our promise Constructor so if our promise is true we can say our promise is resolved here you can see there and we can use either of these two methods right here on our promise so we can use it then or the finally and we can use this finally with either the result State and we can also use it with this rejected one as well so if our promise is rejected so we can use either of these three methods like we can either use a then or the catch or the finaling okay so I want you to keep that in mind so how the syntax over promise will look like this is how the syntax of the promise will look like first of all we are going to be writing this new result keyword and we are going to be writing a promise class right here or Constructor where you want to call there so if you want this value from the beginning like I mean like if you didn't skip the oop part of this video so now you are totally aware of this syntax here you can see we are writing this new result keyword then you are writing a promise and inside this promise we are writing our callback function right here so inside this callback function it is tagging two perimeters it is stacking the result one and the reject one so if our promises resolve so we are going to be running either of these two methods right here either then or we are going to be using the finally if our promise is rejected on the other hand so we are going to be either using that then or we are going to be using the catch or we are going to be using the finally okay so I want you to keep that in mind so where we are going to be writing our asynchronous operation here we are going to be writing our asynchronous operations so first of all we are going to be writing the new result keyword then the promise Constructor or class whatever you want to call there then we are going to be passing our callback function to this promise and we are going to be specifying the result and the rejected method right here and here we are going to be doing some sort of asynchronous operation by asynchronous operation I mean like don't score which will take some time okay so we are going to be writing some sort of a code which will take a time and if that code returns true so we are going to be using this result and we are going to be specifying that value inside this result and if that code returns something false so for that we are going to be using this reject method so if our code is in result state so for that we are going to be using this then or finally and if our chord is rejected so here we are going to be passing some sort of error and we are going to be using the then or the catch or the finalist element or method to be precise okay so this is how the syntax of a promise looks like so now let me just get into this then finally catch and all of that kind of stuff a little bit more okay so what is it then dot then is a method used to handle the successful outcome of a promise in JavaScript and it takes two arguments on fulfilled or on rejected right here so we can also pass our rejective statement right here we don't have to use the catch block for that but we are not going to be passing any Ridge experiments in this then block but I want you to keep that in mind like we can totally provide or reject itself right here okay so work is a catch so the catch method returns a promise and deals with the rejected cases only okay so we are going to be using the then once our promise is fulfilled or you can say result so we are going to be using a then statement for that or the then method to be precise and we are going to be using the catch sermon or not a smart experiment but we are going to be using the catch method for rejected studs okay so this is how the core will look like so here you can see I just have this variable right here promise object and we are now storing this new promise right here inside this variable and here you can see we first of all write the new result keyword and then we write our promise and here we are specifying our callback function right here so inside this callback function we are providing our result and rejected right here you can give any name you want like banana or RNR or something like that so in my case I provide all of the names like resolve and rejected and here we are providing some sort of an operation right here like let uh request is equal to false so then here we are using our ternary operator right here but you can use like if an else German you can use the switch cases you can use whatever you want to use so in this case I just write like if the request is true so then we want to resolve and we just want to print to the user like request successful on the other hand if we request is false we are going to be displaying to the user reject statement and we are going to be just writing a request rejected word here so then here we use this then method and we are specifying our callback function right here it is taking some sort of a value and we are just logging their value to the console so this value will be based on this request or this operation to be precise and here we are handling our error right here so if we have some sort of error so we just want to log that error to the console so that was just a basic object in JavaScript and now let me just give you a real world example and then you will get to know what I'm talking about so what I'm going to do is that I'm going to remove all of that code from the Callback function and I'm going to just create my simple function right here I'm going to just give a name of like check number and I'm going to just specify my number right here okay just a simple number and in this case we can just use npm and if we hit Tab and here you can see it will now give us the new promise and it will also provide a callback function and the result statement and also the rejected one but we are not going to be writing it like that I want to show you everything from scratch so that's why I'm going to be writing all of their code from scratch so I'm going to just write a return and in this case I'm going to write my new result keyword and then I'm going to just write my promise and here you can see This Promise is either going to be the Constructor or this is going to be the class so I'm going to just hold my control and I'm going to just click on him and here you can see it will give us an interface this is our typescript stuff so we don't want to change that okay so you just have to keep in mind like this is going to be either a Constructor or this is going to be I don't know um the Clause okay so I want you to keep that in mind and now here we are going to be passing our callback function we can create that callback function separately and we can provide the reference of their callback function right here or we can write it manually so you can either write the function result keyword or in this case we are going to be just writing our Arrow function right here so I'm going to just pass two parameters so I'm going to just write resolve I'm going to go back so you guys can see everything a bit better I'm going to write resolve and I'm going to also write my rejects terminal right here reject there we go and I'm going to dispense my callback function right in here so what I'm going to do is that I'm going to just write a little bit of logic and you can provide like whatever logic you want it doesn't matter but here we are going to be just writing um I don't know I'm going to just write like if number mod 2 is equal to 0 so this is going to be the odd number I mean like this is going to be the E1 number so we just want to resolve there first of all and we are going to be just writing like um number is an E1 number okay so I'm going to just write period if that's not true so what do you want to show to the user we just want to show the user the rejected statement right here and we just want to show them like a number is an odd number there we go okay so if you sell a file so this is how our code is currently looking like so we can also refactor this code to use our ternary operator but that will just make it awful so I'm going to just leave it the way it is and the next thing which I'm going to do is that I'm going to just create some sort of a variable I'm going to give a name of like number to check and it will be now equals to A 7. so in this case it will give us an odd number and that's not E1 so this code will run which I mean not this one but this code will run right here okay so what I'm going to do is that I'm going to just write my check number and in this case I'm going to just specify my um check two number or number to check there we go okay and now in this case I'm going to just use my then method and here you can see the core go back to execute when the promise is resolved okay so I want you to keep that in mind so it will take some sort of a callback function it will execute there if the promise is resolved so I want you to keep that in mind and so what I'm going to do is that I'm going to just specify my callback function right here and I'm going to just pass it as it is and I'm going to just lock the console like success and I'm going to also render my message right here which we are getting from their callback function I'm gonna write a message let me just go back and this is how currently things looks like so if I sell this file what do you think will be the results so I'm going to check it out and here you can see it will gives us nothing why is there because here we are specifying the 7 right here and here we are checking if our promises resolve so it will give us this result right here but if our promise is rejected so we are not writing anything for this like we are not handling this rejected stairs so now let's just handle this rejective stat in this case I'm going to just write this sketch block right here and here I'm going to just specify my callback function and as a perimeter you can specify whatever you want to provide okay so I'm going to just use like uh I don't know you know um yeah I'm going to just write a console.er you don't have to do that you can just simply lock that with a console oh you know let me just lock that console what the hell so let me just write error uh and I'm going to just render my error right here okay so now if I sell this file and here you can see it will now gives us this rejected state right here why is that because here we are specifying the secondary and now our promise is rejected here we are checking if the number mod 2 is equal to zero so it will give us an E1 number so it will now resolve it and now in this case we are specifying this 7 so it will not resolve it it will just reject it right here so that's why we are getting this on and here you can see it will not give us this error right here so error 7 is an odd number right here we can even remove this error from here I'm going to just remove there and now let me just save that and here you can see it will not give us that error message variant here inside a console it will say 7 is an odd number we move this 7 and if we just replace that with six it will now gives us an E1 and now what do you think will be the reason if I sell my file and here you can see it will not give us like success 6 is an even number right here okay so this is how we are going to be creating a promise this is how we are going to be passing that callback function to this promise this is something we are going to be providing a result or rejected sermon so if something is true or if or a request or a promise is true so we are going to be resolving our promise or if something is false so we are going to be rejecting our promise okay so this is just a simple logic and you can write like whatever you want to provide right here okay and here we are just specifying this variable and we are calling that function which we've created right here we are just specifying this value to it if our promises resolved so we are going to be running Discord A4 promise is rejected so we are going to be running this code right here okay so that was just a simple example of our promises and now let me just give you one more example oh you know what let me just refactor their previous score which we had um a callback function let me just go back I'm gonna go back just like um so I'm gonna go back come on and here you can see we have um this callback function right here and we are providing the code that function right here again and again so what I'm going to do is that I'm going to refactor this chord from Square so I'm going to delete all of that stuff from here and now let me just refactor their callback function uh to the promises so first of all let me just create their function which was um I guess fetch the user from the database or something like that so you know I'm gonna just give a name of like patch data and now I'm not going to be recording anything in this case because we are going to be using our promises so I'm going to just return and I'm going to just write npm okay so here you can see it will now gives us this um new promise resolve and rejected stairs so in this case we don't need this rejected so I'm going to just remove that and what I'm going to do is then I'm going to just write a set timeout and I'm going to just specify uh some sort of logic inside this I'm going to just write counts data and it will be now equals to inside uh what do you call it fetch or you know call back hell I guess this was the name so I'm going to just copy there and I'm going to just place it right here and now I guess that that was it and I'm going to just write a function and then we have to just find like Constable log of data and now what I'm going to do is that I'm going to destroy resolve and I'm going to just specify my data inside there instead of writing the Callback function which we've read like here we provide like some sort of a callback to it and then we use their callback inside this function right here and we specify this data to it so instead of writing that codec we are going to be just resolving our request right here okay so I'm going to save this file and I'm going to also put a duration of like I don't know 200 or 2000 for like two seconds okay so that was our first function and now let's just create another function which was a function first and I'm going to just specify the data in this case because it will take some sort of data and I'm going to just return npm okay so now inside there what I'm going to do is then I'm going to just try to set timeout or you know what we also have a shortcut for writing a set timeout as well so we have this shortcut and here you can see I'm going to just provide a duration of to 2000 I can't even speak today and now I'm going to just write a process on data and it will be now equals to uh this data and I'm gonna just specify this process data right in here there we go okay so now let me just log there to the console and I'm gonna just say like inside uh first Punk function yep and now I'm going to just resolve that instead of writing the Callback function in this case we are going to be resolving our data if you have that core like I'm going to also give you all of their code in the description below so you can compare their previous code to this one but I don't have much time so that's why I want to go a bit faster because these stuff are very easy and also very important so I want to go a bit faster so in this case I'm going to just specify this data right here and I'm going to just return this npm from him npm and now I'm going to just write a set time out and I'm going to just provide a duration of this one will be like 1500 or something like that and I'm gonna just also copy this code from here and I'm going to just place it right in here okay so and now instead of writing this first function I'm going to copy there and now let me just paste it right here and that's there okay so that was it about these three functions so now let's just use this function by using or promises so I'm going to just write like first of all uh the what was the name of the first one callback function or callback hell so I'm going to just write it callback Hill and I'm going to just use my then method right here and in this case I'm going to just provide as a callback function as a data right here and we are going to be just writing our first Funk and we have to just execute that right here and we are going to be also providing over the error to it so now I'm gonna just change this other callback function right here and we want to provide our process there art print and now what I'm going to do and in this case we have our process data one by the way I forgot to do that and now let me just use my second Funk and I'm going to just provide my process data one right in here okay so I'm going to sell that and it will just form it like so I'm going to remove that stuff from here and I'm gonna also use this thin method one more time and I'm going to just provide my process data and in this case I'm going to just give my name apply two and now what I'm going to do is then I'm going to just log to the console a huge log maybe try to say like a final result of all functions with promises and I'm going to also render this process data to there we go and finally I'm going to just specify the sketch right here I don't have to but I wanted to like let's suppose in some situation we will have some sort of error inside our code so that's why we want to provide the sketch statement right here okay so I'm going to just specify my error excuse me I'm going to just specify my error right here and now let me just log to the console this uh error and I'm going to just write error right here okay so now I'm if we save our file and here you can see it will take a bit of time because two seconds inside a callback hell then it will take one more two second inside the first function and then it will give us inside a second function it will give us the final result of all the function with promises inside our callback have function proceed data uh I proceeded a one and two this one should be two and this one should be one anyways that that doesn't even matter but I want to just write it right here so this is how we are going to be refactoring our code to use our promises so now you might be thinking like Rosanne we are still writing all of their stuff like it's not that much a huge refactor so why in the world we should use this dens rather than using a callback function well these promises are just the beginning next we are going to be learning about answering and aware and I promise it will blow your mind okay so then you will get to know like how we are going to be writing these promises behind this scenes and all of that kind of stuff so that was just it about uh what do we call it promises in JavaScript so now I'm going to give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch the solution so you don't have to do much but you just have to refactor this previous example code to using uh what do you call it promises so I'm going to just unhighlight that so give your best shot if you can do it that's completely okay then watch the solution and here you can see we have this previous score which were using these callback functions right here so which we've did in a previous section so I want you to just refactor this code to using a promises in JavaScript so give your best shot if you can do it that's completely okay and here is my solution so now let me just start our conversation by defining the start and now let me just duplicate that and just write a n right here and I'm going to just write a function and I'm going to just give a name of like Get user data from DB there we go kind of a long name for a function let me just return my npm right here and I'm gonna also write a set timeout baby and I'm going to just pour the duration of 2000 let me just lock the console valid name okay so I'm going to also resolve this name right here instead of writing a callback function we are going to be just resolving our name okay so now let me just create one more function we are going to be creating a function I'm going to give a name if I get user hobbies and Instagram parting of Bobby's foreign you are supremely awful person you shouldn't have researched all of that stuff because that was a nasty thing you just said you should stop saying that things anyway so this is stuck at the console uh getting a user Hobbies what the hell Hobbies resolve and I'm going to just write like a football and I'm gonna also ride like uh I don't know singing I'm pretty good at singing you already know that and solving the math equation especially the conclus Okay so that's them now let me just use both of these functions right in here so I'm going to just write a user data from the database I'm going to just provide this position name for their database or for their query to be precise and I'm gonna dispense my what the hell I'm gonna dispense my callback function right here and now let me just use get a user get user Hobbies there we go and I'm going to just specify this name right here let's just save that and let me go back so you guys can see everything a bit better and I'm going to also chain one more then and I'm gonna just forward my hobby right here okay so now let me just lock the console this hobby sell file now let me just change the final one for catch or errors so I'm going to just write like console.log of error and now if you sell that it will not be the start and end then it will take a bit of time will it name and it will give us this getting the user hobbies and it will not give us a football the singing the solving the math and all of that kind of stuff right here okay so then was it about promises in JavaScript and next we are going to be learning about anything and aware from scratch so what is async function so async is a special function there is designed to operate asynchronously meaning it can perform tasks in the background while other code continues to execute and async functions are marked with the async reserved keyword so what is their essence viewer anything is a keyword used to return a function declaration to an asynchronous function so we are going to be writing all of that code in a really great depth and you don't have to worry about all of that for now that much but I'm just giving you a quick preview of all of that so now this is a async result keyword so word in the word is aware operators so the aware operator is used to wait for a promise and it can only be used inside a async function within a regular JavaScript code okay so then we are going to be also writing this average statement and it will allows us to wait for a promise okay something which we are going to be diving into in a really great depth but you don't have to worry about this so how the code will look like this is how the code will look like but I want you to just ignore this Fetch and all of that kind of stuff for now okay which we are going to be learning in a really great depth in a second so here you can see we are now using this async result keyword it will now make our function here you can see we are just providing a regular function this async result keyword will make our function as an asynchronous function and here we are using in this event right here like this avoid keyword here and we are also using it here so it will allows us to do now provide either the Callback function and also the promises okay so this is how we are going to be writing our code and we are going to be testing all of that code in a second so you know instead of showing your slides I'm going to show you a quick code and then you'll get to know what I'm talking about so what I'm going to do is that I'm going to remove all of that stuff from here and first of all I'm going to just create a regular function so I'm going to just create a function let me just go inside there and I'm going to just give a name of like fetch data from server okay so this is going to be the name of my function and I'm going to just return my npm right here and I'm going to also resolve in this case my user data retrieve from the server okay so this is going to be a function it will take 200 seconds right here so now I'm creating this function just forward a little bit and I'm showing you some sort of a demonstration so now I am going to create my asynchronous function in this case so now if I want to create a asynchronous function first of all I have to write this async and sync reserved keyword and then we have provide our function just like that we can give our function any name we want so in this case I'm going to just give an example I get a user data it will take no parameters and I'm going to just use um something called a try catch I'm going to dive into all of that in a few seconds but you don't have to worry about try catch that much so you can think about this try and catch so now it's like this is a if statement if something is true so then print this result if something is false or if we get some sort of error so we are going to be using this sketch timer for that we are going to be learning about try and catch in a really great depth but not for now so I'm going to just lock with the console this error and that's there so what I'm going to do is that in this case I want you to imagine like we are just fetching a lot of data from our server and this data will take a lot of time and later in this course we are going to be also learning about how we are going to be fetching a layer from third-party apis and all of that kind of stuff but for now I just want you to imagine like we are getting some like a lot amount of data from other server so it will take a lot of time so what I'm going to do is that I'm going to just write const data and it will be now equals to I am going to just use my await syntax Right Here and Now what I'm going to do is that I am going to just call this function right here which we've created up above as I said like this function is just for demonstration purposes and it will take like two seconds or you know I'm going to just make that a bit more like four seconds like that suppose this is going to be a lot of data which you are fetching or we are getting like from some sort of API or from I don't know from database or something like that so I'm going to execute this function right in here okay so we are going to be using this away right here just for word for this function so if this function is taking a lot of time so we will jump into another code and we will run our other code so this is how the syntax will look like and now what I'm going to do is that I am going to just lock with the console this data right here okay so underneath that what I'm going to do is that I'm going to just lock the console like I don't know three main and I'm going to just write like remaining task can be executed here there we go task uh test there we go okay so I'm going to just send my file and what do you think will be the reason if I call this function right here so if I just write get user data and now I'm going to just execute there now if you sell there and here you can see it is oh oh my goodness what the hell I'm gonna have to cut that here and we have to write our set time out come on then how can you forget that set timeout and here we have to write over four uh thousand right here and now we have resolved there I'm going to just remove this extra comma from there and now let me just sell my file and it will take four second to retrieve my data from my database or from my external API and it will now give us like user data retrieve from the server and remaining test can be executed here okay so this is how we are going to be making our function as asynchronous and this is how we are going to be waiting for our promise okay so now we don't have to like no more provide our callback function again and again and we also have to don't use this um then statement and I mean like then and also their catch method and all of that kind of stuff so for now we are going to be just using this asynchronous or async result keyword and also this award operator right here so that was the first example of this sensing and aware and now it's time to refactor our previous code and that will be it so now let me just refactor their previous score which we wrote a few seconds ago once we were learning about promises in JavaScript so now I'm going to just give my name up like I don't know um yeah the name was called back and Hell okay so I'm going to just remove this from here because we are going to be using our promise inside there so what I'm going to do is that I'm going to just write return statement and I'm going to just write my npm right here and it will not take any rejected statement because we are not going to be rejecting anything and now let's just use our set timeout because I always forget there and that sucks and now let me just write my data and it will be now equal to inside uh call Bank uh bsek hell there we go function and now let me just log to the console on this there right here and now let me just resolve this data right here okay and we are not going to be writing any code like that and you know what this other store I don't want to get into the story right now so I'm going to just write a comma and I'm going to just pour 2 000 right here so I'll be using it inside yep that's free so now let me just create that second function so I'm going to just write function and I'm going to give it now like first Funk and it will take the data as a perimeter and we are going to be returning our npm and it will also not take any rejected statement as well and I'm going to just write a set timeout because I always forget that and now let me just write this cons proceed p r o c e double sad process and data and it will be now equals to first of all let's just render our data and then use our process first okay so notice the score or comma and now I'm going to just write it like uh I don't know inside right first Punk or Funk like that and now let me just use my function okay so underneath that let's just resolve or proceed or process there whatever you want to call there and now let's go back so you guys can see everything a bit better and I'm going to also write one more function I'm going to give a name of like SEC onk and it would be equal to or we are going to be passing the data let's just return order npm and now let's just use our set timeout and I'm going to also part a callback function to him and it will take um 100 and I don't know 1500 and here we also forgot to provide this 2000 Right In Here and Now what I'm going to do is that I'm going to just write a process that same statement like first of all we have to render our data and process on the second function or second there we go okay so now let me just use console.log inside second second Funk and I'm going to just use my function right here okay so now let's just resolve there and I'm going to just provide my process data right in here okay so that's there and everything is working just fine and finally we have to create our async function right here so I'm going to just Square this function I'm going to give you a name apply processed um data process data with a sync and hours I know this is a long name for a function but anyways I'm going to use my try and catch blocks you don't have to worry about that for now and I'm going to just render my error and error there we go and I'm going to also um use my back text to render because I don't want to use a plus symbol and that would be suck if you use a plus M you can totally do that but for me I'm not going to do that and now let me just wait for that and fetch the oh not a vegetarian we are not fetching your data first of all let me just call this call back function right in here okay so no more than and no more catches and I'm going to just write conspirances data and I'm going to just give a name of like one and now let's just aware for the first function right here and I'm going to just specify my data to it now let me just use process uh cecd process data 2 in this case and I'll wait for that as well and I'm going to just use a second Funk and I'm going to just provide the process data one right here in this case and now let me just log to the console uh what do we call it the final result of all functions with async async Slash slash event is this um process data I guess two there we go and yeah that's cool I'm gonna go back and now let me just sell that and here you can see we have to wait first of all it will now give us come on come on come on you can do that I guess oh this function anywhere so we have the first of all call this function I'm just saying come on come on like it will give you some sort of a razor anyway so now let me just sell that and wear for it and now it will give us inside a cover function then it will give us inside the first callback function then it will give us inside a second callback function and the final result of all of these asynchronous functions right here which you are specifying and we are creating it right here okay so the dance there and that was it about the asynchronous functions or the asynn aware in JavaScript and now I'm going to give you a quick challenge and you have to perform this challenge by yourself if you can do it that's completely okay then watch the solution so I'm going to remove all of that stuff from here and this is the previous our exercise which we did in the previous section once you were learning about promises in JavaScript so I want you to just repur this all of this code to using the async and aware reserved keywords so give it your best shot if you can do it that's completely okay then watch the solution and then I'm gonna give you my solution so now let me just give you my solution so you don't have to do much this function is probably okay this function is also totally okay you don't have to change anything inside there instead of using this uh then and catches I'm going to just comment this out and I'm going to just write the S sync and I'm going to just create a function right in here and I'm going to just give another like show user of these and I'm going to just remove that let me just use my try and catches and let's just log this error to the console and I'm going to also write the cons name and it will just await or get the user data from the database and we are going to be just specifying our name right here and now let me just use const Hobby and it will be now equals to a weird get user Hobbies and now let's just scroll your name to it and there we go ladies and gentlemen so now let's just log this hobby to the console and save our file and here you can certainly not use first start and end then it will wait for it and come the helm onwards then why do you forget this function execution all the time now this is still there and here you can see it will give the star in N then the valid name then it could give results getting the user hobbys and it will give us football syncing and solving math word here okay so this is how we are going to be refactoring our code to use this Nsync and aware result keyword in JavaScript so that was about asynchronous JavaScript and now let's learn about how we are going to be reading the data from either a third-party library or from our own computer so I'm going to just create one more file uh let me just create one more file right here I'm gonna just give a name apply text.txt and inside this text.txt you can write whatever you want to write so I'm going to just write like present is the best programming YouTube you come on YouTuber of all time okay you can write whatever you want to write but in my case I just find this text right here so now let's suppose if you want to read this text which you have inside this text.txt file by using a JavaScript fetch API so how can you go about doing that first of all let me just log into a console word in the word is this fetch API and I'm going to just specify this text.txt in this case and now if I just save my file so it will now give us this promise right here so which means like you can handle this data by using a callback or you can handle this data by using a promise or promises promise come on promise there we go or you can use the async and aware keyword if you wanted to so now that we get to know that it will return a promise and now if you expand there so here you can see the response stat is equal to fulfill and it will also give us this response so you can learn about the body area you can like read through the streams and all of that kind of stuff and it will also gives us this OK which we are are going to be working with in a few seconds so it will also use the status of 200 which means like everything is a okay so now if you want to handle this data so how can we handle this data so we can either handle this data by using a callback function or we can use our promises or we can use or essing any words so in this case I'm not going to use callback functions I'm going to just handle this data by using this new promise so I'm going to remove every single thing from here and I'm going to just write a fetch method so now in this case I'm going to have to specify the URL or the link of that text right here or this file so I'm going to just write like text Dot txt okay so this is a valid syntax so then I'm going to just attach my then keyword Right Here and Now what I'm going to do is that I'm going to just provide my rest for response and I'm going to just use this res dot txt I mean like this text right here so what in the word is this res dot txt now let me just write a description for that so what is that txt or rest or txt this rest don't oh you know I'm not gonna write risk but I'm going to just write this text method uh returns promise if oh come on if result uh resolve will return text rip off body okay so this is the definition of this res dot txt so this is some sort of a method it will return promise if resolve will gives us a text representation of their body okay so now I use that which means like it will also gives us a promise so we can also use or then block one more time so I'm going to just write dot then and now let me just log with the console there there are so I'm going to just specify my data and I'm going to use my console.log up there right here so let's just sell that and for errors I'm gonna also support this sketch I don't have to but I wanted to so that's why I'm going to just provide the sketch and I'm going to specify some sort of error and now let's just log that error to the console so if you sell a file and here you can see it will not use like who then is the best programming YouTuber of all all time like all of the content which we have available inside this text.txt right here so let's suppose if we just write like a lot of keys right here and if you sell there and it will give us that error right here it will say like dock type HTML and cannot get this text.txt or text.txt there we go okay so this is how we are going to be handling that data but this is not the best way to handle this data why is there let me just write one more note so I'm going to just place it right in here so fetch API promise only rejects when we have a network error not in other cases so this is not a network error this is a typo which we are making right in here so this is not a network error so we are getting this error but this is not the best way to catch or error by using the sketch block word here so what's the best way to catch this error well first of all we are going to be handling this error by using the res dot OK flag which we saw a few seconds ago so now let's just lock the console uh this Fetch and this um what do you call it x dot txt and now let's just comment all of their stuff out and save there and we are going to be working with come on let me just expand there and we are going to be grabbing this video if that's true if this okay is true so then run one chord if that's not true so then uh handle or error okay so we are going to be writing code like this so I'm going to just remove that from here and now let me just uncomment there and I'm gonna cut that statement from here and I'm going to just pour my curly braces right here so now let me just write my if statement right here if not rest dot okay so we just wanted to throw c-h-r-o-w uh error and we just want to write like a red star status uh text right here so if that's true so what do you want to do we just want to return this text right here so now let me just save there and here you can see it will give us this result like totally fine if you made a typo or if you have like a real error so now let's just save that and here you can see it will now gives us that error rather than the HTML like cannot get something something it will not use like error not found at this line so if you click on him so it will not give us their error right in here okay so this is how we are going to be handling the response of our text or all of that kind of stuff so this is how we are going to be reading our text here now and this is how we are going to be throwing a new error and this is how we are going to be checking the property and that's there so now let's just refactor this code to use the editing and a word keyword and you know what before we getting into the essing and uh aware stuff first of all what I'm going to do is that I'm going to just get into the stock type HTML and I want to print this data inside my HTML right here so I'm going to just write like I don't know I'm going to create some sort of a div I'm going to give a name of like results I guess that would be fine and now let me just sell that and we are going to be rendering all of that text right here which we have and we are going to be rendering it to this results right here so we already create that right here and I'm going to just write like I don't know I'm going to write like const Rizzle and it will be now equals to document Dot query selector in this case and I'm going to just get my result right here result was that reason or results yep it's a result so I'm going to copy that and now let me just place it right here and you know what this result that that's totally fine so now let's just refactor all of that code you're using an Nsync and aware so what I'm going to do is that I'm going to just write an essing dessert keyword and my SMS function okay so I'm going to just give a name of like read there or something like that or you know renderer data would be fine so render data and it will take no perimeter or anything like that and I'm gonna just use cons response and it will be now equals to aware first of all and we are going to be fetching our data by using uh come on this Apache method right here and we are going to be specifying where text.txt right here and now it will give us their data but we have to convert that to our text so for that we can use cons data um you can give any name you want for a variable it doesn't even matter but we have to just write a word why we are writing this everywhere because we are handling our promise so it will return some sort of a promise so that's why in this case we also have to write this average seven right here so I'm going to just write response dot or txt so it will also give us a response so you know I'm going to just write in this case I'm going to get my result right here and I'm going to copy then let me just paste it right here and let's just get my text counting up there and it will be now equals to this actual data which we are getting from this fetch method right here okay so now let me just render uh this data method right here so now if I sell my file and here uh you will see that there right here inside my browser right here which is saying like Hussein is the best programming YouTuber of all time and that's facts that's totally true okay so this is how we are going to be reading our data by using this asynchronous function and this is how we are going to be pushing that data into our browser okay so we already learned about this text method so we are not going to be learning about that that's totally working but we forgot to handle or errors so we are going to be handling our errors by using our trying catch blocks so I'm going to just write like construct log of error and I'm going to just get all of that content from here let me just cut that from here and now let me just pass that inside the shrine cache block right here so our code is totally neat and clean and I also forgot to include my if statement if that's not true if you didn't get any response if response is like if you didn't get any response so we just want to throw our error to the user and we just want to show them like response on dot status code so we just want to provide the status code and now let me just save that and here everything is A-Okay but let's just write this T's right here so if you save there we are not getting any data into our browser and we are getting this error here so now let me just show you the status code I mean like uh we are writing the status quo but I forgot to show you there so now let me just show you the a bit quickly so what I'm going to do is that I'm going to comment all of this code out and let me just log to the console this patch one more time so tank start txt and sell file and now let me just expand there and here we have this okay of true and we also have the status of 200 right here and we have the statistics and if something is not true like let's suppose if you just write a lot of these cell file and it will give us that same promise let's just expand there and here you can see that the statistics it will not be just like not forward here okay so now let me just uncomment there and this is how we are going to be handling over there and this is how we are going to be using essay and event to fetch some sort of our data inside from this file which is this text.txt file and yeah there was it about reading a file so next we are going to be learning about how we are going to be reading the Json and how we are going to be rendering the Json to our browser so that's coming so what I'm going to do is that I'm going to remove all of that stuff from here we are going to be rewriting all of that code in a second and I'm going to also remove this text Dot txt from here and I'm going to just create one more file I'm going to give a name of like data.json and that's true and now inside this Json I'm going to just write my name and I'm going to just write like my own name in this case and I'm going to also write my Edge and Edge will be I don't know 19 and I guess both of these properties are like totally fine we don't have to go crazy so first of all we are going to be reading this data and then we are going to be rendering this data to the browser so what I'm going to do is that first of all let me just get my result so I'm going to just write my result and I'm writing this code again and again because I want you to practice that with me okay so like I know if I'm writing this chord you might be thinking like oh then that stuff is totally easy and okay so I can do that but once you open your old code readers so you won't be able to write all of that code by yourself so that's why I'm writing it again and again so you get a lot of practice so now let's just remove all of that stuff and let's just log to the console over error and now let's just learn or Json file so I'm going to just Write a response you don't have Royal response you can write res you can write R you can write banana you can write anything you want but I'm gonna just go with response and I'm going to just wait for it to fetch this data from this terrible.json file in this case rather than a txt file I mean like that text.txt file in this case we are going to be using this data.json right here okay so keep that in mind and now let's just check if you get some sort of an error like if there is spawns response is not okay so what do you want to do we just want to print the user like row uh error and we can just write response dot status text right here okay so that's there and now let's just use cons data and it will be now equals to um let's just avoid and here instead of using response.txt we are going to be using response.json we are going to be converting the data to the Json format so that's why we are using this Json Right Here and Now what I'm going to do is there now let's just uh you know let me just log that data to the console so I'm going to just use there right here and I'm going to just run this render data function okay so if I sell there and here you can see we are now getting this Json and I mean like we are getting this uh object right here and inside this object we have our Edge and we also have our name property right here so now if you want to render that to the browser so we are going to be just writing a result dot text content and it will be not equals to day dot dot name and it will just render the data name right here so if you yourself there and here you can see you cannot see there I don't know why X content data dot Json what the hell let's just refresh the results come on Hussein let's just sell there and here you can see it will now gives us this was Android here and we can also duplicate this line of code and we can change the two Edge right here and we are going to be also learning like how we are going to be iterating over to volupted data and we are not going to be repairing our code like that but now in this simple case we just wanted to render something to the browser so now I'm going to just write code like that and here you can see it will now give us Edge and um that's because we are writing on that code again and again so you know I'm gonna just refactor that code in a second but first of all I want to show you something like how you are going to be reading a Json file how you are going to be reading the text file and all of that so that was it about how we are going to be reading all of that kind of stuff and now let's learn about how we are going to be reading an external apis so I'm going to show you a lot of apis and we even build like a lot of projects if you check out my 100 projects of course which is totally free on my YouTube channel you can found it there but and there we use a lot of external apis but now let me just give you a quick example of how we are going to be working with external apis in JavaScript so there are countless apis where you can get a lot of data but in this specific one we are going to be using this Json placeholder DOT type icode.com okay so we are going to be using this website to get our data from okay so this is the most simplest uh API so we can get all of their data by using first of all the fetch method let me just zoom in a bit first of all we are going to be using this fetch method and here we are going to be specifying that URL which here you can see like unless suppose if I just write this Json placeholder DOT type icode and.com forward slash one so it will just only gives us one response right here so if you hit enter okay it's not giving us anything because here we have provide our posts and then we have to write four slash and then one so if you just hit enter right here so here you can see it will only give us one post right here like a user ID will be set to one the ID will be also set to one the time will be equals to like this random gibberish world and then we have a body and this body will be equal to this one right here so if you want to get a lot of results so for that we have to just remove this one from here and we just have provided this Json placeholder DOT type by code.com for slash posts or posts however you want to pronounce there and now I'm going to hit enter and it will give us a lot of data right here and I happen to be using this uh what do we call it this processor or Json parser extension in Chrome so that's why it is giving me all of their data in this format but you will see your data in this raw format something like that or maybe not like this part you will see your data clunky but if you want to install that extension so feel free to install there so now let me just click on this parts and this is how we are going to be getting all of their data and now let's just use our fetch method to get this data from this post right I mean like this website right here you can learn more about this website if you want to like how you are going to be making a request and all of that kind of stuff like how you're going to be getting like 100 posts like five 500 comments uh 100 albums like 5 000 photos and uh 200 to do's and 10 users and routes there are a lot of products like how you're going to be getting a data how you are going to be posting a data how you're going to be updating your data both of these are used for updating again and how you are going to be deleting your data and all of that kind of stuff so feel free to explore this API by yourself so what I'm going to do is that I'm going to just copy this link already oh you know I'm not going to copy that because I want to show you every single thing from scratch but before we getting into all of that first of all let's just remove this Json from here and I'm going to just go inside my index.html file right here I'm going to just create a button right here and I'm gonna give a name of like BTN it'll say like meh or click me okay so then I'm going to just create a div with the ID of I don't know I'm gonna also part oh you know the class will be ID there we go okay so yeah I guess that oh you know I'm not gonna write any up there that's a crime so let's just write our results I'm going to also remove these results but you know what let me just write this result or all posts will be points so I'm going to destroy it uh I'll post there we go okay so we just have our button and we have or all posts are different here okay so we are going to be working with that in a second so first of all let me just get my button from my HTML so I'm going to use my BTN come on what the hell I'm gonna use my document dot uh query selector and I'm gonna provide my button and now let me just use button dot add event listener and I'm assuming that you're probably aware of all of that kind of stuff and now let me just provide my Mac request or render content I guess make requests will be totally fine and now let me just spread their functions on over the squared there function and I'm going to just write like make request and I'm going to just remove that perimeter from there and I'm going to just use my fetch statement right here so I'm going to just specify this link which you can see right in here so I'm going to just type it manually so that you don't get confused so I'm going to just write https and then forward slash double columns I'm in a corner and then double forward slash Json placeholder DOT type ico.com forward slash post and I just want to get one post right here so this is the link which you have to write so I'm going to send my file oh you know instead of saying my file I'm going to attach my then statement right here and I'm going to just get a result right here and inside this result I'm gonna just check no result so what do you want to print the user we just want to print the user like new error and we are going to be just writing like rest dot status text there we go so let's just remove this equally braces from there and I guess one liner will be totally fine okay so now let's just return this race dot Json from there because we already saw like it uses the Json format so we have to just write or Json format right here so I'm going to just show you and here you can see it is now giving us this Json format right here so now here in this case we have to write this Json right here routing their text so that's them and now let's just save there and now let's just get a real data from there Json so I'm going to just use like data and I'm going to just provide this controller log of data dot ID in this case now let's just save that and now let me just log that stuff from the to the console let's just refresh there and I'm assuming that we already messed up something inside this json.placeholder type a code and I'm going to just click on him I'm going to hold my control and then I'm going to click on there so it will now open so that's completely working like this is totally a okay so so why aren't we getting anything oh that's because uh we have to click on our button then you will get this result so I'm going to untuck there or unduct that however you want to call there to the left and now if you click on this button and here you can see it will now gives us that post ID right here of one so where are we getting this ID we are getting this ID let me just copy there let me just pass it right here and I'm going to just write one and we are getting this ID right here from this API so now let's suppose if you also want to get the body so or title to be precise so I'm going to just use like data.title and now let me just sell there and let me just click on him so here you can see it will give us the ID and also the title which we are getting from this title right here okay so I'm going to also look at the console.body so I'm going to use uh data.body and now let me just save there and click on him it will also give us that body from this post right here so we have this bodies that's why we are able to get there so dance there and now let's just learn about how we are going to be rendering this data to the board I mean like to the browser to be precise okay so we are going to be creating a few things for that first of all I'm going to create a div and I'm going to also give a class of like something I guess ID will be fine because we are going to be rendering our ID inside there and I am going to just write a br right here for just a simple breaks let me just so there and I'm going to also write my title right here okay I'm going to also part a break trade and I'm gonna also uh not a body but just a close of a body because here we are going to be rendering our body so that's why we poured our body right here okay and I'm gonna also write a beyond for the last one as well so this is the amount of HTML that you have to write and here we are going to be rendering all of our data so what I'm going to do is then I'm going to get all of that kind of stuff I can also do that right here like I can also write like document dot query oh you know let me just write it right here so I'm going to write like document dot where is selector and we are going to be first of all selecting our ID and we are going to be changing the inner text of that so I'm going to just use the inner HTML and we are going to be setting that to our data.id in this case so now if you sell there and now if you click on him so here you can see it will just gives us one right here inside or browser so now let's just cross there and now let me just duplicate that a few times so in this case we are going to be getting our title and and we are going to be changing their title to this data dot title which we are getting from this API right in here okay so then what we have to do we have to also write our body in this case and now let's just change that data I mean like they're there at our body and now if you say everything and finally I'm going to also write a catch terminal I don't have to but I wanted to so I'm gonna also order the sketch and now let's just write our error and now let's just log that error to the console server file everything is working click on him it will give us that ID it will also give us the title and it will also give us that body right here okay so now instead of writing this one post I'm gonna get all of their posts so now I'm going to just remove this one from here but for that we have to use iteration you know what let me just show you that what the hell here we are going to be just writing this post right here and it will give us 100 posts so I'm going to just hold Ctrl and click on this link right here so it will now give us 100 posts right here inside our browser so I'm going to just remove both of them and that's working just fine but in this case we have to iterate Uber through all of our data so for that we all rewrite or all posts right here so we are going to be selecting this div rather than these divs so we are going to be first of all selecting that and I'm going to just remove all of that stuff from here like everything is totally okay up above but I'm going to just remove all of that stuff from here and now we are already getting there data so I'm going to just write let output and it will be now equals to document.query selector um and I'm going to just select my all posts right here okay and now I'm going to iterate over to all of their data which is coming from the external API and I'm gonna just write for each and I'm gonna also provide my element part here and now let me just write output dot inner HTML and it will be now equals to plus equal to B honest and we are going to be rendering our HTML right here so I'm going to this right there and I'm going to just provide um you are going to be getting the uh ID we are going to be also getting the title and we are going to be also working with the body and now let's just remove that last one and now let's just change the from um what do we call it from ID to title and this one will be body right here so I'm going to just write body and now if it's silver file and now if we click on this button and here you can see it will give us id id and body body and title title there much time right here okay so I'm going to just provide I don't know I'm going to write a br in here so yep that's looking cool so first of all um I'm just remove that from here as well so first of all we are getting their ID and also the title and the body for 100 post and we are rendering all of there to our browser right here so you can also write a styles for that if you wanted to so I'm going to just write Styles styles.css and I'm going to just find a little bit of style you don't have to write them but I'm just writing it anyways margin padding will be equals to there both sizing will be blah blah blah and I'm going to just change the background body background color to like Crimson or something like this so there and we are not using it anyways this one we have to link that right in here and I'm going to link that right here sell my file click on this button and why in the world we are not getting these styles body we are riding cream Zone server file this is looking awful I know that but no let's just change this uh whatever you call it I'm going to just throw it in some sort of a container or you know I'll post would be fine so I'm going to copy there let's just get there and use the background of I don't know CCC would be fine and sell my file and let's just provide a little bit of margin of two not two but I guess 10 10 pixel would be fine so I'm gonna just save this file and it will provide it for all of them so you can wrap you know we don't have priority styling what the hell I'm going to just remove the styling from here and that's looking cool so this is how we are going to be reading the data and this is how we are going to be rendering all of that data from external API to the browser there are a lot of apis you can explore like uh I don't know um fake user API and there are a lot of them like I don't know user API and I don't know what the hell was that and here you can see we have Peg user API we already discussed about that and we have a random user generator there we go so we built a lot of projects so so I'm gonna just open my YouTube channel right here and I want to show you like where you can found all of their projects and where you can found just a specific to this uh external apis project so now let me just show you there and I don't know what the hell happened to my Internet it's like more than a slog okay so here you can phone um where is my 100 foreign projects right here so now let me just open that and here you will found all of their projects right in here so you can learn and you can create all of their projects with me if you wanted to so here you can see how so this one is external API this one is also external API this one is external API and let me just show you this one is also external API and this one no this one is an external FBI um let's let me just show you the other one Yep this one is also using external API this one is also using external API this one is external API this one is also external API this one is external API and there are a lot of projects like this is 100 projects in 100 days so you can like build if you build like I don't know maybe 30 or 40 Projects so you can apply to jobs and you can jump to react or all of that kind of stuff so yeah then was it about JavaScript and I'm gonna see you in the next course I'm just kidding alright so now let's learn about their crying catch blocks which we've been using for a while now okay so award in the world are there trying to catch blocks and why you should care about them so in JavaScript they're trying match our keyword used to implement an error handling and error handling is essential when writing a code to gracefully handle unexpected errors and exception there may occur during the program execution the try and catch blocks work together to enable developer to catch and handle errors preventing them from crashing the entire application okay so now that was just a quick definition of what a try and catch blocks is and now let me just give you example of that so let's suppose we have some sort of a function so I'm going to just give a name of like I don't know Parts Json or something like that and it will also take a Json string right here and I'm assuming that you already know how a Json works and what it is okay so what I'm going to do is that I'm going to just first of all write this try and catch block and here we are going to be writing something good if something good happen it will happen right here if something bad happen inside our program so that will happen right in here okay so what I'm going to do is then I'm going to just write like const er SED pause data there we go and I'm going to just use like Json dot Parts method right here and we are going to be just specifying our Json string right here and we are going to be also returning our parts um data right here oh you know instead of writing all of their code I'm going to destroy like returns German uh right in here so now let me just save that and now inside a catch block we are going to be passing this error right here you can just write an e or you can just write a ER if you want to but I'm going to just pass my error just like that okay so what I'm going to do is I'm going to just log to the console this and error occur notable C I mean like audible c u r double there we go uh while parsing Json okay so now we have to just render or error and also we have to get this message on this error right here so it will give us their object and inside this object we have this error message right here okay so we are going to be just returning no from this function finally so now we successfully create our function so now let's just Square it over valid and invalid uh Json right here so first of all I'm going to just create like valid Json and it will be now equals to um you know first of all I'm going to just write my curly brace right here and I'm going to just close the uh you know first of all let me just write that codes right here this one right at a regular on Json right here so I'm going to just write my name and I'm going to just store that I mean like I'm going to store my own name like because then there we go and now let me just put a comma I'm gonna also Store The Edge um Edge will be like 19 in this case and yeah that's true and there is my valid uh Json right here so I'm going to just wrap there with this uh curly braces right here so now let me just call there but before I do I'm gonna just write like constr result one and it will be now equals two parts Json right here and we are going to be just passing over validation right here as a argument to this function and now let me just log to the console this result one and now if you sell there and here you can see it will not use their data and everything is working totally just fine and it is now returning it uh I'm like it is now returning and it is also parsing that data which we are providing right here so what if we provide the inverted Json right here so I'm going to just write like in valid or you know invalid on Json like so and it will be now equals to you like I'm going to provide my curly braces and here I'm going to just for like I don't know name oh you know let me just copy that from here and I'm going to just make a typo in there let me just place it right here and I'm going to just provide a comma at the end right here this code is no longer a Json core and it will give us an error here because here you can see we provide this comma and we are not porting anything else but finally we are providing this comma so this is now invalid Json so I'm going to just write like cons um const result 2 and it will be now equals to pause Json and we are going to be just passing our invalid Json right here so instead of writing that result one I'm going to just write result two and now if you sell there and here you can see it will not use this an error occurred while parsing a Json unexpected double coded property name in Json at position this okay so it will now gives us that error right here okay we can also use console.error so I'm going to just use like console.error so now if you save that and now we have to open our errors right here and now it will not use like an error occurred while parsing a Json and expected double coded property name in Json at this position right here okay so this is how we are going to be passing or try and this is how we are going to be passing our catch block right here in JavaScript