style: use dollar variables (locating elements) (apify#1841)

As I progressed with apify#1584 I
felt the code examples were starting to be more and more complex. Then I
remembered that when I was young, us jQuery folks used to lean towards a
naming convention where variables holding jQuery selections were
prefixed with $. I changed the code examples in all lessons to adhere to
this as I feel it makes them more readable and less cluttered.

-----

ℹ️ The changes still use `$.map` and `$.each`, because they were made
prior to the facb3c0 commit. It's gonna
happen, but not yet.

Author: honzajavorek

sources/academy/webscraping/scraping_basics_javascript2/06_locating_elements.md

@@ -80,15 +80,15 @@ if (response.ok) {
   const $ = cheerio.load(html);
 
   $(".product-item").each((i, element) => {
-    const productItem = $(element);
+    const $productItem = $(element);
 
-    const title = productItem.find(".product-item__title");
-    const titleText = title.text();
+    const $title = $productItem.find(".product-item__title");
+    const title = $title.text();
 
-    const price = productItem.find(".price");
-    const priceText = price.text();
+    const $price = $productItem.find(".price");
+    const price = $price.text();
 
-    console.log(`${titleText} | ${priceText}`);
+    console.log(`${title} | ${price}`);
   });
 } else {
   throw new Error(`HTTP ${response.status}`);
@@ -108,6 +108,12 @@ Sony XBR-950G BRAVIA 4K HDR Ultra HD TV |
 
 There's still some room for improvement, but it's already much better!
 
+:::info Dollar sign variable names
+
+In jQuery and Cheerio, the core idea is a collection that wraps selected objects, usually HTML elements. To tell these wrapped selections apart from plain arrays, strings or other objects, it's common to start variable names with a dollar sign. This is just a naming convention to improve readability. The dollar sign has no special meaning and works like any other character in a variable name.
+
+:::
+
 ## Precisely locating price
 
 In the output we can see that the price isn't located precisely. For each product, our scraper also prints the text `Sale price`. Let's look at the HTML structure again. Each bit containing the price looks like this:
@@ -170,16 +176,16 @@ if (response.ok) {
   const $ = cheerio.load(html);
 
   $(".product-item").each((i, element) => {
-    const productItem = $(element);
+    const $productItem = $(element);
 
-    const title = productItem.find(".product-item__title");
-    const titleText = title.text();
+    const $title = $productItem.find(".product-item__title");
+    const title = $title.text();
 
     // highlight-next-line
-    const price = productItem.find(".price").contents().last();
-    const priceText = price.text();
+    const $price = $productItem.find(".price").contents().last();
+    const price = $price.text();
 
-    console.log(`${titleText} | ${priceText}`);
+    console.log(`${title} | ${price}`);
   });
 } else {
   throw new Error(`HTTP ${response.status}`);
@@ -243,18 +249,17 @@ Djibouti
     const $ = cheerio.load(html);
 
     $(".wikitable").each((i, tableElement) => {
-      const table = $(tableElement);
-      const rows = table.find("tr");
-
-      rows.each((j, rowElement) => {
-        const row = $(rowElement);
-        const cells = row.find("td");
-
-        if (cells.length > 0) {
-          const thirdColumn = $(cells[2]);
-          const link = thirdColumn.find("a").first();
-          const linkText = link.text();
-          console.log(linkText);
+      const $table = $(tableElement);
+      const $rows = $table.find("tr");
+
+      $rows.each((j, rowElement) => {
+        const $row = $(rowElement);
+        const $cells = $row.find("td");
+
+        if ($cells.length > 0) {
+          const $thirdColumn = $($cells[2]);
+          const $link = $thirdColumn.find("a").first();
+          console.log($link.text());
         }
       });
     });
@@ -289,10 +294,9 @@ Simplify the code from previous exercise. Use a single for loop and a single CSS
     const $ = cheerio.load(html);
 
     $(".wikitable tr td:nth-child(3)").each((i, element) => {
-      const nameCell = $(element);
-      const link = nameCell.find("a").first();
-      const linkText = link.text();
-      console.log(linkText);
+      const $nameCell = $(element);
+      const $link = $nameCell.find("a").first();
+      console.log($link.text());
     });
   } else {
     throw new Error(`HTTP ${response.status}`);