Sundarrajk's Weblog

JavaScript – The Good Parts – Part 7

Array
array.concat(items)
This method appends the items to the base array. If the items itself is an array that elements of that array are copied to that of the base array.
E.g.
var a = [‘a’, ‘b’, ‘c’];
var b = [‘d’, ‘e’, ‘f’];
var c = a.concat(b, true);
//c is [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’, true];

array.join(separator) This joins the elements in an array separated by the separator and gives a String.
var a = [‘a’, ‘b’, ‘c’];
var c = a.join(“/”);  //c is ‘a/b/c/’

array.pop This removes the last element from the array and returns this as the value. The size of array reduces by one.
var a = [‘a’, ‘b’, ‘c’];
var c = a.pop();
//c = ‘c’ and a =[‘a’, ‘b’];

array.push(item …) This adds the object to the end of the array.
var a = [‘a’, ‘b’, ‘c’];
var b = [‘d’, ‘e’, ‘f’];
var c = a.push(b, true);
//c is [‘a’, ‘b’, ‘c’, [‘d’, ‘e’, ‘f’], true];
Note how this is different from concat. The array “b” has been embedded at index 3 of the array “a”. It has not copied the contents of array “b” to “a”.

array.reverse() This reverses the values in the array.
var a = [‘a’, ‘b’, ‘c’];
var b = a.reverse();
//both a and b will be [‘c’, ‘b’, ‘a’]

array.shift() The shift method removes the first element from an array and returns it. If the array is empty it returns undefined.
var a = [‘a’, ‘b’, ‘c’];
var b = a.shift();
//b is ‘a’ and a is [‘b’,’c’]

array.slice(start, end) This is like substring. Where start is the start position and end is the last but one position that should be copied. If none is specified then it is copied to the end of the array.
var a = [‘a’, ‘b’, ‘c’];
var b = a.slice(0,1); //b will be [‘a’];
var c= a.slice(1); //c will be [‘b’, ‘c’]
var d = a.slice(1, 2); //d will be [‘b’]

array.sort(comparefn) This sorts the array assuming that all the elements are string. If one needs to sort based on some other datatype one can pass a compare function. This function will be passed the two consecutive values and it should return a “-1” if the first is less than the second a “0” if they are equal and a “1” if the first is greater than the second for sorting the elements in an ascending fashion.

array.splice(start, deleteCount, item, …) This method starts deleting “deleteCount” elements from the “start” position and inserts the values in item into this gap.

array.unshift(item …) The unshift method is like the push method, except that it pushes the items onto the front of the array instead of at the end. It returns the array’s new length.
var a = [‘a’, ‘b’, ‘c’];
var r = a.unshift(‘?’, ‘@’);
//a is [‘?’, ‘@’ ,‘a’, ‘b’, ‘c’];
//r is 5

Function
function.apply(thisArg, arguments)
This executes the function with “thisArg” treated as the “this” for the function and the “arguments” is passed as the “arguments” to the function.

Number
number.toExponential(fractionDigits)
This converts this number to a string in the exponential form. The optional fractionalDigits controls the number of decimal places. This should be between 0 and 20.
Math.PI.toExponential(0) = 3e+0
Math.PI.toExponential(2) = 3.14e+0
Math.PI.toExponential(7) = 3.1415927e+0
Math.PI.toExponential(16) = 3.1415926535897930e+0
Math.PI.toExponential() = 3.141592653589793e+0

number.toFixed(fractionDigits) This method converts this number to a string in the decimal form. The optional fractionDigits parameter controls the number of decimal places. It should be between 0 and 20. The default is 0.
Math.PI.toFixed(0) = 3
Math.PI.toFixed(2) = 3.14
Math.PI.toFixed(7) = 3.1415927
Math.PI.toFixed(16) = 3.1415926535897930
Math.PI.toFixed() = 3

number.toPrecision(precision) This converts the number to a string in decimal form. The optional precision parameter controls the number of digits of precision. It should be between 1 and 21.
Math.PI.toPrecision(2) = 3.1
Math.PI.toPrecision(7) = 3.141593
Math.PI.toPrecision(16) = 3.141592653589793
Math.PI.toPrecision() = 3.141592653589793

number.toString(radix) This converts the number to string. The optional radix parameter controls the radix or the base. This should be between 2 and 36. The default radix base is 10.
Math.PI.toString(2) = 11.001001000011111101101010100010001000010110100011
Math.PI.toString(7) = 3.1103755242102643
Math.PI.toString(16) = 3.243f6a8885a3
Math.PI.toString() = 3.141592653589793

