The document provides an overview of JavaScript collections, detailing three main types: indexed, keyed, and DOM collections. It elaborates on specific structures like arrays, objects, maps, sets, weakmaps, and weaksets, highlighting their functionalities, performance, and use cases. The author emphasizes the importance of selecting the appropriate collection type based on specific scenarios.

1. Arrays, Maps, Sets, and Beyond
Mastering JavaScript Collections
Haim Michael https://lifemichael.com

2. Introduction
• The available collections in JavaScript are the data structures we can use to
store and manage data. The main types of collections in JavaScript are Arrays,
Objects, Maps, Sets, WeakMaps and WeakSets.

3. Types of Collections
• There are three types of collections the JavaScript programming language
supports: Indexed Collections, Keyed Collections, and DOM Collections.

4. The Indexed Collections
• The indexed collection contains data that is ordered by index and can also be
accessed using this index. The indexed collections supported by JavaScript
include the type Array and the typed array types.

5. The Keyed Collections
• The keyed collection is a data collection ordered by keys instead of an index
and consists of key-value pairs. JavaScript supports two types of keyed
collections: Map and Set.

6. The DOM Collections
• When interacting with the Document Object Model, we might find ourselves
working with collections that hold objects that represent elements on the HTML
page.

7. The Use of Arrays
• The array is an object that was created using the Array constructor function.
• The array can hold values indexed with numeric keys starting from 0. Each value
can be of any type.
let countries = [”France”,”Italy”,”Israel”];
let order = [1232,true,”fruits”];

8. The Use of Types Arrays
• The JavaScript typed arrays are array-like objects that provide a mechanism for
reading and writing raw binary data in memory buffers.
• The implementation of the JavaScript typed arrays is split into buffers and
views.

9. The Use of Objects
• Each object is an unordered collection of key-value pairs. The type of every keys
can be either String or Symbol. The values can be of any type.
• We use objects for storing key-value pairs. We can get the value of a specific
key either using the dot notation or using the bracket notation.
let student = {id:123123,name:”Mosh”,average:89};
console.log(student[”id”]);
console.log(student.name);

10. Arrays and Objects
• When dealing with accessing specific elements, whether dealing with
accessing the value of a property by the key or accessing an element the array
holds by its index, the time complexity is O(1).

11. Arrays and Objects
• When inserting or deleting elements from the end of the array (push/pop), the
time complexity is O(1). When the element is not at the end, the time
complexity grows and it might be even O(n). When working with an object, the
time complexity will usually be O(1).

12. The Use of Maps
• The Map object holds key-value pairs. Similar to plain, simple objects. Both the
values and the keys can be either a primitive value or an object.
let data = new Map();
data.set(‘USA’,’USD’);
data.set(‘France’,’EURO’);
data.set(‘Canada’,’CAD’);

13. Accidental Keys
• When using a map, it does not contain any default keys. The map will contain
what is explicitly put into it. When using an object, it might contain keys that
collide with keys coming from the prototype.

14. Object Injection Attacks
• When using a map, new key-value pairs cannot collide with keys coming from
the prototype. When using an object, setting user-provided key-value pairs may
allow an attacker to override the object’s prototype.

15. The Keys’Types
• The Map's keys can be any type (including functions, objects, or event
primitive). The object keys can be either a Symbol or a String.

16. The Map Performance
• Compared with Object, Map performs better in scenarios involving frequent
additions and removals of key-value pairs.

17. Data Serialization
• When working with an object we can easily serialize the object to JSON, using
JSON.stringify(). The other way around, parsing from JSON to Object can
be easily done using JSON.parse(). When using maps, we don’t have any
native mechanism for serialization or parsing.

18. The Use of Sets
• Using a set, we can store unique values. Those values can be of any type. They
can be either primitive values or references for objects.
let currencies = new Set([“USD”,”EURO”,”GBP”,”CAD”]);
let numbers = new Set();
numbers.add(22);
numbers.add(3);
numbers.add(8);

19. Removing Duplicates
• We can easily remove duplicates from an array we have. We just need to
convert the array into the set and then convert the set into an array.
const numbers = [2, 13, 4, 4, 2];
console.log([...new Set(numbers)]);

20. The Use of WeakSet
• When creating a new WeakSet object, we get a collection of garbage-
collectable values.
• Every value the WeakSet holds may occur only once. It must be unique in the
WeakSet's collection.
• Every value the WeakSet holds must be garbage-collectable. Primitive values
cannot be kept by a WeakSet object.

21. The Use of WeakSet
• Using a WeakSet object is fairly simple. The first step would be creating a new
object using the WeakSet constructor function.
const ws = new WeakSet();
ws.add({width:4,height:5});
ws.add({width:3,height:2});

22. The Use of WeakMap
• When having a WeakMap object we actually have a collection of key-value pairs, that
their keys must be objects or non-registered symbols. The values can be of any type.
• When using a WeakMap object, during the execution of the code, each and every key is
a candidate to be garbage collected if that what it takes to allow the program to
continue running.

23. The Use of WeakMap
• The WeakMap objects don't allow observing the liveness of its keys, which is why it
doesn't allow enumeration. If we need a list of keys, we better use a Map instead of a
WeakMap.
const data = new WeakMap();
data.set({id:123,name:”mosh”},{grade:89});
data.set({id:342,name:”dan”},{grade:78});

24. Caching Functions Data
• When caching data associated with calling a specific function (the key can be the input,
and the value can be the output), we can improve the performance. Using a WeakMap
for holding the key -value pairs (input and output), we can ensure the program won’t
crash due to out-of-memory errors.
• Using Map and WeakRef , we can implement a similar caching that will allow us to
have input that its type is not limited to objects.

25. The SCL.js Library for TypeScript
• The SCL.js library (Standard Collections Library) for TypeScript provides us with various
types of collections.
• The collections in this library support generics.
https://samvv.github.io/scl.js

26. Summary & Conclusions
• We better use the most appropriate collection for the scenario we are
dealing with.

27. Questions & Answers
• Thanks for attending my talk.
haim.michael@lifemichael.com
+972 54 6655837
https://blog.lifemichael.com