OOPS with JS - Part 2

in the first part i covered few points about encapsulation and creating constructor methods. now it's time to dig more.

for novices: in JavaScript we can create the objects with new operator and with object literal .

//with new operator

var myObject = new Object()// creates an empty object;

var myEmployee = new Employee() // creates an Employee object;

//with object literal notation

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

var myEmployee = {name:"srinivas"} //created object with name property.

we will use . operator to access the properties and methods on an object.

alert(myEmployee.name) //srinivas

now it's time to create a base class / parent class.(as usual we need to create a function nothing more else).

function Parent(){

this.whoAmI = "parent";

}

we created a function called Parent. remember JavaScript functions are objects. also remember objects may have properties and methods. so our Patent function also an object (don't be scared just imagine every thing is an object). Parent function is having some methods and properties. let's check some important properties and methods.

Properties

1. constructor
2. arguments // deprecated
3. arity
4. length
5. name

Methods

1. apply
2. call
3. toString

some more browser, JavaScript engine specific functions also available. but above are most important. i will discuss each of them when ever they required. apart form these, there is one  more rule of thumb : in JavaScript every object have a property called prototype. that holds an object.

//createing a object

var myParent = new Parent();

//whoAmI is called as object's own property

alert(myparent.whoAmI)//parent

//our parent function also an object so we will have a prototype property for this.

alert(typeof(Parent.prototype))//object

OOPS with JS - Part 1

JavaScript doesn't have any class structure. but you can use constructor functions as classes.creating a constructor function is simple (just like creating a normal function). and you can have public members, private members, static members, privileged members(it is a way to access private members of your constructor).

//simple constructor function

function Employee(){
//private property

var name = "default Employee";
//private function

function setDefaultSalary(){
return 5000;
}
//public property

this.defaultCommision = 300;
//privilaged method

this.displayEmployeeInfo = function(){

alert(name + " Salary: " + (this.defaultCommision + setDefaultSalary()));
}
}

you done with constructor function. now it's time to play with Objects. creating a object of Employee type is easy. JS provided a new Operator for this.

 //Object creation based on your Constructor
var myEmployee = new Employee();

//you can't acess private members
alert(myEmployee.name)// undefined

//you can acess public memebers
alert(myEmployee.defaultCommision);//300

//privilaged method
myEmployee.displayEmployeeInfo();

before going to dig more on the Object Oriented features in JavaScript remember that for JS developers functions are objects... blindly remember objects hold properties and methods.

Few observaions while comparision

Few days back i am debugging some code in my project. while checking some if conditions i observed below behaviors with the == and === operators. may be these will help you in some situations...

var myvar;
alert(myvar)//undefined
alert(typeof(myvar) == undefined); // false
alert(typeof(myvar) === undefined)  // false
alert(typeof(myvar) == "undefined") // true

// different from the  above one
alert(undefined == myvar) //true
alert(undefined === myvar)//true
alert("undefined" == myvar)//false
alert("undefined' === myvar) // false

observation with Boolean is different from undefined
var myvar = false;
alert(typeof(myvar)// boolean
alert(typeof(myvar) == boolean)//ReferenceError: boolean is not defined

alert(typeof(myvar) == "boolean");

alert(typeof(myvar) == "boolean")// true

observations while comparing boolean values with strings
alert(myvar == "")// true -- false is a empty string?
alert("" == myvar) // true -- same result as above
 

alert(typeof(myvar) == typeof(myvar));

alert(undefined === myvar)

alert(typeof(myvar) == "undefined"); 

alert(typeof(myvar) === undefined); 

alert(typeof(myvar) === undefined); alert(typeof(myvar) === undefined); 

 

Few observations with Boolean, NULL and NaN in JavaScript

Boolean is the one of primitive data type in the JavaScript. Below are the some observations while working with the Boolean.

// scenario one

var myBool = true;

alert(typeof myBool);//boolean

alert(myBool instanceof Boolean)// false

//scenario two

var myBool = new Boolean(false);

alert(myBool);

alert(myBool instanceof Boolean);//true

//numerics as Boolean

var myTruthValue = 0;

alert(Boolean(myTruthValue));//false

var myTruthValue = 1;

alert(Boolean(myTruthValue));//true

var myTruthValue = -1;

console.log(Boolean(myTruthValue));//true

when ever you are converting 0 to Boolean it yields false, other than 0 it may be a positive or negative it yields true;

var myTruthValue = 0;
alert(Boolean(myTruthValue));
alert(Boolean(myTruthValue) ==  false);// true


var myTruthValue = 1;
alert(Boolean(myTruthValue));
alert(Boolean(myTruthValue) ==  false);// false

//strings as Boolean

var myBool ="a";
alert(Boolean(myBool));//true

var myBool ="a";
alert(Boolean(myBool));//true

var myBool ="";
alert(Boolean(myBool));//false

alert(Boolean(myBool) == true);// true

Some observations with NULL
var myvar = null;
alert(typeof myvar)//object

//null is an Object?..... try with instanceof
alert(myvar instanceof Object);//false

var myval = null;
alert(myval == null);//true

Some observations with NaN

Nan means not a numeric value.we can check a given variable or value is numeric or not...for that we can use isNaN(value).. 

var myval = NaN;

alert(typeof myval);// Number

//one more surprise, NaN is Number?....

alert(isNaN(myval))//true

alert(isNaN(myval))//true

//NaN and numaric string literal

var myval = "-20";

alert(typeof myval);// string

alert(isNaN(myval))//false

myval = parseInt(myval);

alert(typeof myval);//number

alert(isNaN(myval))//false

//one more observation 

alert (NaN == NaN);//false 

var myvar = NaN;

alert (myvar == NaN);//false

i hope above observation will help you in some situations while coding... happy coding friends....

var myval = NaN;
alert(typeof myval);// Number

var myTruthValue = 1;
alert(Boolean(myTruthValue));//true

var myTruthValue = 1;
alert(Boolean(myTruthValue));//true

Type Checking in JavaScript

We have only few types in JavaScript those are 

1. Number 
2. String
3. Boolean
4. Undefined
5. Null
6. Object

JavaScript is a loosely typed language. same variable can take different types in different situations. because of this reason it's better to have a type checking functionality in the scripts.

With the typeof operator you can check a variable type. instaceof operator yields true or false whether a given type is an instance of particular type.

You can create object wrappers for number, string, and Boolean datatypes.

//Number

var myNum = 10;
console.log(myNum); //10
console.log(typeof myNum); //number

var myNewNum = new Number(10);
console.log(myNewNum); //10 console.log(typeof myNewNum); //object

myNewNum.constructor; //Number() 

//string

var myStr = "srinivas";
console.log(myStr); //srinivas
console.log(typeof myStr) //string

var myNewStr = new String("srinivas");
console.log(myNewStr); //String{0="a",1="r" 2="i", more...}
console.log(typeof myNewStr) //Object

myNewStr.constructor //String() 

//Boolean

var myBool = true;
console.log(myBool); //true
typeof(myBool); //boolean

var myNewBool = new Boolean(true);
console.log(myNewBool); //Boolean{}
console.log(typeof myNewBool); //Object

//Object

var myObj ={};
typeof(myObj) //object
alert(myObj.constructor) //function Object() {[native code]}

var myNewObj = new Object();
typeof(myNewObj) //object
alert(myNewObj.constructor) //function Object() {[native code]}

What about arrays? JavaScript arrays are objects

var myArray = [];
typeof(myArray) //object
alert(myArray.constructor)//function Array() {    [native code]}

var myNewArray = new Array();
typeof(myNewArray); //object
alert(myNewArray.constructor) //function Array() {    [native code]} 

so how can you check a given type is an array or not?In ECMAScript5.0 onwards Array methods included isArray methods. It yields a Boolean value.

var myArray =[];

Array.isArray(myArray);

We have compatibility issues with isArray() method. So how can we check is it’s an array or not? 

myArray  Instanceof Array //true