Associative Array In JavaScript - EduCBA

Home » Add Element Associative Array Javascript » Associative Array In JavaScript - EduCBA

Maybe your like

Associative Array in JavaScript

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:

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

<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

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:

associative array in javascript 1

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:

associative array in javascript 2

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:

Looping

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:

associative array in javascript 4

We cant create a 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:

associative array in javascript 5

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:

creative

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:

associative array in javascript op 7

As we are working with objects, we can find out the length.

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:

Example 8

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 –

  1. JavaScript Cursor
  2. JavaScript Array Filter
  3. JavaScript Refresh Page
  4. JavaScript Flatten Array

Tag » Add Element Associative Array Javascript