JavaScript:
Using associative arrays

How to:

Creating and using associative arrays (objects) in JavaScript is straightforward. You define an object with curly braces {}, and within those, you can define a set of key-value pairs. Keys are always strings, and values can be anything: strings, numbers, arrays, even other objects.

// Creating an associative array
let userInfo = {
  name: "Alex",
  age: 30,
  email: "[email protected]"
};

// Accessing elements
console.log(userInfo.name); // Output: Alex
console.log(userInfo["email"]); // Output: [email protected]

// Adding new elements
userInfo.job = "Developer";
userInfo["country"] = "Canada";

console.log(userInfo);
/* Output:
{
  name: "Alex",
  age: 30,
  email: "[email protected]",
  job: "Developer",
  country: "Canada"
}
*/

// Deleting an element
delete userInfo.age;
console.log(userInfo);
/* Output:
{
  name: "Alex",
  email: "[email protected]",
  job: "Developer",
  country: "Canada"
}
*/

As you can see, accessing, adding, or deleting elements in an associative array is pretty direct and intuitive.

Deep Dive

In the JavaScript world, though we often hear the term “associative array,” it’s technically a misnomer because JavaScript doesn’t have true associative arrays like other languages (e.g., PHP). What JavaScript has are objects that serve a similar purpose but are a more powerful and flexible construct.

Historically, arrays in programming languages were designed to hold a collection of items, accessed by their numerical index. However, as software development evolved, the need for more flexible data structures emerged. Associative arrays, or dictionaries in other languages, were one response, allowing access to elements through arbitrary keys.

JavaScript’s approach with objects as key-value stores offers a blend of functionality. It allows properties (keys) to be added, removed, and looked up by name. JSON (JavaScript Object Notation) is a testament to the utility of this structure, becoming the de facto standard for data exchange on the web.

While objects cover most needs for associative arrays, in cases where key order or iteration is important, the Map object introduced in ES6 provides a better alternative. A Map retains key order, accepts a wider range of data types as keys, and includes helpful methods for iteration and size retrieval. Despite these advantages, traditional object syntax remains popular for its simplicity and ease of use in many common scenarios.