Symbol
Features
Symbol is a new data type that came with the ES2015 standard. Symbol represents a unique token. A symbol is created using the function Symbol().
|
1 2 3 |
noviSymbol1 = Symbol(); noviSymbol2 = Symbol(); noviSymbol1 == noviSymbol2; // Returnsfalse |
A symbol can also be created with a label, which is passed to it as a string. That label does not affect the value of the symbol, but is useful for debugging and can be displayed using the toString() method on the symbol.
|
1 2 |
let nekiSymbol = Symbol('someLabel'); console.log(nekiSimbol); // Returns: Symbol('someLabel') |
Purpose: Object property key
Mostly “symbol” is used as the key of an object property, when we want to protect that property. When using “symbol” as the key of an object’s property, it is necessary to use square brackets to access the property (the so-called “bracket notation”). Such properties have the following characteristics:
- Unique Property
- The property cannot be enumerated through a “for…in” loop
- The property is ignored by the methods: Object.keys(), Object.getOwnPropertyNames() and JSON.stringify()
|
1 2 3 4 5 6 7 8 9 10 |
let user = {}; let email = Symbol(); user.name = 'Dragoljub'; user.age = 44; user[email] = 'nekimail@example.com'; Object.keys(user); // Returns: Array [ "name", "age" ] Object.getOwnPropertyNames(user); // Returns: Array [ "name", "age" ] JSON.stringify(user); // Returns: "{"name":"Dragoljub","age":44}" |
It should be noted that the privacy of this property is not 100%, because there is still a way to access the property via the methods “.getOwnPropertySymbols()” and .ownKeys():
|
1 2 |
Object.getOwnPropertySymbols(user); // Returns: Array [ Symbol() ] Reflect.ownKeys(user) // Returns: Array [ "name", "age", Symbol() ] |
Map
Features
Map is a collection of key/value pairs, where the key can be any type of data, unlike an object where the key can be a bit or a string or a symbol. It has a whole set of built-in methods for working with collection elements:
- .set() – defining a new pair
- .delete() – delete a pair
- .get() – get key value
- .keys() – list of all keys
- .values() – list of all values
- .entries() – returns all key/value pairs in separate strings
- .clear() – delete the contents of the object
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var person = new Map(); person.set("ime", "Dragoljub"); person.set("prezime", "Zivanovic"); person.set("posao", "programer"); console.log(person.has("ime")) // true console.log(person.size); // 3 person.delete("posao"); console.log(person.has("posao")); // false console.log(person.size); // 2 var result = person.get("prezime"); console.log(result); // "Zivanovic" console.log(person.keys()); // "ime", "prezime" console.log(person.values()); // "Dragoljub", "Zivanovic" console.log(person.entries()); // ["ime", "Dragoljub"], ["prezime", "Zivanovic"] person.clear(); console.log(person.size); // 0 |
Difference between object and Map
Map is a new object subtype that is very similar to object but with a few important differences:
The
Iteration through Map
The standard loop for..of as well as the method forEach()
are available for iterating through pairs.
|
1 2 3 4 5 6 7 8 9 10 11 |
var person = new Map(); person.set("ime", "Dragoljub"); person.set("prezime", "Zivanovic"); person.set("posao", "programer"); for (var [key, value] of person) { console.log(key + ' = ' + value); } // Returns: ime=Dragoljub, prezime=Zivanovic, posao=programer person.forEach((value,key) => console.log(key + ' = ' + value) ) // Returns: ime=Dragoljub, prezime=Zivanovic, posao=programer |
Converting object to “map”
We can convert the object to a new JavaScript type “map”. The map constructor new Map() accepts as arguments only iterable collections, therefore we need to create a series of [key, value] pairs from the properties of the object using the method “Object.entries(obj)”:
Example
|
1 2 3 |
const obj = { foo: 'bar', baz: 42 }; const map = new Map(Object.entries(obj)); console.log(map); // Map { foo: "bar", baz: 42 } |
WeakMap
WeakMap is also a collection of key/value pairs, but it is the “key” that makes the main difference between Map and WeakMap. The key in case of WeakMap cannot be any data type other than “object”. WeakMap has the same API as Map: set(), delete( get(), keys(), values(), entries(), clear().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
wm1.set(o2, 'azerty'); wm2.set(o1, o2); // a value can be anything, including an object or a function wm2.set(o3, undefined); wm2.set(wm1, wm2); // keys and values can be any objects. Even WeakMaps! wm1.get(o2); // "azerty" wm2.get(o2); // undefined, because there is no key for o2 on wm2 wm2.get(o3); // undefined, because that is the set value wm1.has(o2); // true wm2.has(o2); // false wm2.has(o3); // true (even if the value itself is 'undefined') wm3.set(o1, 37); wm3.get(o1); // 37 wm1.has(o1); // true wm1.delete(o1); wm1.has(o1); // false |
Difference between Map and WeakMap
Example
This last difference is the most important, and I will explain it in detail through an example. We will consider the case when both Map and WeakMap have object
‘s key properties
When the compiler reaches the line where the IIFE is and executes it, we no longer need the variable “a”, but the garbage collector will not clear it from memory.
When the compiler reaches the line where the IIFE is and executes it, we no longer need the variable “b”, since the reference to that object is “weak”, the garbage collector will delete the given variable and free the memory.
The conclusion from the previous example is that WeakMap has a better memory utilization than the Map data type where a memory leak can occur. The set data type is very similar to arrays, except that it does not allow duplicate values. The methods available through the “Set.prototype” object are: A properties: Iteration is possible using the for..of: loop or the available forEach(): method Using the “from()” method, we can create an array from the set object: The reverse is also true: and even this: WeakSet is a specific subtype of the Set data type because it can only contain a collection of objects. This last difference is the most important, and I will explain it in detail through an example. We will consider the case when both Set and WeakSet have object ‘s key properties When the compiler reaches the line where the IIFE is and executes it, we no longer need the variable “a”, but the garbage collector will not clear it from memory.
When the compiler reaches the line where the IIFE is and executes it, we no longer need the variable “b”, since the reference to that object is “weak”, the garbage collector will delete the given variable and free the memory.
The conclusion from the previous example is that the WeakSet has a better memory utilization than the Set data type where a memory leak can occur.Map and garbage collector
WeakMap and garbage collector
Set
Features
Example
Difference between arrays and Set collection
Array
Set
The value of elements can be duplicated
Contains only unique values
Focused on index and need to write code to find specific element and delete
Focused on the value of the element. Vresity can be found and deleted very easily.
Method
.push() to add elements
Method
.add() to add elements
Checking the existence of an element with the method
.includes() (ES7)
Checking the existence of an element with the
.has() method
The
.length property is used to determine the number of elements
The
.size property is used to determine the number of elements
The
arr.splice(0,arr.length) method is used to empty the collection
The
mySet.clear() method is used to empty the collection
Iteration through Set
Converting to strings
WeakSet
Difference between Set and WeakSet
Set
WeakSet
They can contain any type of data
They can only store objects
The number of collection members is obtained using the
.size property
The number of collection members is obtained using the
.length property
Iterable collection, can use
.forEach() or
for..of
Not an iterable collection and cannot use
.forEach() or
for..of
Not auto destroyed
If the object no longer has a reference it will be picked up by the garbage collector
Example
Set and garbage collector
WeakSet and garbage collector