1.Differences Between set and array
2.Explain set methods
3.Differences Between set and map
4.Explain map methods
1.Differences Between set and arrayclick here for solution
click here for solution
click here for solution
click here for solution
click here for solution
Unique values
The biggest difference between an Array & Set is that Arrays can have duplicate values whereas Sets cannot. The other big difference is that data in an array is ordered by index whereas Sets use keys & the elements are iterable in the order of insertion.
Initializing a Set
const mySet = new Set(); // Initializes an empty set
const mySet2 = new Set([1, 2, 3, 3]); // Initializes a set with 3 items
const mySet3 = new Set(1); // Throws an error
The Set constructor takes in an iterable object as input. The set will be initialized with only the unique values from that iterable object. That is why a set created from [1, 2, 3, 3] only contains three values.
Access elements
Since Set is a key based collection, we cannot access elements using an index as we do with an array.
const mySet = new Set([1, 2, 3]);
console.log(mySet[0]); // undefined
Set exposes some helper methods like values to get all the values in insertion order & has to check if a value exists in a Set
const mySet = new Set([1, 1, 2]);
console.log(mySet.values()); // 1,2
console.log(mySet.has(2)); // true
Adding new values
Adding a new element to the end of an array is a simple operation accomplished by using the Array.prototype.push method. Adding elements to the beginning of an array is a much slower task which can be accomplished by using Array.prototype.unshift.
const myArray = [ 1, 2 , 3];
myArray.push(4);
myArray.unshift(0);
console.log(myArray); // [ 0, 1, 2, 3, 4 ]
There is only one way to add a new value to a Set & that is using the Set.prototype.add method. Set checks all existing values for duplicates when this action is performed. If you try to add a pre-existing value then it is simply ignored without throwing any errors.
const mySet = new Set([1, 1, 2]);
mySet.add(3); // Successfully added
mySet.add(2); // Doesn't add the value. No error thrown!
console.log(mySet.values()); // 1,2,3
Removing values
Arrays provide a multitude of ways to remove values. We have pop, shift, splice.
pop - Removes the last element.
shift - Removes the first element.
splice - Removes a range of values starting from a given index up to a specified length.
const myArray = [ 1, 2 ,3, 4, 5];
myArray.pop(); // [ 1, 2, 3, 4 ]
myArray.shift(); // [ 2, 3, 4 ]
myArray.splice(0, 2); // [ 4 ]
Sets don’t need that much flexibility when removing values. We have delete & clear to work with.
delete - Deletes a given element.
clear - Removes all the elements in the set.
The benefit of the interface exposed by Set is that it makes it easy to delete a specific value whereas that is a bit tedious to do in an Array.
const mySet = new Set([ 1, 2 ,3, 4, 5]);
mySet.delete(1);
console.log(mySet.values()); // { 2, 3, 4, 5 }
mySet.clear();
console.log(mySet.values()); // { }
Locating an element / Accessing an element
First of all, Set does not support random access to an element by index like in Array, which means:
console.log(set[0]); //undefined
console.log(arr[0]); //1
2.Explain set methodsclick here for solution
click here for solution
JavaScript Set add() method
The JavaScript Set add() method is used to add an element to Set object with a specified value. Each element must have a unique value.
Syntax
The add() method is represented by the following syntax:
setObj.add(value)
<script>
var set = new Set();
set.add("jQuery");
set.add("AngularJS");
set.add("Bootstrap");
for (let elements of set) {
document.writeln(elements+"<br>");
}
</script>
Output:
jQuery
AngularJS
Bootstrap
Example 2
In this example, we will add the elements to set object in chainable form.
<script>
var set = new Set();
set.add("jQuery").add("AngularJS").add("Bootstrap");
for (let elements of set) {
document.writeln(elements+"<br>");
}
</script>
Output:
jQuery
AngularJS
Bootstrap
JavaScript Set clear() method
The JavaScript Set clear() method is used to remove all the elements from Set object.
Syntax
setObj.clear()
<script>
var set = new Set();
set.add("jQuery");
set.add("AngularJS");
set.add("Bootstrap");
document.writeln("Size before invoking clear() method: "+ set.size+"<br>");
set.clear();
document.writeln("Size after invoking clear() method: "+set.size);
</script>
Output:
Size before invoking clear() method: 3
Size after invoking clear() method: 0
Example 2
Let's see an example to determine whether the set object contains the specified element.
<script>
var set = new Set();
set.add("jQuery");
set.add("AngularJS");
set.add("Bootstrap");
document.writeln("Element present before invoking clear() method: "+ set.has("Bootstrap")+"<br>");
set.clear();
document.writeln("Element present after invoking clear() method: "+set.has("Bootstrap"));
</script>
Output:
Element present before invoking clear() method: true
Element present after invoking clear() method: false
JavaScript Set delete() method
The JavaScript Set delete() method is used to remove all the elements from Set object.
setObj.delete()
<script>
var set = new Set();
set.add("jQuery");
set.add("AngularJS");
set.add("Bootstrap");
document.writeln("Size before invoking delete() method: "+ set.size+"<br>");
set.delete("Bootstrap");
document.writeln("Size after invoking delete() method: "+set.size);
</script>
Output:
Size before invoking delete() method: 3
Size after invoking delete() method: 2
Example 2
Let's see an example to determine whether the set object contains the specified element.
<script>
var set = new Set();
set.add("jQuery");
set.add("AngularJS");
set.add("Bootstrap");
document.writeln("Element present before invoking delete() method: "+ set.has("Bootstrap")+"<br>");
set.delete("Bootstrap");
document.writeln("Element present after invoking delete() method: "+set.has("Bootstrap"));
</script>
**
Output:**
Element present before invoking delete() method: true
Element present after invoking delete() method: false
JavaScript Set entries() method
The JavaScript Set entries() method returns an object of new set iterator. This object contains an array of [value, value] for each element. It maintains an insertion order.
Unlike Map, the Set object doesn't use key externally. To keep the values unique it uses the key internally. Thus, Set considers the value of element as a key. In array[value, value], the first value represents the key whereas the second value represents the value of element.
Syntax
*setObj.entries() *
Return Value
A new object of set iterator that contains an array of [value, value] for each element.
<script>
var set = new Set();
set.add("jQuery");
set.add("AngularJS");
set.add("Bootstrap");
var itr=set.entries();
for(i=0;i<set.size;i++)
{
document.writeln(itr.next().value+"<br>");
}
</script>
Output:
jQuery,jQuery
AngularJS,AngularJS
Bootstrap,Bootstrap
<script>
var set = new Set();
set.add("jQuery");
set.add("AngularJS");
set.add("Bootstrap");
var itr=set.entries();
for(let elements of itr)
{
document.writeln(elements+"<br>");
}
</script>
Output:
jQuery,jQuery
AngularJS,AngularJS
Bootstrap,Bootstrap
JavaScript Set forEach() method
The JavaScript Set forEach() method executes the specified function once for each value in the Set object. It maintains an insertion order.
Unlike Map, the Set object doesn't use key externally. To keep the values unique it uses the key internally. Thus, Set considers the value of element as a key.
Syntax
The forEach() method is represented by the following syntax:
setObj.forEach(function callback(value1, value2, Set) {
//your iterator
}[, thisArg])
callback - It represents the function to execute.
value1, value2 - The value1 represents the key of the element whereas value2 represents the value. Both arguments contains the same value.
set - It represents the current Set object.
Let's see a simple example of forEach() method
<script>
var set = new Set(["jQuery","AngularJS","Bootstrap"]);
document.writeln("Fetching values :"+"<br>");
set.forEach(function display(value1,value2,set)
{
document.writeln('key[' + value1 + '] = ' + value2+"<br>");
})
</script>
Output:
Fetching values :
key[jQuery] = jQuery
key[AngularJS] = AngularJS
key[Bootstrap] = Bootstrap
JavaScript Set has() method
The JavaScript Set has() method indicates whether the Set object contains the specified value. It returns true if the specified value is present, otherwise false.
Syntax
The has() method is represented by the following syntax:
setObj.has(value)
.
JavaScript Set has() method example
Here, we will understand has() method through various examples.
Let's see an example to determine whether the set object contains the specified value.
<script>
var set = new Set();
set.add("jQuery");
set.add("AngularJS");
set.add("Bootstrap");
document.writeln(set.has("Bootstrap"));
</script>
Output:
true
Example 2
Let's see one more example to determine whether the set object contains the specified value.
<script>
var set = new Set();
set.add("jQuery");
set.add("AngularJS");
set.add("Bootstrap");
document.writeln(set.has()+"<br>");
document.writeln(set.has(5));
</script>
Test it Now
Output:
false
false
JavaScript Set values() method
The JavaScript Set values() method returns an object of new Set iterator. This object contains the value for each element. It maintains an insertion order.
Syntax
The values() method is represented by the following syntax:
setObj.values()
JavaScript Set values() method example
Here, we will understand values() method through various examples.
Example 1
Let's see a simple example of values() method.
<script>
var set = new Set();
set.add("jQuery");
set.add("AngularJS");
set.add("Bootstrap");
var itr=set.values();
document.writeln(itr.next().value+"<br>");
document.writeln(itr.next().value+"<br>");
document.writeln(itr.next().value);
</script>
Output:
jQuery
AngularJS
Bootstrap
Let's see the same example using for loop.
<script>
var set = new Set();
set.add("jQuery");
set.add("AngularJS");
set.add("Bootstrap");
var itr=set.values();
for(i=0;i<set.size;i++)
{
document.writeln(itr.next().value+"<br>");
}
</script>
Output:
jQuery
AngularJS
Bootstrap
3.Differences Between set and mapclick here for solution
Points to remember
- A map object cannot contain the duplicate keys.
- A map object can contain the duplicate values.
- The key and value can be of any type (allows both object and primitive values).
- A map object iterates its elements in insertion order.
JavaScript Map Methods
Let's see the list of JavaScript map methods with their description.
Methods Description
clear() It removes all the elements from a Map object.
delete() It deletes the specified element from a Map object.
entries() It returns an object of Map iterator that contains the key-value pair for each element.
forEach() It executes the specified function once for each key/value pair.
get() It returns the value of specified key.
has() It indicates whether the map object contains the specified key element.
keys() It returns an object of Map iterator that contains the keys for each element.
set() It adds or updates the key-value pairs to Map object.
values() It returns an object of Map iterator that contains the values for each element.
22.Explain map methodsclick here for solution
JavaScript Map clear() method
The JavaScript map clear() method is used to remove all the elements from Map object.
Syntax
The clear() method is represented by the following syntax:
*mapObj.clear() *
JavaScript Map clear() method example
Here, we will understand clear() method through various examples.
Let's see a simple example of clear() method.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
document.writeln("Size before invoking clear(): "+ map.size+"<br>");
map.clear();
document.writeln("Size after invoking clear(): "+map.size);
</script>
Output:
Size before invoking clear(): 3
Size after invoking clear(): 0
Let's see an example to determine whether the map object contains the specified element.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
document.writeln("Element present before invoking clear(): "+ map.has(2)+"<br>");
map.clear();
document.writeln("Element present after invoking clear(): "+map.has(2));
</script>
Output:
Element present before invoking clear(): true
Element present after invoking clear(): false
JavaScript Map delete() method
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
document.writeln("Size before invoking delete() method: "+ map.size+"<br>");
map.delete(2);
document.writeln("Size after invoking delete() method: "+map.size);
</script>
Output:
Size before invoking delete() method: 3
Size after invoking delete() method: 2
JavaScript Map entries() method
The JavaScript map entries() method returns an object of new map iterator. This object contains the key-value pair for each element. It maintains insertion order.
Let's see a simple example of entries() method.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
var itr=map.entries();
document.writeln(itr.next().value+"<br>");
document.writeln(itr.next().value+"<br>");
document.writeln(itr.next().value);
</script>
Output:
1,jQuery
2,AngularJS
3,Bootstrap
Let's see the same example using for loop.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
var itr=map.entries();
for(i=0;i<map.size;i++)
{
document.writeln(itr.next().value+"<br>");
}
</script>
Output:
1,jQuery
2,AngularJS
3,Bootstrap
JavaScript Map forEach() method
The JavaScript map forEach() method execute the specified function once for each key/value pair in the Map object.
JavaScript Map forEach() method example
Here, we will understand forEach() method through various examples.
Let's see an example to fetch the values from the Map object.
<script>
var map = new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
document.writeln("Fetching values :"+"<br>");
function display(values)
{
document.writeln(values+"<br>");
}
map.forEach(display);
</script>
`Output:
jQuery
AngularJS
Bootstrap`
Let's see an example to fetch the values and keys from the Map object.
<script>
var map = new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
document.writeln("Fetching values and keys :"+"<br>");
function display(values,key)
{
document.writeln(values+" "+key+"<br>");
}
map.forEach(display);
</script>
Output:
Fetching values and keys :
jQuery 1
AngularJS 2
Bootstrap 3
JavaScript Map get() method
The JavaScript map get() method returns the value of specified key of an element from a Map object.
Let's see a simple example of get() method.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
document.writeln(map.get(1)+"<br>");
document.writeln(map.get(2)+"<br>");
document.writeln(map.get(3));
</script>
Output:
jQuery
AngularJS
Bootstrap
Let's see an example to determine the result when map object doesn?t contain the specified key element.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
document.writeln(map.get(5)); //returns undefined
</script>
Output:
undefined
JavaScript Map has() method
The JavaScript map has() method indicates whether the Map object contains the specified key. It returns true if the specified key is present, otherwise false.
Let's see an example to determine whether the map object contains the specified key.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
document.writeln(map.has(2));
</script>
Output:
true
Let's see one more example to determine whether the map object contains the specified key.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
document.writeln(map.has(5));
</script>
Output:
false
Let's see the result when has() method is used without specifying key.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
document.writeln(map.has()+"<br>");
document.writeln(map.has("jQuery"));
</script>
Output:
false
false
JavaScript Map keys() method
The JavaScript map keys() method returns an object of new Map iterator. This object contains the key for each element. It maintains insertion order.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
var itr=map.keys();
document.writeln(itr.next().value+"<br>");
document.writeln(itr.next().value+"<br>");
document.writeln(itr.next().value);
</script>
Output:
1
2
3
Let's see the same example using for loop.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
var itr=map.keys();
for(i=0;i<map.size;i++)
{
document.writeln(itr.next().value+"<br>");
}
</script>
Output:
1
2
3
JavaScript Map set() method
The JavaScript map set() method is used to add or updates an element to map object with the particular key-value pair. Each value must have a unique key.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
document.writeln(map.get(1)+"<br>");
document.writeln(map.get(2)+"<br>");
document.writeln(map.get(3));
</script>
Output:
jQuery
AngularJS
Bootstrap
In this example, we will determine the result when same key is added with different values.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(1,"AngularJS");
map.set(3,"Bootstrap");
document.writeln(map.get(1)+"<br>");
document.writeln(map.get(2)+"<br>");
document.writeln(map.get(3));
</script>
Output:
AngularJS
undefined
Bootstrap
JavaScript Map values() method
The JavaScript map values() method returns an object of new Map iterator. This object contains the value for each element. It maintains insertion order.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
var itr=map.values();
document.writeln(itr.next().value+"<br>");
document.writeln(itr.next().value+"<br>");
document.writeln(itr.next().value);
</script>
Output:
jQuery
AngularJS
Bootstrap
Let's see the same example using for loop.
<script>
var map=new Map();
map.set(1,"jQuery");
map.set(2,"AngularJS");
map.set(3,"Bootstrap");
var itr=map.values();
for(i=0;i<map.size;i++)
{
document.writeln(itr.next().value+"<br>");
}
</script>
Output:
jQuery
AngularJS
Bootstrap
Top comments (0)