Elements of arrays can be of any type such as strings, numbers, objects, and so on. Arrays can grow dynamically. The problem with arrays is that they are slow in terms of execution time, and occupy more memory. This causes issues while developing applications that require too much computation and deal with large amount of numbers. Therefore array buffers were introduced to tackle this issue.

An array buffer is a collection of 8-bit blocks in memory. Every block is an array buffer element. The size of an array buffer needs to be decided while creating, it therefore it cannot grow dynamically. Array buffers can only store numbers. All blocks are initialized to number 0 on creation of an array buffer.

An array buffer object is created using ArrayBuffer constructor.

let buffer = new ArrayBuffer(80); //80 bytes size

Reading from and writing values into an array buffer object can be done using a DateView object. It's not compulsory that only 8 bits are used to represent a number. We can use 8, 16, 32 and 64 bits to represent a number. Here is an example, which shows how to create a DateView object and read/write to an ArrayBuffer object:

let buffer = new ArrayBuffer(80);
let view = new DataView(buffer);

view.setInt32(8,22,false);

var number = view.getInt32(8,false);

console.log(number); //Output "22"

Here we created a DataView object using DataView constructor. A DataView object provides several methods to read and write numbers into an array buffer object. Here we used setInt32() method which uses 32 bits to store a provided number.

All the methods of a DataView object that are used to write data to an array buffer object take three arguments. First argument represents the offset, that is, the byte we want to write the number to. Second argument is the number to be stored. And third argument is a Boolean type, which represents the endian of the number, such as false represents a big-endian.

Similarly all the methods of a DataView object that are used to read data of an array buffer object take two arguments. First argument is the offset and second argument represents the endian used.

Here are other functions for storing numbers provided by a DataView object:

Here are other functions for retrieving stored numbers by a DataView object:

We saw how to read and write numbers in array buffers. But the method was very cumbersome because we had to call a function every time. Typed arrays let us read and write to an array buffer object just like we do for normal arrays.

A typed array acts like a wrapper for an array buffer object and treats data of an array buffer object as a sequence of n-bit numbers. The n value depends on how we created the typed array.

Here is the code example that demonstrates how to create an array buffer object and read/write to it using a typed array:

var buffer = new ArrayBuffer(80);
var typed_array = new Float64Array(buffer);
typed_array[4] = 11;

console.log(typed_array.length);
console.log(typed_array[4]);

Output is:

10
11

Here we created typed array using the Float64Array constructor, it therefore treats data in the array buffer as a sequence of 64-bit signed decimal numbers. Here the array buffer object size was 640 bits therefore only 10 64-bit numbers can be stored.

Similarly, there are other typed array constructors to represent data in an array buffer as a sequence of different bit numbers. Here is the list:

Typed arrays provide all the methods that are also provided by normal JavaScript arrays. They also implement the iterable protocol therefore they can be used as an iterable object.

A Set is a collection of unique values of any data type. The values in a Set are arranged in insertion order. A Set is created using Set constructor. Here is an example:

let set1 = new Set();
let set2 = new Set("Hello!!!");

Here set1 is an empty Set. Whereas set2 was created using values of an iterable object, that is, characters of a string and the string was not empty therefore set2 is non-empty.

Here is example code, which demonstrates various operations that can be done on a Set:

let set = new Set("Hello!!!");

set.add(12); //add 12

console.log(set.has("!")); //check if value exists
console.log(set.size);

set.delete(12); //delete 12

console.log(...set);

set.clear(); //delete all values

Output is:

true
6
H e l o !

Here we added nine items to the set object but the size was only six because Set automatically deletes duplicate values. The characters land !were repeated multiple times.

The Set object also implements the iterable protocol so they can be used as an iterable object.

Sets are used when you want to maintain a collection of values and check if a value exists instead of retrieving a value. For example: Sets can be used as an alternative to an array if you only use the indexOf() method of the array in your code to check if an value exists.

Here are the differences between Set and WeakSet objects:

Apart from these three differences it behaves exactly the same way as a Set. Everything else apart from these three differences is same between a Set and WeakSet object.

A WeakSet object is created using WeakSet constructor. You cannot pass an iterable object as an argument to WeakSet object.

Here is an example to demonstrate WeakSet:

letweakset = new WeakSet();

(function(){
  let a = {};
  weakset.add(a);
})()

//here 'a' is garbage collected from weakset
console.log(weakset.size); //output "undefined"
console.log(...weakset); //Exception is thrown

weakset.clear(); //Exception, no such function

A Map is a collection of key/value pairs. Keys and values of a Map can be of any data type. The key/value pairs are arranged in the insertion order. A Map object is created using the Map constructor.

Here is an example, which demonstrates how to create a Map object and do various operations on it:

let map = new Map();
let o = {n: 1};

map.set(o, "A"); //add
map.set("2", 9);

console.log(map.has("2")); //check if key exists
console.log(map.get(o)); //retrieve value associated with key
console.log(...map);

map.delete("2"); //delete key and associated value
map.clear(); //delete everything

//create a map from iterable object
let map_1 = new Map([[1, 2], [4, 5]]);

console.log(map_1.size); //number of keys

Output is:

true
A
[object Object],A 2,9
2

While creating a Map object from an iterable object we need to make sure that the values returned by the iterable object are arrays, each of length 2 i.e., index 0 is the key and index 1 is the value.

If we try to add a key that already exists then it's overwritten. The Map objects also implement the iterable protocol and can therefore also be used as an iterable object. While iterating Maps using the iterable protocol, they return arrays with key/value pairs as you can see in the preceding example.

Here are the differences between the Map and the WeakMap objects:

Everything else, apart from these three differences is similar between the Map and the WeakMap object.

A WeakMap is created using WeakMap constructor. Here is an example that demonstrates its usage:

let weakmap = new WeakMap();

(function(){
  let o = {n: 1};
  weakmap.set(o, "A");
})()

//here 'o' key is garbage collected
let s = {m: 1};

weakmap.set(s, "B");

console.log(weakmap.get(s));
console.log(...weakmap); //exception thrown

weakmap.delete(s);
weakmap.clear(); //Exception, no such function

let weakmap_1 = new WeakMap([[{}, 2], [{}, 5]]);   //this works

console.log(weakmap_1.size); //undefined