JavaScript – A Different Beast, Part-8: Array, Map and the for..in loop

for..in loop

JavaScript has all the standard do..while, while and for(i=0;i<count;i++) loops that all of us know so much about. But, here we are going to discuss the for..in loop which is similar to a for-each loop. It can be used nicely with arrays and maps (err…,objects). A Java/C# programmer would attempt something like the following for printing all items in an array.

//An attempt at looping - WRONG
var arr = [ “Tom” , “Dick”, “Harry” ];
for(x in arr)
  console.log(x);

Guess what the output will be? Its just going to be ‘1 2 3’. And that’s the difference: the loop variable x simply holds the indices and not the values! The correct code is given below.

var arr = [ “Tom” , “Dick”, “Harry” ];
for(x in arr)
  console.log(arr[x]);

Code below shows the loop with an object. The loop variable, in this case, holds the properties of the object.

var agent = {
 lastname : 'bond',
 firstname : 'james',
 code : '007'
}

for(prop in agent)
  console.log(prop + ' is ' + agent[prop]);

/****** output ******
lastname is bond
firstname is james
code is 007
*******************/

A reusable Map implementation

Code below shows the implementation and usage of a full-featured Map implementation in JavaScript.

function Map() {
    this.dataStore = new Object();
    this.put = function(key,value){
        this.dataStore[key] = value;
    }
    this.get = function(key){
        return this.dataStore[key];
    }
    this.remove = function(key) {
        var value = this.dataStore[key];
        delete this.dataStore[key];
    }
    this.contains = function(key){
        return (key in this.dataStore);
        /*
        //alternate implementation
        var value = this.dataStore[key];
        return value===undefined? false: true;
        */
    }
    this.getAllKeys = function(){
        var keys = new Array();
        for(key in this.dataStore)
            keys.push(key);
        return keys;
    }
    this.getAllValues =  function(){
        var values = new Array();
        for(key in this.dataStore)
            values.push(this.dataStore[key]);
        return values;
    }
    this.size = function(){
        var size = 0;
        for(key in this.dataStore)
            size++;
        return size;
    }
    this.clear = function(){
        this.dataStore = new Object();
    }
}

var movieMap = new Map();
movieMap.put('ChinaTown', 'Polanski');
movieMap.put('Unforgiven','Eastwood');
movieMap.put('Bycycle Thief','DeSica');
movieMap.put('Red Beard','Kurosawa');

console.log(movieMap.get('Unforgiven')); //Eastwood
console.log(movieMap.contains('ChinaTown')); //true
console.log(movieMap.contains('400 Blows')); //false

console.log(movieMap.getAllKeys()); //["ChinaTown", "Unforgiven", "Bycycle Thief", "Red Beard"]
console.log(movieMap.getAllValues()); //["Polanski", "Eastwood", "DeSica", "Kurosawa"]

console.log(movieMap.size());//4
movieMap.remove('ChinaTown');
console.log(movieMap.size());//3
console.log(movieMap.contains('ChinaTown'));//false

movieMap.clear();
console.log(movieMap.size());//0

Line-11 uses the delete operator to remove a property from the object. Also note the in operator on line-14 that tests for the presence of a property in the object.
Next topic: Literals and JSON

Advertisements

About Rahul Mohan

Technical researcher interested in model-driven development of enterprise business applications. Passionate about web technologies and a huge admirer of open-source especially in the Java landscape. When I am not doing any of the above you can find me with my camera (www.flickr.com/photos/rahulmohan/) or listening to music. (In fact, the title of the blog is inspired by Led Zeppelin's Physical Graffiti. )

Posted on June 17, 2011, in JavaScript, Tutorial and tagged . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: