A brief introduction

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)

x = 10

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

Imagine if this is a question:

x = 10 and y = 10
x + y = ??

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.

Variables in programming are containers for holding data.

Creating variables

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
For now you just need to know what are they - in a coming chapter we will explore much more into them.

One var keyword - multiple variables

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;
Here if you miss the comma or use a semi-colon instead of it and aren't in strict mode then the second statement will become a seperate statement and since it doesn't has the var keyword before it, the interpreter will create the variable as a global-scoped one.
var x = 10 // local scoped
text = "Hello" // global scoped
proceed = true // global scoped
However if you are in STRICT MODE then the interpreter will throw an error on such encounters. More on these concepts later.

Seperate declaration and assignment

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.

Changing variable values

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.

Variables in programming are containers for holding data that can be changed during execution of the program.

Hoisting - bring up

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 let keyword

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.

Conclusion

In conclusion, we say that variables are the most important part of progamming. Without variables our codes would not be efficient - in fact we couldn't even develop a tiny bit of today's complex web programs without using variables. They hold data and can be changed during execution which makes them very very useful.

Understand variables and you understand one third of programming basics. Forget about them, then also forget about programming.