Skip to main content

TypeScript Hashmaps

Hashmaps are essential data structures for efficiently storing and retrieving information in TypeScript applications. Using key-value pairs, hashmaps provide quick data access through hashing algorithms that map keys to memory locations. This article explains how to work with hashmaps in TypeScript, covering everything from basic creation to performance optimization.

You'll learn how to create hashmaps, check for existing keys, manage entries, choose the right implementation for your needs, handle complex data structures, and optimize performance. These practical techniques will help you write more efficient and maintainable TypeScript code.

Creating a Hashmap in TypeScript​

TypeScript offers two primary approaches for implementing hashmaps: JavaScript objects and the built-in Map class. Each has distinct advantages depending on your specific requirements.

Using Objects​

The simplest way to create a hashmap in TypeScript is with a JavaScript object using an index signature:

const objectHashmap: { [key: string]: any } = {};

objectHashmap['key1'] = 'value1';
objectHashmap['key2'] = 'value2';

console.log(objectHashmap); // Output: { key1: 'value1', key2: 'value2' }

This approach is familiar to JavaScript developers and works well when your keys are strings or symbols.

Using Maps​

For more flexibility, you can create a hashmap with a Map:

const mapHashmap: Map<string, any> = new Map();

mapHashmap.set('key1', 'value1');
mapHashmap.set('key2', 'value2');

console.log(mapHashmap); // Output: Map { 'key1' => 'value1', 'key2' => 'value2' }

The Map class offers advantages like allowing any data type as keys (not just strings) and maintaining insertion order.

Iterating Over a TypeScript Hashmap​

Accessing all key-value pairs in a hashmap is a common operation. TypeScript offers several methods to iterate through hashmaps, with different approaches for objects and Maps.

Using Objects​

To loop through a hashmap with an object, use a for...in loop:

const objectHashmap: { [key: string]: any } = { key1: 'value1', key2: 'value2' };

for (const key in objectHashmap) {
    if (objectHashmap.hasOwnProperty(key)) {
        console.log(`Key: ${key}, Value: ${objectHashmap[key]}`);
    }
}

Or use Object.keys():

Object.keys(objectHashmap).forEach(key => {
    console.log(`Key: ${key}, Value: ${objectHashmap[key]}`);
});

For more modern code, consider using Object.entries() to get key-value pairs directly:

Object.entries(objectHashmap).forEach(([key, value]) => {
  console.log(`Key: ${key}, Value: ${value}`);
});

Using Maps​

The Map class provides built-in iteration methods. The most straightforward is using forEach:

const mapHashmap: Map<string, any> = new Map([['key1', 'value1'], ['key2', 'value2']]);

mapHashmap.forEach((value, key) => {
    console.log(`Key: ${key}, Value: ${value}`);
});

You can also use a for loop with destructuring to iterate through a Map's entries:

for (const [key, value] of mapHashmap) {
    console.log(`Key: ${key}, Value: ${value}`);
}

This approach is cleaner and more readable than object iteration, demonstrating one advantage of using the Map class for hashmaps in TypeScript.

Checking if a Key Exists in a TypeScript Hashmap​

Using Objects​

To see if a key exists in a hashmap with an object, use the in operator:

const objectHashmap: { [key: string]: any } = { key1: 'value1', key2: 'value2' };

console.log('key1' in objectHashmap); // Output: true
console.log('key3' in objectHashmap); // Output: false

You can also use the hasOwnProperty method or the newer Object.hasOwn() function:

console.log(objectHashmap.hasOwnProperty('key1')); // Output: true
console.log(Object.hasOwn(objectHashmap, 'key1')); // Output: true (ES2022)

Using Maps​

To see if a key exists in a hashmap with a Map, use the has() method:

const mapHashmap: Map<string, any> = new Map([['key1', 'value1'], ['key2', 'value2']]);

console.log(mapHashmap.has('key1')); // Output: true
console.log(mapHashmap.has('key3')); // Output: false

This method provides a clean and direct way to check for key existence, which can be especially useful when implementing complex filtering logic as described in complex-filters-in-convex.

Adding, Updating, and Deleting Entries in a TypeScript Hashmap​

Using Objects​

To add, update, or remove entries in a hashmap with an object, use this syntax:

const objectHashmap: { [key: string]: any } = { key1: 'value1', key2: 'value2' };

objectHashmap['key3'] = 'value3'; // Add a new entry
objectHashmap['key1'] = 'new_value1'; // Update an existing entry
delete objectHashmap['key2']; // Delete an entry

console.log(objectHashmap); // Output: { key1: 'new_value1', key3: 'value3' }

When managing key value pair data, remember that object properties always convert keys to strings, which can lead to unexpected behavior with numeric keys.

Using Maps​

To add, update, or remove entries in a hashmap with a Map, use these methods:

const mapHashmap: Map<string, any> = new Map([['key1', 'value1'], ['key2', 'value2']]);

mapHashmap.set('key3', 'value3'); // Add a new entry
mapHashmap.set('key1', 'new_value1'); // Update an existing entry
mapHashmap.delete('key2'); // Delete an entry

console.log(mapHashmap); // Output: Map { 'key1' => 'new_value1', 'key3' => 'value3' }

These methods create a more consistent API compared to object syntax, which is particularly useful when building complex applications as discussed in functional-relationships-helpers.

