JavaScript Variables

If you have done any sort of programming previously you might surely know about variables. In fact even if you have never done programming before you might have heard about variables in maths - algebra.

So what does this mean in maths (algebra)

It simply means that x is equal to 10. The variable x holds the value 10.

Imagine if this is a question:

What would you answer for x + y? 20? Yes that is right but for a moment think of it this way. What are x and y really doing over here? They are simply holding the values assigned to them. So now let's apply this concept to programming.

The following code creates variables x, text and proceed in Javascript.

var x = 10;
var text = "Hello";
var proceed = true;

We will now explain the code by addressing each part seperately.

Variable Declaration

The var keyword is used to declare i.e create a variable in JavaScript. Once the variable is declared it gets the value undefined assigned to it which simply means that the variable has no value.

So from the above code, the parts var x, var text and var proceed are known as variable declarations.

Unlike some other stricter languages, JavaScript doesn't require the user to specify the type of the variable like int for integers. We refer to this behaviour as loosely typed. You'll see more on this in the data types chapter.

Variable Assignment

The part after and including the = sign is known as assignment.

Assignment, in simple terms, means a value getting literally assigned to or holded in a variable. That value can be of various data types as you will see next in the coming chapter.

So from the code above, the parts x = 10, text = "Hello" and proceed = true are known as variable assignments.

Data Types

Amongst other things, you may have also noticed that we have different things assigned to the three variables above.

1. First what we have is a number 10.
2. Second we have a string "Hello". A string is simply just a text value.
3. Lastly we have a boolean true. A boolean is a conditional true or false value

In the code above we created three different variables but using the var keyword three times. This can be avoided by writing var once an creating variables seperated by commas.

var x = 10,
text = "Hello",
proceed = true;

var x = 10 // local scoped
text = "Hello" // global scoped
proceed = true // global scoped

You would at many instances come across code that looks some sort of similar to this:

var x, text, proceed;
x = 10;
text = "Hello";
proceed = true;

This is not much different from the first one you just saw. The only difference is that here declaration is done seperately and assignment seperately.

When do you need this? The place where we will mostly need this sort of functionality is in JavaScript functions when we want some variables to be globally-scoped, available outside the function, but assign values to them inside the function itself. We will talk about this in our functions unit.

Variables not just store data but also allow that data to be changed during the execution of the program. In simpler terms once you have assigned a value to a variable you can at any time change that value during the script. Consider the following example.

var text = "Hello World";
// code here uses the variable text as Hello World

text = "Hello Earth";
// code here uses variable text as Hello Earth!

Here first we gave the var text the value Hello World. Then we changed that value later in the script to Hello Earth. This is the reason we call these variables i.e they can vary. So this gives us a complete definition of variables.

Hoisting is JavaScript's default behaviour of bringing all variable declarations on top of their scope. Therefore even if you write the following code there won't be an error thrown.

text = "Hoisting Demo!";
console.log(text);

var text; //  declaring after use

Because it is exactly the same as this:

var text; // declaration on top

text = "Hoisting Demo!";
console.log(text);

Now as we said JavaScript only hoists declarations, the following code will not work as you might think!

var text = "Hoisting";
console.log(text1 + " " + text2); // Hoisting undefined

var text2 = "Demo!"

Only the declaration in the last line over here is brought up, not the assignment and therefore in the second line we have undefined in the variable text2.

The var keyword is not the only way to create variables. There is another modern way of creating them using the let keyword. The difference between these two lies in the concept of variable scope which we will discuss in detail together with let in a coming chapter.