Variables in Javascript

In Javascript variables are declared with var and assigned with an equals (=). Javascript's core variable types are number, string, Boolean, null, undefined and object. String and number are the mainstay of most Javascript applications.

String (that is text) values are placed in quotes or double quotes.

Numbers, including both integers and decimals are not placed in quotes.

If two number variables are created then mathematical operators can be used on them.

var age = 21;
var increaseAge = 4;
console.info(age + increaseAge);

You should see the value '25' output in the console window. Notice we could have produced the same output with this:

var age = 21;
var increaseAge = 4;
var newAge = age + increaseAge;
console.info(newAge);

Spot the difference? There is a third variable this time called newAge that is assigned the sum of the other two variables.

Try changing the code to:

var age = "21";
var increaseAge = 4;
var newAge = age + increaseAge;
console.info(newAge);

... and check the console. Oh dear Javascript isn't very good at adding up we are getting a value of 214. What is going on here is that Javascript is not adding the values but concatenating them. Con what? Concatenating is the techie term used for gluing two string values together. Notice how in the code we changed above the age variable was assigned a string/text value not a number as the value was in quotes. Javascript can't add strings in the same way it can add up numbers. So instead it glues / concatenates the age string to the increaseAge variable. Javascript treats the increaseAge variable as a string in this calculation because it is been concatenated to a string.

Warning: Be careful with the quotes. If you want something treated as a number then don't use quotes. If it is text then use quotes.

There are times when of course you would like to concatenate string variables.

var firstName = "Martin";
var surname = "Cooper";
var fullname = firstName + " " + surname;
console.info(fullname);

Notice that in the above example we are actually concatenating three strings. They are "Martin", then a whitespace and then "Cooper". If we didn't concatenate in a whitespace then the console would read MartinCooper with no space.

Javascript has lots of properties and method to help manipulate strings - related posts Javascript URL String Fun, Addressing the Problem - String Manipulation with Javascript and replaceAll.

Booleans

Booleans are simple true / false flags. To create a boolean variable we would use:

var staff = true;

Note that with a boolean only the values true and false can be used and that these are not placed in quotes.

null vs undefined

There is a subtle difference between null and undefined data types. A null data type is assigned to a variable that has been defined but not assigned a value ie:

var myWeight;
console.info(myWeight);
// output undefined

The null data type is used when you deliberately want to set a value to null as opposed to leaving it undefined.

var myIQ = null;
console.info(myIQ);
// output null

Lots of Variables at Once

We can also declare lots of variables in one go ie:

// declare
var firstName, surname, age;

and then initialize them.

// declare
var firstName, surname, age;
// initialize
firstName = "Martin";
surname = "Cooper";
age = 21;

Its Got to be a loose fit

Javascript is a loosely typed language. This does not mean you can just hit the keyboard randomly and hope for the best but that variable type does not have to predefined. In many other programming languages when a variable is declared the variable type also needs to be declared. Javascript is 'looser' and allows you to create a variable as one data type and then change your mind later on. It is generally not a good idea to do so but the flexibility to do so is there.

var age;
age = 21;
// and then later change to a string
age = "Young and Dumb";

Tip: A great way to experiment with Javascript is to use jsFiddle. You could cut and paste these examples into jsFiddle to experiment with the code.

2 Comments

  1. vishal
    Mar 10, 2014 @ 13:20:48

    Hello sir,
    can u please reply me how to concatinate these two variable's value?? in jquery...

    var var1=March27;
    var var2="Vishal";

    after concatination output should be...

    var output=March27Vishal;

    thank you for help,in advance...

    Reply

    • admin
      Mar 12, 2014 @ 16:40:04

      You need to put your strings in quotes ie

      var var1="March27";
      var var2="Vishal";
      var newvar = var1 + var2;
      

      See this codepen

      Reply

Leave a Reply

*