Javascript and development: 2014

Apple recently faced a security issue and provided a patch to fix it: About the security content of iOS 7.0.6
A web site is also available to check if your current OS must be updated: https://gotofail.com/

An interesting analysis of this - what appears to be - bug can be found in this article but please note that I am not sharing the point of view expressed in the conclusion.
I mean, whatever the way, bugs happen.
To make a long story short, it looks like a bad copy & paste duplicated a "goto fail;" instruction which, in the end, has no condition and is always evaluated.

As I recently talked about the advantages of using a lint-tool, I wanted to check if JShint would be capable of detecting this issue.
However - and fortunately - goto does not exist in JavaScript.

There are several ways to reproduce the same effect than a 'goto' instruction:

I usually embrace my if statements with brackets, I wanted to make my samples look similar to the initial problem and check how JSHint would react.

First example, the one-time do / while with break


function main(parameter) {
    var
        success = false;
    do {
        if (parameter === "condition1")
            break;
        if (parameter === "condition2")
            break;
            break;
        success = true;
    } while(0);
    if (success) {
        alert("Do");
    } else {
        alert("Don't");
    }
}

main("condition3");

10 Unreachable 'success' after 'break'.

Second example, return in a separate function


function testCondition(parameter) {
    if (parameter === "condition1")
        return false;
    if (parameter === "condition2")
        return false;
        return false;
    return true;
}

function main(parameter) {
    if (testCondition(parameter)) {
        alert("Do");
    } else {
        alert("Don't");
    }
}

main("condition3");

7 Unreachable 'return' after 'return'.

Last example, exceptions


function main(parameter) {
    try {
        if (parameter === "condition1")
            throw "fail";
        if (parameter === "condition2")
            throw "fail";
            throw "fail";
        alert("Do");
    } catch (e) {
        alert("Don't");
    }
}

main("condition3");

8 Unreachable 'alert' after 'throw'.

To conclude, JShint is capable of detecting an unreachable code and generates the appropriate warning.
It also means that all the warnings are meaningful and should be carefully considered.

If you want to check by yourself, go to http://www.jshint.com/ and copy & paste the samples directly where the JavaScript sample is written (upper left part of the homepage).

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"]();

Calling a method is actually done in two steps: in JavaScript, functions are objects. When you access the member named "toString" on myObject1, it returns the function object. Then, the parenthesis are used to call the function and provide parameters.

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.

This simplicity is probably one of the most exciting feature of the JavaScript language. As a consequence, any object can be used as a map and there is virtually no limit to the number of members you can add to an object.
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.

I hear some screams regarding the above assertion as most of us faced errors related to values that were not defined. However, please take a closer look at what really happened and you will realize that the error came from the use of the undefined value rather than its access.

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"; }

I usually compare a value with undefined rather than using typeof. However, they are some situations where you have no choice. For instance, if you want to test if a global variable (so we are not really accessing a member), you have to use typeof.

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";
}

There are lots of debate on the internet to know which method is the best to enumerate object members. For instance, JSLint does not allow the use of for in without using the hasOwnProperty.
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...

Javascript and development

Friday, October 24, 2014

Quick test with CodePen

Wednesday, October 8, 2014

Reviewing a new book on Web #AppDevelopment published by #Packt: http://bit.ly/1qh6fsI

About This Book

Who This Book Is For ?

Tuesday, August 26, 2014

15 Experts on the Art of JavaScript Programming

Thursday, March 6, 2014

Goto fail;

Wednesday, February 26, 2014

Mysteries of javascript objects, classes and inheritance (Part I)