Simplify word count (#102)

Author: pearmini

app/examples/word-count.recho.js

@@ -4,7 +4,7 @@
  * @created 2025-09-13
  * @pull_request 96
  * @github pearmini
- * @thumbnail_start 152
+ * @thumbnail_start 119
  */
 
 /**
@@ -44,7 +44,7 @@ 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
+ * Then 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
@@ -83,9 +83,9 @@ const filtered = echo(words.filter((w) => !ignoredWords.includes(w)));
  *
  * Next, we count the frequencies of the words. We use the following method:
  *
- * - `array.reduce(callback, initial)`: reduces the array to a single value.
+ * - `array.reduce(callback, initialValue)`: reduces the array to a single value.
  *
- * The result should an associative array (or object in JavaScript) that maps
+ * The result should be an associative array (or object in JavaScript) that maps
  * each word to its frequency.
  */
 
@@ -102,76 +102,43 @@ const frequencies = echo(
  *                           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:
+ * The final step is to visualize the result. Since Recho is light, you don't
+ * need some sophisticated visualizations. Some basic string manipulation is
+ * enough to create something simple that provides insights. The following
+ * methods are used:
  *
- * - `Math.max(...array)`: returns the maximum value in the array.
+ * - `Object.entries(object)`: returns an array of key-value pairs.
  * - `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.
+ * - `string.repeat(value)`: repeats the string `value` times.
+ * - `string.join(separator)`: joins the array to a string with the separator.
  */
 
 //➜ [ [ "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"));
+//➜ 🟩🟩🟩🟩🟩 dog
+//➜ 🟩🟩🟩🟩 cat
+//➜ 🟩🟩🟩 mouse
+//➜ 🟩 playing
+//➜ 🟩 yard
+//➜ 🟩 barked
+//➜ 🟩 loudly
+//➜ 🟩 ran
+//➜ 🟩 quickly
+//➜ 🟩 hid
+//➜ 🟩 under
+//➜ 🟩 bench
+//➜ 🟩 kept
+//➜ 🟩 looking
+//➜ 🟩 jumped
+//➜ 🟩 small
+//➜ 🟩 fence
+//➜ 🟩 followed
+//➜ 🟩 bird
+//➜ 🟩 watched
+//➜ 🟩 silently
+//➜ 🟩 moved
+echo(entries.map(([word, count]) => "🟩".repeat(count) + " " + word).join("\n"));
 
 /**
  * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -186,12 +153,7 @@ echo(rows.join("\n"));
  * - `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
  */