JavaScript Map: Store and Find Values Using Keys
When we need to store data and later find it using a unique key, JavaScript’s Map collection is very useful.
A Map stores data in key-value pairs:
Key → Value
For example:
User Id — — — — — — — — User
“101” — — — — — — — — — → “John”
“102” — — — — — — — — — → “Lizy”
“103” — — — — — — — — — → “Sarah”
Instead of searching through every value, we can directly use the key to retrieve the value.
Creating a Map
We can create a Map using:
const users = new Map();Then we can store values using .set() method:
users.set(“101”, “John”);
users.set("102", "Lizy");
users.set("103", "Sarah");Now our Map contains:
User Id — — — User
101 — — — —→ John
102 — — —-→ Lizy
103 — — — -→ Sarah
Getting a value using its key
We can use .get() method:
const user = users.get(“102”);
console.log(user);Output:
Lizy
The important idea is that we don’t need to manually search through all the users.
We simply provide the key:
users.get(“102”);and the Map gives us the corresponding value.
Why is this useful?
Imagine we have 10,00,000 (1M) users and we want to find the information for:
A user has Id 785432
If we stored the users in a simple array, we might have to search through the array to find the matching user.
With a Map, we organize the data around a key:
const users = new Map();users.set(“785432”, {
name: "John",
age: 30
});Now we can directly look up the user:
const user = users.get("785432");
console.log(user.name);Output:
John
The key is used to locate the corresponding value efficiently.
Checking whether a key exists or not
We can use .has() method:
if (users.has("785432")) {
console.log("User exists");
}This is useful when we want to check whether a value has already been stored.
Updating a value
Calling .set() with an existing key updates its value:
users.set("101", "Michael");Now:
101 → Michael
The old value “John” has been replaced.
Removing a value
We can remove a key-value pair using .delete() method:
users.delete(“101”);Now user Id 101 is no longer in the Map.
A simple real-world example
Imagine we are processing comments for a social media application.
We might want to quickly find all comments belonging to a particular post.
We can use the post ID as the key and then set the comments:
const commentsByPost = new Map();
commentsByPost.set("101", [
"Great post!",
"Very interesting!",
"Thanks for sharing!"
]);
commentsByPost.set("102", [
"Nice article!",
"I learned something new."
]);Now if we want the comments for post with Id 101:
const comments = commentsByPost.get("101");
console.log(comments);We can directly retrieve the comments associated with that post.
The Map gives us a simple structure:
101 → [comment1, comment2, comment3]
102 → [comment1, comment2]
This is one of the powerful ideas behind using a Map:
Store a value using a key, and later use that same key to quickly look up the value.
Map in one picture
Instead of thinking of a Map as just another JavaScript collection, think of it as a key-based lookup structure:
SET
Key ─────────────→ Value
GET
Key ─────────────→ Value
Get SUBEESH PALAMADATHIL’s stories in your inbox
Join Medium for free to get updates from this writer.
That simple relationship makes Map extremely useful when we repeatedly need to find data using a known key.
Using Map with React State in TypeScript
Now, let’s look at an example of using Map to update state in the frontend.
Map becomes especially useful in React when we have data that is naturally organized by a unique key.
For example, imagine a social-media application where we need to store comments for multiple posts.
interface PostComment {
commentId: string;
postId: string;
userId: string;
userName: string;
comment: string;
likeCount: number;
…..
};Instead of keeping all comments in one large array:
const [comments, setComments] = useState<PostComment[]>([]);we can organize them by postId:
const [comments, setComments] = useState<Map<string, PostComment[]>>(
new Map()
);Now the structure looks conceptually like this:
postId → comments[]
101 → [comment1, comment2, comment3]
102 → [comment4, comment5]
103 → [comment6, comment7]
The postId becomes the key, and the array of comments becomes the value.
Updating comments for a specific post
Suppose we receive a new comment for post with Id 101.
We can update only the comments belonging to that post:
const addComment = (postId: string, newComment: PostComment) => {
setComments(prev => {
const next = new Map(prev);
const existingComments = next.get(postId) ?? [];
next.set(postId, [
newComment,
...existingComments
]);
return next;
});
};Let’s understand what happens here.
First:
const next = new Map(prev);We create a new Map containing the existing state.
This is important in React because we should not directly mutate the existing state object.
Then:
const existingComments = next.get(postId) ?? [];We use the postId as the key to retrieve that post’s comments.
For example:
next.get("101");might return:
[
comment1,
comment2
]
If there are no comments for that post yet, ?? [] gives us an empty array.
Then:
next.set(postId, [
newComment,
...existingComments
]);replaces the value for that postId.
The result becomes:
101 → [newComment, comment1, comment2]
while comments belonging to other posts remain unchanged.
Updating an existing comment
Map is also useful when we need to update a particular comment.
For example, suppose a user likes a comment and we want to increase its likeCount.
const updateCommentLike = (
postId: string,
commentId: string
) => {
setComments(prev => {
const next = new Map(prev);
const postComments = next.get(postId);
if (!postComments) {
return prev;
}
const updatedComments = postComments.map((comment: PostComment) =>
comment.commentId === commentId
? {
...comment,
likeCount: comment.likeCount + 1
}
: comment
);
next.set(postId, updatedComments);
return next;
});
};Here, Map quickly takes us to the comments belonging to the required post:
next.get(postId);We don’t need to search through comments belonging to other posts.
Then we update the required comment inside that post’s comment array.
Why this combination is useful
This gives us two levels of organization:
Map
│
├── 101 → Comment[]
│ │
│ ├── comment1
│ ├── comment2
│ └── comment3
│
├── 102 → Comment[]
│ │
│ ├── comment4
│ └── comment5
│
└── 103 → Comment[]
│
└── comment6
The Map provides fast lookup by postId, while the array preserves the ordering of comments.
This is a good example of choosing a data structure based on the operations we perform most frequently.
Map is not automatically the best data structure for every situation. But when our data naturally follows:
key → value
and we frequently need to retrieve or update the value using that key, Map can be an excellent choice.
Map allows us to retrieve the comments associated with a specific post in O(1) average time.
In React, we can combine Map with immutable state updates to efficiently organize and update data such as comments, messages, notifications, users, or other entities grouped by an identifier.
As we have seen, the Map data structure can be used to efficiently manage comments, nested comments, and their reply structures in a frontend application.
