Servage Magazine

All programming languages have variables that can contain some values. The purpose of variables is to store information for long or short periods of time during a program’s execution so it can use the information in further calculations or for display. In JavaScript you should declare a variable like below:

var name = “John”;

The snippet declares a variable called “name” with the value “John”. However, it actually forgets to state the obvious: What kind of variable is “name”?

This is where data types come into the picture. The data type of a given variable tells JavaScript which kind of information to expect – and enables JavaScript to allow or prevent certain types of action with the given data. For example you can add two numbers, but not a number and a text string. JavaScript is pretty clever, so you don’t actually need to tell it what type of data a variable handles, but it is important to know that JavaScript differentiates between data types. Therefore the following walks you through the most important data types in JavaScript.

Undefined

If you declare a variable by giving it a name but no value, that variable contains a value of “undefined.”

var foo;

// This will output "undefined" in the console of your browser
console.log(foo);

Undefined is important for the purpose of detecting whether a variable has been set or not.

Null

You can assign “null” to a declared variable that should have no value. This is similar but not identical to “undefined”.

var foo = null;

// Outputs "null".
console.log(foo);

Numbers

You can assign a numeric value to a variable, which makes it usable in arithmetic operations.

var foo = 5;

// Outputs "5".
console.log(foo);

The variable “foo” now contains the value 5, and you can perform calculations with it like below:

// Outputs "10"
console.log(foo + foo);

Strings

Another type of data that can be saved to a variable is a string, which is basically a line of text. Enclosing characters in a set of single or double quotes indicates that it’s a string, as shown here:

var foo = "five";

// Outputs "five"
console.log( foo );

The variable foo is now treated exactly the same as the word “five”. This applies to any combination of characters, letters, numbers, spaces, and so on. If the value is wrapped in quotation marks, it will be treated as a string of text. If we were to wrap the number five (5) in quotes and assign it to a variable, then that variable would not behave as a number, but it would behave as a string of text containing the character “5”.

Earlier we saw the plus (+) sign used to add numbers. When the plus sign is used with strings it “glues” the strings together (called concatenation) into one long string, as shown in this example:

var foo = "bye"

// Outputs "byebye"
console.log(foo + foo);

Notice what JavaScript returns in the following example when we define the value 5 in quotation marks, treating it as a string instead of a number:

var foo = "5";

// Outputs "55"
console.log( foo + foo );

If we concatenate a string and a number, JavaScript will assume that the number should be treated as a string as well, since the math would be impossible.

var foo = "five";
var bar = 5;

// Outputs "five5"
console.log( foo + bar );

 Arrays

This data type is available in most programming languages and can be best described as a list. The list can contain other variable values.

// Declares an empty array
var myArray = [];

// Declares an array with the values 1, 2 and 3
var myArray = [ 1,2,3 ] ;

Arrays are useful because they can collect multiple pieces of information.

Objects

This data type is also available in most programming languages, and is probably the most versatile and smart data type.

// Declare an empty object
var myObject = {};

// Declare an object with two named properties (like variables inside the object).
var myObject = { name: "John", age: 5 }

// Outputs "John"
console.log( myObject.name );

Objects let you collect and store information in small “containers” and recall it using dots between the object and property name like “myObject.name”. Essentially most other data types are treated like objects in one way or another, as they open up access to multiple functions that can be used on such objects – depending on the object’s type.

Take the above array for example:

// This adds the value 4 to the end of the array, so now it contains 1, 2, 3 and 4.
myArray.push( 4 );

// Declare a string value to a variable
var foo = "Some Text";

// Get the length of the string
console.log( foo.length );

More about data types

Understanding data types and their capabilities is one of the most crucial parts of understanding JavaScript and being able to make good scripts. Use the following resource to get a deeper knowledge:

• W3Schools JavaScript Data Types