Learn JavaScript VARIABLE SCOPE in 5 minutes! 🏠

Alright, well it's time that we discuss variables. Do you remember from middle school or elementary school when you learned algebra? You had to solve for what the value of x was. x was some representation of a value. Well, that's kind of what a variable is in programming. It's a container that stores a value. The variable behaves as if it were the value it contains. There's two steps to creating a variable. Declaration and assignment. To use a variable, we have to first declare it. We'll use the let keyword, then a unique variable name, like x, then a semicolon. So what we've done is declaration. Each variable name needs to be unique. If I were to declare another variable named x, we would run into an error. A syntax error. Identifier x has already been declared. So your variable names need to be unique. I can declare two variables, x and y, and they both have different names. That is fine. But they can't have the same name. The next step to creating a variable is to assign it a value. Once you declare your variable, you don't need to declare it again. So I'm going to assign x to equal some number like 100. We can use this variable x, and it will behave as if it was the value 100. Let me demonstrate. So if I was to console.log x, well, then it's going to display 100. If I were to change this value to 123, well, x is now 123. You can do both declaration and assignment together. That would look something like this. Let x equal 123. This is both declaration and assignment. If you're creating a program and you know what your values should be, you can assign them a value right away. Sometimes you may want to accept some user input. So then you might do assignment later in two steps. It's really up to how you write your program. There's a few different data types in JavaScript. The first is number, like 123. Let's create a descriptive name for our variable like age. We will store a user's age. According to my analytics in YouTube, the average age of my viewers is 25. So let's say that my age is 25. Then if I was to console.log my age variable, it would behave as if it were the number 25. Let's create a few more variables. Another example of a number could be price. Let price equal 10.99. Maybe it's $10.99 or some other unit of currency of your choosing. Then we will console.log price, 10.99. What about a GPA, a grade point average? My grade point average is a solid 2.1. It's not great, but C's get degrees. Console.log GPA, 2.1. Using a template literal, we can insert a variable using a placeholder. Within console.log, I will use backticks. Let's write a sentence. You are, then to insert a variable, use dollar sign, curly braces. Place your variable name within the curly braces. Then we can continue our sentence. You are variable age, years old. Let's create another sentence using console.log. The price is dollar sign, curly braces, price. The price is $10.99. I'm going to insert a dollar sign before our price. And that looks better. Feel free to choose some other unit of currency. Let's add a sentence to display our GPA. Console.log, your GPA is colon space. We're inserting a variable. We need dollar sign, curly braces. We're displaying our GPA. Your GPA is 2.1. Now, if you need to display the data type of a variable, you can use console.log. Then precede the variable with the type of keyword. What is the type of age? Age is a number type. Price is also a number type. Same thing with GPA. They're all numbers. Let's go over a different data type. Let's go over strings. A string is a series of characters. Let's say we have a user's first name. To create a string, you can either use double quotes or single quotes. Personally, I like double quotes. Then you can type in some characters like a first name. Let's say my first name is bro. Feel free to pick your own first name. I will display the type of my first name variable. And it says it's a string, a series of characters. Then I will display my name. Console.log. First name. And it is bro. Or whatever your first name is, whatever you put here. Let's include our variable within a template literal. Your name is, add a placeholder, first name. Your name is bro. What are some other examples of a string? Maybe somebody's favorite food. Favorite food. My favorite food is pizza. Type in your favorite food. Console.log. You like, add our placeholder, favorite food. You like pizza. Maybe if I like something else, like sushi. Well, you like sushi. Okay, another example of a string could be an email. Let email equals. Then type in your email. I'm just going to make one up. Bro at gmail.com. Console.log. Your email is email. Your email is bro at gmail.com. Let me make the g lowercase. Now, an important thing with strings is that strings can contain numbers. After bro, I'll add one, two, three. So a string is a series of characters. They can include numbers, but we can't use these numbers for any sort of math. Strings have a different behavior from numbers. Numbers we can use in arithmetic expressions. Strings, not so much. All right, let's turn these lines into comments. Then I will discuss booleans. Okay, booleans are either true or false. Typically, they're used as flags in your program. Let on line equal true. Booleans are either true or false. Is somebody online or are they offline? This is either true or false. I will display the type of my variable online. Console.log type of online. So online is a boolean variable. Let's display our variable within a template literal. Type in whatever your first name is. Bro is online. Then I will insert a placeholder. Add my boolean variable of online. Bro is online. That is true. If I were to change this to false. Bro is online is false. Booleans are typically used as a sort of flag. So another example could be for sale. Is something for sale or not? Let's say that we are selling, I don't know, cars. Is this car for sale? I could set this to be true or false. Let's console.log is this car for sale? Then I will add my boolean variable for sale. Is this car for sale? That is true. Another example, let's say that somebody is enrolled in school, like in college courses. We could say let is student. Is somebody a student? Are they enrolled? This can be true or false. Console.log enrolled colon space is student. Is the student enrolled in classes? That is true. So those are booleans. They're either true or false. Typically, we don't use them as direct output like you see here. We usually use them with if statements to check something. Like if somebody is online, do this. If not, do something else. Is a car for sale? If that's true, then display the car. If it's not, then hide it. We'll have more practice with booleans when we reach if statements. All right, now what we're going to do is we will close out of DevTools. We'll display some variables within our webpage. So let's delete everything we have. I'll create three variables. Let full name equals type in your full name. Feel free to add a space between your first name and last name. Let age type in your age. And let student equals if you're a student, type true. If you're not in school, type false. I am not in school anymore, so I will type false. We will go to our HTML file. Then add some HTML elements. I will add three paragraph elements. So that's one, two, three. I will give my first paragraph an ID of P1. Then let's do the same with the other two paragraphs. Let's rename the second as P2 and the third as P3. So to change the text content of an HTML element, we're going to type document, meaning the document of our webpage. Then we will get our element by its ID. Get element by ID. Then within a set of parentheses, within a set of quotes, we will select the ID that we need. Let's start with P1. Then add dot text content to change the text content. Then we will set this equal to a variable or a template literal. Let's begin with a variable. So full name. Our P1 element should display your full name. Let's do this with P2. I'm going to zoom out a little bit. P2 dot text content equals age. It says that I'm 25. And then P3. Let's display student, or better yet, is student. Let's change that. Is student. False. I am not a student. But you might be, though. That might be true. Then let's display our variables along with some text using a template literal. Let's copy our full name. Your name is, add a placeholder, place our variable name. Your name is bro code, or whatever your name is. Let's cut our age variable. You are variable age years old. You are 25 years old. And then let's cut is student. Add a template literal. Let's say enrolled. Are you enrolled in school? Add a placeholder. Paste our variable. Enrolled. That is false. I am not in school anymore. Alright everybody, so those are variables. It's a container that stores a value. The variable behaves as if it were the value it contains. There's a couple different basic data types. You have strings, which is a series of text, numbers, and booleans. There's more advanced data types, but we'll cover that later. And well, those are variables in JavaScript.