Transcript for:
Introduction to JavaScript Notes

Hi everyone, this is David Patlut from Codecademy. In this lesson walkthrough video, we'll walk through the first lesson in the Learn JavaScript course. In this lesson, we'll cover some of the basics of the JavaScript programming language and some other fundamentals. I'm really excited to be part of your learning journey, let's get started. Let's talk about what we'll be covering in this lesson. In this lesson, we will cover the following  topics: First, we will cover a brief introduction to the JavaScript programming language. We'll talk about things like what it is, where it comes from, and the common use cases. Then we'll talk about basic JavaScript programming. We'll cover things like how to use the console, how to write comments, some common JavaScript data types, how to use arithmetic operators, how to perform string concatenation, and the basics of methods, properties, and built-in objects. There is a lot to cover, so let's get started. As we go through the lesson, we will cover three distinct parts of an exercise. The first part will be a recap of the lesson narrative. As we review the contents of the narrative, I might switch over to a Codecademy workspace to show some examples. If you're not familiar with workspaces, they are a feature Codecademy offers to create shareable sandbox environments for multiple programming languages. You can write your code in the sandbox and then share it using a unique link. To share it, you can go up to the right hand corner, click the share button, and then copy the link. You can either make them public or private. If you'd like to create your own workspace, click  My Home on the Codecademy main navigation bar. While on this page, scroll down until you hit My  Workspaces. From here, you'll be able to see all the workspaces that you create and create new ones. If you'd like to create a new one, click new workspace. Here, you'll find options for the different  languages that you can create a workspace for. Any code that we write while covering the narrative will be hosted in a workspace. Don't worry, we will link to the workspace in the video's description. You can follow along in the video or visit the workspace link and see the code for yourself. Once we are done recapping the narrative, we will scroll down and cover the instructions portion of each exercise. The instructions portion is a set of challenges to  test your knowledge of the content that is taught in the narrative. In this video, I'll be referring to each individual challenge as a checkpoint. For this portion, we will work directly in the exercise rather than a workspace. Lastly, once we finish the checkpoints we will take a look at the community forum section. This section hosts a variety of frequently asked questions by Codecademy users. We will take a look at one or more of the questions together. Now that we have an overview of how the walkthrough will work, let's get started with the first exercise. Exercise one: What is Javascript? All right, let's talk JavaScript. JavaScript is one of the most popular programming languages and it's based on what's known as the ECMAScript standard. ECMAScript is a standard used to define any general purpose scripting language. It is maintained by ECMA International, an organization that defines standards for different technologies, such as programming languages like JavaScript. We can think of JavaScript as a subset of ECMAScript. It is defined as a general purpose scripting language that conforms to the ECMAScript specification. That might sound a bit technical and complicated, but the gist of it is is that JavaScript is a language that was created  based on a template, in this case ECMAScript. JavaScript still has its own unique features and characteristics, but also guarantees that it follows some guidelines about what it  should be able to do as a programming language. Don't worry too much about ECMAScript, since we won't ever directly deal with it. Some developers even use the words JavaScript and ECMAScript interchangeably, since JavaScript is the most popular implementation of the ECMAScript standard. What is important to know about ECMAScript is that the latest version of JavaScript and the one we'll be working with is called ES6 which is short for ECMAScript version 6. It's also important to know that most of the modern web browsers such as Chrome or Microsoft Edge use JavaScript under the hood. They're actually built with it. However, even if a browser isn't directly built with JavaScript they'll typically still work with the language in some capacity. In most cases, we'll be able to use JavaScript in tandem with a browser, since we'll be working with web development. We will explore more about this in later lessons. Lastly, JavaScript has a bunch of use cases. It can be used for web development, as we just mentioned,  mobile apps, or even games. The possibilities for what you can build with JavaScript are pretty endless. The exercise in this lesson, for this introduction,  doesn't have any checkpoints for us to do, so let's move on to the community forum section and cover a frequently asked question. A commonly asked question by Codecademy users in this exercise is, "How are Java and JavaScript different? Which one should I learn?" This is a great question. Before we touch on Java and JavaScript, specifically, let's talk about the process of picking a programming language. When we are starting out in programming, it is very easy to be confused about which programming language we should choose. This is due to the sheer fact that there are so many programming languages that exist. Should I learn JavaScript? Should I learn Java? How about Python? Maybe C++? Or C#? It may feel like there are endless options. The most important thing to remember is that all programming languages share common traits. When you learn the basics of one language, it will feel much easier to pick up your second, third, or even fourth language. Don't worry too much about which language you choose just yet, because you can't really go wrong. In terms of Java and JavaScript, it's important to know that they are both programming languages that share a common name. However, they were invented to serve different purposes. We won't dive too deep into their differences in this video, but we will include an additional resource comparing the two languages in the video's description, if you  would like to learn more. Exercise 2: Console Now that we've covered a bit about the JavaScript language, let's take a look at one of the most common components that we'll be interacting with: the console. In JavaScript, the console is a way to see important information such as code output, errors, and much much more. To use the console, we'll be doing so using the console keyword. A keyword is a specific reserved word that is built into a programming language, in this case JavaScript. Using the keyword lets us tell JavaScript to target the console component, so that way we can use it. Kind of like pointing a finger and saying, "Hey JavaScript, I'd like to use the console, give me  access to it." On the right hand side, you'll see an example of what a console might look like. This is an example of a web browser console.  You'll find these types of consoles in browsers such as Chrome, Firefox, or Microsoft Edge. We won't be using this type of console, specifically, because our console will be built directly into the lesson. We'll see more on this when we switch over to  using the workspace to test this out ourselves. To log data to our console, we can append .log to the console keyword. For example, here's console.log(5). What's happening here is we're using the console keyword, we're using .log to specify that we want to log something to the console, and then we're specifying what we want to log, in this case, the number five. What we're actually doing behind the scenes is using an object and a method. We'll circle back around to these terms later in the lesson and then you'll get the full picture of how it all works. For now, just know that we can attach certain keywords to console to make it perform a specific task. In this case, .log tells the console we'd like to log or output some kind of data. Let's take a look at the console in a workspace to see this in action. Here is the workspace we will be using throughout the lesson. Don't worry, the link for this workspace will be available in the video's description, if you want to access the code we are working on. On the right-hand side where it says, "run your code to see  output", we will have our output console component. This is where we'll be able to see the output of using the console.log. So, let's see how we can actually output to this console. Let's go over to our script.js file. For context, while we haven't covered this it's important to note that anytime we write JavaScript we'll be doing so in a file that has a .js extension. In this case, we have a file called script.js. This indicates to our browser, or in this case the workspace, that we'd like to use the JavaScript programming language. So, let's write console a keyword .log and then open a set of parentheses. Inside of these parentheses, let's keep it simple and put the number five. If we click save and run, we can see on the right-hand side where we have our output component we have the number five. This means that we successfully console logged to our JavaScript console and saw the output come out as five. The output console is similar to what we will be using when we switch over and do the exercises checkpoints. Note that this console is different than the screenshot we saw in the slides, because this console is built directly into the  Codecademy website or in this case the Codecademy workspace. All right, now that we've covered the basics of using console.log, let's tackle the instructions portion of this exercise. Before we do so, know that we're working in a file called app.js/ Recall that the .js extension is necessary to tell our computer that we want to use the JavaScript programming language. In this case, we're telling the Codecademy workspace that we want to use JavaScript. On the right-hand side, we have a black box. This might look empty now, but this is actually going to be similar to the workspace we were working in where we have this as our output console. Don't worry, we'll see this in just a moment. Let's go ahead and scroll down to the instructions. In this instructions portion, we have two checkpoints. Let's start off with the first checkpoint. The first checkpoint says, "Use the console.log code in the editor to log your age to the console run your code when you're ready to see the result." Let's go ahead and write console.log and open a set of parentheses. In these parentheses, we're going to put our age. For myself, I'm going to put 29 years old because I'm 29. If we click run, we can see on the right-hand side in this black box we have 29. Remember this is going to be our output console, so this looks about right. Looks like we have a check mark, so we're good to move on to the next exercise. For the next exercise, it says, "On the next line write another console.log to print out a different number representing the number of weeks you've been programming." Same as before, let's write console .log and open a set of parentheses. I've been programming for a while, so I'll add a big number like 560.   Don't worry if this is your first week programming, I was right there with you not too long ago, we all have to start somewhere. If we click run, we can see that 560 comes up on a new line. Anytime we write multiple console.logs, they will all present themselves on different lines in the output console. Great, we've completed both checkpoints in this exercise. Now, let's move on to a frequently asked question by Codecademy users for this exercise. For this exercise, Codecademy users on the community forums have wondered, "Do I need to use a semicolon?" This is a great question. This is also a largely debated question in the JavaScript Community, as a whole. Some developers tend to use them, while others avoid them completely. The important thing to note is that, generally speaking, if you choose not to use semicolons, it will not typically affect your code from running correctly. Let's go ahead and switch over back to our lesson and see how this works. For example, here, where we wrote console.log 29 and console.log 560, we didn't use a semicolon. Note that in the narrative, we did use a semicolon and that's how our narratives generally teach you to use it. I have, actually, purposely left the semicolon off to return to this code and show you that it ran correctly without it. If we go ahead and add our semicolons to this code and click run, we can see that nothing exactly has changed about  our code output, it's also just returning 29 and 560. That means our code did not break. That said, some developers note that semicolons improve the readability of code and it can be best to include them to be on the safe side. Including semicolons in the JavaScript can also be good if you plan to eventually learn a language that does require semicolons, such as the Java programming language. For the purposes of this lesson and the code that we write, we will include them moving forward. Let's move on to the next exercise. Exercise three: Comments JavaScript programming language gives us a feature to be able to document our code. This is accomplished by using a comment syntax. We can leave instructions, notes, or any other useful information we feel is relevant to put into our code. Comments don't get read by JavaScript when it executes in our code. They won't affect the output or produce a error. There are really two ways to write a comment in JavaScript. The first way is to use a single-line comment. Take a look at an example on the right. The next way to do so is to use a multi-line comment here's an example of what a multi-line comment looks like. As you will notice by looking at the examples on the right, the syntax is slightly different. Let's write a few comments together in our workspace. Welcome back to the workspace. Notice how console.log(5) is left over from our last exercise   You'll notice as we progress to this lesson that we'll be able to return to a lot of our code that we write in this same workspace. That way, when you access it, you'll be able to see all the code that we've written throughout the entire lesson. So, let's talk about comments. Let's go to a new line in our workspace. Let's go ahead and write a single-line comment using a double-forward slash. So, two forward slashes. Notice how the color changes to gray. This is a way that JavaScript indicates using color that a comment has been created. Notice how console.log and five, they're all kind of different colors, but a comment is shown as gray, we'll add a comment that says, "this is my first console.log." Awesome. We've written our first comment. I run the  code, notice that nothing's going to change about the output. We still get the console.log 5 from earlier. As we mentioned, JavaScript completely ignores comments and we won't see them in our console. The comment will be mostly useful for us or for other developers that read our code. If I wanted to add a bigger comment I could also do that, as well. Known as a multi-line comment. Let's first add a few more lines of console.log so that way we can wrap them in a multi-line comment. And go back to my code, and I'm going to do console, oops, .log 10. Another one, console.log 11, and one more console.log 12. Now that we have a couple of lines, let's go ahead and add the Syntax for a multi-line comment. To do so, I do a forward slash, a star and then notice how these console logs already became grayed. Now we could stop here, but this would actually be incorrect syntax because we haven't closed our multi-line comment. We have to go to the end of this block and then add star and another forward slash. Now that we've done that, we've successfully created a multi-line comment. Same thing as before, if we run this code, only 5 will be output to the console. Nothing has changed because comments don't get read. Let's practice this by switching over to our exercise and completing the checkpoints. All right, now that we've covered the basics of using console.log, let's tackle the instructions portion of the lesson. Before we do so, take a look at the top bar over here. Notice that our code is in app.js file. This is very similar to before, where we were in a workspace with script.js. Remember, the js extension is necessary to tell our computer that we want to use JavaScript. In this case, we're telling Codecademy that we want to write JavaScript in this file on the right-hand side, similar to before, we have an empty black area. This is going to be our output console. Don't worry, we'll see things come up once we run our code. Alright, let's go ahead and do the instructions portion of this exercise. The first instruction says the following, "Let's practice adding some code comments. "To the right we've provided you with the beginning of the book Catch-22 by Joseph Heller. On line one, write a single-line comment that says 'opening line.'" Alright, let's go over to line one and we'll initiate a single-line comment using a double forward slash. We can see the color has changed to gray, indicating  that as a comment, and we can write "opening line." If we run our code here, we'll see on the right-hand side we have the output from the console.logs. What we do, also, notice is that the comment doesn't appear in our output console. Cool. Let's move on to the second checkpoint. The second checkpoint says the following, "Single-line comments are great for adding context to your code. "Multi-line comments are often best suited to prevent a block of code for running, however, both types of comments can be used for either purpose. "Use a multi-line comment so that the bottom six console.log statements are commented out." So, we'll be targeting all of these console logs here. To initiate a multi-line comment, let's go ahead and add some space above. To start a multi-line comment, we'll have to do our forward slash star and we immediately notice that the color of the console logs gets grayed out. This indicates to us that they have become a comment. Remember, in order to complete this comment we'll have to add the star forward slash to the end of it. If we don't, our code might error out. If we run this code, we now see that the only console.log that is coming out in our output terminal is the  first one, console.log it was love at first sight. We can see that we've successfully completed the  second checkpoint. Great. Now let's move on to a community question asked by Codecademy users. Some Codecademy users on the Codecademy forums have asked the following, "Why would we want to prevent code from running by using comments?" That's a great question. Let's switch over to our workspace to talk about this. We already know that one of the primary purposes of writing  comments is to document our code. We already saw this in the exercise, but here's another example  of what documentation might look like. For example, on line one I've written exercise 2 console  and on line 5 I've written exercise 3 comments. This is to indicate that the code that is below this point refers to the exercise number that's indicated. This allows Codecademy learners to come into this workspace and understand, "Hey, if I'd like to review all the code that was covered for exercise 2 and see a reference to it, I can look at this point." Commenting out code is not just useful for adding documentation to our code, but it's also commonly used for what is known as debugging. When we write code in JavaScript, it is inevitable that eventually, we will make a mistake. Debugging is a process of solving problems in our code, or in this case, our mistakes. These mistakes are commonly called bugs. They're also commonly referred to as errors. For instance, let's take a look at how commenting code can help in the debugging process. Say we have the following code. Let's go ahead and add a little space here, don't worry too much about what this code is or does but notice what happens when we click save and run. The output console turns red. This is an indication that something has gone wrong with our script and JavaScript gives us an error. In the process of debugging, we may use comments to common outlines of code that we think are breaking to likely confirm our suspicions that the line is causing the error. By commenting out code, we can also keep the program running so we can fix the error and move on. For example, I might take a look at this error and notice that it points to l e y equals 20 on line 16. I may now go to that line and add a single-line comment to comment out this code to confirm my suspicion if it is breaking. Go ahead and save and run and we notice that we've confirmed our suspicion and this line is actually the line that is breaking the code. Notice that the program no longer gives us an error in our  output console. We will be exploring more about debugging later but for now, the main thing to take away is we can use comments to comment out code to keep our program running, or to assist in the debugging process. We will use this technique of commenting out code quite often in the later parts of the course. Exercise 4: Data Types In programming, we'll want to work with different types of data. Whether it's a number, word, or even a true false value, JavaScript allows us to define and use these different types of data in our scripts. JavaScript has specific terms to categorize these different data types that we can work with. For example, let's take a string. Strings are things  like words or characters. We also have numbers such as whole numbers or even decimal values. We also have true or false values known as Booleans. We also have common data types, such as null, undefined, and objects. All the data types, except for objects, are known as primitive values. There is another data type not listed here called symbols, but we won't talk about symbols in this lesson. Let's practice defining some data types by moving on to the exercises checkpoints. In this exercise, we're being asked to define a few different console.logs to Output different data types into our output console. For the first checkpoint, it says, "On line one, log the string JavaScript to the console." Let's go ahead and do that together. I'm going to write console .log, open up some  single quotes, and put Javascript. Don't forget to add your semicolon, so that way we're keeping  consistent with our code throughout these lessons. Go ahead and run our code, and it looks like we passed the first checkpoint.   The second checkpoint says, "On line two log the number 2011 to the console." Here, we're going to be logging a number, a different data type in JavaScript. We'll do console.log and put the number 2011. Again, don't forget your semicolon and run, and it looks like  we successfully completed that checkpoint. Moving on to checkpoint 3. Same thing here, I'm going to have to add a console.log and in this case, we're going to be doing a string. It's asking us to print the string, "Woohoo! I love to code #Codecademy." I'm going to go ahead and copy this string over from  this portion of the instructions and paste it in here. Saves us a little bit of time of typing. Run  our code and it looks like we've successfully passed. For the fourth checkpoint, it says, "On line four print the number 20.49 to the console." Let's go ahead and do that and do another number data  type in our console.log. Console.log 20.49. Again, don't forget your semicolon, let's click run and we've successfully completed the fourth checkpoint. All right, now that we've practiced logging a few different data types, let's move on to a community question. A commonly asked question by the Codecademy community is, "When should you use single quotes or double quotes for strings?" That's a great question and one that is debated amongst the JavaScript community. It ultimately comes down to personal preference, however, let's take a look at two situations where it might matter. Alright, we're back in the workspace. I've added a new section down here for the fourth exercise in the lesson. Here, there are a few comments if you ever need to remember the common data types that exist. Down here, there's a new section we'll be taking a look at the single or double quotes question. Let's take a look at a situation where our choice of single or double quotes matters. Let's take a look at this string right here this string says we'll get started with doing math. Notice that this string has an apostrophe in it. This presents an issue for us because we can no longer use single quotes for logging the string. Let's take a look at what happens if we do. Let's go ahead and get rid of these forward slashes and write console.log, and then wrap this in a single quote, close that single quote, and run our code. Notice that JavaScript gives us an error. In this case we can't use single quotes because what happens is Javascript gets confused. It assumes that the closing quotation mark, a single quotation mark, happens here and it assumes this part of the string here isn't properly closed. In this case where we have an apostrophe in the string we're trying to console.log or work with, we need to use double quotes. Let's go ahead and replace this with some double quotes. And if we run our code, we'll see that it properly works. All right, let's go ahead and comment this out for now. The same applies for when we have a set of double quotes in our string, like the string here, that we have on line 33. In this string it, says, No, He said: open double quotes I do not  like math close double quotes. In this case, this sentence is trying to quote what someone has said and in English, we need to wrap the quote in double quotation marks to denote it as a quote. Same as before, if we wrap the string in double quotation marks it will produce an error. Let's go ahead and see how this happens. Let's go ahead and get rid of the single-line comment  double forward slashes, we'll write console.log, and then move that closing parentheses, add  our semicolon, and then wrap this in double-quotes. Let's go ahead and run it and we can see, similar to before, it will produce an error. Here, we need to get rid of the double-quotes and wrap it in single-quotes, And it will correctly get read by JavaScript. If we run this, now our string gets properly put out into the output console. Exercise 5: Arithmetic Operations Now that we know JavaScript deals with numbers, it's only natural that we would have some sort of way to perform arithmetic, or better known as math. JavaScript gives us what are known as operators. An operator is a character that can perform a task with our code. These characters represent different mathematical operations like addition using the plus character, subtraction using the dash character, multiplication using the star character, division using the forward slash character, and remainder also known as modulo, which Returns the remainder of a division operation, using the percentage sign character. Here are some examples of these in action. First, we have addition, so here we have three plus four which would return seven. Next, we have subtraction: five minus one which would return four. 4 times 2 - multiplication - which returns 8. 9 divided by 3, which will return 3, and then we have modulo. Here we have 11 modulo  3. This will return two because a division operation between 11 and 3 has a remainder of 2. However, if we have a situation like this, where we're doing 12 modulo 3, our result will be zero because a division operation between 12 and  3 has no remainder. Now that we've covered the basics of these operators, let's move on to the exercises checkpoints. All right, let's now work through some checkpoints. Just like before, we'll be working in an app.js file. The first checkpoint says, "Inside of a console.log add 3.5 to your age. This is the age you'll be when we start sending people to live on Mars. I guess in three and a half years, we'll be off to Mars. Let's go ahead and add our console.log now. Console.log, I'm 29 years old, so I'll use that number, 29, and then I'll  use the plus operator to do addition and add 3.5. All right, let's go ahead and run our code. Looks like that was successful. Second checkpoint says the following, "On a new line write another console.log. Inside the parentheses take the current year and subtract 1969. The answer is how many years it's been since the 1969 moon landing. All right, let's go ahead  and do that now. Console.log the current year is 2022, so we'll do 2022 and then subtract 1969.   Add a semicolon, run the code, it's been approximately 53 years since the moon landing. Alrighty, checkpoint three. "Create another console.log inside the parentheses divide 65 by 240." All right, go to my editor console.log 65 divided by 240.   Some developers tend to put some spaces between operators, it doesn't really matter if you do, it's personal preference. For the purpose of readability, I'll add that to my code. I'm going to run the code. 0.2708 and then repeating threes. That seems to have passed the checkpoint. Let's move on to the final checkpoint. The final checkpoint says, "Create one last console.log Inside the parentheses multiply 0.2708 by 100. "That's the percent of the Sun that is made up of helium, assuming we could stand on the sun, we'd all sound like Chipmunks." All right, let me add my last console.log 0.2708 and we're going to multiply it by a hundred, semicolon, and then run the code. Looks like that successfully ran and we got the result of 27.08. Let's now move on to a community question. A commonly asked question by the Codecademy community is, "What is the difference between 3 plus 4 and the string 3 plus 4?" Let's switch over to our workspace to take a look. Alright, we're back in the workspace. Notice that I've added a comment here for exercise 5 for arithmetic operators. I've also added two console.logs for the things that we're going to talk about. Here we have a console.log for three plus four, I'm going to add some spacing here, and I have three plus four as a string. Let's go ahead and run our code. Here, we'll see that the output is seven and three plus four. So, what's actually happening and what is the difference? Well, it's important to note that anytime we wrap something in quotation marks, JavaScript will treat it as a string. So, as opposed to the first line, where it's seeing three and four as numbers, here it's seeing three plus four as a whole string. That's why for the first console.log we get 7 as the result   because it's performing the arithmetic operator  on three and four. The result will be seven. As opposed to here, we're having three plus four in a string, so JavaScript doesn't perform any arithmetic. Exercise six: string concatenation We saw in the previous exercise that we could use the plus character to perform mathematical operations, like addition. However, we can use operators like the plus sign on more than just numbers. In fact, strings can be combined using the plus operator, as well. The process of combining one or more strings together is known as concatenation, or more specifically, in this case, string concatenation because we're working with strings. Let's take a look at some examples. On the right-hand side we have two strings, 'hi' and 'ya'. We are combining them using the plus character. The result will be a concatenated string of 'Hiya' What if, instead, we wanted to add a space between the two words we were concatenating? Take a look at the following example. Here, we have a string front with an extra space and the word space as a string. The result of this will be front, a space character, and then the word space. We can add spaces in our concatenation by adding a space to either the front or back of a string. Here, we're adding it to the first string front, but here's an example where we can do it to the second string, where, here in this example, we're adding a space to the word space. This was a result in 'back' 'space' with the word  space. We can produce a similar result by adding an empty space character, as well. Here's an example. Here, we have three strings that we're concatenating. We have 'middle' as a word, an empty space character, and then the word 'space' as a string. This would give us a very similar result. We can add this at any point of our concatenation to add a space between things. We can combine any number of strings together to also form sentences. Something like this. Here, we have a longer string, where we have one plus two plus three with some extra spaces and commas. The result would look like this, one comma two comma three exclamation point. Now that we've seen some examples, let's hop over to the lessons checkpoints. Alright, now let's do the instructions portion of this exercise. Let's take a look at the first checkpoint. The first checkpoint says, "Inside of a console.log statement  concatenate the two strings 'Hello' and 'World'. Let's go ahead and do that now. We'll do console.log, now parentheses, and then do the first string, which is 'Hello', add the plus sign to indicate that we want to concatenate it, and then do 'world'.  Don't forget to add your semicolon. Go ahead and run this, and it looks like we successfully completed the first checkpoint. Notice in our output the term 'Hello' and 'world' does not have a space between the two strings. Don't worry, we'll add this in the second checkpoint. The second checkpoint says the following, "We left off the space last time, create a second console.log statement in which you concatenate the strings 'Hello and 'world', but this time make sure to also include a space between the two words. Alright, we saw an example of this earlier. This should be pretty easy to replicate. We're going to do console.log 'Hello' plus an empty string and 'world', and add our semicolon, and then run our code. That pretty much wraps it up for this exercise, let's move on to a community question. A Codecademy user on the forums asks the following, "Why would we use string concatenation?" That's a great question. Let's switch over to the workspace to clarify this question. All right, let's take a look at an example. Take a look at line 43 and 44. On line 43, we have console.log with one big string that says 'Hello World'. On line 44, we have an alternative, which uses string concatenation to combine the string hello with the space and the string world. At first glance, it might seem like we have no reason to concatenate strings if we could just write them as one big long one. In this case, we get a similar result whether we do option one  on line 43 or option 2 on line 44. However, things get trickier in bigger programs. This is because sometimes strings may need to be more dynamic to make our programs more dynamic. Let's take a look at an example of what this might look like. Let's first add two new console.logs . The first console.log on line 46 will say console.log 'Hello Molly' A specific person named Molly. Let's also, add a second string that will also reference the name of Molly. We can add console.log and we'll say, "Molly is great" We'll add our semicolon, we'll go ahead and comment out these two lines just for now. Add that now and we can move forward. Now we have two strings that reference the name Molly, but there's an issue. What if instead of Molly, we wanted to use another name, such as Muhammad or Emmy. We would have to go to both lines or any amount of lines in a program that referenced the name Molly and change it to the name that we want. This can be a bit cumbersome and probably not a good use of our time. However, JavaScript gives us a tool called variables that can help us solve the problem. While I will give a brief introduction to variables now, don't worry we will cover variables more deeply in a later lesson. For the purposes of demonstrating the usefulness of string concatenation, we will learn a bit about it now. So, what is a variable? Well, a variable is a way for JavaScript to store a reference for a piece of data that can be reused across an entire program. For example, let's go ahead and make some space above our two console.logs . Say we wanted to save a name to our program, like Molly. We could create a variable to do so. Here, I'm going to write let name equal the string Molly and I'm going to add my semicolon. This tells JavaScript to create a variable called name and store the string value of Molly inside of it. We can then use the variable of name throughout our entire program. So, how exactly does this pertain to string concatenation? Well, we can use variables in string concatenation to make our programs more dynamic, thus proving the usefulness of doing string concatenation, in the first place So, instead of writing Molly directly in our strings, let's replace it with a name and concatenate it. Again, don't worry too much about the syntax that we're about to do, just pay close attention to the result. Let's go ahead and replace the instances of Molly. Here, on the first line of 48, we're going to remove that and add name. Also going to go over here, remove Molly, and then do name plus the string space is great. If we replace name in both instances and click run, take a look at the output. Looks like we made a small mistake where we didn't add a space after hello. Let's go ahead and correct that, and then run it again. Looks good to me. Here, we have Molly still being returned properly in each string. However, now if we wanted to change the name to say something like Emmy, we only need to change the value of the variable, like so. Go up to line 46 and instead of Molly, we'll put Emmy, a different name. Notice now, if we click run, what happens. In this case, every instance of name that was in our console.logs changed from Molly to the value of name, which is now Emmy. So, to summarize, we won't always be able to create a long string if we want to make our programs more dynamic. In this case, in this example that we looked at, we used string concatenation with variables to make our program much more dynamic and easier to maintain. If you feel a bit stuck on this whole variable thing, don't worry, we'll cover more about it soon. Instead, what you should take away from this is that string concatenation will be useful to make our programs more dynamic, more reusable, and more developer-friendly. Exercise 7: Properties In JavaScript, whenever we introduce a new piece of data, such as say, a string, JavaScript will create what is known as an instance. This means that it creates a new single unique entity of that type. Every data type has access to specific properties that are passed down to each instance we create in our programs. These properties can be accessed using the dot operator. For example, take a look at the following console.log. Here, we are saying console.log and outputting hello, and accessing the property called length on the string of hello. This property exists on any string we write in our JavaScript programs. All right, looks like we only have one checkpoint for this exercise, let's go ahead and see what we have to do. The first checkpoint says, "Use the length property to log the number of characters in the following string to the console. The string is, "teaching the world how to code." All right, we saw an example of this already, so let's go ahead and replicate it in the checkpoint. Let's say console .log and then we'll go ahead and copy and paste this string in here to save a little bit of time. At this point, we have to use the property of dot length to access the length of the string. So, we'll use the dot operator and then add length to the end of it. Don't forget our semicolon, and then let's run the code. Looks like the length of this string is 30. This includes white space characters like spaces. Alright, now let's move on to a community question about properties. Codecademy users on the forums have asked, "Why would the length of a sentence be important to know?" That's a totally valid question. In essence, users are wondering what are some actual use cases of knowing the length of a string. A very good example of one that might be useful would be an everyday login page. Let's go ahead and take a look at an example on the Codecademy login page. Take a look at the Codecademy sign up page. It looks very  similar to most signup pages that exist on the internet. However, notice that the password field in the form has a validation error. Here, I've put in an email and a password but my password doesn't actually meet the parameters, or requirements, that a password needs to have to make an account on Codecademy. You can find a bit more information here, where it's asking that our password has eight characters that contains at least one uppercase letter one lowercase letter and a bunch of other things. Here we have an error that says password must include at least eight characters in red color indicating that it's an error. This is a good example of where we might be using JavaScript to check the length of a string to make sure it matches some requirements. In this case, the error is being produced because our password is not eight characters long. There are other use cases that are popular, such as character limits on popular social media platforms, like Twitter. Here's an example on Twitter where tweets have a character limit and behind the scenes, it's most likely developers are counting the characters we typed to let us know that we've hit the limit. In this, case they've given us a red visualization to let us know that we're approximately 294 characters past the limit on Twitter. This is another great example of where we can use the length property to create some kind of validation on our web pages. Exercise 8: Methods Similar to properties which each instance of a data type can access, all data types also can access methods. Methods are special utilities that similar to properties like length, allow us to access specific data from an instance or even manipulate it. We use a method we call it by first adding the dot operator, adding the name of the method, and then lastly using an opening and closing parentheses Sometimes some of these methods will require us to put something inside of the parentheses, which will allow the method to perform its operation correctly. Let's take a look at an example. Here's an example of the usage of the toUppercase method. This method will take a string and convert it to all uppercase letters. Notice that when we call the toUppercase method  on the string hello, which is all lowercase, it returns a fully uppercase version of the string. Another useful example would be the start with method. Here, we call it on a string of 'Hey' and it will return a value of true since our method is checking that it starts with the letter H. Similar to before, you can find all the methods that a data type can use by visiting the MDN web documentation. You can also find all the methods and much more documentation by visiting Codecademy docs. Codecademy docs is our community driven collection of code documentation for popular programming languages and frameworks. For example, here's our page for strings, where if you scroll down, you can find a list of all the methods and properties you can access on a string data type. To navigate to the docs, go over to the resources tab, and in the first section of the navigation bar, head over to the JavaScript button and click that. When you have a moment, check out Codecademy docs  and take a look at all the documentation that we offer. Let's, now, move on to the checkpoints for this exercise and practice using methods in JavaScript. Alright, let's go over the checkpoints for this exercise. If you notice in app.js we already have some code provided for us. We'll be using this code as we go through both checkpoints. For the first checkpoint, we are asked to do the following, "Use the toUppercase method to log the string Codecademy to the console in all capital letters. Alright, let's go ahead and do that now. We'll go over to Codecademy in our console.log and we'll use toUppercase as a method and then run our code. If we take a look at our output, we can see that Codecademy has come up as all uppercase. Let's now move on to the second checkpoint. The second checkpoint has to do with white space. The second checkpoint says the following, "In the second console.log statement, app.js , we have a string remove white space which has spaces before and after the words remove white space. If we browse the JavaScript string documentation, we find several built-in string methods that each accomplish a different goal. The one method that seemed ideal for us is dot trim. Use the method to remove the white space at the beginning and the end of the string and the second console.log statement. You can take some time to click on the string documentation link and browse the documentation to take a look at the method. However, just for the sake of time since we know that we need to use the trim method we're going to go over here, type dot trim as a method, and then run our code. It looks like we successfully used the trim method to remove the white space. That's it for this exercise, let's move on to a community question. A Codecademy forums user asked, "This exercise mentions documentation but what is that and why/when/how do we use it?" That's a great question. Let's dive a little bit deeper into documentation. If you're getting into programming or even a seasoned software engineer, it is likely that you'll be working with documentation very often. So, what is documentation in the first place? Well, we already saw some examples of it but to put it plainly, documentation is any type of resource that helps you learn about specific technologies, features, and capabilities, such as a programming language like JavaScript. Developers use documentation whenever they need to learn about that specific technology that they're interested in. For example, like us, we're learning to program in JavaScript and so   documentation for JavaScript is very important to us since we want to know a little bit more about its features and capabilities. If you're feeling a little bit overwhelmed whenever you open a documentation link, don't worry, you probably aren't the only one. Documentation can be a bit intimidating. The important thing to remember is that while documentation might be lengthy, its goal is to help teach you about the specific features, methods, or whatever you're looking for in the documentation about the specific technology. Take your time with it and, eventually, reading documentation will become second nature. If you're looking for a beginner-friendly version of documentation, visit Codecademy docs, which we looked at a little bit earlier in this video. If you're wondering a bit more about how to, actually, use documentation, we'll provide a video resource for you in the video's description. Another commonly asked question by Codecademy users on the forums for this exercise is, "What is the difference between a property and a method?" At first glance, they do look very similar. Let's hop into the workspace to look at an example. Take a look at the code in the workspace, here we have some examples of properties and methods. If we take a look at line 53, we have a string which is using the dot length property. However, on line 56 and 57, we have methods, such as toUppercase and starts with. The main difference to notice is purely about syntax. When we're using methods, we always have to use a set of parentheses to call the method. Sometimes, as we can see in line 57, we actually have to provide some value inside of the parentheses for the method to function properly. In terms of what they actually do, in most cases, we can think of methods as actions and properties as qualities. A good analogy for this might be a house. For example, a house might have a property, which is the number of windows that the house has, whereas, it might also have a method which is the action of closing a window. Most things that we work with in JavaScript will both have properties and methods, and you'll be using them pretty often in your code. Exercise 9: Built-in Objects In addition to the primitive data types that exist in JavaScript such as strings and numbers, JavaScript also has another type of data called objects. We've actually been using an object all along because anytime we use console.log , we were actually using the console object. Objects like the console are built into the language and are classified as built-in objects. Built-in objects have their own custom properties and methods. For example, anytime we use the .log method when we use console.log we were using a custom method that belonged to the console object. Another example of a useful object is the math object. The math object gives us useful methods for performing mathematical operations in JavaScript. For example, take math.random . Here, we have the built-in object of math and the method.random that belongs to it. This method will return a random decimal number greater than zero, but less than one. So for example, an output could be something like this 0.764 and multiple digits beyond that. Another use case for math.random is generating a number between 0 and a specified number. In this case, we're specifying to.random to generate a number between 0 and 10. A random one, something like 6. We will practice using the math object and the checkpoints for this exercise. Let's hop over to the lesson to get started. In this exercise, we have four checkpoints. Let's get started with the first one. The first checkpoints are the following, "Inside of a console.log , create a random number with math.random , then multiply it by 100. All right, let's go ahead and do that. We'll go on our first line and we'll write console.log and inside will access the math built-in object with the method random. Close those parentheses, and then multiply it by 100. I'm  going to add our semicolon and then run our code. Looks like our result was a success and we got 48.6 with some decimal places after that. Awesome. Let's move on to the second checkpoint. The second checkpoint says the following, "Now use math.folder to make the output a whole number. "Inside the console.log you wrote in the last step, put the existing math.random times 100 code inside of the parentheses of math.floor . We did not touch on the math.floor method in the slides, it's actually covered in an exercise's narrative. To recap, it is a method that will round a number down to the nearest whole integer value. Let's go ahead and wrap our previous code in math.floor go up here, write math.floor, and then wrap the parentheses around this result. So, to recap, the value that will be returned from math.random times 100, in this case say we were working with 48.6, will be rounded down to the nearest whole number, in this case, if we were working with 48.6, we would get a result of 48. In this case, since we're getting a random number each time, it won't be 48.6 being used again, so we'll probably get a different number. Let's go ahead and run our code and see the result. Looks like our result is 89. Let's go on to the third checkpoint. Scroll down here and let's read what it says. "Find a method on the JavaScript math object   that returns the smallest integer greater than or  equal to the decimal number. Use this method with the number 43.8 , log the answer to the console. Feel free to pause the video and click on the documentation link for the JavaScript math object to find this method. For the sake of time, we're going to skip this. The method we'll need to use is called ceiling. Here's what it's going to look like. If we go here and add a console.log inside of here, we're going to access the math object and we're going to ceil. Inside of this, we're going to do 43.8 and add our semicolon. What will happen here is this will round it to the smallest integer greater than or equal to the decimal number. In this case, let's see what our result will be. Looks like 44 was our result and that's the result we expected since we're on point eight. This will round up and we'll get to 44 as is indicated by  our output. All right, now let's move on to the fourth checkpoint. Let's make a new space here and then read what the checkpoint is asking. Here it's asking, "Use the JavaScript documentation to find a method on the built-in number object that checks if a number is an integer. Put the number 2017 in the parentheses of the method and use console.log to print the result. Same thing here, if you'd like to take a second to look through the JavaScript documentation pause the video and then return when you've done so. For the sake of time, we're going to use the method directly in app.js . The method that we're looking for is isInteger. So, let's go ahead and go to our line, we'll do console.log , and here, instead of accessing the math object, we're going to look at the built-in number object. And this built-in object has a method called isInteger. This method will check if the number that's provided in the parentheses is an actual integer. Let's go ahead and add 2017, add our semicolon, and then run the code. Looks like that returned true and we've completed all the checkpoints for this exercise. If we scroll down, we'll notice that there are a couple of community questions from the forums. However, we've already covered the math.random and math.floor question, and the one that talks about portfolio is out of the scope of this lesson. We'll move on without covering a community question but feel free to visit this section and click on the questions to look it over yourself. Exercise 10: Review Congratulations, you've reached the end of the lesson. If you've made it this far you've taken a huge step to learning the JavaScript programming language. Let's take a second to cover what we learned in this lesson. First, we started with a brief introduction to JavaScript programming language, we talked about what JavaScript is, where it comes from, and why we might use it. We then moved on to doing some basic JavaScript programming. We talked about topics like the console and logging our output, how to write and use comments, different JavaScript data types, performing arithmetic with operators, string concatenation, and the basics of working with objects, methods, and properties. That's a whole lot of information that we've covered. Take a second to review any exercise you feel like you need a bit more practice with, and play around in the final exercise app.js file. All right, that  pretty much wraps it up for this video. I hope you enjoyed the lesson walkthrough and if you want  to get involved with the Codecademy community, visit our forums or the growing Discord Channel. Have a great day and happy coding!