Javascript Tutorial part 3 - Data-types

In this article, we will discuss about the various Data types present in Javascript language. There are two types of variables in Javascript - Primitives and Objects.

* Primitives:

Following are the basic data types supported by Javascript;

  • Number
  • String
  • Boolean
  • Undefined
  • Null

Number:

Any numerical value - positive, negative and even float - all comes under one Data type.

var num1 = 1;
var num2 = 2.30;

String:

Strings are represented by series of text wrapped within single or double quotation marks. Strings can also contain quotation marks in themselves, and you need to escape(using '\') the particular quotation mark that is used to wrap the string.

var string1 = 'String 1';
var string2 = "String 2";
var string_with_quote1 = "String contains \"quotes\" within itself.";
var string_with_quote2 = 'No need to escape "unmatched quotes"';

Boolean:

There are only two valid values for a boolean variable -  true and false.

var bool1 = true;
var bool2 = false;

Undefined and Null:

Whenever a variable is not assigned any value, it is considered to be having an undefined value. You can also deliberately assign an undefined value. Null data types represents the absence of value. Please note that null and undefined doesn't mean the same thing.

// Undefined values
var var1 = undefined;
var var2; // var2 is not assigned any value, which means it is undefined.

// Null value
var var3 = null;


* Objects:

Apart from the primitive data types, rest all variables are considered Objects. Objects are actually composed of multiple items which can be borken down to other data types; while primitive types cannot be broken down into further entities. Following are the most commonly used Data types:

  • Object
  • Function
  • Array

Object:

In Javascript, everything is an Object. Objects are simple pairs of keyword and value similar to JSON. Each keyword(can be any Javascript Identifier) specifies some property for the object, while the value for a property can be simple integer, string, function or even another object. This notation of Objects as key/value pairs makes Javascript a simple yet powerful language. To create an object, you can use a constructor or simply define the properties inline while declaring the object. To access a particular property of an object, use a dot operator.

// Creating an object using constructor
var obj1 = new Object;

// Assigning object properties.
obj1.name = 'Pankaj Pal';
obj2.emp_id = 121;

// Create an object inline with declaration.
var obj2 = {
"name": 'John', // Key can be any identifier
emp_id: 211,
2323: "key_can_be_any_valid_identifier",
};


The inline creation of an object is known as Object literal notation. Internally, a constructor is anyways called. Consider the following creation of an object, which is same as how we created obj2 above:

var obj3 = new Object({
"name": 'John',
emp_id: 211,
2323: "key_can_be_any_valid_identifier",
});

Function:

A property of an object can also be a function, which is known as its method(similar to other Object Oriented Programming Languages). As it turns out, Javascript in itself doesn't have a concept of Class as such, but due to its ability to treat everything as an object - we can leverage the benefit of OOPs.

var obj1 = {
'my_printfn': function() {
console.log('Hello World');
},
id: '12345'
};

obj1.my_printfn(); // Would print "Hello World" on console.

Arrays:

Array is yet another form of Object where the values are ordered by the index. Array indexes in Javascript are zero-based, i.e. the first element starts at index - 0. Arrays can be created by either using a constructor or using Array Literal notation (similar to Objects).

// Using Constructor
var arr1 = new Array;

// Array Literal
var arr2 = [];

// Initializing the array
var arr3 = new Array(1, 2);
var arr4 = [1, 2, 3];

// Special case: If only one value is specified in constructor
var arr5 = new Array(10); // size of array will be 10.

Arrays being Objects have several methods which can be used to manipulate the data. 'length' is one such method, which returns the current length of the array. 'push' is used to add an element at the end of the array, while 'pop' is used to remove the last element. 'join' method can be used to concatenate the whole array in string form. There are many such utility methods, you can find a detailed explaination of all of them here.

* Check the Data type

Because of the simplicity of Javascript Object syntax, it is very easy to get carried away and later on forget what property holds what kind of Data type. Fortunately, Javascript provides a way to handle this situation too. Using 'typeof' operator we can get to know of the real Data Type.

var var1 = 10;
var var2 = new Number(10);

console.log(var1 === var2); // returns false as var1 is primitive and var2 is an Object

console.log(typeof(var1)); // Number
console.log(typeof(var2)); // Object


var myfunc = function() {
console.log('Hello World');
};

var obj1 = {'id': 123};
var arr1 = ["hello", "world"];
var str1 = "helloworld";

console.log(typeof(myfunc)); // Function
console.log(typeof(obj1)); // Object
console.log(typeof(arr1)); // Object (not what you expected !!)
console.log(typeof(str1)); // String
console.log(typeof(null)); // Undefined
console.log(typeof(undefined)); // undefined
console.log(typeof(zyx)); // undefined (undefined variable)


Let us finish up here, before it gets too long. We have covered the very basics of the Data types provided by Java. Mozilla Developer Guide is good resource to explore things in depth. We will meet in next chapter where we will discuss about the common operators provided by Javascript.
comments powered by Disqus