Learn JavaScript - Full Course for Beginners

 Learn JavaScript - Full Course for Beginners - YouTube

https://www.youtube.com/watch?v=PkZNo7MFNFg

Transcript:

(00:00) 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.

(00:24) 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.

(00:45) 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.

(01:09) 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.

(01:42) 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.

(02:06) 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.

(02:28) 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.

(02:51) 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.

(03:18) 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.

(03:41) 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.

(04:01) ” 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.

(04:23) [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.

(04:48) 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.

(05:11) 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 */.

(05:35) 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.

(06:03) 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.

(06:24) 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.

(06:49) 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.

(07:18) 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.

(07:41) 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.

(08:08) 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.

(08:41) 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.

(09:02) 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.

(09:22) 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.

(09:45) 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.

(10:10) 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.

(10:42) 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.

(11:06) 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.

(11:30) [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.

(11:57) [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”.

(12:22) 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.

(12:51) 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.

(13:16) 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.

(13:40) 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.

(14:13) 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.

(14:41) 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.

(15:08) 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.

(15:42) 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.

(16:13) 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.

(16:39) 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.

(17:07) 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.

(17:33) [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.

(18:01) 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.

(18:29) 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.

(18:55) 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 +=.

(19:28) 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.

(19:59) 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.

(20:33) 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.

(21:18) [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.

(21:42) 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.

(22:27) ’” 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.

(22:52) 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.

(23:25) 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.

(23:59) 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.

(24:18) 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.

(24:51) 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.

(25:18) [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.

(25:46) 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.

(26:13) ” 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.

(26:46) [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.

(27:10) 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.

(27:36) 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”.

(28:03) 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.

(28:31) ” 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.

(29:07) 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.

(29:40) 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.

(30:14) [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!”.

(30:41) 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.

(31:18) 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.

(31:38) 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”.

(32:00) [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.

(32:20) 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.

(32:54) 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).

(33:20) 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.

(33:45) 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.

(34:09) 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.

(34:36) 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.

(35:02) 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].

(35:42) 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.

(36:06) 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.

(36:28) [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.

(36:54) 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.

(37:18) 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.

(37:45) 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.

(38:19) 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.

(38:55) 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.

(39:28) 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.

(39:58) 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.

(40:38) 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.

(41:02) 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.

(41:31) 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.

(41:58) 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.

(42:21) 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.

(42:46) 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.

(43:10) 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.

(43:51) 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].

(44:17) 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].

(44:46) [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.

(45:14) 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.

(45:36) 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.

(45:59) 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.

(46:31) [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.

(46:53) 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.

(47:20) 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].

(47:46) 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.

(48:08) 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.

(48:44) 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.

(49:06) 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.

(49:38) 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”].

(50:00) 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]].

(50:36) [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.

(51:12) 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.

(51:51) 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.

(52:22) 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.

(52:50) 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.

(53:15) 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.

(53:53) 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.

(54:19) 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).

(54:43) 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.

(55:09) 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.

(55:50) 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.

(56:14) 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.

(56:47) 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.

(57:14) 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.

(57:45) 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.

(58:16) 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.

(58:46) 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.

(59:12) 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.

(59:41) 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.

(1:00:07) 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.

(1:00:30) 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.

(1:00:54) 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.

(1:01:26) 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”.

(1:02:00) 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.

(1:02:33) 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.

(1:02:58) 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.

(1:03:29) 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.

(1:04:03) 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().

(1:04:27) 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.

(1:04:59) 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.

(1:05:23) 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.

(1:05:52) [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.

(1:06:15) 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.

(1:06:41) 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.

(1:07:04) 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.

(1:07:28) 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.

(1:07:56) 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.

(1:08:23) 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.

(1:08:58) 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.

(1:09:24) [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.

(1:09:49) 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”.

(1:10:17) 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).

(1:10:41) 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.

(1:11:18) 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.

(1:11:42) “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.

(1:12:07) 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.

(1:12:36) 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.

(1:13:04) 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 ===.

(1:13:31) 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.

(1:13:55) 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.

(1:14:23) 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.

(1:14:52) 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.

(1:15:15) 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.

(1:15:38) [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.

(1:16:06) 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.

(1:16:29) 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.

(1:16:57) 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.

(1:17:26) 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.

(1:17:52) 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.

(1:18:21) 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.

(1:18:43) [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.

(1:19:11) 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.

(1:19:42) 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.

(1:20:02) 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.

(1:20:33) ” 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”.

(1:20:59) 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.

(1:21:29) 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.

(1:21:56) 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.

(1:22:20) 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.

(1:22:41) 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.

(1:23:02) 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.

(1:23:30) [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.

(1:23:57) 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.

(1:24:22) 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.

(1:24:52) 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.

(1:25:18) 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.

(1:25:37) 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.

(1:26:00) 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.

(1:26:28) 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.

(1:26:58) 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”.

(1:27:35) 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.

(1:28:03) 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.

(1:28:23) 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.

(1:28:43) 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.

(1:29:09) 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.

(1:29:39) 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].

(1:30:14) 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.

(1:30:56) 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.

(1:31:32) 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.

(1:31:59) 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.

(1:32:30) 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.

(1:32:49) 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.

(1:33:25) 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.

(1:34:03) 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”.

(1:34:33) 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.

(1:34:53) 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.

(1:35:27) 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.

(1:35:53) 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”.

(1:36:12) 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.

(1:36:40) 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”.

(1:37:09) 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.

(1:37:32) 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.

(1:37:58) 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.

(1:38:26) 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.

(1:38:42) 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.

(1:39:03) 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.

(1:39:31) 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.

(1:39:53) 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!”.

(1:40:46) 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.

(1:41:24) 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.

(1:41:52) 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.

(1:42:26) 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”.

(1:42:54) 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.

(1:43:35) 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.

(1:44:03) 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.

(1:44:27) 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.

(1:44:48) 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.

(1:45:19) 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.

(1:45:47) 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.

(1:46:17) 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.

(1:46:43) 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.

(1:47:20) 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.

(1:47:45) 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’.

(1:48:09) 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.

(1:48:58) 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.

(1:49:32) 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”.

(1:49:55) 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”.

(1:50:20) 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.

(1:50:54) 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.

(1:51:16) 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.

(1:51:44) 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.

(1:52:06) 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.

(1:52:31) ‘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.

(1:53:02) 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”.

(1:53:29) 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”.

(1:53:59) 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.

(1:54:30) [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.

(1:54:56) 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.

(1:55:20) [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.

(1:55:42) 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.

(1:56:09) 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.

(1:56:33) 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.

(1:57:16) 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.

(1:57:52) 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.

(1:58:19) 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.

(1:58:46) 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.

(1:59:22) 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.

(1:59:47) 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”.

(2:00:05) 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.

(2:00:50) 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.

(2:01:15) 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”.

(2:01:43) 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.

(2:02:08) 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.

(2:02:32) 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”.

(2:03:03) 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”.

(2:03:32) 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”.

(2:03:58) 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.

(2:04:22) 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.

(2:04:50) 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.

(2:05:13) 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.

(2:05:41) 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.

(2:06:02) 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.

(2:06:34) 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.

(2:07:06) 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.

(2:07:39) 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.

(2:08:09) 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.

(2:08:45) 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”.

(2:09:10) 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”.

(2:09:44) 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.

(2:10:06) 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.

(2:10:31) 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).

(2:11:01) 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.

(2:11:26) 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.

(2:11:53) 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.

(2:12:19) 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.

(2:12:44) 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.

(2:13:06) 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.

(2:13:34) 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.

(2:14:02) 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.

(2:14:25) 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.

(2:15:05) 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.

(2:15:39) 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.

(2:16:06) 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.

(2:16:32) 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.

(2:16:59) 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.

(2:17:25) 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.

(2:17:51) 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.

(2:18:16) 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.

(2:18: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.

(2:19:25) 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.

(2:19:55) 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.

(2:20:17) 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.

(2:20:37) 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.

(2:21:00) 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.

(2:21:26) 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.

(2:21:51) 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.

(2:22:11) 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.

(2:22:41) 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.

(2:23:08) 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.

(2:23:37) 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.

(2:23:59) 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.

(2:24:25) 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”.

(2:24:52) 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”.

(2:25:16) 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.

(2:25:50) 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.

(2:26:26) 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].

(2:26:49) 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.

(2:27:09) 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.

(2:27:31) 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”.

(2:27:52) “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.

(2:28:26) 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.

(2:28:51) 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.

(2:29:19) 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.

(2:29:50) 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.

(2:30:13) 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.

(2:30:38) 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.

(2:31:01) 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.

(2:31:26) 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.

(2:31:53) 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.

(2:32:14) 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.

(2:32:43) 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.

(2:33:06) 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.

(2:33:28) [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.

(2:33:52) 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.

(2:34:13) 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.

(2:34:36) 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.

(2:35:09) 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.

(2:35:31) 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.

(2:35:56) 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.

(2:36:21) 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.

(2:36:52) 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.

(2:37:16) 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.

(2:37:38) 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.

(2:38:05) 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.

(2:38:28) 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.

(2:38:56) 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.

(2:39:25) 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:  “.

(2:39:46) 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”.

(2:40:12) “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.

(2:40:33) 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.

(2:41:04) 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.

(2:41:28) 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.

(2:41:53) 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.

(2:42:16) 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.

(2:42:48) 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.

(2:43:19) 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.

(2:43:50) 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.

(2:44:13) 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].

(2:44:51) [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.

(2:45:17) 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.

(2:45:44) 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.

(2:46:09) 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.

(2:46:35) 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.

(2:46:59) 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.

(2:47:26) 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.

(2:47:47) 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.

(2:48:12) 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.

(2:48:36) 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.

(2:48:57) 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.

(2:49:23) 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.

(2:49:48) 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.

(2:50:07) 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.

(2:50:26) 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.

(2:50:45) 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.

(2:51:06) 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.

(2:51:38) 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.

(2:52:09) 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.

(2:52:36) 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.

(2:53:00) 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.

(2:53:25) 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.

(2:53:52) 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.

(2:54:14) 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.

(2:54:39) 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.

(2:55:07) 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.

(2:55:30) [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.

(2:56:05) 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.

(2:56:38) 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.

(2:57:04) 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.

(2:57:26) 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.

(2:57:54) 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.

(2:58:25) 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.

(2:58:47) 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.

(2:59:14) 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.

(2:59:39) 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.

(3:00:11) 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.

(3:00:35) 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.

(3:00:55) 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.

(3:01:23) 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.

(3:01:54) [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.

(3:02:26) 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.

(3:02:50) 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].

(3:03:20) 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.

(3:03:49) 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.

(3:04:09) 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.

(3:04:32) 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.

(3:04:58) 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.

(3:05:16) 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.

(3:05:42) 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.

(3:06:10) 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.

(3:06:33) 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.

(3:06:54) 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.

(3:07:16) 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.

(3:07:36) 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.

(3:07:57) 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.

(3:08:22) 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.

(3:09:01) 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).

(3:09:31) 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.

(3:10:06) 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.

(3:10:39) 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.

(3:11:03) 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.

(3:11:25) 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.

(3:11:45) 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.

(3:12:16) 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.

(3:12:39) 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.

(3:13:05) 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’.

(3:13:27) 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.

(3:13:50) 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.

(3:14:21) 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.

(3:14:54) 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.

(3:15:21) 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.

(3:15:48) 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.

(3:16:10) 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.

(3:16:33) 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.

(3:16:55) 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.

(3:17:23) 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.

(3:17:49) 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.

(3:18:23) 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.

(3:18:55) 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.

(3:19:16) 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.

(3:19:42) 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.

(3:20:03) 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.

(3:20:35) 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”.

(3:20:55) 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.

(3:21:16) 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.

(3:21:43) 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.

(3:22:09) 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.

(3:22:33) [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.

(3:22:53) 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.

(3:23:15) 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.

(3:23:39) [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.

(3:24:00) 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.

(3:24:25) 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.

(3:24:45) 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.

(3:25:07) 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.

(3:25:33) 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.

(3:25:53) 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.

(3:26:17) Well, thanks for watching. Don’t forget to subscribe. And remember, use your code for good. Visit freeCodeCamp.org