Thursday, August 30, 2018

Javascript Es6 Set tutorials | Typescript Set Examples

In this blog post, We are going to cover the Set tutorials in typescript/javascript with examples. Other Classes are Map , WeakSet and WeakMap

Javascript/Typescript Set

Javascript/typescript Set Examples Es6Set is a collection of the data structure is used to store the unique elements of any type. The set stores combination of primitive types and other custom types.
Es6 introduced Set class for storing unique elements.
 javascript supports Set, Map, WeakMap data structures with Es6 version. Set preserves the order in which values are inserted. Doing Iteration also shows the same order.
Typescript has no built-in classes supported for Set, But Typescript supports same data structure that ES6 supports.

Es6 classes can be used in typescript with some configuration
In the tsconfig.json file, add "lib": ["es6"] or you can add polyfill.js for this classes.
This example mentioned will work in Typescript and Javascript.

Set Syntax

The set object is created using let and new keyword.
new Set([iterable]);
Parameters - Iterable data is passed, data can be passed with an array. All the elements are added to the new Set and return Set Object. if the parameter is empty or Null, Empty Set is being created.

Set Object Creation Examples 

We will see how we can add/remove/get/contains an element of a Set object. Empty Object Creation object set creation is simple.
new Set() //outputs {}
adding array elements to Set
let setData=new Set(['one', 'two', 'three']); // {"one", "two", "three"}
We can also add elements using add() method.
new Set().add('one').add('two).add('three');  // {"one", "two", "three"}
The above example used chaining of add method to Set object.
add() method add the elements and returns object reference not the added element

Set.add() method examples

this method adds the element to end of a set object and returns the set object
syntax 
Set<any>.add(value:any):Set<any>
parameter - add specific value to set Return - return Set object
Example
var myset = new Set();
myset.add(1);
myset.add(13).add(14).add(51);
console.log(myset) // outputs 1, 13, 14, 51

Set.delete() method examples

This deletes an element from Set Object.
Syntax 
Set<any>.delete(value:any):boolean
Parameters - value is to be deleted from the Set Returns - true, if a value exists in the set and deleted from Set, false - if unable to delete and value not exist in Set
Example
var myset = new Set();
myset.add(1);
myset.add(13).add(14).add(51);
console.log(myset.delete(1)) // Outputs true
console.log(myset.delete(43)) // Outputs false

Set.clear() method examples

This method removes all elements from a Set
Syntax
Set<any>.clear():void
It does not take any parameters and returns nothing
Examples
var myset = new Set([11, 12, 13, 14, 15]);
console.log(myset); //outputs {11, 12, 13,14, 15}
myset.clear()
 console.log(myset); // outputs empty set {}

Set.has() method examples

This method returns true if a value exists in the Set.
Syntax
Set<any>.has(value:any):boolean
Parameter - value to check in set returns - true if a value exists in a set, else false Example
var myset = new Set([11, 12, 13, 14, 15]);
console.log(myset.has(11));// output true
console.log(myset.has(131));// output false 

Set entries() method examples

This method is used to iterate the elements in the Set object. This returns new Iterator Object that has an array of the element. Each element contains [value,value]
Syntax
Set<any>.entries():IterableIterator<any,any>
No parameters passed Returns Iterator with key and values. Here key and value are of the same element in a set.
Example
var myset = new Set([11, 12, 13, 14, 15]);
var entriesIterator = myset.entries();
console.log(entriesIterator.next().value); // outputs 11
console.log(entriesIterator.next().value); // outputs 12
console.log(entriesIterator.next().value); // outputs 13

Set keys() method examples 

This method is used to iterate the elements in the Set object. This returns all the elements from Set in insertion order
Syntax
Set<any>.keys():IterableIterator<any>
Return elements iterator.
Example
var myset = new Set([11, 12, 13, 14, 15]);
var keysIterator = myset.keys();
console.log(keysIterator.next().value); // outputs 11
console.log(keysIterator.next().value); // outputs 12
console.log(keysIterator.next().value); // outputs 13

Set values() method examples

This method is used to iterate the elements in the Set object of the same insertion order. This is same like keys() method
Syntax
Set<any>.values():IterableIterator<any>
Return elements/values iterator.
Example
var myset = new Set([11, 12, 13, 14, 15]);
var valuesIterator = myset.values();
console.log(valuesIterator.next().value); // outputs 11
console.log(valuesIterator.next().value); // outputs 12
console.log(valuesIterator.next().value); // outputs 13

Set forEach() method examples

This is used to iteration for a set of elements. This takes callback function which applies to each element of a Set
Syntax
Set<any>.forEach(callbackFn[,parameters]):void
callbackFn - It is a function which executes for each element of Set parameters - values passed callbackFn accepts three arguments the First argument is key, the second argument values and the third argument is Set object.
Example
var myset = new Set([11, 12, 13, 14, 15]);
// one way to use forEach
myset.forEach(display);
function display(key)
{    console.log(key); 
}
// Another way to use forEach
myset.forEach(function (value) { 
    console.log(value); 
});

set size example

Returns size of the unique elements in a set
Syntax
Set<any>.size():number
Returns - Number of elements in a set
Example
var myset = new Set([11, 12]);
console.log(myset.size); // outputs 2
 

for...Of Set Example 

This is another way of doing iteration in Set of Objects.
var myset = new Set([11, 12, 13, 14, 15]);
for (let noValue of myset) {
    console.log(noValue);     //outputs 11,12,13,14,15
}

Duplicate/unique Element Example

In this, Duplicates elements are added, but Set accepts unique elements
var myset = new Set([11, 12, 11]);
console.log(myset);    
var myset =new Set([{name: 'one'}, {name: 'one'}, {name: 'one'}]);  
console.log(myset);     //outputs  {{name: 'one'}, {name: 'one'}, {name: 'one'}}
Unique value are tested using === operator.
For primitive values, This is simple and easy understand For Object uniqueness - === returns if both object references are equal. In the second example, added three objects, three different references, Three objects are added How to Convert Set to Array Set accepts an iterable object as parameters for adding elements. An array that implements Iterable can be passed as a parameter
var array = [3, 14, 35];
var myset = new Set(array);
console.log(myset.size === array.length); // true
console.log(myset.has(14)); // true

filter, map and reduce Example

map and reduce and filter operators will not support a Set object using javascript and typescript. But we can apply with some mechanism in javascript and typescript. First, you need to convert to an array using Es6 Spread operator, then we can apply these methods.
const mySet = new Set([0,1,4,8]);
[...mySet].map()
 [...mySet].filter()
[...mySet].reduce()

How to do a merge of multiple sets?

Using the forEach method, We can merge multiple sets
var first = new Set([11,12,13]);
var second = new Set([41,51,61]);
second.forEach(first.add, first);
console.log(first);   // 11,12,13,41,51,61

Related article

1 comments so far


EmoticonEmoticon