WeakMap in JavaScript - An Easy Introduction

WeakMap in JavaScript - An Easy Introduction

WeakMap allows you to add additional data into an Object that belongs to another or third-party code. With the special “weak” link feature of WeakMaps, we can make sure the data associated with this alien object, would only exist as long as the object is alive.

WeakMap is one of the most underrated and least used data structures in JavaScript. There are many JavaScript developers who don’t even know they exist. This tutorial will help you understand them. You will learn about what WeakMaps are, how they work and how they differ from Maps.

A quick introduction to WeakMap

Both, Maps and WeakMaps are new data structures, or collections, introduced in [ES6]. Another example of a collection is an array. Similarly to an array, both Maps and WeakMaps allow you to store data. In case of these Maps and WeakMaps you store in the form of key-value pairs.

If you want to access some value stored in a Map, all you have to do is to use the correct key. This also works for WeakMaps. When you want to access some value stored in a WeakMap, you also have to use correct key. Both, Maps and WeakMaps allow you to add new key-value pairs and remove existing.

What if you are not sure if a Map or WeakMap contains specific key? There is a method you can use to quickly check if the key exists. So, this is where Maps and WeakMaps work in the same way. Along with these similarities, there are some important differences between these two you need to know.

Differences between Maps and WeakMaps

The first difference between Maps and WeakMaps is the type of data you can use. With Maps, you can use any data type you want to create a key for the key-value pair. This also includes objects and functions. This is not true for WeakMaps. WeakMaps allow you to create keys only with objects, not with any other data type.

This is one of the main differences between Maps and WeakMaps. Another important difference is that all keys in a WeakMap are weakly referenced. This means that objects used as key for a WeakMap can still be garbage collected. This will happen when all references to those objects are gone.

When these objects are no longer used by any part of the program garbage collection will free them from memory. It is important to note that garbage collection will not free those objects from memory immediately. These objects will be only “marked” to be garbage collected.

Only when the next “cycle” of garbage collected happens, they will actually be freed. JavaScript runs these cycles automatically. So, you don’t have to worry about it. The last big difference between Maps and WeakMaps is that WeakMaps are not iterable. You can’t iterate over them using a loop or forEach() method like you can over Maps.

This also means that you have to know the key you are looking for. Since we are talking about iterability. WeakMaps also don’t have any size property. So, you don’t really know how many pairs are inside one. Lastly, there is no clear() method that would allow to remove all data from a WeakMap.

These differences are quite important and put serious constraints on what you can do with WeakMaps. However, don’t let this discourage you from learning more about them because WeakMaps can still be useful. We will talk about this soon, but first, let’s take a look at how you can create WeakMaps and what you can do with them.

javascript development language programming programming language technology theory web web design web development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Private Class Fields and Methods in JavaScript Classes

JavaScript private class fields and methods are new features for classes. In this tutorial, you will learn all you need to know about them.

Import and Export Statements in JavaScript and How to Use Them

Import and export statements are two great features introduced ES6 (ES2015). These two statement allows you to export and import your code and use it whenever you need. This tutorial will show you what import and export statements are, how they work and how to use them.

Latest Web Design and Development Trends To Follow In 2020

Web development is a dynamic field. With the emergence of new technologies each year, we can observe web development trends changing to a greater or lesser extent. In 2020 too, new technologies have emerged and