An Introduction to JavaScript - Course for Beginners

hello everybody and welcome to this javascript course for beginners so this course is going to aim to teach you the fundamentals of javascript and give you a really good introduction so you can follow along with some more intermediate and advanced topics after completing this this is not going to be a full comprehensive overview of javascript it's really just an introduction and this is going to be great for beginners or people that are just getting started so don't worry if you've never programmed before you can definitely follow along with this and if you have then that's just going to make it easier to understand all of the topics that i'm going through so one last thing i'll say before we get started this course that you're looking at right now used to be 16 individual videos so if you look at my youtube channel i actually have a javascript series what this video is is simply a combination of all of those videos into one and i've re-edited them so it's a little bit easier to see understand and hopefully will just be a better experience for you guys when you're following along with it that being said if you want to skip through or look at the different sections in this course you can do so by going to the description there should be some time stamps and with that being said that's all i wanted to tell you guys so i hope you enjoy if you do make sure you leave a like and subscribe and well let's get into the course content [Music] now i actually know javascript i used to do it a lot when i was younger so maybe 14 or 15 i'm 19 now for any of you that are wondering and i really wanted to get back into it because it's growing as a language rapidly and there's a lot that you can do if you know both python and javascript you can move into kind of a full stack developer position where you understand the front end and you understand the backend so that's an advantage for any of you guys if you do know another programming language especially something like python or kind of a back-end web technology if you learn something like javascript that is really a complementing skill and that's the reason that i want to teach it to you guys but what really is javascript now i'm sure some of you guys don't really understand exactly how it works or what it is but essentially javascript is a language that is run primarily from your browser so unlike python which is typically a server side language which is going to run off a linux server and be responsible for doing the back end of websites and http requests and all of that when you have javascript what it's going to be doing is dealing with some front-end information so it's actually going to run directly in this chrome web browser and it's going to be responsible for your interaction with the page so essentially say i click a button so here download for windows we're going to talk about this in a second that will run a javascript function that will actually you know download this and same thing with a lot of other features on this page and just other web pages in general if you see any kind of games made in the browser chances are they might actually be made with javascript and there's just a lot of things that you do kind of front end wise using that technology now this is great and makes this language super flexible and really great to learn because this essentially means you can develop for any platform if you know javascript whereas something like python you know you need to make sure you have a compiler on that actual computer and it might not necessarily work depending on what environment you're in whereas javascript all you need is a web browser to actually run that code which means essentially one javascript will work on any device any computer so long as it has a web browser that being said javascript is also a massively growing language a lot of high-tech companies are looking for people that know javascript it's a really easy way to get into kind of web development and actually secure a job especially if you don't have an education or a background in computer science or software engineering or something like that so anyways that's enough for kind of the information about that sorry if i bored any of you guys but now let's get into the environment setup start writing a basic hello world program and then we'll end off at the end of there and move into some more advanced stuff in the next video so the first thing that we need to do if we're going to write javascript is we need a place to write it now what i'm going to be using is sublime text which is just a pretty standard text editor which will allow us to have some syntax highlighting and some autocomplete while we write our code so i'm going to leave a link in the description but if you need to start off by downloading this editor you can also use any other editor that you want but this is what i'm going to be using for these videos once we do that what we need to do is open up sublime text you might get some pop-ups just scroll through them don't worry we need to create a new file which is actually going to be an html file so what i'm going to do in sublime here is go to file new file you'll see it pops up as untitled as a new tab you can go file save as or simply hit control s and then type in the name of your file make sure i'm just going to call this one tutorial1 although i do already have that file make sure it says all files and add your extension of dot html the reason we're going to do this is because the way we're actually going to look at our javascript code is by running it through the browser which involves us having an html file now you can see here i've already made one so i'm going to kind of omit this step here but that's what you guys need to do now once we have this you should see tutorial one at the top here which is now actually gonna allow us to start writing some code that we can run in our browser now just notice though and i'm gonna try to find this folder wherever i had it so desktop javascript javascript tutorial that when you create a file that's dot html you should see the icon beside it change to be you know chrome or edge or whatever web browser you're using openable now what that essentially means is if i double click on this file you can see that it's going to open it in my web browser now for some reason that's not working for you what you can always do is type in the direct path to your file in your web browser and that will actually open up and the reason we're going to do this is because when we make changes to this html file we'll refresh our web browser and we'll see those changes affect here so this is kind of going to be our console and our output our web browser whereas where we're going to be writing is inside of this actual text editor now i'm going to get started right away and i'm just going to start doing some things you guys might be a little bit confused at first if you've never seen this before but whenever we write kind of javascript code we need to display it on an html page so the basic syntax for creating an html page is simply putting html tags and then you're going to put these body tags like this now i'm not going to focus too much on this syntax because it's pretty simple you can probably understand it fairly easily and i'm sure most of you know it but essentially open tags just simply have the word and then close tags have this slash before the same word so this is our body tags this is our html tags our body tags are inside of our html tags now inside of body what we're going to start by doing is just writing some basic html just to show you how some things work here so i'm going to say h1 tags which stands for header one is hello now i'll demonstrate that when i refresh the page here hello pops up means everything's working you guys should test that as well to make sure everything is proper now that's great but how do we write javascript well when we want to write a script inside of our html what we can simply do is type script now nice for me in sublime text you want to hit enter it's automatically going to fill in some options for me you can see we have the type equals text slash javascript so you don't necessarily need to include that but this is going to specify exactly what language you're writing in because you can do scripts for other types of things inside of html so inside of here is where we're always going to be writing our javascript code unless we're putting it in a separate file and importing it which we'll talk about later so here allows us to actually you know start writing a different language so not html now we're going to write in javascript so what's the first thing that we need to demonstrate in javascript that we can do well the first thing that i like to demonstrate is simply the console so just like in any other language the first thing you typically do is you print something out and you know do the hello world application so let's do that so what console.log is going to do is simply put a log or log a message to the html console or whatever the console is in our browser it says hello world console means we're not actually interacting with the html page we're interacting with the console and you typically do this for debugging purposes and not in a production environment so anyways let's have a look at what this actually does and how we can even see the console up here so if i refresh this page obviously nothing's happening but we've put console.log hello world inside of our script text how do we see this well we need to open up the console now this might be a little bit different depending on what web browser you're using but in chrome it's pretty easy to do this right click anywhere on the page and click inspect this is going to be probably similar steps for edge or any other web browser like that you need to inspect element you'll see that we get something that pops up on the side or maybe below your web page and it says elements and then there's some place that says console now my case i'm just going to zoom in so you guys can actually see this you can notice at the top of my console here it says hello world with an exclamation point and says that that came from tutorial.html 5 which stands for line 5 and that is the most basic step on how we actually log something to the console now that's great but what if i want to actually display something on my web page well what i can do if i want to show something on my web page is use something called document now this is kind of the main thing that we need to understand here in javascript we have two main areas that we can kind of write to we have log or sorry console and we have document console is going to be something that you know the user doesn't see it's in the background it's in that console tab whereas document is actually referencing the html document itself which means we can write information directly into the html document now when we want to write some html directly into the document what we do is document.write and then inside of here we're going to put quotation marks and we're going to put whatever it is that we want to write so in this case maybe i want to write an h1 tag like this that says hello then we'll do h1 hello like that and what this is actually going to do is write this directly to the document now there's something that i noticed i didn't mention here so i'm going to add it quickly whenever we write a line in javascript we need to add a semicolon at the end of it this simply ends for terminate the current line which means get ready to read the next instruction that we're going to have below this now this is kind of the basics this is involved in a lot of different languages but there will be some specific lines we don't need semicolons for but i'll talk about those when we get to them i also want to mention what i'm doing in here notice that i put this in quotation marks and that i haven't just left them like this and then what i put in quotation marks it actually ends up changing colors now this is important and typically when we're writing things inside of here and we're just typing them in we need to put them inside of quotation marks we're going to talk about this more in detail in later videos as we go into data types and all of that but just understand that for right now if you're going to be writing something or logging something you're going to need to put it inside of quotation marks for that to work and what i've done here is simply put some h1 tags hello and i've written this into the document and we'll add an exclamation point so we can see the difference here and now what i'm going to do is just refresh the page and show you what happens so now you can see that we actually don't get anything in the console because we haven't logged anything and we get hello directly underneath it with an exclamation point because that's what we wrote so we can actually write you know html directly to the document by doing that now i'm just going to show you two more things that we can do with console uh with the console and then we're going to end this video and move into some more advanced stuff in the next one so just like we can log some information to the console so console.log you know like hello this is a lock we can also do some other kinds of things in the consoles we can do what's called an error and what's called a warning so i'm going to show you both of them so just like we have console.log we also have console.warn and you'll see the difference in this one immediately i'm just going to call this warning exclamation point now what's going to happen when i refresh the page is we get this little icon that pops up and says that we have a warning and it tells us where this warning came from and what line it was at so that can be useful sometimes when you're creating an application and you want to warn the user that they're doing something that maybe they shouldn't do or not the user but you know yourself if you're developing this and you want to look at it that can be useful to do as well and you get that little icon popping up and we can also do a console.error which is a little bit more strict than a warning and we'll just say this is an error like that and remember our semicolon at the end of that line so let's run this we get this is an error tutorial 8 and you know we get this little x here and you notice this is obviously a stronger kind of statement than this warning so log warning error and this was document.write and those are kind of the fundamental things that you know we always learn when we start learning a language how do we do logs how do we write some stuff and obviously this document all right to write some html directly to the document well it's kind of boring to just like write some stuff and you know do some errors and warnings how can i actually change the value of this how can i move it around how can i change the color i'm not going to show all of this but i'm going to give you the basics and that's something we're going to work towards as we move to this videos and this is hopefully something you guys will notice that i start small make sure you guys really have the fundamental concepts down and then i slowly kind of move into some more advanced topics where you guys will start to understand a lot of people like to kind of do everything in isolation and go really hard on one topic that's good in some instances but if it's too advanced and you don't get it it's really detrimental to kind of the learning process in my opinion so anyways let's now just look at what we did last time so we see we have this hello hello hello to the log warning this is an error that's great what i'm going to do is actually remove all this now and we're going to do something so we can modify this htmh1 tag and actually get the value of it now in html we have something called ids and ids are typically the way that we're actually going to reference and access specific elements in our document so in this case what i'm going to do is set an id for my h1 tag and i'm just going to call this header now you can make this id whatever you want but make sure you put in quotation marks and make sure it kind of looks like this format here so header and what i want to do is i want to get the value or change the value of this h1 tag now how to actually reference this element well like we talked about in the last video we have something called console and we have something called document now the difference between console and document is that console is going to be referring to you know that little console window that we had here and document is actually referring to the html document itself so this whole thing so if i want to reference the h1 tag here with the id of header what makes sense to use console or document well in this case i'm going to say document because this is not a part of the console it is a part of my html document so the method that we use to actually get gain access to this element is something called get element by id now if you've ever seen javascript before chances are you've seen this and that's because this is a very common syntax now what i need to do is actually give the id of the element that i want to access so in here i'm going to type header now let me just kind of break down this line for you because if you've never programmed before this might be a little bit confusing what's going on here document is referring to this html document this dot here means that we're about to call a method on this html document now a method is simply an operation a function something that happens it can get a value it can you know create a value it can do all kinds of different things and you call it by doing dot the name of the method an open bracket a close bracket and then some kind of parameters or parameter inside now there's not always something in here sometimes it's blank like this but usually we have something called a parameter now a parameter is something that you pass to the method a value you give it so that it can do something with that value in this case what this method is going to do is get the value header and return to us the actual h1 tag here that has the id of header to allow us to do some operations on it so the first operation i want to do is actually change the value of hello to be something else the way that i do that is using another method well not really method it's going to be actually a property called innerhtml so here we have document.getelementbyid header that's going to give us this h1 tag dot innerhtml which is actually referring to what's inside of these tags so whenever it says inner html that means pretty much what's between the two tags and now what i can actually do is use something called an assignment operator which is just going to be the equal sign and set this value to be whatever i like so here i'm going to make this tech with tim exclamation point now remember we have to end our line with a semicolon because that's how we know the operation and kind of statement is finished but let's try this i think i've broken this down enough that you guys should understand and when i refresh the page notice all our logs go away and we get tech with tim as the new value for h1 tag so i think that's pretty cool and i mean with very minimal knowledge you can already modify the elements on your page now that's awesome but what if i actually want to get the value of my inner html say maybe this changes to something whatever it is and i actually want to get the value how do i do that well what i can do is rather than changing the value here i can simply print it out and show it on the console or i can actually write it to a new tag and that's something interesting that we can do as well so let's try that so if i actually want to display this on the html page sorry and i don't want to display it in the console am i about to use document or am i about to use console well i would hope you guys would answer with document because that means i'm actually going to display it in the html document so like i showed before i'm going to use document.write and all i'm actually going to do is simply write whatever the value is of the inner html of the element id header so in this case i should write hello but i'm not going to write it inside of any h1 tags so it should look a little bit different and you guys should notice this so let's refresh and now we get hello and we get hello so we've simply just written that you know next word by doing this document to our right get element by id header awesome that is you know pretty much how that works now what i'm going to do is actually create a new tag here and i'm going to call this one an input tag so i'm going to say h1 or sorry what am i saying h1 i'm going to do input type if i could type here equals text and then id equals inp now what this is going to do is simply create a little text box that i can type it the reason i want to do this is because i want to show you how we can change the value of this text box and as we go through we'll be changing some different values and you guys will see how this works for all different kinds of html tags so in this case if i want to change the value of a text box what i need to do is similar to what i've done before so obviously this text box is in my document so i'm going to type document dot get element by id and in here i'll just add my semicolon at the end here what i'm going to do is simply put the id which is inp so what i've done now is you know reference this text box so now how do i get the value of it well i just simply do value now you might think that it would be like dot text but that is actually not the case in this case we're going to do dot value and we're simply going to do what we've done in the previous one it just changed the value so in here we'll do it hello now before i do this i actually just want to show you what the text box looks like without this change so i'm going to introduce to you something called a comment now essentially what a comment is is it is something that is there but is not going to be read by the computer it's a line that's going to be skipped over that you can still have there but it's not going to mean anything so in this case what i've done to actually create a comment is i've done two slashes now two slashes simply means comment it's the same syntax as java if you've ever seen that before and notice that my line gets grayed out and watch when i run this code here you can see that all that actually changes is we get this text box here we don't end up changing the value to a low because this was a comment now if i uncomment this by removing those you'll notice when i go back here the value of my text box changes to hello so that is kind of the basics of how that how that works right now i'll show you a multi-line comma as well which is essentially this so you do a slash a star another star and then a slash now what this allows you to do is comment on multiple lines right so these are all comments this is obviously not you know proper coding syntax just type in hello so this will allow us to kind of skip over that because whereas here if i do something like hello and then i go the next line i type hello you can see this isn't commented out because what this stands for is a single line comment you may see me use some of these so i just want to make sure you guys were aware of how those work all right now what i'm actually going to do is i'm going to make an error here in the code because i want to show you guys what it looks like when you make a mistake because chances are you guys will be doing that quite often as you learn how to do this so for example let's try to just type x in my line here okay and let's run our javascript code and notice that if we're looking at the console here we get uncaught reference x is not defined now these are error messages that you guys will see all the time as you start going through this you'll start to understand what these messages mean i'm not going to explain exactly what this is but it's very important that you actually read these messages so say you know you get an error and like you're commenting down below you're like tim it didn't work i don't know what the issue is what i'm going to ask you to do is give me what this error message is and what line this message is on so that i can help understand what the issue is so these are meant to be useful messages that kind of tell you you know what's going on in your program what's wrong and here we're getting a message saying x is not defined which essentially means we don't know what x is right this is not valid we can't put it here and don't worry if you get an error because all you need to do is fix it and there we go the error goes away so that's what i wanted to show you you guys will get all kinds of these and it's really important that you kind of look up those error messages and start understanding what it is that you've actually done wrong because that's the fastest way to learn rather than you know just sitting there and kind of going how is this work right it's really easy just go to the internet look it up figure out what the issues okay so that i think is really all i wanted to cover i'll show you one more thing which is let's say we want to print out the value of our text box and this is uh let's see actually console.log document.element so in theory what this should do is print out what the value of our text input box is right and that's exactly what it's going to do so i'm going to show you now how this works so what we've done is we've simply logged the value of document.getelementbyid input value right so when we look here you can see that up in here we get nothing but what if i type hello does do we get a log that says hello we are printing out the value of whatever's in our input box is the reason that in the log here i don't get that answer what if i refresh the page i still am not getting hello printed out well the reason i'm not getting that is because what actually ends up happening when you run this code here is we read each line line by line so what happens is we have html we read body read h1 we read this we read this and we execute them in sequence so we start by doing hello then we make this text input box then we go into the script tag we run whatever's in the script so this means we run this console.log and we print the value and this happens immediately whenever we run the web page now can you think about why this might be problematic well essentially if i want to print out the value of what the user typed in this box i can't do that by just you know logging whatever it is immediately because immediately when i refresh the page that text box is blank so if we want to do that we need to use something called a function which i'm going to talk about in later readings variables and data types now variables and data types are kind of the core fundamentals of any programming language and they're usually fairly similar but you need to understand them before we can move any further so let's start by talking about data types and we'll get into variables so in java we have something called primitive data types now you're not going to know the difference between a reference and a primitive data type which are the two data types we can have until much later in the series but i will tell you the ones i'm going to show you today are called primitive now primitive essentially means these are defined at a programming language level they are kind of standard to this specific language and the way that they work has a defined you know set of things that you can do on them i'm having trouble explaining them because if you don't know reference it's hard to give you kind of a comparison but for now everything we're using is going to be primitive and just that's all you really need to understand anyways let's talk about our data types we have and actually i'll do these in comments we have a string we have a number we have a boolean we have undefined and we have null and these are the five primitive java data types so let's add that here primitive i definitely prim it to butcher that word anyways there we go okay primitive so what is a string well we'll do it actually before the comment a string is essentially anything inside of double or single quotation marks and that is all that a string is essentially the rule for a string is if it's inside of quotation marks double or single it is a string doesn't matter what's inside of it if it's inside of there it is a string and that is the only thing you need to know to remember strings now a string is a kind of collection of characters so if i do something like this this is a string and the value is hello if i do something like 23 this is a string the value is 23. why is it a string because it's inside quotation marks that's all you need to know collection of characters i can do random characters i can do you know anything i want inside these quotation marks okay number what is a number well that's pretty straightforward it is literally a number so any time we see something like 2.0 8.99 negative 98. 1 000. 0.00009 these are all numbers and notice that they highlight in purple and that they're not inside of quotation marks so that is what a number is but as soon as i decide to put quotation marks around any of my numbers they immediately become a string awesome now just in case you see in other languages i'm just going to let you know that if you do something that doesn't have a decimal point that's typically referred to as an integer and an integer is anything that is you know doesn't have a floating decimal point representation whereas if i do something like 1.0 this is now what we call a float or a double now this isn't important for java because these are all classified under the name number sorry javascript but for other languages you might hear that so i feel like i should mention that to you guys okay boolean this one's pretty easy this is literally the values true or false so boolean just simply stands for true or false you can either have true or you can either have false there's no other values that fit into this category other than those two and notice that when i do true with a capital t that is not the same as true with a lowercase t so these two words exactly the two words i've typed here are the only values that are considered boolean and we'll talk about those later and why we use them undefined now i'm not going to type anything here the reason for that is because undefined simply means that we haven't defined something yet and it's actually a type of its own you can't really set a value to be undefined it becomes undefined if you don't give it a value and we'll understand that when we go into variables now null is very similar to undefined except it's actually a set value so null means you know we're not storing anything yet it's almost like hey we've set up kind of this empty container we want to put something there just so like you know it's okay we have something but it doesn't mean anything and that's what null is so when you type the word no that's the type itself that's all that's considered no and we'll talk about the difference between no and undefined later but they are very similar in nature okay so those are our java data types and i'm going to get rid of them and we're going to start talking about variables so variables are capable of storing any kind of data type now that could be a primitive data type or it could be a reference data type again you don't need to know the difference but a variable is capable of storing some value now the way that we define a variable inside of java was a few different ways or sorry i keep saying java but i really mean javascript just because i do program in java so sometimes i mix them up but anyways the way that you define a variable in javascript is using the var keyword now the first step when you're using a variable or gonna make one is to declare it and that's what this statement is going to be here declaring creating defining those are kind of the words we use to say that so here what i'm going to do is i'm going to create a variable and i'm going to give it a name of x so i'm going to say var x and i'm going to use what i call the assignment operator which is an equal sign to assign a value to the variable x so in this case i'm going to put 6. now i'm going to put my semicolon to denote that we're ending this line this operation and what i've done here is simply to find a variable x which is equal to 6. now i'm going to show you and i'll just do this here and you guys can guess what's going to happen what happens when i do console.log x so if i run my webpage and i do console.log x what am i going to get well before i tell you let's run this and you guys can have a guess here so there we go and notice i was looking up if you need to even use this before because i totally forgot but anyways we get six printing out to the screen so how did that work well the variable named x stores the value six and when i gain access to the variable x so when i type x here it looks for the value of x which in this case is six kind of subs it in so we go six there and then it prints that out to the screen and this is the very fundamental basic way that variables work there's some name some kind of pointer almost to an object and when we access that name it gives us the value that's stored inside of it so just like what you know when you have in math and you say like 3x plus 2 equals 9 whatever you want some value like that x is a variable and it has some value you need to determine the value of it so a little bit different in programming because we just typically set up variables that are going to hold some information we modify them and change them but that's the basic concept behind a variable some name that points to some value holds some value when we access that name we can simultaneously access that value now let's talk about changing variables so here we've defined a variable called x equals 6 but what if i want to change this variable to be the value 9 well since i've already defined my variable by putting this var keyword here all i need to do is simply say x equals 9 and now if i log x notice that our value changes to not so that's how easy it is to change the values now i want to talk about some rules when we do deal with variables and kind of how we name them appropriately so typically and for right now there's a lot of different ways to define variables we're going to stick with this var keyword but we'll talk about some others later and we need to define a name after we put var that's going to be whatever we're going to store now usually we need this variable name to be meaningful it needs to store something that makes sense and the reason for this is when we look back at our program later we're going to see all these different variables all these different names we're going to have no idea what anything means if we kept naming them like t z c we don't know what those variables mean so we typically name them something that makes sense for what the value they're going to store so let's change this up a bit and let's say actually i want to create a variable that's going to store my name well what i would do is i would say variable name which is going to be the name of my variable but coincidentally actually the value name is equal to in this case tim now quick quiz for you what data type is tim well tim is a string so what i've done here is to find a variable called name that's storing the value tim which is of type string so these variables can store obviously all those different things but it's important we know these different types because the type of variable will allow us to do different things with us different things with it sorry so let's print out name and just make sure this is working there we go we got tim awesome good to go okay so let's create some other kind of variables so let's say var t hello equals five now this actually has an issue with it the variable that i've created here and this is what i want to get into my next point in how do we make valid variable names well there's a few rules when we define a variable one of which is that we cannot include any spaces in our variable name if we want to do something that looks like a space what we are allowed to do is underscores but if i do a space watch what's going to happen when i run my program we're going to get an error in our console now why did that happen well because it's saying there's an unexpected identifier now this is what i want you guys to do whenever you know you make a mistake something happens open up your console and see if you have any errors here if you do you can google search them you can figure out what the issue is and then hopefully that will help you kind of fix your problem but those error messages have meaningful information in them so try to read through them you probably won't understand what they mean immediately but if you google search them hopefully the next time you run into that error message you might understand where you might have gone wrong so anyways in this case that's because our variable name is named incorrectly so what i need to do is either add an underscore or change it so that it has the rules applied to it now some more rules for variables are that you're allowed to use any character so any characters on your keyboard that are letters or digits that means i cannot use like brackets and you know all these other symbols inside of variable name i need to use only letters and numbers and those letters can be uppercase lowercase that doesn't matter obviously you can do the numbers how you'd like another rule that applies to variables is you cannot start your variable with a number so i can't do something like five hello and you can see we're getting highlighted like this there's an error here what we need to do is we can do something like hello five we could do you know h3 lo that's fine we just can't start with a number so those are kind of our basic variable names now if we want to do a variable that you know says has like three or four words combined into it say for example hello world it makes sense to typically separate your words with an underscore or to do some camel case like this so hello and then capital on the next word so it's easier to read so i just figured i mentioned that to you guys okay so there we go we have our variable name we have a variable hello world now what i'm going to do is do something you guys probably haven't seen before which is actually set the value of hello world to be equal to name well what is this going to do well what we're going to do is we're going to look at hello world we're going to say okay this is equal to 5. what we're going to do now is change the value and we're going to change it to name what is name store names towards the value tim so that means if i print out hello world like this we get the value tim so that is totally valid we can definitely do that we can set a variable to equal another variable and that is totally okay and notice that if i actually change the value of name so i say name equals hello like this let's see what happens nothing changes and that's what i want you to notice because i defined hello world equals name before i change the value of name hello world is still going to have tim as its value and that's because when i defined it here tim was the value of name but then i changed name after here so let's actually console.log name like this and show you what that is so we'll do it before like this so we'll do it right when we define it then what we'll do is we'll set this we'll change it and we'll print it again so let's have a look so we get tim obviously we get tim again because we printed hello world which was equal to name and then we get hello so that's kind of what i wanted you guys to understand is that the sequence in which we do this is very important just like if i try to print say hello world up here at the beginning of my program and we run this we get an issue we get undefined and the reason we get undefined is because we don't know what hello world is we haven't defined that variable yet and that's what's printing out so anyways that has been variables i've tried to go through a few different examples of you know issues that you guys could run into using variables the different naming conventions for variables as well as the different data types so again remember you know we have our strings which is our quotation marks we have our numbers which is essentially any numbers oops i don't want a character there can't have decimals doesn't need to have decimals it can be negative as well and then we obviously have our booleans which are true false we have our null values and we have our undefined values what is an operator well essentially an operator is something that allows us to perform some operation on data or on operands now to demonstrate this to you i'm just going to start by declaring two variables i'm going to set x equal to 10 i'm going to set var y equal to 5. now someone was mentioning to me in previous tutorials that i do not need these semicolons so apparently you don't need those while you're actually writing your javascript code i'm just so used to the other languages i write in that need the semicolon so anyways that's something to note you don't need to add those but by habit i probably will the benefit of adding these though is that if you do that you can actually assign or do more than one thing in the same line so for example if i wanted to define another variable z and i didn't want to do it on a new line as long as i'm separating these statements by semicolons i'm actually able to do that okay so anyways let's continue now all right so let's just get in and talk about what the operators are and what they do they're pretty straightforward i'm certain most of you will understand so what i'm going to do is create a variable called z and what i want to do is i want to store the result of the addition between x and y now i'm sure you guys can guess how you do this x plus y in this instance our operator is called plus or the addition operator which is right here and our operands are x and y and that is you know the basics of doing this of what operators are anyways what i'm going to do is just log my results to the console here so you guys can see it so let's refresh that we get the value 15 and you know we're certain now that this edition operator is working now i'll go through a few other operators pretty quickly just because it says fairly straightforward so we obviously have our subtraction operator which is going to do a subtraction between x and y so our value is 5 here we also have our multiplication operator which is an asterisk so that's above the eight on your keyboard that's obviously going to do multiplication so 50 is our answer there we have our division operator which is simply one slash this will do our division give us a value of two and we have one more operator that i'm sure a lot of you may have seen before which is called modulus now i'm going to stick on this one for a second just because a lot of people get confused with this operator what this operator does is give you the remainder of a division so if you remember back kind of to elementary school when you didn't really deal with decimal numbers when you used to divide two numbers what you would do is figure out how many times the divisor or whatever i guess the thing is that's going into the number can go into it and then you would calculate a remainder so to give you an example let me just change our values here so we do something like 10 divided by 4 and we say we're not allowed to use decimals we're only allowed to use whole numbers for finding the answer this well what our answer is going to be is okay how many times can 4 go into 10 well 4 can go in twice so that means we're going to have automatically we know we're going to have 2 as our starting number and now we know it's going to be like 2.42 or something like that but the thing is we can't use decimal numbers so we say well we can divide it by 2 and we have a remainder of 2. and that is our answer to this question so what this modulus operator does is give you the remainder aspect of any division so in this case we know the remainder is going to be 2 so let's actually run this and see our remainder is 2. no it didn't change but anyways let's change this to 3 now and i'll show you so if i do 10 divided by 3 what's my answer going to be well how many times can 3 go into 10 it can go in 3 times that's a value of 9 10 minus 9 is 1 remainder is 1 and there we go our remainder is 1. so that's what this operator does if you're confused by it literally just think okay let's you know figure out how many times this number can go into it and then what's left over after that it's actually very useful and there's a lot of instances where you may want to use it okay so that is um sweet so now let me just show you though and i'm actually going to ask the question here since i've done you know x modulus y i've done x plus y or whatever like this and stored it in the value z do the values of x and y change here are they changing as we do this now think about your answer i'm going to print them out and i will show you guys and explain why they don't change okay so let's run this there we go so we have 13 10 and 3. i'll zoom out a little bit and obviously we can see that the value of x and the value of y did not change after we perform this operation and the reason they did not change is because i am actually not changing the values of x and y here i'm simply getting them by writing them and storing the results of their addition in the variable z so the only variable that's going to be changed or declared is going to be the variable z even if i decide to do something like x plus y here you know we'll add our semicolon and we run this again we can see that those values still aren't changing because we haven't told x and y to change we've simply got the result of their addition so what if we want to change x and y and perform some kind of operation on them so let's get rid of all this and let's talk about how we can do this now so actually there's another kind of a kind of assignment operator that we have that has to deal with these logical operators too which is something called plus equals now what x plus equals is going to do is say x is going to be equal to x plus whatever value i put on this right side here so in this case if i put 5 and i go console.log and we put x now x is going to be changed to be 15. the reason again is because what this is doing is when i say plus equals rather than just plus it's going to say all right x is going to be equal to whatever it was before plus 5. let's run this there we go we can see now we are printing out 15. now this works the same for all our other logical operators so minus equals obviously works as well we get our value of 5 we can do times equals that's going to give us 50. we can do divided equals that is going to give us 2 and we can do modulus equals which is actually just going to give us 0. and the reason it's giving us 0 is again because 5 can evenly divide 10 so there is no remainder to that division awesome so that is how those work now i'll do the next example with y just because why not and essentially what we can do here is increment or decrement y so there's another operator called increment and another one called decrement increment is plus plus and decrement is minus minus now increment simply means add one very easy really straightforward and if i run this now we can see that y gives us a value of 4 rather than 3 because this plus plus simply adds 1 and stores that in the value y rather than if i were to do y plus 1 like this you can see the value of y actually doesn't change all right so y plus plus we know that works what about y minus minus well this is decrementing so simply subtracting one that gives us the value of two and those are our logical operators now these operators only work on numbers or at least most of them only work on numbers and i'm going to talk about the specifics now all right so let's define a variable which is a string let's just call it str because why not and let's call this string hello now what do you think i'm going to get if i try to do str plus x well actually in this instance that'll work but let's do something like this var z equals and str plus x let's see what happens when i print z what do you guys think we're going to get here all right so let's run this and you can see we get hello 10. now whenever we have a string and a number and we're adding them together what ends up happening is we simply convert the number to a string and just mush it together with whatever that string is so what we've done here is we said okay we're going to have hello we're going to add that to 10. well obviously these are not both numbers so we can't get some logical answer that makes sense so what we'll do is we'll convert 10 to a string and we'll just kind of append it and put it on the end of hello and that's exactly how that works and this is another thing that we call string concat concatenation now concatenation is typically done between two strings but i guess it works here with a number because we just convert them into numbers but let me show you what happens if i do something like str2 equals hello world and let's now actually get rid of this value zed and let's simply do str plus str2 well you can guess based on what happened when we added 10 to this string what our result is going to be well in this case what we're going to do is simply have hello and then we're just going to mush world right beside it we're going to concatenate them join them together and that's going to be a result which is going to be hello world and this obviously is going to be on one line let me zoom out and with no spaces now if we want a space all we'd have to do is add a space there or add a space there so if i run this we can see we get hello world so that's useful to know especially when you're printing different things out but it also means you know you can mush two strings together and all that's going to happen is you're going to take the one string that your bass string and you're just going to add the other string directly to the end of it again spaces you have to add them yourself if you'd like them to exist and that is called string concatenation okay so that is cool it's not exactly what i wanted to show but i also want to talk about you know what happens if i try to do something like hello minus 3. well what is this going to give us so this is not a concatenation because we're not joining two strings we're not combining them together with that plus sign so what is this going to give us well let's refresh this and we get an error str2 is not oh okay well let's just get rid of str2 for a second and let's run this uh okay run nan what is that well this essentially means that we cannot do this operation whenever we try to do an operation like this in javascript rather than actually just crashing which is nice we're just going to get this nand which simply stands for you know this we don't have there's no answer this we don't know what the answer this is you can't do that same thing if i try actually multiplication might work let's see i know multiplication doesn't work in this so when we do the multiplication we get nan as well which is saying you know i don't know how to multiply a string by three so i can't give you an answer to that state same thing obviously if we try to do something like dividing a string we can't do that this division operator only works between numbers so we're getting that nand value all right so that is kind of how that works i wanted to show that obviously you know if you try to use an operator that can't be used on a string you're going to get an issue in this case you're not getting an error we're not crashing the program but it's simply saying that we can't evaluate this statement we don't know the answer to it so we get that nand value awesome now let's just show a few other examples here and how we can kind of add multiple things together all right so when using operations uh the order of operations is important and that's something i want to talk about so what i'm going to do is actually we'll clear these out and we'll just say var result equals and now we're just going to start typing actually an expression that we can evaluate so what i'm going to do is simply do something like 4 times 5 over 3 plus 9 minus 2. now obviously you know this isn't the easiest thing to compute in your head so we'll log the results but what i want to demonstrate is the fact that order of operations apply in computers just like they apply when you're doing regular mathematics so essentially we start reading from left to right and we apply bed baths which is the rule that i kind of learned the acronym for this so we have b and i hope this doesn't keep auto completing d m a s now what this stands for is brackets exponents division multiplication addition and subtraction i won't actually why not multiplication addition and subtraction and we'll just add the m there okay so this is the order of operations that we need to follow not sure if i spelled all these right but regardless and let's actually put these in a multi-line comment to make sure that we can leave those here this essentially means we're going to follow this order of operation we're going to look if there's any brackets if there is we're going to evaluate what's in the brackets then we're going to do any exponents that we have then any division then any multiplication then any addition then subtraction which means that this part of our statement is going to happen first so i mean we can look at this and see what we get as our answer we're getting 13 wow okay some crazy number like that but what if i want to change the result of this what if i want to you know do all of this addition and subtraction before i decide to divide you know 20 by whatever this result is well if i want to do that i can just add some brackets around this and now since these are in brackets we're going to follow our order of operations and do that first and notice that our answer should change and it does it changes to 2. so that is you know exactly how this works we can put things in brackets if we want to define when they're going to be operated on so this needs to happen before this is divided by that and we could do the same thing here where if we wanted to do you know 5 divided by all of this and then multiplied by 4 let's have a look at what that answer is going to be and that answer is still going to be 2 because obviously that's not going to change whether what order we put that in so yeah that is kind of how this works that is how operations work that's how operators work obviously you can do string operators and i guess the last thing to show is just like let's say hi like this i did something you know like x plus plus or x plus equals sorry i can do string plus equals in this case let's just go hi again let's go console.log str we'll add my semicolon there to be consistent and let's run this and you can see we get hi hot so strings you can use the plus operator on you can use plus equals you can concatenate and join those strings together and then numbers you have a series of operations like subtraction division multiplication addition modulus all of those so i want to refresh you that we started talking about data types in a few videos ago and we mentioned the data type called boolean now we said that we could have that data type called boolean let me just say b here and that value could either be true or that value could be false and remember that we can't have that capital false or that capital two it's only those two special values but what are the point of those values and where do we actually use them well this is where i'm going to show you how these are used or how these are actually generated so let me create some variables i'm gonna say x equals eight and var y equals 9 just like we used in some previous videos now a lot of times when we're doing some computations or we're adding numbers we're doing something we need to do some kind of comparisons maybe we want to see if the value of 8 is greater than the value of nine or if you know eight minus nine gives us enough a remainder and if we're looking at like a shopping cart and we see if they have over a hundred dollars in the shopping cart then maybe they get a discount on their order there's lots of instances where we need to do comparisons with numbers and i'm going to show you guys how we can do that now typically we're doing comparisons between variables but sometimes it can be between constant values as well and what i mean by constant value is just if i type in some number rather than actually using two variables so let's start by going through some of the comparison operators which are what i'm going to show you now okay so the first comparison operator is the less than sign now a lot of people will say oh no that's a greater than sign it's not the less than sign it really matters in which way this is pointing related to your variables in this instance what we're saying is x less than y that's what this statement means but if i decide to put a sign like this then we could read it like is x greater than y or is y less than x right it doesn't matter if none of these are really the greater than sine of the less than sign it really matters what way we put them so we have these two signs greater than less than and we also have the ability to add an equal sign to the end of either of these two signs now this is going to change this comparison to say rather than less than y or greater than y in this case going to say is x greater than or equal to y now notice that i keep saying is x greater than or equal to y or is y less than or equal to x or whatever it is that's because this statement or this expression that i've typed here is actually going to return to me a boolean value which is true or which is false and that true or false is going to tell me the answer to this expression that i put here now i know some of you might be a little bit confused but i will i don't know how i just did that log out my answer and show you what i mean by that all right so let's refresh this and you can see we get a value of false and why do we get a value of false well because x is not greater than or equal to y so when this expression is evaluated this comparison happens between 8 and 9 and we get the value false now if i decide to reverse these signs like this you can see we get the value of true and if i decide to change maybe x to say 11 instead of 9 and we refresh this now we're back down to false and that is precisely how these basic comparisons work so these less than greater than or equal now it's important you cannot do something like equal than greater than this is a different statement you can see it's just changed colors completely when i do something like that so make sure you add the equal sign after that comparison operator all right so the next operator to talk about is actually the equivalence operator which is the equal to or the two equals sign so is equal to is what we call this now notice that this is two equal signs and not one equal sign now one equal sign is what we call the assignment operator and that is assigning some value to a variable right that's typically what we're doing with the assignment operator whereas with these two equal signs what we're doing is checking for equivalence now there is another operator which is the three equal signs which stands for is equal to value and is equal to type now i'm not going to explain really how this works in difference with the two equal signs because it's kind of hard to understand until you get into objects and some more advanced data types so we'll talk about it as we go through later but for now just understand you can use the two equal signs or the three equal signs and 99.9 of the time these are going to do the same thing and they're going to achieve whatever you know functionality is you're trying to get at now equal then equal then so this is just going to compare if these two values are the same so obviously in this case 11 is not equal to 9 so let's do this comparison and we can see we get the value false however if i were to change my value y to be 11 and we do this comparison we get true and just notice if i add a third equal sign like this we get true as well now if you're in doubt and you're like well do i use two or do i use three just use three it's that we'll explain why later but just use three now let me do something i'm going to change this to 11. i'm actually going to try to demonstrate the difference because i feel like it's important enough to try we have this variable x which is 11 and we have this variable y now notice that 11 and 11 are the same right like if we're looking at this as humans we see eleven we see eleven we're like okay those are the same value so this should evaluate to true watch what happens when i run this we actually get the value false now why do we get the value false well this 11 is different from this 11 because they're different types this is a number and this is a string and remember that now if we try to do something like x plus y well this is a string and this is a number so what happens when we add a string and a number well we convert the other number to a string so in this case this is now going to turn into the string 11 and we mush them together we don't actually compare do a logical addition there we just add these numbers together so rather than getting 22 which we might have expected you can see here we're getting one one one one so that's important understand okay so let's do these two equal signs now all right so what happens when i do two equal signs and i compare these well we actually get the value of true so why did that work well that worked because this two equal signs compares the value and does not look at the type whereas the three equal signs compares the difference in the type and the value and only if both of these are the same will we get that equal all right awesome so now what i'm going to show you is kind of the opposite to this which is the not equal to now there is a not equal to and there's not equal to equal to which is the two equal signs like that so we'll talk about both so let's start by doing not equal to so exclamation point equal sign what does this do well it literally just gives you the opposite result that you would get if you did two equal signs so here since these values actually are the same what i'm getting is the answer false the reason i'm getting the answer false is because this operator is going to tell me if x is not equal to y and in this instance it is equal to y so obviously this condition is false and all of these that i'm typing here are known as conditions so that's important to understand now what happens if i add a third equal sign like that let's run this we get the value true why do we get the value true because obviously 11 and 11 when we're doing three equal sign comparison are not the same because this is a string and this is a number so when we do this we get false or sorry what am i saying we get true because these are not actually the same values and that's kind of how that works now let's just do another basic example with nine and you know if we do x not equal equal to we still get true because obviously these aren't the same but if i were to change this to 11 then we still you know we get false because these are actually the same value now that is kind of the basics of the basic comparison operators now i'm going to show you how we can actually chain these together and use something called and or and not now and or not are very powerful and they allow us to kind of create some more complicated conditions so i'm going to do a more advanced example now just because numbers are really easy to understand typically so i'm going to say bar name equals tim and i say var other underscore name equals 10. all right so let's do a comparison of these so what i'm going to do is simply log out if name is equal equal to other underscore name well what do you guys think looking at this do we think they're the same do we think they're different does this two equal sign is it gonna make a difference if we use two or three what do you think well let's run this and have a look we get the value false why do we get the value false because there is a capital here and capitals actually make a big difference when we're doing comparisons and this tim is not the same as this tim there are different strings however if i do change this to be like that now we'll get the value true okay so that's great we've done those comparisons now what i'm going to do is actually add some other variables so we'll say yeah well you know add some more numbers here bar x equals 10 var y equals 9. now what if i want to print if name is equal to other name and another condition is true what if i want to chain multiple things together and see if those two things are true well what i can do is actually use what's called the and operator or the and kind of comparison chain or whatever you want to call this now this is what this looks like two and signs these are above the what key is it on your keyboard the 7 key on your keyboard and what this is actually going to do is compare both of these conditions together and see if they're both true now i'm going to add another condition here where i'm going to say x is i'll say y actually is less than x so what this and does is it starts by evaluating the condition on the left side which in this case is name equal equal to other name we know that this is true right above here this value is true then what it's going to do is see if this one is true as well so if y is less than x now if both of these conditions are true and only if both of these conditions are true this whole thing that we've typed here will evaluate to true if one of them are false or both of them are false it doesn't matter which one or if both of them are false then we're going to get a false value so let's refresh this here and we can see we get the value true because we know that this is true and this is true but what if i do y is greater than x well obviously we know this is true but we know that this is false and since this is the and kind of chain comparison i don't know the actual proper name for it we're going to get the value false and we can see that here so this and checks if condition one and condition two are true and we can go through and we can do as many ends chain them together as we'd like and we can do you know seven equals equals 9. like we can add that at the end here and obviously we're going to continue to get false and what's going to happen here now is we're going to check if this and this and true and this is are true and if all three of those are true will be true otherwise if any one of them are false or any combination of them are false we'll get the value false all right the next one we need to talk about is or so let's change this to or now or is simply two straight lines i think you call this the pipe but i don't actually know the proper name for this character but it is uh where is it exactly it's kind of underneath the backspace character on your keyboard anyways the or is a little bit different than ant what ore is going to do is a similar thing it's going to look at the condition on the left it's going to look at the condition on the right and if either of them are true or both of them are true it's going to give us a true value so in this case we know that this is false y is greater than x but we know that this is true so if we run this we can see hey what am i getting here name equals equals other name or y greater than x that should be giving me true sorry i don't know why that wasn't refreshing anyways there we go true now what if i change this to be a not equal equal to that obviously we know that this is going to be false and this is going to be false so what is the or going to give us it's going to give us a value of false because well neither one of these are true but if i change this now to be y greater than x actually sorry it should be y less than x my bad and we refresh this we can see we get the value true so that is how the or works now we can combine ors and ands together so we can do you know another and sign here and we can add i don't know something like eight equal equal to eight and we can chain all these together and what's going to happen here well let's run this we get the value true and the way that we do this is we simply read left to right so if we're going to combine all this it's kind of complicated sometimes to understand how we're actually doing this what we're going to do is compare name and other we're going to get some value let's say obviously this is false now what we're going to do is say false or what's this value well this value is going to be true so this whole thing here if we're comparing with or is going to be true like that then we have this and where we're comparing with here which is going to be true true and true returns to us a true value and that's how we get that now what i'm going to show you finally is just a knot and then i'll do a big chain of all of them together and i know this video has been long but i wanted to show you guys all of this in one video so what i'm going to do is simply show you the not operator which is an exclamation point all this does is simply reverse whatever the current thing is that you have so if you have true and you put a not on it it gives you false if you have false and you put a not on it it gives you true like that and that's as easy as it is and this works in any condition so in this case if i do something like x less than y well we know that x is not less than y so this is false but since we have a knot outside of it and these brackets around this condition well what i'm going to get is the value of true and this is what i wanted to show you as well we can chain conditionals by using these brackets so let's do not x and y or name equals equals other underscore name uh and let's do something like 9 greater than 0. so what i've done now is chain these together what i can actually do is put these in brackets if i wanted to and do something like a not sign here in front of this and now what's going to happen is we're going to evaluate this expression get the naught of it we're going to evaluate this expression this expression we're going to and them together i think i might need another bracket at the end here uh i think that's right yes okay that is right then we're going to not them then we're going to do the or of this side and this side and see what that result is i'm too lazy to calculate it so let's just refresh and that value is staying true so that is how that works this is our comparison operators this is how we combine them so or and and remember or either one of them needs to be true or both of them can be true and uh if we have that we need both conditions to be true and if we have a knot that's simply going to reverse whatever it is that we have with those combinations of operators we can create any kind of conditions that we would like the functions now we're not going to get into too much detail with functions as i'm going to leave that until the next video but what i want to do is illustrate to you how a function works on a very fundamental level using a basic example where we have two buttons a button that says green and a button that says red and when we press the green button this text here will actually change to be green and when we press the red button this text here will actually change to be red now how do we do that right so how do we make it when we press a button that we actually can change elements on the page well that's where functions come in now what is a function well you can think of the definition of a function as a kind of piece of code or a block of code that does something it might you know change some piece of information on the screen it might take in a value and return to some value you can think about in mathematics when we have functions like f of x equals 5x something like that right that function takes a value of x and returns to us a value of y you can think of that as similar idea with programming functions except they're capable of doing much more than just mathematical computations now something to remember when we think about functions is that a function should do one thing and it should do that one thing very well so whenever you're designing functions um just try to keep in mind and think about what is your function doing is it doing one thing or is it doing many things and when i say one thing i don't really mean you know one line of code i mean one overall operation one overall function of your code is what it's performing it's not you know messing around and doing a hundred different things inside of it okay so how do we create a function well to do it is actually pretty straightforward we're going to type the word function we're going to type a name in this case i'm actually going to do a basic example before we get into the other one called add and then we're going to put curly braces to denote where our function actually is so what i've done here is said we're going to define a function called add and anything that goes inside of these curly braces is what's going to be inside of our function now to give you a really basic example what i'm going to do is just console.log add like this and i'm going to call my function by doing this now i know you guys have no idea what's going on right now if you've never seen functions before but let me break it down for exactly what's happening here this is our function block right so this is the name of our function add this block of code or any blocks of code for that matter that go inside of these curly braces will only happen when the function is run so the function has to be run we have to call the function and then whatever's inside of it will happen so here this is what we call our function call and to call a function is really easy all you do is type the name of it and then put two brackets at the end to say that you're calling it so this is our function call and essentially what's going to happen is when we're reading through our code as soon as we hit this block we're going to actually call this add function which means anything inside of here is going to run so let me illustrate that to you by just simply running and refreshing this page let me go to actually inspect element here and you can see if we go to uh i got to find where is this here console we get ad printed out to the screen when i called at and the great thing about functions that we can call them a bunch of times so let's do this and you can see that now we have four ads popping up on the screen so hopefully this is giving you an idea of why we might use them because say i wanted to print a sequence of i don't know add one two three like that well rather than you know having to do this say i want to do this exact sequence of ads 100 times rather than having to write 300 lines of code what i would do is simply call add as many times as i want that to happen right so if i refresh this now you can see we're getting all these popping up and that is you know the basics of functions and why we use them so that we can reuse our code so if you ever realize that you're writing very similar lines of code multiple times maybe you just want to add them into a function and then you can just call that line of code once with one statement rather than writing it a bunch of times okay so let's go into a little bit more of a more advanced example here with add and i'm going to show you something called parameters and something called return statements so what i'm going to do is i'm going to put two parameters in here and i'm going to call them a and b and these are called parameters now what these kind of stand for is the information that i need to pass to my function so this is the information that my function needs to be able to work to be able to perform some computation now in this instance a and b are going to actually be two numbers that i'm going to add together and what my function is going to do is take those two numbers a and those num the other number b add them together and return the result to wherever my function was being called now this might seem a bit confusing but the examples are hopefully going to clear this up for you so what i'm actually going to do in here is write a return statement now a return statement is different from logging something i'm not printing something to the console i'm returning a value and the value i'm going to return is a plus b now i know everyone's confused we'll get through this what i'm going to do is create a variable here i'm going to call it x and i'm going to set it equal to add and here i'm going to do five five now we all know what five plus five is we know that value is ten so what's actually happening here is when i call add i'm going to pass for the value a the number five i'm going to pass for the number b or for the parameter b the value five now what these are called are arguments so these are parameters and these are arguments and you can obviously you know i can pass different arguments to them i could say var y equals five plus seven right i can do any numbers i want and this is the point of this is that it can take any two numbers and return to me the addition of those numbers so let's simply log out these values i'm going to show you kind of how this works so console.log we have x and we have y so what's happening is when we say var x equals add 5 5 what's going to happen is we're going to pass our values and then we're going to return the addition of those values what this return is going to do is essentially say this line here that we've said add 5 5 is going to be equal to whatever this return statement returns which in this instance is 10 which means that x should be equal to the value 10. i know this might be confusing but let's run this and see what we get we get 10 and we get 12. so what happened was we passed our values you know something happened this gets replaced with whatever was returned from that function so which is 10 this one is getting replaced with 12 and we can print those two values out and say you know this is 10 this is 12 those are answers and we're storing them in variable x and variable y that being said though i don't need to store them in a variable and sometimes i don't want to store the value i just want to you know use the value so what i can do is actually do something like you know 234 and like negative 98 maybe let's pass that in here and i can log the result of that addition so here you know we get our value 136 i'm not storing it in any value but i can still show it because what happens is when i call this the return statement is gonna whatever it returns will replace this line and then you know we can demonstrate that and show that on the screen okay so i think that is the basics i've shown so far that you know we can have a function that has parameters we can have a function that doesn't have parameters we can have one that has a return and we can have one that doesn't have a return what about a function that has parameters but doesn't have a return statement well that's more than fine i could do something like console.log a plus b and then if now if i call my add function and i do 5 5 watch what's going to happen so we're going to print the value 10. why does this work well same thing as before we have our parameters a and b what we've done is we've called add notice we're not printing anything down here but what happens is inside of the function we print the addition so obviously that's going to work fine and you know that is how this works okay but now how about some of the more cooler parts of functions that i want to get into and then finish in the rest of the video how do we call a function from our html like i want to press this button and i want to call a function how do i do that well let me show you so what i'm going to do is actually create a new function and i'm going to call this function red and all i'm going to do right now is simply say console.log red now inside of my button tag what i can actually do is set the function that i want to trigger when this button is pressed and to do that i simply say on click equals and in this case red now what this is defining is essentially when i click the button i want to call the function which is called red which obviously is right here so let's see this and see if this works give this a refresh when i click red you can see that red is printing out to the screen and notice you know obviously it's keeping track of however many times i've pressed it just to tell you that same output is showing up and that is as easy as that is to do if you want to call a function from your javascript you literally just put it in quotation marks whatever the name is inside of html sorry it will call that function now let's do the same thing for blue or green or whatever i had okay so let's call this green and let's do console.log in green and i keep forgetting my semicolons but i guess i don't even need them anyways but i just like to add them so let's do onclick equals green okay so let's run this now refresh green red green red green green green green green red red red see and that is exactly how this works and that is i mean pretty cool in my opinion now what you guys can do is have buttons and when you press them you can trigger some javascript which is just the start of the really cool things we're going to be able to do later in this series now what i said though was i don't want to just console.log i actually want to change you know this element i want to change hello well we actually we know how to do that right we know how to change maybe not the color right now if you haven't seen that um command but we know to change the value of our h1 tag so how do we do that well let's do one in here document dot get element if i could type properly by id don't know what's going on with my keyboard here let's do header as our id and then we're going to do what is it dot inner html equals what should we do let's actually just make this red for now great now let's do the same thing i'm going to copy this to save us the pain of typing that again and let's put in green so i haven't changed the color yet what i'm actually going to be doing now is changing the value of this header tag to be either red or green when i press one of these buttons so let's see if this works or if i mess something up that's refresh when i click red you see it changes to red and when i hit green it changes to green and that is you know as easy as it is to do this now what if we want to change the color i'm going to give this a shot because i always forget how to do this but i think it's something like dot style dot color and i'm pretty sure this will actually change our color to be either green or red although i don't really know but we'll give it a shot okay so let's run this fresh when i press this oh there we go our color is changing from red to green so to do that what i did was dot style dot color and change that to lowercase red and lowercase green so that is our basics of if else if and else now these are ways to essentially check a condition before executing a certain block of code and this is very useful what a lot of you guys have been asking about in the comments or that have realized but like okay well what if i only want to run this piece of code if this is true or what if i want to do this and if this doesn't happen i do that well this is where we get into if else if and else which are extremely useful and kind of fundamental skills of the language so what i've done so far is i've actually just changed this example a little bit so what we have now is hello we have a text box and then we have a button that says click the reason i've done this is because what i want to do for this example is has it have it so the user can type something into this text box click click and based on what they type in we're actually going to change the color of this field so we could change you know if they type in the word green this will change to green when they press the button they type in blue this will change to blue when they press the button that's what i want to try to do so let's try to do that now the first thing we need to actually do this is an if statement so i'm going to run through how an if statement works essentially the syntax for an if statement is you type the word if which is a keyword it'll highlight hopefully in this red color for you guys if you're in subline then you have these brackets like this you put some kind of condition inside of these brackets and if this condition is true then whatever's inside of these curly braces will run if it's not true you're simply going to skip over this entire if statement so everything that's inside of this block and go to the next line and just ignore it and not even bother doing it so for instance if i say if true well this will always run because obviously true is always true but you know that's a condition i can put that in here and that means essentially if i did console.log something in here that would always run whereas if i put this to be false like that and then i was going to console.log this would never run because well this is false so let's actually give this a go and do something a little bit more advanced so a real condition inside of here and then we'll try to do something so what i'm going to do is actually grab the text that the user typed into my input box and just store that in a variable to start so i'm going to say var text equals and in this case i guess it's document dot get oops element if i could type properly early in the morning for me here guys id then we will do i n p uh which is the input box dot value okay so there we go that's going to grab our text for us now what i'm simply going to say is if text equals equals and i guess we'll say red we'll change the color of our header tag here to be read so to do that i'm going to say document dot get element by id dot style dot value equals red and i guess our id is going to be header like that okay now the only issue is i need to put this inside of a function so that essentially whenever my button is pressed we can activate that function and see what the current text value is so to do that what i'm going to say is function pressed like this then i'm going to just close my bracket here and indent all of this so there we go so i know i went kind of fast there but essentially what i've done is create a function called pressed this function will be clicked or you know activated when we press this button here then we'll get whatever we've typed into the text field check if it's equal to red if it's red we will change the color otherwise we won't do anything so let's run this now let's save and refresh the page so here notice when i click click nothing's happening when i type hi you know nothing's happening but if i type red then it changes all right so i realized i've done style.value rather than style.color so that would probably be why that wasn't working for a second when i tried it out so anyways change that to color let me show you again now so i think i showed if i type something like hello obviously nothing's going to happen but if i type red and click click after this has been refreshed then that will change to red and that is because we have this style that color equals red and if text is equal to red that will happen okay awesome but what if when i press the button and if they didn't type in red for example i want it to automatically change the color to black so maybe you know now if i start typing high well it's still the color red because it's not being changed back to the other color so how do i do that well this is where we can use something called an else now an else essentially is happens anytime this if statement doesn't happen so whenever you have an if-else block like this you know that either the if is going to run or the else is going to run and it's pretty easy to read it out you say if text equals red do this otherwise or else do whatever is inside the else block and that's as easy as this is so i'm just going to copy this line and change it so that this makes the color black like this and now let's run this and just show you how this works and that should hopefully help you so we have hello now let's type you know u obviously black we're not getting anything let's type red that changes to red and then if i type i don't know no we get it back to black so that is how this works if it's not red then it changes the color to black if it's red then it changes the color to red okay so what if we want to be able to change the color to red or blue and then anything else goes to black well how would i do that well this is where we use what's called an else if now this so far i hope makes sense again you just have if if this condition happens whatever's inside of here you do this otherwise you do this now the else if is kind of an extension on top of this and i'll talk about how it works in a second but let's get the syntax down first so essentially the else if is kind of a combination between both the else and the if now this is essentially saying if this doesn't happen so if this if statement doesn't run we will check if the condition we put here is true if that's true we'll do whatever's inside of our brackets here otherwise we'll come down and we'll do what's below here so this actually means we can have multiple else ips which we'll get into in a second let's do another example here where we make this say maybe green and then we'll just get the element id and change it to the color green so let's tab this in like that and go green alright so again the way this we're operating here is we're going to start by checking if the text is equal to red if it is boom we go red we don't even bother reading the rest of this we don't need to do it okay if it's not red what we'll do is we'll check if it's green if it's green we'll change the color to green awesome there we go we're done we don't even read the else if this is not true and this is not true so both above the else aren't true then we'll run the else and we'll change the color to black and that is pretty much how this works it's fairly straightforward so let's refresh let's type green there we go it goes green let's type red it goes red and let's type blue and obviously it goes to black now if i wanted to incorporate blue as well what i could do is simply make another else if like this i think i need to actually do that yes that should work let's put another condition here say text equals equals equals that should actually just be three let's say blue and then what we can do is simply copy this and change the color to be blue and this should work for us now again this is going to work because we can have as many else ifs as we want we can do you know if else if else if we don't even need to include this else if we don't want to i can get rid of that i can have just one else if the combination of these is fine just know that if you have an else if or if you have an else there needs to be the initial if to start that statement so let's look at this now and let's try this so let's refresh if i type blue we change to blue if i type red we go to red if i type green we go to green and if i type something random nothing happens because that else statement is no longer there and that is you know pretty much how that works now a lot of people get confused with this um try to do some examples we'll do some more as we go through the different videos but just remember you start with your if statement if whatever happens here happens is true then this runs if it doesn't we'll check all of the else ifs if any of those are true we'll execute that and we'll stop looking for the rest of them otherwise we will do any else statement that is at the bottom and that else statement will happen no matter what so long as you know the ones above it were false now we can definitely have um more than one if statement like there's different ways to do this for example right now i'm doing l else ifs but what i could actually do is just make all these ifs and everything's actually going to operate the same and the reason that's going to happen is because well you know in theory none of these conditions will be true at the same time right the text can never be equal to green blue and red at the same time but the reason we might not want to do this in some instances is well like if it's red what's the point of checking if it's green right so in this case we have three if statements these are going to happen and they're all going to be checked every single one of these if statements every time we run this condition will be evaluated and we'll check if this needs to happen but the thing is if the statement is read like if we check the text and it's red what's the point of even bothering to check these other two if statements well that's why we put them in the else if because we're saying well you know if it's red there's no chance that this condition will be true so there's no point in even trying to evaluate it right but you know we can do three ifs like this i'll show you this works if i refresh and i go green that's fine and the way this is gonna work is you know we read this if statement we check it if it's true we do it then we read this if statement if it's true we do it like in theory we could make these true like i can make this statement true and now let me actually show you how this works if i type in let's say here so let's have a look at our code we have red true blue right so if i type red notice that we actually change to the color green now the reason that happened is because this is true right so this is always going to run so we check this even though it actually changes this to red it gets changed to blue directly after but now watch what happens if i type blue well blue is actually run well why is that because this happens we change it to green and then we change it to blue afterwards so we get to see the switch statement and the way i'm going to teach you guys the switch statement is essentially comparing what we've written in the previous video which is this kind of function that essentially uses some ifs some else ifs and some else's or at least it did in the previous video to perform the example of allowing us to type in some color and changing the text of you know i don't know say some element on the screen to be that color so what we're going to do is do this now with a switch statement so you guys can see a little bit of the difference on how it works and hopefully understand it a bit better so what i'm going to do is scrap all this code where essentially we had three if statements i'm going to switch this to a switch now the way that a switch statement works is you start by typing the word switch you put brackets inside the brackets you put an expression or a variable that you're going to be checking so in this case text is what we're going to check right we're going to see if it's equal to different values so we're going to put that variable here next we're going to put our curly braces like this we're going to type the word case space colon then we're going to tab indent and hit break and put a semicolon now i know this is like some of you guys like whoa whoa what all what is all this what's happening i'm going to go through it but just bear with me for a second here so case what does this mean well essentially inside of a switch statement we have cases now the cases are kind of all of the different things that could happen that the different branches the different routes we could go on so in this instance we have text and our first case is gonna be if text is equal to red now this is case one and what this is saying is essentially case red which means text is equal to red so if text is equal to red we're going to do whatever is after this colon and before this break statement so in this case we could change the document so actually we'll just steal what we have here and i'll change this a bit so document dot get element by id dot style dot color equals red like that and we'll have to change this to header so what this is going to do now is essentially say okay the switch our first case is if it's red if it's red we'll change the document to be or change the element to be the color red and then we can break and that's what this case does so let's actually refresh to see if this works so if i type red you can see that it changes to red and you know if i type something else if i type blue obviously we see nothing else is happening all right so what's the next thing we need to do well we need to create some more cases so what's another case that could happen here well we could have a case that our text is blue right that's what it equals to so we'll break we'll copy this and then what we'll do is we'll simply put in here and we'll change the color to be blue and i think you guys are kind of getting the hang of how this works essentially the switch statement we'll check these different cases it will check them in order if you know this text is equal to one of these cases then the case will run and then we'll break out of the switch statement and we won't bother looking at any of the other cases that are there now there's some more to talk about but let's try this for now so here we have red we have blue so let's try blue we can see that changes to blue let's try red we can see that changes to red awesome so let's add one more case and i guess we will do green as our last case to stay consistent with our previous example so we have green like that change our color to green and one last test here to make sure everything's working let's go green and it changes to green awesome now what i'm going to show you guys is called default now what is default well default is kind of like the else inside of a switch statement so here what we can actually do is create what's called a default case which essentially means that if none of the cases above this ran then we'll always default and do this default now what the default is going to be is just changing our text color to be black because that is what we need it to be so we'll change it to be black and there we go what we've essentially done is simulated you know an if else if and else using a switch statement now these are useful sometimes because it's a lot easier to actually read your code when you put it in a switch statement rather than having them all in that branching if and else statements but in some instances you know you need to use the if else if you're not going to just be checking one variable whenever you do a condition but for us since all we're doing is checking one variable this variable can be equal to a few different things so we'll check if it's equal to these different things in these cases and then do whatever is after this so anyways let's have a look at this now let's refresh this let's type hello we can see the text doesn't change let's go green oops if i could get in here green it changes to green if i type nothing and i click click it'll go back to black so that is how the switch statement works and that is you know a good example of when we would use a switch tape now what i'm going to show you next because we actually have quite a bit of time left in this video is a different example of when maybe you wouldn't you would not want to use a switch statement and that's what i'm going to use an if-else statement for but let's just do an example here so i'm going to delete all of this and what i'm actually going to do is change this text input example to be rather than changing the color of this header tag i'm going to ask the user to type in their name and essentially if they type in or sorry not their name their age and if their age is greater than a certain number i'm going to tell them that you know they're an adult or they're not an adult it's a good example that i like to use so in this case i'll say what is your age just a little header before our input box they can type it in here when they click clicked we'll run this press function and we can see what their age is so what i'm going to actually do is make another text input here so i'm just going to say p slash p i'm just going to say id equals output and what i'm going to do is say var actually do i want to do this yeah sure let's say var output equals document dot get element by id and here i'm going to call this output and what this is going to allow me to do is actually change the output tag here by just referencing the variable output rather than typing this entire thing whenever i want to change it so what i'm going to do now is i'm going to put an if statement and remember that this function is going to run whenever this user clicks the click button so in this instance we're going to grab the text which should hopefully be the user's um what do you call it age and what i'm going to do is try to convert that age into a number so that i can compare it against another number now you'll see how that works so what i'm going to do in here is i'm actually going to try to convert whatever it is the user types in into a number now the reason i need to do that is because whenever the user types something in a text input box so like a text field it's assumed that the data type that comes in is a string so we know what a string looks like and the strings have those quotation marks and we remember from previously and actually i'll do it down here if i compare something with quotation marks to something say like that so 42 like that and i use my three equal signs we're going to get the false value for that right and i'd like to be able to use the greater than sign and the less than sign between these different values so i can compare whatever the user types in to whatever number i'm going to compare to so in this case 18 to see if they're an adult so to do that i need to convert this to a number so to do that i'm actually going to use a function called parseint what this is going to do is simply take the integer value of whatever string we typed in and just return that to us just give that to us so this will say var text equals the number of whatever string we typed in and this will convert that to a number okay so what i'm going to do is compare the text to some number in this case i'm going to say 18. so if text is greater than or equal to 18 so if their age is greater than or equal to 18 what i'm going to do is change this output text to say you are an adult so to do that i'm going to say output which is the variable here that's holding a reference to this p tag so this paragraph tag let me say dot inner html equals and in this case you are older than 18 exclamation point next what i'm going to do is essentially say this is not true we'll change this output text to say you are not older than 18. and let's run this and see if this works so refresh what is your age let's say 18 click you are older than 18. what if i say 17 you get you are not older than 18. now notice that this one is kind of misleading it says you are older than 18 but you could actually be 18. so what we should do is change this so that we have one that says if you're 18 right so let's say else if text equals equals 18. then what we'll do is and i gotta get rid of that actually and add one here uh it is we'll just simply add this output text and we'll say u r 18 like that then we can change this to say greater than 18 and now what we're going to do is check if it's greater than 18 if they are we'll say you're older otherwise if they are 18 we'll say you're 18 and then finally else you are not older than 18. so let's run this refresh let's go 17. you're not older than 18 let's go 18 you are 18 and then 19 you are older than 18. and that is how you use this now the reason you wouldn't use a switch statement for this is because we're checking any values that are greater than 18 we're going to print out and say well you're older than 18 but if we use a switch statement we need to check if it's exactly that value right we need to have you know the text up top and then we need to check 18 19 20 21 it doesn't make sense to use a switch statement in that instance whereas before when we were just typing you know red green blue that's totally fine and it makes sense to use a switch statement but here since we're checking values we need to use if else if else so anyways that has been switched statements as well as a kind of a little bit of a more advanced example with if alif and else if you guys are looking to challenge yourself i will mention to you that you can actually put if statements and hold chaining blocks inside of other if statements and other chaining blocks so you can kind of go and nest a bunch of statements together so you guys can try to do something like that um and you know that's good practice actually if you want to create something like a choose your own adventure game you can use what i've just showed you to actually do something similar string methods and concatenation of strings now we've dealt with strings a little bit before i've showed you guys a few things we can do with them but i just want to show you a few other properties of strings because there is actually a lot and there's a lot of things that you kind of need to learn to deal with them properly and that's also something you're going to be doing a lot in javascript is manipulating strings and user input and all of that so what i want to do is kind of have an example here where we're going to get the user to type something and we're going to modify the string they type in and just print it out and show you what it looks like so to do this we're going to say you know i probably should have kept this from the last time var text equals in this case i guess we'll say document dot get element by id dot uh what was it value i think it was value okay so let's change this now to be imp for input and what i'm gonna do is simply just console.log or actually we'll put that value in this output tag so what we'll say is output dot inner html equals and in this case text now let's just look at this example quickly to see how this works i'm also going to talk about this page in a second so let's refresh this let's type hello and then we can see obviously it shows up down below now this is where i'm grabbing some of these string methods from this just has a nice list of them i'll try to leave a link to it but remind me if i forget which is likely so there's methods like starts with substring substring two local lowercase two string two lowercase to uppercase trim i'm not gonna go through all of them but i'll show you what some of them do and why we might even actually wanna use them so the easiest one to illustrate is two uppercase now you guys can probably guess what this is going to do but essentially whenever you have a string object which in this case text is because this right here is going to be storing some string value right this is going to be equal to a string so text now is storing some string which means that i can actually manipulate the variable text by calling you know some string methods on it so let's do this and let's refresh so when i do that and i type let's say hello we can see we get hello now in all upper cases so what two uppercase does is essentially take this string and create a new string that is completely uppercase letters with whatever this string was now if i decide to add you know an uppercase o at the end we still are going to get this because everything just goes uppercase now the same works for two lowercase like that so let's look at this so if i go to lowercase and i type low then we're going to get lowercase hello so this is often useful especially when you're asking maybe a question or something that could be right or wrong because you don't know if someone's going to type in the answer with upper cases or with lower cases or maybe you know say they're going to type in the answer to a question like maybe the answer is blue and they type blue with a capital b well is that wrong if the your answer that you had was blue with a lowercase b no the answer's still correct but if you're comparing you know blue like this with let's say something like blue obviously you know these two are not the same so what you would do is take that user's input make it all lowercase so then that way you can compare if the value of your two strings are actually the same so that's where we use two lowercase and dot uppercase now what we can actually do is starts with and ends with as well and this is going to give us a boolean so starts with is going to tell us if the string starts with a certain character so what we need to do is inside of here put the character we want to see if it starts with now maybe we want our string to start with a number sign or maybe we want to start with an at sign like if we're doing a mention of someone on social media or something so what i can do is refresh this and now if i type say hello we're going to get the value false but if i type at hello like this we get the value true because our string started with this character now same goes with ends with we have ends with we can use that same character again so in this case we'll do hello false hello with one of those at the end and what are we why are we not getting um correct here let's see if this works hello hmm interesting why we keep getting false let me look at this okay so we got true there i think i actually had a space afterwards and that's why it wasn't working and that's actually the next one i'm going to talk about so notice here we're getting true but if i add a space then we get false so i think that's what was happening was essentially this string has a space at the end so that's why that wasn't working so actually what i want to show you know is how can we get rid of that space so in that last instance right our string actually did end with this add sign but since we had a space at the end it wasn't counting because it was going to look like something like i think we had like hell at like that so this was our string so obviously we see it ends with this but there is a space so how can we get rid of any of those spaces at the end or at the beginning of that string that we don't want well this is where we can actually use a method called trim now what trim is going to do is simply remove any leading or trailing white spaces from our string so this is really useful because sometimes maybe someone's typing in their name or something and they type in like space hello well you don't want to store space hello you just want to store hello so in this case actually let's refresh this and if i do hello and like a bunch of spaces um we're obviously okay so we're obviously going to get false because there's a bunch of spaces but let's do this same example let's say hello at and then a bunch of spaces and click well our answer is true because we actually removed all these spaces when we did this trim here so that's what that does it actually removes any spaces i think a better example might be if we just actually print out text.trim and i'll do some leading spaces so if i go like hello and just do a bunch of spaces here then technically when we printed this it should be like spaced over a bit right but when we run this we just oh well i got to refresh this let's go hello do this we just get hello there's no spaces before that because we trimmed off all of those spaces so that's what those methods do now notice that i used two of those in combination with each other right so i had dot trim which returns to me a new string so that's going to give me that hello without all those spaces there so it removes all those and then what i did was dot ends with like that right so what these methods do is they don't modify the original string they actually create a new one that can be used in whatever context you want right so if i have this you know let's do this trim what i'll do next is i'll just console.log the actual value of text and show you guys the text isn't changing when we do this dot trim this just creates a new string that gets stored in our inner dot html of output it doesn't actually modify text so to illustrate that let's refresh this let's do a bunch of spaces for hello click we can see that change but now if i go to inspect and we look at the console here which i think is right here we can see that we get hello and we actually have a bunch of spaces before that now i realize that sometimes it's hard to see the actual spaces so i'm going to show you another property we have of strings called length now what this does is it's different than a method which are what these are that we've been calling with these dot and then these brackets it actually tells you how long the string is which is kind of useful so in this case let's refresh this let's go bunch of spaces hello click and in this case obviously we know that the string is only of length i believe six but here we're getting length 23 and that's because we've added a bunch of those spaces beforehand so it's printing out that length to us now this length property is really useful because sometimes like say you have a password you want to check well that password has to be of length at least 250 or something like that right or you know 250 25 10. whatever you want it to be like you need to have it of some certain length so what you do is you could check the length of whatever that user typed in say okay is it greater than 8 is it greater than 9 does it contain an at sign does it start with a capital whatever any of those you can check all that and if that's true you could say okay this is a valid password you can say okay no that's not a valid password so anyways that is a little bit about strings i mean i think i've showed you guys concatenation before where essentially we've had something like you know hello plus and then maybe in this case if we do text actually let's do this what i'm going to do is simply say ask the user to type in their name now so we'll say to actually type something sure and we'll say you typed like that and then space now i think i showed you guys how this worked but essentially concatenation with strings is just adding them together so what we're going to do here is that you typed and then just add this text.trimmed value after so in this case if i refresh this we can close this console window actually let's get out of that and i type hello it'll say you typed hello right and that'll just print that out and show that to me now let's say i wanted to actually you know maybe print some numbers out or print some other things well what i can do is i don't need to put them in strings i could say like plus five if i wanted to and i think i showed you guys how this works well essentially and now if i type low it's just gonna add five to the end so just mush that together all right so i think that's all for strings for right now there is a lot more to talk about with strings again try to remind me to link this website that has a bunch of different methods that you can use for strings i haven't shown all of them or even like most of them to be honest like there's a replace method which will replace a certain item in the string with another item we have split which will split this string we'll talk about that one later um just lots of stuff you can do here i just want to give you guys an introduction and illustrate kind of how these work and how you can use the methods and you know how i did something like text dot trim even though text isn't actually string but it's storing the string values stuff like that javascript arrays now arrays are one of the most used what we call data types or data structures within javascript and any other language so they're extremely important that you understand how they work so i'm just going to start and explain what is an array well essentially an array is an ordered collection of elements so what that means is previously when we created a variable so let's say we had like var tim equals five well this variable tim stored simply one element now what we're going to be doing is having a variable storing multiple elements and i'm going to discuss how we can access those different elements add elements remove elements and do all kinds of things like that now the way that we create an array there's actually two ways in javascript but we're going to stick with this way is simply just by putting square brackets like this so when you have a variable you name it something you put your equal sign and then you put square brackets and this denotes i have created an array currently our array has a size of 0 as there's nothing in it but then what we can do once we've defined these square brackets is go ahead and put some elements inside of our array if we would like to so for example i could put an element hello i could put the element 5 i could put the element 4.6 i could put tim and this is my list of elements inside my array so if you're familiar with other programming languages sometimes these are called lists as well it's pretty much the same thing in javascript this is just called an array and what we can do when we create an array is simply put elements inside of these square brackets separate them by commas and now we are saying here we have four elements inside of our our array and now i'm going to talk about how we can actually access these elements and remove them and do all kinds of things like that now i will note here that there is another way to create an array so typically what you do is you notice you say var array and then you just do this if you want to create an empty array but you also can do new array so this is a way that you can create an array in javascript as well usually we stay away from this as it's not necessary and it just makes things a little bit more messy but i will show you how this works what you can do is actually say new array inside these brackets you can denote a single number that tells you how many elements you want to be in your array so in this case we'll do 50 and what this will do is actually create for us an array of 50 blank elements that don't have any content so it's an array of size 50 that's what this will do if you leave it like this then it just automatically creates one with size of zero which means it's going to look like that now hopefully i didn't confuse you there if i did just ignore that line i just wanted to show you guys in case you're interested now let's talk about accessing elements so right now i have four elements in my array we have an array of length four how do i access these different elements well this is where we talk about something called indexes so i'm just going to type console.log here so i can start printing some stuff out so essentially whenever we have an array every element in the array has a specified index now that index is simply an integer that represents its position in the array now the indexes for any array go from zero to the size of the array minus one now that simply means here that index 0 represents hello as that is the first element index 1 represents 5 as that is the second element 2 4.6 as that is the third element and 3 as tim as that is the fourth element so the easy way to remember it is essentially the last element here is always going to be the size of the array minus one index and the first element will always be zero so let me show you how we actually index things so what i can do is simply put the name of my array which is tim square brackets to the right of it and the index inside of here and this will actually access this specific element in the array for me so watch i'm just going to go to my terminal here whatever this is and print this out and you can see that we print hello as obviously 0 was the first element there now if i do index 2 we should get 4.6 so let's bring this up again refresh we get 4.6 awesome now what happens if i do something like tim 4 well we know that four is non-indexed because we only have indexes from zero to three so if i try to do this let's observe what happens in the console here we get undefined so when you try to access an element that does not exist you get an undefined so that's something worth noting that actually doesn't throw an error for you where in other languages it usually would it just gives you undefined okay so now that we know how to index how can we actually change elements in our array well what i'm going to start by doing is just logging the array here and what i'm going to do now is change one of the elements or add an element to our array so what i'm actually going to do is say tim2 equals and we'll just say a new element like that so what does this do well essentially what it's going to do is it's going to say okay so the element at index 2 i want to set that equal to new element so it's going to change 4.6 to be new element and now if we refresh here and we have a look at our array before and after we can see i'll just expand this here we get hello five four ten and then we get hello five new element tim so that did indeed change it okay so there's a few more things of arrays that i wanna talk about but we are almost finished now the next thing i wanna talk about is the length property of an array so essentially if you would like to check how long an array is what you can do is simply call this dot length at the end of the array name and that will tell you how many elements are in the array so here we can see we get four now notice this isn't telling us three as the last index is telling us just the count of how many different elements we have and if we had a blank array and we did this we would have a size or a length of zero okay so let's go back now the next one that i want to show you is to remove an element from the end of the array so let's say that we want to remove tim or we want to remove whatever element is at the end a very easy way to do this is to do tim dot pop now what pop does is simply remove and return the last element now i'll show you what i mean by that essentially what i can do is i'll console.log tim.pop and then i will simply console.log tim and i'll show you what the result is from this you can see we get tim here and then we get the list except or sorry the array but we are missing tim at the end so what this pop actually does is remove and returns the last element to inside of this log statement where we print it out and then obviously now tim does no longer have this last element so we will print out the three elements here now the other one that we can use is called push now what push does and this doesn't return anything so actually we'll just type it out here is add an element to the end of the array so rather than removing one it adds it so to push something to the end of the array we could do let's push new element like that let's console log and have a look at this and we can see now we have five elements in our array and we get a new element at the end so that is what push does now i think there's a few more methods we'll go through quickly there's another one called shift now what shift does is simply remove the first element from the array so let's look at this one so if i do shift you can see we remove hello and we have 5 4.6 and tim now i'm just gonna have a look but i think that is pretty much it i'll show you one more this one is simply to sort the array and it is sort like that so tim.sort so what i can do is refresh this and now we can see that we'll actually sort the numbers first and then we will sort the strings now if you want to learn more about how this sort method works with different objects you can look that up on your own time but essentially it's going to sort you know your strings alphabetically your numbers by size and that is pretty much all there is to it so i think with that that is pretty much a raise i'll show you one last thing just in case anyone's curious if you do decide to do something like tim 7 equals five actually let's just do eight and notice that i don't have an index seven in this array what will happen is it will fill all the indexes up to seven with empty elements and then fill index seven with eight so i'll just show you what that looks like so you guys get an idea so you can see here we have hello five four point six tim so tim was index three here this is index seven so we have three empty indexes before that just so that we can actually add this at the correct index just be aware if you do decide to do something like this if it's an index that's out of the range of this array so it's not in the length of the array then what you're going to end up getting is a bunch of empty spaces before this element while loops now this is our first time touching on loops so i will discuss them kind of more in depth and then when we move into the for loops hopefully you should have an idea how those work well what is a while loop well essentially a while loop is a loop that will run while a condition is true and what is a loop well that's just the same thing executing multiple times now this is great because a lot of times in programming we want to do something multiple times in fact sometimes we actually don't know how many times we want to execute something maybe we want to execute the same block of code you know 20 000 times or maybe we want to execute it five times or maybe we want to execute it for you know a set amount that is going to be defined by the user or something like that now rather than having to type this code out hundreds of different times what we would do is use a loop because it's going to be the same thing we're going to run it x amount of times if we know how many times we're going to run it we can just use a loop and that will happen for us now i know you guys are confused but i will show you so essentially what a while loop syntax looks like is well brackets and then the squiggly brackets now inside of these regular brackets here we put a condition now we already talked about conditions but essentially condition is anything that evaluates to true or false so what i'm actually going to do up here is create a variable i'm going to make it called i and i'm going to set it equal to 0. what i'm going to do as my condition is i'm going to say wow i is less than 10. now what this means is we will continue to run whatever code is inside this while loop as long as this condition inside of here is true so as long as i the variable i is less than the value 10 we will do whatever is in here now to keep it basic what i'm going to do in here is simply just console.log and i will console.log actually the value of i what i'm going to do here at the bottom is actually add to i and add 1 each time so i forget if i've talked about what this plus plus does but all this does is add 1 to the variable i so what's going to happen is in this while loop we're going to loop while i is less than 10. so on our first loop we will print 0 as i zero we'll add 1 to i well now i is 1 is that less than 10 yes it is so we'll print 1 we'll add one to i it'll be two and i think you guys get the point what's going to happen here but i will show you in our console here so let's refresh this oops i need to open tutorial 11 like that uh your file was not found oh it's because i spelt tutorials wrong let's try that there we go okay so now you can see we get 0 through 9 printing out to the console and why did it not print 10 well because on our loop when i equals 9 so let's just say i equals nine like this what happens is we print nine we add one to nine which is ten ten is not less than ten so we do not end up printing out the value of ten and that is the basics as to how a while loop works now obviously you can put different kinds of conditions in here they don't need to be dealing with counters or with i and this is what we call a counter as we're simply adding one to the variable each time and getting up to 10 and doing this you know i is less than 10 times but yeah that is the basics for a while loop now we can use other kind of conditions inside of the while loop as well and we actually don't need to do something like this there's a few different ways we can actually end the while loop so if i decide to do something like while true well what i've done right now is created an infinite loop and the reason this is infinite is because well true is never false so this loop will run infinitely but sometimes the condition you want up here needs to be true it needs to always be true so how can you eventually break out of your loop well to break out of your loop you can actually use the keyword break now what i'm going to do in here is actually set up kind of a strange thing but i'm going to say if i is equal to 10 actually let's make it 5 then what i'm going to do is simply break now what this keyword break does simply breaks out or exits at the current point so wherever this word is found whatever loop it's inside so since it's inside of this while loop we say if i is equal to 5 we will break whatever loop we are inside of which means exit the loop stop running and get out of it now i'll actually show you now console.log break like that so you can see exactly when we exit this loop so what ends up happening is we'll print i and then we'll print break once we exit the loop so let's have a look at this here refresh we get 0 1 2 3 4 and then break so that is exactly how this keyword works now it's important that whenever you're designing a while loop you either have this condition so you know that it will eventually be false and you can break out of it or you have a break keyword somewhere in here and you know that you will eventually reach that break keyword because otherwise you're just going to have an infinite loop and i'll show you what happens when you have an infinite loop as it's not fun to usually deal with you can see that it's just printing tons of different values and it's you know eventually it's going to crash just because it's doing so much and you can see the page is just loading and just you don't you know want to deal with that so i mean okay so now that we've shown the basics of a while loop i'm going to show you how we can actually loop through a array using a while because that's kind of one of the most common things that we end up doing or how we could like add to a number or something like that i'll just show you a few different examples so you guys get an idea so i'm just going to create an array i'm going to say var arr equals and in this case we'll just do like tim joe and bill and i'm going to show you how we can loop through this array so essentially what we want to do is we want to loop and print out each element in this array so what i'm going to do to do that is create a counter similar to what i did before i'm going to call it bar i equal to 0. i'm going to say while i is less than in this case the length of the array now the reason this works and we'll see it in a second actually i need to do this we'll just say console.log ar i i plus plus now what is this doing what did i just do well essentially my condition for the while loop is while i is less than the length of the array now what is the length of this array this is 3 so that means the values of i will go from 0 one to two and they will not hit three so what will end up happening here is when i is zero we will print tim as that is array at index zero then we will print joe then we will print bill as i will have one added to it every time so this is a good example of how we can loop through these different elements because we can actually use a variable which we're doing here as the index to access an element in our array so let's print this out and see what we're getting we get tim joe and bill and that is exactly how this works now what i'm actually going to do is show you how we could construct an array using a very similar thing let's say we have an array and what we want to do is add all of the elements from 0 to say 100 into the array so the numbers 0 to 100 we want to add those in well how would i do that what i can do is i'm just going to change this line and i'm going to change this one here i'm going to set my condition to say while i is less than 101 or i could set it equal to is less than or equal to 100. these pretty much will do the same thing for i i'm going to leave it at this one for now but i just wanted to show you you could do that and now what i'm going to say is array dot push and here i'm going to push i now what this is going to do is add to the end of the array the value i every time this loops and how many times is this going to loop well i hope you would all say 100 as i gets one added to it each loop and this happens while i is less than 100. so i will simply print out the this array app just have a look at it and let's do this and you can see we get our array that goes from 0 to and it would be 100 although it is cutting off here you can see it goes to 100. so there you go that is how you create an array okay so now i'm going to talk about what's called a do while loop now these are useful sometimes when you don't know if the while loop is going to run immediately or not now let me just explain a little bit why we would even use one of these now right now if i do while condition and i've just created a variable up at the top called condition or cond which stands for condition and i do you know console.log run when i execute the program this is not going to happen this loop will never run the reason is because the condition is false but sometimes what we want to happen is we want to run this while loop at least once and then continue to run it while this condition is true so we actually don't care what the condition is for the first loop but you know after then we do but right now the way that we have this we'll never run console.log because this condition is false so is there any way that we can run the loop once for sure and then see afterwards if we want to continue running yes there is that's called a do while loop now the basic syntax for a do while loop is simply to put do like that and then put while afterwards with a condition now we're going to put the same condition we had before which is condition except in the do here we put exactly what we want to do while this condition is true so what i'm going to do is say console.log and in this case we'll just say run like that do a little exclamation point now what's going to happen here is regardless of if the condition is true or not this will run once after that we will get down to this while loop we'll see if the condition is true and if it is we'll run this again so based on that logic this should run one time so let's refresh this we get run now if we had changed this to be true or we had the condition being something else then this could continue to run multiple times but i just want to illustrate how that works you can have this due so you know this will happen at least once and then continue to loop in the while loop afterwards assuming that this condition is creating for loops now for loops are the most common type of loops and i would say almost one of the most common types of expressions that you will see in code they're responsible for millions upon millions of different tasks they're fundamental so you really need to make sure you understand them before moving forward into some more complex topics in the language so what is a for loop well a for loop is used when you want to loop a defined amount of times or you know how many times you want to loop so in the previous video we talked about while loops where we looped based on a condition now that condition could change at any point in time if the user could change it it could change from different areas of the code and essentially we don't know how many times we're looping with that condition because it's just whether that condition is true or whether it's false whereas here in our for loop we actually usually know exactly how many times we're going to be going through the loop and i'm going to talk about that now and show you how this works so the basic syntax for a for loop is four you're going to define a variable in here and i'm just going to type it out and then we'll talk about it later we're going to put a condition here and we're going to put an increment step here now i just want to show you guys how this works and i'll explain the entire thing so just maybe you can use some intuition and get an idea of what i'm doing here but i've just done a for loop i've said var i equals 0 i is less than 10 i plus plus console.log i i know this is confusing but let's have a look at this here what we get 0 through 9 printed out to the screen okay so what the heck did i do and how does this work well the first step of a for loop is to define a variable in this case i'm going to call it i you can call it whatever you want and set it equal to an initial value this initial value is going to be the value that you start looping at next we type a condition now this condition is the condition that will be used to run the for loop it must involve the variable here that you used so i have to use i here and then we have an increment so i plus plus and this tells me how much to add to i every time one of these loops successfully completes inside of these curly braces it's what's gonna happen whenever we loop we could of course do multiple things in here like console.log tim right and then if we go here and we refresh we can get tim every other time after all these words but that is the basics to how this works now what i can do is manipulate these numbers so that i can loop a different amount of times or through different numbers so for example rather than adding one each time i could add 2 so this is how much you're adding to i every loop and now watch what happens when i have my numbers i go from 0 to 8 but not to 10 because obviously i was less than 10. i could start at a different value i could start at value 5 so now we will get five seven nine printing out because we want five and then we added two each time and that is how a for loop works so you just start at some value you're less than some value and then you have i plus equals you know whatever now in here we can do all kinds of different things i can also break out of this loop if i want so i could say something like if i equals equals seven i could break and now what we'll get is or we should get at least is just five seven printing out and we do because we broke when i equaled seven and this break keyword works the same as it does for a while loop it simply breaks out of whatever closest loop we find which is this for loop and yeah so now what i'm going to do is show you guys an example of how we can loop through an array in here and actually see if a specific value exists in the array so what i'm actually going to do is i'm going to create a function what i want this function to do is to look in an array for a certain value and return whether we found that value or not so this will be a little bit of review from functions in case we forgot about them before so i'm going to say function find in array like this i'm going to say arr which stands for my array and i'm going to stay value which stands for what we're looking for now what i'm going to do is write some piece of code that's going to look through the array and tell me if a value exists in it so what i'm going to do is make use a for loop actually and you guys will see how this works here i'm going to say 4 and i equals 0 or sorry not into i i'm coding in java right now say var i equals 0. we'll say i is less than ar dot length and remember ar is going to be an array and then we'll say i plus plus now what i'm going to do in here is i'm going to say if ar i equals equals value return true like that okay if i get spelled true correctly and at the end of this loop i'm going to return false and we're going to run through how this works okay so what have i done here well i've essentially created a for loop that's going to look through every element in the array that i pass in because it's going to go from 0 to whatever the length of the array is and we're going to check some value every time inside of this loop so what i'm going to do is say if the value at array whatever index i'm at is equal to the value we're looking for return true because that means we found the value so we can simply return true and by doing this that will automatically break out of this for loop so we won't continue to loop anymore we'll just return to wherever we were called from now let's say we loop through all the elements in the array and we don't find the element well we'll step out of that loop we'll start moving down we'll read this return false and then we'll simply return false because that means we did not find the element we were looking for so let's actually call this function and see if this works so what i'm going to do is i'm going to say var arr equals and in this case we'll say 1 2 5 6 7 maybe we'll throw a tim in there we could throw a true why not now what i'm going to do is simply say console.log and we'll do the name of the function here so find an array and then what i'm going to do is pass the array and what is the value that i want to look for well actually let's look if five exists in the array so the output here should be a true or it should be a false and let's have a look at our console here we refresh we get true as we did find five in the array now what if i do tim three is that in the array well let's look here no we get the value false so that's just a very basic example of what you can do with a for loop it's very powerful you can do lots of different things now i will show you some embedded for loops and i'm going to talk about four of either in this video or the next one but let's leave that function up here for now and what i want to do is i actually want to make another function and i'm going to call it n squared let's like this okay n squared now in here what i'm going to do is take some value n and what i want this function to do is print out the value n but squared so whatever n is i want to print out that like amount of times squared now i know this is confusing but you guys will understand what i mean in a second so what i'm going to do is i'm going to set up a for loop and inside here i'm actually going to say var i equals 0 i is less than and in this case n and then we'll say i plus plus now what i'm going to do in here is make another loop and i'm going to say 4 var j equals 0 and i'm going to say in this case we'll say j is less than n and then j plus plus and then what i'm going to do in here is say console.log and we'll simply print i don't know we'll just print run okay so what i wanted this to do was simply have something printing out to the screen n squared amount of times now how do we do that so this is n we want to print some value n squared amount of times well what i could have done is the exponent so i could have done n and then to the exponent 2 which i think i showed in previous videos how to do but i want to explain why this will actually print the value run n squared amount of times and for those of you that are unfamiliar n squared is simply n times n right so it's n times n two times which is that okay so how does this work well we have this first for loop that runs from i equals zero to n which means it's going to run actually n times i know people like well why do you have it less than n well because since we start at zero we go up to n but don't include n so that will actually be n amount of times that we will loop and then inside of this for loop we have another for loop that starts j equals 0 and goes j less than n which means this is going to run n times so if this is running n times and this is running n times and this runs every time one of these runs well this actually gives us the value of n squared because what's going to happen is this is going to be on loop 0 this is going to run already n times right then this is going to be on n uh what is it i equals 1 so now we're going to have n plus n and then plus n and then plus n and we're going to keep doing that n times right and that's how many times this is going to loop now if you're confused by this just ignore it it's not that big of a deal but i just want to show you guys some different things that we could use so now what i'm going to do is n squared i'm just going to put 5 in there now you guys should know that that value is 25 so 5 times 5 let's refresh this you can see that it printed 25 or run 25 times now if i put a value like 3 in here obviously we should get 9 and you can see we're getting 9 there so these are my kind of two examples with for loops i'm actually going to stick the uh or stay with the four of loops for the next video so we'll talk about those there but hopefully this gives you an idea how you can use for loops again you have a variable you can start it wherever you want you have a condition this is what you're going to loop until and then you have an increment so what you're adding to this counter variable here you can obviously put for loops inside of for loops if you want to that's what we've done here and you know a really great way to loop through elements is to use a for loop and if you want to check if something exists then you could do something like this check it against a value and you know put it in a function return true all of that for each loops or four of loops now essentially this is a way to iterate by element or by item rather than by index now if you don't know what that means that's totally fine i'm just going to start with a very basic example showing how we iterated through a array in the previous videos so in the last video we did something like you know var ar equals and then we had an array and maybe we had something like tim and joe and bill and when we wanted to print out all of the elements in this array well what did we do we made a for loop and we said 4 var i equals zero i is less than a r dot length and then we said i plus plus and then what we did here is we simply console.log error at index i now we know that works we showed that in the previous video but is there an easier way to do this because essentially the only reason we have this i counter here is so that we can access the elements of the array right by going up one index each time well if i don't care about this counter variable i i don't really care if it's 1 i don't care if it's 2 i just want to get the elements there's actually a better and easier way to do this and that is called a 4 of loop now what i can actually do is say 4 and in this case i'm going to say let and we'll just do element of error now i know this seems like a strange kind of statement here but essentially what this means is we're going to take elements from or of the array now what this is going to do is loop through each element in our array and every loop make this variable element equal to that element now i know this is confusing because i've used the word element but let me just illustrate to you what this does so i'm just going to comment out this like that and we'll leave this one here and let's just go to our console and have a look here and you see we get tim joe and bill now what happens here is in our first loop we set the element variable element equal to tim in our second loop we set it equal to joe and then we set it equal to bill and this means that we no longer have to do this thing where we get the length of the array we increment a counter we set the counter to zero we do the index at i it's just a lot cleaner and easier when all you want to do is access the element and that is pretty much how you use this um you know of array now i will show you here that this says let right but we can make this nothing so if we make this nothing that that's fine we can do that but the reason we might want to specify for example like const or or let here or var is whether we're going to change this value or not and i want to show you how this works so i'm going to say let element of arr but what i'm going to do is print out the element then i'm going to change the element so i'm going to say element equals 5 and i'll print the element again and what i'm going to do is actually print the array before and after we do this and this is kind of a challenge for you guys so what i'm going to do is console.log the array and i'll log it at the beginning too so what i'm going to do is print the array i'm going to loop through all the elements in the array so tim joe and bill i'm going to start by printing out that element then what i'm going to do is change the element so i'm going to change it to 5 i'm going to print it again and then i'm going to print the array afterwards and my question to you is is the array before going to be the same as after because well element is one of the elements from the array so if i change it in here does it actually change the value here or not that's what we're looking for so let's save this and let's run this and let's have a look and no it does not it does not change so we get tim five joe five bill five and we can see the array is the same as before now the reason this happened is because we defined a new variable which actually stored this specific object inside of it and then when we change that all we're doing is changing the variable element we're not actually changing the original list now that's worth noting that's very important so make sure you understand that concept because now i'm going to do the same thing except not with a for of loop i'm going to do it with this regular for loop and show you so let's get rid of all this and remember it's just let or const or whatever you want element of arr if you don't think you're going to be changing this element here so whatever this is you can make this a const and that simply means that you can't change it where it won't change it doesn't really matter that's for more advanced use typically you're not going to have to deal with that but anyways let's do another example now so keep in mind what i just showed you while we do this now what i'm going to do is print ari okay but now what i'm going to do is change this element to equal to 5 and then print it again so i'm essentially doing the same thing i did in the other loop except we're just using a different way of looping through the elements and then what i'm going to do is print error and i'll print it beforehand like this so this code is almost identical to what i just had below except rather than iterating by element which is what we were doing before when we did of array we're iterating by index right so we're using the indexes of the array to access the elements so what happens now if i change arr i to 5 does that actually change this array or does it just change some local variable inside of this for loop well hopefully you guys know the answer to this but let's just run it and have a look here and notice that the array after has changed to all fives it's not the same as the array before now the reason for this is we are not storing these values in a variable when we're accessing them and changing them we're actually getting them directly from the array so if i say something like you know array 2 equals 5 well that's obviously going to change the actual array right we're not just going to change a temporary variable that we've had inside the loop like we did below so it's very important that's worth noting and you know based on what you're going to be doing if you're going to be manipulating the array you may want to do it like this right you can't loop through the elements of the array if you're going to be manipulating it because you don't have access to actually change the values right now that is pretty much it for the four of i will show you that you can do it through strings as well so if i say like var x equals hello what i can actually do is say 4 and we'll say letter of x and then what i can do is just say console.log letter like that let's have a look here so there we go we get hello printing it out like that so just showing that you can actually iterate through a string i believe you can also index a string so we'll do an example with that in case i hadn't shown it before so we'll say int i'm sorry var i equals zero i is less than and in this case x dot length i plus plus i think we need to not have a space there and then console.log x at i let's see what we get here when we run it we get the exact same thing yeah so you can actually iterate through a string a string is iterable and by the way i know i've said this word iterating that simply means looping through or you know looping through all the elements right sets now sets are another data type in javascript i've left them until now because they are a little bit more advanced and i want to show the difference between sets and arrays now what is a set well essentially a set is an unordered collection of unique elements now collection just like array means it holds multiple elements unordered means we don't keep track of the order of the elements so that we kind of do and i'll talk about that in a second and then unique means that no elements can exist more than once so recall when we created an array so i said like var ar equals and then we made an array and we did something like you know two three four whatever right these elements i could have multiple of the same and that was totally fine and we keep track of the order in which our elements occur we can index these so i can access element zero i could access element four you know what i mean or element five whatever i want and that's an important property of arrays is that we understand the order and we can access each element individually now sets are a little bit different so what i'm going to do is just call this underscore set because says a keyword what i'm going to do is create a new set now with a set we cannot actually index elements directly all we can do is see if elements exist in the set we can delete elements and we can add elements from the set there's a few other operations which i'll talk about but there's no way to look at every individual element in the set and see you know like index zero index one there's no way to do that with the sets unless you do some special stuff which isn't really that important so anyways that is kind of what a set is and i'm going to show you because i know some of you guys are confused that it is hard to kind of explain this so what i'm going to do is add a few elements to my set now i'm actually allowed to chain these add methods together like this it's just a property of the set this works because when this add method is called it actually just returns the original set which allows me to just do this chain if you don't understand that that's fine but if i want to add elements what i can do is do something like set dot add so now i have three i can add five i can add the element seven and now what i'm going to do is actually add the same element three again because i want to show you what this set looks like so keep in mind that a set is an unordered collection of unique elements now try to remember like based off that definition what are we going to get when i print out this set let's have a look at it here let's refresh we get 3 5 and 7. and notice that although i've added three twice three only exists in the set once that is because again these are unique so you can add the same element multiple times into the set if you want but it's only going to exist there once and the reason for this is because when we use sets we only care if elements exist we don't care how many elements are the frequency of elements so what i'm going to do now is actually have a look at the has method for a set so dot has which tells me if the set has a specific element in it so in this case if i do set dot has2 you can guess what the result's going to be here which is false if i do set dot has let's say 5 an element that does exist in our set and we refresh we get the value true now the massive advantage of this is that sets actually have what's called an 01 lookup time now i'm not going to go into time complexities which some of you might have heard of before but what that means is sets are pretty much instant to determine if any item exists in them now you might be like okay well that's the same as arrays right well let me explain to you how we look up items in arrays versus sets and the difference between the two because you do need to understand this so you can understand when you would even want to use a set so if we have an array and i'll put the same elements in it so 3 5 7 if i want to look to see if some element exists in the set let's say the element you know negative 5 or something like that or sorry not the set in the array what i need to do is i need to actually look through every single element in my array and check if those elements are equal to what i'm looking for that's you know the basic principle of an array we have all these different elements we could have multiple of the same elements if i want to find if something exists however though i could potentially have to look through every single item in the array to find it now obviously if an item exists so say three when i reach that item i can determine that i found it but if the item doesn't exist like negative five i have to look through every single element to determine if it's there or not now in an array of size three this is totally fine it's not doesn't take very long computationally to determine you know out of three elements if an element exists but imagine we had an array that had 10 000 elements inside of it well now what if i'm doing constant lookups on this array and you know every loop per se maybe i'm in a for loop i'm checking whether a certain element exists well this is obviously going to take a very long time i need to loop through the entire array and that is just not very efficient to continually do when all i really care about is if an element exists so this is where we use a set it doesn't matter how many elements are inside of a set it will maintain an average lookup time which is called 01 which is constant time which essentially means it doesn't matter how big this set gets it will continue to take the same amount of time which is a very very small fraction of time to determine if an element is inside of it so that is kind of where sets are useful and why you'd want to use them typically when you're solving programming problems and doing stuff like that sets are very nice data structure to have and to be able to use or data type whatever you want to call so let's go through a few other methods of the set now hopefully you understand a little bit about why we might want to use it so another method we have for seth i'm just going to look at my thing here it's actually a method it's just the attribute is the size so just like arrays and the other ones that we've looked at we can check the size so let's do a refresh here we get a size of three so pretty straightforward there we can also delete elements so i can delete say element five let's actually have a look at what this dot delete method returns by refreshing this for us um returns true which means this element did exist inside of the set so when we deleted it we got that true value now let me just console.log the set afterwards you can see the difference when i delete that element so let's look at this here refresh we get set three seven we've removed five from that and now what i'm gonna do is actually set dot delete five let's see what happens when we delete an element that doesn't exist in the set so let's try delete five again so we delete five up here remember it exists in the set in this instance and then down here when we delete five it doesn't exist because we just removed it so what do we get as the output from that method well we get false because that means when we tried to delete five it didn't exist inside of the set okay so those are the basic properties of the set another one that we can use is dot values this one's kind of useful what this will do is return to us all of the values inside of the set in the order in which they were inserted so we get 3 5 7 that should be our output there and that should give it to us in an array let's have a look oh sorry that's actually a set iterator which i'm not really going to go into so much but you can see the different values three five and seven and that is giving it to us in order in which it was inserted now the reason i said that sets have an unordered collection is because technically if i did something like dot add three like this our set still only looks like three five seven even though i've added three at the end and i've added three at the beginning and at the second position we only have three five seven so although this does keep track of the order in which it's seen elements it keeps track of the order in which it saw the first element that was inserted into the set if you're confused by that it's fine you don't really have to worry about that too much i just want to explain why i said unordered yet some of you might consider this to be an ordered collection okay so now let me just show you using a for loop to iterate through all the elements in a set so this is pretty straightforward what we're going to do is say 4 and we'll just say var i don't know entry and then of in this case we're going to say underscore set dot values it's important we add this and this is going to give us what's called an iterator object which will actually allow us to just look through the different values so now we can just console.log in here i guess oops in console.log entry so let's have a look at this if we refresh we get three five seven that is how we iterate through the different values of a set okay so i've just cleared some of this code and what i'm going to do now is talk about the set constructor which is something i kind of skimmed over at the beginning so obviously to create a new set what we've done is just typed new set but what we can do is actually give some arguments to what we call the set constructor which is this aspect right here that will create a new set for us now what i can do is actually fill in some things in here i can actually put what's called an iterable object so for our purposes that's going to be an array or a string for right now and it will create a set using those items so if i decide to do an array maybe that looks something like this well let's just have a look at this when i create the set so console.log set one let's have a look at what this is refresh we get set for one three four five so it's taken all these elements converted them into a set and that is what we get now i can also put a string in here so i can do something like hello and if we have a look at set one again remember i change the name there we get h-e-l-o again what we've done is we've separated all of the letters added them all into the set since l existed twice we only get it once because that is the property of a set now in terms of some other set operations there is set operations like union difference and those kind of things in other languages but i could be incorrect as i'm just learning javascript but i've tried to use for example the union method and this does not work i believe you actually have to implement these methods manually which is not that difficult where union simply means for anyone confused combine two sets together that's what union means but i don't think they actually have a built-in method for that which is kind of annoying but that's fine we can deal with it now we'll show you one cool method that the sets do have but it's going to involve me creating a function first so let's do that so let's say function um test like this and all we're going to do is actually let's put an x in here it's just a console.log x now we're going to use this function from what's called the for each method of our set now this is kind of cool we'll talk about how this works so set for each and then what i can actually do is just put the name of the function in here now what this is going to do is for each element in my set call this function on it and pass the value of that into this function so we're actually going to print every value of our set or everything in our set um just by using this so let's have a look at this here refresh uh what is happening here let's one second refresh uh set is not defined at oh sorry this needs to be set one my apologies let's refresh this one more time and we get h-e-l-o so in my opinion that is pretty cool what's happening is we can pick some function and we will apply all the operations on each element from our set you know using this function right so we're just going to call this function on every element from our set in this case we're just console.logging but we could obviously do some more advanced things like we could check if this was a certain item i could say if x equals equals let's just say um the letter l then we will simply uh console oops console.log found it and then we'll otherwise just say else console.log nope okay so let's have a look at this now and see what we get so refresh we get nope twice found it and then nope so you get the idea we can create whatever we want we can use this for each which is very useful and then apply this function to every element inside of our settings maps now maps are kind of a mixture of sets and arrays now it's not really the best way to describe them but you'll understand them as we get through but they have the same property as a set where we can actually look up items and see if items exist in what's called constant time now in case i didn't make this clear enough in the last video adding items and deleting items from a set also happens in constant time now i just want to say this because it's the same as maps when you have an array right we have an array and we look something like this and we want to add an element say to the beginning of this array well this actually takes what's called o n time and i don't want to get into space time complexity with you guys but essentially the more elements you have in an array the longer it takes to potentially delete one or add one and especially to find if one exists the only real benefit of an array for us is the fact that we can keep track of the order in which elements exist and we can access them directly by using that index right ray zero array one ray two whatever right that's kind of the advantage the reason we use an array and for most problems that's fine but there's a lot of instances in which we actually want a faster kind of structure that will allow us to add delete and look up items in constant time but we can't necessarily access them with indexes and know the order in which they were inserted right and we also can't keep track of the frequency whereas in an array obviously we can have the same element more than once okay so that's my little feel here now what i'm going to do is start talking about maps so let's create a map we'll just call this mp equals new map now what is a map well a map is similar to a set but what it holds is what are called key value pairs now this is kind of what i mean we have a key maybe this key is something like high and this maps to some value maybe in this instance we say 6. so we have some arbitrary key can be called whatever we want mapping to some value now this is very useful for a lot of different tasks i'm going to show a good example in a second of how we actually use this but the whole point of this is that this key value is what we use to access different uh or this key yeah this key is what we use to access different values and obviously we have you know more than one key so i'd have another key like this i could have maybe the key apple and that corresponds to the value seven and obviously our keys can be different too we could have a key that's actually numeric which is eight and that could map to maybe the string tim right so this is the way that a a map works we have a key that maps to some value and you'll see why this is useful in just a second and again same properties here to look up any key is going to be instant time so you can think of it as instantaneous versus an array that's much slower and to grab that value is going to be the same so to add delete or lookup is going to happen very quickly that's why we use a map so let's start talking about some map operations i'm going to first talk about the constructor so right now what i've done is created what's called an empty map although i can actually add some values in this constructor to start off with some kind of initialized values so to do this what you actually need to do if you want to start start with some keys in here is create an array of arrays of keys and values now i know this seems strange so actually let's separate this um like this so you can get a better idea of how this looks okay and like that okay so what i'm done is i've had this initial array and then i have two arrays inside of here and what i'm going to do in these arrays is put a key and then a value so my first key i'm just going to say is t and this will point to let's say the value 5 and then let's have a key v and maybe this points to the value 8. so we've started off our map with these different key values let me just put this up here because that's going to be annoying okay so now how do we access these keys how do we create new keys how do we do all this well to get a key what we use is called get now i'm just going to console.log this so we can see so i'm going to console.log mp which is obviously standing for map and what i do in here is i put the key that i want to access now what this is going to do is return to me the value associated with the key so if i put for example t here and we go and we refresh this you can see that we get the value 5 printed out because this method returned to us 5. now if i put v and i refresh this here we get 8 and hopefully you're understanding and getting the point that is how this works now let's show how we can actually add things to our map so to add something to our map what we do is mp.set and we simply put in here a key and a value so i'm actually going to do this a little bit weird just to kind of confuse you guys a bit i'm going to actually set the key t to the value 9. now what do you think this does remember maps are very similar to sets do we think this adds another key called t that has the value 9 or does it override the existing key and change that value well let's see here if we try to get the value of t let's see what value we're actually going to get well we're going to get 9. that's because if you set a key that already exists essentially what you do is just completely override this and change the value to whatever it is you put here now obviously i can add some other ones so i can mp.set you know like h i honestly let's actually just set like three equal to hello now you see if we get the key three from our map we get the value hello and let's try to get a key that doesn't exist from our map and see what we're getting there do a refresh undefined obviously there's nothing in the map that's going to give us that value so those are the two basic operations for maps we have set and we have get now obviously we can look at the size of our map just like almost everything in javascript so if we do this we get we have three keys so three key value pairs in our map because we've added this three hello and that is the basic principle now to delete keys is very easy as well we're just going to do mp dot delete we could delete the value or the key t and we should see that our size changes from 2 to 1 so let's have a look at that and now we get the value 1 because we deleted t what happens if we try to delete a key that doesn't exist for example the string 6 well we still have a size of 2 and with no errors that's fine we just didn't end up deleting that key all right so the next one that i want to talk about is has now has simply is a boolean value that tells us if the map has a specific key so very similar to set and this runs in the same kind of time as it does for a set so i say mp.has and i put the value t like this and we print out our answer obviously that is true and then if we do something like you know 6 here so let's refresh this then we get the value false because obviously the key six or the string six was not one of the keys in our map and yeah i mean that is pretty much it for maps i'll show you a few other methods we have the map.clear method so i could say mp.clear let's just actually print out mp so we can have a look at it after mp.clear is obviously just going to remove all of the keys so we see we have an empty map here we've cleared all of the entries from it what else we have is the map dot entries method so this one is actually interesting i'll show you this uh entries like that so let's refresh and you can see we get t points to five v points to eight and this is what's called an iterator which means we can loop through this uh and look at all the different entries so let's actually do that now we'll do a for loop and just show how we can iterate through this so we'll say for var entry of mp all we need to do is simply console.log the entry now the question is what is entry is entry going to be the key is it going to be the value or is it going to be the whole thing let's find out by refreshing and we can see that's actually giving us the whole thing so if i want to access just the key or just the value what i have to do is actually index either 0 or 1. if i index 0 that's going to give me the key if i index 1 that's going to give me the value and the reason for this is because again we're actually looping through this array right so we you know we go through the map and then we are given for entry an array so we have to loop through the value to determine which one we actually want i did not mean to do that let's refresh now you see we're just printing out the keys and if we were to change this to one then we would just be printing out the values like that pretty straightforward okay so now let's go through an example with why we'd actually want to use a map and this one is a fairly um good example actually i like this example to count the number of characters in a string so let's just say str equals and then let's do this is my new string uh hello just add some characters in here so what i want to do is actually create a count of all of these characters i want some way to be able to find out how many of any letter exists in this string so if i want to find how many t's i want a way to do that how many i's m and so forth you know i want a way to do that i want to count all of the different letters well we can do this very easily using a map and i'm going to show you just by going through the example and then we'll walk through it step by step i'm going to say var letter of string which means we're just going to loop through each letter in our string and what i'm going to do now is say if in this case we'll actually need these mp dot has letter so if it does have the letter what i'm going to do is actually say mp.set and in this case the key is going to be the letter and the value is going to be mp.get letter plus one now what i'm going to do is store in my map key values that look something like this i'm going to store the letter for example let's say t and i'm going to store the count as the value so i'm going to start how many times i've seen you know whatever this is so if we actually have the letter already inside of our map that means we've seen it before and we'll talk about how we're going to do that in a second we'll grab whatever the current value of it is here and then we'll add one to it and store that back in the map and remember when we set you know a specific key if that key already exists in the map which it will have here say we have t we just override that and we'll just change t's value to be three and that's the point we're going to just increment and count how many letters and i'll show you how we can look at them in a second now otherwise so if the map doesn't have this letter we need to add that letter to the map so we're going to say mp.set letter one the reason we can just put one is because if this is the first time that we've seen this letter it's not already in the map all we need to do is give an initial value of one because we've seen this letter one time okay so that is how we do that now let's just print out the map to have a look at it after so if we refresh we go here we can see that we have now our map t has a count of two h has two i three s three blank which is space actually has a value five and then we can keep going and see all of the different letters as well as their counts so this is useful because now if i want to check how many you know say t's are in my map what i can do is say okay let's get the value of t let's see how many t's are were in this string that we counted right so if we refresh now we print out two and now any letter i want i simply put inside here and obviously if we don't have the letter in there it's going to give us you know just an undefined value but you kind of get the point on that immutability now this is important because if later on and i'm not sure if i'm going to do this in this series yet we start talking about objects more it's very important to understand how items can kind of change and values can change in our program and this is a kind of a more advanced topic where a lot of beginners find it difficult but i'm just gonna you know kind of tell you guys this is extremely important so make sure you're paying attention and if you don't understand everything from this video you know look up some stuff on your own and make sure you understand this concept because it's very important so the first thing we need to talk about when we talk about mutability is first of all what even is mutability well when we talk about mutability we're talking about being mutable or immutable and that essentially means changeable or unchangeable now when we have a program we have something called variables and then we have something called primitive data types and something called objects so for example if i say var x equals 5 what i've done is created the variable x so this x here and it stores the value 5 which is what we call a primitive type and i'll talk more about that in one second now if we say var zed equals and i create a new array here this actually stores what we call an object and if i were to create another variable and i said variable s equals zed what i've actually done here and we're going to talk about this more in depth but i'm just kind of going through the beginning stages here is rather than created a new array that is equal to you know whatever the z array was i've actually just created another name to reference z so that essentially means that if i change anything on the variable s it's actually going to affect z as well and same goes if i change anything on the variable s or sorry z it's going to affect the variable s as well that is because these variables here actually what we call reference the same object so changes to one of those variables will change the other one because they're not actually storing you know the value of the array they're storing the array as one object in total whereas when we have this variable x like this this holds just a value it doesn't actually hold a reference to a specific object and again you know you're probably understanding why you might be confused by this we're going to go through a ton of examples but let's do one now so hopefully that makes a bit of sense so our primitive data types are what we call immutable which means they don't change and we're just referencing values rather than objects so if i do something like var you know t equals x well if i change the value of t that does not affect x the reason for that is because this value here is a primitive uh primitive type it's not an object so we can actually do that so this is a way to kind of you know make a copy of this variable x here and then we can just change it within t whereas if we did this with an array well we're going to get the same thing we just talked about because this is what we call an object and same goes for sets and for maps as well okay so let's do an example i'm going to create a function i'm going to call it uh add5 we're going to take in some variable let's just call this num and then what we're going to do is simply add 5 to this number and print it out so we're going to say num plus equals 5 console.log num now let's just call this function here so let's actually call a variable let's call it x let's set it equal to 5. let's do add 5 x and then let's console.log the value of x now if you're paying attention and you understand what i was talking about you should be able to answer this question here which is okay so what am i going to be printing what are the two values that are going to print out to the screen that's what i want you guys to think about now and i'm just going to go into the answer so pause it if you want to you know take a look at that well what happens here so what we're doing is passing this variable that we've defined which is 5 to this function at 5. what this function is going to do is take that in as a parameter called num it's going to add 5 to that parameter num and then it's going to print out that value so we should get 10 from inside this function but then down here does x change like i passed the variable x to this function and we added 5 to it so does that mean we added 5 to x or does it mean we just added 5 to none how does this work well let's have a look here let's refresh the page and no it does not change the value x we get 10 and we get 5. the reason for that is because when we pass a value to this parameter what essentially is happening is inside our function something happens like a line of code is kind of written like this num equals x now we recall from before that since num is what we call a primitive type this just creates a copy of it and it doesn't actually change the underlying value of this variable so that is the first thing to understand that when we're calling with primitive types that's what happens now what are the primitive types well primitive types are numbers strings booleans undefined and null so for example if i say var equals string like that this is a primitive type obviously well this isn't good now this will work we can try this actually so let's refresh we get string five and we get string we can see it didn't change and now if i do let's say you know the value true and rather than setting this like this we'll just set this to false and we print these out we can see we get false and we get true and these are our primitive data types right and same thing with null and same thing with undefined so those are what we call the primitive types now let's talk about what we call the reference data types or the object data types and see how these work differently so we're going to create a new function now and what i'm going to do is actually say append5 now what this is going to do is it's going to take in some array so we'll call it array and what it's going to do is simply append so i think we can just do that with push the value 5. we're going to console.log our array here i'm going to now just make an array in here that's one two three four so this should be one two three four five and now we're gonna have a look at what this does so if we change this name to append five we need to understand what this is going to do so before i go think about what's gonna print out here is it gonna be you know the same result that we've seen previously or is this gonna be different well what we're doing now is using what we call a reference or an object data type which is an array so this is actually mutable it means this is changeable whereas the other values the parameter types were unchangeable and we saw that because they just created copies when we set them equal to a new variable whereas here what we're doing is actually passing in this entire array so this array goes in and then what we're going to do is push 5 onto that array then we're going to print out whatever the value of the array is which should be one two three four five and then we're going to come down here and now we refresh the page to see what we actually get which is one two three four five one two three four five now why did this value x change like x is equal to one two three four here up here all we did was push 5 onto this parameter array that's not the same variable x why did it change well again that's because what we did is we passed the actual object to this parameter we didn't just pass you know some copy of it or something that looked like this object right we passed the actual physical thing so when we change this it's going to affect x and it's going to affect ar r and that is kind of the basis behind mutability and it's very important to understand because you can design functions that actually don't need to return specific values they can just modify the input that you've sent to them so in this instance the best you know example is just to use an array you can see here that we wanted to add 5 to an array rather than you know having to return a new array from this function which we've done before we can simply just tack on this 5 by actually modifying the input here now i can do the same things inside of here where i can do like arr at 1 is equal to 5 and we'll have a look at how this works and you can see that now we get one five three four one five three four again notice you know it's not changing now let's even go a little bit more complicated here and save our ar2 equals air r now i'm gonna go ar2 at 1 equals 100 and what do you guys think is going to happen now so i'm printing you know arr i'll also print error 2 first so let's say console.log we'll do ar2 arr and then x what is going to be the value of all three of these variables are they going to be the same are they going to be different does this you know do anything that i've just created a new variable inside of here well let's have a look and obviously no it does not again it doesn't because when we do this we're not copying this array we're simply kind of just having a pointer that goes to it and says hey you know this is where the array is you know this is where you can modify it and that's how it works now i'm going to go into a little bit deeper level of how this works just by doing something on the drawing tablet really quickly well i'm actually i'll just do it with my mouse because it's nothing you know too important essentially when we have an array so i'm just going to draw one out here and excuse me because i'm just drawing with my mouse when we create a variable you know let's say x and we set it equal to this array what we do is instead of having it hold the value of the array it actually holds the kind of pointer or the location of memory where this array is stored so let's say this array is stored inside you know our computer memory maybe it has an id that's something like you know two right well when we say x equals some array rather than saying you know x is equal to this array what's actually happening is x is equal to this id so it actually knows the location of the array but it doesn't really necessarily know the value unless it goes to that location to look it up so when i do something like y equals x what i've actually just done is just made a copy of the pointer to this array so what that means is since x you know pointed to the array up there what's happening now is y is now going to point the same array so they're pointing to actually the same object in memory which allows us to change them from different variables so this is what we call an alias when we do something like this where we just have another name for the same actual object and i've just been doing this example with arrays but essentially any data type that is not a string float number undefined or null works like this and rather than storing you know the actual value of the object where we can copy it and kind of change it around variables it stores the actual like location and memory of that object i'm going to pause for one second just to get something up on my screen i'm going to show you guys how we can create a copy of arrays rather than having to uh what do you call it change the value because sometimes you don't want to do this okay so to copy an array there's actually two ways now the old one i'm going to show you first which kind of makes a little more sense to me because i'm from a python background but there is this way in the new version of javascript that i'll show you i'm not really going to explain it because i don't understand it completely but it does make a copy of the array for you so what i've done here is said you know var x equals 1 2 3 4 5. i want to say var y and i want it to be equal to x but i want it to just be equal to an array that has the exact same values of x but is not the same array right i don't want it to point to the same object because maybe i want to modify this one but i don't want to modify x right so how do i do that well there's two ways the old way is to do x dot slice so what this actually does and this is a method that you can use on arrays regardless of if you're copying them or not is takes a kind of section of the array and copies it so in this instance when we don't put any values inside the slice function or the slice method what it's going to do is actually just copy this array entirely value by value now if i want to actually say you know just copy the first three elements of this array what i would do is something like 0 comma 4 i believe and what this is going to do is take all the elements starting from index 0 up to but not including 4. so actually sorry this should be 3. so what that's going to do is simply copy the elements 1 2 3 because we won't include index 3 because that is kind of the end bounce so i'll show you i'm just like i'm not making this up this actually works let's refresh here and you can see we get one two three four one two three so that is how the slice kind of works if i just do this we'll have a look and we can see that we get this entire thing but now notice that i can change the value so i can say something like y2 equals 999 and this will not change x so you can see this changes my y value but it doesn't change x so that's kind of an easy way to copy now there's another way to copy i'll show you that as well here so let's leave actually everything that's there but let's just make a different copy so what we can actually do in here is do dot dot dot and then x now i don't actually know really what this operator is but i just saw that when i was looking it up that this is a way that you can make a copy as well so if i do this and refresh we get the exact same answer so we keep stick with that copy what this has done is essentially just copied x and you know put that into its new array so if you guys are interested in looking at how that works you know i urge you guys to but i figured i'd show it in case anyone wanted to get a look at it and that has kind of been mutability so hopefully you kind of understand now the difference between a primitive type and a reference slash object type in javascript and why we need to understand the difference because sometimes we're going to modify the actual you know input and sometimes we're going to create a copy of it and do some other kind of alterations on it so this is what we would call a copy or clone this value y whereas before when we just did something like you know var z equals x that would be known as an alias or simply another name for whatever this x is right you

Channel: Tech With Tim

Views: 44,423

Keywords: tech with tim, javascript, javascript for beginners, beginner javascript tutorial, javascript tutorial, tech with tim javascript, javascript course, learn javascript, javascript beginner course, beginner javascript, learn javascript for beginners

Id: aPvHcc0ysm0

Length: 178min 7sec (10687 seconds)

Published: Fri Oct 16 2020