Choosing Between JavaScript Objects and Maps for Hashmaps​

When deciding whether to use JavaScript objects or Maps for a hashmap, consider these points:

  • Key Type: Use a Map if you need non-string keys. Objects convert all keys to strings, while Maps preserve the original key types.
  • Prototype Pollution: Use a Map to avoid prototype pollution. Since Maps don't inherit from Object.prototype, there's no risk of key collisions with built-in methods.
  • Iteration: Use a Map if you need to iterate in a specific order. Maps guarantee iteration in the order of insertion, while objects don't.
  • Performance: Use a Map for better performance with large datasets, especially for frequent additions, deletions, and key checks.

The typescript dictionary implementation techniques can help you create type-safe hashmaps. For Convex applications specifically, the types-cookbook demonstrates how to use validators and types to ensure data consistency.

Handling Complex Data Structures in TypeScript Hashmaps​

When working with complex data structures in TypeScript hashmaps, you'll need effective strategies for nested objects, arrays, and deep copying. Here are some practical approaches:

Nested Objects​

TypeScript makes it easy to define and work with nested object structures in hashmaps:

interface UserPreferences {
  theme: string;
  notifications: boolean;
  language: string;
}

interface User {
  name: string;
  preferences: UserPreferences;
}

const userMap: { [userId: string]: User } = {
  'user1': {
    name: 'Alice',
    preferences: {
      theme: 'dark',
      notifications: true,
      language: 'en'
    }
  }
};

// Access nested properties
console.log(userMap['user1'].preferences.theme); // Output: 'dark'

// Update nested properties
userMap['user1'].preferences.theme = 'light';

This approach works well with Record<K, T> for stronger type definitions.

Arrays​

When storing arrays in hashmaps, you can leverage array methods for data manipulation:

const categoryMap: { [key: string]: string[] } = {
  'fruits': ['apple', 'banana', 'orange'],
  'vegetables': ['carrot', 'broccoli', 'spinach']
};

// Add an item
categoryMap['fruits'].push('grape');

// Filter items
const aFruits = categoryMap['fruits'].filter(fruit => fruit.startsWith('a'));
console.log(aFruits); // Output: ['apple']

// Map to create derived data
const fruitLengths = categoryMap['fruits'].map(fruit => fruit.length);
console.log(fruitLengths); // Output: [5, 6, 6, 5]

The functional-relationships-helpers article demonstrates similar patterns for working with related data in Convex applications.

Deep Copying​

When working with complex nested structures, be careful about reference sharing. For deep copies, consider these approaches:

// Using JSON (simple but has limitations with certain data types)
const deepCopy = JSON.parse(JSON.stringify(originalObject));

// Using structured clone (for modern browsers/environments)
const deepCopy2 = structuredClone(originalObject);

// Using a library like lodash
// import _ from 'lodash';
// const deepCopy3 = _.cloneDeep(originalObject);

For simple cases, object spreading can create shallow copies:

const shallowCopy = { ...originalObject };

For TypeScript applications handling complex nested structures, you may also need to consider memory management strategies. The complex-filters-in-convex article demonstrates techniques for efficiently filtering and manipulating complex data.

Boosting Performance When Using Hashmaps in TypeScript​

To maximize the efficiency of TypeScript hashmaps, follow these practical performance optimization strategies:

Use Maps for Large Datasets​

The built-in Map class generally outperforms objects for large datasets and frequent operations:

// Better for large datasets
const largeDataMap = new Map<string, any>();

// Less efficient for thousands of entries
const largeDataObject: { [key: string]: any } = {};

This is especially true when you need to frequently check for key existence or iterate through the collection.

Avoid Unnecessary Iterations​

Minimize loops and iterations when working with large hashmaps:

// Inefficient - multiple iterations
const keys = Object.keys(objectHashmap);
const filteredKeys = keys.filter(key => key.startsWith('user'));
const values = filteredKeys.map(key => objectHashmap[key]);

// More efficient - single iteration
const values = Object.entries(objectHashmap)
  .filter(([key]) => key.startsWith('user'))
  .map(([_, value]) => value);

Choose the Right Data Structure​

Select the appropriate data structure based on your specific needs:

// Use a Set for unique values with fast lookups
const uniqueIds = new Set<string>();
uniqueIds.add('id1');
uniqueIds.add('id2');
console.log(uniqueIds.has('id1')); // Fast lookup

// Use WeakMap when keys are objects that need garbage collection
const userDataCache = new WeakMap<User, UserData>();

The usestate-less article demonstrates how choosing appropriate data structures can improve overall application performance.

Type Optimization​

Use specific types instead of any to improve TypeScript's type checking and potential runtime performance:

// Less optimal
const anyMap: Map<string, any> = new Map();

// More optimal - specific types
const userMap: Map<string, User> = new Map();

Final Thoughts on TypeScript Hashmaps​

TypeScript hashmaps offer effective tools for storing and retrieving data efficiently. By understanding the differences between JavaScript objects and Maps, handling complex data structures appropriately, and implementing performance optimizations, you can write more efficient and maintainable TypeScript code.

Whether you're building simple data storage or complex data manipulation logic, the right hashmap implementation will help you solve problems effectively while maintaining good performance. These practical techniques will serve you well as you develop TypeScript applications of any scale.