[JavaScript – ES2015] Maps and Sets

ES2015 provides the efficient data structures: Sets and Maps.

 

1. Sets

A Set is a collection of unique values. It is pretty easy to use the Sets: add(), has(), and size.

let greetings = new Set();
console.log(greetings.size); // 0

greetings.add("Hi").add("Hello");
console.log(greetings.size); // 2
console.log(greetings.has("Hi")); // true
console.log(greetings.has("Helo")); // false

// object as a key
let obj = { say: "Hiyo" };
greetings.add(obj);
console.log(greetings.has(obj)); // true
console.log(greetings.has({ say: "Hiyo" })); // false

let numbers = new Set([1, 2, 3]);
console.log(numbers.size); // 3
console.log(numbers.has(2)); // true

When you try to add the value that already exists in the Set, the duplicate value is simply ignored.

let greetings = new Set();
greetings.add("Hi").add("Hi").
  add("Hello").add("Hi");
console.log(greetings.size); // 2

let numbers = new Set([1, 2, 3, 2, 1, 2, 3]);
console.log(numbers.size); // 3

To remove the data from the Set, you can use the “delete()” or “clear()” methods.

let numbers = new Set([1, 2, 3, 4, 5]);
console.log(numbers.size); // 5
numbers.delete(3);
console.log(numbers.size); // 4
numbers.clear();
console.log(numbers.size); // 0

 

2. Iterating Sets

There are a couple of ways to iterate Sets:

  • forEach()
  • for..of
  • iterators: entries(), keys(), values()
let numbers = new Set([1, 3, 5]);

numbers.forEach(n => {
  console.log(n);
});

for(let n of numbers) {
  console.log(n);
};

let iterator = numbers.entries();
for (let entry of iterator) {
  console.log(entry); // [1, 1], [3, 3], [5, 5]
};

iterator = numbers.keys();
for (let key of iterator) {
  console.log(key); // 1, 3, 5
};

iterator = numbers.values();
for (let value of iterator) {
  console.log(value); // 1, 3, 5
};

 

3. Maps

The Map object holds key-value pairs.
You can use the set() and get() methods. If the key already exists in the Map, the existing value is updated.

let numbers = new Map();
numbers.set(1, "10");
numbers.set(2, "20");
console.log(numbers.get(1)); // 10
numbers.set(1, "11");
console.log(numbers.get(1)); // 11
console.log(numbers.get(2)); // 20

The Map provides very similar features as the Set does: size, has(), delete(), clear(), and iterators.

let numbers = new Map([[1, 10], [2, 20], [3, 30]]);
console.log(numbers.has(1)); // true
console.log(numbers.has(10)); // false

numbers.forEach((value, key) => {
  console.log(`${key}: ${value}`); // 1: 10, 2: 20, 3: 30 
});

for (let n of numbers) {
  console.log(n); // [1, 10], [2, 20], [3, 30]
};

for (let [key, value] of numbers) {
  console.log(`${key}: ${value}`); // 1: 10, 2: 20, 3: 30 
};

let iterator = numbers.entries();
for (let entry of iterator) {
  console.log(entry); // [1, 1], [3, 3], [5, 5]
};

It is easier to see how iterators (entries(), keys(), and values()) work.

let numbers = new Map([[1, 10], [2, 20], [3, 30]]);
console.log(numbers.has(1)); // true
console.log(numbers.has(10)); // false

let iterator = numbers.entries();
for (let entry of iterator) {
  console.log(entry); // [1, 10], [2, 20], [3, 30]
};

iterator = numbers.keys();
for (let key of iterator) {
  console.log(key); // 1, 2, 3
};

iterator = numbers.values();
for (let value of iterator) {
  console.log(value); // 10, 20, 30
};

 

4. WeakSets and WeakMaps

WeakSets and WeakMaps provide the similar functionality as their strong counterparts: Sets and Maps.

When objects are referenced in the Sets and Maps, these objects cannot be garbage-collected until you remove them from the sets and maps.

WeakSets and WeakMaps store the weakly-reference objects and when the object is garbage-collected, the object will not be held in the Set or Map.

WeakSets and WeakMaps do not have properties or methods that are related with the collection: “size“, “entries()“, “keys()“, “values()“, and “forEach()“. But you can add/set, delete, or check the existence (has).

WeakSets can only save objects and WeakMaps should have an object key.

let wm = new WeakMap();
let number = { key: 10 };
wm.set(number, 10);
console.log(wm.has(number)); // true

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s