1.The Object
Introduction
As an intermediate javascript developer you might already know what object in javascript means, but it is best to start with little basic. To be exact, an Object is simply the collection of key value pair, the key is called property and value holds other javascript object or primitive typed value.
1 var obj = {
2 property1: 1, //Primitive typed value
3 property2:{}, //Object as value
4 property3:function(){}, //Function object as value
5 .....
6 };
In addition to this, javascript is equipped with its own build in standard objects like Object, Function, null, undefined, Date, Number, String, etc. Click here for the complete listing.
Enough of basics, let dive into the core !
Built in properties
Every javascript object has build in properties we will be covering some the them, they are
- constructor
- hasOwnProperty
- isPrototypeOf
- propertyIsEnumerable
You won’t be using most of these in your day to day life, but learning these will be helpful when you do some deep stuffs. so lets begin.
constructor
Usually this property hold the reference to the function object which is the creator of that object. for example Lets say an object is created by the function.
1 function foo()
2 {
3 }
4
5 var obj=new foo();
6 console.log(obj.constructor==foo); //Result:true
Here the constructor property holds the reference to the function foo which is the creator of the object. Similarly when an object is created
1 var obj = {};
2 //This is equivalent to
3 //var obj=new Object();
4
5 console.log(obj.constructor==Object) //Result:true
hasOwnProperty
This is a function in object which is used to test whether a specific property is there in the object or not. There are traditional ways available to do that but what difference does this function make ?. Lets consider an object
1 var A={
2 property1:1,
3 };
4
5 console.log(A.property1!==undefined); //Result : true
6 console.log(A.hasOwnProperty('property1')); //Result : true
Both the methods are used to test whether the property is there in the object or not, Now consider the below scenario
1 var B={
2 }.prototype={
3 property1:1,
4 };
5
6 console.log(B.property1!==undefined); //Result : true
7 console.log(B.hasOwnProperty('property1')); //Result : false
hasOwnProperty return false since the property1 is not direct property of object B and it is linked through prototype chaining. During for-in loop iterations this function is used in order to prevent iterating the properties belong to prototype chaining.
isPrototypeOf
This is a function which is used to check whether an object is in prototype chain of the current object. For example consider the following piece of code.
1 var A={};
2 var B=Object.create(A); //B is now in prototype chain of A.
3
4 A.isPrototypeOf(B); //Return true.
Object B is created with A as prototype, Since B is in prototype chain of A, isPrototypeOf returns true. We will be covering the prototype property in the later chapter.
propertyIsEnumerable
When ever you define a property for an object it is enumerable in for-in loop.
1 var A={
2 property1:1,
3 property2:2
4 }
5
6 for(var index in A)
7 {
8 console.log(index);
9 }
10
11 //Result:
12 //property1
13 //property2
14
15 A.propertyIsEnumerable('property1'); //return true
16 A.propertyIsEnumerable('property2'); //return true
But there is a way to define property which is non enumerable through for-in loop.
1 var B={
2 property1:1,
3 }
4
5 //defining property2 as non-enumerable
6 Object.defineProperty(obj, "property2", { value: 2, enumerable: false });
7
8 for(var index in A)
9 {
10 console.log(index);
11 }
12
13 //Result:
14 //property1
15
16 B.propertyIsEnumerable('property1'); //return true
17 B.propertyIsEnumerable('property2'); //return false
In the above example property2 is non-enumerable and wont be visible in for-in loop.
Pass by reference
In Javascript, by default object are pass by reference in nature, for example
1 var A={
2 value:1
3 };
4
5 function foo(obj)
6 {
7 obj.value++;
8 }
9
10 console.log(A.value); //result:1
11 foo(A);
12 console.log(A.value); //result:2
As you see the object A is passed to function foo and the changes done in that object is actually reflecting in the object A since it is pass by reference.
undefined and null
As a javascript developer you already came across these strange thing called undefined and null. But what is the exact difference.Lets consider an example.
1 alert(undefine==null); //result:true
2 alert(undefined===null); //result:false
Why is that ?. As you might already know the fact == compares only the value and === compares value and type but still not clear right, let me explain
1 alert(typeof(undefined)); //result:undefined
2 alert(typeof(null)); //result:object
As you see the type of undefined is undefined and type of null is object , null is used to represent the empty object and undefined is used to represent the property which is not yet defined in the system . which mean when you try to access the property which is not yet defined in the object , system will equate that to undefined.
getter and setter
What if when a value of property in an object is set and you want to get notified on value change. This can be accomplished using getter and setter. For example.
1 var _property;
2 var obj={
3 get property(){
4 console.log('getter called');
5 return _property;
6 },
7 set property(value){
8 console.log('setter called');
9 _property=value;
10 }
11 };
Now, when we access the property value
1 obj.property;
2 //result:getter called
when you set the value
1 obj.property='value';
2 //result:setter called
Similarly when you want to make an object property to be read only you can define only getter. For example
1 var _property;
2 var obj={
3 get property(){
4 console.log('getter called');
5 return _property;
6 },
7 };
8
9 obj.property='value'; //This don't affect the property value.