Object
object.hasOwnProperty(name)
This indicates if the property by the specified “name” belongs the object or is it derived from the one of the prototype objects in the hierarchy.
var a = {member: true};
var b = Object.beget(a); //b uses a as the prototype
var t = a.hasOwnProperty(‘member’); //”t” is true
var f = b.hasOwnProperty(‘member’); //”f” is false
var v = b.member; //“v” is true.

Introduction

This is the fifth post based on the book JavaScript – The Good Parts by Douglas Crockford. The previous post covered details like Closures and Modules. This section covers Curry, some Gotcha in JavaScript, Exceptions and With.

Curry

This allows one to create a new function using an existing function with one or more arguments having a specific value.
Setup the curry function

Function.method ('curry', function () {
    var slice = Array.prototype.slice, args = slice.apply(arguments), that = this;
    return function () {
        return that.apply(null, args.concat(slice.apply(arguments)));
    };
});

Now use this as follows:

var add = add.curry(1);
add1(6); //returns 7

In this manner we can create new functions from existing functions by providing value to one or more of the arguments.

Gotcha

JavaScript does not require one to put a semicolon, but this can lead to some unexpected surprises. Consider this function.

a = function () {
    return
    {
        ok: false;
    };
}

One expects this method to return an object with an attribute “ok” with value “false”. But what this actually returns is “undefined”. This happens because of the way JavaScript introduces “;”. Since there is no semicolon after the keyword “return”, JavaScript will put a semicolon after “return” and return “undefined”. The rest of the code is ignored.

Converting Strings to Integers

One way to convert String values to integers is to use parseInt(. The other way to do this would be to compute as follows:

X = 3 + (+"4"); //X = 7
X = 3 + "4";    //X = 34

Exceptions

JavaScript can throw Exception in case of errors. The following are the type of exceptions:
One can throw an exception as follows:

throw new Error(reason);

or

throw {
    name: exceptionName;
    message: reason;
}

One can use a standard try … catch statement to catch Exceptions

try {
} catch (e) {
    switch(e.name) {
        case ‘Error’: 
            …
            break;
        default:
            throw e;
    }
}

There is only one catch clause as there are no Exception classes.

• Error
• EvalError
• RangeError
• SyntaxError
• TypeError
• URIError

With

With can be used to reduce the coding by indicating that we wish to work with attributes/functions of a specified object. But it does not work seamlessly and should be avoided.

with(o) {
    foo = koda;
}

Which of the following is true:

o.foo = koda;
o.foo = o.koda;
foo = o.koda;
foo = koda;

What it actually does is this

if ('foo' in o) {
    o.foo = 'koda' in o ? o.koda : koda;
} else {
    foo = 'koda' in o ? o.koda : koda;
}

Which is logical but given the complexity of the logic, it is better avoided.

var WalkTheDOM = function (node, func) {
    func(node); //Invoke the function with the node as the parameter
    node = node.firstChild;
    while (node) {
        WalkTheDOM(node, func);
        node = node.nextSibling;
    }
};

var getElementsByAttribute = function (attr, value) {
    var results [];
    WalkTheDOM (document, function () {
       var actual = node.nodeType === 1 && node.getAttribute(attr);
       if (typeof actual === "string" && (actual === value || typeof value !== "string")) {
           results.push(node);
       }
    });
}

var Counter = function () {
    var currentValue = 0;

To create counters we could do the following

var counterA = new Counter();
var counterB = new Counter();
counterA.increment();
counterB.decrement();

But implementing in this fashion leaves the variable currentValue accessible from outside.
For example one could do

counterA.currentValue = 10;

Ideally the currentValue should be inaccessible from outside of the Counter object. This can be achieved by rewriting the Counter function as below.

var Counter = function () {
    var currentValue = 0;
    return {
        increment: function (inc) {
            this.currentValue = this.currentValue + (typeof inc === "number" ? inc : 1);
 },
        decrement:   function (dec) {
           this.currentValue = this.currentValue - (typeof dec === "number" ? dec : 1);
        },
        getValue = function () {
           return this.currentValue;
        }
    };
}();

What is being done is that Counter function returns an object which contains the increment and decrement functions, but the outside world cannot access the currentValue variable. We can now instantiate counters as.

var counterA = new Counter();
var coutnerB = new Counter();
counterA.increment();
counterB.decrement();

And

counterA.currentValue will be invalid.

In a similar manner we can hand hide functions. Any function that is not returned as part of the object will be private to the global function and can be accessed from anywhere within that function.

Using setTimeout with Closure

Consider a use case where it is required to fade out a node slowly over a period of time. One will need to use the setTimeout function of JavaScript to slowly reduce the opaqueness of the node. But the problem that arises is how to keep the value of the node between two calls invoked by setTimeout. The easiest way out is to define a global variable which has this node and the setTimeout will function on this global variable. But what if one needs to fade out more than one node at a time? This can be solved elegantly by using closure as given below:

var fade = function (node) {
    var level = 1;
    var step = function () {
        var hex = level.toString(16);
        node.style.backgroundColor = "#FFFF" + hex + hex;
        if (level < 15) {
            level = level + 1;
            setTimeout(step, 100);
        }
    }
}
fade ();
fade ();
fade();

The value of level and node is retained and carried forward from one call to another without the use of a global variable.

Cascade

Relook at the Counter function.

var Counter = function () {
var currentValue = 0;
    return {
        increment:   function (inc) {
            this.currentValue = this.currentValue + (typeof inc === "number" ? inc : 1);
        },
        decrement: function (dec) {
            this.currentValue = this.currentValue – (typeof dec === "number" ? dec : 1);
        },
        getValue = function () {
            return this.currentValue;
        }
    }
}();

To use the functions in this we need to do the following:

var counterA = new Counter();
counterA.increment(2);
counterA.getValue();

So if one needs to invoke two different functions one needs to put it in two different lines. Instead if we rewrite the function as

var Counter = function () {
    var currentValue = 0;
        return {
            increment:   function (inc) {
            this.currentValue = this.currentValue + (typeof inc === "number" ? inc : 1);
            return this;
        },
        decrement: function (dec) {
            this.currentValue = this.currentValue - (typeof dec === "number" ? dec : 1);
     return this;
        },
        getValue = function () {
            return this.currentValue;
        }
    }
}();

We can now do this

counterA.increment().getValue();

This makes coding much easier and simpler. This is called cascading. Returning the object in methods that do not return anything else is called cascading.

function foo () {
 //do something
}

foo = function () {
  //do something
}

var foo = function () {
  //do something
}

Function.prototype.foo = function () {
  //do something
}

function foo () {
  alert('a');
}
function bar (x) {
  x(); //Invoking a function passed as a parameter.
  alert('b');
}
bar(foo);

if(!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g,'');
  };
}

