Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Dynamically creating keys in JavaScript associative array
In JavaScript, associative arrays are essentially objects that use string keys instead of numeric indices. You can dynamically add keys to these objects using square bracket notation or dot notation.
When you assign values to keys in a JavaScript object, you're creating key-value pairs that can be accessed and modified dynamically. Unlike traditional arrays, these objects don't have a length property and lose array-specific methods.
Creating an Associative Array Dynamically
You can create a dynamic associative array by simply assigning a literal object to a variable:
var arrayName = {"key1": value1, "key2": value2, "key3": value3};
Example 1: Basic Creation
In this example, we create an associative array using curly brackets and access values using keys:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<script>
var array = {"one": 1, "two": 2, "three": 3};
var val = array["two"];
document.write("Array: " + JSON.stringify(array) + "<br>");
document.write("Value of 'two': " + val);
</script>
</body>
</html>
Array: {"one":1,"two":2,"three":3}
Value of 'two': 2
Example 2: Dynamic Key Addition
You can add new keys dynamically using square bracket notation:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<script>
let person = {
name: 'John'
};
let dynamicKey = 'age';
// Add the new key dynamically
person[dynamicKey] = 30;
person['city'] = 'New York';
document.write("Updated object: " + JSON.stringify(person));
</script>
</body>
</html>
Updated object: {"name":"John","age":30,"city":"New York"}
Using Object Constructor
You can also create associative arrays using the Object constructor and then assign keys dynamically.
Example 1: Square Bracket Notation
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creation of associative array</title>
</head>
<body>
<script>
var students = new Object();
students["Alice"] = 85;
students["Bob"] = 92;
students["Charlie"] = 78;
for (var name in students) {
document.write(name + " scored: " + students[name] + "<br>");
}
</script>
</body>
</html>
Alice scored: 85 Bob scored: 92 Charlie scored: 78
Example 2: Dot Notation
You can also use dot notation when keys are valid JavaScript identifiers:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creation of associative array</title>
</head>
<body>
<script>
var scores = new Object();
scores.math = 95;
scores.science = 87;
scores.english = 92;
for (var subject in scores) {
document.write(subject + ": " + scores[subject] + "<br>");
}
</script>
</body>
</html>
math: 95 science: 87 english: 92
Iterating with for...in Loop
Since associative arrays are objects, you cannot use regular for loops. Instead, use the for...in loop to traverse the key-value pairs.
Example: Calculating Array Size
Unlike regular arrays, associative arrays don't have a length property. Here's how to count the number of properties:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Associative array size</title>
</head>
<body>
<script>
var inventory = new Object();
inventory.apples = 50;
inventory.bananas = 30;
inventory.oranges = 25;
var count = 0;
for (var item in inventory) {
if (inventory.hasOwnProperty(item)) {
count++;
}
}
document.write("Items in inventory: <br>");
for (var item in inventory) {
document.write(item + ": " + inventory[item] + "<br>");
}
document.write("<br>Total number of items: " + count);
</script>
</body>
</html>
Items in inventory: apples: 50 bananas: 30 oranges: 25 Total number of items: 3
Conclusion
JavaScript associative arrays are objects that allow dynamic key creation using square bracket or dot notation. Use for...in loops for iteration and hasOwnProperty() to count properties safely.
4K+ Views
