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

Previous topic in this series: Inheritance without Classes

This is the eighth part of my tutorial on JavaScript. Focus of this series is to introduce developers who are comfortable with other programming languages like Java or C to the idiosyncrasies of JavaScript. Basic JavaScript knowledge is assumed, but is not necessary as the code samples are simple and self-explanatory. If you are new to JavaScript, I would suggest going through the topics below in the order given.

Topics:

  1. A different beast
  2. Types and Type Conversion
  3. Functions
  4. Scopes and Scope Chain
  5. Closures
  6. Objects without Classes
  7. Inheritance without Classes
  8. Array, Map and the for..in loop (You are here)
  9. Literals and JSON
  10. Meta-Programming, Exceptions and Module Pattern

This is probably the simplest topic in the whole series, but it is not without some thrills. Arrays and Maps are the most popular data-structures in any programming language. JavaScript provides Array as a first class language element, but for Maps it forces us to do a few neat tricks.

Arrays

Arrays are objects in JavaScript. Code below shows two different approaches for creating and using arrays.

//Code- Array is an Object
var evenNumbers = new Array();
evenNumbers.push(2);
evenNumbers.push(4);
evenNumbers.push(6);
console.log(typeof(evenNumbers)); //object
console.log(evenNumbers instanceof Array); //true

var fruits = ['apple', 'banana', 'grapes']; //native, first class arrays
console.log(typeof(fruits)); //object
console.log(fruits instanceof Array); //true

The Array object has a rich set of utility methods – foreach, map, filter etc. See this page for a complete reference.  Unfortunately, some of those methods are not cross-browser compatible. But those can be fixed by monkey patching the Array.prototype (we have seen how to do this in the end of topic-6). The same technique is often used to add even more utility methods to Arrays.

Note: Since arrays are objects, they are always passed by reference and not by value. See this for a sample code.

No multi-dimensional arrays: JavaScript does not have multi-dimensional arrays.  But,  each element of an Array can again be another Array. Code below shows how a two-dimensional array is simulated.

var matrix = [
 [ 1, 2, 3, 4 ],
 [ 5, 6, 6, 8],
 [ 9, 10, 11, 12 ]
];

console.log(matrix[2][2]); //11
console.log(matrix[0][3]); //4

Maps

JavaScript does not have a Map (also known as associative array and as dictionary) datatype. However, objects themselves work like maps. Code below shows an object being used as map.

//Code – Simulating Maps in JavaScript
var director = {}; //or new Object();
director['ChinaTown'] = 'Polanski'; //entry in map OR property and value
director['Unforgiven'] = 'Eastwood';
director['Bycycle Thief'] = 'DeSica';
director['Red Beard'] = 'Kurosawa';

console.log(director['ChinaTown']); //Polanski
console.log(director['Red Beard']); //Kurosawa

The astute reader can observe that, director is infact an object with some dynamically added properties. And value ‘lookup’ is infact simply getting the values for the properties.

We will see a full fledged practical, reusable Map implementation in the next page after understanding the for..in loop

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: