Introduction to Variables – JavaScript 101

JavaScript 101 is a series of instructional videos given by DevMountain Web Development Instructors. Click here to see the entire video series

Variables are an important aspect of coding that you’ll have to understand as you continue to develop your programming skills. Variables can be used for many different things, but they are mostly described as a way to store data and keep track of information. In this video, you will learn about variables and how to apply them to your code.

Video Transcription

Variables are one of the most common concepts that you’re going to do in code. No matter what you’re making, you’re probably going to use a variable to help you solve your problem. We do that by assigning information to a unique identifier or a keyword. If you’ve ever used a letter in math, you know what I’m talking about.

What are variables?

Variables are storage, specifically they’re storage for data. All code is data underneath. We can store numbers, symbols, sentences, pictures, all sorts of things inside of variables. There’s a huge number of things that we can store, and we’ll dive deeper into those in a later video. What we want to talk about now is that each variable is identified by a unique name that you give it. The computer remembers your variable by this name exactly as you wrote it. Once you’ve made a variable, the label you give it is attached to the data stored inside of it. Then whenever you write out an identifier for the variable, the computer will understand that you are actually referring to the data stored inside of it.

Understanding Variables

If we were to look at this another way, variables are like buckets with labels on them. Buckets can hold all sorts of things. Let’s say we had three buckets: water, sand, and gummy bears. We put a label on each one that matches, water, sand, and gummy bears, so we can remember what’s inside. If we were to ask our friend to bring us the bucket of gummy bears and simply say bring me the gummy bears, he’s going to bring you the entire bucket. He’s not going to bring you each gummy bear one at a time. He’s not going to rip the label off of the bucket and just give you a label that says gummy bears. He’s going to bring you what was stored behind the label.

Using Variables in Programming

Variables have a lot of uses in programming. We can shorten long series of data or complex operations and put them on a variable. We could also take large pieces of data and put it on a variable, and then use that variable to share with other parts of our application.

Another use of variables would be to put a piece of code behind it. We can then actually tell that code to run at a later time simply by referencing the variable and telling it to go.

One of the main ways that we’ll use variables is to simply store and keep track of information. Websites use them to remember names, passwords, birthdays, and a whole host of other information. If we were to use a basic application that’s going to help us give a countdown to our birthday, the application might ask us for our first name and store it in a variable called first name. Then it might ask us for our birthday and store it in a variable called birthday. The application could then access the birthday variable at a later time, compare it with the current day, and count down how many days for us. It then can access birthday again with our name and show us a countdown of how many days to our birthday along with our name and the current date.

A Common Snag

One of the most common snags that people hit as they start learning variables is learning to tell the difference between a variable and the data that it’s representing. A lot of times we’ll go to use data when we should be using the variable name instead. To overcome this we’re going to want to put in quite a bit of practice so that it becomes familiar and common to us. Let’s dive into some practice next.

Practice

The simplest form of creating a variable is with a var keyword. When we type in the var keyword we then provide a label like name. This combination of var plus whatever label we want to give it tells JavaScript that we’re going to create some data and we need a place to store it.

Now that we have a place to store it, labeled name, we can tell it what to store with a single equals sign. Var name equals, and my name is Jeremy. Now, JavaScript has a value called Jeremy that is stored in a location tagged with name. You’ll notice this pattern started with a keyword, and then we provided a label, an equals sign, and then a value. I’m going to common this out so that it doesn’t break my code later.

We’re going to see this pattern repeated a few times. We can also vary this pattern by providing a keyword and a label only, and later on we can use label equals value. Keyword label sets up a storage. The equals sign is what puts something into storage. This half of creating a variable is called a declaration. The second half of a variable creation is called the assignment.

Let’s see some examples of that with the actual code instead of just the place holders there. I could do var email and end that statement. Then I can then assign email a value later, so email equals hello@hello.com. This is not my email or a valid email. Here I have both patterns visible. I’ve got the declaration and assignment on a single line. This part is the declaration, and this part is the assignment. Technically this part is the assignment because that’s telling us where to put it. This part is declaring a variable, and this part is assigning a variable. You’ll see variance on both of these patterns used a whole lot throughout JavaScript. This is going to become really familiar really quick.

We provide that distinction because there’s a few other things that we can do. One of those things is some new keywords that were introduced in ES6 fairly recently to the JavaScript world. Those keywords are let and const. Let and const work just like the var keyword does except they do have some extra functionality. Const makes it so that we cannot modify a value, so const hello equals hello. Then if I try to change hello to be goodbye, JavaScript will throw an error at this telling me that this is not valid. You don’t have to take my word for it. One of the neat things about our code editor here is that it gives us a couple tools to test what our code does.

First of those is found here in this debugging icon off to the side. I click on this and then I have a green arrow up top. By clicking that button it will run my code. You may see a prompt that asks you to select another option. If you see node in that list, select node, and then everything will work properly, but it should just go for you.

I ran my application as I was explaining that. It finished running and it gave me a whole bunch of red text here. Red text in programming means we’ve got a problem, something is broken. It’s telling me that I have an error and that error is that assignment to a constant variable. We did just that.

We created a constant variable and then we tried to assign to it a second time, and so it didn’t work. If I delete that and push the green button again, my console gets wiped, it runs through the code, and this time I get no error. I also don’t get any output by default. This area that we’re working with here is called a console. To interact with the console in our code we can type console.log, and then tell it what we would like to see. We could give it a string like this works. I’m going to run the code again by clicking the green arrow, and I see this works.

Even more useful is to ask it to provide for us the values located on the variables. I can say tell me what is found on email. Console log out email for me. I’m going to hit the arrow sign and it logged out the value on email. Another neat thing about console log that’s really useful is we can chain these together. I can ask for email, name, hello. If I run our application using the green arrow again, I see the value of email, the value of name, and the value of hello. We use the labels associated with the variable, but whenever we type that label separately from the declaration it accessed and gives us back the value instead.

We’ve learned about console log, debugging, vars, one more thing on the list here, let, as I mentioned just a minute ago. We can type the let keyword and it works just like var. Let’s do age equals 999. I’m pretty old. This is an age, and we put it on let, and it works just like var does with some exceptions that we just haven’t got far enough to get super into detail with. For the majority of this course we’re going to have you use the var keyword. Just stick with that and as you get more and more familiar with code you’ll start running into patterns where const or let might make more sense.

[cta id=”585″ vid=”0″]

Related posts