From 797cc7b51a01f4645bd2481edf8f9ac9f7530388 Mon Sep 17 00:00:00 2001 From: pearmini Date: Sun, 14 Sep 2025 16:15:54 -0400 Subject: [PATCH] Add example word count --- app/examples/word-count.recho.js | 194 +++++++++++++++++++++++++++++++ 1 file changed, 194 insertions(+) create mode 100644 app/examples/word-count.recho.js diff --git a/app/examples/word-count.recho.js b/app/examples/word-count.recho.js new file mode 100644 index 0000000..19fa924 --- /dev/null +++ b/app/examples/word-count.recho.js @@ -0,0 +1,194 @@ +/** + * @title Word Count + * @author Bairui Su + * @created 2025-09-13 + * @pull_request 96 + * @github pearmini + * @thumbnail_start 151 + */ + +/** + * ============================================================================ + * = Word Count = + * ============================================================================ + * + * This example shows how to count the frequency of words in a text and + * visualize the result with a simple bar chart. Also, we'll cover some useful + * JavaScript APIs related to string and array manipulation. + */ + +const text = `The dog, cat, and mouse were playing in the yard. Dog barked loudly, while cat ran quickly. +Mouse hid under the bench, but the dog kept looking. Cat jumped over a small fence; dog followed. +Bird watched silently as dog, cat, and mouse moved around.`; + +/** + * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + * Step 1. Normalize: lowercase + remove punctuation + * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + * + * The first step is to normalize the text by converting it to lowercase and + * removing punctuation. Here we use two string methods: + * + * - `string.toLowerCase()`: converts the text to lowercase. + * - `string.replace(/[.,!?;]/g, "")`: removes punctuation. + */ + +//➜ the dog cat and mouse were playing in the yard dog barked loudly while cat ran quickly +//➜ mouse hid under the bench but the dog kept looking cat jumped over a small fence dog followed +//➜ bird watched silently as dog cat and mouse moved around +const clean = echo(text.toLowerCase().replace(/[.,!?;]/g, "")); + +/** + * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + * Step 2. Split into words + * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + * + * The we need to split the text into words by whitespace. Here we use + * + * - `string.split(splitter)`: splits the text into words by the splitter. + * - `/\s+/`: a regular expression that matches one or more whitespace + * characters. + */ + +//➜ [ "the", "dog", "cat", "and", "mouse", "were", "playing", "in", "the", "yard", "dog", "barked", "loudly", "while", "cat", "ran", "quickly", "mouse", "hid", "under", "the", "bench", "but", "the", "dog"… +const words = echo(clean.split(/\s+/)); + +/** + * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + * Step 3. Remove Ignored Words + * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + * + * The next step is to remove ignored words. We first define a list of words + * that we want to ignore. + */ + +const ignoredWords = ["the", "was", "not", "over", "and", "in", "were", "a", "while", "but", "as", "around"]; + +/** + * Then we filter out the ignored words by the following method: + * + * - `array.filter(callback)`: filters the array by the callback. The callback + * returns true for the words we want to keep. + * - `array.includes(value)`: returns true if the array contains the value. + */ + +//➜ [ "dog", "cat", "mouse", "playing", "yard", "dog", "barked", "loudly", "cat", "ran", "quickly", "mouse", "hid", "under", "bench", "dog", "kept", "looking", "cat", "jumped", "small", "fence", "dog", "f… +const filtered = echo(words.filter((w) => !ignoredWords.includes(w))); + +/** + * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + * Step 4. Count frequencies + * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + * + * Next, we count the frequencies of the words. We use the following method: + * + * - `array.reduce(callback, initial)`: reduces the array to a single value. + * + * The result should an associative array (or object in JavaScript) that maps + * each word to its frequency. + */ + +//➜ { dog: 5, cat: 4, mouse: 3, playing: 1, yard: 1, barked: 1, loudly: 1, ran: 1, quickly: 1, hid: 1, under: 1, bench: 1, kept: 1, looking: 1, jumped: 1, small: 1, fence: 1, followed: 1, bird: 1, watched… +const frequencies = echo( + filtered.reduce((acc, w) => { + acc[w] = (acc[w] || 0) + 1; + return acc; + }, {}), +); + +/** + * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + * Step 5. Visualize it + * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + * + * The final step is to visualize the result. We first get the keys of the + * object by `Object.keys(object)`, which is an array of the keys. + */ + +//➜ [ "dog", "cat", "mouse", "playing", "yard", "barked", "loudly", "ran", "quickly", "hid", "under", "bench", "kept", "looking", "jumped", "small", "fence", "followed", "bird", "watched", "silently", "mo… +const keys = echo(Object.keys(frequencies)); + +/** + * Then we get the maximum length of the keys by the following method: + * + * - `Math.max(...array)`: returns the maximum value in the array. + * - `array.map(callback)`: maps the array to a new array by the callback. + * - `string.length`: the character length of the string. + */ + +//➜ 8 +const maxLength = echo(Math.max(...keys.map((d) => d.length))); + +/** + * Next, we get the entries of the object by `Object.entries(object)`, which + * is an array of pairs of the key and the value. + */ + +//➜ [ [ "dog", 5 ], [ "cat", 4 ], [ "mouse", 3 ], [ "playing", 1 ], [ "yard", 1 ], [ "barked", 1 ], [ "loudly", 1 ], [ "ran", 1 ], [ "quickly", 1 ], [ "hid", 1 ], [ "under", 1 ], [ "bench", 1 ], [ "kept",… +const entries = echo(Object.entries(frequencies)); + +/** + * Then we map the entries to the rows of the chart by the following method: + * + * - `string.padStart(length, padString)`: pads the string to the length with + * the padString. + * - `string.repeat(value)`: repeats the string value times. + */ + +//➜ [ " dog-|🟩🟩🟩🟩🟩", " cat-|🟩🟩🟩🟩", " mouse-|🟩🟩🟩", " playing-|🟩", " yard-|🟩", " barked-|🟩", " loudly-|🟩", " ran-|🟩", " quickly-|🟩", " hid-|🟩", " under-|🟩", " … +const rows = echo( + entries.map(([key, value]) => { + return key.padStart(maxLength) + "-|" + "🟩".repeat(value); + }), +); + +/** + * Finally, we join the rows with a newline character to get the final output. + * + * - `array.join(separator)`: joins the array with the separator. + */ + +//➜ dog-|🟩🟩🟩🟩🟩 +//➜ cat-|🟩🟩🟩🟩 +//➜ mouse-|🟩🟩🟩 +//➜ playing-|🟩 +//➜ yard-|🟩 +//➜ barked-|🟩 +//➜ loudly-|🟩 +//➜ ran-|🟩 +//➜ quickly-|🟩 +//➜ hid-|🟩 +//➜ under-|🟩 +//➜ bench-|🟩 +//➜ kept-|🟩 +//➜ looking-|🟩 +//➜ jumped-|🟩 +//➜ small-|🟩 +//➜ fence-|🟩 +//➜ followed-|🟩 +//➜ bird-|🟩 +//➜ watched-|🟩 +//➜ silently-|🟩 +//➜ moved-|🟩 +echo(rows.join("\n")); + +/** + * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + * References + * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + * + * Here are the links to the JavaScript APIs we used: + * + * - `string.split(splitter)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split + * - `array.filter(callback)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter + * - `array.includes(value)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes + * - `array.reduce(callback, initialValue)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce + * - `Object.keys(object)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys + * - `Object.entries(object)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries + * - `Math.max(...array)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max + * - `array.map(callback)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map + * - `string.padStart(length, padString)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart + * the padString. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart + * - `string.repeat(value)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat + * - `array.join(separator)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join + */