Learn JavaScript - Full Course for Beginners

Beau: This is the Beginner’s Javascript course you are looking for. My name is Beau Carnes. And I’m with freeCodeCamp.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 a refresher on basic Javascript syntax. This course actually goes along with the freeCodeCamp.org Javascript curriculum. So, if you 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 freeCodeCamp.org, but it could be helpful. 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 really learn Javascript. You have to create things without going through a tutorial and just use a search engine to find the things that you don’t know or need to learn. To go along with the freeCodeCamp curriculum, I have all the ES6 stuff in the second part of this course. That’s pretty much it. Let’s learn some Javascript. [Running 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. Here, I have Sublime Text. You can 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 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 on the console here. You can also just use the code editor that’s included on freeCodeCamp.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 CodePen. If you go to CodePen.io, going to go to Create Pen. 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 can do would be use Scrimba. Most of the course I actually recorded using Scrimba.com. So, if you want, you can use Scrimba.com to follow along. Once you log in, just click the [Plus] button. I’m going to [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 “Hello from Javascript.” And you can see in the console right here “Hello from Javascript.” 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 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. [Comment Your Javascript Code] 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 a // you can make an in-line comment. An in-line comment means it’s at the end of a line of code. For instance, I can put var number = 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 in-line comment or I mean a multi-line comment. If we do a /* and I can put "this is a,” and then I can put "multi-line comment.” And I'm going to end with a */. So, it begins with a /* and ends with a */. 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 = 9 and you can see it will be in color again because it’s no longer commented out. [Data Types and Variables] 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 this 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 string. A symbol is an immutable primitive value that is unique. Now we'll tall more about those later. A 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 are often going to set data into a variable. A variable allows computers to store and manipulate data in a dynamic fashion. 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 keyword. Var stands for variable. And I can say myName. I can set this to anything. It can be any of the datatypes above. But it’s common to set something to a string. So, I can set my name to be “Beau.” Now later, you can set it to be something else. I can say myName = 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. There’s a way called "Let.” So, I can say let ourName = “freeCodeCamp”. And then the other thing would be const. So, I can do const Pi = 3,1004. Now, the difference between var, let, and const, a var is going to be able to be used throughout your whole program. Let will only be used within the scope of where you declared that. Now, we're going to be talking about let and const more later. So, I’m just giving you a brief overview of what they are now. Const is a variable that should never change. It can never change. So, like right up here, I declared myName, but then we changed it here. So, it started out to be Beau and we changed it to 8. 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. [Storing Values with Assignment Operator] There’s a difference between declaring variables and assigning variables. Here’s how you assign a variable. var a and then a semicolon. I didn’t mention this earlier, but you end 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 “var b” And then the equals sign is the assignment operator. It means that 2 is being assigned to b. We're not checking if b = 2. We're just assigning 2 to be. So, after that, we can actually assign other things. So, I can say a = 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 = a. So, I’ve now assigned the contents of a to b. And I’ll put the semicolon there. 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 7. So, right now we've assigned a to be 7. And so, when we console.log(a) it shows 7 down there. 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 see at first, a was null. And then now it’s 7. So, here is null. And then it’s 7 down here. So, you can check what variables are at various points in your program. [Initializing Variables w/ Assignment Operator] 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 = 9. So, the var a is declaring it. And the = 9 is initializing it with the assignment operator, which is the = sign. [Uninitialized Variables] 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. That’s going to be “I am a string”. And we always have to put it in quotation marks like that. So, you can see a + 1 is going to equal 6. 5 + 1 = 6. b = b + 5. That’s going to be 15. And then c is now going to say "I am a string”. [Case Sensitivity in Variables] Variable names and function names in Javascript are case sensitive. That means that capitalization matters. So, this declaration here is not the same as this assignment. Even though 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 camelCase. So, let me show you how we do that instead of StUdLyCapVar, it’s going to be studlyCapVar. So, the first letter is always going to be lowercase. Any time you have a new word or a new section of a word, you just capitalize the first letter. And so, we can change this. This one is correct. So, now we just go down here. studlyCapVar. And then we just do properCamelCase. And then titleCaseOver. So, now all of these should be defined. So, we declare them here. We assign them right here. And then this is not going to give us any errors. It’s going to behave exactly how we want it to behave. [Adding Numbers] Adding two numbers in Javascript is pretty straight forward. 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 20 right in the console. 10 + 10 is 20. [Subtracting Numbers] And subtraction is also what you would expect. We have the subtraction sign here. This says 45 – 0. We can also do 45 – 33. And then that would equal 12. So, the difference variable equals 12 now. [Multiplying Numbers] Multiplication in Javascript uses this * or a 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. [Dividing Numbers] You can divide in Javascript with this / symbol. So, this says 66/0. We can change this to 33. So, now 66/33 is 2. Quotient equals 2. [Incrementing Numbers] To increment a number means to add 1 to it. So, here we’re incrementing myVar by 1. 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 myVar++. myVar++. And now we have incremented myVar from 87 to 88. [Decrement Numbers] We learned about incrementing a number with ++. You can also decrement a number with --. That means subtracting one. So, right now, myVar is going to equal 10. 11-1 = 10. We can do the same thing with the -- operator. So, now, myVar still equals 10. [Decimal Numbers] 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,700. It can be anything. I’m going to make one called myDecimal. And then I’m going to store a 0,00009. Anything that has a decimal point in it, is a decimal point number. [Multiply Decimals] Multiplying decimal point or floating point numbers is the same as multiplying integers. So, we have 2,000 times 0,000. If I just change this to 2,500, now the answer to product is going to be 5. And I can console.log that so you can see. If I just put (product). And then if we do the browser here, you’ll see that the answer is five. [Divide Decimals] You can also divide decimal point numbers. So, in this case I’m going to change this to 4,400. So, now the answer to quotient is 2,200. Quotient equals 2,200. [Finding a Remainder] The remainder operator looks like a %. And it gives the remainder of the division of two numbers. So, for instance, if I want to find out the remainder of 11 divided by 3, I can do remainder = 11. And then I’m going to put the percent sign %, which is the remainder operator, 3. And 11 divided by 3 is 9. 11-9 is 2. So, the remainder is going to be 2. 11 remainder 3 is 2. The remainder operator is often used to determine if a number is even or odd. If you can divide a number by 2 and the remainder is 0, that means the number is even. [Compound Assignment with Augmented Addition] It’s common to want to add a number to a variable like this. See, A = A + 12. Well, A starts at 3, plus 12 is 15. So, we're just adding 12 to whatever A is. Here we're adding 9 to whatever B is. Here, we’re adding 7 to whatever C is. This is such a common pattern that there’s a shortcut to do the same thing. It’s the += operator. So, instead of A = A + 12, we can do A += 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 += 7. So, that’s just a shortcut. [Compound Assignment with Augmented Subtraction] Previously, we learned about +=. Well, -= does the same thing, but subtracting. So, this says A = A - 6. We started at 11, minus 6 is going to be 5. So, the new A is going to be 5. But we can shorten that. Instead of A = A - 6, we can do -=. This is just a shortcut that Javascript has that means the same thing. That means A = A - 6. But it’s shortened. Same here. So, we can do -= 15. C = C - 1. We can do C -= 1. So, it just subtracts the number from the original value and then assigns that new value to the variable. [Compound Assignment with Augmented Multiplication] Here we have A = A * 5. Well, we can do the same thing as before. We can shorten this to A *= 5. So, that means the same thing. Here, we can do A *= 3. And then C = C * 10. We can shorten this to C *= 10. And that’s another shortcut for Javascript. [Compound Assignment with Augmented Division] And there’s also a /=. So, A = A / 12. We can do A /=12. And here, we can just do /=4. Or /= 11. So, another way of just dividing the variable by a new number and assigning that answer to the variable. [Declare String Variables] We’ve already mentioned strings a little bit. But anytime you have some characters surrounded by quotation marks, they can either be single quotation marks, double quotation marks, or backticks. 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 myFirstName = “Beau”. And var myLastName = “Carnes”. So, that’s how you create a string in Javascript. [Escaping Literal Quotes in Strings] Sometimes your string contains the quote symbol. Now, normally the quotes identify the beginning and the ending of the string. But what if you assign like this? “I am a ‘double quoted’ string inside ‘double quotes.’” 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 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 \. So, if I put a \ before each of these quotation marks, Javascript no longer interprets as being the last character in the string. So, now you can see this is a full string. And then if I log this count console.log and I put (myStr), you’ll see that it’s not going to show the quotation marks. So, I mean it’s not going to show the / and the \. It shows the quotation marks without the \ because when we put \” Javascript knows that this should just mean a quotation mark. [Quoting Strings with Single Quotes] We talked about escaping a quote character like this, where you put a \ 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 just going to have ‘single quotes’. And now I can remove all of these escape characters from inside the string here. Okay, so now you can see that Javascript still knows that this is a string, even though it has these double quotes inside. An additional thing you can do is use backticks. So, if I put backticks 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. [Escape Sequences in Strings] We talked about escaping a double quote character by using the \ 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 \, 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 add a new line character, or a carriage return, a tab, a backspace, or a form feed, all with doing a slash and the corresponding letter here. So, let me show you an example. I’m going to put a var myString = and we're going to make a multiline string. So, we're going to have the “FirstLine.” And now, I’m going to put \n to add a second line. And then I’m going to put a tab. So, \t for the tab. And \\ to add a \. Now, it’s going to say SecondLine. Now, I’ll do a \ and then I’ll just say ThirdLine. And if I were able to logout all of that, you would see three different lines. And you would see the tab and then the backslash character. [Concatenating Strings with Plus Operator] You can concatenate strings with the + 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 ourStr, our 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, myStr = “This is the start.” And then I’m going to put a space before the end quotation mark because when these get concatenated together we want there to be a 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 (myStr) and let’s see. If I run this, we can see “This is the start. This is the end.” Just one long string. [Concatenating Strings with Plus Equals Operator] You can also concatenate strings using the += operator. You can see here in this example we have the ourStr = “I come first”. And then we have the ourString += “I come second.” So, remember, just like when you’re using numbers, += 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. myStr = “This is the first sentence.” And then I’ll put a space at the end because we're going to do a, myStr – and here I’ll do the += “This is the second sentence.” Now, if I just do a console.log here of (myStr) we should see that those sentences have gone together. “This is the first sentence. This is the second sentence.” Good. [Constructing Strings with Variables] You can concatenate strings together with variables. You can see here ourName = “freeCodeCamp”;. “Hello, our name is “ and then we add this variable, the ourName variable which is freeCodeCamp. “Hello, our name is freeCodeCamp. How are you?” Well, we're going to do the same thing down here. So, I’m going to do myName = “Beau”;. And then myStr 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. That’s supposed to be a + here. “ and I am well!” 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. I’ll just put (myStr) here. If I show that "My name is Beau and I am well!” Looks good. [Appending Variables to Strings] You can append variables to strings with this += operator. You can see where this variable anAdjective which is set to the word “awesome”. And then we have another variable "freeCodeCamp is “. And then we have the ourStr variable += anAdjective. So, now our string is going to equal “freeCodeCame is awesome!”. So, let me show you another example. We're going to say someAdjective = “worthwhile”. And now, I’m going to use the +=, so myStr += and then I can put someAdjective. So, now after we do the myStr += someAdjective, myStr is going to say “Learning to code is worthwhile.” [Find Length of String] Sometimes you want to find the length of a string. Javascript makes this easy. So, we have the firstName is set to “Ada”. But we just use the .length property to find the length. So, firstName.length. Remember, firsName is “Ada” here. And then .length will return an integer, a number that has the number of characters in the string. So, that will be three. So, let’s try this again. Here’s another example. lastNameLength = lastName. 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 (lastNameLength) and if I run that you'll see 8 because there are 8 characters in the word “Lovelace”. [Bracket Notation to Find First Character in String] 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 firstName = “Ada”. And right here we the have firstName. 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 1 like humans do. They start at 0 which is called "Zero-based Indexing.” So, with the number 0, that refers to first index of the string which would be the A. So, the A would be 0. D = 1. And then A = 2. So, this first letter of firstName, if we do firstName with the bracket notation with a zero, that’s going to = 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 do the bracket notation and put a zero here. If I wanted the second letter, the O, I would put a 1 here. So, if I console.log we can see what it came up with. So, console.log. (firstLetterOfLastName). And if we look in the console "L” because the first letter of the last name is L. [String Immutability] 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. myStr 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 myStr = and I’m just going to have to type in the whole thing which is “Hello World”. And now, it will change to the word “Hello World.” [Bracket Notation to Find Nth Character in String] You can use bracket notation to get any character position in a string. So, earlier we did the first position, but here’s how you get the second position. Remember, the 0 index. So, [1] is the second position. [0] is the first position. We can also get the third letter of the last name using the brackets. We’ll just put [2] in the brackets to get the third letter of the last name. [Bracket Notation to Find Last Character in String] 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 really here, in the brackets we have an expression to be evaluated. [firstName.length-1]. So, the length is 3. 3-1 is 2. The reason why we’re doing a -1 is because remember we count starting at 0. So .length-1 is going to be the last index of the name. So, you can do that same thing here to get the last letter of the last name, I can just do lastName[lastName.length - 1]. And that’s going to get the last letter of the last name which is the E right here. [Bracket Notation to Find Nth-to-Last Character in String] 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 length of the string. So, we have the bracket notation, [firstName.length - 3]. That’s going to get the third to last letter. So, we want the second to last letter. Into this variable here we do something similar. We just do [lastName.length]. And then we're going to subtract 2 to get the second to last character of the string. [Word Blanks] We’re going to use our knowledge of strings to build a Mad Libs style word game. In a Mad Lib 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. This also uses a function. Now, we haven’t talked about functions yet. I’m going to explain those more later. But for now just go with it because that’s not the point of this lesson for now. But this function called wordBlanks, 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 calling the function called wordBlanks. 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 = 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, it’ll be logged out onto this screen with this console.log. So, what I’m going to do here is do result +=. We're going to use the += 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 then we'll use the adjective myAdjective. In this case, the big. The big and then let’s put the noun. myNoun because adjectives are words that describe nouns. The big dog. And then we're going to say what this now is doing – the verb. myVerb. The big dog ran. And then where does 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 “ to the store “. And then we're going to add the final 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 myAdjective, myNoun, myVerb. 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, with no spaces. So, we're going to have to add some spaces in here also. Let’s do 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 pass in some different words. So, like for instance, if I copy this, I’m going to paste it. Instead of “dog” I will put for the noun “bike”. And an adjective I’ll put “slow”. And then for the verb, I’ll put “flew”. And the adverb I’ll put “slowly”. And now if we look in the console we have two sentences. The big dog ran to the store quickly. The slow bike flew to the store slowly. [Store Multiple Values with Arrays] Arrays allow you to store several pieces of data in one place. So, look at this example, ourArray. 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 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 also use arrays or floating numbers or really any sort of data type in your array. So, lets see another example. So, let’s do myArray = [“Quincy”]. And then for a number we’ll do 1 because Quincy is number 1. [Nested Arrays] When one of the elements in an array is another array, that’s called a nested array or a multidimensional array. You can see here’s the beginning of the array and here’s the end 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. [Accesses Array Data with Indexes] 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, ourArray. We have three elements. [50, 60, 70]. And these have the indexes [0, 1, 2]. So, with this ourArray with the bracket notation and the [0], that’s going to be index 1, which is going to equal 50. So, we can do the same thing here. myArray = [50, 60, 70]. So, let’s try to find the first element in that array. So, var myData = myArray. And then I’m going to do index [0]. I can do index [1], index [2]. And then if we console.log that, we can see for sure what that is. So, if I put (myData) and we can see in the console it’s 50. [Modify Array Data With Indexes] 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 [18, 64, 99]. And then we're going to use the array index of [1]. Now, [1] is going to be the second number. Remember, [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, [18, 64, 99]. So, let’s do myArray and then instead of doing the second digit, I’m going to do the first digit in then array, the first index which would be index [0]. And I will say = 45. So, now this array has been updated. So, if I do a console.log and then do (myArray], we'll see that the array is now [45, 64, 99]. [Access Multi-Dimensional Arrays With Indexes] 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 three-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, myArray, the first bracket is [0]. That’s going to get the first element in the array which will 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 8. Well, let’s see. I see an 8 right here. So, let’s figure out what this first number should be. Well, let's count. Zero, one, two. So, the third array would be index [2]. Now, we want to go zero, one – now we have to do index [1] to get the second number in the third array. So, let’s test to see if that equals 8. So, I’ll do a console.log and then do (myData) here. And we'll see if that equals 8. And it does. We did it. [Manipulate Arrays with push()] You can have pinned data to the end of an array with the push function. So, see, an array has been set up here, ourArray. [“Stimpson” "J” "cat”] And then we take ourArray 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 end of the original array, we’ve pushed this other array at the end. So, let’s try it again down here. We have myArray. And you can see we have each element in the array is another array. So, I am going to do myArray.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”, 3]. And now we've pushed this onto the array. [Manipulate Arrays with pop()] 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 parenthesis at the end of the word pop. So, the array starts with [1,2,3]. So, now we do this -- ourArray.pop() and it’s going to remove the last element which is the 3 and then it’s going to put it right into this variable here. So, now as you can see down here, removedFromOurArray now equals 3. And then ourArray is going to equal [1,2] because the 3 has been popped off. So, we can do the same thing here. So, removedFromMyArray = myArray.pop() and we can see what the array is going to equal now if I just do a console.log(myArray). And if you do this, we can see that the array only has the one item, the one array instead of the two arrays. [Manipulate Arrays with shift()] 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 “Stimpson” is being removed. After we shift off the first element the array is going to equal “J” "cat”. And the removedFromOurArray is going to equal “Stimpson”. So, let’s do another example down here. We're going to do a shift() again. So, I’m going to do = myArray.shift(). And now myArray is just going to equal [“Dog”, 3]. And the removedFromMyArray is going to equal [“John”, 23]. [Manipulate Arrays with unshift()] The unshift() function is similar to the push() array function. While push() adds an element to the end of the array, unshift() adds at element to the beginning of the array. So, let’s look through this example code. We have the array – [“Stimpson” "J” "cat”]. We're going to shift off the first element, remove the first element. So ourArray is [“J” "cat”]. 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” "cat”]. So, let’s try again. 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 myArray.unshift(). Now we're going to 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]]. [Shopping List] 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. Cereal – how many boxes? 3 boxes. We also need some milk. Let’s get two cartons of milk. 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. [Write Reusable Code with functions] 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 parenthesis here. And you can pass information into the parenthesis. 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 parenthesis 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 "Heyya, World. Heyya, World. Heyya, World” in the console. Since we have run the function three times, we see the words “Heyya, 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 “Heyya, World.” And now I can call the function down here, just like this – reusableFunction. Oh, forgot to put the parenthesis. That’s important. Now you see "Heyya, World” and “Hi World” in the console. [Passing Values to Functions with Arguments] Parameters are variables that act as place holders for the values that are to be input to a function when it is called. So, we have defined a function right here called ourFunctionWithargs. And inside the parenthesis we see the letters (a, b). Now, these could be any name. We could call these anything, not just (a,b). They can 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,b) in the parenthesis, we're actually passing the values (10, 5). 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-b). Well, that’s going to be 10-5 because the numbers 10 and 5 have been passed into the function. And that’s going to output 5. So, I’m going to create a function that’s very similar to that that function. This one is going to be called functionWithArgs. And it’s also going to accept an (a, b), but we could call it anything we want. And inside instead of subtracting a-b, we're going to do (a+b). Now, I’m just going to call this function functionWithArgs and I’ll pass in (10, 5) and let’s see what that looks like in the console. So, first it outputted 5 for this one. And then it output 10 for this one. [Global Scope and Functions] Scope refers to the visibility of variables. Variables which are defined outside of a function block have global scope. Global scope means they can be seen everywhere in your Javascript code. For instance, I’m going to declare a variable right here called myGlobal. 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 fun2. We can see that we reference it here and here. And we're going to be able to see it. Now, this is an if statement. Which we will talk more about later. But we're checking if the type of myGlobal 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 this function can access the myGlobal variable, it will run what’s in this if statement where we just add to this output variable, myGlobal. And then we put the value of myGlobal which is 10. Now, here’s another example where we're going to see if the type of oopsGlobal equal “undefined”. Well, we're going to set that here. So, it is possible to set a variable without using the var keyword. So, I’m going to set this to oopsGlobal = 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 have 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 oopsGlobal would equal “undefined”. And then we would never have this line in the output. However, since we did not put the var keyword, oopsGlobal = 5 and this will be added to the output – oopsGlobal and then the colon 5. So, when we console.log the output it’s going to say myGlobal 10, oopsGlobal 5. Now actually it’s not going to say that because this is in Scrimba. And in Scrimba 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 myGlobal 10, oopsGlobal 5. If this was a little complicated, don’t worry about that because a lot of these concepts we’ll be going over again later with additional examples. [Local Scope and Functions] 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, myVar = 5. So, we've declared this variable inside a function. So, this variable, myVar is only visible inside the function. So, it says console.log(myVar). It should console.log the 5. So, we're going to call the function here. And it’s going to console.log myVar. 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 myVar. And so, let’s see what happens. You can see in the console that first there’s a 5 because it console.log within the function, then there’s an error because it tried to access myVar outside of the function. So, really, we just need to delete this where we try to access the variable outside of the function. And now there is no error. [Global vs Local Scope in Functions] It is possible to have both local and global variables with the same name. When you do this, the local variable takes precedent over the global variable. Let me show you an example. Here we have a function called myOutfit that’s going to return outerWear. 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 myOutfit function, the myOutfit function is going to return outerWear which is the word “T-Shirt”. So, let’s just check the console and you can see, yep "T-Shirt” is there. However, let’s change this up a bit. So, you have some space here because I’m going to put var outerWear = “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 interesting thing about this, if I do a console.log. And I console.log the outerWear 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. [Return a Value from a Function with Return] You can return a value from a function with this return statement. So, we have this function here. And we’re passing a number into it – the num. And then it’s going to return whatever is after the return keyword. In this case, num-7. So, here we're going to console.log the function. And it returns the result of -7, is this 10-7, which is 3. So, it’s going to console.log the number 3. If we look in the console, yep, it console.log the number 3 because the function returns 3. Let’s try creating another one. This function is going to be called timesFive. Again, we'll pass in a number. And it’s just going to return something. It’s going to return the num * 5. And then just like before, we can test it using a console.log (timesFive) and we'll pass in the number 5 here. And if I run this, we'll see that it retuns the number 25. [Understanding Undefined Value Returned from a Function] Functions can have return statements, but they don’t have to. In this case, this function adds 3 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 is going to be called addFive(). And this time we'll just do sum = sum+5. Or we can shorten this to use the +=. 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. [Assignment with a Returned Value] It’s simple to assign a returned value to a variable. See right here we have the function change. And you pass in 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 processedArg. 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 processedArg. And then I’ll just pass in the number 7 here. And now processed equals the result of this mathematical expression. [Stand in Line] In computer science a cue is an abstract data structure where items are kept in order. New items can be added to the back of the cue and old items are taken off from the front of the cue. We're going to simulate that right now, some of the functionality of a cue using this nextInLine function. So, the purpose of this is to show that in this nextInLine 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 item to this array it should come after at the end. So, it should come after 5. And then it should return the first item on the list. In this case, it’s 1. So, you see, we had 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 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, nextInLine passed in the testArr and 6. So, we're calling this function nextInLine. We're passing in this testArr here. And the number 6. We want the number 6 to be added to the end of the array. So, we'll just do arr.push(). And then I’ll put in (num). Just like that. Oh, actually, it’s (item). So, what we did, we took this array that was passed in here which is in this case, testArr. And we push the time that was passed in. And in this case here, it’s item 6. Now we want to return the first item on the list. We want to remove and return this item. So, that we console.log here it should show the number 1. So, instead of returning item, I’m going to return arr.shift(). That’s what shift does. Shift moves the first item and 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 1 and after it is [2,3,4,5,6]. We did it. [Boolean Values] Booleans are another datatype in Javascript. There are only two values, true or false. They’re basically little on/off switches where true is on and false is off. They don’t use quotation marks around the Boolean. See, it just says return false. So, this is a function here. It should be indented, where it’s 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 function returns and we'll be talking more about that later. [Use Conditional Logic with If Statements] 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 parenthesis. So, here is a full if statement right here. And there’s always parenthesis after the keyword if. And here’s the condition. So, if the stuff inside these parenthesis 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 isItTrue 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 another example just like this. We have another function that hasn’t been filled out yet, trueOrFalse. And there’s a variable that’s passed in (wasThatTrue). So, we'll say if – and then the parenthesis (wasThatTrue). 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 it’s not true, then we'll get to the second return statement in the function. And we'll return a different string. We'll return “No, that was false”. I’ll 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. So we can console.log 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 to true and this code is run right here. [Comparison with the Equality Operator] There are many comparison 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) = 12. Now, to check if it equals 12, we're going to have to use the ==. That is the equality operator and we'll say if (val == 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 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 testEqual 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. [Comparison with the Strict Equality Operator] 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 3 equals 3 with the strict equality operator. So, the difference is that the equality operator, the double equals 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 3 === 3. But the 3 === ‘3’ with the string on the side is going to evaluate to false. Both of these would be true if we were using the double equals sign == because the string would be converted to a number and it would be equal to true. But with the === it does not get converted to a number, so it would be evaluated to false – this second one with the three equal signs. So-and-so, here, we're just going to use it right in this if statement. And do === 7. So, now we can pass in the number 7 and it’s going to evaluate to true. But if we pass in a string 7, it will evaluate to false. [Practice Comparing Different Values] 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 console it says "Equal” because it’s checking if the number 10 and the string “10” are equal. So, if a = b, the number 10 equals a strict number 10, return “Equal”. Since we're using the equality operator 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 it’s not, so we get not equal. [Comparison with the Inequality Operator] 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, I’m 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 passed in 10 into the function here. And 10 is not equal to 99, so we get “Not Equal”. [Comparison with the Strict Inequality Operator] The strict inequality operator is basically the opposite of the strict equality operator. Now, 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 were checking if the number 3 does not equal the string 3, 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. [Comparisons with the Logical And Operator] 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. 10 or under, because we passed in 10. [Comparison with the Greater Than Or Equal To Operator] We can also use the greater than or equal to operator. So, we'll finish this function by using greater than or equal to. It’s just a >=. 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. [Comparisons with the Less Than Operator] 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 up here we're checking if a value is less than 55. So, here, it’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. [Comparisons with the Less Than Or Equal To Operator] 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. 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 “Small Than or Equal to 12”. The number 10 we passed in. [Comparisons with the Logical And Operator] Sometimes you want to check if 2 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, here we have a nested if statement. So, it’s going to check if it’s less than equal to 50 and if it’s more than 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 ampersands, 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 25, then we're going to return “Yes.” So, both this statement and this statement have to be true to get inside this if statement here. [Comparisons with the Logical Or Operator] 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 “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 more than 20 here. So, now, we're checking if the value is less than 10 or if the value is more than 20. Either way, we're going to return “Outside”. And if it’s not true, we'll return “Inside”. [Else Statements] 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 else 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 5, the result is bigger than 5. If the value is less or equal to 5, the result is 5 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 5. The result is going to be “Bigger than 5”. Else, if it’s not more than 5, we'll return “5 or Smaller”. [Else If Statements] 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 5, return smaller than 5, or else we're going to return 5 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 of this stuff. So, else if value is less than 5, 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 in right in there. So now, instead of using multiple if statements, we have the if and then we have the else if, and then we have the else. [Logical Order in If Else Statements] 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 5, and return less than 5. Well, if we look at this example and we pass in the number 7. If I run this, you’ll see it’s going to say "Less than 10” which is what we want. However, if we put 3 it’s still just going to say “Less than 10”. Really, we want this to say "Less than 5” because it is actually less than 5. However, this is in the wrong order. So, what we need to do is change the order. So, this should be 5. This should be 5. 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 and conditions. So, that’s why it’s important to think about the order. So, if we run this now, yeah "Less than 5”. That’s what we want. [Chaining If Else Statements] You can also chain if and else if statements. So, I’m going to complete the following challenge here. Write chained if/else if statements to fulfill the following conditions. So, we have these conditions. If the number is less than 5, 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 is written exactly how we want it to be written. I’ll just paste it here. And I’m going to just add the if and else statements. So, it’s going to be if – and then we put this in parenthesis because the condition is always in paranthesis. If number is less than 5, 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. First of all, also I need to put the condition in these parenthesis. 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, the number is less than 15. Put that in there. We always need the curly braces to show what’s going to happen in the if statement. So, I’m just cutting and pasting this text again. We have an else if. And then we have this here. And we have return “Large”. Another – actually, the final thing is just going to be else. We don’t even need an else if with this statement at the end. 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, for test 7, we can actually console.log that. Console.log. And see what it returns for 7. We can try a few different things. Oh, we have an error here. Oh, forgot to – I put this parenthesis the wrong way. Let’s try that again. “Small” but if this is 20, it should be “Huge”. And if it’s 19, which would be less than 20, we should see “Large”. Yep, that worked. [Golf Code] 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 strokes are 1, then you get “Hole-in-one!”. If the stroke is less than or equal to par-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) == that’s the equality operator. We don’t want to use a single equals sign because that would be the assignment operator. If it equals 1, then we can return. And we can see down here, we're going to return “Hole-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 [0]. And then we can do an else if. Else if – and then we can put the condition, (strokes). I have to spell strokes right. Strokes. And then we can just actually copy this right from here. Less than or equal to par-2. And then we are going to return name and this will be the index[1] which is an “Eagle”. At this point, I can do some copy and pasting. I’m going to copy this whole thing because a lot of the rest of this will be else if. So, else if strokes is – this time it’s going to be equal to par-1. And we're going to return “Birdie” which is array index[2]. 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? Zero. One. Two. Three. It’s going to be the word par up. Keep just like this. Now it’s going to be par+1. And we'll change this to [4]. Now it’s going to be par+2. And we’ll change this to [5] which is going to be the double bogie. And finally, if strokes is – change this to more than or equal to par+3 that means you did very poorly so you should just go home. So, it’s going to be name index[6]. And we don’t need this anymore. So, now we're going to do some tests here. I’m going to do a console.log. And we're going to pass in the function that we're calling. So, in this case, the par is 5 and the strokes are 4. 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. That’s why it’s sometimes better to check before you go through the whole thing. You can test things as you go. But let’s do that again. Yep "Birdie”. And if I type in 2 here "Eagle”. If I type in 8, it’s probably going to tell us to go Home. “Go Home!” Yep. We just completed this challenge. [Switch Statements] Instead of using chained else if statements you can use a switch statement. A switch statement tests 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 val and sets the answer to the following conditions. If we pass in 1, the answer should be “alpha”. If we pass in 2, 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 the keyword here. And we're testing the val that’s passed into this function. So, it starts off kind of like an if statement. And right now – 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 1. So, here we're saying if the case of val is 1, if val = 1 and it’s using the strict equality operator, so it’s like the ===, it’s going to make sure that the type of the variable are the same. So, a string ‘1’ and a number 1 will not be equal. But if the case is 1, then we're going to set answer to = “alpha”. And then we're 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 and doesn’t evaluate anything else in the switch statement So, we're also going to have case 2. And one thing I forgot, that we're going to indent that so it’s easier to see the different cases. And case 2, the answer is going to equal to “beta”. And then we also 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 1 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 to the next case statement. 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 3. We’ll just do some copying and pasting here. And we're going to have 4 cases so I’ll just do the rest of the pasting here. So, we’ll have 3 and 4. “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 tests. 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 2 should be “beta”. 3 should be “gamma”. Good. And we'll just assume 4 is correct so we're done. [Default Option in Switch Statements] Now we'll talk to you about the default option in a switch statement. The 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 pass in 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 sent to “apple”. B, answer set to “birds”. 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 2 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 the 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 = “stuff”. Again, we're going to have the break. But now, whenever we pass in something that’s not a, b, or c, it’s going to return “stuff”. So, we can pass in 5. It’s going to return “stuff”. But if I go back to passing in c, one of the things we have a case for, it’ll return “cat”. And that’s the switch statement. [Multiple Identical Options in Switch Statements] Sometimes you want a switch statement where multiple inputs give the same output. Well, that’s easy enough by omitting 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 then this case we want the case of 1, 2, and 3 all to return the answer of low. So, I can do it like this, case 1 – and I can go straight into case 2. And then I can go straight into case 3. And since I don’t have any break statement between these cases, it will just keep going to the next one automatically. And now, I’m going to say that the answer is going 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 6. 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 4, 5, 6. We're going to do the same thing with 7, 8, 9. 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 4, 5, 6. And we'll have 7, 8, 9. And we're going to have “Mid” and “High”. So, if the case is 1, 2, or 3 – like for instance, if it’s 1, it’s going to pass through 2 and 3 to get low. And then it’s going to break about it. If it’s 4, 5, or 6, it’s going to pass through to get to “Mid” and then it’s going to break out 7, 8, and 9. It’s going to pass through to the “High” and break out. So, let’s test this out and see. Since we're passing in the number 1 here it’s going to be “Low”. But if we pass in 5, we should get “Mid.” And if it’s 7, 8, or 9, we should get “High”. [Replacing If Else Chains with Switch] 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 with open curly bracket, and we'll have to make sure to have an end curly bracket at the end. So, for a 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 1 we’ll set the answer to “There is no 1”. We need a break up here. For case 99 the answer is “Missed me by this much!”. And then we need a break. Now we have for case 7 – 7, 8, 9, and break. And now we just changed that chain of else if statements into a switch statement. [Returning Boolean Values from Functions] 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 the all comparison operators return a Boolean true or false value. So, instead of using this if statement here we can just – 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. It is less than 15. It’s true. But if we put a 20 here then it’s false. [Returning Early Pattern from Functions] 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 function right here, we return at the very end of the function, 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're going to modify this function so that if a or b are less than 0 the function will immediately exit with the value of “undefined”. So, let’s do that. We're going to set an if statement. If a is less than 0, or – that’s two pipes. B is less than 0 then we're going to return undefined. So, we can do a test here, console.log. 8. 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. [Counting Cards] We are going to create a blackjack card counting function. So, 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 a 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 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 two things. We're not going to return “Change Me”. We're 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, 6, we are going to increment the count variable. So, we're going to do it like this – case 2. I’m going to do some copying and pasting. If the case is 2, 3, 4, 5, 6, we'll just have to change these values. 3, 4, 5, 6. 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 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 6, we are going to take the count value. And if we just do ++, it increments it by 1. And then we're going to break. Now, if the case is 7, 8, 9 – so let’s paste in three of these. We’ll do 7, 8, 9. Actually, we're going to do nothing. The count is not going to change at all. So, we don’t even need case 7, 8, or 9. So, instead of doing 7, 8, 9, we just need to check in the case that something is 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 "Jack”. “Queen”. “King”. or “Ace”. In this case, we're going to decrement the count. So, we're going to do count --. So, that’s the same as count = count -1. 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 variable. Now, this is a variable we haven’t created yet. Normally, this would be the perfect time to use the turn area operator, but we haven’t learn that yet and we're not going to learn that for a few more lessons so I won’t use that now. We are going to set what that hold bet value is. First, we’ll create the holdbet variable. Variable holdbet. And we’ll set it to ‘Hold’. However, if (count) is more than 0, then we can set holdbet to equal ‘Bet’. So, now this should work. Let’s test it out and see if we’ve made any mistakes yet. holtbet is not defined. We have it right here. Oh, we spelled that wrong. So, instead of holtbet that should be holdbet. 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. [Build Javascript Objects] Objects! Objects are similar to arrays except that instead of using indexes to access data, you use properties. So, here’s an object called ourDog. 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, 4. Tails, there’s only one tail on this dog. And “friends” are “everything”. Now you can see that the properties can be strings. They can be numbers. They can be arrays. They can be any datatype 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 going to have “legs”. Unfortunately, our dog has had an accident. He only has 3 legs. But to make up for only having three legs, he does have 2 tails. And for “friends”, another unfortunate thing, it’s an empty array. He has no friends. Okay. We’ve now created our own object. [Accessing Object Properties with Dot Notation] There are two main ways to access a property on an object. The first I will talk about is dot notation. So, we have this testObj. And we have “hat” “shirt” and “shoes”. And we want to find out the value of these properties. So, right here the hatvalue we're going to set to testObj. Now here’s where we use the dot notation. We just put a dot or a period and then I put the name of the property, .hat. And then for the shirt value, I will do .shirt. So, see this word right here is just a word here. So, the value of hatValue, testObject.hat is now going to be “ballcap”. And the value of the shirtValue is going to be “jersey” [Accessing Object Properties with Bracket Notation] 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 these bracket notation. So, the entreeValue we're going to do testObj. 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. I’ll use a single quote this time instead of a double quote to show that each of those will work. ‘the drink’. And then we need the closing brackets here. So now, entreeValue is set to equal hamburger. And drinkValue is set to equal “water”. [Accessing Object Properties with Variables] Bracket notation can also be used to look up object properties using variables. So, here we have this testObj. 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 testObj, 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 [playerNumber] in here. And now player is set to the word, the string "Montana”. And we use these variable to look up the object property. [Updating Object Properties] We can use dot notation to update object properties. Here you can see an object called ourDog. It has a name, legs, tails, friends. And the name is “Camper”. However, here we used dot notation ourDog.name. And use the assignment operator, the equals sign, to set the name to “Happy Camper”. So, if we do console.log on ourDog.name it would no longer be “Camper” it would be “Happy Camper”. Well, we have another dog here with the name of “Coder”. But we want to change the name to “Happy Coder”. So, that’s what I’ll do right here. So, myDog.name = “Happy Coder”. So, just like above, we use dot notation to set the object property to a new value. [Add New Properties to an Object] 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, ourDog. And there’s four properties here. But down here we're adding a new property. ourDog.bark = “bow-wow”. So, it had four properties but now it has 5 properties as the property bark as well. Now down here we'll add a property to the myDog object. So, we can do myDog. And then here I’m going to use bracket notation instead of dot notation. ‘bark’. I’m going to set that to equal “woof”. And because he’s yelling it we’ll have an exclamation point. And that’s how you add properties to objects. [Delete Properties From an Object] It’s simple to delete a property from an object. Our ourDog object has all these properties. And with the delete keyword, delete ourDog.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 myDog.tails. So, now the myDog object no longer has a tails property. [Using Objects for Lookups] Objects can be thought of as a key value storage like a dictionary. You can use an object too lookup 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 “Adams”. If you pass in “bravo” it returns “Boston”. We can replace this switch statement with an object and use the object for lookups instead of the switch statement. Let me show you how that’s down. 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 “Adams”. 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 = lookup. And bracket notation we put the value that was passed in. And then I forgot one thing which was the equals sign here because lookup 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 going to get “Chicago”. If we do “foxtrot” the result will be “frank”. So, it works. [Testing Objects for Properties] You can check if an object has a property with the hasown 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 we’ll return “Not found”. So, let me show you how that’s going to work. We’ll do myObj – that’s the object up above. .hasOwnProperty. And then we pass in the property we're going to check which is checkProp. 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 (myObj.hasOwnProperty(checkProp)). But if that’s true, we're going to return myObj and then use bracket notation [checkProp]. So, we're going to return the value of that property. Else we're going 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.” Load that "Not Found”. Okay, it works. [Manipulating Complex Objects] 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 myMusic. We can see it’s an array because we have the open bracket and closed 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 an 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 “Beau Carnes”. And then we have a “title”. The title will be “Cereal Man”. “release_year” will be “2003”. And for “formats” this is going to be an array, just like above. So, we can have any format. I’m going to put “YouTube video”. And now we've created a second object in our myMusic array. And each object holds data and a property which is the key value format. This is very similar to JSON which we will talk more about later. [Accessing Nested Objects] Here we have an object with other objects nested inside that. So, in order to access sub-properties of an object you can chain together the dot or bracket notation. So, I’m trying to get the gloveBoxContents. So, I’m going to take away this undefined here and I’ll do a myStorage.car.inside. And then now the next thing "car” “inside” and 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're going to console.log. So, let’s see if we get the contents here. Yeah "maps”. It worked. [Accessing Nested Arrays] 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 of 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 dot 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 myPlants. And the trees are the second element in the myPlants array, which is index [1]. Now we need to get the list. So, the list of trees here, so I’m going to do .list. And since .list is an array, I can use the bracket notation to get the second list element which again is array index [1]. So, if we run this it’s going to console.log and we see “pine”. That’s the second tree here. [Record Collection] This is a coding challenge we're going to do. We're given this object here which is a record collection. Each record has an ID and then also has different pieces of information about the record. They don’t all have the same information. But see, we have “album” “artist” “tracks” "album” “artist” “tracks”. This just say “artist” “tracks” and this just has album here. And we are supposed to create this updateRecords 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 Prince. 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 really here, 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. So, we're just updating this function here. This update records function. Okay, so let’s get to this. So we'll do if (value)=== 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], that’s the collection here. If we pass in the ID 1248, it’ll go to there. The property, if we pass in album for the property it would go to here. And then it would just delete that whole thing if our value is an 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're going to push onto the end of the array. So, let’s do an else if. Else if (prop) === “tracks”), then we just have to push onto 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][prop] So if prop = 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 going to equal itself. Or – if the or operator is going to equal an empty array. So, if this already exists 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 in to the function onto the end of the array. Okay, there’s only one last condition which is the kind of the default condition. Else. So, if the value isn’t blank and the property 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]=value. Okay. Let’s 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.log so we can see the output there. And if I run that – oh, let me open up the console so we can really see it. So, let’s see what we changed. Go to 5439 and we set the artist which didn’t previously exist to “ABBA”. So, let’s look down here. In the console, 5439 and the artist is “ABBA”. 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, updateRecords. And I’m going to pass in something. I’ll pass in – 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. We mainly care that 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. [Iterate with While Loops] Loops allow you to run 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 digit 0 through 4 onto this array. Here’s how it’s going to work. while is the while loop. while i is less than 5. And we're going to do something while that’s true. First, we have to set what i starts off at. So, var i = 0. So, while i is less than 5, we'll do myArray.push(i). Just push it onto the array. And to make sure this loop eventually ends, I’ll have to do i++ which increments i. So, then I will test this out by doing console.log. And I’m going to console.log the myArray. So, let’s see if this works. I’ll run this and check the console. [0, 1, 2, 3, 4]. The while loop worked. Every time it went through this five different times and pushed 0, 1, 2, 3 and 4 onto the loop. [Iterate with For Loops] 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 and they’re separated 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 0. 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 5 we'll 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 1. 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 5. So, we'll start with 4. Now, we're going to initialize i to equal 1. We're starting with 1 instead of 0 this time. And we're going to do i is less than 6. So while i is less than 6 or until i is more than 6, 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 we have before. myArray.push(i). So, the final thing we will do is test this. I will do console.log and put myArray inside here. And I’ll just load this and see what we see in the console. [1, 2, 3, 4, 5]. 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 i so it pushed a larger number onto the array. [Iterate Odd Numbers with a For Loop] 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 0. And then we are going to run the loop until i is less than 10. And finally, our increment, instead of incrementing i by 1, we're incrementing i by 2. 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 = 1. We’ll start at 1. While i is less than 10. I can use 10 again. I’m going to do i +=2. So, we're still going to count by 2s, but since we're starting at 1 instead of 0 this should give us the odd numbers. So, let’s see what’s going to be inside our loop. myArray.push and I’ll just put i there. So, let’s log this out and see if we did it right. console.log(myarray). And I’ll run that. [1, 3, 5, 7, 9]. It worked. [Count Backwards with a For Loop] 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 0. So, we're going to iterate through this loop while i is more than 0. 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 2. i -= 2 means i=i-2. So, we're going to continue pushing the lower and lower numbers onto the array until i is less than 0. So, let’s log this out and see what ourArray becomes. You can see [10, 8, 6, 4, 2]. Well, I’m going to write another where we’re going to push the odd numbers from 9 through 1 to myArray. So, another for loop. And I’m going to do var i = 9 because we want to start at 9. Now we’ll still do i is more than 0. So while i is more than 0 we're going to keep going through this array. And we'll do i – and everything else is really the same. -= 2. And this is going to get all the odd numbers onto the array. So, we just have to do myArray.push and then push on the i there. Now we'll just console.log so we can see what it ended up as. myArray. And I’ll run the code. [9, 7, 5, 3, 1] We did it. [Iterate Through an Array with a For Loop] 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, ourArr = [9, 10, 11, 12]. So, we are going to start at 0. But now instead of going to a specific number of iterations, we are going to the OurArr.length. So, the length is 4 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 at what we're doing inside the array. We're going doing ourTotal that starts off at 0 up here. And we’re doing +=. That means we're going to do ourTotal = ourTotal plus something else. So, we're going to keep adding to the total whatever is in the array at that index. So, ourArr[i]. So, it starts at 0. And then it goes 1, 2, 3 until it gets to 4 which is the length of the array and it doesn’t even run the iteration at 4. And there is no index[4] 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 for (var i = 0). And then we’ll do i is less than myArr.length. And i++. So, just like before. For each element in myArr we're going to do a total += myArr index [i]. So, we have to initialize the total variable right up here. So, we'll do a var total = 0. And then at the end 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. [Nesting For Loops] If you have a multidimensional or nested array, you can use nested for loops to access all the array elements. So, for instance, we have this multiple all function. It’s defined up here, but we're calling it here and we're passing in this multidimensional array. Which is basically an array with the 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 in array with their own set of elements. So, we are going to use nested for loops within this multiply all function to multiply every number in these nested arrays here. So, let’s get started. We're going to start with a for loop. And it’s going to look just like the other for loops that we started. i = 0. We’re going to initialize i to 0. And then we're going to say while i is less than arr.length. And then we're just going to increment i at the end of each iteration. Now, arr.length, that’s going to start off as 3 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 3. But now, we're going to go inside this for loop and create another for loop. So, we're going to do var j = 0. 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 a j. while j is less than – now this is where it gets a little tricky. We're going to do while a is less than arr index[i].length. Also, we're going to increment j here. So, this is going to change. So, the first iteration of this outer for loop, we're looking at the length of this array. Then we're 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 *= which is just going to multiply everything together. And we're going to do arr[i][j]. So, the i references the outer array and the j references the inner array within 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 5040. [Iterate with Do…While Loops] 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 = 10. So, while i is less than 5, well, i is not less than 5 so it’ 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 myArray started as this empty array. So, you were logging the i in myArray. 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. [Profile Lookup] This is a coding challenge. We have this array of objects in our contacts list. And you’ll see each object is one of our contacts. What the 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 lookUpProfile function where we pass in a name. This is a first name. And the property. and it’s going to return the value of that property. For instance, if we pass in the name “Kristian” here and we pass in the property of “number” it 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 (var i = 0) 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].firstName === The name that was passed in. So, we're checking each item to see if it was the 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”. If it is in the array we're going to go 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’s 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 contacts[i][prop] or if it doesn’t exist, we're going to return “No such property”. And just so you know, there would be a way to do this without using this or operator as long as that 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 lookUpProfile. We're passing in “Akira” and we're trying to find the “likes”. And we're console.logging the data. And “Pizza” "Coding” "Brownie Points”. So, what if we passed in something else? If we passed in “Shirlock”. Pass in “lastName”. “No such contact.” Well, that’s working because I spelled “Sherlock” wrong. This is E. So, this is 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. [Generate Random Fractions] 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 just says randomFraction. And it’s returning 0 currently. But we're going to use the math.random function. And you well see that when I run this we have 0,2003813741 and so on. So, it’s always going to be a number between 0 and it could be 0. Between 0 and 1, but it could not be 1. [Generate Random Whole Numbers] 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() * 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 1. It can be 0, but it can ever be quite 1. So, when we multiply it by 20 we’re going to get a number between 0 and 20, but not including 20. And 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 0 and 9. 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 parenthesis because we're passing that in to that function. And it’s Math.random * 10. And that’s going to give us a random number between 0 and 9. So, if I reload this I can see. Every time I load it, it’s a different random number. [Generate Random Whole Numbers within a Range] You can also generate random whole numbers within a range. So, look at this function here, ourRandomRange. 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 maximum or min number + 1. 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 practiced, I’m going to rewrite it down here. So, we have the random range. And instead of ourMin and ourMax, we have myMin and myMax. However, the equation is going to be the same. So, we have Math.floor. You can take a chance to actually just look over the equation and see if you can understand how it works. myMax minus myMin. And then we just have to do + 1. And then this whole thing is going to be + myMin. So, we already have this example test set up down here. randomRange between 5 and 15 and we're going to log it out here. So, let’s try that. See, every number is between 5 and 15 whenever I run it. [Use the parseInt Function] Another useful function is the parseInt 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 in NaN for Not a Number. So, let me show you how it works. From this convertToInteger 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 parseInt. 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 “56” but it’s going to return it as a number and integer. [Use the parseInt Function with a Radix] The parseInt function can also be used with a radix. The radix specifies the base of the number in the string. Such as base 2 or base 7 or base 8. A base 2 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 parseInt. I’ll pass in the string as before, but now we'll have a second argument after the comma which is going to be the number 2. So, instead of the default of base 10 we'll be passing it as base 2. So, the computer knows that this is a binary number. [Use the Conditional (Ternary) Operator] I love the ternary operator. It’s like a one line 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 if else statement like this into something using the ternary operator. So, here we have 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 ternary operator. So now it’s just going to say return a === 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 going to be honest. You would never write a line like this in real life because you could just write return a === b. And this line is actually going to do the same thing as this line. However, I just want to give you a simple example of using the ternary operator. [Use Multiple Conditional (Ternary) Operators] One of the great things about conditional or ternary 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 checkSign. And it’s going to return the string “Positive” if this number is positive "Negative” if the number is negative, or 0. 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 0. And then we'll use the ternary 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 0 we'll do something else. Here is where we're going to have another ternary operator. We're going to check if num is less than 0. So, if the number is less than 0, well, if that’s true, we have to have the question mark for the ternary 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 checkSign. 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 0 it’s going to return “zero”. Now you’ll see that after this colon we have an entire ternary operator. So, if this is true we just return “positive”. If it’s false, then we do everything here which is another ternary operator where it checks if this is true. And if that’s true, we return “negative”. And if it’s false, it would return “zero”. [Differences Between the var and let Keywords] 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 const do that is 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. You have var catName = “Quincy”. And then down here, var catName = “Beau”. And if I just run this code you’ll see that nothing is happening. It’s just allowing us to set the catName 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 “catName”. 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 don’t use the word let here we could just set the catName variable. And now we're 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 the 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 “use 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, let, or const. [Compare Scopes of the var and let Keywords] 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 checkScope function and we're calling it down here. And it’s setting i with a var here, the var keyword, to “function scope”. Then we're setting it to “Block scope” in here. And you can see it’s console.logging “Block scope i is: “. And it says “Block scope”. And when we get down here "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. Now, a block is just anything inside these squiggly braces here. So, with an 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. 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 is going to happen? Well, let’s run it 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 this 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 it 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 want it to be defined in. But for now I’ll uncomment this out. [Declare a Read-Only Variable with the const Keyword] 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 printManyTimes. And it’s going to log out this sentence. And the sentence is up here. var sentence is 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 “ is amazing!”. So, if we run that it should work. It prints freeCodeCamp 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 cannot 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 away 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 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. freeCodeCamp is cool! many times. We can no longer say that freeCodeCamp is awesome, even though we know it actually is. [Mutate an Array Declared with const] While you cannot reassign a variable declare 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 declare 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 [0]. I’ll assign to the 2. Index [1], I’ll assign that to 5. And then index [2] I’ll assign that to 7. 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, [2, 5, 7]. [Prevent Object Mutation] 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, a math constant with the Pi in it. This is an object. And right now this can still be changed. So, if we look down here, this is a try catch block. We'll talk about try 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. 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, we're going to return the MATH_CONSTANTS.PI. And down here we are putting it into a variable called PI. So, if we run this you’ll see that we console.log PI and it’s 99. 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 going to do object.freeze. And in parenthesis 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. So, we had an error. And we can see here that PI stays the same at 3,1004. So whenever you have an object and you don’t want any of the items in the object to change, use object.freeze. [Use Arrow Functions to Write Concise Anonymous Functions] 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. [Write Arrow Functions with Parameters] 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 passed in. So, first we'll take off the function keyword. We're going to leave these parenthesis 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 in parenthesis. 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 concatenate the two arrays that are passed in in this example. And then for good measure we'll change this to const. [Write Higher Order Arrow Functions] 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 want it to compute the square of only the positive integers in the array. So, it’s passed 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 functions that I’m passing in to filter and map. This line is going to be a lot more succinct because of the arrow functions. So, ,we have the squaredIntegers is going to be the arr. And we're going to filter this. So, .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. We're starting it just like this. Now before I showed you that you passed an arguments in parenthesis for an arrow function. But if you only have a single argument like this, the number argument, you don’t need parenthesis 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.isInteger. And then we will pass in the number. And number is more than 0. 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 0 and also integers. So, that will be 4, 42, and 6. But after we get that new array we want to get t he 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 for 42, 6. x means for every element in the array this is what we're going to do to it. x * x because it’s going to be squared. Again, the main point of the 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, 1764, 36]. [Write Higher Order Arrow Functions] 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, 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 5 and 2 to increment by 2. Or you can just pass in the one argument, the 5 if you want to increment by 1. So, here are the numbers we're passing in. A number and a value. So, we just have to put value = 1. So now if a value isn’t passed in, it will be set to 1 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 7 for this first one and 6 for the second. [Use the Rest Operator with Function Parameters] 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 converting these x, y, z into an array called args. And then it’s reducing them. So, it’s summing them all up here and then returning the results. So, right now if we just run this, it’s going to log 6 because 1 + 2 + 3 is 6. But we can change this to use the rest operator. So, we're still going to pass in 1, 2, 3. But where it’s accepted here, where we have the arguments here, x, y, z, I’m just going to put .... That’s the rest operator. Just .... And I’m going to put args. So, with this rest operator, ..., 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 6. But we can also now add any number of numbers. So, I’ll put a 4 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. [Use the Spread Operator to Evaluate Arrays In-Place] The spread operator looks just like the rest operator. Three dots. But it expands an already existing array. Or it spreads out an array. So, it takes an array and spreads it out into its individual parts. So, here we have an array with some months. And the spread operator can spread this array, this arr1 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’s look at this. So, right now we're setting arr2 to equal arr1. In this example we're not actually copying it. Because if we change arr1, if we set the index of arr1 to ‘potato’ and we log arr2, you’ll see that index [0] is “potato” even though we're logging arr2 and we only changed arr1 because these are equal. arr2 and arr1 are the same. But what if we want arr2 to be a copy of arr1 ? 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 arr1 into this new array. So, we're not making arr2 equal to arr1. We're making arr2 equal all of the contents of arr1 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”. [Use Destructuring Assignment to Assign Variables from Objects] The next few lesson will be about destructuring 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 voxel 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, we can do vox with an x. This stores x. voxel.y stores y. voxel.z stores z. Now with destructuring, there’s a simpler and quicker way to assign variables for each element in an object. So, here’s the destructuring syntax right here. This time, we are creating variables a, b, and c and assigning them to a values from the object x, y, and z. We can see we put it 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 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 AVG_TEMPERATURES. So, we have AVG_TEMPERATURES. It has today and tomorrow’s temperatures. And then the average temperature is inputted into this function here. So, I’m going to change this line here to use destructuring and destructure the AVG_TEMPERATURES object here that’s passed into this function. So, first I’m just going to put the AVG_TEMPERATURES variable here. And then on this side of the equals sign I’m going to have to use the destructuring. So, I’ll put the curly braces. And we'll put tomorrow. And then a colon, and then the other curly brace. So, this is saying get the tomorrow field from the AVG_TEMPERATURES object and assign it to the tempOfTomorrow variable. So, if we run this, we should see it says 79 in console because we got the tempOfTomorrow variable. We returned tempOfTomorrow, and it was logged right here. So, we successfully used destructuring to get the tomorrow variable out of AVG_TEMPERATURES. [Destructuring Assignment with Nested Objects] We can also use destructuring 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 for tomorrow. So, here we have getMaxOfTmrw 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 maxOfTomorrow. 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, when you’re destructuring 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 maxOfTomorrow. 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 maxOfTomorrow. So, we’ve set the max that was inside tomorrow to maxOfTomorrow. So, if I run this, you’ll see it’s 84,600. [Use Destructuring Assignment to Assign Variables from Arrays] You can use destructuring assignment to assign variables from arrays. Look at this example here. So, we have this array of [1, 2, 3, 4, 5, 6] and we're assigning the variable z and x to the first two numbers of the array, 1 and 2. The difference between destructuring 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 4 to be going to a variable, we can just do like this. We would just add some commas. So, we put a comma with nothing in it, like that. 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 z, x, and y we should see 1, 2, and 4. Here’s another thing you can do. You can use destructuring of arrays to switch the places of variables. Let me uncomment out these. And what I’m going to do is use destructuring to switch the places of a and b. So, it’ll be like this. I’ll say [a, b]. And I’ll say = [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 6 and 8. So, let’s see. Yeah, it worked. [Use Destructuring assignment with the Rest Operator] We can use destructuring 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 removeFirstTwo 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 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 second element. Everything else, put into the arr variable. We could have assigned the first two numbers in the array to two other variables. I could do a, b, and then a would be 1, b would be 2, and then arr 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 that 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. [Use Destructuring Assignment to Pass an Object as a Function’s Parameters] You can use destructuring 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 what is called down here. And it’s passing in this whole object, so 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 going to do. I’m going to put in some curly braces here and just put max and min. So, now when the stats get passed 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. Instead of stats.min we can do min. 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. [Create Strings using Template Literals] Template literals are a special type of string that makes creating complex strings easier. You make them with this backtick. So, here’s an example of a template literal right here. We have the beginning backtick and we have the ending backtick. This would be in place of using a quotation, a single or double quotation mark. A few advantages of using these template literals, these backticks instead of quotation marks, are one, you can make multiline 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 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 $. And then we have these curly braces. And so, anything in between these curly braces that start with the $ 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.age which gets the age from right there. So, it makes things easier that you can put variables right in the strings. So, if we run that, you’ll see. And normally it would actually also be printed with a new line. But with this exact code editor and console, it doesn’t show the new line. So, there’s going to be a coding challenge that we're going to do right down here. We have this makeList function. And we want it to create a list based on the array that’s passed in. So, when we call makeList, 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 no-var, var-on-top, and linebreak that comes right from this array that’s passed in. So, let’s use template literal 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 for loop. So, we'll do for(). And hopefully, you’ll remember how to make a for loop. We'll do (let i = 0 while i is less than arr.length). And then at the end we will increment i. So, inside this for loop we'll do resultDisplayArray.push. And then here is where I’m going to use the template literal. Put a backtick. And I’ll put this HTML code here. <li class=”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 arr. And then index[i]. Now end curly brace. And then I can just put the </li>. Okay. And if we console.log this out because we just finished that, I do console.log(resultDisplayArray) the array looks just like it’s supposed to be. If you look in the console, it returns correctly. [Write Concise Object Literal Declarations Using Simple Fields] ES6 added some nice support for easily defining object literals. If we look at this function here, this function is 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 passed in variable names. The passed in names, age, and gender. So, if you look in the console you can see this currently does. We did the createPerson. We passed in 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 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 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. [Write Concise Declarative Functions] 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 setGear function. But instead of using the function keyword and this colon, we can just delete all that. And the now this is the new way. If I load this again, you’ll see 3 in the console just like it was before. Because we've been able to set the gear using that function. [Use class Syntax to Define a Constructor Function] ES6 provides a syntax to create objects using the class keyword. So, here’s the older way to create an object. It’s with the new keyword. We can instantiate an object using this new keyword. And we're instantiating the SpaceShuttle 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 said the targetPlanet of this.targetPlanet. Once we create the new object like this, that allows us to do zeus.targetPlanet. So, zeus.targetPlanet which we set to Jupiter. So, in the console you can see Jupiter. The class syntax replaces the constructor function creation. So, I’m going to delete that. We're going to use the class syntax. So, I’ll do class SpaceShuttle. And then we have the curly brace here. And so, inside here we have a constructor. So, do constructor(targetPlanet). And then that’s all. We just have to put in the curly brace. And this works exactly the same as before. We’re 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 = name. So, now that we have this, we can set this Vegetable to makeClass which will return a Vegetable class. So, 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.name. So, when we console.log carrot.name, we should get carrot. [Use getters and setters to Control Access to an Object] With the class object you often want to obtain values from the object and set a value of a property within an object. This 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 _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 the _author, but you can set that with the writer setter. This change could invoke calculations or even overriding the previous value completely. So, you can have any number of code lines in this setter to ultimately 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 Thermostat 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. When you first create the Thermostat you’re going to pass in a temperature. And remember, this is going to be Fahrenheit. Now within this constructor, we're going to set a private variable. this._temp. So, the word this just means that this variable is only accessible within this class here. And the _temp – whenever you start a variable with an _ 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._temp = 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/9 * (temp – 32). So, now we can create the getter and setter. So, for getter we’ll do get temperature. And we're just going to return this._temp. Which now it’s in Celsius because we're storing the value in Celsius even though the thermostat is created in Fahrenheit. So, with the setter, it’s going to be the same. set temperature(updatedTemp). And it’s now going to still be in Celsus. So, this._temp = updatedTemp. So, let’s look at the code down here, how we're using it. So, the const Thermostat = makeClass(). This makeClass function is going to return this thermostat object here. And then we're going to do const thermos = new Thermostat. So, when you’re instantiating an object you always use the new keyword. new thermostat, that’s this. And we're passing in 76. That goes into the constructor, the temp. And so we do this calculation to convent that Fahrenheit to the Celsius in this local variable here. And then let temp = themos.temperature. So, thermos.temperature is going to use the getter, get temperature, and it’s going to return this._temp. So, a key thing to look at is that there are now parenthesis after this. So, generally, if something is a function, you would see parenthesis after the function name, but if it’s a variable or a property name, it’s going to not have parenthesis. So, getters and setters are accessed similar to properties. And then we can use the setter here, thermo.temperature = 26, and then it sets it with the updated temperature. And now we can say temp = 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 load that. 26. [Understand the Differences Between import and require] 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 variables. Let me show you how it works. So, in this file, we have this capitalized string function. We're passing in this string “hello”. And we want to log out the capitalized strings. But right now it just has an error because there is no capitalizeString function in this file. However, in this other file, we do have a capitalizeString 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. Capitalize string, that’s set to equal a function. This is an arrow function, where we pass in a string. And then we return the string.toUpperCase. Now toUpperCase is just a string function that makes ever 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 we're going to use curly braces. And then I’ll put capitalizeString. 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 ./ which just means the current directory. And I’ll type in the file name. “string_function”. Now, the file name has a .js 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! in all capital letters. It successfully imported this function from the other file and we used it in this file. [Use export to Reuse a Code Block] I’ve 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 capitalizeString 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 it a different way. So, I’ll do export and then curly braces capitalizeString. And so now we just exported this function. And to export a variable like this we have const foo =”bar”, const bar = “foo”. To export these variables you just type in export before. So now in this file, we're exporting this function and these two variables. And then we can import them into another file. [Use * to Import Everything from a File] If a file exports multiple different things, you can import each thing 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 asterisk 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 capitalizeStrings. I’m going to call this captalizeStrings. So, this could really be anything. I’m creating an object with this. And then I’m going to see what I’m importing it 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 ./ 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 * as. And then this could be anything. It could be any object name that you create. And then you’re going to put from. And then you put the “file name” in quotation marks just like that. [Create an Export Fallback with export default] 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, 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 fallback. Basically, just the one thing we're going to export from this file. [Import a Default Export] 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’ll 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 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. Visit freeCodeCamp.org

Channel: freeCodeCamp.org

Views: 7,064,266

Rating: 4.9441204 out of 5

Keywords: javascript tutorial, javascript, javascript tutorial for beginners, programming tutorial, learn javascript for beginners, javascript course, java script tutorial, js tutorial, java scripting tutorial for beginners, javascript tutorials, javascript for beginners, java script, javascript for beginners 2018, programming tutorial javascript, javascript (programming language), javascript course for beginners, javascript crash course, learn to code, learn to program, coding tutorial

Id: PkZNo7MFNFg

Length: 206min 43sec (12403 seconds)

Published: Mon Dec 10 2018

Reddit Comments

[u/alliwanabeiselchapo]

Is this any good?

[u/tagtician]

upvote for the great kid at the beginning and the dad’s (I assume) patience.