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


Comments:

Very useful article

Kiranbabu - Aug 4, 2018

Very useful article

Similar Posts