Just the weekly tutorials.

Member properties and methods in JavaScript objects

What are JavaScript object properties? Without going into technical details this tutorial will look at practical examples you can start using in your own code.

First, we need to understand that all object properties (and methods) reside in the constructor belonging to a JavaScript object we are creating. For strings the constructor is String. For digits, the constructor is Number. And so on:

var str = new String("Hello"); var num = new Number(1);

This is what happens behind the veils of JavaScript,
even when following statements are made:

var str = "Hello"; var string_length = str.length;

Here, it is unclear that "Hello" is created using a constructor called String. Nonetheless, it is the parent of the object.

Where does the property length live? You didn't write it. The designers of JavaScript did. But where did they put it?

It lives inside the constructor object called String. Here an uppercase letter is used to name the constructor. The leading capital letter is present in all constructors in JavaScript. If you created your own constructor for your own custom object, you wouldn't have to capitalize the first letter, it is just a convention. But it is probably more proper if you follow it.

The string "Hello" becomes an object of type String (its constructor is its type) when we request its member property length; Prior to this (before using the dot operator to request its property) it is still considered a primitive. A primitive does not have the ability to access its parent's constructor methods, until we request it using the dot operator (at which point the primitive is no longer a primitive.)

Objects of type String have several other members, which can be methods (functions) such as str.split() or str.substr(0,1). They are already provided by JavaScript's native object definitions (String, Number, Object, Time, Date, RegExp, etc... they all have predefined member properties and member functions). We can refer to length property as String.length; String is an actual object (String is called constructor object in JavaScript.)

This is why the code above where we created a string "Hello" can be rewritten as follows:

var str = new String("Hello"); var string_length = str.length;

This example uses the constructor object String and perhaps here it is a little more clear that the property length belongs to the main constructor object called String. It pre-exists in the string objects and updates length of the string automatically, every time the string is updated with a new value.

Using prototype property to add custom methods to constructors

What's really interesting is that we can add our own methods to existing constructor objects in JavaScript using prototype property. Prototype is a very special property, unlike any other. It gives us direct access to the members of an object. And we can even add our own.

Let's take a look at the following example:

// add our own method to String constructor String.prototype.display = function() { alert(this); }

We have just added our own member function display(); to the prototype of the String object. There is only one String constructor object throughout your JavaScript program. Adding a member function to it, adds a member function to all strings in your program created using the constructor or even the simplified definition such as var str = "hello".

Inside the function definition the this object refers to the object instant that was creating using the prototype object. So in the following case, the object instance stored in variable str is referred to using the this keyword (learn more about this variable in JavaScript) from within the function.

We have added a new member function to the main String constructor. From this moment on, we can now use our own member function on all native string objects:

var str = "Hello"; str.display();

The following will work too:

"Hi".display();

In fact this is how the entire jQuery library was built, by adding custom member properties and functions to the main jQuery object, which is an object of type Object (Yes, there is such thing, in which case the object is thought of as a custom Object, it is neither of type String, Number, etc. but it is your own custom object, much like starting from clean slate.)

Now a few words about the Regular Expression constructor object. Perhaps the / slashes make the statement in this expression a little peculiar, but it is nothing more than valid JavaScript syntax for creating a regular expression:

var regex= /^([a-zA-Z.]{2,20})$/;

This is a regular expression. Using / / you create an object that actually has a type in JavaScript. Its type is RegExp. Much in the same way when you created an object of type String when you use double quotes to create "Hello" string. The object RegExp does not contain a member property length, nor substr(); and the like, as is true with the objects of type String. However.... it contains the function test(). It's purpose is to test whether the regular expression matches the string you provide. So in the example above regex.test("myvalue"); is valid code. (More about regular expressions and jQuery can be found in this regex tutorial.)

The test(); method here belongs to the constructor:

var r = new RegExp("a"); alert(r.test("a"));

The alert will return "true" because "a" from RegExp("a") matches "a" we are testing it against using the test("a"); member function belonging to the RegExp object. (Which exists in RegExp constructor much like length; or split() or substr() exist in String constructor.) Here is another way of writing it:

var pattern = /a/g; pattern.test("a");

JavaScript provides method (member) functions for each constructor object already defined by JavaScript. When you create the following variable:

var number = 1;

You are creating a primitive value (much like String "hello") that can turn into an object of type Number. A primitive value can be "Hello" or 1 or 123. Once we add the dot operator to its end, it is converted to an object of the type specified by the value preceding it. This process is called primitive coercion in JavaScript and other programming languages and the tutorial linked here will help you further understand it.

But here we cannot simply access the member functions of an object of type Number because using the dot operator on String is convenient as in "Hello".length(); but adding a period (dot) to a number is meant for creating decimal-point values:

1.2

In order to access the constructor of an object of type Number we can use parentheses:

var max_val = (1).constructor.MAX_VALUE; alert(max_val);

It is well known that MAX_VALUE is a property of an object of type Number, which refers to the maximum number a variable of type Number can hold. Note that in this special case MAX_VALUE must be specified through the constructor property. There are several others, for example: toString(); to convert a number to a String object, but they are not accessed through the constructor property (even though they also belong to the constructor object.)

var n = 123; alert(n.toString().substr(1,2)); // displays 2 (which is the character between 1 and 3)

Just the weekly tutorials.