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

Unknown's avatar

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 comment

Design a site like this with WordPress.com
Get started