What did I spend my time on during the last months?
I know that the blog activity does not reflect this reality but I have been
working on my library during my - rare - spare time.
For instance, I tried to organize the different features into namespaces to
avoid creating one object containing all the methods.
Since I started the new job, I also rewrote some of it to fit most of JSLint
validation rules and changed the way tests are made to support several hosts
(cscript, nodeJS
and a browser).
One interesting problem I had to deal with is related to the way attributes are handled in my implementation. Attributes could be compared to the Java annotations: they are information added to the source code that are retrieved at run-time using specific methods. They are used to generate code (such as object members' accessors) or customize behaviors (such as XML serialization).
I will write an article later about that very specific topic.
The problem I had to deal with is related to classes and inheritance: indeed,
it sounds natural to inherit the attributes and - as a consequence - I needed
the possibility to walk through the class hierarchy.
Also, I wanted to simplify the way attributes are created so I wrote aliases for
constructors (let say object factories).
I learned a lot by implementing these methods and I would like to share with you my understanding of how objects are handled in JavaScript.
Classes and inheritance
First of all, I will not detail the class and inheritance concepts as they belong to the Object Oriented Programming languages. So I will take the assumption that you are familiar with these. If not, the previous link is a good starting point.
But, also, the main reason is that JavaScript is *not* an usual OOP language: it misses lots of interesting features such as the possibility to control members visibility (using private, protected and public), polymorphism or operators....
As a matter of fact, the class keyword is reserved but you can't do anything with it. You will also discover that the delete keyword exists but for a different usage.
That's why I would like to explain what is a JavaScript object, how it is declared and the way it can be manipulated in order to highlight what can be done and illustrate what can't.
Objects and members
My first object
In the JavaScript language, the simplest (and shortest) way to create an object is to write the following line of code:
var myObject1 = {};
The following syntax is strictly equivalent:
var myObject2 = new Object();
Those who are used to program with real OOP languages will recognize the use
of the new operator.
I will come back later to
this one, we will first focus on the result.
Both samples are generating an empty object and once created, it already exposes a number of predefined members (mostly methods), for instance:
- toString a method that returns a string representation of the object
- hasOwnProperty a method that will become helpful later in this article
- constructor an object that will also be explained later
Members
To access the members (or call the methods), you can use either the "." operator or the "[]" one:
var string1 = myObject1.toString();
var string2 = myObject2["toString"]();
Usually, the bracket operator is used whenever the member name is contained in a variable or if the name is an invalid identifier (just try to access the member named "my field" with the dot operator).
The real power of JavaScript compared to classical OOP languages is the fact
that you can dynamically add any member to any object.
Again, there are several syntaxes you can use:
myObject1.additionalMember = "value";
myObject2["member"] = "value";
myObject1["member"] === myObject2.member;
Indeed, assigning a member on an object will either update the member (if already existing) or create it.
Very often, I used them as dictionary (to associate keys to values).
If you want to initialize the object with members, you can add them one by one:
var johnSmith = new Object();
johnSmith.firstName = "John";
johnSmith.lastName = "Smith";
johnSmith.age = 25;
johnSmith.address = new Object();
johnSmith.address.streetAddress = "21 2nd Street";
johnSmith.address.city = "New York";
johnSmith.address.state = "NY";
johnSmith.address.postalCode = 10021;
Or you can make it simpler by using the JSON notation:
var johnSmith = {
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
}
};
This means that, unlike a strict OOP language, you can't be sure that your object will respect a given structure (or interface). To be more precise prototyping (that I will explain below) can help you ensure that the object has a minimum set of properties.
Object inspection
In any case, the JavaScript language also offers operators to inspect an object definition. Considering the fact that JavaScript allows you to check any function arity, it provides you a working concept of reflection.
Before going any further, accessing a member that is not defined does not generate any error. Instead, JavaScript returns a special value that represents this missing definition.
The keyword undefined allows you to test this situation:
if (undefined === myObject1.notYetDefined) {
myObject1.notYetDefined = "OK";
}
You may also want to use the
typeof operator:
if ("undefined" === typeof myObject1.notYetDefined) {
myObject1.notYetDefined = "OK";
}
So, those two operators allows you to verify if a member exists for a given object.
On the other hand, you might want to list all the members that are currently
existing on the object.
This is where you will start using the operator
in (this is
also where the "[]" operator becomes really useful):
for (var member in myObject1) {
alert(myObject1[member]); // Display the content of the member
}
Another use of the in operator is to test if a member exists in an object:
if (!("notYetDefined" in myObject1)) {
myObject1.notYetDefined = "OK";
}
My opinion is that it depends on what you really want to test and - right now - I just want to verify if myObject1 has a member named "notYetDefined" which is exactly what in is doing.
I hope things will become more clear in the next chapter.
Delete
To conclude with object inspection, there is one last operator that is not
widely known and rarely used but it can be helpful when applied wisely (I will
provide an example later):
delete. As documented, it is used to remove a
property from an object. It means that, unlike OOP languages, it does not 'free'
objects.
An example of use:
if (!("notYetDefined" in myObject1)) {
myObject1.notYetDefined = "OK";
}
// Do something that relies on myObject1.notYetDefined
console.log(myObject1.notYetDefined);
// This will remove "notYetDefined"
delete myObject1.notYetDefined;
// Now "notYetDefined" is no more a property of in myObject1
console.log(typeof myObject1.notYetDefined);
OK
undefined
However, delete might seem to be dysfunctional in some cases.
Objects' own members vs prototype
The above sentence being confusing, here is an example to illustrate it:
var test = new Object();
if ("toString" in test) {
console.log("test has \"toString\"");
} else {
console.log("test doesn't have \"toString\"");
}
delete test.toString;
if ("toString" in test) {
console.log("test still has \"toString\"");
} else {
console.log("test doesn't have \"toString\"");
}
As a result, you will get:
test has "toString"
test still has "toString"
According to everything that has been said before, we have two possibilities here:
- Either the delete operator does not work as described
- Or the toString member is not a property of the object
First, I confirm that delete operator works as described, however the sentence "remove a property from an object" has to be clarified.
hasOwnProperty
The operator
hasOwnProperty has been introduced in the
3rd edition of the ECMAScript specification and is summarized as:
"returns a boolean indicating whether the object has the specified property"
But if you get a closer look to the documentation, the description provides the key to understand the reason why this operator was created: This method can be used to determine whether an object has the specified property as a direct property of that object; unlike the in operator, this method does not check down the object's prototype chain.
Applied to the previous example, here is what we obtain:
var test = new Object();
if ("toString" in test) {
console.log("test has \"toString\"");
} else {
console.log("test doesn't have \"toString\"");
}
if (test.hasOwnProperty("toString") {
console.log("\"toString\" is a direct property of test");
} else {
console.log("\"toString\" is *not* a direct property of test");
}
test has "toString"
"toString" is *not* a direct property of test
So it means that the delete operator removes a direct property of an object.
Now... if "toString" is not a direct property of my object, where does it come from ?
Prototype
As a matter of fact, "toString" is defined on the Object prototype. This object defines all the properties and methods that are inherited by any instance of a JavaScript object.
This is the key concept in the language that allows modern JavaScript developers to achieve object oriented programming.
...to be continued...