Skip to content

Commit 87e82c3

Browse files
pearminipearmini
committed
[Example] Word Count (#96)
1 parent dcc68d5 commit 87e82c3

File tree

1 file changed

+197
-0
lines changed

1 file changed

+197
-0
lines changed

‎app/examples/word-count.recho.js‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
/**
2+
* @title Word Count
3+
* @author Bairui Su
4+
* @created 2025-09-13
5+
* @pull_request 96
6+
* @github pearmini
7+
* @thumbnail_start 151
8+
*/
9+
10+
/**
11+
* ============================================================================
12+
* = Word Count =
13+
* ============================================================================
14+
*
15+
* This example shows how to count the frequency of words in a text and
16+
* visualize the result with a simple bar chart. Also, we'll cover some useful
17+
* JavaScript APIs related to string and array manipulation.
18+
*/
19+
20+
const text = `The dog, cat, and mouse were playing in the yard. Dog barked loudly, while cat ran quickly.
21+
Mouse hid under the bench, but the dog kept looking. Cat jumped over a small fence; dog followed.
22+
Bird watched silently as dog, cat, and mouse moved around.`;
23+
24+
/**
25+
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
26+
* Step 1. Normalize: lowercase + remove punctuation
27+
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
28+
*
29+
* The first step is to normalize the text by converting it to lowercase and
30+
* removing punctuation. Here we use two string methods:
31+
*
32+
* - `string.toLowerCase()`: converts the text to lowercase.
33+
* - `string.replace(pattern, replacement)`: replaces the pattern with the
34+
* replacement.
35+
*/
36+
37+
//➜ the dog cat and mouse were playing in the yard dog barked loudly while cat ran quickly
38+
//➜ mouse hid under the bench but the dog kept looking cat jumped over a small fence dog followed
39+
//➜ bird watched silently as dog cat and mouse moved around
40+
const clean = echo(text.toLowerCase().replace(/[.,!?;]/g, ""));
41+
42+
/**
43+
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
44+
* Step 2. Split into words
45+
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
46+
*
47+
* The we need to split the text into words by whitespace. Here we use
48+
*
49+
* - `string.split(splitter)`: splits the text into words by the splitter.
50+
* - `/\s+/`: a regular expression that matches one or more whitespace
51+
* characters.
52+
*/
53+
54+
//➜ [ "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"…
55+
const words = echo(clean.split(/\s+/));
56+
57+
/**
58+
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
59+
* Step 3. Remove Ignored Words
60+
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
61+
*
62+
* The next step is to remove ignored words. We first define a list of words
63+
* that we want to ignore.
64+
*/
65+
66+
const ignoredWords = ["the", "was", "not", "over", "and", "in", "were", "a", "while", "but", "as", "around"];
67+
68+
/**
69+
* Then we filter out the ignored words by the following method:
70+
*
71+
* - `array.filter(callback)`: filters the array by the callback. The callback
72+
* returns true for the words we want to keep.
73+
* - `array.includes(value)`: returns true if the array contains the value.
74+
*/
75+
76+
//➜ [ "dog", "cat", "mouse", "playing", "yard", "dog", "barked", "loudly", "cat", "ran", "quickly", "mouse", "hid", "under", "bench", "dog", "kept", "looking", "cat", "jumped", "small", "fence", "dog", "f…
77+
const filtered = echo(words.filter((w) => !ignoredWords.includes(w)));
78+
79+
/**
80+
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
81+
* Step 4. Count frequencies
82+
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
83+
*
84+
* Next, we count the frequencies of the words. We use the following method:
85+
*
86+
* - `array.reduce(callback, initial)`: reduces the array to a single value.
87+
*
88+
* The result should an associative array (or object in JavaScript) that maps
89+
* each word to its frequency.
90+
*/
91+
92+
//➜ { 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…
93+
const frequencies = echo(
94+
filtered.reduce((acc, w) => {
95+
acc[w] = (acc[w] || 0) + 1;
96+
return acc;
97+
}, {}),
98+
);
99+
100+
/**
101+
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
102+
* Step 5. Visualize it
103+
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
104+
*
105+
* The final step is to visualize the result. We first get the keys of the
106+
* object by `Object.keys(object)`, which is an array of the keys.
107+
*/
108+
109+
//➜ [ "dog", "cat", "mouse", "playing", "yard", "barked", "loudly", "ran", "quickly", "hid", "under", "bench", "kept", "looking", "jumped", "small", "fence", "followed", "bird", "watched", "silently", "mo…
110+
const keys = echo(Object.keys(frequencies));
111+
112+
/**
113+
* Then we get the maximum length of the keys by the following method:
114+
*
115+
* - `Math.max(...array)`: returns the maximum value in the array.
116+
* - `array.map(callback)`: maps the array to a new array by the callback.
117+
* - `string.length`: the character length of the string.
118+
*/
119+
120+
//➜ 8
121+
const maxLength = echo(Math.max(...keys.map((d) => d.length)));
122+
123+
/**
124+
* Next, we get the entries of the object by `Object.entries(object)`, which
125+
* is an array of pairs of the key and the value.
126+
*/
127+
128+
//➜ [ [ "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",…
129+
const entries = echo(Object.entries(frequencies));
130+
131+
/**
132+
* Then we map the entries to the rows of the chart by the following method:
133+
*
134+
* - `string.padStart(length, padString)`: pads the string to the length with
135+
* the padString.
136+
* - `string.repeat(value)`: repeats the string value times.
137+
*/
138+
139+
//➜ [ " dog-|🟩🟩🟩🟩🟩", " cat-|🟩🟩🟩🟩", " mouse-|🟩🟩🟩", " playing-|🟩", " yard-|🟩", " barked-|🟩", " loudly-|🟩", " ran-|🟩", " quickly-|🟩", " hid-|🟩", " under-|🟩", " …
140+
const rows = echo(
141+
entries.map(([key, value]) => {
142+
return key.padStart(maxLength) + "-|" + "🟩".repeat(value);
143+
}),
144+
);
145+
146+
/**
147+
* Finally, we join the rows with a newline character to get the final output.
148+
*
149+
* - `array.join(separator)`: joins the array with the separator.
150+
*/
151+
152+
//➜ dog-|🟩🟩🟩🟩🟩
153+
//➜ cat-|🟩🟩🟩🟩
154+
//➜ mouse-|🟩🟩🟩
155+
//➜ playing-|🟩
156+
//➜ yard-|🟩
157+
//➜ barked-|🟩
158+
//➜ loudly-|🟩
159+
//➜ ran-|🟩
160+
//➜ quickly-|🟩
161+
//➜ hid-|🟩
162+
//➜ under-|🟩
163+
//➜ bench-|🟩
164+
//➜ kept-|🟩
165+
//➜ looking-|🟩
166+
//➜ jumped-|🟩
167+
//➜ small-|🟩
168+
//➜ fence-|🟩
169+
//➜ followed-|🟩
170+
//➜ bird-|🟩
171+
//➜ watched-|🟩
172+
//➜ silently-|🟩
173+
//➜ moved-|🟩
174+
echo(rows.join("\n"));
175+
176+
/**
177+
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
178+
* References
179+
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
180+
*
181+
* Here are the links to the JavaScript APIs we used:
182+
*
183+
* - `string.toLowerCase()`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase
184+
* - `string.replace(pattern, replacement)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
185+
* - `string.split(splitter)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
186+
* - `array.filter(callback)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
187+
* - `array.includes(value)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
188+
* - `array.reduce(callback, initialValue)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
189+
* - `Object.keys(object)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
190+
* - `Object.entries(object)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
191+
* - `Math.max(...array)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max
192+
* - `array.map(callback)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
193+
* - `string.padStart(length, padString)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
194+
* the padString. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
195+
* - `string.repeat(value)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat
196+
* - `array.join(separator)`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join
197+
*/

0 commit comments

Comments
 (0)