JavaScript Full Course | JavaScript Tutorial for Beginners | JavaScript for Beginners | Edureka

Key Takeaways

[Music] hello everyone and welcome to this video on the JavaScript full course by edua JavaScript is a versatile high level programming language essential for web development initially created to enhance webpage interactivity it has grown to be one of the most popular and Powerful languages JavaScript enables Dynamic and responsive user interfaces realtime application and complex animation it's flexibility allows it to run on both the client side and the server side extending its use to mobile game and desktop development with Frameworks like react angular and nodejs JavaScript empowers developers to build robust scalable application making it crucial for modern programming now without any further delay let's outline today's agenda for this JavaScript full course first we will explore what JavaScript is then we will move on to the installation and setup of JavaScript where you learn how to set set up your development environment to write and run your first JavaScript program next we will dive into JavaScript Basics and understand the fundamental building blocks including syntax variables and data types following that we will learn about different JavaScript loops and how to control the flow of your program with for while and dowi Loops then we'll Implement efficient data handling with arrays in JavaScript afterward we will dive into string manipulation techniques with Sub strring in JavaScript additionally we will gain a deep understanding of writing reusable and modular code with JavaScript functions next we'll explore the JavaScript form validation techniques to enhance your user input handling and Security in web forms following that we will cover regular expressions in JavaScript moving ahead we will apply our knowledge to real world application by developing a game using JavaScript which will enhance your practical skills and understanding of JavaScript capabilities next we will work on JavaScript projects to solidify your learning and gain hands-on experience finally we will prepare for job interview with JavaScript interview questions and answers covering common questions and providing expert answers to help you succeed in interviews but before we begin please consider subscribing to our YouTube channel and hit the Bell icon to stay updated on the latest tech content from edura also visit the edura website for fullstack developer course the link to which is given in the description box [Music] below so what is Javascript now JavaScript is basically a highlevel interpreted programming language which is used to make web pages more interactive now it all started in the year 1995 when Brent and I created JavaScript in a span of 10 days since then it has seen multiple versions updates and has has grown to the next level now JavaScript is basically the language of the web so it is used to make the web look alive by adding motion to it not to be more precise it is a programming language that lets you implement complex and beautiful things or design on web pages previously we explored what is Javascript now we'll move on to how to run JavaScript in Visual Studio code where Learners will learn how to set up their development environment and execute JavaScript code efficiently so now let's get started with the installation of vs code and then we'll move on to nodejs installation so go to your search browser type vs code and hit enter you can see the first website click on it you can download it from here for the machine you need so ask is window I'm going to install it from here while this is downloading let me go and download nodejs type nodejs and then hit enter you can see the first website nodejs.org go to that and you can download this one node js. LTS we can see both of our application have downloaded now let's go to our file manager we'll start with vs code I'll just go ahead and run it so click on the accept the agreement then next keep the path as default it will be easier for us then click on next then next make sure you click on all of these so it will be easier for you to run files using vs code then next and we'll wait for it to install I'll uncheck this and click on finish because I don't want to run it right now next we'll go with the nodejs click on this click on next accept the terms and agreement then next keep the path as default it is very helpful please make sure it is uh rememberable location then click on next and these are all the packages that will come with it in PM the largest JavaScript library and it will also add it to our path so I'll click next I'll go ahead and click on next and then on install finished click on next now let's go ahead to our desktop you can see Visual Studio code over here I'll create a new folder and name it program now let's open our vs code so this is here now go to files and click on open folder go to our desktop and select the folder that we have created already yeah so our folder is empty and close this now before running JavaScript let's go to our extension and install something for this so extension name is live server hit enter you can see the first one click install over here wait for a while after that let's go to our file I'll close this now let's create a new file in our program folder I'll name it index HTML you don't need to know much about HTML well if you are going into front end development you need to but back end not much now let's go ahead and type exclamatory Mark and hit it so this whole thing will come up you don't need to type it now in the body let's start with our basic things I'll type one header H1 and then put hello world save it and then let's go run it open with live server now take you to our default browser so we can see it is running on 5,500 port and we can see it is Hello World in the H1 heading now let's go ahead and try something different H3 please like and I'm going to save this just go to my page and run it again so we can see this has changed now this is for the HTML if you want to write a JavaScript script in this you have to go to the end of body and then type script it'll come now you can type anything that is Javascript over here and it will consider it so let's try console.log please subscribe save it go to our page refresh it now it is a JavaScript you won't see it here we can find it in our console so for console right click go to the end of page click on inspect then you can see element and console over here we can see Please Subscribe from index.html now most of us won't be using script within the HTML file so I'll just go ahead and remove this and create a new file now I'll name it main.js make sure all the extensions are correct now this GS file there's no need to type script just write console.log and whatever the command you're putting save it now let's go ahead and run it again let's go to our console to check if something has changed and it is empty because there is no script over here and we have the script over here but we have not included it so let me go and finish this I'll type script now to reference main.js here type SRC equals to in exim Mark we are want to type the file name main.js and then close it so that is all you'll be needing to run JavaScript now save it and let's refresh it over there you can see share is there from main.js earlier it was from index.html now all of this will be running in your browser for the nodejs you can go to your CMD to check if it is installed click on CMD type npm npm is largest library and V check the word we have npm 10.7.5 now for the node it is version 20.1 15.0 now there are two ways you can go and directly run node.js or you can go in command and type note your nodejs will start over here let me Zoom it in for you let's type our favorite console.log [Music] hello just enter now you know how to run your code in vs code and also in node in a last module we set up our JavaScript environment next we'll learn JavaScript Basics where Learners will dive into course syntax and essential programming constructs used in JavaScript so basically there are a lot of queries about why do we need JavaScript and what it can do when we have HTML and CSS already but JavaScript as a language helps you build a website that will do a lot more than just gaw at you now currently we have hundreds of programming languages and everyday new languages are being created now among these are few powerful languages that bring about big changes in the market and JavaScript is definitely one of them now JavaScript has always been on the list of pop popular programming languages according to stack Overflow for the sixth year in a row JavaScript has remained the most popular and commonly used programming language now moving on to what this programming language can actually do we see that JavaScript is mainly known for creating beautiful web pages and applications now an example of this is also the Google Maps so if you want to explore a specific map all you have to do is click and drag with the mouse and what's sort of language could do that of course is Javascript now this language is also used in smart watches now the popular smart watchmaker Pebble created pebble. JS which is a small JavaScript framework that allows a developer to create an application for the pebble line of watches in JavaScript not just that the most popular websites like Google Facebook Netflix Amazon Etc make use of JavaScript to build their websites now among things like mobile mile applications digital art web servers and server applications JavaScript is also used to make games a lot of developers are building small scale games and apps using JavaScript now a lot of people ask about where to run the JavaScript code now when it comes to running the JavaScript code you can use the console which is pretty simple because you can just type whatever you want to do with your code and you will see the output here itself or you can use any text editor for example I will be using the visual studio code and show you how you can write your code here and then how you can run it in your website and see how it works so you can work it both ways you can enter any data or input here and then you can go back to your console and check your output also if you have to check anything for your code you can check it inside the console itself now JavaScript was originally designed to run only in browsers so every browser has what we call a JavaScript engine that can execute JavaScript code for example the JavaScript engines in Firefox and chrome are spider monkey and V8 so it's pretty easy for you when it comes to running JavaScript code online now JavaScript can build the backend for our web and mobile applications so in a nutshell JavaScript code can be run inside of a browser or in node browsers and node provide a runtime environment for our Javas script code so now that you know where the code runs let's move on and have a look at the different benefits of JavaScript now there has to be a reason why so many developers love working on JavaScript well there are several benefits of using this language such as it's easy to learn and simple to implement now it is a weak type programming language unlike the strong type programming languages like Java and C++ which have strict rules for coding now it's all about being fast in today's world and since JavaScript is mainly a client side programming language it is very fast because any code can run immediately instead of having to contact the server and wait for an answer not just that it has Rich set of Frameworks like angularjs reactjs which are used to build web applications and perform different tasks lastly it also builds Interactive websit now we all get attracted to beautifully designed websites and JavaScript is the reason behind such attractive websites and applications now finally we will have a look at the setting up of the development environment or the IDE now there are different editors that you can use for writing your JavaScript code so there's Visual Studio code and then we have Sublime Text and then we have atom as well now these are pretty famous and popular when it comes comes to working on any programming language but when it comes to choosing the favorite one I would definitely opt for visual studio code so today I will be using the visual studio code in order to show you all the examples and also explain the fundamentals of Javas script now out of these my favorite is the visual studio code it's simple and easy to run your codes here now to download visual studio code you just have to type download visual studio code and just go to the website code dovisual studio.com and get your version that is suitable for your system now it's a very simple lightweight crossplatform and Powerful editor so if you don't have Visual Studio code on your machine go ahead and download it right away now in order to become a front-end developer you should also be aware with HTML codes so here we are going to use our HTML code as our host for for the JavaScript now first thing first you must get this live server extension installed here before you try to run your JavaScript or HTML code here so all you have to do is just go to the extensions and then search for live server now I have already installed this so you just have to install this before running any of these codes so now that you are ready to learn how to code in JavaScript let's begin with the fundamentals now talking about the fundamentals the first thing is the variables in JavaScript now this particular programming language includes variables which basically holds the data value and it can be changed anytime so it uses a reserved keyword V to declare a variable now all your variables must have a unique name so now let's get back to a Visual Studio code so this is my basic HTML file here so here I have the HTML head and title and after that I have the script tag as well so inside my body I have a head tag that says welcome to Edy Raa which means when I go to my website it will show me this particular head tag that is welcome to Ed Rea now it's always a good practice to keep your script tag at the end because the browser passes this file from top to bottom so if you put the script element here in the head section you might have a lot of JavaScript code there so your browser may get busy parsing and executing that JavaScript code and it won't be able to render the content of the page now almost always the code that we have in between the script elements needs to talk to the elements on this web page for example if we want to show or hide some elements so by adding the code here at the end of the body section we will be confident that all these elements are rendered by the browser so here we use a variable to store data temporarily in a computer's memory so we store our data somewhere and give that memory location and name and with this name we can read the data at the given location in the future for example think of the boxes that you use to organize your stuff you put your stuff in various boxes and put a label on each of them so that you can find your stuff easily now a variable is basically like a box so what we put inside the box is the value that we assigned to a variable now that's the data and the label that we put on the box is the name of our variable so let's see what's the code for declaring our variable here now in the old days we used to use the V qord to declare a variable but there are certain issues with that so now we have started using the let keyword to declare a variable so first we will use the let keyword here and then we have to declare a name for our variable and your name should be something that is understandable or by looking at the code you can see that what you are trying to write so here I have a code with the variable name so I have given the name as Eda and then I'll just write console.log name so now once I save this code and finally we will save this code with the extension. JS so this is our Javascript file now in order to run this in your web browser you need an HTML file so so now this is where this file will come into existence so here I have added one source which points to my Javascript file so here I have just given an extension as SRC equals to index 1. JS which basically takes me to my Javascript file so now when I run this HTML file it will take me to the browser and you can see the heading here that is welcome to Ed Rea now how do I get this console so you just have to write click on your website and go to inspect and once this window has come up you can just go to console now inside console you can see that you have edua mentioned here why because we have declared a variable with the name Eda so our output was console.log name so as soon as we run this code and go to our console you can see Eda now in case I changed the name for example I'm just changing the name to learn JavaScript now make sure you give something unique because you cannot use the keywords that are there in JavaScript as your variable names or any sort of value so here I have given the value for my variable as learn JavaScript now once I just save this and go back to my browser and once I refresh this you can see that it has been changed to learn JavaScript now previously it was Eda and now you can see that the name has changed to learn JavaScript because is the value also has changed here so now that you have seen how this variable works here let me tell you about certain rules that you need to follow while writing the name of your variable now the first rule is that it cannot be a keyword that is it cannot be a reserved keyword in JavaScript for example let where these are all reserved keywords for JavaScript so you cannot use them as your variable name next next step is you should always have a meaningful name so you must keep in mind that when you are giving a name to your variable it must be meaningful and understandable while just seeing the name itself also your name must not start with any number so how odd would that be to just have a name that begins with a number like one edure or two edure Rea so it does not look good that way so you must not have a variable name that starts with a number next up you must keep in mind that there should not be spaces or hyphen when it comes to the name of your JavaScript for example I have written learn JavaScript here I can also just write it like this in order to separate the two things but there should not be a hyphen or a space in between the two words so you just have to write it together also the names here are definitely case sensitive that means if I write learn JavaScript like this and then I change it to learn JavaScript with a capital l these two will be considered as different names because it is case sensitive so now this was all about variables now let's move on and take a look at constants Now by declaring a constant you basically assign a meaningful name to a value so once a constant is declared it cannot be modified or assigned any other value so now let's see how we can define a constant in JavaScript so for example you want to describe your name in two different parts such as the first name and the last name so suppose you have let first name is equals to edura and then you have last name as JavaScript so here you would need a semicolon to separate the two things and declare it separately in such a manner but rather than doing this you can just use constants that makes your work easier so now let's see how you can use the constant in your JavaScript code so now let me just take the variable name as AG so for AG we have a specific value suppose I'm giving the age as 23 now when I type console. log age and then let me just save this one again and now on once I go back to my website and refresh it you can see that it gives me the value 23 so here what I'm doing is I'm declaring a variable but also I'm giving it a constant value so now I cannot change the value of my age here now sometimes we don't want the value for our variable to change because otherwise it's going to create all kinds of bugs in our application now in those situations instead of a variable we use a constant so that the value of of a variable that is the name implies can change but then the value will remain constant now in the next line I give AG is equals to 21 and then now let me save this one and see what output do I get when I run this one so let me just refresh it so you can see that I get an error here because we have already declared a constant value for H which is 23 and again we're changing the value to 21 so this will def defitely give you an error that is the uncut type error assignment to constant variable so here your variable AG is a constant you cannot assign any other value to this variable anywhere so thus it will show you an error so basically we cannot reassign a constant so once you have used constant you cannot change the value so the best practice is to use where whenever you're planning to change the value next so now that you know what are variables and what are constants you must be wondering what are the kind of values that we can assign to these variables so now let's move ahead and have a look at the different data types that you can use so now here we have two different types so first we have the Primitive or the value types and then we have the reference types first we will have a look at the different primitive types now the data types are basically the type of data that can be used and manipulated in a program so the different data types include the numbers strings Boolean undefined and null so now talking about these data types let's go back to our code and see what are string literals what are numbers what are booleans so let's just type let name equals to Eda then we have another variable as age which is equals to suppose 23 now for checking Boolean let's just give another variable as is approved is equals to true so true and false are the ones that represent our Boolean values so this one is basically our string literal and this one is our number literal this one we are using for Boolean next up if we just write let first name and put a semicolon it Auto automatically gives an undefined value to this one but we can also write it as first name is equals to undefined so there's basically no value assigned to this particular variable now the final one is the null value so let me just give it as let date equals to null so now let me just save this and then let me go back to my console again now once I refresh it so basically I have not given any console here so there's no output in my console but then you can always check the type of your literals here so what I have to do is just type type of and then if I want to check the type of my variable name so I can just give name and it shows me string so here I have my name as Eda which is a string literal so this is exactly the value that it is showing me here that is the type of my name is string now let's check the type of age so you can see that it shows number so my age declares my number literal here in the same way when we type type of is approved suppose I write type of is approved it'll show me Boolean so you can see that inside the console itself you can find out the types of all of these variables now if I just want to check the type of my date so I'll just write type of date and it shows an object because we do not have any value here we have a null value which is also considered to be an object in JavaScript now this is exactly where the reference type comes in so these were the different primitive types now we will have a look at objects so now that you have seen the Primitive types in JavaScript we will have a look at the reference types in the reference type category we have the object array function so now we will talk about these three different types so first let's talk about the object now object in JavaScript and other programming languages is like an object in real life so think of a person who has a name age address and so on so here I have given three attributes to my particular object suppose the girl is my object so I have three different attributes for this object that is name age and eye color now when we are dealing with multiple related variables we can put this inside our object for example we have two variables name and age here so what we can do is we can declare it as a property for our object so we can refer these two as elements or properties for our object this basically makes the code clear so now let's see how we can decare an object in JavaScript so let me just declare my variable as as girl and inside girl I'll add properties for the girl so we have to begin with the curly braces so now inside the curly braces I will add the properties now the first property was name so let me just give the name as Emily and then we have the age as 23 and then we also have another property as eye color so it's brown now we separate the these properties with the help of a comma now finally we close this curly brace along with a semicolon now I will just use the console.log and find the output for my object which is the girl so now let me just save this one and let's go back to the console and see how it works now inside this I will add the properties for my object which is the girl so here you have to give the name of your first property and then use colon and then I'll just write the name as Emily and we separate the properties with the help of a comma so the next property is H so I'll write it as 23 and then we need to close the curly braces along with a semicolon now I'll just type console. log and the name of my object that is girl and close it with a semicolon so so here I have declared this variable or my object which is the girl and inside girl I have declared certain properties for the girl which is the name and the age now let me just save this one and go back to the console and see so you can see that once I run this code I'll get to see the properties for my object so it shows the name that is Emily and age as 23 now suppose we want to change the name of this particular object what do we do so this is exactly where we use the dot notation so what we will do here is we will just give the name of our object which is girl. name suppose I want to change the name here so I'll just give the name is equals to and I'll give another name here suppose I want to give the name as John and then add the semicolon now let me just save this one and see what happens to the output so now once we go to the console you can see that the name has been changed to John here now this is one approach there's another approach that you can change in order to change the name so what you can do is use the bracket notation now what is this bracket notation so we can just type girl and use the square brackets so inside the square brackets I'll give the name that is for the variable that I'm planning to change so my name now will be equal to suppose I want to give the name as Sam so I just type Sam and close it with a semicolon and then now let me save this one now once I go back to my console and see you can see that the name is changed from John to Sam again so these were two different approaches that is the dot notation and the bracket notation through which you can also get into the property of your object and make any particular changes I have a simple question for you guys and the question is which of the following is the correct way to declare a variable in JavaScript options are on the screen screen if you know the answer please leave it in the comment section below we just wrapped up the basics of JavaScript syntax variables and data types coming up we'll discuss JavaScript Loops where Learners will understand how to perform repeated actions efficiently using different types of Loops now what are these JavaScript Loops so JavaScript Loops actually provide a quick and easy method of doing something repeatedly so they are used to repeat an action any number of times without having to repeat the same line of code again and again now there are mainly two types of Loops first we have the entry controlled loops and then the exit controlled Loops now in the entry controlled Loops the test condition is tested before entering the loop body so here for Loop and Y Loop are the entry controlled loops and for the exit control loops the test condition is evaluated at the end of the loop body body therefore the loop body will execute at least once irrespective of whether the test condition is true or false now do while loop is an exit controlled Loop so now let's move on and see what is for Loop and how do we work with for Loop in JavaScript now this method is actually a concise way of writing the loop structure so a for Loop repeats until a specified condition evaluates to false so you can see that first we have a start point and then we have the item from our sequence and then we execute that statement and if there are no more items left we go to the end but this Loop will continue until there are items present in your sequence so let's have a look at the syntax of our for Loop so in order to Define your for Loop what you have to do is take the for keyword and then inside it you have to pass different parameters so first parameter is our initialization condition so here we will be initializing the value of our variable or what should be the condition so this is basically our first parameter then next up we have now what happens here is that we enter the testing condition that we are going to put for our for Loop for example in the initialization parameter we are giving the starting value for our variable so here we can write X is equal to 0 or X is equal to 1 and here here in the testing condition we will provide the value or the condition till which this Loop should go on for example you want the loop to go on till the value turns to five for X so here your testing condition should be X less than or equal to 5 and finally we have the increment or the decrement value here now what happens here is that this is our increment or decrement value for our variable so we will check whether we are incrementing our our variable or decrementing it for example either we can add plus one to our variable and go on with our Loop or we can go backwards and keep decrementing the value of our variable now once you have initialized all these three parameters then you just have to write the statement inside that and you done so this is the Syntax for your fall Loop now we will move on and see how this fall Loop can be implemented in a code and how it actually works so here here let's take an example and see how the fall Loop will work so first let me just initialize a variable suppose let me take the variable to be X and now I have to start with the for Loop here so let's see what are the values that I'm going to put inside these parameters so the first one was my initialization condition so here suppose I'm initializing the value of x to be zero so this is my initialization you can also put the value to be one or anything else else but here I'm initializing the value of my X to be zero so basically the loop will start from the value zero now next up was the testing condition so suppose I want this Loop to go on until the value of x is less than or equal to 5 so this Loop will stop or it will come out of the loop as soon as the value exits the value five so here I have given the testing condition to be X less than equals to 5 and finally I have the increment or decrement value so here from zero that is the initial value my value needs to increment and go until 5 that's why I have to give the increment value which is written as X ++ if you want to decrement you would be writing it to be x- minus so now I'm done with the initialization of my X variable and also I have inserted the testing condition and also the increment as well so now I just have to get the output for this one so for that I have console.log and I'm going to take the variable X because I want the output for this one and see that how the output comes out to be now let's save this one and here I have my HTML file where I have linked the Javascript file that is the example.js so as soon as I run this HTML file I will be redirected to this website so for this I had given a head tag which says welcome to Eddie R up now to go to the output all I have to do is right click go to inspect and then I will get my console here now once I open the console you can see that the output is 1 2 3 4 and 5 so what happens here is that I had initialized the value to be zero and then I've given increment value here so what happens inside the for Loop is that the value of my X is incremented from 0o to 1 and then to two then 3 4 and finally it goes till five the next moment as soon as the value reaches six which does not satisfy my condition that is X should be less than or equal to 5 it comes out of the loop and prints the variable that's why it prints these particular five values that is from 1 to five so this was about for Loop and the syntax of for Loop and also how you can implement this Loop in your code in JavaScript now next up we will talk about the while loop so a y Loop is basically a control flow statement which allows the code to be executed repeatedly based on a particular Boolean condition now this Loop is similar to that of a repeating if statement so what happens here is that you have a starting point and then you get to go to the condition and if the condition is true you go to the conditional code and then back to the condition itself in case it's false it goes to the end so until you finish with that condition your conditional code will keep looping here now to understand the Y Loop in a simpler way let's see how this works now talking about the syntax let's see what is the Syntax for our while loop so we just have the keyword as while and inside this we will pass our Boolean condition so here we do not have different parameters here we just have one condition that is we either check for True or for false this is how while loop is different from Fall Loop so you just insert the bullan condition here and then inside this you add your Loop statements so this is the Syntax for your while loop you just have to insert your Boolean condition and then continue with your Loop statements and then you will get to see how it works so now that you know the syntax let's move on and have a look at an example of while loop so now here I'm taking another variable that is variable x equals to 1 so here I'll be initializing the value because inside y Loop we do not have different parameters to pass the values so I'm initializing the value as one here now next up is my while and Boolean condition so what I have to do is take the while keyword and inside this I have to put my Boolean condition same let me check for this one as well suppose I want the x value to be less than equal to 5 so the loop should come out as soon as the x value crosses five so now here is the difference between the for Loop and the wi Loop so here we just have the Boolean condition and then we have to put it inside the curly braces so what happens here is that the increment or the decrement value comes later on so what we will do here is that we will insert the increment value here as x++ and then I'm closing this so now you can see that first we have initialized the variable value here that is X = to 1 and then we have given the bullion condition here that is X less than equals to 5 and finally I have taken the output of X and after that I have taken the increment value so what happens here is that it increments from one and goes till five as soon as the value reaches six it comes out of that particular Loop so now let's save this and go back to the console so now you can see that here we have the output as 1 2 3 4 5 because in while loop what happens is that we starting from the initial point that is one and we go on until the value crosses this condition so here we have given the condition as less than equal to 5 so the loop goes on until the value of x is still five and finally we have printed the values from 1 to 5 for X so this is how the while loop Works in JavaScript now next up we have another different kind of loop that is the do while loop it is almost similar to the while loop but let's see how this one works now as I said this Loop is similar to the while loop but the only difference is that it checks for condition after executing the statements in the while loop we gave the condition beforehand itself but in the do while loop what happens is that first we will execute the statement and then we will check for the condition that's exactly why it is also an example of the exit controlled Loop so now let's have a look at the Syntax for while loop so here we have the do keyword and inside that we have our statements and finally we put up with the while keyword and insert our condition here so as I said before what happens here is that we first execute these statements only then we go for checking the condition here so this was the Syntax for the do while loop now let's see how this Loop actually works so we will take an example here and see how the do while works now going by the syntax so first I have to initialize the value for x so for example I'm taking the value of x to be 20 here then next up I have to use the keyword as do now after this I will be executing my statements and then I will insert my condition so what happens here is that to execute the statement I have console.log X and then I'm giving the increment value that is x++ now once I'm done with this finally I will insert my condition here so for that I have the while keyword and now inside this suppose I'm giving the condition to be X less than 10 so what happens here is that it'll only take the values if the value is less than 10 so here I have initialized the x value to be 20 so what happens here is that I've have taken the condition later on now what happens it will check if the condition is true or false now now you can see that once I have executed this particular statement my x value is 20 but according to the condition my X should be less than 10 which is false so it'll go back and print the value to be 20 here because here the execution of statement comes first and the condition comes later on so now let me save this and when I go to the console you can see that the output here is 20 because it has first executed the statement and and then checked the condition so if the condition is false we will go with the initial value of our variable now what happens if I change the value for my variable X so suppose my variable value is now five so what happens here is that first it will execute the statement so it'll keep incrementing the value of five and then it'll check the condition now you can see that here the condition is X must be less than 10 so now this satisfies the variable value as well so the condition here is true so now what will happen is the value of my variable X will be incremented and it'll go on until the value is less than 10 so I should have the values to be 5 6 7 8 and 9 now let's see what do I get it as the output so let's save this now when I go to the console you can see that my output is 5 6 7 8 and 9 so here what happened is it has executed the statement and also when finally we have checked with the condition it's satisfied with the condition as well so we have printed the loop to be 5 6 7 8 and N now next up is the Forin Loop now this Loop iterates a specified variable over all the innumerable properties of an object for each distinct property the JavaScript will execute the specified statements so now let's see how this 4in Loop works but first let's have a look at the Sy tax of the for in Loop so what happens is first we have our for keyword and inside this we have our variable name and then we use the in keyword here and then we have objects so what happens here is that it'll take the variable name in your object and this is how the for in Loop actually works and after that we have these statements and this is exactly the syntax for for your Forin Loop so now let's see how this for in Loop Works in JavaScript so let's take the example here so for that first we have to declare our object so let me take the object to be characteristic and here let me add certain characteristics so suppose I'm taking the characteristic of a person so for that the first parameter is name and then let me take a second parameter so the second parameter would be AG then we have a third one to be eye color and finally we have another characteristic as the height so these are some of the characteristics of a person that I have defined here now according to the Syntax for the forign loop we have the for keyword and inside this we have our variable name suppose you're taking the iteration here so we have the it in characteristic now before that we also have to initialize the variable here so let's take the variable as it for iteration and finally we have the for Loop inside which we have our variable name in object and this is our object which is the characteristic now we will just take the output for this so for that we have console.log and here we have our object name that is the characteristic along with the variable name that is the ITR so now let's save this and go back to the console so now you can see that we have got the output as name age I color and height so what happens in this Forin Loop is that it takes the innumerable properties of our object which is the characteristic and for each of these distinct property we execute the specified statements so this was about the foreign Loop in JavaScript now we will move on and have a look at the break statement now talking about the break statement here is a very simple Syntax for this one so we just have the break keyword and here we have our label name now what is this brake statement so the brake statement is used used for jumping out of a loop so it'll help you in Breaking the loop and also continue executing the code after the loop so now let's see how this break statement works here so first I have taken a variable I here now here I will have my for Loop so inside the for loop I will have my initial condition so suppose I'm giving the initial value to be zero for I and then we have the testing condition so for example example I should be less than equals to 5 and then finally let's increment this value now in this break statement we have another condition that is the if condition so here let me take another condition as if I equal equal so here we have the triple equals that will stop the loop as soon as it reaches that particular value so I'm taking the condition to be I equal to 3 so as soon as the value of I reaches three we have the break statement here so what happens is that the break statement will break the loop as soon as the second condition is reached that is the value of I becomes three so now once you're out of this Loop now let's finally take the output for this one so for that we have console.log as I so now let's save this and go back to the console so you can see that we have got the output as 0 1 2 because as soon as the value reached three there is a break statement here which broke the for Loop so we came out of this particular Loop and only the three values have been printed now let me just change this value to 10 and this condition to be five now let me save this code again and let's go back to the console so now you can see that the values have changed from 012 to 0 1 2 3 4 because the condition has changed to five so as soon as the value reached five the break statement came out of this for Loop and then we only got the values still four so now you understood how the break statement helps you come out of a particular Loop and also it provides you another condition so that you can come out of the loop apart from the testing condition itself so this is how the break statement Works in JavaScript now we will move on and have a look at how the continue statement works now the syntax for continue is also similar to break just here we will have the keyword as continue and then we will have a label name here now the Contin statement breaks one iteration in the loop if a specified condition occurs we saw in the last one that when we use the break condition as soon as the condition was reached we came out of the entire Loop but with the help of the continue statement the loop will continue it'll just break at that one point when it reaches the specified condition now the difference between continue and the break statement is that the continue statement jumps over one iteration in the loop instead of jumping out of the entire Loop so I'll show you the example of how the continuous statement works here so let's have a look at the same example here this is the example we used for our break statement so just in place of break we will be using the keyword as continue so here we have a loop which goes on until the value reaches 10 and here we have a condition which says I value is five so let's see how this works so let me save this and go back to the console now you can see that we have all the values in the loop printed here except for the value five so after four the loop came out or skipped one iteration where the value or the condition was if I was equals to 5 and then it went back to the loop and continued with the rest of the iterations so this is exactly how the Contin statement works so suppose I change this value to five and then change the condition that is if condition to two and now let's save this and now when I go back to the console you can see that I have the values as 0 1 3 4 and 5 only the iteration where the value of I was two is missing here and otherwise it continues with the rest of the loop so this was about the continue statement in JavaScript I have a quiz question for you guys and the question is which Loop is best suited for iterating over an arras element when the index is not needed options are given on the screen if you know the correct answer please leave it in the comment section below after learning about loops in JavaScript we'll proceed to array in JavaScript your learners will explore how to store and manipulate collection of data using array a fundamental data structure in JavaScript now what are the JavaScript arrays the arrays are basically used to store multiple values in a single variable itself so the array is a special variable which can hold more than one value at a time now for example if you have a list of items in your shopping cart you would want to store it in one place for example you would create a list of all the items that you want to buy now the array represents those elements in your list so you can have a look at the syntax of array here you just have to Define your array name and then you can put up the item names from your list inside the array itself it can hold more than one item inside the list so this will help you have one particular sorted list for all your items that you want to keep a track on now there are a lot of confusion between the arrays and the objects so while working on JavaScript and using the console if you're using the type of operator and checking the lists in your array it will show as objects so there's a lot of confusion between these two now arrays are special type of objects so the type of operator in JavaScript returns objects for arrays as well so you can have objects in an array and you can have functions in an array now we have already seen the syntax of how you can write an array in JavaScript but there are two different methods as well either you can Define one array with no values inside it or you can use the let keyword give the array name and also write new array that will create an undefined array and for object all you have to do is take the let keyword and Define the name of your object and inside the curly braces you have to define the parameters that you have taken for your object for example here you have a girl and the girl is your object with parameters as name Ag and I color so all you have to do is put all these parameters inside your object so now that you know what are JavaScript arrays and how you can Define them and also the difference between array and object let's move ahead and have a look at the different JavaScript array methods and also let's have a look what and all we can do with the help of arrays while writing a code in JavaScript so first let's see how this array works so we have to use the let keyword and I have to give a name to my array so for example I want to put items in a list and for my shopping cart so let's see what we can do so we can give the name as list items equal to and we can provide our items to create the list so suppose I'm just putting elements like bag shoes dress suppose these are the items that I would want to put inside my list now to to get the output we just have to write console. log and inside that my array name that is list items now let me just save this one so here I've created an HTML file and I have linked it to my example.js which consists of my JavaScript code so what I'll do is I've saved this one so now we will just go to the console so once I run my HTML file I will come to this particular web page which has the head tag as welcome to Ed Rea now in order to get into the console you have to just go to inspect and here you have the console option so you can see the output here and also you can see that it'll give you the index number for each of these items present inside your array so now in arrays always the index number starts from zero and not from one so you can see that the index value for bag is zero for shoes it is one and for dress it