SETS AND MAPS IN JAVASCRIPT

JAVASCRIPT SETS

A JavaScript set is a collection of unique values. Each value can only be entered once in a Set.

CREATE A SET

You can create a JavaScript set via:

Pass an array to the new Set() method
Create a new Set and use add() to add values
Create a new Set and use add() to add variables

NEW SET METHOD

Pass an Array to the constructor new Set():

// Create a Set
const letters = new Set([“a”,”b”,”c”]);

Use the add() method:

// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add(“a”);
letters.add(“b”);
letters.add(“c”);

Add variables with the method add():

// Create a Set
const letters = new Set();

// Create Variables
const a = “a”;
const b = “b”;
const c = “c”;

// Add Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);

METHOD ADD

If you add the same elements, only the first one will be saved:

letters.add(“a”);
letters.add(“b”);
letters.add(“c”);
letters.add(“c”);

//letters.size=3

THE FOREACH METHOD

The forEach() method invokes (calls) a function for each element of Set:

// Create a Set
const letters = new Set([“a”,”b”,”c”]);

// List all Elements
let text = “”;
letters.forEach (function(value) {
text += value + ‘ ‘;
})

// return a b c

THE VALUES METHOD

The values() method returns a new iterator object containing all the values in a Set:

// Create a Set
const letters = new Set([“a”,”b”,”c”]);

letters.values() // Returns [object Set Iterator]

// List all Elements
let text = “”;
for (const x of letters.values()) {
text += x + ‘ ‘;
}

//return a b c

Copy to Clipboard

JAVASCRIPT MAPS

A map contains key-value pairs where the keys can be of any data type. A map remembers the order in which keys are entered.

HOW TO CREATE A MAP

You can create a JavaScript map in two ways:

Passing an array to the new Map() method
Create a map and use Map.set()

You can create a map by passing an array to the new Map() constructor:

// Create a Map
const fruits = new Map([
[“apples”, 500],
[“bananas”, 300],
[“oranges”, 200]
]);

or:

// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set(“apples”, 500);
fruits.set(“bananas”, 300);
fruits.set(“oranges”, 200);

The set() method can also be used to modify existing map values:

fruits.set(“apples”, 200);

GET METHOD

The get() method gets the value of a key:

fruits.get(“apples”); // Returns 500

THE SIZE PROPERTY

The size property returns the number of elements in a map:

fruits.size;

The delete() method removes an element from Map
The has() method returns true if a key exists in a map

DIFFERENCES BETWEEN OBJECT AND MAPS

THE FOREACH METHOD

The forEach() method calls a function for each key/ value pair in a map:

// List all entries
let text = “”;
fruits.forEach (function(value, key) {
text += key + ‘ = ‘ + value + ‘ ‘;
})

//apples = 500 bananas = 300 oranges = 200

THE ENTRY METHOD

The entry() method returns an iterator object with the [key, value] pair in a map:

// List all entries
let text = “”;
for (const x of fruits.entries()) {
text += x;
}

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Maps</title>
    <script type="rocketlazyloadscript">
        function maps()
        {
             // Create a Map
            const fruits = new Map([
                ["apples", 500],
                ["bananas", 300],
                ["oranges", 200],
                ["lemons", 400]
            ]);
            // Duplicate entries
            fruits.set("apples", 500);
            console.log('The size of fruits is: ' + fruits.size);//Expected 4
            // Get Method
            console.log('Get Method: ' + fruits.get("apples"));
            // Delete Method
            let bool = fruits.delete('lemons');
            console.log(bool);
            bool = fruits.has('lemons');
            console.log(bool);
            // List all entries
            let text = "";
            fruits.forEach (function(value, key) {
                text += key + ' = ' + value + '  ';
            })
            console.log(text);
            // List all entries
            text = "";
            for (const x of fruits.entries()) {
                text += x + ' ';
            }
            console.log(text);
        }
    </script>
</head>
<body onload="maps()">
    
</body>
</html>

LINKS TO PREVIOUS POST

THE JAVASCRIPT LANGUAGE

LINK TO THE CODE ON GITHUB

GITHUB