- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
WeakMap object in JavaScript
WeakMap objects in javascript will be covered in this article, along with how to utilise them to store more key-value pairs in javascript effectively and keep them from being trash collected by the garbage collectors.
The WeakMap object is a native data structure for JavaScript that was added with the ES6 (ECMAScript 2015) version release. With the help of the WeakMap object, we can store private data associated with an object without interfering with garbage collection.
Let’s look at some of the examples and methods to understand the concept better −
Example 1 - Adding and Retrieving Values
WeakMaps have keys that must be objects and values that can be anything. With the set(key, value) and get(key) methods, we can add key-value pairs to a WeakMap and retrieve values.
In this example we will −
create a WeakMap object, and add key−value pairs using the set() method.
retrieve the values using the get() method.
Filename - index.html
<html>
<head>
<title>WeakMap object in JavaScript.</title>
<script>
let weakMap = new WeakMap();
let obj1 = {};
let obj2 = {};
weakMap.set(obj1, 'Value 1');
weakMap.set(obj2, 'Value 2');
console.log(weakMap.get(obj1)); // Output: Value 1
console.log(weakMap.get(obj2)); // Output: Value 2
</script>
</head>
<body>
<h1>WeakMap Object - Adding and Retrieving Values</h1>
</body>
</html>
Output
The result will like the image below.
Example 2 - WeakMap Garbage Collection and its Weak References
WeakMap has weak references for its keys, which means that if an object used as a key in a WeakMap has no other references, it will get garbage collected when it is not in use anymore. When the object is garbage collected, the corresponding key−value pair is automatically removed from the WeakMap.
In this example, we will −
create an object obj inside a function, and add the key−value pair to the WeakMap.
Since obj is not accessible outside the function, it becomes eligible for garbage collection, and the key−value pair is automatically removed from the WeakMap.
Filename - index.html
<html>
<head>
<title>WeakMap object in JavaScript.</title>
<script>
let myMap = new Map();
myMap.set('name', 'John');
myMap.set('age', 30);
myMap.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
for (let key of myMap.keys()) {
console.log(key);
}
for (let value of myMap.values()) {
console.log(value);
}
for (let [key, value] of myMap.entries()) {
console.log(`${key}: ${value}`);
}
</script>
</head>
<body>
<h1>Map Object - Iterating over a Map</h1>
</body>
</html>
Output
The result will like the image below.
Conclusion
In conclusion, the WeakMap object in JavaScript can be used to associate auxiliary data with objects without interfering with garbage collection. It uses weak references for keys, which enables the automatic cleanup of key−value pairs during garbage collection when the objects are no longer used in the application, or reachable by the DOM tree. We learned what are WeakMap objects in javascript using different methods and saw some examples explaining the same.
120 Views
