Objects

In JavaScript, an object is an instance of Object. You can create a new object as follows:

var obj = new Object();

In fact, real JavaScript developers rarely do so now. You can just create an object by an object literal.

var obj = {};

Both of them create an instance of Object but the object literal is apparently more efficient. In JavaScript, you can add properties on an object at any time. You can use the delete operator to delete properties. For example:

js> var obj = {};
js> obj.x = 10;
10
js> delete obj.x;
true
js>

If it's deleted successfully, delete returns true. Not all properties can be deleted. Some built-in properties cannot be deleted, such as properties provided by browsers. Incidentally, delete returns true if it's used to delete a value. For example, delete 1 will return true.

If you have known properties of an object, you can use one object literal create an object and properties at the same time. For example:

js> var obj = {
> x : 10,
> y : 20
> };
js> obj.x;
10
js> obj.y;
20
js>

You can use for in to iterate user-defined properties of an object. The for in can iterate each property name. For example:

js> for(var prop in obj) {
> print(prop);
> print(typeof prop);
> }
x
string
y
string
js> 'x' in obj;
true
js>

You can also see that every property name is actually a string value. This also shows that if you use the in operator to test a property, you should use a string value.

In fact, the dot operator (.) is just one of the ways to access properties of an object. You can also use the [] operator to access them. For example:

js> var obj = {};
js> obj['x'] = 10;
10
js> obj.x;
10
js> obj['x'];
10
js>

A JavaScript object, basically, is actually a collection of properties and a property is associated with a value. Take something for comparison; it's like a Map object in Java or a dict in Python. If you want to use for in to iterate all properties and values of an object, as follows:

js> var obj = {
>     x : 10,
>     y : 20
> };
js> for(var prop in obj) {
>     print(prop + ': ' + obj[prop])
> }
x: 10
y: 20
js>

One of the occasions to use the [] operator is your properties include characters such as a space, dot (.), and so on. For example:

js> var obj = {
> 'caterpillar.onlyfun' : 'Openhome'
> };
js> obj.caterpillar.onlyfun;
js: "<stdin>", line 136: uncaught JavaScript runtime exception: TypeError: Cannot read property "onlyfun" from undefined
at <stdin>:136

js> obj['caterpillar.onlyfun'];
Openhome
js> delete obj['caterpillar.onlyfun'];
true
js> 'caterpillar.onlyfun' in obj;
false
js>

In addition to using in to test the existence of properties, there's another way to do so. You get undefined if you access a property which doesn't exist and undefined will be treated as false in conditional statements or expressions, so you have the way so-called 'feature detection'.

js> var obj = {};
js> if(obj.x) {
> print('x exists.' );
> }
js> obj.x = 10;
10
js> if(obj.x) {
> print('x exists.' );
> }
x exists.
js>

The concept of feature detection can also be combined with || to merge object's properties. For example:

js> var obj = {
>     x : 10,
>     y : 20
> };
js> var option = {
>     x : obj.x || 1,
>     y : obj.y || 2,
>     z : obj.z || 3
> };
js> option.x;
10
js> option.y;
20
js> option.z;
3
js>

In the above example, x, y and z of option have default values 1, 2 and 3 respectively. If there are corresponding properties on obj, x, y and z of option will be assigned the corresponding property values of obj. This way is also used in functions that have too many parameters and need default values. You will see more while talking about functions afterward. If you don't know why the || operator has the above result, take a look at Operators for details.

JavaScript is a weakly typed language. The valueOf method will be called if JavaScript needs to convert an object to a number. For example:

js> var obj = {
>     valueOf : function() {
>         return 100;
>     }
> };
js> 100 + obj;
200
js> obj + 200;
300
js> obj > 100;
false
js> obj >= 100;
true
js>

The toString method will be called if it needs to convert an object to a string. For example:

js> var caterpillar = {
>     name : 'Justin Lin',
>     url : 'openhome.cc',
>     toString : function() {
>         return '[name: ' + this.name + ', url: ' + this.url + ']';
>     }
> };
js> caterpillar;
[name: Justin Lin, url: openhome.cc]
js> 'My info: ' + caterpillar;
My info: [name: Justin Lin, url: openhome.cc]
js>

In the above example, this refers to the object referred by caterpillar. I'll explain what this is afterward.

In JavaScript, == and === are used to compare two references if they are used on objects. They don't compare their inner states. If you want to compare inner states of objects, you should define your own method. The method name is not standardized. For example, you might define an equals method:

js> var man1 = {
>     name : 'Justin Lin',
>     url : 'openhome.cc',
>     equals : function(other) {
>         return (this.name == other.name) && (this.url == other.url);
>     }
> };
js> var man2 = {
>     name : 'Justin Lin',
>     url : 'openhome.cc',
>     equals : function(other) {
>         return (this.name == other.name) && (this.url == other.url);
>     }
> };
js> man1 == man2;
false
js> man1 === man2;
false
js> man1.equals(man2);
true
js>

In the above example, the equals code is duplicated. If you know a function in JavaScript is an object, you can modify them as follows:

js> function equals(other) {
>     return (this.name == other.name) && (this.url == other.url);
> }
js> var man1 = {
>     name : 'Justin Lin',
>     url : 'openhome.cc',
>     equals : equals
> };
js> var man2 = {
>     name : 'Justin Lin',
>     url : 'openhome.cc',
>     equals : equals
> };
js> var man3 = {
>     name : 'caterpillar',
>     url : 'caterpillar.onlyfun.net',
>     equals : equals
> };
js> man1.equals(man2);
true
js> man1.equals(man3);
false
js>

Something about functions will be elaborated afterward.