JavaScript Associative Arrays Explained: Objects, Usage, and Key Differences

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

JavaScript is one of the essential programming languages in web development. Among its many features, “associative arrays” are an important structure that helps with efficient data management and processing.

In this article, we provide a detailed explanation of JavaScript associative arrays, from basic concepts to more advanced usage. Code examples are included to make the content easy to understand, even for beginners, so please use this article as a practical reference.

2. What Is an Associative Array?

2.1 Definition of an Associative Array

An associative array is a type of data structure that manages data as pairs of “keys” and “values.” While standard arrays use index numbers (0, 1, 2, …), associative arrays allow you to access data using arbitrary string keys.

2.2 Associative Arrays in JavaScript

In JavaScript, associative arrays are represented using objects. Objects are defined using curly braces {} and store data as key–value pairs.

Below is a basic example of an associative array in JavaScript.

let user = {
  name: "Sato",
  age: 25,
  email: "sato@example.com"
};

2.3 Differences Between Associative Arrays and Regular Arrays

Associative arrays and regular arrays differ in the following ways.

2.4 Use Cases

Regular arrays are suitable for managing list-like data, while associative arrays are convenient for handling data with specific attributes, such as user information or configuration settings.

3. How to Create Associative Arrays

3.1 Declaring with an Object Literal

The most common way to create an associative array in JavaScript is by using an object literal.

let product = {
  id: 101,
  name: "Laptop PC",
  price: 120000
};

3.2 Creating with new Object()

Another approach is to create an object using new Object().

let product = new Object();
product.id = 101;
product.name = "Laptop PC";
product.price = 120000;

3.3 Adding Keys and Values Dynamically

By using bracket notation, you can also use variables as keys.

let key = "color";
let product = {};
product[key] = "red";

4. Manipulating Associative Arrays

4.1 Adding Elements

Adding with dot notation

let user = {};
user.name = "Tanaka";
user.age = 30;

Adding with bracket notation

let user = {};
user["email"] = "tanaka@example.com";

4.2 Retrieving Elements

Retrieving with dot notation

console.log(user.name); // "Tanaka"

Retrieving with bracket notation

console.log(user["email"]); // "tanaka@example.com"

4.3 Updating Elements

You can update an existing value by assigning a new value to the same key.

user.age = 35;
console.log(user.age); // 35

4.4 Deleting Elements

Use the delete keyword to remove a key–value pair.

delete user.phone;
console.log(user.phone); // undefined

5. Iterating Over Associative Arrays

5.1 Iteration with for…in Loop

The for...in loop allows you to iterate over the keys of an associative array.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

for (let key in user) {
  console.log(key + ": " + user[key]);
}

5.2 Using Object.keys() and forEach()

You can retrieve an array of keys using Object.keys() and then iterate over it with forEach().

Object.keys(user).forEach(key => {
  console.log(key + ": " + user[key]);
});

5.3 Using Object.entries() and for…of

With Object.entries(), you can iterate over both keys and values at the same time.

for (let [key, value] of Object.entries(user)) {
  console.log(key + ": " + value);
}

6. Sorting Associative Arrays

6.1 Sorting by Keys

JavaScript objects themselves are not directly sortable, but you can sort their keys and then access the values in sorted order.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

let sortedKeys = Object.keys(user).sort();
sortedKeys.forEach(key => {
  console.log(key + ": " + user[key]);
});

6.2 Sorting by Values

To sort by values, convert the object into an array of key–value pairs using Object.entries().

let scores = {
  Alice: 85,
  Bob: 92,
  Charlie: 88
};

let sortedEntries = Object.entries(scores).sort((a, b) => a[1] - b[1]);
sortedEntries.forEach(([key, value]) => {
  console.log(key + ": " + value);
});

6.3 Important Notes When Sorting

When values are stored as strings, numeric sorting requires explicit conversion.

let data = {
  a: "10",
  b: "2",
  c: "15"
};

let sorted = Object.entries(data).sort((a, b) => Number(a[1]) - Number(b[1]));
console.log(sorted);

7. Important Notes When Using Associative Arrays

7.1 Duplicate Keys and Overwriting

If the same key is defined multiple times, the later value overwrites the earlier one.

let user = {
  name: "Tanaka",
  age: 30
};

user.name = "Sato";
console.log(user.name); // "Sato"

7.2 undefined and Checking for Key Existence

To check whether a key exists in an associative array, use the in operator or hasOwnProperty().

let user = { name: "Tanaka" };
console.log("age" in user); // false
console.log(user.hasOwnProperty("age")); // false

7.3 The push Method Cannot Be Used

Associative arrays (objects) do not support the push() method, which is available only for regular arrays.

let user = {};
user.push({ name: "Tanaka" }); // TypeError: user.push is not a function

7.4 Differences from JSON Data

JavaScript objects and JSON data are related but not the same. Objects must be converted to JSON strings for data exchange.

let obj = { name: "Tanaka", age: 30 };
let jsonData = JSON.stringify(obj);
console.log(jsonData); // '{"name":"Tanaka","age":30}'

let parsed = JSON.parse(jsonData);
console.log(parsed.name); // "Tanaka"

8. Summary

8.1 Key Points of Associative Arrays

• Data is managed using key–value pairs.
• Flexible operations are possible, including adding, retrieving, updating, and deleting data.
• Associative arrays support iteration and sorting through built-in methods.

8.2 Practical Usage Examples

Below is an example of handling multiple user objects using an array combined with associative arrays.

let users = [
  { id: 1, name: "Tanaka", email: "tanaka@example.com" },
  { id: 2, name: "Sato", email: "sato@example.com" }
];

users.forEach(user => {
  console.log(user.name);
});

9. FAQ – Frequently Asked Questions

Q1. What Is the Difference Between Associative Arrays and Regular Arrays?

Regular arrays use numeric indexes, while associative arrays use string keys to access values.

let arr = ["apple", "orange"];
console.log(arr[1]); // "orange"

let fruits = { apple: "apple", orange: "orange" };
console.log(fruits["orange"]); // "orange"

Q2. How Can I Check Whether a Key Exists?

You can check for the existence of a key using the in operator.

if ("age" in user) {
  console.log(user.age);
}

10. Final Summary

JavaScript associative arrays are extremely useful for managing and organizing data.
In this article, we covered everything from basic concepts to more advanced usage patterns.

Next Steps:

• Run the code examples yourself to deepen your understanding.
• Try integrating associative arrays with JSON data and API operations.