Dynamically creating keys in JavaScript associative array

Javascript Web Development Front End Technology

In this article, we are going to discuss how to create keys in a JavaScript associative array dynamically.

Associative arrays are dynamic objects that are user defined as needed. When you assign values to keys in a variable of types array, then the array is transformed into an object, and it loses the attributes and methods or array. i.e. the length attributes have no effect because the variables are no longer of the type array.

JavaScript associative arrays are same as any other literals. You can add keys to these using the square brackets notation you can add keys to these objects dynamically if the key is a string.

We will demonstrate all that and also see how to add a key method to an object to have the number of items it holds when it becomes an associative array.

Creating an Associative Array Dynamically

We can create the dynamic associative array by simply allocating a literal to a variable. Following is the syntax to do so −

var name_of_the_array = {"key1": value1, "key2": value2, "key3": value3};

Example 1

In the following example, we are trying to create an array. We need to use square brackets in the array but, since these are associative arrays we are using curly brackets instead of square brackets. We can access the contents of an associative array using the key.

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
   <script>
      var array = {"one": 1, "two": 2, "three": 3};
      var val = array["two"];
      document.write(JSON.stringify(array),"<br>");
      document.write(JSON.stringify(val));
   </script>
</body>
</html>

Example 2

Following is another example to create an associative array −

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
   <script>
      let a = {
         name: 'Ayush'
      };
      let key = 'age';
      // Add the non existing key
      a[key] = 35;
      document.write(JSON.stringify(a));
   </script>
</body>
</html>

Using Object Methods

An associative array is also an object. So, we can create it with the help of object methods, then assign keys and values.

Example 1

In the following example, we demonstrate how we can create an associative array through the object() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Creation of associative array</title>
</head>
<body>
   <script>
      var array = new Object(); //this is method of object creation.
      array["Aman"] = 22;
      array["Akash"] = 23;
      array["Rahul"] = 24;
      var i = 0;
      for (i in array) {
         document.write(i + "=" + array[i] + "<br>");
      }
   </script>
</body>
</html>

Example 2

Let us rewrite the above example using the object’s DOT methods.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Creation of associative array</title>
</head>
<body>
   <script>
      var array = new Object(); //this is method of object creation.
      array.Aman = 22;
      array.Akash = 23;
      array.Rahul = 24;
      var i = 0;
      for (i in array) {
         document.write(i + "=" + array[i] + "<br>");
      }
   </script>
</body>
</html>

Using for…in loop

Since the associative array is similar to an object we cannot use the for loop. Instead, we can use the for…in loop same as we do to traverse the elements of an object.

Unlike normal arrays, associative arrays do not have any method to get the length of an object. Hence, for this purpose, we need to create a user defined method explicitly.

Example

In the following example, we are calculating the size of an associative array

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Creation of associative array</title>
</head>
<body>
   <script>
      var array = new Object(); //this is method of object creation.
      array.Aman = 22;
      array.Akash = 23;
      array.Rahul = 24;
      var count = 0;
      for (var key in array) {
         if (array.hasOwnProperty(key)) {
            count++;
         }
      }
      document.write("Size of an Associative array: " + count);
   </script>
</body>
</html>