Introduction to Associative Array in Javascript
An Associative array is a set of key-value pairs and dynamic objects which the user modifies as needed. When user assigns values to keys with datatype Array, it transforms into an object and loses the attributes and methods of previous data type. It uses string instead of a number as an index. Here, we need to understand that Javascript does not support Associative array, but as all arrays in javascript are objects and javascript’s object syntax helps in imitating an Associative array.
Syntax:
<name of the array> = {key1:'value1', key2:'value2', key3:'valu3'…..}Example:
employee = {101:'Karthick', 102:'Saideep', 103:'Anusha'}The above example helps in creating an array employee with 3 keys and 3 values, the key can be an identifier, number or a string.
Examples of Associative Array in JavaScript
Here we can see why associative arrays cannot be created in javascript like a normal array, instead, we can create it using javascript objects.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var array = { "alpha": 1, "beta": 2, "gama": 3 };
var x = array["beta"];
document.write(x);
</script>
</body>
</html>Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var x = new Object();
x["alpha"] = 1;
x["beta"] = 2;
x["gama"] = 3;
for(var i in x)
{
document.write(i + "=" +x[i] + '<br>');
}
</script>
</body>
</html>Output:
Example #3
Looping in Associative arrays.
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var array = {
"Karthick": "Deloitte",
"Saideep": "Infosys",
"Anusha": "Capgemini",
"Vasu": "Cognizant"
};
for (var key in array) {
if (array.hasOwnProperty(key)) {
document.write(key + "<br>");
}
}
</script>
</body>
</html>Output:
Instead of looping the associative array, we can also display the array elements using Object.keys().
Example #4
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var array = {
"Karthick": "Deloitte",
"Saideep": "Infosys",
"Anusha": "Capgemini",
"Vasu": "Cognizant
};
var keys = Object.keys(array);
document.write(keys);
</script>
</body>
</html>Output:
We cant create a javascript associative array just like a normal array creation, user needs to use an empty object or an empty associative array.
Example #5
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
//Normal array
var nArray= new Array();
nArray[0] = ".yahoo";
nArray[1] = ".fed";
nArray[2] = ".in";
document.write("Length of nArray: " + nArray.length);
document.write('</br>');
//Associative array
var aArray = new Array();
aArray['yahooo'] = ".yahoo";
aArray['fedex'] = ".fed";
aArray['india'] = ".in";
document.write("Length of aArray: " + aArray.length);
document.write('</br>');
document.writeln("yahoo domain: " + aArray['yahooo']);
document.write('</br>');
document.writeln("yahoo domain: " + aArray.yahooo);
</script>
</body>
</html>Output:
Example #6
Creative associative array using javascript object.
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var myObject = {};
myObject.yahooo = ".yahoo";
myObject.fedex= ".fed";
myObject.india= ".in";
document.writeln(myObject.length); // undefined
document.write('</br>');
document.write("yahoo domain: " + myObject['yahooo']);
document.write('</br>');
document.write("yahoo domain: " + myObject.yahooo);
</script>
</body>
</html>Output:
We can use dot property notation for accessing the array elements, deleting object values and also for assigning values.
For deleting properties of associative array, we have ‘delete’ statement.
Example #7
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript object deleting</title>
</head>
<body>
<pre>
<script type="text/javascript">
var myObject = {};
myObject.yahooo = ".yahoo";
myObject.fedex= ".fed";
myObject.india= ".in";
document.writeln("fedex domain: " + myObject['fedex']);
document.writeln("fedex domain: " + myObject.fedex);
delete myObject.fedex;
document.writeln("fedex domain: " + myObject.fedex);
</script>
</pre>
</body>
</html>Output:
As we are working with objects, we can find out the length.
39 Online Courses | 24 Hands-on Projects| 230+ Hours| Verifiable Certificate of Completion
4.5
View Course
Example #8
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript object key length</title>
</head>
<body>
<pre>
<script type="text/javascript">
var myObject = {};
myObject.yahooo = ".yahoo";
myObject.fedex= ".fed";
myObject.india= ".in";
document.write( Object.keys(myObject) );
document.write('</br>');
document.writeln( Object.keys(myObject).length );
</script>
</pre>
</body>
</html>Output:
Associative arrays are dynamic objects and when the user assigns values to keys in type of array, it transforms into object and loses all attributes and methods of array type, also length property has nothing to do with array after transformation.
Through this associative array, the user can save more data as we have a string as a key to array elements where associated data is stored. This advantage is because of using objects to access array elements
Conclusion
Let us conclude this article with a good note as we have gone through what is an Associative array in Javascript, creation of associative array and how does it work, how can user access the array elements of the associative array along with some of the examples explained above in this context. Also, the user can add properties to an associative array object.
Recommended Articles
This is a guide to Associative Array in JavaScript. Here we discuss the introduction and examples. You may also have a look at the following articles to learn more –
