Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:18Length:1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Variables

In this lesson, you’ll learn about variables. If you’ve ever used a CSS preprocessor like LESS or Sass then you’re already familiar with the concept of “variables”. Variables are used to store data in a specific format. They can contain numbers, strings of characters, and so on. Let’s learn more.

2.1 Variables

Welcome to lesson number two where you'll learn about variables. Now, if you've ever worked with a CSS pre-processor like LESS or SASS then you're already familiar with variables. These store values of specific data types, for example, you can store numbers, you can store strings of characters and so on. So, in JavaScript, things are very similar. To declare a variable, that's where you start, right? You declare a variable, and you do that with the keyword var. Now, following this keyword var is the name of the variable, or the identifier. Now you have to be careful when naming your variable because identifiers have specific rules. They can contain letters, digits, underscores and dollar signs, they must begin with the letter. So for example, if I do three or two followed by some letters, that's not valid. The names can also begin with a dollar sign and underscore, but we're not gonna use them in this tutorial. And also names are case sensitive, so Bob here is different than Bob with a capital B. These are two different variables. Also remember that reserved keywords from JavaScript are also prohibited from being used as identifiers. So for example, if I do var var, that's not correct because var is a reserved keyword in JavaScript. So let's think of a simple variable, let's say Item, and then we're going to end that line. If you want to define another variable, we can do again var item2. But you can also do it var item colon and then item 2. Now, this right here is not a valid identifier because it has a space. So, either concatenate them like this or use an underscore. Now, how do you set a value in a variable? Well, after you've defined the variables, you can call them like this item equals and you can specify a value. I'm gonna say 5 here and then item2 equals 2. I'm gonna put a string, I'm gonna say hello. So now, the variable item holds the value of 5 and the variable item 2 holds the value of hello and this is a string. So how do you call these variables? Well very simply by their name or by their identifier. So if I go back in our page here and I open up the console and I say item, that's gonna print five. If I say item 2, it's gonna print hello. If I say item space two, it's gonna give me a syntax error. So that's the easiest way to work with the variables. Now, variables also have something that's called scope. And scope refers to the context in which these variables are available. If you define a variable like this the way I did it, item item 2, they have a global scope, which means they are available globally. But, as you'll find out in a later lesson, you can also create a local scope inside, for example, a function or a specific block of code. In that case, that variable, which has local scope, is only available within that function or that block of code. But I'm just mentioning this right now. We'll go into more detail further down the line. But that's about it for variables, just a quick lesson. Now as I was saying in the beginning, variables can hold multiple data types. And we'll be learning about that in the next lesson, see you there.

Back to the top