Learn JavaScript - Full Course for Beginners

this is the beginners JavaScript course you are looking for my name is Bo KS and I'm with freec camp.org in this full JavaScript course you will learn everything you need to know to get started with JavaScript this course is perfect for beginners or anyone that just wants to refresher on basic JavaScript syntax this course actually goes along with the freec camp.org JavaScript curriculum so if you want want some live coding challenges to go along with every part of this course you can check the link in the description to that curriculum but this is a completely Standalone video so you don't need to go through freec camp.org but it could be helpful um also after this course you're going to want to complete some or build some JavaScript projects so I have a link in the description to some project tutorials but then after that you're going to want to create some projects on your own that's how you learn really learn JavaScript you have to create things without even going through a tutorial and just use a search engine to find the things that you don't know or need to learn um to go along with uh the free C Camp curriculum I have all the es6 stuff in the second part of this course uh and that's pretty much it let's learn some JavaScript so how exactly do you install JavaScript well for the most part you don't actually all web browsers can run JavaScript which is great because a lot of devices have web browsers on them so when you write something with JavaScript it will run on all sorts of devices and operating systems so you have a few options for writing JavaScript let me show you a few things you can do to follow along with this course you could download a code editor uh here I have blime text you could also use Visual Studio code or atom or any code editor and I've created an HTML file because HTML files can be opened in web browsers and I have these script tags these are HTML tags but within our script tags we have our JavaScript so if I open up this file in a web browser it looks like this well I can open up my JavaScript console and then in the console you can see it says hello world that's right from my JavaScript program so whenever you do console.log it's going to show in the console here uh you could also just use the code editor that's included on freec camp.org like I mentioned this course follows along with the JavaScript curriculum on freecodecamp.org and there's a built-in JavaScript editor right in here and then it shows you the console down here another option would be to use code pin if you go to codepen.io going to go to create pin and then there's going to be three Windows HTML CSS and JavaScript well we just care about the JavaScript and in this course we're not going to be doing anything with HTML and CSS we just need the JavaScript and the JavaScript console so if I do console.log and then do hello world then we can see right in the console hello world the final thing you could do would be use scrimba most of the course I actually recorded using scrimba docomo sca.com to follow along once you log in Just click the plus button do JavaScript playground and then confirm and it's going to open up a new JavaScript window now I can increase the font size here and it already has console.log helloof from JavaScript and you can see in the console right here hello from JavaScript uh also if you hit reload it reloads everything and you'll see this popup hello from JavaScript so that's something interesting about scrimba is that it has two ways of logging in the console we have the popup and then we have the console here you'll see that in this course too the two different ways of logging to the console the first thing we'll talk about in JavaScript is comments comments are lines of code that JavaScript will intentionally ignore they don't do anything they're just used to create notes for yourself and others about what the code does so if you do slash slash you can make an inline comment an inline comment means it's at the end of a line of code for instance I can put VAR number equals 5 that's a way to declare a variable and we'll talk more about that later but right now we're just talking about comments you can see that this code is in color because the code editor knows that that's code that's going to run and the comment is automatically grayed out because it's not going to run we can also do an inline comment or I mean a multi-line comment if we do a slashstar and I can put this is a and then I can put multi-line comment and I'm going to end with a star slash so it begins with a slash star and ends with a star slash and you can put as much text as you want in between these and you can see this is all grayed out because it's all a comment and then afterwards I can put number equals I can put number equals 9 and you can see it will be in color again because it's no longer commented out now now we're going to talk about data types and variables in computer science data is anything that is Meaningful to the computer and JavaScript provides seven different data types that you can use within JavaScript now some of the more obvious and most common are strings and numbers a string is just any sort of text a number is a number now let's go from the top so undefined is something that hasn't been defined you may have a variable that you haven't set to be anything yet null means nothing so you've set it to be something and that thing is nothing so you can say this is null or nothing a Boolean means true or false we talked about strings a symbol is an immutable primitive value that is unique now we'll talk more about those later uh number is a number and an object can store a lot of different key value pairs again we'll talk more about those later now you you are often going to set data into a variable uh a variable allows computers to store and manipulate data in in a dynamic fashion uh it's basically a label to point to the data a variable is almost like a box and you can fill it with anything you'll fill it with the data that you want so to declare a variable one way is to use the VAR key keyword VAR stands for variable and I can say my name I can put set this to anything it can be any of the data types above but uh it's common to set something to a string so I can set my name to be bow now later you can set it to be something else I can say my name equals 8 and you can just set it to other data types later now there are actually three ways to declare a variable in JavaScript so VAR is one of them and for a while that was the only way but there are other ways too um there's a way called let so I can say let our name and then I can say equals free code camp and then the other thing would be const so I could do say do const pi equals and 3.14 now the difference between VAR let and VAR is going to be able to be used throughout your whole program let will only be used within the scope of where you decare that now we're going to be talking about let and con more later so I'm just giving you a brief overview of what they are now um const is a variable that should never change it can never change so like right up here I declared my name but then we changed it here so it started it out to be bow and we change it to eight a const you can never change it if you do try to change it you'll get an error okay that's all for now but like I said we'll be talking more about the different types of variables later there's a difference between declaring variables and assigning variables here's how you assign a variable VAR a and then the semicolon uh I didn't mention this earlier but you all lines in JavaScript with a semicolon well it's not actually required you can actually just skip the semicolons completely but most people recommend that you put a semicolon just so it's obvious where the end of the line is so here we are just declaring a variable to be called a and then here we are assigning a variable we're declaring and assigning in one line so we're declaring it varb and then the equal sign is the assignment operator it means that two is being assigned to B we're not checking if B equals 2 though we're just assigning two to B so after that we can actually assign other things so I can say a equals 7 so now I've just assigned 7 to a I didn't have to declare a because it was already declared and I can also say that b equals a so I've now assigned the contents of a to B I'll put the semicolon there uh one thing I want to tell you about is console.log console.log allows you to see things in the console so I'm going to console.log a and if I load this here you can see down here in the console it shows seven so right now we've assigned a to be seven or and so we when we conso that log a it shows seven down there um if we put another console.log right here this will allow us to show what a was up here and then down there so console.log now if I run that we can now see at first a was null and then now it's seven so here it's it's null and then it's seven down here so you can check what variables are at various points in your program now I'll show you another example of initializing a variable to an initial value at the same time it's declared so I'm going to say VAR a equals 9 so the VAR a is declaring it and the equals 9 is initializing it with that the assignment operator which is the equal sign before we do anything to these variables they are uninitialized that means their value is undefined we have not set them to anything but it's simple to fix that I'll just set this to Five I'll set B to 10 and then we can set C to a string it's going to be I am a string we always have to put in quotation marks like that so you can see a a + 1 is going to equal 6 5 + 1 = 6 b equal b + 5 that's going to be 15 and then c is now going to say I am a string variable names and function names in JavaScript are case sensitive that means the capitalization matters so this declaration here is not the same as this assignment even though the letters are the same the capitalization is not the same so it's not going to assign correctly and in here you'll see there's an error if we try to run it because this has not been defined it has not been declared it's generally common practice to use camel case so let me show you how we do that instead of studly cap VAR it's gonna be studly cap VAR so the first letter is always going to be lowercase and anytime you have a new word or new section of a word you just capitalize the first letter and so uh we can change this this one's correct so now we just go down here studly cap VAR and then we just do proper camel case and then title case over so now all these should be defined so we declare them up here we assign them right here and and then this is not going to give us any errors it's going to behave exactly how we want it to behave adding two numbers in JavaScript is pretty straightforward you just use the plus operator so this says 10 + 0 which equals 10 we can also do 10 + 10 which is going to equal 20 if we do a console. log and I can put sum here and then you'll be able to see that the answer is is 20 right in the console 10 + 10 is 20 and subtraction is also what you would expect we have the subtraction sign here this says 45 minus 0 we can also do 45 minus 33 and then that would equal 12 so the difference variable equals 12 now multiplication in JavaScript uses this Aster or or star symbol here so this says 8 * 0 which is 0 or we can change it to 8 * 10 which is 80 so now the product variable equals 80 you can divide in JavaScript with this slash symbol so this says 66 ided 0 we can change this to 33 so now 66 ID 33 is 2 quotient equals two to increment a number means to add one to it so here we're incrementing myar by one so it starts at 87 87 + 1 is 88 there is a quicker way to increment a number instead of doing this we can just do myar plus plus iar plus plus now we have incremented myar from 87 to 88 we learned about incrementing a number with plus plus you can also decrement a number with minus minus that means subtracting one so right now my VAR is going to equal 10 11 minus 1 equal 10 we can do the same thing with the minus minus operator so now my VAR still equals 10 we can also create decimal numbers with JavaScript these are sometimes referred to as floating Point numbers or floats you can see this is one here 5.7 it can be anything I'm going to make one called my decimal and then I'm going to store as 0.009 anything that has a decimal point in it is a decimal point number multiplying decimal point or floating Point numbers is the same as multiplying integers so we have 2.0 time 0.0 if I just change this to 2.5 now the answer to product is going to be five and I can console.log that so you can see if I just put product and if we do the browser here you'll see that the answer is five you can also divide decimal point numbers so in this case I'm going to change this to 4.4 so now the answer to quot is 2.2 quotient equals 2.2 the remainder operator looks like a percent sign and it gives the remainder of the division of two numbers so for for instance if I want to find out the remainder of 11 divide by three I can do remainder equals 11 and then I'm going to put the percent sign which is the remainder operator three and 11/ 3 is 9 11 - 9 is 2 so the remainder is going to be two 11 remainder three is two the remainder operator is often used to determine if a number is even or odd if you can divide a number by two and the remainder is zero that means the number is even it's common to want to add a number to a variable like this see a = a + 12 well a starts at 3 + 12 is 15 so we're just adding 12 to whatever a is here we're adding nine to whatever B is here we're adding seven to whatever C is this is such a common pattern that there's a shortcut to do the same thing it's the plus equals operator so instead of a equals a + 12 we can do A+ equals 12 so this equals the same thing so instead of B = 9 + B we can do B + = 9 so now we're adding the value to the variable and assigning the answer to that variable so again here we can do plus equal 7 so that's just a shortcut previously we learned about plus equals well minus equals do does the same thing but subtracting so this says a = Aus 6 we started at 11 minus 6 is going to be five so the new a is going to be five but we can shorten that instead of a equals a minus 6 we can do minus equals this is just a shortcut that JavaScript has that means the same thing that means AAL A- 6 but it's just short same here so we can do minus equal 15 c = c minus1 we can do c minus equals 1 so it just subtracts the number from the original value and then assigns that new value to the variable here we have a equals a * 5 well we can do the same thing as before we can shorten this to a time equals 5 so that means the same thing here we can do a * equals 3 and then C = C * 10 we can shorten this to c times equal 10 and that's another shortcut for JavaScript and there's also divide equal so a equals a / 12 12 we can do a / equal 12 then here we can just do / by equal 4 or divide by equal 11 so another way of just dividing the variable by a new number and assigning that answer to the variable we've already mentioned strings a little bit but anytime you have some character surrounded by quotation marks they can either be single quotation marks double quotation marks or back ticks it's a string these are called string literals and you can create them just like you see above I'm going to do a few more so VAR my first name equals B and VAR my last name equals KS so that's how you create a string in JavaScript sometimes your string contains the quote symbol now normally the quotes identify the beginning and the ending of the string but what if you have something like this I am a double quoted string inside double quotes So I'm actually trying to use these quotes right inside the string but the JavaScript doesn't know what to do about it it thinks that this is it thinks that this is the whole string when it sees the first quote inside the string it thinks we're at the end of the string so there's something called an escape character so if you want to escape a quote that means it will no longer be considered the end of the string I'm going to put a backslash so if I put a back a backslash before each of these quotation marks JavaScript no longer interprets it as being the last character in the string so now you can see this is a full string and then if I log this out console.log and I put my string you'll see that it's not going to show the quotation marks so I mean it's not going to show the Slash the backslashes it shows the quotation marks without the backslashes because when we put back SL quotation mark JavaScript knows that this should just mean a quotation mark we talked about escaping a quote character like this where you put a backslash before the quote character so JavaScript knows that this is supposed to be a literal quote character inside the string however you're not going to have to escape quote characters very often because there are other methods of accomplishing the same thing of having a quote character within a string so a common way is to use instead of having your string start with double quotes have it start with a single quote so a string can either be surrounded by single quotes or double quotes So this time we're going to have single quotes and now I can remove all these Escape characters from inside the string here okay so now you can see that JavaScript still knows that knows that this is a string even though it has these double quotes inside and additional thing you could do is use back ticks so if I put a back ticks before at the beginning and the end of the string now I actually can use single quotes and double quotes both within the string but right now I'm just going to focus on showing you the double quotes or the single quotes with the double quotes inside we talked about escaping a double quote character by using the backslash before the double quote there's actually quite a few other things you can escape out you can escape out a single quote character you can escape out a backslash in fact anytime you're going to use a backslash you're going to have to put two backslashes so the JavaScript knows that you're not trying to escape a character you can also uh add a new line character or a carriage return a tab a backspace or a form feed all with doing a slash and then the corresponding letter here so let me show you an example I'm going to put VAR my string equals and we're going to make a multi-line string so we're going to have the first line and now I'm going to put back slash in to add a a second line and then I'm G to put a tab so back slash t for the tab and backs slashback slash to add a backslash now it's going to say second line now I'll do back slash and then I'll just say third line and if I were able to log out all of that you would see three different lines and you would see the tab and then the back slash character you can concatenate strings with the plus operator you can see here that we have two strings I come first and I come second they've been added together or concatenated with this so the rstr r string is now one long string that says I come first I come second I'll give you another example here so we can say my string equals this is the start and then I'm going to put a space before the in quotation mark because when these get concatenated together we want there to be space between these two sentences and I'll say this is the end now let's just see what that looks like I'll do a console.log and do a my string and let's see if I um run this we can see this is the start this is the end just one long string you can also concatenate strings using the plus equal operator you can see here in this example Le we have the r string equals I come first and then we have the r string plus equals I come second so remember just like in when you're using numbers plus equals means that you take whatever is on the end here and add it to the variable so we've just added I come second onto the end of I come first let's do another example down here my string equals this is the first sentence and then I'll put a space at the end because we're going to do my string and I'll here I'll do the plus equals this is the second sentence now if I just do a console.log here of my string we should see that those sentences have gone together this is the first sentence this is the second sentence good you can concatenate strings together with variables you can see here our name free Camp hello our name is and then we add this variable the rame variable which is free Camp hello our name is free Camp how are you well we're going to do the same thing down here so I'm going to do my name equals B and then my string is going to equal my name is and then I'm going to add the variable name which is my name and then I'll continue the string here oops that's supposed to be a plus here and I am well um see that I put a space here and here because you have to make sure you put appropriate spaces in and let's see what that looks like I'll do a console.log and I'll just put my string here if I show that my name is Bo and I am well looks good you can append variables to strings with this plus equals operator you can see we have this variable an adjective which is set to the word awesome and then we have another variable uh free Camp is and we have the r string variable plus equal an adjective so now our string is going to equal free Camp is awesome so let me show you another example um we're going to say some adjective equals worthwh and now I'm going to use the plus equals so my St plus equals and then I can put some adjective so now after we do the my string plus equals some adjective my string is going to say learning to code is worthwhile sometimes you want to find the length of a string JavaScript makes this easy so we have the first name is set to add but we just use the length property to find the length so first name length remember first name is Adda here and then length will return an integer a number that has the number of characters in The String so that would be three so let's try this again here's another example last name length equals last name we just have to type in. length and just to show you let me console.log that and you'll be able to see if I put in last name length and if I uh run that you'll see eight because there are eight k characters in the word love lace bracket notation is a way to get a character at a specific index within a string so you can see right here we have the first name adaa and right here we have first name and then here's the bracket notation you can see there's brackets with a number inside so most modern programming languages like JavaScript don't start counting at one like humans do they start at zero which is called zerob based indexing so with the number zero that refers to the in the first index of the string which would be the a so the a would be Zero D is one and then a is two so this first letter of first name if we do first name with the bracket notation with a zero that's going to equal a so let me show you another example let's say we want to get the first letter of the last name again I'm just going to use a bracket notation and put a zero here if I wanted the second letter the O I would put a one here so if I console.log we can see what it came up with so console.log first letter of last name and if we look in the console L because the first letter of the last name is l strings are immutable meaning they cannot be altered once created this does not mean that they cannot be changed just that the individual characters of a string literal cannot be changed so look at this example my string and then we're going to use bracket notation to choose the first letter so it currently says Jello world we want the first letter to change to an H to say hello world but if I run that there's going to be an error because of the immutability of strings now we can still change this to hello world but we can't just change an individual letter like that so we're going to have to do my string equals and I'm just going to have to type in the whole thing which is hello world and now it we it will change to the word hello world you can use bracket not ation to get any character position in a string so earlier we did the first position but here's how you would get the second position remember the zero index so one is the second position zero is the first position we can also get the third letter of the last name using the brackets we'll just put two in the brackets to get the third letter of the last name you can also use bracket notation to find the last letter in a string even if you don't know how many letters are in the string you do it based on the length so if you look right here in the brackets we have a an expression to be evaluated first name. length minus one so the length is three 3 minus 1 is 2 the reason why we're doing a minus one is because remember we count starting at zero so the length minus one is going to be the last index of the name name so we can do that same thing here to get the last letter of the last name I can just do last name. length minus one and that's going to get the last letter of the last name which is the E right here we saw how to use bracket notation to get the last letter of a string you can also do the Third to last letter or fourth to last letter so you just subtract however much you want from the F the the length of the string so we have the bracket notation first name. length minus three that's going to get the third to last letter so if we want the second to last letter into this variable here we do something similar we just do last name. length and then we're going to subtract two to get the second to last character of the string we are going to use our knowledge of strings to build a Madlibs style word game in a madlib game you are provided sentences with some missing words like nouns verbs adjectives and adverbs and then you fill in the missing pieces with words of your choice to make a sentence that could be funny and hopefully makes a little bit of sense so let me show you how you do this um this also uses a function now we haven't talked about functions yet I'm going to explain those more later but for now for now just go with it because that's not the point of this lesson for now but this function called word blanks you can call the function and you have to pass in certain types of words you pass in a noun an adjective a verb and an adverb so down here you can see that we're call calling the function called word blanks that's the function name here and we're passing in a noun an adjective a verb and an adverb so the point is that we are going to use all these words that are passed in to make a sentence so we know that VAR result equals an empty string at first and then we have to use all these words in result and then the result is going to be returned from this function and eventually will be logged out onto the screen with this console.log so what I'm going to do here is do result plus equals U we're going to use the plus equals to add something to this result using all the noun the adjective the verb and the adverb so let's see it's going to say the and we'll use the adjective my adjective in this case will be the big the big and then let's put the noun my noun because adjectives are words that describe nouns the big dog and then we're gonna say what this noun was doing the verb my verb the big dog ran and then what where it is he run to to the store and then we're going to add oh we need a space here so there's a space between this to the store and then we're going to add the final um adverb so now we have to add a period and there's one more thing we have to add or a few more things so right now this my adjective my noun my verb and there's no spaces in between those so if I run that you can see what that's going to look like in the console it just said big Dawn big dog ran with no spaces so we're gonna have to add some spaces In Here Also let's do [Music] that and now it's going to take in the noun adjective verb and adverb and then put it into that sentence so one cool thing is we can actually um pass in some different words so like for instance if I copy this I'm G to paste it instead of dog I will put for the noun um bike and then adjective I'll put [Music] slow and then for the verb I'll put flu and the adverb I'll put slowly and now if we look in the console we have two two sentences the big dog ran to the store quickly the slow bike flew to the store slowly arrays allow you to store several pieces of data in one place so look at this example our array now arrays always start with a bracket and then end with a bracket to show the beginning and ending of the array and every element in the array is separated by a comma so you can see here we the first element is a string the second element is a number and you can have more and more elements you just put comma and you can keep adding elements and the elements can be any data type you can see here we have a string and a number but you can always also use arrays or floating numbers or really any sort of other data type in your array so let's see another example so let's do my array Quincy and then for number we'll do one because Quincy is number one when one of the elements in an array is another array that's called a nested array or a multi-dimensional array you can see here's the beginning of the array and here's of the array but the first element in this array is another array with two elements of its own same with here the second element is an array so this is two arrays within another array so we can do that here here's another example so let's our first element in the array will be an array with a string and a number and then I'll put a comma to put the second element of the array which will be another array with a string and a number earlier we learned how to use bracket notation to find a specific index in a string you can do the same thing with arrays so look at this array our array we have three elements 50 60 70 and these have the indexes 01 2 so with this R array with the bracket a notation in the zero that's going to be index one which is going to equal 50 so we can do the same thing here my array equals 50 60 70 so let's try to find the first element in that array so VAR R my data equals my array and then I'm going to do index zero I could do index one index 2 and then if we console.log that we can see for sure what that is is so if I put my data and we can see in the console it's 50 you can use array indexes to modify arrays now we tried to do this earlier with strings using bracket notation and we were not able to modify a string using bracket notation but with arrays you can so the original array is 1864 99 and then we're going to use the array index of one now one is going to be the second number 0 1 2 and this number 64 is going to be set to 45 so the new array is going to be 18 45 99 let's try it again with this $164.99 so let's do my array and then instead of doing the first the second digit I'm going to do the first digit in the array the first index which would be index0 and I will say equals 45 so now this array has been updated so if I do console.log and then do my array we'll see that the array is now 4564 .99 you can also use bracket notation to select an element in a multi-dimensional or array of arrays so you can see this array here we have our outer array but inside that array are more arrays the elements of the array are other arrays and the last element of the array actually has an array in this so this is a thre layer deep array right here so to access an array of arrays or an element within an array that's within an array you use a double bracket notation so if you see this example here my array the first bracket is zero that's going to get the first element in the array which would be right here and then that element is an array so the second bracket would be the index of the array within the array so this zero would point to here so let's try to figure out how we can select a value equal to eight well let's see I see an eight right here so let's figure out what this first number should be well let's count 0 1 2 so the third array would be index two now we want to go zero one now we have to do index one to get the second number in the third array so let's test to see if that equals eight so I'll do console.log and then do my data here and we'll see if that equals eight it does we did it you can append data to the end of an array with the push function so see an array has been set up here R array Stimson J cat and then we take our array right here and use the push function to push into the next element in the array another array here so now it's going to look like this we can see at the into the original array we've pushed this other array at the end so let's try it again down here we have my array and you can see what we have each element in the array is another array so I am going to do my array. push and then I can push something on the end here which will be like above another array so this is going to say dog comma three and now we've pushed this on onto the array we can remove an item from an array with the pop function here so see this pop here and then we know it's a function because of the parentheses at the end of the word pop so the array starts with one two three so now we do this R array. Pop and it's going to return the it's going to remove the last element which is the three and then it's going to put it right into this variable here here so now as you can see down here remove from our array now equals three and then our array is going to equal one2 because the three has been popped off so we can do the same thing here so remove from my array equals and I'm going to do my array. top and we can see what the array is going to equal now if I just do console. log my array and if you do this we can see that the array only has the one item the one array instead of the two arrays the shift function is very similar to the pop function except it removes the first element of the array instead of the final element so we see the shift function on the end of the array here and the array is the same as before but now the first element Stimson is being removed after we shift off the first ele M the array is going to equal J cat and the removed from our array is going to equal stemson so let's do another example down here we're going to do a shift again so I'm going to do equals my array. shift and now the my array is just going to equal dog three and the remove from my array is going to equal John 23 the unsh shift function is similar to the push array function while push adds an element to the end of the array unshift adds an element to the beginning of the array so let's look through this example code we have the array Stimson jcat we're going to shift off the first element remove the first element so our array is jat now we're going to unshift or add an element at the beginning which is the string happy so the array will now be happy J can't so let's try again uh this time the array is John 23 dog 3 because of the shift we've shifted off the John 23 and now I'm going to unshift something so I'll do my array. unshift now we're going to REM add something to the beginning of the array we'll do Paul 35 so now the array is just going to be Paul 35 dog 3 let me give you another example of nested arrays this will be a shopping list so inside this array we're going to have another array and we're going to have items uh serial um how many boxes three boxes we also need some milk let's get two carons of milk um let's get some bananas three Bunches of Three Bananas we'll also get some juice two containers of juice and finally we will get some eggs we'll get 12 eggs and now we've created an array of arrays which is our shopping list functions allow us to create reusable code in JavaScript this is how a function is set up we have the word function then we have the function name there's always parentheses here and you can pass information into the parentheses we'll talk about that later and then we have these curly brackets so this is the opening curly bracket and then we have the closing curly bracket and everything inside the curly bracket is run anytime the function is called or invoked so here the function is being called by just putting the function name with parentheses after the name so every time this function is called just like this the console is going to say heyya world so if we load the console right now you can see it says heyya world and if I just copy this and paste it a few times we'll see that it's going to say hey World hey World hey world in the console since we have run the function three times we see the words pay a world three times so now I'm going to create my own function that's going to be very similar so we'll do function reusable function and this time it's going to say something slightly different it's going to say hi World instead of hey world and now I can call the function down here just like this reusable function oh forgot to put the parenthesis that's important and now you see hey world and high world in the console parameters are variables that act as placeholders for the values that are to be input to a function when it is called so we have defined a function right here called our function with args and inside the parentheses we see the letters A and B now these can be any name we could call these anything not just a and b they could be really be any words up here and that means that when this function is called we're going to pass data into the function or input data into the function so you can see the example here where we're calling the function and instead of saying A and B in the parentheses we're actually passing the values 10 and five so when the function runs it can use the information that's passed into the function so in this case it says console.log a minus B well that's going to be 10 minus 5 because the numbers 10 and five have been passed into the function and that's going to Output five so I'm going to create a function that's very similar to that function function this one is going to be called function with args and it's also going to except an A and B but we could call that anything we want and inside instead of subtracting a minus B we're going to do a plus b now I'm just going to call this function function with args and I'll pass in 10 and five and let's see what that looks like in the console so first it outputed five for this one then it outputed 10 for this one scope refers to the visibility of variables variables which are defined outside of a function block have Global scope Global scope scope means they can be seen everywhere in your JavaScript code for instance I'm going to declare a a variable right here called my Global I'll set it to 10 now since this is set outside of a function we can see it anywhere in the whole code even in this function right here called fun two we can see that we reference it here and here and we we're going to be able to see it now this is an if state M which we will talk more about later but we're checking if the type of my Global does not equal undefined so it will not equal undefined if it has been defined and the program knows about the variable since this is global scope it does not equal undefined it equals 10 the program knows about the variable because this is in global scope so since the this function can access the my Global variable we'll run what's in this if statement where we just add to this output variable my Global and then we put with the value of my Global which is 10 now here's another example where we're going to see if if the type of oops Global equals undefined well we're going to set that here so it is Poss to set a variable without using the VAR keyword so I'm going to set this to oops Global equals 5 so you can see here that there is no VAR keyword so normally if you do use a VAR keyword since this is within a function it will be scoped to that function if we had the VAR keyword here this would be scoped to this function so you would not be able to see it in this function however since we forgot to put the VAR keyword in this example there's no VAR keyword it becomes Global automatically that means you can access it anywhere else in the program including here so if we put the VAR keyword then oops Global would equal undefined and then we would never have this line in the output however since we did not put the VAR keyword oops Global equals 5 and this will be added to the output oops Global and then the colon five so when we console.log the output it's going to say my Global 10 oops Global five now actually it's not going to say that because this is in scrimba and in scrimba it's it's more careful and just enforces the fact that you have to use a VAR keyword but if we were in our browser it would not enforce the VAR keyword and then it would actually show my Global 10 oops Global 5 if this was a little complicated uh don't worry about that because a lot of these Concepts will be going over again later with additional examples variables which are declared within a function as well as the function parameters have local scope that means they're only visible from within the function let me show you what I mean if I declare a variable right here my VAR equals 5 so we've declared this variable inside a function so this variable my VAR is only visible inside the function so it says console.log myar it should console.log the five so we're going to call the function here and it's going to console.log myar but then the program is going to run this console.log that's outside of the function it's still going to try to access my VAR and so let's see what happens you can see in the console that first there's five because it console.log within the function then there's an error because it tried to access my VAR outside of the function so really we just need to delete this where we try to access the variable outside the function and now there is no error it is possible to have both local and Global variables with the same name when you do this the local variable takes precedence over the global variable let me show you an example here we have a function called my outfit that's going to return outerware that's this variable up here this is a global variable because it is declared outside of the function so when we console.log the output of the my output function or the my outfit function is going to return outerwear which is the word t-shirt so let's check the console and you can see yep t-shirt is there however let's change this up a bit so we have some space here because I'm going to put VAR outer wear equals sweater so now if I run this program you can see in the console it's going to say sweater instead of t-shirt it's because this local variable outerwear took precedence over the global variable another th interesting thing about this if I do console.log and I console.log the outer wear variable we'll see that it's still t-shirt so first you see in the console it says sweater and t-shirt so first we console.log this function which is sweater it returns sweater and then we console.log the global variable which is t-shirt you can return a value from a function with this return statement so we have this function here and we are passing a number into it the num and then it's going to return whatever's after the return keyword in this case num minus 7 so here we're going to console.log the function and the IT Returns the result of minus 7 is this 10 minus 7 which is three so it's going to console. log the number three if we look in the console yep it console.log the number three because the function returns three let's try creating another one this function is going to be called times five again we'll pass in a number and it's just going to return something it's going to return the num times five and then just like before we can test it using a console.log times five and we'll pass in the number five here and if I run this we'll see that it Returns the number 25 functions can have return statements but they don't have to in this case this function adds three to the sum variable which is a global variable because it's defined before the function it does not return anything so if you don't specify a return value the return value is just undefined now I'm going to create another function that is similar this one is going to be called a add five and this time we'll just do sum equals sum plus five or we can shorten this to use the plus equals so now that's going to add five to the sum also but it's not going to return anything so if we log this out it would be undefined it's simple to assign a returned value to a variable see right here we have the function change and you pass it a number and it's going to return the result of this mathematical expression so when we call the function change and pass in the 10 the value that is returned from this function is going to be stored in this variable here we can do the same thing down here first we initialize the variable processed and process ARG it's going to return the result of this mathematical expression so I can set processed to equal what this function returns so I can say processed ARG and then I'll just pass in the number seven Here and Now processed equals the result of this mathematical expression and computer science a q is an abstract data structure where items are kept in order new items can be added to the back the que and old items are taken off from the front of the que we're going to simulate that right now a sum of the functionality of a q using this next in line function so the purpose of this is to show that in this next in line function you can add an item to the array that's passed in and then it's going to return the first item on the list for instance if we have this array right here if we add an add an item to this array it should come after at the end so it should come after five and then it should return the first item on the list in this case it's one so you see we have some console.log set up so it should show what the list looks like the array looks like beforehand and then show what it looks like afterwards this json.stringify is just a way to change an array into a string that can easily be um printed out to the screen so to do this we're just going to have to do two things that we've learned about already so the first thing is to add the item onto the list so we see right here next in line passed in the test array and six so so we're calling this function next on line we're passing in this test this test array here and the number six we want the number six to be added to the end of the array so we'll just do r. push and then I'll put in Num just like that well actually it's item so what we did we took this array that was passed in here which is in this case test array and we push the item that was passed in and in this case here it's the item six now we want to um return the first item on the list we want to remove and return this item so that when we ccel that log here it should show the number one so instead of returning item I'm going to return r. shift that's what shift does shift removes the first item returns that first item so let's check this out okay you can see before 1 2 3 4 5 then we've popped off the one and after it's 2 3 4 5 six we did it booleans are another data type in JavaScript there are only two values true or false they're basically little onoff switches where true is is on and false is off they don't use quotation marks around the the Boolean see it just says return false so this is a function here uh it should be indented where it's just going to return false when you call this function it could also be true so we could return true you can use true and false in more places than just uh function returns and we'll be talking more about that later an if statement is used to make decisions in code the keyword if tells JavaScript to execute the code in the curly braces under certain conditions defined in the parentheses so here is a full if statement right here and there's always parentheses after the keyword if and here's the condition so if the stuff inside this par inside these parentheses evaluates to true then the code Within These curly braces will be evaluated or run so in this case it's a variable so if the is it true variable is true it will return yes it's true now if this is not true then we'll get to the second return statement No it's false so this whole function here takes in a variable and we check if that's true or not so I'm going to make a another example just like this we have another function that hasn't been filled out yet true or false and there's a variable that's passed in was that true so we'll say if and then the parentheses was that true if that's true we're going to return something it will be a string just like before and the string is yes that was true if that's not true then we'll get to this second return statement in the function and we'll return a different string we'll return no that was false false uh let me just add some semicolons and then I can run this and we'll see what happens oh return needs to be spelled correctly so let me spell return correctly so before I run this I'm going to add a console.log here so we can console.log the the answer so this is the function call here true or false we're passing in true and then we're going to log what is returned here yes that was true since we passed in true this if statement evaluates a true and this code is run right here there are many compar operators in JavaScript that will return a Boolean of true or false the most common is the equality operator and it's often used in an if statement so here it just says if Val so we have this whole if statement right here if Val we're going to see if if Val equals 12 now to check if it equals 12 we're going to have to use the double equal sign that is the equality operator and we'll say if Val equals 12 the reason why we can't just use a single equal sign is that a single equal sign is the assignment operator if we just had a single equal sign that would mean that we were setting the Val the value of the Val variable to equal 12 we're not trying to set this to equal 12 we're trying to check if the value of this variable equals 12 so we have to use the double equal sign so now this test equal function is going to test to see if the number we pass in is equal to 12 I can do a console.log here console.log and then we can see what appears in the console here not equal because 10 does not equal 12 we learned about the equality operator which is the double equal sign there's also the strict equality operator the triple equal sign so here we're checking if three equals three with the strict equality operator so the difference is that the equality operator the double equal sign attempts to convert both values being compared to a common type while the strict equality operator does not do the type conversion so this is going to evaluate to true the three equals equals equals 3 but the three equals equals equals 3 with the string on this side is going to evaluate to false both of these would be true if we were using the double equal sign because the string would be converted to a number and they would be equal to true but with the triple equal sign it does not get converted to to a number so it would be evaluate to false the second one with the three equal signs so here we're just going to use it right in this if statement and do equals equals equals 7 so now we can pass in the number seven and it's going to evaluate the true but if we pass in a string seven it will evaluate to false we will do one more review with the equality operator and the strict equality operator so if I run this here we'll see in the the console it says equal because it's checking if the number 10 and the string 10 are equal so if a equals B the number 10 equals a strict number 10 return equal since we're using the equality operator with with two equal signs it performs a type conversion and it converts the string into a number but if we use the strict equality operator with three equal signs I'll run that again and you'll see not equal in the console because now it's not converting the types and it's just checking if a number is equal to a string which is not so we get not equal now I will show you the inequality operator which is basically the opposite of the equality operator so I'm going to do the inequality operator with an exclamation point and an equal sign in this case going to see if the value is not equal to 99 and again just like the equality operator this does type conversion so let's just run this program and we'll see it is not equal because 10 we pass in 10 into the function here and 10 is not equal to 99 so we get not equal the strict inequality operator is basically the opposite of the strict equality operator it works like this so it says if Val I'm going to do if Val does not equal 17 so this is the strict inequality operator instead of one equal sign we have two equal signs and that means it's going to check if this is not true but it's not going to convert types so for instance if we are checking if the number three does not equal the string three that would be true so in this example we're just checking if 10 does not equal 17 if we run this we will see it's not equal we can also use the greater than operator so in this function we're checking if a value is over 100 so I'm going to put greater than 100 and then here we're checking if a value is over 10 so I'll put greater than 10 so here we call the function we pass in 10 and if I run that function you'll see 10 or under because we're not over 100 we're not over 10 or 10 or under because we passed in 10 we can also use the greater than or equal to operator so we'll finish this function by using greater than or equal to that's just a greater than sign and an equal sign and we'll put 20 down here just greater than or equal to 10 if I run that we should see 10 or over because we're passing in 10 and it's greater than or equal to 10 now I'll show you an example of the less than operator with this function we're going to check if the value is less than 25 and then here we're checking if a value is is less than 55 so here's a trick I use to remember which symbol is less than and which symbol is more than if you see the less than symbol looks kind of like the letter L which is the first letter in less than and then the more than symbol is just the opposite and we also have the less than or equal to operator we can use in JavaScript so here we're going to check if it's less than or equal to 12 so we just put the less than operator 12 oh equal less than or equal that's an important part here it's the less than or equal to 24 to make this statement true and if we run we see smaller than or equal to 12 number 10 we passed in sometimes you want to check if two things are true at the same time for instance you may want to check if this value is less than or equal to 50 and you also want to check if the value is more than or equal to 25 so we have here we have a nested if statement so it's going to check if it's less than or equal to 50 and if it's more than or equal to 25 then it's going to return Yes but there's an easier way to do this so what I'm going to do is copy this where it says value is more than or equal to 25 I'm going to delete this nested if statement so we don't need that if statement and I'm going to use the and operator so we have less than or equal to 50 and if I put two Amper Sands like this that means and now I'm going to put value is more than or equal to 25 so this says if value is less than or equal to 50 and the value is also more than or equal to 25 then we we're going to return yes so both this statement and this statement have to be true to get into inside this if statement here in this code here we're checking if the value is not between 10 and 20 so if the value is less than 10 we return out outside and if the value is more than 20 we return outside there is an easier way to do this with the logical or operator so I'm just going to delete this whole if statement here and then I can add an or statement which is just two pipes so I'm going to put Val is less than or more than 20 here so now we're checking if the value is less less than 10 or if the value is more than 20 either way we're going to return outside and then if that's not true we'll return inside when an if statement is true normally the block of code right after the if statement will be evaluated and if it's not true nothing happens but with an lse statement an alternate block of code can be executed when it's not true so this is a perfect use case if value is more than five the result is bigger than five if the res if the value is less than or equal to five the result is five or smaller we can do this with an else statement so I'm just going to type in else here and then we can just delete this whole if statement just like that and now we have if the value is less than five the result is going to be bigger than five else if it's which is if it's not more than five will return five or smaller if you have multiple conditions that need to be addressed you can use else if statements it's a way of chaining if statements together in this example we have three conditions if value is more than 10 we're going to return greater than 10 if it's less than five return smaller than five or else we're going to return five and up so this is a perfect use case for an else if statement so this is how we do it we'll do else and then just we're going to add the if statement at the end of the else I'm just going to delete all this stuff so else if value is less than five and then we're going to have one final else statement else and I'm going to put this statement here this final return just going to cut that and then paste it right in there so now we've instead of using multi if statements we have the if and we have the else if and then we have the else when you're using else if statements order is very important let's look at this example here in this function first we check if the value is less than 10 and return less than 10 then else if we check if the value is less than five and return less than five well if we look at this example and we pass in the number seven if I run this you'll see it's going to say less than 10 which is what we want however if we put three it's still just going to say less than 10 really we want this to say less than five because it is actually less than five however the this is in the wrong order so what we need to do is change the order so this should be five this should be five and this should be 10 and this should be 10 so once the first condition is met it doesn't even check for the rest of the conditions so that's why it's important to think about the order so if we run this now yep less than five that's what we want you can also chain if and else if statements so I'm going to complete the following challenge here write chain if SL else if statements to fulfill the following conditions so we have these conditions where if the number is less than five we're going to return tiny if it's less than 10 return small and so on so what I'm going to do is actually just copy this right here because this is written part of it's written exactly how we want to be written I'll just paste it here and I'm going to just add the if and else statement so it's going to be if and then we put this in parenthesis because the condition is always in parentheses if number is less than five then we're going to use the curly braces and we're going to return tiny so I'll just move that up here I'll cut it and paste it now we're going to use an else if statement and I got the curly braces uh first of all also I need to put the condition in these parentheses I'm just going to cut this number is less than 10 put it right here and we're going to return this small so I'll put that in the curly braces here and then we have another else if statement else if and the condition just like before number is less than 15 put that in there uh we get we always need the curly braces to show what's going to happen in the if statement so I'm just cutting and pasting the this text again we have an else if and then we have this here then we have return large another actually the final thing is just going to be else we don't even need an else if at the statement at the end we're not we don't even need to put the condition because if it's more than or equal to 20 that's going to be everything else so I'm just going to cut this we don't need any of this stuff here and we're just going to return large so with this one test here uh for test s we can actually console. log that console.log and see what it returns for seven we can try a few different things oh we have an air here oh forgot to I put this parenthesis wrong way uh let's try that again small but if this is 20 it should be huge and if it's 19 which should be less than 20 we should see large yep that worked in the game of golf each hole has a par which means the average number of Strokes you're supposed to use to get the ball into the hole so depending on how far above or below par your Strokes are there's a different nickname so here are some of the nicknames hole in one Eagle birdie par and we're going to write a function where you pass in the par and you also pass in The Strokes you can see up here par and strokes and it's going to return the nickname so that's what we're going to write you can see this table here shows what we have to do if the stroke Strokes are one then you get a hole in one if the stroke is less than or equal to par minus 2 you get an eagle and so on and we also have this array that's going to make it easier because we can just use things from this array instead of typing out the words so we're going to start with an if statement if and then we have to put the condition if Strokes equals equals that's the equality operator we don't want to use a single equal sign because that would be the assignment operator if it equals one then we can return and we can see down here we're going to return H in one but we can just use it from this names array so it's going to be names and this is going to be index zero of the array so we'll do names and then zero and then we can do an else if else if and then we can put the condition Strokes uh I have to spell Strokes right strokes and then we can just actually copy this right from here less than or equal to par minus 2 and then we are going to return name and this will be the index one which is an eagle at this point I can do some copying and pasting I'm going to copy this whole thing a lot of this rest of this will be else if so else if Strokes is this time it's going to be equal to par minus 1 and we're going to return this going be birdie which is array index two and I'm going to continue just like this so This Time It's if Strokes equal par we're going to return name index 3 see 0 1 two three is going to be the word par up here they'll just keep just like this now it's going to be par plus one and we'll change this to four now it's going to be par plus 2 and we'll change this to 5 which is going to be the the double Bogey and finally if Strokes is change this to more than or equal to par + three that means you did very poorly so you should just go home so it's going to be name index six and we don't need this anymore so now we're going to do some tests here I'm going to um do a conso console.log and we're going to pass in the function that we're calling so in this case the par is five and The Strokes are four so that should return birdie let's see what happens null okay that's not what I expected it's because this should be names I spelled this wrong okay that's why it's better to check before you go through the whole thing you can test things out as you go but let's do that again yep birdie and if I type in two here Eagle if I type in eight it's probably going to tell us to go home go home yep we just completed this challenge instead of using chained else if statements you can use a switch statement a which statement test a value and can have many case statements which define various possible values so let me show you how that works here we're going to write a switch statement which tests V and sets the answer to the following conditions if we pass in one the answer should be Alpha if we pass in two the answer should be beta and so on so let me show you how that works we'll just type in the word switch that's a keyword here and we're testing The Vow that's passed into this function so it starts off kind of like an if statement and right now uh so we're going to compare the Val to the different cases that we have so we'll have case and the first number is going to be one so here we're saying if the case of Val is one if Val equals one and it's using the strict equality operator so it's like the equals equals equals it's going to make sure that the type of the variable are the same so a string one and a number one will not be equal but if the case is one then we're going to set answer to equal Alpha we'll just use the do like this Alpha and then we are going to break break means that we're at the end of that case statement and once you break it it just goes to the end of the switch statement it doesn't evaluate anything else in the switch statement so we're also going to have um case two and one thing I forgot that we're just going to indent that so it's easier to see the different cases and case two the answer is going to set equal to Beta and then we always need the break statement if you don't have a break statement it will just run through to the next case statement automatically so if the case was one and you did not have a break here first it would set the answer to Alpha and then it would set the answer to Beta it would just skip over right to the next case statement but since the break is here it's going to go out of the switch statement completely so it would go start running the code after this last curly bracket so now we're going to do case three we'll just do some copying and pasting here and we're going to have four cases so I'll just do the rest of the cop the pasting here so we'll have three and four Alpha Beta and then we have gamma and Delta and we know that the switch statement is over because we have this final curly bracket and then we're just going to return answer so let's do some test to really test this we're going to have to add a console.log here to log what it's going to be and I'll run this Alpha good now two should be beta three should be gamma good and we'll just assume four is correct so we're done now I'll talk to you about the default option in a switch statement the default default option is kind of like else in an if else statement so here's a switch statement that's very similar to the one we already saw and it's inside this function where we passing a value into the function and we're going to check if the value equals a if it equals a the answer is going to be set to Apple B answer set to bird C cat so in this example we can see that we passed in here we passed in the A and it returned Apple because that was one of the options but what if we pass in something else if I pass in the number two here it's going to return an empty string that's because the answer is set to an empty string and we never override the answer here so it just returns that empty string what if we want to return something anytime a b or c is not passed through so for anything else that's passed into the function we're going to do default this is like the else statement so the default we're going to do answer equals stuff and again we're going to have the break so now whenever we pass in something that's not a b or c it's going to return stuff so it can pass in five it's going to R turn stuff but if I go back to passing in C one of the things we have a case for it will return cat and that's the switch statement sometimes you want a switch statement where multiple inputs give the same output well that's easy enough by emitting the break statement let me show you how that works so let's get a switch statement here and we're going to have Val that's what's passed into the function and in this case we want the case of 1 two and three all to return the answer of low so can do it like this case one and I can go straight into case two and then I can go straight into case three and since I don't have any break statement between each cases it will just keep going to the Next One automatically and now I'm going to say that the answer is g to be set to equal low and here is where I put the break statement okay now we're going to do the same thing with cases 4 through six and actually I'm just going to do some copying and pasting I'm going to copy all this and now we're going to paste that's 456 we're going to do the same thing with 789 so I'm going to do copy and paste again and then I'm just going to update the code so this is going to be four five six we'll have seven8 n and we're going to have mid and high so if the case is one two or three like for instance if it's one one it's going to pass through two and three to get low and then it's going to break out if it's four five or six it's going to pass through to get to Mid and then it's going to break out 789 is going to pass through the high and break out so let's test this out and see since we're passing in the number one here it's going to be low but if we pass in five we should get mid and if it's seven eight or nine we should get high sometimes a switch statement can be easier to write and easier to understand than a chain of if else statements so we're going to change this chain of else if statements to become a switch statement so let's do that right now so we're going to start with the switch keyword and we're going to be evaluating the value we have the open curly bracket and we'll have to make sure to have an in curly bracket at the end so for case Bob we're going to set the answer to Marley and then we need to have a break in here for case 42 we're going to set the answer to the answer for case one well set the answer to there is no number one oh we need to break up here for case 99 the answer is Miss by this much and then we need a break now we have for 7 well 7 8 9 and break and now we just changed that chain of else if statements into a switch statement here's a little trick when you want a function to return a Boolean a true or false value you can see in this function we're checking if a is less than B and if so we return true else we return false you may remember from before that all comparison operators return a Boolean true or false value so instead of using this if statement here we can just do that we can actually delete all of this and just return the result of this return we're just returning the result of a is less than b so this is going to be true or false and we can just skip that whole if statement logic and just return this so if we console.log this out console.log we should be able to see if 10 is less than 15 10 is less than 15 it's true but if we put a 20 here then it's false we've already seen a few examples of this but you can return early from a function with the return statement so if you see this fun this function right here we return at the very end of the function and it so it leaves the function and returns this value from the function but you can leave the function any time with a return statement so we are going to modify this function so that if a or b are less than zero the function will immediately exit with a value of UN defined so let's do that we're going to set an if statement if a is less than 0 or it's two pipes B is less than zero then we're going to return un undefined so we can do a test here console.log eight but what if this is a negative number it's going to return undefined scrimba has a little Quirk here where it just shows null but in a browser it will show undefined we are going to create a blackjack card counting function so how how card counting works at least how this function is going to work is that when you see a low card the count goes up and when you see a high card the count Goes Down And if it's a middle value card the count stays the same and then when the count is positive the player should bet high and when the count is zero or negative the player should bet low so we are going to use a switch statement to figure out what card has been passed in and what to do about it you can see that the function looks like this CC and we pass in a card and depending on what the card is it's going to increase This Global count variable or it's going to decrease it or it's going to stay the same and then we are going to return to things we're not going to return change me we are going to return the current count value and whether the player should hold or bet so every time you call the CC function it's going to change this count value and return the total count so let's see how this is going to work we are going to use the switch statement like I said and we're going to check the card value that was passed in so if the case is 2 3 4 5 six we are going to increment the count variable so we're going to do it like this case two I'm going to do some copying and pasting if the case is 2 three four five six we just have to actually change these values three four five six now there are many ways to write any program this could be done with if statements and else statements it could be even done with other other ways that we haven't even talked about yet as long as the program works in this case that's all that matters so if you find a different way to write this program that's great so if the case is 2 3 4 5 or six we are going to take the count value and if we just do plus plus that increments it by one and then we're going to break now if the case is 789 so let's past in three of these do 7 8 n actually we're going to do nothing nothing uh the count is not going to change at all so we don't even need case 7 or 89 so instead of doing 789 we just need to check in the case that something's actually going to happen so we are going to decrement the count variable if we have 10 Jack queen king or Ace so that's what we're going to change this to 10 deck Queen ping or a in this case we're going to decrement the count so we can do count minus minus so that's the same as count equals count minus one and then we will break now we've taken care of the count and updating the count now we have to take care of what we're going to return we are going to return the count and we're also going to return whether we are going to hold or bet so we're going to actually return a variable but first there's going to be a space there's a space between the number and then we're going to return the hold bet variable now this is a variable we haven't created yet normally this would be the perfect time to use the tary operator but we haven't learned that yet and we're not going to learn that for a few more lessons so I won't use use that now we are going to set what that hold bet value is first we'll create the hold bet variable variable hold bet and we'll set it to hold however if count is more than zero then we can set hold bet to equal bet so now this should work let's test it out and see if we've made any mistakes yet hold bet is not defined well you have it right here hold oh we spelled that wrong so instead of hold bet that should be hold bet okay in this case we're going to bet because we had a bunch of positive numbers and then negative numbers but if we change this to K and we change this to 10 let's see what happens now we're going to hold okay it worked objects objects are similar to arrays except that instead of using indexes to access data you use properties so here's an object called our dog objects are going to be defined with these curly braces at the beginning and the end and these are the properties now the properties are everything before the colons so we have name that's a property legs is a property and then the values are the things after the colons here so the name is camper the legs for Tails there's only one tail on this dog and friends are everything now you can see that with the properties Can Be Strings they can be numbers they can be arrays they can be any data type in JavaScript so now we are going to create our own dog so this is going to have a name personally I like the name Quincy so we'll use that for our dog's name also we're we going to have legs unfortunately our dog has had an accident he only has three legs but to make up for the only having three legs he does have two tails and for friends um another unfortunate thing it's an empty array he has no friends okay we've now created our own object there are two main ways to access a property on on an object the first I will talk about is do notation so we have this test object and we have hat shirt and shoes and we want to find out the value of these properties so right here the Hat value we're going to set to test object now here's where where we use the dot notation we just put a dot or a period and then I put the name of the property do hat and then for the shirt value I will do do shirt so see this word right here is just word here so the value of hat value test object. hat is now going to be ball cap and the value of the shirt value is going to be Jersey besides using dot notation you can also use bracket notation to access a property in an object you can use bracket notation anytime but it is required if the name has a space in it you can see in this object we have three properties and each of them have a space so to get the value of these properties we're going to have to use bracket notation so the entree value we're going to do test object that's the name of the object and then we're going to put brackets kind of like an array index so you need the opening and closing brackets and inside we will put the name of the property so I'll do an entree and then we can do it again down here for the drink value and I'll I'll use a single quote this time instead of double quote to show that each of those will work the drink and then we need the closing brackets here so now Andre value is set to equal hamburger and drink value is set to equal water bracket notation can also be used to look up object properties using variables so here we have this test object we have these different numbers associated with these names here and we are going to set this variable to be one of the numbers so I'll set this to be 16 so now we can in this test object 16 is Montana and we can look that up using the variable name instead of the number so instead of putting 16 I'm going to put player number in here and now player is set to the word the string Montana and we use this variable to look up the object property we can use notation to update object properties here you can see an object called our dog it has a name legs Tails friends and the name is camper however here we use dot notation our dog AME and use the assignment operator the equal sign to set the name to happy camper so if we did console.log on rog. name it would no longer be camper it would be happy camper well we have another dog here with a name of coder but we want to change the name to happy coder so that's what I'll do right here so my dog. name equals happy coder so just like above we use do notation to set the object property to a new value you can add new properties to an object using dot notation or bracket notation so here's an example right here we have this object our dog and there's four properties here but down here we're adding a new property rog. bark equals bowow so it had four properties but now it has five properties as the property bark as well now down here we'll add a property to the my dog object so we can do my dog and then here I'm going to use bracket notation instead of do notation bark I'm going to set that to equal wof and because he's yelling it we'll have an exclamation point and that's how you add properties to objects it's simple to delete a property from an object our ourg object has all these properties and with the delete keyword delete R dog. bark so now this property here the bark has been deleted and is no longer in the object after we've deleted it so we can do the same thing down here and this time we will delete the Tails property my dog. taals so now the my dog object no longer has a taals property objects can be thought of as a key value storage like a dictionary you can use an object to look up values so in this case we have a switch statement that returns certain values so when you pass in Alpha to the function it returns atoms if you pass in Bravo it returns Boston we can replace this switch statement with an object and use the object for lookup instead of the switch statement let me show you how that's done I'm going to create VAR lookup this is going to be an object here and the object is going to have a bunch of key value pairs so we have Alpha and that's going to be atoms and then we have Bravo and the value for Bravo is going to be Boston and that's it so we can now delete this whole switch statement and now we can say result equals look up in bracket notation we put the value that was passed in and then I forgot one thing which was the equal sign here because look up equals this object and let's do a test so let me put console.log so we can actually see what happens here so if we do Charlie we're GNA get Chicago if we do fox strot the result will be frank so it works you can check if an object has a property with the has own property method let me show you how to use this method and finish making this function where we check if an object has a specific property if it doesn't have the property will return not found so let me show you how that's going to work we'll do my OB that's the object up above do has own property and then we pass in the property we're going to check which is check prop this is either going to come back as true or false if it has the property so let's make this into an if statement if my my object has own property check prop but if that's true we're going to return my OB and then use bracket notation check prop so we're going to return the value of that property else we're going [Music] to return not found so let's take off this other return statement and I'll do a test so when we pass in gift here we returned Pony but let's say we pass in hello reload that not found okay it works a JavaScript object is a way to store flexible data so you can store strings numbers and arrays and even other objects so in this example we have an array called my music we can see it's an array because we have the Open Bracket and close bracket but inside the array are objects so this is one of the objects and inside the objects are all these key value pairs with the strings and the numbers and so on so I'm going to add another object so since this is array after each element in an array you have to have a comma so I'm going to add a comma here and then I'm going to add my next record right below this comment here and we're going to have just like above we're going to have an artist the artist is going to be bo KS and then we have a title the title will be serial man the release year will be 200 2003 and for formats this is going to be an array it's just like above so we can have any format I'm I'm going to put YouTube video and now we've created a second object in our in our my music array and each objects hold data in a property which is the key value format this is very similar to Json which we will talk more about later here we have an object with other objects nested inside that so in order to access subproperties of an object you can chain together the do or bracket notation so I'm trying to get the glove box contents so I'm going to take away this undefined here and I'll do my storage. car. inside and then now um the next thing I see we did car inside the last thing is glove box because there's a space here we have to use bracket notation so I'm going to use bracket notation on the end here and say glove box and now if we run this see we are going to console.log so let's see if we get the contents here yep Maps it works array bracket notation can be changed to access nested arrays you can see we have this array here and inside this array are two objects the first element in the array is this object the second element in the array is this object and then inside the object we have a key value pair the key is list and the value is another array here so we can combine do notation and bracket notation to access the second tree that's what we're trying to do here so let's do that first we need to do my plants and the trees are the second element in the my plants array which is index one now we need to get the the list so the list of trees here so I'm going to do dot list and since list is an array I can use the bracket notation to get the the second list element which again is array index one so if we run this it's going to console. log and we see Pine that's the second tree here this is a coding challenge we're going to do we're giving given this object here which is a record collection each record has an ID and then it also has different pieces of information about the record they don't all have the same information but see we have art album artist tracks album artist tracks this just says artist tracks and this just has album here and we are supposed to create this update records function where we can pass in the ID the property and the value and it's going to update our record collection with the property and the value so for instance if we pass in the ID 2468 and we put the property artist and if we set a different value like Quincy or something like that then we should update this whole object so now it says Quincy instead of prints and we should return the full collection so it's going to update the collection and then return the collection if we have an empty string for the value it should just completely delete that property also if we have the property of tracks and then we have a value instead of updating the whole tracks here with what we put in it's just going to add the track to the end of this array so if you look right here it says the comment says keep a copy of the collection for tests this json.parse and json.stringify and then collection this is just a fancy way in JavaScript to make a copy of the object remember in our function we are going to be changing the collection object but we want to have a copy of the original object before anything was changed so that's what that's for so let's go ahead and do that um so we we're just updating this function here this update records function okay so let's get to this so we'll do if value equals equals equals blank because the first condition we are going to test for is if we need to delete the property remember if the value is set to blank we delete that property so if the value is blank we are going to delete collection and then we have to use bracket notation ID and then prop The Collection ID prop uh that's the collection here if we we pass in the ID 1248 it would go to there the property if we pass in album for the property would go to here and then it would just delete that whole thing if our values in empty string okay the next condition we have to look for is if the property is tracks because for most properties we're just going to override that property with the value passed into the function but if the property is tracks we are going to push onto the end of the array so let's do else if else if prop equals equals equals tracks then we just have to push on to the end of the array so there's also another condition here which is if the tracks property is empty if the tracks property is empty we need to create it here's a fancy way to do that collection ID props so if prop equals tracks we are going to set the tracks because remember prop is going to equal tracks we're going to set the tracks to equal it's going to either equal itself if it exists or if it doesn't exist we're going to create it I'll show you how collection ID prop it's GNA equal itself or that's the or operator it's going to equal an empty array so if this already exist we're going to set it to equal itself but if itself doesn't exist we'll just set it to equal an empty array so that's just a way to create that property if it doesn't already exist so now that we know it exists we can just push the value to the end of the array collection ID prop and we'll just do the push and then put in the parenthesis the value so we're able to push the value that was passed into this function onto the end of the array okay there's only one last condition which is uh the just the kind of the default condition else so if the value isn't blank and the property is isn't tracks then we just push the value onto the property then we just set the property to equal the value just like this collection ID prop equals value okay let's uh test this out so we already have this example down here but to see if it actually worked we're going to do a console do log so we can see the output there and if I run that let me open up the console so you can really see it so let's see what we Chang go to 5439 and we set the artist which didn't previously exists to Aba so let's look look down here in the console 5439 and the artist is Aba let's see what happens when we add a track so we'll do one more example here I'll just put it right above here update records and I'm going to pass in something I'll pass in uh let's see the ID 2468 and we'll pass in the key which is going to be tracks and then for the value we'll put test so let's see what happens here if we run that it's going to update the record here and then it's going to update the record again but we don't care about that one we mainly care that's it's going to console.log what the final value is so if we look at 2468 here 2468 let's see the tracks we got 1999 Little Red Corvette and test so it's working great Loops allow you to run the the same code multiple times I'm going to talk to you about a while loop that runs while a specified condition is true and stops once it's no longer true so we are going to push the digits zero through four onto this array here's how it's going to work while is the while loop while I is less than five and we're going to do something while that's true first we have to set what I I starts off at so VAR I equal 0 so while I is less than 5 we'll do my array. push I just push it onto the array and to make sure this Loop eventually ends I'll have to do I Plus+ which increments I so then I will test this out by doing console.log and I'm going to console.log the my array so let's see if this works I'll run this and check the console 0 1 2 3 4 the while loop worked it every time went through this five different times and push 0 1 2 3 and four onto the loop a for Loop is the most common type of Loop in JavaScript so here is an example of a for Loop you start with the keyword for and then we have these parentheses with three different items in there separate operated by semicolons the first thing is the initialization then we have the condition then we have the final expression so the initialization happens before any of the code inside the loop runs so we will start by initializing I to equal zero so this is what most for Loops start with is you have a variable that you're going to initialize for the for Loop then the next thing is the condition so once this evaluates to false we break out of the loop so while I is less than five will continue to run through the loop over and over until this is false and we break out of the loop the final thing is what we do at the end of each iteration at the end of each iteration we will increment I by one in this example we are filling our array with the numbers 0 through 4 I'm going to do another example where we fill an array with the numbers 1 through five so we'll start with four now we're going to initialize I to equal one we're starting with one instead of zero this time and we're going to do I is less than six so while I is less than six or until I is more than six we are going to run all the code in this Loop and at the end of each iteration we are going to increment I now I can just do what's we have before my array. push I so the final thing we will do is test this I will do console.log and put my array inside here and I'll just load this and see what we see in the console 1 two 3 4 five it worked we iterated five different times and each time we pushed a new digit onto the array and at the end of each iteration we incremented so it pushed a larger number onto the array Loops don't just have to increment one at a time look at this for Loop here we have our initialization where we initialize I to zero and then we are going to run the loop until I is less than 10 and finally their increment instead of incrementing I by One we're incrementing I by two so now this is going to push all the even numbers onto the array we have console.log so let's log it out and see what it looks like 0 2 4 6 8 I'm going to write another loop right now that creates an array of odd numbers so let's do that for VAR I equals one we'll start at one while I is less than 10 I can use 10 again I'm going to do I plus equal 2 so we're still going to skip count by twos but since we're starting at one instead of zero this should give us the odd numbers so let's see what's going to be inside our Loop my array. push and I'll just put I there so let's log this out and see if we did it right console.log my array and I'll run that 135 79 it worked a for Loop can also be used to count backwards so if we see this for Loop here we're initializing I to 10 we're starting at 10 and we're going back to zero so we're going to iterate through this Loop while I is more than zero we're going to keep iterating and at the end of each iteration we're going to decrement i instead of increment it we're going to go down by two i - equal 2 means I equal I minus 2 so we're going to continue pushing the lower and lower numbers onto the array until I is less than zero so let's log this out and see what our array becomes you can see 10 8 6 4 2 well I'm going to write another one where we're going to push the odd numbers from 9 through one to my to the my array so another for Loop and I'm going to do VAR I equals 9 because we want to start at nine now we'll still do I is more than zero so while I is more than zero we're going to keep going through this array and we'll do I and we just everything else is really the same minus equals two and this is going to get all the odd numbers onto the array so we just have to do my array. push and then push on the I there now just console.log so we can see what it ended up as my array and I'll run the code 97531 we did it it is common in JavaScript to iterate through the contents of an array so look at this example we have this array here before we were always adding items to the array but this time the array already exists right here R array 9 10 11 12 so we are going to start at zero but now instead of going to a specific number of iterations we are going to the r array. length so the length is four here but if we added elements to this array that means this Loop would just go even longer until we went through every element of that array and then at the end we're going to increment I by one at the end of each iteration so look what we're doing inside the array we're doing R total that starts off at zero up here and we're doing plus equals that means we're going to do R total equals R total plus something else so we're going to keep adding to the total whatever is in the array at that index so our array I so it starts at zero and then it go go 1 2 3 until it gets to four which is the length of the array and it doesn't even run the iteration at four and there is no index four on the array remember it's 0 1 2 3 so this is just going to add up all those numbers if we run this we can see it adds up to 42 I'm going to write another for Loop down here that's going to add up all the numbers in this array here so we'll do four bar r i equal 0 and then we do I is less than my array. length and i++ so just like before for each element in my array we're going to do a my we're going to do a total plus equals my array index I so we have to initialize the total variable right up here so we'll do VAR total equals 0 and then at the end we can just we'll just console. log that out to see what the total is So if I just run this we can see that the total this time is 20 if you have a multi-dimensional or nested array you can use nested for Loops to access all the array elements so for instance we have this multiply all function it's defined a here but we're calling it here and we're passing in this multi-dimensional array which is basically an array with arrays inside the array so inside the first array there are three elements one two three and you can see each of those elements are an array with their own set of elements so we are going to use nested for Loops within this multiply function to multiply every number in these nested arrays here so let's get started we're going to start with a four Loop and it's going to look just like the other four Loops we' started I equals Zer we're going to initialize I to zero and then we are going to say while I is less than r. length and then we're just going to increment I at the end of each iteration now R do length that's going to start off as three because we're passing in this array and the first level of the array there's just one two three elements so that's going to be three but now we're going to go inside this for Loop and create another for Loop so we're going to do VAR J equals zero normally it's standard practice to call the variable that we're incrementing I but we already have an i within this scope so we need to create another name and it's pretty standard to call the next variable J because J is after I so now we're going to do J while J is less than now this is where it gets a little tricky we're gonna do while a is less than r index i. length also we're going to increment J here so this is going to change so first the first iteration of this outer for loop we're looking at the length of this array then we're linking looking at the length of this array then we're looking at the length of this array the index is going to be different every time so we're going to be going to each different array inside the nested array so at this point we just have to multiply all the numbers together so we already have the product that we've defined above so we're going to do product times equals which is just going to multiply everything together and we're going to do r i j so the I references the outer array and the J references the inner array within the what we're passing in and now we're done so let's we have the console.log here so let's run this and see what happens and 540 next I'm going to talk about do while Loops now we already talked about while loops and I'm going to review this while loop and then I will tell you how a do while loop is different than a while loop so this while loop first checks the condition before it runs any code within the loop a do while loop will always run at least one time and then it will check the condition so here we have this empty array we have I equals 10 so while I is less than five well I is not less than five so it's not going to do anything let's see what happens so we see it logged out 10 and then an empty array because I started as 10 and my array started as this empty array see you we're logging the I and my array with a do while loop it's different so what I'm going to do is cut this line up here and put it at the end and then at the beginning I'm going to put the keyword do in a do while Loop this is always run at least once before it checks the condition so first it's going to do these things and then it's going to check the condition in this case it's going to find out the condition is false and it's going to break out of the loop let's see what happens here see now I is 11 and the array has the 10 added to it this is a coding challenge we have this array of objects in our contacts list and you'll see each object is one of a contacts with a first name a last name a number and likes so these are key value pairs here so what we want to do is create this lookup profile function where we pass in a name this is the first name and the property and it's going to return the value of that property for instance if we pass in the name Kristen here and we pass in the property of number should return unknown if we pass in the first name of Sherlock up here and we return the property and we pass in the property of likes it should return the array intriguing cases and violin if the name that's passed in does not correspond to any contacts then our function should return no such contact and if there's no property it should return no such property so let's go to this function here and start creating it so the first thing we're going to have to do is iterate through each element in the contacts list so let's make a for Loop so for bar VAR I equals zero while I is less than contacts. length and at the end of each iteration we'll do i++ to increment that so for each of these contacts the first thing we're going to check is if the name is a name in this list so if contacts i. first name equals equals equals the name that was passed in so we're checking each item to see if it was a name that was passed in and if so we're going to do something now if not we're going to do something else so let's do that now remember if the name that was passed in is not in the array we're going to return no such contact however if it is in the array we're going to do something else if the name is in the contacts list we're going to return the value of the property that was passed in so return contacts I prop so this will return the value of that property that was passed in however there is another case which is if the property does not exist we return no such property so a fancy way in JavaScript of saying use this value if it exists but otherwise use a different value is to use the or operator so we'll say return contact I prop or if it doesn't exist we're going to return no such property now just so you know there would be a way to do this without using this or operator as long as the your code passes the requirements that's all that's important there's many ways of doing this but let's check it so right now we have our lookup profile we're passing a Kira and we're trying to find the likes and we're console. logging the data and pizza coding brownie points so what if we pass in something else if we passed in Sherlock we pass in last name no such contact well that's working because I spelled Sherlock wrong this is e so it's good way a good way to test that Holmes and the last thing we'll check is if we pass in a property that does not exist I'll just say hello and no such property so our function works there is a simple way to create a random decimal number in JavaScript it's with the math.random function so we have this function here which is says random function and it's returning zero currently but we're going to use the math.random function and you will see that when I run this we have 0.238 13741 and so on so it's always going to be a number between zero and it could be Z between 0 and one but it could not be one often you want a random whole number instead of a random decimal number that can be accomplished with math. floor we have math. floor here this rounds down to the nearest whole number so we pass in math.random times 20 and then we round down to the nearest whole number this is going to create a random whole number between 0 and 19 remember math. random can never be one it can be zero but it can never be quite one so when we multiply it by 20 we are going to get a number between 0er and 20 but not including 20 then we round down which will end up being 0 to 19 so let me show you another example where we're going to get a random whole number between zero and nine it it's going to look just like this so we're going to modify this function so this math. random we're going to pass that into math. floor so I have to put the parentheses because we're passing it in that function and it's math. random times 10 and that's going to give us a random number between zero and nine so if I reload this you can see 9 5 4 1 every time I load it it's a different Rand random number you can also Generate random whole numbers within a range so look at this function here our random range it takes a minimum number and a maximum number and then it just runs through this calculation here so we have the math. random and we multiply it by the max number minus the Min number plus one and then we get the floor which is rounding down and we add all that to our minimum number so this is just a calculation to get a random number between the Min and Max so as practice I'm going to rewrite it down here so we have the random range instead of our men and our Max we have my men and my Max however the equation is going to be the same so we have math. floor um you can take a chance to actually just look over the equation and see if you can understand how it works my Max minus my men and then we just have to do plus one and then this whole thing is going to be plus my men so we already have this example test setup down here random range between 5 and 15 and we're going to log it out here so let's try that 11 6 7 see every number is between five and 15 whenever I run it another use ful function is the parse int function it takes a string and returns an integer a lot of times you want to make sure you're dealing with integers and not strings for different calculations and things like that if the string cannot be converted into an integer it returns n a n for not a number so let me show you how it works from this convert to integer function we are going to return and we're going to return the string except we're going to convert it into an integer first so we'll do parse int and then I'll pass in the string now it was a string because you can see here we're passing in the string of the 56 but it's going to return it as a number an integer the parse imp function can also be used with a radic the radex specifies the base of the number in the string such as base two or base seven or base 8 a base two would be binary so that's one of the most common ones to use Now the default is base 10 that's what we use normally every day but let me show you how that would work we're going to convert this number which is a binary number to an integer so we'll do return and I will do the parse int I'll pass in the string as before but now we'll have a second argument after the comma which is is going to be the number two so instead of the default of base 10 we'll be passing it as base two so the computer knows that this is a binary number I love the Turner operator it's like a online if else expression now this is what it looks like you have your condition just like in an if statement and then you would have a question mark after the question mark you have what's going to happen if the condition is true then you have a colon then you have what's going to happen if the condition is false so we can replace an IFL statement like this into something using the tary operator so here we have this if this condition is true we're going to return true else we're going to return false let's change this so now we're going to use the turn area operator so now it's just going to say return a equals equals B that's the condition then we use the question mark So if it's true we're going to return true and then we have a colon and after the colon we have what's going to happen if it's false which is we're going to return false now I'm be honest you would never write a line like this in real life because you could just write return a equals equals equals B and this Line's actually going to do the same thing as this line however I just want to give you a simple example of using the tary operator one of the great things about conditional or tary operators is that you can Nest them within each other which gives them even more power so we're going to write a function here the function check sign and it's going to return the string positive if this number is positive negative if if the number is negative or zero and we're going to use a nested conditional operator so here it is return and first we're going to check if num is more than zero and then we'll use the turn area operator if so the first thing after the question mark is if it's true if it's true we're going to return positive if it's false if the number is not more than zero we'll do something else but here is where we're going to have a another tary operator we're going to check if num is less than zero so if the number is less than zero well if that's true we have to have the question mark for the turn area operator if that's true we're going to return negative and if it's false that's where the colon comes in we're going to return zero so let's do this check sign I'm going to do a console.log so we can see what this returns here and we can see this is going to return positive if we have a negative number here it's going to return negative or if we have a zero it's going to return zero now you'll see that after this colon we have an entire Turner operator so if this is true we just return positive if it's false then we do everything here which is another turn operator where it checks if this is true and if that's true we return negative and if it's false we return zero for a long time in JavaScript if you were going to declare a variable you had to use the VAR keyword but starting with es6 in 2015 we can now declare variables with let and const as well over the next few lessons I will be talking about what let and con do that's it's different than VAR but one of the things is that let does not let you declare a variable twice so let's look at this example we have VAR cat name equals Quincy and then down here VAR cat name equals Bo and if I just run this code you'll see that's nothing is happening it's just allowing us to set the cat name twice and declare it twice with the VAR keyword however if we change this to let we're going to change all the VAR to let and you'll see that when we load it again you'll see an error duplicate declaration cat name so this is good that it's creating this error because you usually don't want to declare a variable two times in the same scope so this allows your program to give you an error to tell you that you've done something wrong now you can still reset it so if we didn't use the word let here we could just set the cat name variable and now not going to get an error in this case we're declaring the variable here to be Quincy and we're setting the same variable to a new name here this is one of a few reasons that many people only use let and const and never use VAR to declare variables another thing in this code you can see is use strict now this enables strict mode which catches common coding mistakes and unsafe actions so a lot of people will use used strict at the top of a full JavaScript file or maybe just in a function to catch coding mistakes such as if you create a variable and don't declare it with VAR letter const another major difference between the VAR and let keywords is that when you declare a variable with VAR it is declared globally or locally if declared inside a function however let the scope of let is limited to the block statement or expression that it was declared in so let's look at this example here if you see this code we have this check scope function and we're calling it down here and it's setting I with a VAR here a VAR keyword to function scope then we're setting it to block scope in here and you can see it's console. loging block scope I is it says block scope and when we get down here fun function scope it's still block scope if we want this to be function scope down here we're going to have to use let so we would use let here and then we would use let here and if we run the code now you can see in the console block scope I is block scope function scope I is function scope so even though we set I to block scope here inside this block BL now a block is just anything inside these squiggly braces here so we set I inside this block to block scope but then when we get out here it's now back to function scope because of this up here uh here's another thing I want to show you if this is if we comment this line out and we change this to VAR what do you think's going to happen well let's run and find out look we set the VAR inside this block here to block scope and it says block scope is block scope but then when we're outside of the block when we're outside of these squiggly braces here we can still access I here and it's set to block scope but if this was a let and we're declaring inside this block if we run that now when we get outside the block we get an error because it's not defined so that's another reason why people use let instead of VAR is so that they can make sure the variable is only defined in the area they wanted to be defined in but for now I'll uncomment this out const is another way to declare a variable it has all the features of let but it's also read only you cannot reassign a const so let's look at this program here we're running this print many times and is going to log out this sentence and the sentence is up here V sentence it's declared and then we reassign it here so first we declare the sentence to be the string is cool then it's reassigned to be the string it's amazing so if we run that it should work it prints free Camp is amazing many times but if we change this to const let's see what happens now I'll run this and we get an error sentence is read only if you declare a variable with the const keyword you can not reassign it afterwards this can be very helpful to prevent you from accidentally making mistakes later if you know for sure that you never want to reassign a variable always use const so you don't accidentally reassign it when you don't mean to another thing is when you're using const it's very common to use all capital letters so like this sentence like that and that's another way to remember that it's a constant so if I rename this here I'm also going to have to repeat it here and while we're at it we're going to change this to let because for the most part you should only use const or let but there are certain circumstances where you would use VAR and and also in some other videos in this course I'll be using VAR but in your own code you should mainly use const and let let's reload this to see what happens and it worked free Cod Camp is cool many times we can no longer say that free Cod Camp is awesome even though we know it actually is while you cannot reassign a variable declared with const you can mutate an array so look at this example that's not going to work first we declare the variable s and we assign it to an array we decare with const and now we're going to reassign the variable s here but if we do that we're going to get the error s is read only however we can update the array using bracket notation so I'll just comment that out and using bracket notation I'll do index zero I'll assign that to two index one I'll assign that to five and then index 2 I'll assign that to seven and just like that it is going to reassign the array so if I just do a console.log here console.log and put the array in there we should see the new array here 257 as seen previously a const declaration alone doesn't really protect your data from mutation if you have an object or an array you can still mutate it even if it's declared with const there is something called object. Freeze that will prevent data mutation so let me talk to you about object. Freeze first of all let's understand this function here we're using this function to demonstrate object. freeze so it's going to create this constant math constants with a pi in it this is an object and right now this can still be changed so if we look down here this is a tri catch block we'll talk about TR catch blocks in more detail later but for now you just have to know that it's going to try what's in the first part of the block Lo and if there's an error then it's going to go into the catch part and it's going to log it out so right now we're going to try to change math constants pi to 99 and if you can see right here um we're going to return the math. constant. pi and down here we are putting into a variable called Pi so if we run this you'll see that we console.log Pine is 90 9 but wait a second we don't want pi to change because we know that Pi never changes that's why we're going to use object. freeze so I'll put it right here I'm gonna do object. freeze and then in parentheses I'll put the object which is math constants now I've frozen math constants so when it tries to change math constants Pi here it's not going to work and it's going to go into this catch block and it's going to log out the error or the exception so let me run that and you'll see type error cannot assign to read only property Pi of object so we had an error and we can see here that Pi it stays the same at 3.14 so whenever you have an object and you don't want any of the items in the object to change use object. freeze this function here is called an anonymous function it doesn't have a name it is assigned to this variable magic but there's no word right before the function keyword to assign the name to the function whenever you have an anonymous function you can convert it into an arrow function that makes it a little quicker to write so instead of the word function I'm going to take that out completely and then put an Arrow here so this is the same thing except it's just a little quicker to write but we can shorten this even more if we're just returning one value here we don't even need the return keyword and we don't need the curly braces so I can delete all this and I can delete all this here and now this is the full function from before but it's just really shortened up and to make this even nicer we're not going to use VAR I'm going to change this to const just like in a normal function you can pass arguments to Arrow functions so let me show you how to convert this function into an arrow function so it's a normal function now and it has two arguments and then it's going to concatenate the two arrays past in so first we'll take off the function keyword we're going to leave these parentheses with the parameters now I'll put the arrow since all we're doing is returning this we don't even need the return keyword and we don't need the curly braces so I'll take that off we'll take this off and now we've done this I just converted that function into an arrow function and it has these two parameters so we just have the parameters and parentheses we have the arrow and then we have what's being returned right after the arrow so if I run that you'll see that we can catenate the two arrays that are passed in in this example and then for good measure we'll change this to const Arrow functions work really well with higher order functions such as map filter and reduce I'll go into more detail at a different time about map filter and reduce but the main thing to know is that they take functions as Arguments for processing collections of data whenever one function takes another function as an argument that's a good time for an arrow function so what we're going to do here is we're going to update this function right here we wanted to compute the square of only the positive integers in the array so it's pass in this array which is this and we want to filter out everything that's not a positive integer so I'm going to use the filter and map functions to do that but the main thing I want you to look at is the arrow function funs that I'm passing into filter and map this line is going to be a lot more succinct because of the arrow functions so we have the squared integers is going to be the r r and we're going to filter this so do filter now again I'm not really going to explain in detail what the filter function does but that will be something for another time just look at this Arrow function we're going to create this Arrow function by starting it just like this now before I showed you that you pass in arguments in parentheses for an arrow function but if you only have a single argument like this the number argument you don't need parentheses around the argument you can just put the argument and then the arrow so this is the beginning of the arrow function and then we'll see what's returned from the arrow function first we want to filter this array so we only have numbers that are integers and numbers that are more than zero so we'll do number. is integer and then we will pass in the number and number is more than zero so let me complete the parenthesis here now the result of this filter command will be an array with all the numbers that are more than zero and also integers so that'll be 4 42 and six but after we get that new array we want to get the square of each number in that array so that's where we're going to use the map function now the map function takes a function as its argument but instead of writing a full function out we can use an arrow function so we're going to pass in x to the function and then there's going to be an arrow function now X just means every element from the array that's being passed to it so remember the map is getting the array 4426 X means for every element in the array this is what we're going to do to it X time x because it's going to be squared again the main point of this lesson is not to understand the filter and map functions but to see that we can put an arrow function we can pass in an arrow function and it makes it so we can fit everything really succinctly on one line so let's reload this and see if it works now we have 16 1,764 and 36 in order to create more flexible functions you can use default parameters the default parameter kicks in when the argument is not specified or is undefined so so for instance with this increment function we want to change it we want to change the increment function so you can pass in two arguments the five and two to increment by two or you can just pass in the one argument the five if you want to increment by one so here are the numbers we're passing in a number and a value so we just have to put value equals one so now if a value isn't passed in it will be set to One automatically but if it is passed in it will be set to whatever is passed in so if we run this we can look on the console we have seven for this first one and six for the second the rest operator allows you to create a function that takes a variable number of arguments the rest operator is three dots so we have this function here and it's taking three arguments X Y and Z and it's summing them so at first it's it's converting these XYZ into an array called args and then it's reducing them so it's summing them all up here and then returning the result so right now if we just run this it's going to log six because 1 plus 2 plus 3 is six but we can change this to use the rest operator so we're still going to pass in one two three but where it's accepted here where we have the arguments here XYZ I'm just going to put dot dot dot that's the rest Operator just dot dot dot and I'm going to put args so with this rest operator dot dot dot it will convert everything that's passed in into one array and the array is called args so now we don't need this anymore and it should work the same if we run this we'll get six but we can also now add any number of numbers so I'll put a four on the end and 10 it's going to add those numbers together so before we could only pass in three arguments and now we can have any number of arguments the spread operator looks just like the rest operator three dots but it expands in already existing array or it spreads out an array so it takes an array and spreads out into its individual parts so here we have an array with some months and the spread operator can spread this array this R1 into the individual months instead of the actual array here you can only use it in an argument to a function or in an array literal so let let's look at this so right now we're setting array two to equal array one in this example we're not actually copying it because if we Chang array one if we set the index of array one to potato and we log array two um you'll see that index zero is potato even though we're logging array 2 and we only change array one because these are equal array two and array one are the same but what if we want array two to be a copy of array one we can use the spread operator now we can't just use the spread operator like this that's not going to work but if we put this inside brackets which is an array it will spread out the contents of array one into this new array so we're not making array two equal array one we we are making array two equal all of the contents of array one so they'll be different so if we run this again you'll see that it says January for the first element in the array instead of potato the next few lessons will be about D structuring assignment this is a special Syntax for neatly assigning values taken directly from an object to a variable so look at this object here we have this object with three elements we have the X Y and Z with their values and it's all in the voxal variable so if we want to take each individual element in this object and assign it to its own variable this is the old way of doing it so you could do vo. X the stores X vo. Y stores y vo. z the stores Z Now with with d structuring there's a simpler and quicker way to assign variables for each element in an object so here's the destructuring synex right here this time we are creating variables a b and c and assigning them to the values from the object X Y and Z we can see we put in curly braces here and we just say it equals the object it equals voxel you can read it like this get the field of X and copy into the value a so get the field of x from the object copy into the value a get the field of Y from the object copy into the value B get the field of Z copy it into the value C so this this is just a quicker way of assigning things from an object into variables now we're going to use destructuring to obtain the average temperature for tomorrow from the input object average temperatures so we have average temperatures it has today and tomorrow's temperatures and then the average temperature is inputed into this function here so I'm going to change this line here to use destructuring and destructure the average temperatures object here that's passed into this function so first I'm just going to put the average temperatures variable here and then on this side of the equal sign I'm going to have to use the destructuring so I'll put the curly braces and we'll put tomorrow the colon and then the other curly brace so this is saying get the tomorrow field from the average temperatur object and assign it to the temp of Tomorrow variable so if we run this we should see it says 79 in the console because we got the temp of Tomorrow variable we returned temp of tomorrow and it was logged right here so we successfully use the structuring to get the tomorrow variable out of average temperatures we can also use the structuring assignment to assign variables from nested objects we have this nested object right here the local forecast and inside we have some nested objects so we have the forecast from today and the forecast from tomorrow so here we have get Max of tomorrow where we're going to pass in the forecast and here we can see the local forecast becomes the forecast variable and we're trying to figure out the max of tomorrow so we are going to use destructuring to figure that out so it's going to equal forecast and remember that is a nested object so here uh when you're dist structuring you're always going to use the curly braces and we are first going to get tomorrow and on the other side of the colon we're going to have some more curly braces because it's nested so we need to go inside of the tomorrow object and we need the max so we'll do Max and then we have the colon and Max of tomorrow now we need two sets of squiggly braces here so we have this one and this one and so we've destructured two times and the variable is Max of tomorrow so we've set the max that was inside tomorrow to Max of tomorrow so if I run this you'll see it's 84.6 you can use the structuring assignment to assign variables from arrays look at this example here so we have this array of 1 2 3 4 5 six and we're assigning the variables Z and x to the first two numbers of the array one and two the difference between D structuring from arrays and destructuring from objects is that you cannot specify which element from the array to go into a variable it just goes in order however if we wanted number four to be going to a variable we could just do like this uh we would just add some commas so we put a comma with nothing in it like that a two commas in a row and I'll put a y here so now we have the first element the second element we skip the Third element and then we have the fourth element so if I console.log ZX and Y we should see one 2 and four here's another thing you can do you can use the structuring of arrays to switch the places of variables let me uncomment out these and what I'm going to do is use D structuring to switch the places of A and B so it'll be like this I'll say a b and I'll say equals b a so now it's just taking this and switching the places so instead of a being 8 and b equals 6 it's now going to log out six and eight so let's see yep it worked we can use the structuring assignment with the rest operator to reassign array elements we can see in this example we have this array the digits 1 through 10 in the array and we have this remove first two function we're calling it here and we're passing in the source that's the source array and it becomes the list so we want to return the array with the first two elements removed so let's use the rest operator inside an array here so we'll use the rest operator the three little dots and to remove the the first two I just have to put two commas here with nothing in between them so it's saying do nothing for the first element do nothing for the second element everything else put into the our variable we could have assigned the first two numbers in the array to two other variables so I could do a b and then a would be 1 B would be two and then R would be an array of 3 4 5 6 7 8 9 10 but right now we just need to return the array with the first two elements missing so if I run there you'll see that we did that if you look in the console we've logged the array and the first two elements are missing and then we have the original array down here you can use the structuring assignment to pass an object as a function's parameter let me show you what I mean right now we have this half function and it's getting the stats argument so the stats is being passed when it's called down here and it's passing in this whole object this whole stats object but you can see within this function we're only using stats. Max and stats. Min so instead of passing the entire stats into this function we can just pass in what we need so this is what we're goingon to do I'm going to put in some curly braces here and just put Max and Min so now when stats get past in it's destructured into just the Max and Min variables and the Max and Min from the function gets passed in so now instead of doing stats. Max we can just do Max and instead of stats. men we can do men so if we reload that it's going to work exactly like it did before but now we only pass in what we need this is commonly used with API calls when you are getting information from an Ajax request or an API request it will often have a lot more information than what you need and you can use destructuring to get it down to what we actually want to work with template literals are a special type of string that makes creating complex strings easier you make them with this back tick so here's an example of a template literal right here we have the beginning back tick and we have the ending back tick this would be in place of using a quotation a single or double quotation mark a few advantages of using these template literals these back ticks instead of quotation marks are one you can make multi-line strings you can see this has two lines here's the first line and here's the second line and if we log the greeting it's going to put the new line right in there another thing is you can add quot single or double quotation marks right in the string and you don't have to escape them the third thing is you can put variables right in the string so if we see this see the dollar sign and then we have these curly braces and so anything in between these curly braces that start with the dollar sign is JavaScript so right now we just have this variable person. name which gets the name from up here and then here we have person. AG which gets the age from right there so uh it makes things easier that you can put variables right in the strings so if we run that you'll see hello my name is zodiac casbro I am 56 years old and normally it would actually also be printed with a new line but with this exact code editor and console doesn't show the new line so there's going to be a coding challenge that we're going to do right down here um we have this make list function and we want it to create a list based on the array that's passed in so when we call make list we pass in result. Failure well here's result result. failure is this array here and we want it to return an array that looks like this each element in the array is a template literal that has some HTML in it and then it also has this noar VAR on top and line break that comes right from this array that's passed in so let's use template literals to create that so instead of setting this to equal null I'm going to start this off to be an empty array now there's many ways to do this but I'm going to use the classic four Loop so we'll do four and hopefully you remember how to make a for Loop we'll do let I equal Zer while I is less than r. length and then at the end we will increment I so inside this for Loop we'll do result display array. push and then here is where I'm going to use the template literal put a back tick and I'll put this HTML code here Li class equals text warning and now this next part is going to be a variable because it changes for each array element here so I'm going to do dollar sign and then the curly braces and now I can just do R and then at index I now in the curly brace and then I can just put the slash Li okay and if we console.log this out because we just finished that I do console.log result to display array the array looks just like it's supposed to be if you look in the console it returns correctly es6 added some nice support for easily defining object literals if we look at this function here this function it's an arrow function it takes in three variables name age and gender and it's going to return an object and the object is going to have a series of key value pairs where the key is the name age and gender and the values are the past in variable names the past in names age and gender so if you look in the console you can see what this currently does we did the create person we passed it a name age and gender and you can see in the console the object is name and zodiac Hasbro age 56 gender male so you can see there's some repetition we're repeating name name age age gender gender now the first name is the key and the second name is the value but there's a way to just make this simpler if you know that you want to create an object with where the key is the name of the variable and the value is the value of the variable there's an easier way to do it we can actually delete this whole thing here and this is how we're going to do do it we'll just do name age gender JavaScript knows that it's going to return this object and it's going to have three key value pairs the name age and gender so if I reload this you'll see in the console it looks exactly the same because this code does the same thing that the previous code did an object can contain a function this is the long way to put a function within an object but there is a simpler way we have the set gear function but instead of using the function keyword and this colon we can just delete all that and now this is the new if I load this again you'll see three in the console just like it was before because we've been able to set the gear using that function es6 provides a syntax to help create objects using the class keyword so here's the older way to create an object it's with the the new keyword we can instantiate an object using this new keyword and we're instantiating the space shuttle object we have to have this Constructor function up here so we use this to construct the object where we pass in the Target planet Jupiter and we set the target planet to this. Target Planet once we create the new object like this that allows us to do zeus. Target Planet so zeus. Target Planet which we set to zupiter Jupiter so in the console you can see Jupiter the class syntax replaces the Constructor fun function creation so I'm going to delete that we're going to use the class syntax so I'll do class space shuttle and then we have the curly brace here and so inside here we have a Constructor so do Constructor Target planet and then that's all we just have to put in the curly brace and this works exactly the same as before using the class keyword and this Constructor so down here we are going to do the same thing for a vegetable class so for the vegetable class we'll have class vegetable and we're going to have a Constructor with the name this.name equals name so now that we have this uh we can set this vegetable to make class which will return a vegetable class that's up here and then when we do new vegetable and passing carrot this carrot will go into here and it'll get set as this.n name so when we console.log carat. name we should get carrot with a class object you often want to obtain values from the object and set a value of a property within an object these are often called Getters and Setters so in this class object we have the Constructor which we already talked about we also have a getter and Setter to get and set the writer so we can get the writer and we can set the writer getter functions are meant to Simply return or get the value of an object's private variable to the user without the user directly accessing the private variable so the private variable is this underscore author that gets set when you construct the object and then when we do get writer it's going to return this _ author so you never actually interact directly with this variable but it's going to get the writer which is the author here and when you're setting it's the same so you're never interacting with uncore author but you can set that with the the writer setter this change could invoke calculations or even even overwriting the previous value completely so you can have any number of code lines in the setter to ultimately uh maybe do different calculations before you set it or calculations before you get the property so what we're going to do is make our own getter and Setter for the therat class we're going to create a thermostat class and we're going to have a getter and Setter so here's the thing about this challenge is that when we construct the class it's going to accept Fahrenheit temperature but we're going to create a getter and Setter in the class to obtain the temperature in celsius so it's going to have to do the calculation right within the class so let's do that we're going to do a class of thermostat and in this class we need the Constructor so when you first create the thermostat you're going to pass in a temperature and remember this is going to B Fahrenheit now within this Constructor we're going to set a private variable this doore temp so the word this uh just means that this variable is only accessible within this class here and the underscore temp whenever you start a variable with an underscore that's going to generally signify that it's a private variable that you're not supposed to access it outside of that scope or outside of that class so we're going to set the temp and we're not going to just put this underscore temp equals temp because it's passed in as a Fahrenheit and we want to convert it to Celsius I just happen to have the equation for Celsius so it's 5 over9 times and then we're going to Temp Min - 32 so now we can create the getter and Setter so we for getter we'll do get temperature and we're just going to return this doore temp which now it's in Celsius because we're storing the value in celsus even though the thermostat is created in Fahrenheit so with the setter it's going to be the same set temperature updated Temp and uh it's now going to still be in Celsius so this do temp equals updated temp so let's look at the code down here how we're using it so the con thermostat equals mate class this mate class function is going to return this thermostat object here and then we're going to do const thermos equals new thermostat so when you're instantiating an object you always use the new keyword new thermostat that this and we're passing in 76 that goes into the Constructor the temp and so we do this calculation to convert that Fahrenheit to the Celsius in this local variable here and then let temp equals thermos. temperature so thermos. temperature is going to use the getter get temperature and it's going to return this. uncore temp so a key thing to look at is that there are no parentheses after this so generally if there's if something is a function you would see parentheses after the function name but if it's a variable or property name it's going to not have parentheses so Getters and Setters are access similar to properties and then we can use the setter here thermos. temperature equals 26 and then it sets it with the updated temperature and now we can say temp equals thermos. temperature and if we do a console.log here we can do that with the temp and it should have the new temperature if I load that 26 in the past people would use the require function to import functions and code from other files but now we have Import and Export you can export code in one file and then import it in another file it also allows you to only import certain functions from a file or certain variable variables let me show you how it works so in this file we have this capitalized string function we're we're passing in the string hello and we wanted to log out the capitalized strings but right now it just has an air because there is no capitalized string function in this file however in this other file we do have a capitalized string function in this string function. JS we have export this is the export statement I was talking about and then it's exporting this function it's actually a variable capitalized string that's set to equal a function this is a an arrow function where we pass in a string and then we return the string. to uppercase now two uppercase is just a string function that makes every letter uppercase so we can import this in our other file so let's go back to our other file and I will import and with the import statement you're going to use curly braces and then I'll put capitalize string and then we have to say what we're importing it from we want to import it from and this is where I put the file name now normally you're going to start with a do slash which just means the current directory and I'll type in the file name String function now the file name is AJ s after it but that's assumed so you don't have to put JS you can just put the file name without the extension so if I run this you can see hello and all capital letters it successfully imported this function from the other file and we used it in this file I talked a little bit about export in the last lesson but now I'm going to go into more detail you export functions and variables from one file so that you can import them into another file that's how you can reuse different code so we have this function here this is a capitalized string function it actually just capitalizes the first letter of the string and then leaves the rest of the string lowercase and before I showed you you can just put export right before here but we can export a different way so I'll do export and then in curly braces capitalize capitalize string and so now we've just exported this function and to export a variable like this we have cons f equals bar cons bar equals Fu to export these variables you just type in export Ty both before so now in this file we're exporting this function and these two variables and then we could import them into another file if a file exports multiple different things you can import each things individually or you can import everything so let me show you how you would import everything from a file it's just import and then you're going to put an asri or a star and then you're going to put as import as and then you have to create an object to store everything in so I'm going to import stuff from a file called capitalize strings so I'm going to call this capitalize strings so this could really be anything I'm creating an object with this and then I'm going to say what I'm importing it from from and then I just put the file name in this case it's just going to be capitalize strings sometimes you would have to put a do slash if it's in the same directory there and then I'll make sure to put a semicolon at the end so if you're importing everything you always start off with import Star as and then this can be anything it can be any object name that you create and you're going to put from and then you put the file name and quotation marks just like that before when I talked about exports I was talking about named exports there's also something called an export default this is a fallback export and it's often used if you only want to export one thing from a file so if you let's say I want this to be my fallback export I'm just going to only export this one thing from the file I can just put export default so now we know that this is just the the fallback the basically just the one thing we're going to export from this file so we talked about exporting a default export now I'm going to show you how to import a default export it's pretty much the same as before but there is a slight difference so we are going to pretend we have a file called math functions that has a default export name subtract so let me show you how you would import that so it's going to be import subtract and we've already reached the difference here if it's not a default export you would put curly braces around this but it is a default export so we are not going to use curly braces but we still have to say what what it's from so from math functions okay so that is how you would import a default export well thanks for watching don't forget to subscribe and remember use your code for good