2.1 Variables

Hi folks, in this lesson, we're going to start with one of the most fundamental concepts of JavaScript, variables. A variable is a named container for a value. Once we've declared a variable, we can then use the name or identifier of the variable in other places in our code to access the value that it holds. In JavaScript, there are three different ways to declare variables, the var keyword ,the let keyword, and the const keyword. Let's look at each of them in turn, starting with var. To declare a variable with the var keyword, we just need to provide a name for the variable. So this statement creates an empty variable with the identifier foo. In this case, the variable is only declared, it's not initialized or assigned a value. So it is automatically given the special value undefined. We'll look at undefined in more detail in the next lesson. There are some rules around the characters that we can use for a variable name in JavaScript. Technically, we can use any Unicode character in an identifier, but the variable name must start with either an underscore, the dollar sign, or a letter. Numbers can also be used in variable names, but not right at the start. Space characters cannot be used at all. If we need to declare multiple variables, we can use a single var statement with different variables separated by commas. In this case, three variables are created with the identifiers foo, bar, and baz. As well as declaring a variable, we can at the same time initialize it by giving it a value. In this case, we assign the value 42 to foo using the assignment operator, which is the equal sign. 42 is a number, but notice that we didn't need to tell JavaScript that the variable would contain a number, we just assigned it. JavaScript is known as a weakly or dynamically typed language. What this means is that unlike many other programming languages, when a variable is declared in JavaScript, we don't have to specify what type of value it will store. This is great because it means that any variable can hold any type of data. We can store one type of data, say, a string, and then later on, we can overwrite the string value with a number, for example. The downside to this is that sometimes we don't know for sure what type of data or variable it's holding. So we'll often need to check before trying to do something with the value. If we want to overwrite the foo variable later on, we can just assign a new value to it. This time, we don't need to use the var keyword. One thing to watch out for with the var keyword is that it can create variables in the global scope. JavaScript has three different scopes, global scope, function scope, and block scope. And we'll be looking at scope in much detail later in the course. If a variable is defined in the global scope, it can be accessed by any other JavaScript that is loaded onto the page, even within other, separate JavaScript files. This can be useful in the case of libraries or frameworks. But it can also be dangerous because if other code can access it, other code can also change it. And this can make your program break in ways that are extremely hard to debug. Global scope should be avoided wherever possible, which thankfully is most of the time. Function scope means that a variable is only visible within the function it is declared in. When we declare a variable inside a function, the variable only exists in that function's scope, and cannot be accessed by code outside of the function. Again, don't worry too much about this for now. We'll come back and look at functions and scope in much more detail soon enough. Block scope means that a variable is only visible within the block it is declared in. A block in JavaScript is generally any number of expressions, enclosed within curly braces. Block scope is a common feature of many programming languages, but it's only recently been added to JavaScript in the last few years. So the var keyword that we've looked at so far only works with global or function scopes. If we use the var keyword inside a block, the variable will still be accessible outside of the block. If we want to enable block scope for a variable, we need to declare it using the let keyword. Syntactically, let is very similar to var, it just differs in terms of scope. With let, if we declare a variable inside a block, the variable is only visible inside that block. We haven't covered blocks yet, we will come to that later in the course when we get to section four. For now, just remember that for block scope, we need to use let. The final way of declaring a variable in JavaScript is with the const keyword. The const keyword is similar to let in that it can make use of block scope, but it has one important difference. The const keyword creates a constant value that cannot be changed through reassignment. So we can't, for example, do something like this. This will actually throw an error because we're trying to reassign the value of baz to 43. But it was declared using the const keyword. So in this lesson, we learned the three different ways that we can declare a variable, the var, let, and const keywords. And we saw the differences in behavior between them. We saw that the var key word only works with global or function scope. But that let and const are able to make use of block scope when used inside a block. In modern JavaScript, it is common to most often use let and const rather than var because of the global scope issues. In the next lesson, we will learn another fundamental aspect of JavaScript, the different data types that are available. Thanks for watching.