style: use dollar variables (getting links) (#1844)

As I progressed with #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/09_getting_links.md

@@ -43,16 +43,15 @@ if (response.ok) {
   const html = await response.text();
   const $ = cheerio.load(html);
 
-  const data = [];
-  $(".product-item").each((i, element) => {
-    const productItem = $(element);
+  const $items = $(".product-item").map((i, element) => {
+    const $productItem = $(element);
 
-    const title = productItem.find(".product-item__title");
-    const titleText = title.text().trim();
+    const $title = $productItem.find(".product-item__title");
+    const title = $title.text().trim();
 
-    const price = productItem.find(".price").contents().last();
+    const $price = $productItem.find(".price").contents().last();
     const priceRange = { minPrice: null, price: null };
-    const priceText = price
+    const priceText = $price
       .text()
       .trim()
       .replace("$", "")
@@ -66,8 +65,9 @@ if (response.ok) {
         priceRange.price = priceRange.minPrice;
     }
 
-    data.push({ title: titleText, ...priceRange });
+    return { title, ...priceRange };
   });
+  const data = $items.get();
 
   const jsonData = JSON.stringify(data);
   await writeFile('products.json', jsonData);
@@ -97,13 +97,13 @@ async function download(url) {
 Next, we can put parsing into a `parseProduct()` function, which takes the product item element and returns the object with data:
 
 ```js
-function parseProduct(productItem) {
-  const title = productItem.find(".product-item__title");
-  const titleText = title.text().trim();
+function parseProduct($productItem) {
+  const $title = $productItem.find(".product-item__title");
+  const title = $title.text().trim();
 
-  const price = productItem.find(".price").contents().last();
+  const $price = $productItem.find(".price").contents().last();
   const priceRange = { minPrice: null, price: null };
-  const priceText = price
+  const priceText = $price
     .text()
     .trim()
     .replace("$", "")
@@ -117,24 +117,18 @@ function parseProduct(productItem) {
       priceRange.price = priceRange.minPrice;
   }
 
-  return { title: titleText, ...priceRange };
+  return { title, ...priceRange };
 }
 ```
 
 Now the JSON export. For better readability, let's make a small change here and set the indentation level to two spaces:
 
 ```js
-async function exportJSON(data) {
+function exportJSON(data) {
   return JSON.stringify(data, null, 2);
 }
 ```
 
-:::note Why asynchronous?
-
-The `exportJSON()` function doesn't need to be `async` now, but keeping it makes future changes easier — like switching to an async JSON parser. It also stays consistent with the upcoming `exportCSV()` function, which must be asynchronous.
-
-:::
-
 The last function we'll add will take care of the CSV export:
 
 ```js
@@ -161,13 +155,13 @@ async function download(url) {
   }
 }
 
-function parseProduct(productItem) {
-  const title = productItem.find(".product-item__title");
-  const titleText = title.text().trim();
+function parseProduct($productItem) {
+  const $title = $productItem.find(".product-item__title");
+  const title = $title.text().trim();
 
-  const price = productItem.find(".price").contents().last();
+  const $price = $productItem.find(".price").contents().last();
   const priceRange = { minPrice: null, price: null };
-  const priceText = price
+  const priceText = $price
     .text()
     .trim()
     .replace("$", "")
@@ -181,10 +175,10 @@ function parseProduct(productItem) {
       priceRange.price = priceRange.minPrice;
   }
 
-  return { title: titleText, ...priceRange };
+  return { title, ...priceRange };
 }
 
-async function exportJSON(data) {
+function exportJSON(data) {
   return JSON.stringify(data, null, 2);
 }
 
@@ -196,14 +190,14 @@ async function exportCSV(data) {
 const listingURL = "https://warehouse-theme-metal.myshopify.com/collections/sales"
 const $ = await download(listingURL);
 
-const data = []
-$(".product-item").each((i, element) => {
-  const productItem = $(element);
-  const item = parseProduct(productItem);
-  data.push(item);
+const $items = $(".product-item").map((i, element) => {
+  const $productItem = $(element);
+  const item = parseProduct($productItem);
+  return item;
 });
+const data = $items.get();
 
-await writeFile('products.json', await exportJSON(data));
+await writeFile('products.json', exportJSON(data));
 await writeFile('products.csv', await exportCSV(data));
 ```
 
@@ -232,14 +226,14 @@ Several methods exist for transitioning from one page to another, but the most c
 In DevTools, we can see that each product title is, in fact, also a link element. We already locate the titles, so that makes our task easier. We just need to edit the code so that it extracts not only the text of the element but also the `href` attribute. Cheerio selections support accessing attributes using the `.attr()` method:
 
 ```js
-function parseProduct(productItem) {
-  const title = productItem.find(".product-item__title");
-  const titleText = title.text().trim();
-  const url = title.attr("href");
+function parseProduct($productItem) {
+  const $title = $productItem.find(".product-item__title");
+  const title = $title.text().trim();
+  const url = $title.attr("href");
 
   ...
 
-  return { url, title: titleText, ...priceRange };
+  return { url, title, ...priceRange };
 }
 ```
 
@@ -274,15 +268,15 @@ We'll change the `parseProduct()` function so that it also takes the base URL as
 
 ```js
 // highlight-next-line
-function parseProduct(productItem, baseURL) {
-  const title = productItem.find(".product-item__title");
-  const titleText = title.text().trim();
+function parseProduct($productItem, baseURL) {
+  const $title = $productItem.find(".product-item__title");
+  const title = $title.text().trim();
   // highlight-next-line
-  const url = new URL(title.attr("href"), baseURL).href;
+  const url = new URL($title.attr("href"), baseURL).href;
 
   ...
 
-  return { url, title: titleText, ...priceRange };
+  return { url, title, ...priceRange };
 }
 ```
 
@@ -292,13 +286,13 @@ Now we'll pass the base URL to the function in the main body of our program:
 const listingURL = "https://warehouse-theme-metal.myshopify.com/collections/sales"
 const $ = await download(listingURL);
 
-const data = []
-$(".product-item").each((i, element) => {
-  const productItem = $(element);
+const $items = $(".product-item").map((i, element) => {
+  const $productItem = $(element);
   // highlight-next-line
-  const item = parseProduct(productItem, listingURL);
-  data.push(item);
+  const item = parseProduct($productItem, listingURL);
+  return item;
 });
+const data = $items.get();
 ```
 
 When we run the scraper now, we should see full URLs in our exports: