How to use associative array/hashing in JavaScript?

We use Object and Map classes to mimic the behavior of associative array/hashing in JavaScript. JavaScript doesn’t provide an associative array built-in. The closest similar behavior we get is from the Map class in JavaScript.

Let us look at them one by one.

Object class in JavaScript

The object class allows us to create objects with name-value pairs. This is similar to hashing as the object knows which property is associated with what value.

Syntax

const obj = {
   name : "Abhishek",
   age : 22
}
var name = obj.name

This creates an object obj with two key-value pairs: name and age. These properties can be accessed using the dot operator (.) as shown in the next line. The dot operator is preceded by the object name and succeeded by the property name.

However, The Object class has many limitations as compared to the conventional associative arrays that other programming languages provide. The size of the object is not tracked by JavaScript and thus has to be maintained by the programmers. This is good and well for a few properties but as the complexity increases it becomes difficult to keep track of things.

Here’s an example showing objects in use as an associative array.

Example 1

Here we will create an object and then use the key to retrieve those properties. Let’s look at the code for same.

<!DOCTYPE html> 
<html> 
<title>Online Javascript Editor</title> 
<head>
</head> 
<body> 
   <h3>associative array/hashing in JavaScript <br></h3> 
   <p> 
      <div id="result"> </div> 
   </p> 
   <script>
      const obj = { name: "Abhishek", age: 22 } 
      var text = ""; 
      
      text += "name : " + obj.name + "<br>";
      text += "age : " + obj.age; 
      
      document.getElementById("result").innerHTML = text; 
   </script> 
</body> 
</html>

In the above code, the properties of object are accessed similar to an associative array.

The objects we create inherit properties from the Object class. However, the Object class does not restrict the programmer from attempting to redefine or modify those properties. This is in contrast to how conventional associative array works with keys being unique to the whole data structure.

For example, we have toString() function inbuilt for all object prototypes. i.e., if we try

objectName.toString()

This returns "[object Object]" as output. However, we can override this in the object definition to make this function return something else.

Here’s an example of how to do it.

Example 2

Here we will create an object and override the toString() method to return a different string from the built-in response.

Let’s look at the code for the same.

<!DOCTYPE html>
<html>
<body>
   <h3>associative array/hashing in JavaScript <br></h3>
   <p>
      <div id="result"> </div>
   </p>
   <script>
      const obj = {
         name: "Abhishek",
         age: 22,
         toString: function() {
            return "Hello !";
         }
      }
      var text = "";
      text += "name : " + obj.name + "<br>";
      text += "age : " + obj.age + "<br>";
      text += "toString : " + obj.toString() + "<br>";
      document.getElementById("result").innerHTML = text;
   </script>
</body>
</html>

In the above code, the toString() function returns "Hello !" as an output rather than "[object Object]" which should have been the conventional response.

Now let us look at the Map class in JavaScript to mimic the behavior of an associative array.

Map class in JavaScript

Similar to the Object class, the Map class allows us to create key-value pairs. We use the set() and get() methods of the Map class to manipulate the properties.

Syntax

var mp = new Map();
mp.set("name", "Abhishek")
mp.get("name")

This creates a Map object and sets one property called "name" on it to "Abhishek". The same property can be retrieved using the key with the help of the get() function.

Unlike the Object class, Map has a size counter that can be used to retrieve the properties. It also does not allow Map class inherited properties and methods to be overridden.

Let us look at an example to see this use case.

Example 3

We will create a map object and perform basic operations of setting and getting values from the map.

<!DOCTYPE html>
<html>
<body>
   <h3>associative array/hashing in JavaScript <br></h3>
   <p>
      <div id="result"> </div>
   </p>
   <script>
      var coll = new Map();
      coll.set("name", "Abhishek");
      coll.set("age", 22);
      var text = "";
      text += "Number of Key-value pairs: " + coll.size + "<br>";
      text += "name : " + coll.get("name") + "<br>";
      text += "age : " + coll.get("age") + "<br>";
      document.getElementById("result").innerHTML = text;
   </script>
</body>
</html>

In the above code, a new map is created and two key-value pairs are added to it, which are then retrieved using the get(key_name) function.

Conclusion

Maps are a good alternative to associative arrays in JavaScript. They provide almost all functionality of conventional associative arrays.

Updated on: 10-Nov-2022

416 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements