The Picture: A Table With Real Keys, a Bag of Distinct Values, a Function That Pauses, a Pattern for Text

Rafi runs a small tea stall near Dhaka University. He keeps a little program that counts how often each regular comes back. Each customer is an object, such as { name: "Mitu" }. So Rafi writes the obvious thing: an object, with the customer as the key and the count as the value.

The program runs. But at the end of the week every count is the same huge number, as if one person drank all the tea. Nothing crashed, and no line looks wrong. The bug is in what an object does with its keys.

This module gives you four tools that fix this kind of problem. A Map is a table whose keys can be anything, objects included. A Set is a bag that keeps each value once. A generator is a function that pauses and hands out one value at a time. A regular expression is a pattern that finds text. This lesson shows each one at work, and the rest of the module takes them apart.

A plain object turns every key into a string

In Module 8 you learned that an object's keys are strings. Write obj[42] and the key is "42". That rule also applies when the key is an object. JavaScript turns the object into a string first, and every plain object becomes the same string.

const rafi = { name: "Rafi" };
const mitu = { name: "Mitu" };
const visits = {};
for (const person of [rafi, mitu, rafi]) {
  visits[person] = (visits[person] ?? 0) + 1;
}
console.log(Object.keys(visits));
console.log(visits[rafi]);

[ '[object Object]' ]
3

There is only one key, "[object Object]". Rafi and Mitu both landed on it, so Rafi's count is 3, the total of everyone. That is the bug in the tea stall. An object is a fine table when the keys are words. It cannot tell two objects apart.

Map: a table whose keys can be anything

A Map is a table built for this job. You put a pair in with set(key, value) and read it back with get(key). The key can be any value at all: a string, a number, true, a function, or an object. An object key is compared by identity, which means "is this the very same object?", not by what it contains.

const rafi = { name: "Rafi" };
const mitu = { name: "Mitu" };
const visits = new Map();
for (const person of [rafi, mitu, rafi]) {
  visits.set(person, (visits.get(person) ?? 0) + 1);
}
console.log(visits.size);
console.log(visits.get(rafi), visits.get(mitu));
for (const [person, count] of visits) console.log(person.name, count);

2
2 1
Rafi 2
Mitu 1

Now there are two entries, one per person. size counts them, with no Object.keys needed. And a for...of loop over a Map gives you [key, value] pairs, which the loop takes apart into two names.

A Map also keeps its keys in the order they were first set. Setting a key that is already there changes its value but not its place.

const shelf = new Map();
shelf.set("tea", 15).set(7, "seven").set(true, "yes").set("coffee", 40);
shelf.set("tea", 20);
console.log([...shelf.keys()]);
console.log(shelf.get("tea"));

[ 'tea', 7, true, 'coffee' ]
20

Each set returns the Map itself, so the calls chain. The keys come back as a string, a number, a boolean and a string, in the order they arrived. tea stays first, even though it was set again with a new price.

The widget below draws a Map after each line. An object key is drawn by its identity, so two objects that look the same are still two boxes.

Look at step 5. The new object holds the same name as rafi, yet it gets its own entry. A Map never looks inside an object key. It only asks whether it is the same object.

Set: each value once

A Set is a Map with no values: a bag that holds each value at most once. You add a value, ask has, and read size. Adding a value that is already inside does nothing. This makes a Set the natural tool for "have I seen this before?" and for removing repeats.

const scans = ["rafi", "mitu", "rafi", "nila", "mitu"];
const unique = new Set(scans);
console.log(unique.size);
console.log(unique.has("nila"), unique.has("tania"));
console.log([...unique]);

3
true false
[ 'rafi', 'mitu', 'nila' ]

new Set(scans) adds every name in turn, so the repeats fall away. A Set keeps first-seen order too, so spreading it gives the names in the order they first came. has answers in about the same time whether the set holds five names or five million. Lesson 04 measures that against an array's includes.

A generator hands out values one at a time

So far every function you wrote ran from top to bottom in one go. A generator is a function that can stop in the middle and continue later. You write it with function*, and inside it, yield hands out one value and pauses right there.

Calling a generator function does not run its body. It gives you a generator object. Each time you call its next() method, the body runs until the next yield. Then next() returns { value, done }.

function* threeDays() {
  console.log("  (start)");
  yield "Saturday";
  console.log("  (resumed)");
  yield "Sunday";
  yield "Monday";
}
const days = threeDays();
console.log("made the generator");
console.log(days.next());
console.log(days.next());
console.log(days.next());
console.log(days.next());

made the generator
  (start)
{ value: 'Saturday', done: false }
  (resumed)
{ value: 'Sunday', done: false }
{ value: 'Monday', done: false }
{ value: undefined, done: true }

Read the order closely. "made the generator" prints before "(start)", because making the generator ran nothing. The first next() runs up to the first yield. The second resumes right after it and prints "(resumed)". The fourth finds the body finished, so it says done: true.

A for...of loop calls next() for you and stops when done is true. Because the body only runs when asked, a generator can even be endless. The loop just stops asking.

function* countFrom(n) {
  while (true) yield n++;
}
for (const k of countFrom(5)) {
  if (k > 8) break;
  console.log(k);
}

5
6
7
8

while (true) looks like a hang, but it is safe here. Each turn of that loop pauses at yield, and break stops asking for more. The widget shows a generator talking both ways: next(value) can also hand a value back in.

Steps 4 and 6 are the surprise. The value passed to next("large") comes out of the yield that paused before. So a yield is a two-way door: a value goes out, and later a value comes back in.

A regular expression is a pattern for text

The last tool works on text. A regular expression, or regex, is a small pattern that describes text you want to find. You write it between two slashes. In /#\w+/, the # means a literal hash sign, \w means one letter, digit or underscore, and + means "one or more of that".

const post = "Fuchka at #Dhanmondi, then tea at #TSC!";
console.log(/#\w+/.test(post));
console.log(post.match(/#\w+/g));
console.log("call 01712-345678".replace(/\d/g, "#"));

true
[ '#Dhanmondi', '#TSC' ]
call #####-######

test answers yes or no: does the pattern appear anywhere? match with the g flag, for "global", returns every match as an array. replace with /\d/g swaps every digit, which no plain string method does in one call. Lesson 02 goes through the whole pattern language, piece by piece.

const m = new Map();             // a table; keys of any type, by identity
m.set(key, value)  m.get(key)    // put and read; set returns m, so calls chain
m.has(key)  m.delete(key)  m.size
for (const [k, v] of m) { }      // pairs, in the order keys were first set
const s = new Set(list);         // each value once; s.add(v), s.has(v), s.size
function* gen() { yield v; }     // gen() makes a paused generator
g.next()                         // runs to the next yield: { value, done }
/#\w+/g                          // a regex: # then one or more word characters, every match
text.match(re)  re.test(text)  text.replace(re, "new")

const reviews = "good tea good price slow service good tea";
const counts = new Map();
for (const word of reviews.split(" ")) {
  counts.set(word, (counts.get(word) ?? 0) + 1);
}
for (const [word, count] of counts) console.log(word, count);
const top = [...counts].sort((a, b) => b[1] - a[1])[0];
console.log("most used:", top[0]);

good 3
tea 2
price 1
slow 1
service 1
most used: good

function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}
function* take(n, items) {
  for (const item of items) {
    if (n-- <= 0) return;
    yield item;
  }
}
console.log([...take(10, fibonacci())]);

[
  0, 1,  1,  2,  3,
  5, 8, 13, 21, 34
]

const prices = new Map([["tea", 15]]);
console.log(prices["tea"]);
prices["coffee"] = 40;
console.log(prices.size, prices.get("coffee"));

undefined
1 undefined

function* greet() {
  console.log("hello from the generator");
  yield 1;
}
greet();
console.log("done");

done

const order = "2 tea, 3 singara, 10 samosa";
console.log(order.match(/\d+/));
console.log(order.match(/\d+/g));

[
  '2',
  index: 0,
  input: '2 tea, 3 singara, 10 samosa',
  groups: undefined
]
[ '2', '3', '10' ]

const s = new Set([1, "1", 1.0, NaN, NaN, 0, -0]);
console.log(s.size);

6
rafi
mitu
rafi
constructor
mitu
rafi

new rafi
new mitu
again rafi
new constructor
again mitu
again rafi
distinct 3

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

2
doc 1
lab 50
5
doc
lab
doc
doc
lab

doc-1
lab-50
doc-2
doc-3
lab-51

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

3
Best #fuchka in #Dhaka! #fuchka
no tags here, just 100% love
#dhaka#rain and #FUCHKA_time

#fuchka 2
#dhaka 2
#rain 1
#fuchka_time 1

const input = require("fs").readFileSync(0, "utf8");
const lines = input.split("\n");
let at = 0;
const next = () => lines[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

7
dhaka nodi rain dhaka hawa nodi sky

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

5

Next: every method of Map, Set, WeakMap, iterators, generators and regular expressions, one by one.