The Best Technical Blog Ever

twitterrss

Revealing the Mysteries of JavaScript Associative Arrays

To work with JavaScript efficiently, one of the first things you need to understand is how associative array differs from normal array. Understanding Associative Arrays in JavaScript is one of the keys to the JavaScript Mysteries. This post explains what is associative array, how to write a bug free program and how you can avoid being burned by it.


Associative Array:

An associative array is an array which uses a string(named index/key) instead of a number as an index.


var student = []; 
student["name"] = "Ishita"; 
student["rollno"] = 23;
student["subject"]="physics";

Here the indices "name", "rollno" and "subject" are called keys and these keys are mapped to the values Ishita, 23 and physics respectively. It is simply a set of key value pairs. The value is stored in association with it key and if you provide the key, the array will return the value.


So, associative arrays give you another way to store information. Using them, you can call the array element directly using a key rather than a number, which is often easier to remember. Hence, associative arrays are really helpful in cases where we need not remember any index number.


Mystery of Associative Array in JavaScript:

You may be finding conflicting thoughts about JavaScript associative arrays. Yes, you are right!. JavaScript does not support associative arrays (arrays with key/named indices). They always use numbered indices. Still, the following code actually works just fine:


Example :
Associative Array
Associative Array


The above code displays the associative array(student["age"]) value perfectly as 20. Still, there is one problem. You may ask, we assigned 6 elements, but the array length shows only 3. what happened for this code? Ok leave it. we can try to display the 4th element.


Example :
Associative Array
Associative Array


Here, again we got incorrect result. The 4th element value is "undefined"... Ok.. cool. Let me clear this problem.


However in Javascript, all arrays are objects. So if you use a key(associative array), JavaScript will redefine the array to a standard object. Be warned that this is not a real array.


In this case, you have an array with three elements, and three properties. As a result, the first three elements are the part of the array, the remaining three key (named indices) elements ("rollno" , "hobby" and "age" are NOT elements in the array) become part of the Array object's properties and methods, just like .length, .sort(), .join(). So, it loses the attributes and methods of Array. That is why, the length attribute has no effect on key elements/named indices. (because they are not longer of Array type). Let take a look at the following example.


Example :
Associative Array
Associative Array


In the above example, student1.length will be zero because we didn't actually put anything into the student1 array, we put it into student1's object. So, student1[0] will be undefined. It completely removes the benefits of Array class. But the student is array with number index and can get access to goodies of Array class such as push, pop, shift, splice, sort, join, .length etc.


No Associative Arrays- Just Object and Properties:

JavaScript does NOT support associative arrays. But arrays are objects, so properties can be added any time. The key idea is that every Javascript object is an associative array, sometimes this is called a hash or map structure. So, JavaScript allows you to add properties to objects by using the .property notation.


Syntax:
	//to add properties to objects
		Object.yourProperty = value;
			(or)
		Object["yourProperty"] = value;

Similarly you can also access the values through .property notation.


		Object.yourProperty
			(or)  
		Object["yourProperty"]

Example :
Associative Array
Associative Array


This time, you will get the correct result for key (named index) elements. Because you are accessing these elements by using object - property notation(keys). That means, you can use "associative arrays" in javascript with the help of object-property assignment. Now that mystery is revealed, just to avoid confusion, let's use the term "associative arrays" for the Object-Property assignment behavior.


Associative array creation:

JavaScript automatically creates a associative array for each object. To create associative array, you can use curly braces instead of square brackets. It is a quick way to define an object. Whatever the method used to declare the array, we can access the content by keys.


Example :
Associative Array
Associative Array


Here, colon is used to separate the property name and the value associated with it. Multiple properties are separated using a comma. In this associative array terminology, property is known as key.


Iterating through an associative array:

We can not use a simple for loop because the elements are not accessible by an numeric index, but you can iterate through an associative array using the for..in loop.


Example :
Associative Array
Associative Array


Here, the for-in loop iterates through all the properties of the object "student1". The variable "key" will contain the property name, which can be used with the object to retrieve the property's value.


List of object properties:

 To get the key elements/attributes of an object in a single statement use the following syntax:


Object.keys(myObject);

To get the number of key value pairs use,

Object.keys(myObject).length

Example :
Associative Array
Associative Array


So, if you want to store bunch of values and to get access to goodies such as push, pop, splice, sort, join, .length etc., you have to treat them as an array class where you can add/remove items easily and use .length to check number of elements etc.


Similarly, if you want to access the array element directly by the named index (key), and you don't need any of the array functionality, use array as Object.


Keypoints to remember in java

1. Java is a high level, robust, secured , platform independent and object oriented programming.... more info

Back to Basics:- Java Syntax

In this session, you are going to refresh some basic set of rules(java syntax), defining how a ... more info

Total Visits
Traffic feed status