Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course

all right welcome to the introduction to JavaScript course at scrim be calm we're gonna be talking about a lot of things a lot of important concepts in JavaScript starting with data types and control flow and basically everything that you're gonna need to get up and running by the end of this course it's gonna be covered over 14 lessons with seven different challenges these challenges are going to be some concepts that you may know the answer to if you're paying attention in the course or you may not they're they are designed to introduce you to some of the stranger or weirder parts of JavaScript a little bit about javascript javascript is written in ten days it's an event-driven language and object based language and it was originally designed to make web pages more dynamic that's where it has grown and flourished although you can use javascript for databases for the backend for mobile applications java scripts home is in the front end client-side development with HTML CSS it's one of those core three things HTML is sort of the body CSS is how it looks and JavaScript is making sure that it's dynamic a little bit about me I've been working in JavaScript for about two and a half three years as a I've been I'm currently a front-end engineer although I do full stack I'm also a content creator on YouTube if you click on the icon you can go check out my channel I do software tutorials and talk about topics related software as well as my own udemy course I'm really excited to be making this course let's go ahead and jump right into it so in any programming language you're gonna need a way to store a language and values and the way that we can do that in JavaScript are with three main keywords var which is essentially deprecated and I don't recommend we use so we're not going to cover that because I don't even want that to be part of your mind but if you see var you know example equal to true for instance we now can console.log example like so save it it's kind of logging it out right so if it's gonna print it out that's what console.log does but here we're storing a reference to the value true and if we we wanted to make this you know Dylan for instance and we save just update it you'll see it's gonna print out Dylan right don't worry about var and so do using var what you want to use is let and when we get to for loops I'll go into a little bit more detail as to why devar has been deprecated but right now when you're storing values that you're gonna override in the way that we override variables we already have example defined here well you know I didn't say example is now equal to we'll do my last name Israel right is our ad I'll save it it's here we're never we're not getting done although Dylan is originally set I think it's overwritten by example here with our let now if we wanted to make a constant we would use cons but you see we get this syntax error the reason for that is when you're dealing with a constant when it when you're talking about strings when you're talking about boolean x' when you're talking about numbers and we'll dive into datatypes in the next video but constants cannot be overwritten when dealing with the primitive values and we'll talk a little bit more about primitive values in Dave College but typically if you're gonna override values like so or if we wanted to override right here get rid of that that's resetting the value we would use a contrite but if we're gonna reset a value potentially we're gonna use let we're gonna dive a little bit more into detail about how that is typically true unless we're dealing with a or objects in the next video we're going to talk about data types but in terms of storing data what you're going to be using this letting kant's all right let's start by talking about what a string is you saw earlier we printed out my name and with we're putting out my name is in console.log and we have this variable here called name and so it's gonna go ahead and print out Dylan right we showcased that earlier so what this is called this datatype here is a string we can actually use this type of word here one word to actually find out what it is if we want to print it out and you'll see that it's printing out string so that's one way if you ever get confusing and kind of check that out right there's not too many data types in JavaScript which is nice but you'll see here we have double quotes around it we can also do single quotes but the the quotes have to match right we can't have a double quote on one side and a single quote on the other and that will work as well so one other thing let's let's actually go ahead and make this first name and let's create another variable called last name and like I said this Israel and notice how I'm ending these statements with semicolons as well this is a good convention so what we'd want to do say we wanted to concatenate this well we could do something very very strong will you do something like this where we do first name plus then we want a space write an empty character plus last name and we save it and then we're gonna get this nice spaced out we're here well and you'll notice we'll showcase it without the space it's gonna look all they're gonna be touching right and that doesn't look very good and it used to be up until es6 which is the 2015 edition of javascript every year the Ekman script foundation which runs javascript adds new updates to the language that we would have to do something like that now in in as of 2015 which was three years ago it has browsers for throughout the throughout the world so you don't have to worry about it not working in any language we can use what's called string and full string interpolation you'll notice these backtick icons if you're having the issue following finding them on your keyboard it's that to the left of the one what does this gonna allow us to do is essentially throw in our variables with this dollar sign curly brace opening curly brace closing brace then we can put first name and then we could just put space and then another insert our variable here last name and we can then add have it print out nice and clean so when you're trying to concatenate or add strings together you might want to consider using the curly braces alright now let's go and give some methods that you're going to be using with strings so what is a method a method is a function what is a function a function is a set of instructions it's essentially how we are gonna store our code and we'll go in a little bit more detail about that later on but in our example here JavaScript strings come with some methods that allow them to do certain things for us and a good example of that is let's say we wanted to have this print out we'll have this long long length here we can call this property dot length just to get an idea here you'll see we have 24 spaces which is a lot right so each one of these is a single space and we've added a bunch and we had some more on here it's gonna be up to 32 so that's one string property that is going to exist on every string another thing to keep in mind is that maybe we want to not have all this empty space on the end what we can use is called the trim property we'll go ahead and drop this down and you'll see dot trim and this is going to remove all the empty space on the end of the string and at the start of the string and so when we save it it's going to trim it and then you'll see that our 32 length and we added more on it's going to be just 12 right you know Dylan Israel and then that plus one empty character all right let's showcase a few other methods about strings now there's over 20 methods for pretty much any data type and strings I think has even more than that so we're just going to touch on a few of these let's let's start by cleaning this up we don't we already showcase what trim is we can go ahead and clean this up and we showcase its length we'll get the total amount of characters that are in there so there's the two upper case so you want to change the whole world whole word to be to upper case you'll see it's out there and as you might have guessed there's also two lower case they've that you'll see everything's now lower case and there's also split so what splits going to do is this is going to take in a parameter which essentially means hey we want to a value that's going to be used in this method and by default if we pass so we're gonna pass in a single parameter you'll see here I'm passing in an empty space one empty space and what's that's going to do it's just going to take this string and then it's going to break up the string based on all the empty spaces and so you'll see we only have one empty space so what we're going to get when we save this is an array which is a which is another data type we're gonna dive into a little bit more that is going to break our strings out into an array of strings essentially going to find every value in which there is a gap in here and if we wanted to do it on every character all we would do is pass in an empty character and then you'll see we'll get our entire string broken out and even our empty character in that so those are just a few of the more popular if you will and widely use string methods let's go ahead and talk a little bit about numbers next all right we're at our first challenge here for the strings and what we're what the objective here is we have our first name and we have our last name what we want to do is we want to concatenate a value with full that called full name that is then going to be printed out you'll see right now full name is not defined so let's go ahead and pause the video real quick and see if you can fix this to work come work well with your first name and last and I spaced out alright so hopefully you're able to do this if not don't sweat it you're just getting started so we're gonna define a constable here because we're not going to modify full name in reality we could have done the same for first name and last name as well if we want it to be stay clear about it so there's two different ways we can go about it we're gonna do the first name plus the empty space plus last name and this would work just fine as well this would be considered bad convention now that we have that we have our standards and es6 as i mentioned earlier so instead hopefully what you did was use the back picks a dollar sign you passed it in first name space last name to get going here and that should have worked for you just fine and of course a semicolon at the end all right so let's dive into numbers so let's let's create a variable here called example and we're set equal to 7 all right and then we just want to console.log our example value out well 7 so this is a number it's pretty much exactly how you'd expect it now if you're more familiar with object oriented languages one of the things that may be a little bit different is other languages have multiple number types javascript does not javascript has one number type and that is number so if we created seven point seven seven repeating that it's still a number and we can check it again just with the type of keyword and you'll see it's going to print out number all right let's go you have an example of parse int so right now this is a floating-point number right there's decimal places but let's say that we only wanted to get the integer value we'd use the parks int function and just wrap it like so and now we're just gonna get the whole number seven which is nice right so sometimes we may not want to you'll notice it doesn't do any rounding or anything like that all it's getting is the integer here now sometimes you may want to get the floating-point number which is we can do with parsefloat just as easily all right because we may not want to drop that value what the whole value so that's one way we can use it you'll also notice that we can get this out of a string of ID number like so and save that and you'll see we'll actually get the number value from it so we can parse and float from a string as well as parse that int from a string of five number as well now let's say that we wanted to return a certain amount decimal places for our number that we have here what we could do is go and get rid of this percent we can use the to fix which will return it and this is not only just make dot to fix let's say we want to do it five decimal places like so you'll actually see it's going to add zeros on there so it's going to go seven point seven seven and add these three zeros because that doesn't exist but maybe we just want it to the one place right and you'll see it's actually gonna round it up to seven point eight so that's one way that we can you know handle add additional decimal places or set rather set a certain amount of additional decimal decimals while working with numbers all right welcome to challenge number two you'll see we have our the numbers challenge rather you see we have four values that I period one using partial with a string with some numbers in it one using parsefloat with a string with some numbers in it and then we have a number with two fix if you've thought that perhaps we can only call these methods on variables that's not true we can actually just put in the value directly like so and then we have to fix on two hundred with two so let's see if you guys can guess what these values are actually going to output all right so at first you may have thought that this percent was kind of weird and you're right so when we actually go ahead and put out example one will comment these out like so and save it you're gonna see that it's gonna get null okay that makes sense this isn't really a stream but what do you think is going to happen when we do the same thing for parsefloat here well you may be surprised with the results and this is one of those things I was mentioning earlier where people are guessing well that's kind of wonky you'll notice it actually pulls the 44 so whenever you parse it in or parse the float and we'll go ahead and delete this hello from this you'll notice it will actually pull it out so if your string starts with a number it will find it and then pull it out this is probably not something you ever want to do bad convention but is something worth noting and then we have our number here and then went to fix what do you think it's going to be should be 55 right so we're gonna pass in example 3 save it like so 55 very nice and then finally we're gonna call to fixed on example 4 and continue on great you may be wondering why these are different colors what do you think the types of all these are let's go ahead and continue with part two of this challenge so if trying to figure out what each one these console.log types are alright hopefully at a moment to think about it so this first one is going to be a number because we're actually pulling out a number from it same thing with this second one even though we're pulling it out of the string number now this to fix the to fix number property what do you think that's going to be can we string it actually converts it to a string when it when it rounds it up or drops or adds those values on a same thing here so just a little wonkiness in JavaScript worth mentioning so up next we're gonna be talking about boolean values so let's create a variable here called example 1 and we're instead equal to true this is a true value there is also a false value and as crazy as it sounds that's pretty much it for bullying's really boolean czar a true or false value you can kind of think of it as a quarter there's a heads and there's a tails so boolean czar true or false it's a hat either has to be one or the other or things get a little tricky with boolean x' our when we start dealing with truth e values and false e values now one thing I did want to mention is that we have this boolean function here that's going to evaluate if something is a true or false value so you'll see here if we save it it's gonna print out false right because it is a false boolean and it's going to print out true because it is a true boolean now if we pass in a number what do you think it's gonna put for now well it's gonna print out a true because this is a value that is a truth devalue and in that in our challenge we're going to be talking a little bit about that all right we have eight examples here of truthy and falsy values and what I want you to do is just sort of make a mental note or maybe comment below a line of code or on piece of paper what you think these outputs are going to be which ones are going to be truthy which ones are going to be falsey let's start with the example one here we already showcase this earlier that false the boolean value of false is a false e value and likewise with example two the true value here is a true value as well okay what is null this is going to be my only introduction to null in this course it's not something I think we really need to cover it too much in detail but null is really a referent of value that we are referencing that essentially says a developer plans on setting this value later on and we're giving null as a placeholder as an empty false e value as you might see here as well and then there's undefined which typically means that this is also a false value but that usually means that either this variable wasn't defined a lot of times you'll see that okay if we can actually assign undefined this way as well which it also be a false value but undefined usually just means that there's a variable or a property that doesn't exist that you're trying to reference it's usually a bug in your code we see undefined so this is string this empty character here what do you think that's gonna be you might be surprised to find out that's also a false e value however what do you think if we put a space there well that's gonna be it's gonna be a truth value so empty care empty strings like that are false e values I only have this other value here na n what is that it stands for not any number you're gonna get not a number when you try to parse a string or something like that where it's not going to return a value properly or you know you're gonna check there's there's some not a number methods that we can check out just say hey is this not a number but this is a essentially value type just to tell you that's not number and that's a false e value as well and then we have negative five and you're saying negative five I wonder our negative numbers falsity or truth you values well negative numbers are truth values as well as positive numbers the only false e value when it comes to numbers is zero so be careful when you're getting started with that so that's some of a little bit more walking this when it comes to the truth that your fall sick values in JavaScript so next up is a race well whenever you're trying to deal with multiple values you're probably going to need to deal with in a race how do you instantiate it alright have you said that well you just use these square brackets this is essentially our container and then we can have multiple things in here like so and then we can have access to them later on but essentially it's a list of items that you're going to be using in your code now remember earlier when we were checking the length of the string we can do the same thing with our example 1 so with our array rather so let's go ahead and print this out and we gonna call dot length on it and this is gonna give us the length of array now one thing to keep in mind when working with the race so you'll see 0 1 a 1 2 3 the length of this is 3 but say we wanted to let's go ahead and change this to a 7 say we wanted to get this first value a race start on the zero index and so you're gonna see 0 that's 5 and then 1 that's 7 and then 2 that's gonna be 6 when you think 3 is going to return well let's go returning all this doesn't exist NOLA undefined so something keep in mind when working with a race is that they do start on 0 and the length is always going to be one greater than the last index value now we're gonna be talking about a few of the more common methods when it comes to their race but one thing to keep in mind is there's about 20 or 25 methods with arrays that you're gonna need to know inside and out and we're only going to touch on about 3 or 4 just to give you an idea of a few of them but you're gonna probably need to review all of these and perhaps in a set in a separate course we can deep dive into every single single function I have a udemy course that does exactly that but and say we want to add a value here to example 1 we use the push method and let's so go ahead and push the number 8 on there and we'll change this to console.log what we want to put out you'll see now we're gonna add that last value okay you we use push add multiple values so they're eight nine ten save that BAM so it's gonna add all them but let's say we want to remove the last value we can use the pop method here it's gonna remove the last value now one thing that's so that's that's one way to add and and add and remove the last values now there's ways of adding the beginning values and adding and certain index value we're not gonna worry about that too much one one more thing I want to show you is how to override values so remember earlier we were like oh well we can target values to print out but let's say we want to reset the value on that index zero we do and we'll just put one in there and you'll notice that we're gonna overwrite what comes up on that value and say we want to iterate through the entire array like so we do that with a for each statement and then the element is going to be the current index value or iterating on so in our case is going to be one than seven and six then eight and we just instead all we want to do is console.log the element out here go ahead and save it and what we're gonna get is essentially one seven six eight nine and then the final array because it's going to iterate through each element in our array all right in our array challenge you'll see we have a value here in rate value so you'll notice that there's different data types in here we have a string we have a number and we have a truth a value this is something that you can do in JavaScript as well so we have a new value here example 2 new variable and we are setting it equal to example 1 and then we are pushing 11 to example 2 now my question for this challenge is what do you think the value of example 1 is going to be and what do you think the value of example 2 is now it may surprise you to find out that the values are going to be identical you're gonna see that if I spell console.log right you're gonna see that we have example 1 with the 11 as well as example 2 why is that why is that even though we only pushed 11 on to example 2 that's still getting exam passed you example 1 the reason for that is that when you're dealing with arrays and objects you're passing by reference what that basically means is example 2 is setting a reference or referring to example 1 it's not actually creating a new array so when you push the example 2 you're actually pushing to example 1 and how can we how can we create a new array but still have these values in it well a couple different ways we can use the spread operator which is going to dot dot going to unwrap these values in a new array like so and so this is gonna this three dots is some es6 is going to take all these values and essentially push them through this new ring you'll see that's going to create a brand new array so it's not passing by reference anymore another way that you can do this is using the map functionality with is which is an array method that creates a brand new array like so and this is going to be an element remember the element really just refers to the current index value we're iterating over and we can return that element it's just going to create a new array this is going to be identical to the spread operator I'd probably recommend doing the spread operator because it's less code so just keep that in mind is that when you're dealing with objects and arrays you are passing by references and sometimes you may not want to do that probably most the time and then you're gonna actually want to create a new array so that you can change the values without affecting the original array so objects much like arrays are probably the two most important items that you need to be intimately familiar with objects are defined by these curly braces like so and they can take in what are called properties so remember how we had our first name we can do it like this and we'll put in Dylan and then we can have another property and that can be last name and that will be Israel you'll see when we print it out it's gonna print out this entire object but we don't you know most of time when we're displaying it for the user we don't want the entire object we just want the first name so we can use the adult property and then we can get the value that we want and this will actually give us the first name property so example one dot first name and we can chain these downward as well and let's say we do something like address and we want to do city and we'll do Austin and then we'll do state Texas so we have this object here and excuse me and these are strings right so they need to be wrapped in quotes to develop that their string and we could continue downwards so we have address and then we do dot city and then we'll get Austin now when dealing with objects you can not just use string so you also do like age for instance on here I'm 30 you can do arrays so how many cats do I have I happen to have three one name just my low and then another's teto and then another it's Achilles and I apologize I don't know how to spell my cat's name but you can use multiple data types within objects as well and you can also reset the values in our object so let's say we want to say you know it's my birthday we wanted to reset age for instance time now 31 we could do that and then we would target it if we wanted to print it out to confirm you'll see we now get 31 all right so some of the methods you want to know about objects are objects so I don't know if I made this clear earlier or not but this property name yeah will also be referred to as a key and then its value here will be the value so one would say we wanted to get all the keys from our object we do that with object the object type got keys and then just wrap this like so and you'll see when we print it out it's gonna print out all our cubes notice how it doesn't print out the nested keys as well it's only gonna do it on the level that you're doing that but let's say we want all the values we do that as well and we'd get our values had done Israel we're gonna get a you know the object here which is city and state 31 and then our array of values sometimes you may want to check if a property or a key exists on our object one way that you can do that is to say example one dot has own property and then in there we're gonna pass in a string value and this is going to be the key that we're checking for and that's gonna be first name you'll notice it's true if we put first name to return false that that key does not exist in our object now if you remember earlier when I said that a race passed by reference so do objects so what do you think when we create this example one and then we set example two equal to example one you'll notice that we're actually assigning a value to a property that doesn't exist what do you think is gonna happen in our object here well your first guess might have been that this isn't even gonna work but that would be mistaken example two here is definitely going to add the last name property on there now where there might be an issue is say well and do last name and then we do mother's last name or something like that that wouldn't work and the reason for that is that last name it's not defined as an object but example two is which is why we can assign the last name property directly to it and it works just fine but you might have already guessed as I told you earlier this will pass by reference as well and so when we're setting example two to example one we're gonna go ahead and have these values that are gonna get added to example one as well so keep that in mind when you're creating objects that you're gonna need to instantiate a new object and you're gonna need to pass in the values directly instead of actually having to go and and set and it's gonna pass by reference so it may overwrite your original object now how might we create that object that class you know typically the easiest way is using the object method and when you're working in classes we're not gonna dive into classes in this introduction course but you might have a class that you would create a new instance of but how do you do it with objects well object has the object prototype has this assign property or method excuse me method oh oh sorry a little bit of a issue here and it's going to take in two properties first what you want to assign it to which in our case is an empty object and second what it is that we're going to assign it to so you'll see here we call object of sign it's going to create a brand new object which is I'm going to go ahead and put the example one values into example two and thus when we assign a new property to example two it's not going to pass by reference to example one because here we're instantiating a new object so let's jump back to working with numbers again so we're gonna be talking a little bit about the arithmetic operators that are available in JavaScript so right here we have our example five we can add as you might imagine and then we'll get ten we can subtract like four and then we'll get six we can of course times by four which would be 16 my censoring at negative six like so and you'll notice we don't have to group these together javascript is intelligent enough to know the order of operations of math by default and then we come of course divide this by 4 so this is going to be 16 divided by 4 would be 4 10 minus 4 is going to return 6 so we have all be standard math functionality when we're dealing with our arithmetic operators all right so hopefully those math operators here were a little bit of introduction or repetitive and you're like out man I know how to plus and minus excellent so let's hit you with something that you may not be familiar with that's the modulo operator or modulus operator so you see this percent sign this is gonna return 0 why is that well modulo returns remainders of numbers so when we modulo 5 by 5 it divides evenly and there's no remainder what you think happens when we modulo by 6 well it's going to return the whole number because it doesn't ever evenly divide but if we modulo by 4 it's gonna return 1 modulo by 3 gonna return 2 modulo by 2 it's gonna return 1 right because it goes to 4 and then there's a 1 remainder so that's the modulo operator let's talk a little bit about relational operators we have our two numbers here 10 and 15 and so this is a sort of relation to the math operators we don't really dive into it but relational operators will compare two items and then return a boolean value of a true or false value so when we take example 1 which is 10 and we say greater than greater than or equal to example 2 what you're gonna expect it to return is false right because 10 is not greater than or equal to however if this was 15 it equals it so it is greater than or equal to of course have less than or equal to as well which will evaluate the true as 10 is indeed less than or equal to 15 now the other relational operators are are these values equal are these double equals is 15 equal to 10 that's false right it's not but if we change example 2 to 10 that's true and if we use triple equals that's true as well and we're gonna talk in the challenge about what the difference between the double equals and the triple equals is and and why that's really important so here you'll see that we are comparing the values so let's say we want to see if they're not equal how can we do that well we can use this exclamation point and equal sign to be false right because 10 is equal to 10 thus that's false now is 10 not equal to 12 that is true so it's gonna return true and then vice versa with this extra equals here to return true as well before we move on to the challenge I want to actually talk about this double equals and triple equals and what that basically means remember earlier when we were console logging out the data type so in our example here we're gonna log out example the type of example 1 and the type of example 2 which is going to return a number and number right now so JavaScript is a dynamically typed language what that means is in JavaScript we have no problem taking this very here which has a type of number and going head and setting it to a boolean for instance that's something that we can do in JavaScript all day it's it's not a big deal now most languages are statically typed so what that means is that if I wanted to have a number here I'd probably have to create and reset it assigned to a boolean I would have to have some additional logic or a new variable or something like that but we have console so each one these are numbers and when we want to do the comparison there is a strictly equal to comparison that compares the value and type and then there is a a sort of less strict comparison that compares only the value so that's the real difference here when we do this double equals all we're checking is that the values are the same so example one is equal to example two it's going to return false right but let's say we change this to the number 10 the number 10 or excuse me the value 10 is equal to the value 10 it's double equals that's a true statement however if we change this to a string and the Loosli equals here it's still going to be true even though that this is a number 10 and and a a string 10 because all it cares about is the value however if we use the strictly equals and we take example one as Triple E equals two example two what it's going to check is not only that 10 is equal to 10 but also what is the data type is number equal to string in that case it's not which is why it's going to return false and the double equals on the not remember the bang this and this it's the same same there as well as checking the type and the value all right let's get a little practice in with the triple equals and the not equals so in our four examples here let's think a little bit about what is it that we're checking and we're checking are these values equal are these values equal like these values not equal and are these values not equal let's think about it for a second and then dive into it alright so in our first example it's going to console log out example 1 so remember with the strictly equals this is checking type in value they both they're numbers and they both have the value of 5 so we're gonna expect that to be true now example 2 is 5 equal equal to string 5 now the Loosli equals is just checking the type so it's the value 5 equal to the other value 5 and that is indeed true unless we're gonna expect that to be true and let's go move on to the knot as well so in example 3 here is the value 6 not equals to the value 6 and that's gonna return what do you think it's fair return false because it is actually a true statement 6 number is equal to 6 string because we're doing a loosely comparison in vice-versa when we do console.log example 4 that's going to return true because the console that low is not a thing so console dot log true because the string value 7 is not equal to the number value 7 and thus that returns true all right so sometimes we may just want to increment a number by one a lot of times what we're doing is for loops or we're dealing with iteration as well as subtract by one so how might we do that well at at first glance you may do something like this where you said example 1 is equal to example 1 plus 1 right and then you'd see oh of course it go up by two but this is such a common thing that JavaScript has built in a very easy way to increase by one by throwing this plus plus on our variable and you'll see how we still get the same result if we were to call it again we're gonna get we're gonna get 3 because we've now added 1 then we've add another one to get 3 it also has a easy way to subtract and we can do that with - - and so our 1 - 1 will become 0 but let's say that we don't want to add or subtract by 1 how might we do that well pretty straightforward so we take example 1 and we're gonna use this plus equals and then we're gonna say 5 and this is gonna add 5 to it 6 this is exactly the same thing again as us doing example 1 is equal to example 1 plus 5 similar to how we did plus plus except now it's + equals now this isn't only relevant to adding or subtracting subtraction would work as well you'll see we'll get 4 but also we can multiply 1 times 5 is 5 we can divide so we'll get point 2 we can even do our modulus operator that we showcase earlier where modulo when u modulo by a number of greater than the number is gonna return the whole number so if we did something like 10 for instance schou return 0 if we did 13 it'd have a remainder of 3 so that's a couple ways that we can increment decrement in JavaScript all right and our increment and decrement challenge where it hits you with something you really haven't been exposed to one of the stranger parts so you'll see here we have example1 example2 you both equal to five and then you're seeing here we're adding one to example finally we get we didn't talk about plus plus on the front of a variable what do you think the difference between these two might be there is a difference it's subtle but there is a difference what do you think it might be all right so let's go ahead and uncomment these lines of code here and see what the values are you can see it's six and six you're saying you know doing this is the you know want two ways to do the same thing and at first glance it may appear that way but in reality not so let's instead of console logging the value out here put our example plus plus as the value in our console logs and see what happens this is going to be a plus example two so what do you what are you expecting these values to be you're saying what look probably gonna be six and six you'd be wrong so you see it's five and six the reason for that is when we do the plus plus on the end it's going to add this value after this line of code if you do it on the beginning it's essentially going to do it within the line of code now it depends is you know there's very few instances where I've ever found need to have to do the plus plus on the beginning typically you'll see most lines of code will just have this as its own line of code but if you wanted to add it the iteration on the exact line of code you'd have to throw it on the beginning of your variable so that's one difference that you may never know and this this will be the same with - - as well let's go ahead and talk a little bit about control flow using if else--if and and else and what they are so sometimes you only want your code to run for certain reasons so in our if statement like so we can say we can pass an example which is v we're saying if this is equal equal to five meaning does this evaluate to true go ahead and console.log we want to put this will put true statement or we'll just put runs so you'll see when we run this it's run because it is equal to this however if we were to say that this is equal to six this wouldn't run right we get no printout and so our code nested within our currently braces here never actually runs in our if statement so this if statement essentially is a gatekeeper that evaluates this logic here to tell us if something is true or not now what is else--if else--if is a statement that runs only if this statement here if this if statement failed so you have to have an if for there to be an else if so this else if is directly court connected to this if statement so if this fails we're gonna have run another if statement here that's going to say uh in our case we'll just put true that's gonna run and and it will just put console.log else if and you'll see now this is gonna print out elsif because this failed and then checks is this true it is in the TSA's prints so if we change this back to five and evaluate it you'll see it's now printing out run so it's not printing out the elsif because this already evaluated is true and thus it never runs our else--if because again it only runs if the f fails so what is else else is the default value so if the F fails if the else if fails and there's no true values between between them we're gonna go ahead and print the console dot law or we're gonna go ahead and run our code in our else statement which in our case we're just going to print out you'll see runs runs ok so if we changes the six that's going to fail so this fails and that runs ok cool itself so if oh it is true so print elsif but what if this was false it's gonna finally get all the way down to the cells because this fails then this fails and then we finally hit our else all right one other thing worth mentioning that we haven't talked about is and and or so so far we've only been evaluating statements one statement at time what if we wanted to evaluate two statements to make sure both of them weren't sure not only is example in our case equal equal to five and we'll just say true is equal equal to true so what this and statement this double ampersand here saying is hey when we run our code check that not only is this true but and this is true as well which is why this runs and vice versa if we change this so that example is equal to go to six which it's not it's gonna fail and this is false so it's gonna hit our else statement even though this is true but let's say we wanted to have it where if either one of these conditions are true run our code we would use an or statement like so which is these two pipes and then we've run our code so it's example equal to six no that's false but true is in fact equal to true and thus this runs now if false was equal to true it's gonna fail right because this is false there this statement here is false in this statement here is false so that's and an or it allows us to concatenate essentially our conditions and check multiple conditions again or is saying hey if either one and then and would be you know if both are true and we can do this as many times as we need in our code all right let's see if you can guess the true or false values using our an and or operators we have three of them take a second take a look and then we'll go piece by piece all right hopefully you took a second take a look let's take a look at this first one we have a triple equals comparison on ten being equal to ten and five is less than four so we're going to evaluate these two statements this is true and this is false thus it should return false and hopefully that was what you got here false very nice let's look at a very similar statement with the only change in the logic here being an or statement well on the left hand side we have a true statement on the right hand side we have a false statement but because we're using an or operator because one of them is true this is going to return true very nice so last but not least a little bit more of a complex one we did we didn't I said earlier that you can increase the complexity of this very quickly but you'll see here that we are essentially wrapping this statement here and then doing an and to compare this side so it may look like there's three comparisons but but really are more than two comparisons but there's just this or and there's this and so in here we're saying is five less than or equal to five or excuse me greater than equals five that's a true statement or is 4 greater than four that's a false statement but because one of these is true which is this statement this whole block here evaluates the true and then we evaluate this side it's 3 plus 2 equal to 5 it is and thus we return true as well so you can see how this can get a little bit crazy relatively quickly but I think that some good practice and if you're interested in practicing this you just want to get it down just Google control flow practice on practice JavaScript online you'll come across a bunch of like you know 20 30 questions of things like this at a time that you can practice with so let's talk about switch statements really quickly switch statements are gonna feel very similar to an if-else if-else statement because it is again some control flow on your code but the difference with the switch statement is say we're checking a finite amount of answers and you want to know you only want to run some code for three or four answers and then you have a default to assume is really a different way of writing if-else if-else statement let's go ahead and give an example say we are taking a test and we answer a four-hour test so our student answer in our switch statement we're going to have this value here and we're gonna pass in a student answer and what that is to say hey check our answer for each one of these cases and then run some code so in a tech a case follows by a value so we have you know case a and then in in right below it we'll have something that says something like you know we'll console dot log wrong and then we have to break out of the switch name and this break is very important because if you don't break out of it basically this code is gonna run if our student answer here is a but if we don't break out of it when we have another case like B it's gonna continue to it's gonna continue checking your code to make sure that it's right and we'll just put console dot log B is wrong just forsake a is wrong and then we'll say C is the answer and then again for our case here we need to break out of the logic otherwise we're gonna have some issues with it checking multiple answers when really the switch statement is designed to only it should only go for the correct answer and C and we're going to put will just call us alot log C is correct period and then we want to break out of here so let's actually run our code like so and save it and you'll see we'll get a is wrong so our answer a here it's wrong if we change this to be we're going it B is wrong and if we change it to see we're gonna get see it's correct very nice so what happens we put this to be a nothing rinse none of these is correct but maybe we want a default answer so if a value comes in well there's this default keyword here which is essentially our else where if all the other answers fail go ahead and console B is wrong as well because there's only four answers or but not a real answer and you'll see we get not a real answer here because it is an A it isn't B it isn't C and then we get not a real answer because this is a default value you'll notice how I don't break from here the break here is so that no additional things are ran you don't really need a break on default it's I couldn't tell you if it's clean convention or not but there's no reason to do it unless code is better typically but that's a switch statement you pass in a value you then check a case to see if it matches any and then you also have the default here just make sure you break otherwise you might run into a lot of errors down the road where you know has multiple correct answers or your logics not going to work properly now let's say that we wanted to iterate through up to the numbers 0 to 5 to add those values to total how might we do that well for loop would be an excellent way of doing that and when you create one by first instantiate in a variable essentially a counter variable usually initialized by I for iteration we're gonna started off at 0 and then this statement here is less than 5 this essentially will continue to run our for loop until this statement no longer is true and then we're gonna increase remember the I plus plus by 1 every iteration and so if we were to console dot log out I right now what we're gonna see here the number is 0 1 2 3 4 and then I is not less than 5 I when it's 5 it's not less than 5 thus it breaks the for loop doesn't run the logic inside here and then exits out so how might we now modify our code to add the values of I to total well we can do that by just doing total plus equals 2 I now let's let's go ahead and console dot log out the values of total which we know are those index values so only console dot log out total you'll see that is now added all of our values to equal 10 so 0 plus 1 is 1 plus 2 is 3 plus 3 is 6 plus 4 is 10 and we get our value there now this is of a for loop where we're gonna actually know how many iterations it's going to be 5 but how might we iterate through an array well we don't know how many values iterate through so let's create an array here and we'll just call this a 10 ohm array and this is gonna be equal to I don't know we'll just throw in some numbers of 10 10 20 30 40 50 60 70 and 80 so we could in theory say you know go ahead and put less than 8 but that's not good practice that's not what you want to do with arrays because maybe we add a value to this later on so how might we make this a bit more dynamic well we can set our our right side here to no more a length remember that dot length property which is going to have this run for as many iterations that are in our in our array for the length of the array but instead of actually adding the total value of just being the index value we want the values out of the no more rate how might we do that well remember the index values are accessed with numbers right so if we want to just add index 0 we put that in there or index 1 or index 2 but we want it to be on the con for every value so every iteration our I gets updated and thus you'll see when we console dot log out that value here right above total no more a I it's gonna hit the 0 and then 1 and 10 and you'll see that we get all our values in the console so we're already adding all those values and now this we've been able to access them with our I variable here and so at the end we get a very large 360 number because we've added all the values on our number a and vice-versa if we added 90 on here you'll see that it will run and we don't have to refactor any of our code so let's say we want to repeat our code but we don't know there's not a finite amount of answers so we can't use a switch case we don't know what the length of the array is gonna be or we don't know how many iterations to run we just want it to run until a value is true so a while loop might be what you're looking to do here while loops are another way to run iterations of our code and so what a while loop does is it runs until some sort of value here is false in our case we'll just let's go ahead and say count is greater than 20 you know this could be anything in here and in our while loop we're gonna go ahead and and add we're gonna say uh you know we're gonna do some logic and then maybe at the animal cell count plus plus now the the reason that this may seem very similar and in its current setup it is and then at the end we'll go ahead and complement log count if we want to and so this never runs as you notice here because count is never greater than 20 because this is false statement but let's go ahead and change it so less than it's gonna run 20 times and you could do this in a for loop that's true but you can do some things with this where we're let's let's forget about numbers for a second maybe we want to have a local value where we're just you know where we're gonna run this while it's true and in here we're gonna put true but we need to make sure now that we've put hard-coded a true value in here that we are going to break out of this so what we can do is if we want to if if count is less than 20 go ahead and greater than or equal to 20 what we want to do is we're gonna start off first off by adding and then you'd have an additional logic then you would say you'd say something like break so this will break us out of our for loop so when it's 20 we're gonna exit out of our for loop here as well so while loops are a way to run your logic run your code for a set amount of time when you don't know how many times that's going to be now there's also do-while loops at which are a little bit different than then while loops the main difference between a while loop and a do-while loop is a do-while loop will run at least once remember when we set this to false earlier and this is a false statement count never got touched and never ran this code not even once to to see to update count but if we had a do-while loop it would do it so let's go ahead and convert this while loop to a do-while loop it's pretty straight forward so we're gonna do with these closing braces these curly braces and basically all our logic here is gonna be in our do-while loop and we're gonna remove the curly braces on the wall' loop and just have wall after-the-fact like so now you'll see when we save our code here count is actually going to be equal to 1 even though our while loop is false so it's gonna run this one iteration count is still not greater than or equal to 20 so we don't break out of the do-while loop but the actual wall statement itself is false we only run at the one time because it's a do-while loop so just something keep in mind I it's very rare that I use a while loop or do a loop but is worth mentioning for those times where you don't have any way of knowing how many iterations and you're basically checking a value until you get a right value to break you out of it and that could be anything from what count is you know equal equal to you know feeling or something like that where you can't check the the length right so you can do check properties the the main thing to keep in mind is that is that you are going to be it's usually not used with numbers but it's a for a set amount iterations that you don't know you just need to keep doing it till you get the result you're looking for but it is also a word of caution a good way to create an infinite loop which will crash your program and and maybe stop it all together all right last but not least functions so we need to define a function what is a function a function is a way of storing our code so that we can call it again and again and reuse it part of being a software developer part of being any developer is writing reusable code and it's a a part of development that you're gonna have to get comfortable with so let's go ahead and define a function well write a simple function called add in JavaScript you just noted by the keyword the name of the function and then these parentheses and then we have our curly braces for our logic so in our example here if we just want a console about log add o and you'll see will save nothing happens well we have to actually invoked the function like so by just calling it by its name curly braces or excuse me parentheses and you'll see here we actually print out ad very nice and we can do this time and time and time again so you'll see we actually get ad to print out four times just the power of a function is that we have the same item being able to work with multiple be able to be used multiple times now this isn't a very impressive function so let's ads let's actually add some logic to it so this return word here what say we wanted to return a value return in a function will allow us to do that so let's return five and you'll see nothing prints out but we can go ahead and console dot log for your app these ads and a console dot log will actually print out the value that's being returned which is in our case five and you'll see we get the five like so so now we're returning a value so this return keyword will return a string return a number return a boolean whatever it is that you need we'll return it within the function now that's still not very impressive we're not adding anything and based off our name here a function name you think something would need to be at so functions can take in what are called parameters in our case we're gonna call this number one and the way that so this is our prime parameter and what we're gonna pass into the actual function call is an argument it's basically the value for num1 so we're gonna pass in let's pass in 10 here so in our case we're gonna still print out 5 because we're not using them 1 but let's say we return num1 we're now gonna get 10 and if we did the same thing here we can now put 15 and now put 20 and we'd get it to return 10 15 and 20 still not that impressive but you can add multiple parameters in our case here num2 or now we want to add these two numbers together so what is no 1 plus num2 so if we put 10 and then we add 6 and we take 15 and we add 7 and we take 20 and we had to what are we gonna get we are now getting 16 22 and 22 which is now we have a function add that will add two numbers anytime we need and we've created this reusable code so when we're writing or when we're solving problems typically you're gonna write it in a function so that you can reuse it and call it and not have to duplicate your code that's really the point of functions and how you use them our first and foremost so finishing the course is an amazing thing taking on the task of learning a new concept learning a new programming language and I commend you for that now might I ask on my behalf as well scrim accom - go ahead and share the course if you enjoyed it I think it covers a lot of great introductory topics - Java scripting can be a great benefit now where do we go from here because the in learning it's all about practicing and retaining that information right it may all make sense as exact moment but we want to make sure that it makes sense for the rest of your life and you need to do that you need to start practicing with it there is a wonderful playlist on screen McCallum called Jas algorithms it'll give you the opportunity to take some of these methods to dive a little bit deeper with these data types and understand them and actually use what we discussed in here so I encourage you to check that out and you can just go on and go in search for Jas algorithms on scrubber comm thank you so much for watching the course in being a part of it I hope you learned a lot and I wish you the best of luck in your JavaScript it endeavors