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)
It simply means that x is equal to 10. The variable x holds the value 10.
Imagine if this is a question:
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.
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.
- First what we have is a number
10
. - Second we have a string
"Hello"
. A string is simply just a text value. - Lastly we have a boolean
true
. A boolean is a conditionaltrue
orfalse
value
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;
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
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.
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
Understand variables and you understand one third of programming basics. Forget about them, then also forget about programming.