Session 9: Advanced JavaScript 4/4

sets, maps & more

Sets

A set is a collection of unique values.

            const emptySet = new Set();
            emptySet.add(1);  // now contains: 1
            emptySet.add(2);  // now contains: 1, 2
            emptySet.add(2);  // now contains: 1, 2
            console.log(emptySet);  // Set { 1, 2 }

            const letters = new Set(["a","b","c","c","c"]);
            letters.add("d");     // now contains: a, b, c, d
            letters.delete("a");  // now contains: b, c, d
            console.log(letters.has("b"))  // true
            console.log(letters);  // Set { 'b', 'c', 'd' }

            for (const letter of letters.values()) {
              console.log(letter);
            }
          

Set @ MDN Web Docs

Maps

A map is a set of key-value pairs

            const myMap = new Map();
            myMap.set("number", 42);
            myMap.set("name", "John");
            myMap.set("name", "Jane");
            myMap.set("Name", "Doe");
            myMap.set(42, "the answer");
            myMap.set(true, false);

            console.log(myMap.get("number"))  // 42
            console.log(myMap.get(42))        // the answer
            console.log(myMap.get(true))      // false
            console.log(myMap.get(false))     // undefined
            myMap.delete(true)

            for (const [key, value] of myMap.entries()) {
              console.log(key, value)
            }
          

Map @ MDN Web Docs

Regular expressions

Powerfull text search and replace patterns:
Regular Expressions @ MDN dev docs

            // outline of a regex: /pattern/flags
            const re1 = /some\w*/ig
            const re2 = new RegExp('some\\w*', 'ig')

            let matches = 'Someone is doing something'.matchAll(re1)
            for (const match of matches) {
              console.log(match)
            }
          

IIFE

immediately invoked function expression

a.k.a. self-executing anonymous function

            (function () {
              let var23 = 23;
              // do some calc now, which we need in order to
              // do some initialisation stuff
            })();

            // now an anonymous function was defined and immediately executed
            // we cannot execute the function another time, and everything that
            // happened inside the function did not affect the global scope

            // even shorter syntax for an IIFE:
            (() => {
              let var 23 = 23;
              // some more stuff here
            })();
          

IIFE @ MDN web docs

Closures

The problem

            // Initiate counter
            let counter = 0;

            // Function to increment counter
            function add() {
              counter += 1;
            }

            // Call add() 3 times
            add();
            add();
            add();

            // The counter should now be 3
            // But: everything with access to the global scope can change the counter
          

Closures @ MDN web docs

Closures

The solution

            const add = (function () {
              let counter = 0;
              return function () {counter += 1; return counter}
            })();

            add();
            add();
            add();

            // the counter is now 3
            // And: only the add() function has access to the counter variable
          

🎆 🎉 🎓 🎊 🎆
Thats it!

You have made it through all those
new, shiny, tricky, awesome, tedious, mind-boggling
concepts of JavaScript programming