function testTrim() {
    var a = "  abc ";
    var b = a.trim(); //b should have a value "abc".
}

If (typeof Object.beget !== 'function')  {
  Object.beget = function (o) {
  var F = function() {};

Note that we are attaching the function beget to the prototype of the “Global Object”, thus making it available to all objects.
In the above example the object “stooge” becomes the prototype of object “another_stooge” thus bestowing on “another_stooge” all properties of object “stooge” and its prototype.

Object and Function prototypes

JavaScript has two global level prototypes, one is the prototype for all Objects and another is for all Functions. The prototype of the Function.prototype is the Object.prototype. Any attribute or function attached to this becomes available to all the Functions or all the Objects respectively.

Creating Objects

Objects in JavaScript can be created using one of the following methods:

1. new
2. Object Literal
3. Object.create

Using new

First create function which has the required attributes and functions.

function Person() {
   this.name;
   this.age;
   this.isSeniorCitizen = function () {
      return this.age > 60;
   }
}
var johnDoe = new Person();
johnDoe.name = ‘John Doe’;
johnDoe.age = 50;

To use new to create an Object, first one needs to define a Function. Then one can instantiate an object which is represented by the Function. In the above example we have defined a function called Person. It can have two attributes “name” and “age”. It also has a function “isSeniorCitizen”.
To create an new instance of this object one can use the keyword new. This is the pattern that may Object Oriented Programmers will be familiar with. The other two mechanisms are something that is not encountered in the Object Oriented world.

Using Object Literals

One can create objects in JavaScript using simple Strings.

var johnDoe = {name: "John Doe", age: 50,
  isSeniorCitizen: function () {return this.age > 60;}};

A similar syntax can be used to create an array using object. This is shown in the following example:

var listOfLifeStates = ["infant", "kid", "teenager", "adult", "middle age", "senior citizen"];

Note that it is possible define functions along with the attributes of the object, using object literals.
If this reminds one of JSON then one is not mistaken. JSON is a subset of Object Literals.

Using Object.create

JavaScript 5 introductions a new method called ‘create’ in the Object prototype. This allows instantiating objects which can inherit from other objects.

function Foo() {
   this.name = "foo";
}
Foo.prototype.sayHello = function() {
  alert("hello from " + this.name);
};
var myFoo = new Foo();
myFoo.sayHello();

If one wishes to create another object Bar which inherits from Foo we can do the following:

function Bar() {
}
Bar.prototype = new Foo();
Bar.prototype.sayGoodbye = function() {
  alert("goodbye from " + this.name);
}
var myBar = new Bar();
myBar.sayHello();
myBar.sayGoodbye();

But the issue is that the property “prototype” is called also called “__proto__” in some environments. To avoid this confusion a new Object.create method has been introduced. This can be used as follows.

var Foo = {
  name: "foo",

sayHello: function() { alert(“hello from ” + this.name); } }; Foo.sayHello();
Now use Object.create to create bar with a prototype of Foo.

var bar = Object.create(Foo, { sayGoodbye:  function() {alert("goodbye from " + this.name); }});
bar.sayHello();
bar.sayGoodbye();

This is much cleaner than using the prototype directly.
But some environments still do not have the implementation of Object.create. To overcome this problem one can define one’s own create function in the Global Object prototype as below:

if(typeof Object.create !== "function") {
   Object.create = function (o, props) {
      function F() {}
      F.prototype = o;
      extend(F, prop);
      return new F();
      function extend(obj, props) {
         for(prop in props) {
            if(props.hasOwnProperty(prop)) {
               obj[prop] = props[prop];
            }
         }
      }
   };
}

Now one can use Object.create fearlessly irrespective of the environment in which one’s scripts run.

Adding functions to prototypes

The normal way to add a function to a prototype is as

Object.prototype. = function () {
}

To make this simpler we can add a method called “method” to the global function prototype as follows:

Function.prototype.method = function (name, func) {
   this.prototype[name] = func;
   return this;
}

Now one need not be worried about prototype. To add a method to a function all one needs to do is as described in the following example.
To add a method to the Number object to convert numbers to integer we can do the following:

Number.method ('integer', function () {
  return Math[this < 0 ? 'ceiling': 'floor'](this);
});

Note the ability to select the function to execute using the ternary operator
To add a trim method to all Strings

String.method('trim', function() {
   return this.replace(/^s+|s+$g, '');
}

To avoid clashes with other libraries we should set the function if and only if it does not exist. So change the ‘method’ function as follows:

Function.prototype.method = function (name, func) {
   if (!this.prototype[name]) {

this.prototype[name] = func; } return this; }
This will ensure that the method will be created in the object only if one does not already exist. Note the use of [] to access the attribute/function in an object. Not only can one use the dot notation to access the function or the attribute but one can also use [] to access the function or attribute.

Attributes in an Object and hasOwnProperty

To go through the attributes in a JavaScript object the following loop can be used.

for (myvar in object) {
   if (obj.hasOwnProperty(myvar) {
      alert("Value of attribute " + myvar + " in object is " + obj[myvar]);
   }
}

The method hasOwnProperty indicates if the attribute or function belongs to the object or if it is has been inherited through the prototype. The above method will display only those attributes which are attached to the object directly. It will not display the methods it has inheried through its prototype. If one removes the hasOwnProperty function then one will get a list of all the attributes and functions included in the prototype hierarchy of the object.

Delete operator

JavaScript has a delete method using which one can delete methods and attributes in a JavaScript object.

Person = function (pName, pAge, pOccupation) {
   this.name = pName;

this.age = pAge; this.occupation = pOccupation; } var johnDoe = new Person(“John Doe”, 35, “vagabond”); //This will delete the attribute occupation from object johnDoe. delete johnDoe.occupation;
Note that the function delete will only delete attributes and functions directly associated with the object and not the ones in the prototype hierarchy.

Instanceof in JavaScript

The method “instanceOf” can be used to check the type of object. This walks up the prototype and checks with all the prototypes in the hierarchy. If one wishes to restrict avoid the prototype hierarchy then we should check object.constructor === “”. Care needs to be taken to ensure that the object is not null if one wishes to check with constructor.
instanceOf does not work with objects instantiated across windows. E.g. between the parent window and the IFrame or parent window and window opened.
Note that Array is a special object that has certain specific properties like length. But an Array is not really an Array (as in other languages), but it is an object where the names of the properties are numbers. These numbers cannot be negative and the length of the Array is equal to the highest number + 1 and not equal the number of elements in the Array.