DEV Community: Bobate Olusegun

Decoding JavaScript: A Guide to Deobfuscation

Bobate Olusegun — Tue, 31 Dec 2024 15:22:20 +0000

One of the most fascinating things you get taught in your early journey in web development is how to replicate a website by simply copying the source code from the developer tools page. Many developers find this helpful, but this isn’t the case with the developers who built these websites and the website owners.

These website owners are usually frightened and anxious about the theft of their client-side (HTML, CSS, and JavaScript) code. This leaves them with only one option: to search for solutions to deter unauthorized copying or misuse of their source codes.

One solution that meets these website owners' needs is a technique called JavaScript Obfuscation. In simple terms, JavaScript obfuscation is the act of converting human-readable JavaScript code into a complex format that’s difficult for humans to understand.

As there are two sides to a coin, JavaScript obfuscation also has its counterpart called JavaScript deobfuscation. From its name, you can already tell that it’s an act of doing the opposite of JavaScript obfuscation, thereby converting an already obfuscated JavaScript code into a human-readable format.

Note: In most cases, JavaScript deobfuscation doesn’t take an obfuscated code to its original form, though you sometimes get the original form. It’s safe to say that JavaScript deobfuscation isn’t promising you the original JavaScript code but a code you can read and understand.

Practical Explanation of JavaScript Deobfuscation and Obfuscation

We learn better by practicing, so let’s explore the practical side of all the theoretical explanations in the introductory part of this guide.

To test these techniques, you need a JavaScript code. With that said, let’s create a simple JavaScript code that defines a variable and outputs a string based on the number of times a for loop runs.

const no_loop_cycle = 5

for (let i = 0; i < no_loop_cycle; i++) {
    console.log("String ", i)
}

Now that you have JavaScript code for testing go to JavaScript Obfuscator Tool, a free tool for obfuscating JavaScript code.

Paste the sample JavaScript code into the tool and click the Obfuscate button.

Here’s what you’ll get as the output:

function _0xb78f(_0x2224cc,_0x217706){const _0x44095f=_0x4409();return _0xb78f=function(_0xb78f5c,_0x2ff516){_0xb78f5c=_0xb78f5c-0xd3;let _0x60ee28=_0x44095f[_0xb78f5c];return _0x60ee28;},_0xb78f(_0x2224cc,_0x217706);}const _0x5f75f2=_0xb78f;(function(_0x2c5162,_0x14873c){const _0x4e4ef7=_0xb78f,_0x5a8a62=_0x2c5162();while(!![]){try{const _0x1b7f08=parseInt(_0x4e4ef7(0xdb))/0x1*(-parseInt(_0x4e4ef7(0xdc))/0x2)+parseInt(_0x4e4ef7(0xdd))/0x3+-parseInt(_0x4e4ef7(0xd9))/0x4*(parseInt(_0x4e4ef7(0xd4))/0x5)+-parseInt(_0x4e4ef7(0xde))/0x6+parseInt(_0x4e4ef7(0xd6))/0x7*(-parseInt(_0x4e4ef7(0xd3))/0x8)+parseInt(_0x4e4ef7(0xd5))/0x9+parseInt(_0x4e4ef7(0xd7))/0xa;if(_0x1b7f08===_0x14873c)break;else _0x5a8a62['push'](_0x5a8a62['shift']());}catch(_0x153236){_0x5a8a62['push'](_0x5a8a62['shift']());}}}(_0x4409,0x71eba));const no_loop_cycle=0x5;for(let i=0x0;i<no_loop_cycle;i++){console[_0x5f75f2(0xda)](_0x5f75f2(0xd8),i);}function _0x4409(){const _0x5189f4=['2031897OhIMeN','15423690UOVACr','String\x20','1326068tySTtA','log','1CErZVM','245842QiNqEk','1819539wUQmJB','4133556arqvkn','16ZAFmnL','10OzrKck','3358431pZHaXs'];_0x4409=function(){return _0x5189f4;};return _0x4409();}

Paste this obfuscated code into your code editor and run it to validate its accuracy. You’ll see that it gives the same output as the original code.

Now that you’ve seen the JavaScript obfuscation in action, it’ll be equally pleasing to try out JavaScript deobfuscation. Copy the obfuscated code above and paste it into this free deobfuscated tool.

Using that deobfuscator tool will give you the following code:

for (let i = 0x0; i < 0x5; i++) {
  console.log("String ", i);
}

The code returned after deobfuscating is similar to the original JavaScript code but with just a little difference. This confirms that you usually don’t get the actual JavaScript code but one in a readable format you can understand.

Why is JavaScript Deobfuscation Important?

Most websites rely heavily on embedding their techniques to deter unauthorized users, mainly within the JavaScript code since it’s responsible for fundamental user interactions (most things that require you to interact with the websites are implemented using JavaScript).

The techniques are mostly JavaScript obfuscations, which is where JavaScript deobfuscation comes into play. It helps tackle such occurrences, especially when web scraping.

JavaScript deobfuscation helps make the code more readable, enabling you to better understand the script, simulate your interactions, and properly scrape the expected data.

JavaScript obfuscation even poses more anti-scraping mechanisms, such as anti-bot securities, Cloudflare waiting rooms, and a series of CAPTCHA puzzles. Despite these challenges, JavaScript deobfuscation still comes through as it helps bypass and reverse-engineer these challenges.

How JavaScript Deobfuscation Works

JavaScript deobfuscation takes the following processes:

Identifying JavaScript obfuscation: To identify that, you’ll need to recognize some patterns like variable renaming, control flow minification, hexadecimal values, encoded strings, and so on. As you keep studying it, you’ll discover more patterns.
Accessing the obfuscated code: Now that you have spotted the obfuscated code, the next process is to access the code using Chrome’s developer tools for better analysis. You can also save the file after you have located it.
Format the code: Tools like Prettier or the JavaScript beautifier can format obfuscated code.
Execute the code to validate if it’s error-free.
Finally, the functional logic (code for hidden contents generation or token validation) is extracted.

Solutions for JavaScript Deobfuscation

The perfect solution for JavaScript deobfuscation is a combination of your problem-solving skills, your ability to recognize patterns in an obfuscated code, and the use of technical tools.

If you have the necessary tools for formatting your code, Chrome DevTools for accessing and analyzing obfuscated code, external third-party libraries like uglify-js for parsing and minifying the code and debugging tools, you can see through any JavaScript obfuscation instance.

To fast-track things, you can use any JavaScript deobfuscator tool or the one used in this guide.

How to Scrape Data from a Page with Infinite Scroll

Bobate Olusegun — Wed, 11 Dec 2024 19:46:48 +0000

Have you ever encountered a web page requiring actions like “clicking a button” to reveal more content? Such pages are called "dynamic webpages," as they load more content based on user interaction. In contrast, static webpages display all their content at once without requiring user actions.

Scraping content from dynamic pages can be daunting as it requires simulating user interactions, such as clicking a button to access additional hidden content. In this tutorial, you'll learn how to scrape data from a webpage with infinite scrolling via a "Load more" button.

Prerequisites

To follow along with this tutorial, you need:

Node.js: Install the version tagged "LTS" (Long Time Support), which is more stable than the latest version.
Npm: This is a package manager used to install packages. The good news is that “npm” is automatically installed with Node.js, which makes things much faster.
Cheerio: For parsing HTML
Puppeteer: You’ll use this to control a headless browser.
An IDE for building the Scraper: You can get any code editor, like Visual Studio Code.

In addition, you’ll need to have a basic understanding of HTML, CSS, and JavaScript. You’ll also need a web browser like Chrome.

Initialize the Project

Create a new folder, then open it in your code editor. Spot the “terminal” tab in your code editor and open a new terminal. Here’s how you can spot it using Visual Studio Code.

Next, run the following command in the terminal to install the needed packages for this build.

$ npm install cheerio puppeteer

Create a new file inside your project folder in the code editor and name it dynamicScraper.js.

Excellent work, buddy!

Accessing the Content of the Page

Puppeteer is a powerful Node.js library that allows you to control headless Chrome browsers, making it ideal for interacting with webpages. With Puppeteer, you can target a webpage using the URL, access the contents, and easily extract data from that page.

In this section, you’ll learn how to open a page using a headless browser, access the content, and retrieve the HTML content of that page. You can find the target website for this tutorial here.

Note: You’re to write all the code inside of the dynamicScraper.js.

Start by importing Puppeteer using the require() Node.js built-in function, which helps you load up modules: core modules, third-party libraries (like Puppeteer), or custom modules (like your local JS files).

const puppeteer = require('puppeteer');

Next, define a variable for storing your target URL. Doing this isn’t mandatory, but it makes your code cleaner, as you just have to reference this global variable from anywhere in your code.

const url = 'https://www.scrapingcourse.com/button-click';

The next step is to create the function that’ll launch the headless browser and retrieve the HTML contents of the target page. You should opt for the Immediately Invoked Function Expression (IIFE) method to make things much faster.

Define an asynchronous IIFE with a try-and-catch block:

(async () => {
    try {
        // Code goes here
    } catch (error) {
        console.error('Error:', error.message);
    }
})();

Note: You should write every other code for this tutorial segment inside the try block.

Right inside the IIFE, create a new instance of Puppeteer and open a new page for the interaction.

Launch a new instance of the puppeteer library using the launch method and pass the headless mode to it. The headless mode can be either set to true or false. Setting the headless mode to true makes the headless browser not visible when the puppeteer is launched, but setting it to false makes the browser visible.

After you’ve launched Puppeteer, you also want to call the newPage method, which triggers the opening of a new tab in the headless browser.

// Launch Puppeteer
const browser = await puppeteer.launch({ headless: false }); // Headless mode
const page = await browser.newPage(); // Open a new page

Now, query the newPage method to target the expected URL and open that website in this new tab using the page.goto method. Beyond that, you want to ensure that Puppeteer only considers the page ready for interaction and extraction of data if and only if the page has loaded all of its essential resources (like images and JS).

To ensure the page is ready, Puppeteer provides an option called waitUntil, which can take in various values that define different conditions for loading the page:

load: This waits for the load event to fire, which occurs after the HTML document and its resources (e.g., images, CSS, JS) have been loaded. However, this may not account for additional JavaScript-rendered content that loads after the load event.
domcontentloaded: This waits for the DOMContentLoaded event, which is triggered once the initial HTML is parsed. But this loads before external resources (like images or additional JS) load.
networkidle2: This waits until there are no more than two active network requests (ongoing HTTP requests (e.g., loading images, scripts, or other resources)) for 500 milliseconds. This value is preferred when dealing with pages that make small, continuous requests but don't affect the main content.

// Navigate to the target URL
await page.goto(url, {
    waitUntil: 'networkidle2', // Ensure the page is fully loaded
});

Finally, you just need to retrieve all the HTML content of the current page using the page.content(). Most importantly, you should close the browser instance to avoid unnecessary usage of memory, which can slow your system down. Use browser.close() at the end of your script to close the browser.

// Get the full HTML content of the page
const html = await page.content();

// Log the entire HTML content
console.log(html);

// Close the browser
await browser.close();

With the present code you have, the browser will load up and close very fast, and you might not even be able to view the page well. In this case, you can delay the browser for a few seconds using the page.waitForTimeout method. This method should come just before the browser.close method.

// Delay for 10 seconds to allow you to see the browser
await page.waitForTimeout(10000);

Here’s the entire code for this section:

const puppeteer = require('puppeteer');

const url = 'https://www.scrapingcourse.com/button-click';

(async () => {
    try {
        // Launch Puppeteer
        const browser = await puppeteer.launch({ headless: false }); // Headless mode
        const page = await browser.newPage(); // Open a new page

        // Navigate to the target URL
        await page.goto(url, {
            waitUntil: 'networkidle2', // Ensure the page is fully loaded
        });

        // Get the entire HTML content of the page
        const html = await page.content();

        // Log the entire HTML content
        console.log(html);

        // Delay for 10 seconds to allow you to see the browser
        await page.waitForTimeout(10000);

        // Close the browser
        await browser.close();
    } catch (error) {
        console.error('Error fetching the page:', error.message);
    }
})();

Save your file and run the script inside of your terminal using the command below:

$ node dynamicScraper.js

The script will open up a headless browser like the one below:

The browser loads up, Puppeteer fetches its entire HTML content, and Console logs the content to the terminal.

Here’s the output you should get in your terminal:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Load More Button Challenge - ScrapingCourse.com</title>
</head>
<body>
    <header>
        <!-- Navigation Bar -->
        <nav>
            <a href="/">
                <img src="logo.svg" alt="Logo">
                <span>Scraping Course</span>
            </a>
        </nav>
    </header>

    <main>
        <!-- Product Grid -->
        <div id="product-grid">
            <div class="product-item">
                <a href="/ecommerce/product/chaz-kangeroo-hoodie">
                    <img src="mh01-gray_main.jpg" alt="Chaz Kangeroo Hoodie">
                    <span class="product-name">Chaz Kangeroo Hoodie</span>
                    <span class="product-price">$52</span>
                </a>
            </div>
            <div class="product-item">
                <a href="/ecommerce/product/teton-pullover-hoodie">
                    <img src="mh02-black_main.jpg" alt="Teton Pullover Hoodie">
                    <span class="product-name">Teton Pullover Hoodie</span>
                    <span class="product-price">$70</span>
                </a>
            </div>
            <!-- Additional products (3-12) follow the same structure -->
        </div>

        <!-- Load More Button -->
        <div id="load-more-container">
            <button id="load-more-btn">Load more</button>
        </div>
    </main>
</body>
</html>

Note that the code structure above is what your output should look like.

Wow! You should be proud of yourself for getting this far. You’ve just completed your first attempt at scraping the contents of a webpage.

Simulate the Load More Products Process

Here, you want to access more products, and to do that, you need to click on the “Load more” button multiple times until you’ve either exhausted the list of all products or gotten the desired number of products you want to access.

To access this button and click on it, you must first locate the element using any CSS selectors (the class, id, attribute of the element, or tag name).

This tutorial aims to get at least 48 products from the target website, and to do that, you’ll have to click on the “Load more” button at least three times.

Start by locating the “Load more” button using any of the CSS selectors on it. Go to the target website, find the “Load more” button, right-click, and select the inspect option.

Selecting the inspect option will open up developer tools just like the page below:

The screenshot above shows that the “Load more” button element has an id attribute with the value "load-more-btn". You can use this id selector to locate the button during the simulation and click on it multiple times.

Back to the code, still inside the try block, after the line of code that logs out the previous HTML content for the default 12 products on the page.

Define the number of times you want to click the button. Recall that each click loads an additional 12 products. For 48 products, three clicks are required to load the remaining 36.

// Number of times to click "Load More"
const clicks = 3;

Next, you want to loop to simulate the clicks. The simulation will use a for loop that runs i number of times, where i will be the clicks variable.

for (let i = 0; i < clicks; i++) {
    try {

    } catch (error) {
        console.log('No more "Load More" button or an error occurred:', error.message);
        break; // Exit the loop if no button is found or an error occurs
    }
}

Note: Your remaining code for this section should be written inside the try block in the for loop.

To help with debugging and tracking the output, log out the current click attempt.

console.log(`Clicking the 'Load More' button - Attempt ${i + 1}`);

Next, you want to be able to locate the “Load more” button and click it at least three times. But before simulating the click, you should ensure the “Load more” button is available.

Puppeteer provides the waitForSelector() method to check the visibility of an element before using it.

For the “Load more” button, you’ll have to first locate it using the value of the id selector on it and then check for the visibility status like this:

// Wait for the "Load More" button to be visible and click it
await page.waitForSelector('#load-more-btn', { visible: true });

Now that you know the “Load more” button is available, you can click it using the Puppeteer click() method.

// Click the Load more button once it is available
await page.click('#load-more-btn');

Once you simulate a click on the “Load more” button, you should wait for the content to load up before simulating another click since the data might depend on a server request. You must introduce a delay between the requests using the setTimeout().

The code below notifies the script to wait at least two seconds before simulating another click on the “Load more” button.

// Wait 2 seconds for the new content to load using setTimeout
await new Promise(resolve => setTimeout(resolve, 2000));

To wrap things up for this section, you want to fetch the current HTML content after each click using the content() method and then log out the output to the terminal.

// Get and log the updated full HTML after each click
html = await page.content();
console.log(`Full HTML after ${12 * (i + 2)} products loaded:`);
console.log(html);

Your complete code up until now:

const puppeteer = require('puppeteer');

(async () => {
    try {
        const browser = await puppeteer.launch({ headless: false }); // Launch the browser
        const page = await browser.newPage(); // Open a new page

        // Navigate to the target website
        await page.goto('https://www.scrapingcourse.com/button-click', {
            waitUntil: 'networkidle2', // Wait until the network is idle
        });

        console.log("Initial page loaded with 12 products");
        // Get full HTML of the initial page
        let html = await page.content();

        // Log the full HTML (first 12 products)
        console.log(html); 

        // Number of times to click "Load More"
        const clicks = 3; 
        for (let i = 0; i < clicks; i++) {
            try {
                console.log(`Clicking the 'Load More' button - Attempt ${i + 1}`);

                // Wait for the "Load More" button to be visible and click it
                await page.waitForSelector('#load-more-btn', { visible: true });
                await page.click('#load-more-btn');

                // Wait 2 seconds for the new content to load using setTimeout
                await new Promise(resolve => setTimeout(resolve, 2000)); 

                // Get and log the updated full HTML after each click
                html = await page.content();
                console.log(`Full HTML after ${12 * (i + 2)} products loaded:`);
                console.log(html);
            } catch (error) {
                console.log('No more "Load More" button or an error occurred:', error.message);
                break; // Exit the loop if no button is found or an error occurs
            }
        }

        // Delay for 10 seconds to allow you to see the browser
        await new Promise(resolve => setTimeout(resolve, 10000)); 

        await browser.close(); // Close the browser
    } catch (error) {
        console.error('Error fetching the page:', error.message);
    }
})();

Here’s the output of simulating the button click three times to get 48 products:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Load More Button Challenge</title>
</head>
<body>
    <header>
        <nav>
            <!-- Navigation and Logo Section -->
        </nav>
    </header>

    <main>
        <h1>Load More Products</h1>

        <!-- Products Section -->
        <div id="product-grid">
            <!-- Product 1 -->
            <div class="product-item">
                <a href="https://scrapingcourse.com/ecommerce/product/chaz-kangeroo-hoodie">
                    <img src="https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh01-gray_main.jpg" alt="Chaz Kangeroo Hoodie">
                    <div>
                        <span>Chaz Kangeroo Hoodie</span>
                        <span>$52</span>
                    </div>
                </a>
            </div>

            <!-- Product 2 -->
            <div class="product-item">
                <a href="https://scrapingcourse.com/ecommerce/product/teton-pullover-hoodie">
                    <img src="https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh02-black_main.jpg" alt="Teton Pullover Hoodie">
                    <div>
                        <span>Teton Pullover Hoodie</span>
                        <span>$70</span>
                    </div>
                </a>
            </div>

            <!-- Product 3 -->
            <div class="product-item">
                <a href="https://scrapingcourse.com/ecommerce/product/bruno-compete-hoodie">
                    <img src="https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh03-black_main.jpg" alt="Bruno Compete Hoodie">
                    <div>
                        <span>Bruno Compete Hoodie</span>
                        <span>$63</span>
                    </div>
                </a>
            </div>

            <!-- ... -->
            <!-- Additional products follow the same structure -->
            <!-- Total of 48 products loaded -->
        </div>

        <!-- Load More Button -->
        <div id="load-more-container">
            <button id="load-more-btn">Load More</button>
        </div>
    </main>

    <!-- Bootstrap and jQuery libraries -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Parse Product Information

It’s essential that you parse the current output (the entire HTML of the 48 products) to make it readable and well-structured. To make the current output meaningful, you’ll need to extract specific information for each product, such as its name, price, image URL, and link.

You need to visit the target website, load more products, and check through them to see the structure of each product and know which class selectors to use to get the information needed.

The code snippet below is what a product structure looks like:

<div class="product-item flex flex-col items-center rounded-lg">
    <a href="https://scrapingcourse.com/ecommerce/product/bruno-compete-hoodie">
        <img class="product-image rounded-lg" width="200" height="240" decoding="async" fetchpriority="high" src="https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh03-black_main.jpg" alt="Bruno Compete Hoodie">
        <div class="product-info self-start text-left w-full">
            <span class="product-name">Bruno Compete Hoodie</span>
            <br>
            <span class="product-price text-slate-600">$63</span>
        </div>
    </a>
</div>

While inspecting each product, you should notice they all have a common class: product-item. You’ll use this class to get each product in the list of products.

These are the CSS selector values of the product elements you need to parse: product name (.product-name), price (.product-price), image (.product-image), and link (<a> tag).

To get started, import the Cheerio library, which will be used to parse the HTML content.

const cheerio = require('cheerio');

Now, you should only be concerned about interacting with just the output of all 48 products. To do this, you need to clean up the previous code in the last section.

You’ll also need to bring down the html variable after the for loop block so you just get only one output with all 48 products.

Your clean-up code should be identical to this code snippet:

const puppeteer = require('puppeteer');
const cheerio = require('cheerio');

(async () => {
    try {
        const browser = await puppeteer.launch({ headless: false }); // Launch the browser
        const page = await browser.newPage(); // Open a new page

        // Navigate to the target website
        await page.goto('https://www.scrapingcourse.com/button-click', {
            waitUntil: 'networkidle2', // Wait until the network is idle
        });

        // Number of times to click "Load More"
        const clicks = 3; 
        for (let i = 0; i < clicks; i++) {
            try {
                // Wait for the "Load More" button to be visible and click it
                await page.waitForSelector('#load-more-btn', { visible: true });
                await page.click('#load-more-btn');

                // Wait 2 seconds for the new content to load using setTimeout
                await new Promise(resolve => setTimeout(resolve, 2000)); 
            } catch (error) {
                console.log('No more "Load More" button or an error occurred:', error.message);
                break; // Exit the loop if no button is found or an error occurs
            }
        }

        // Get the final HTML content
        const html = await page.content();

        await browser.close(); // Close the browser
    } catch (error) {
        console.error('Error fetching the page:', error.message);
    }
})();

Now, let’s get into the HTML parsing using Cheerio.

First of all, Cheerio needs to have access to the HTML content it wants to parse, and for that, it provides a load() method that takes in that HTML content, making it accessible using jQuery-like syntax.

Create an instance of the Cheerio library with the HTML content:

// Load HTML into Cheerio
const $ = cheerio.load(html);

You can now use $ to query and manipulate elements in the loaded HTML.

Next, initialize an array to store the product information. This array will hold the extracted data, and each product will be stored as an object with its name, price, image, and link.

// Array to store product information
const products = [ ];

Recall that each product has a class .product-item. You’ll use this with the variable instance of Cheerio ($) to get each product and then perform some manipulations.

The .each() method is used to iterate through each matched element with the .product-item class selector.

$('.product-item').each((_, element) => {

});

Let’s retrieve the product detail from each product using the class selector of that particular detail. For instance, to get the product name, you’ll need to find the child element in each product with the class selector .product-item. Retrieve the text content of that child element and trim it in case of any whitespaces.

$('.product-item').each((_, product) => {
    const name = $(product).find('.product-name').text().trim();
})

$(element).find('.product-name'): Searches within the current .product-item for the child element with the class .product-name.
.text(): Retrieves the text content inside the element.
.trim(): Removes unnecessary whitespace from the text.

Leveraging this concept, let’s get the price, image URL, and link using their class attribute.

$('.product-item').each((_, product) => {
    const name = $(product).find('.product-name').text().trim();
    const price = $(product).find('.product-price').text().trim();
    const image = $(product).find('.product-image').attr('src');
    const link = $(product).find('a').attr('href');
})

Now that you've all the expected information, the next thing is to push each parsed product information as an individual object to the products array.

$('.product-item').each((_, product) => {
    const name = $(product).find('.product-name').text().trim();
    const price = $(product).find('.product-price').text().trim();
    const image = $(product).find('.product-image').attr('src');
    const link = $(product).find('a').attr('href');

    products.push({
        name,
        price,
        image,
        link,
    });
});

Finally, log out the products array to get the expected output in the terminal.

console.log(`Total products parsed: ${products.length}`);
console.log(products);

Your entire code should look like this code snippet:

const puppeteer = require('puppeteer');
const cheerio = require('cheerio');

(async () => {
    try {
        const browser = await puppeteer.launch({ headless: false }); // Launch the browser
        const page = await browser.newPage(); // Open a new page

        // Navigate to the target website
        await page.goto('https://www.scrapingcourse.com/button-click', {
            waitUntil: 'networkidle2', // Wait until the network is idle
        });

        // Number of times to click "Load More"
        const clicks = 3; 
        for (let i = 0; i < clicks; i++) {
            try {
                // Wait for the "Load More" button to be visible and click it
                await page.waitForSelector('#load-more-btn', { visible: true });
                await page.click('#load-more-btn');

                // Wait 2 seconds for the new content to load using setTimeout
                await new Promise(resolve => setTimeout(resolve, 2000)); 
            } catch (error) {
                console.log('No more "Load More" button or an error occurred:', error.message);
                break; // Exit the loop if no button is found or an error occurs
            }
        }

        // Get the final HTML content
        const html = await page.content();

        // Load HTML into Cheerio
        const $ = cheerio.load(html); 
        // Array to store product information
        const products = []; 

        $('.product-item').each((_, product) => {
            const name = $(product).find('.product-name').text().trim();
            const price = $(product).find('.product-price').text().trim();
            const image = $(product).find('.product-image').attr('src');
            const link = $(product).find('a').attr('href');

            products.push({
                name,
                price,
                image,
                link,
            });
        });

        console.log(`Total products parsed: ${products.length}`);
        console.log(products); // Output all parsed product information

        await browser.close(); // Close the browser
    } catch (error) {
        console.error('Error fetching the page:', error.message);
    }
})();

Here’s what your output should look like when you save and run the script:

Total products parsed: 48
[
  {
    name: 'Chaz Kangeroo Hoodie',
    price: '$52',
    image: 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh01-gray_main.jpg',
    link: 'https://scrapingcourse.com/ecommerce/product/chaz-kangeroo-hoodie'
  },
  {
    name: 'Teton Pullover Hoodie',
    price: '$70',
    image: 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh02-black_main.jpg',
    link: 'https://scrapingcourse.com/ecommerce/product/teton-pullover-hoodie'
  },
  {
    name: 'Bruno Compete Hoodie',
    price: '$63',
    image: 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh03-black_main.jpg',
    link: 'https://scrapingcourse.com/ecommerce/product/bruno-compete-hoodie'
  },
  {
    name: 'Frankie  Sweatshirt',
    price: '$60',
    image: 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh04-green_main.jpg',
    link: 'https://scrapingcourse.com/ecommerce/product/frankie--sweatshirt'
  },

  // Every other product goes here, reduced to make things brief and concise
  {
    name: 'Zoltan Gym Tee',
    price: '$29',
    image: 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/ms06-blue_main.jpg',
    link: 'https://scrapingcourse.com/ecommerce/product/zoltan-gym-tee'
  }
]

Export Product Information to CSV

The next step is to export the parsed product information, which is presently in a JavaScript Object Notation (Json) format, into a Comma-Separated Values (CSV) format. We’ll use the json2csv library to convert the parsed data into its corresponding CSV format.

Start by importing the required modules.

Node.js provides the file system (fs) module for file handling, such as writing data to a file. After importing the fs module, you should destructure the parse() method from the json2csv library.

const fs = require('fs');
const { parse } = require('json2csv');

CSV files usually require column headers; carefully write this in the same order as your parsed information. Here, the parsed data is the products array, where each element is an object with four keys (name, price, image, and link). You should use these object keys to name your column headers for proper mapping.

Define the fields (Column headers) for your CSV file:

// Define CSV fields
const fields = ['name', 'price', 'image', 'link'];

Now that you’ve defined your fields, the following line of action is to convert the current parsed information to a CSV format. The parse() method works in this format: parse(WHAT_YOU_WANT_TO_CONVERT, { YOUR_COLUMN_HEADERS }).

// Convert JSON to CSV
const csv = parse(products, { fields });

You now have to save this CSV information into a new file with the .csv file extension. When using Node.js, you can handle file creation using the writeFileSync() method on the fs module. This method takes two parameters: the file name and the data.

// Save CSV to a file 
fs.writeFileSync('products.csv', csv);

Your complete code for this section should look like this:

const puppeteer = require('puppeteer');
const cheerio = require('cheerio');
const fs = require('fs');
const { parse } = require('json2csv');

(async () => {
    const browser = await puppeteer.launch({ headless: false }); // Launch Puppeteer
    const page = await browser.newPage(); // Open a new page

    // Navigate to the website
    await page.goto('https://www.scrapingcourse.com/button-click', {
        waitUntil: 'networkidle2',
    });

    // Click "Load More" 3 times to load all products
    for (let i = 0; i < 3; i++) {
        try {
            await page.waitForSelector('#load-more-btn', { visible: true });
            await page.click('#load-more-btn');
            await new Promise(resolve => setTimeout(resolve, 2000)); // Wait for 2 seconds
        } catch (error) {
            console.log('No more "Load More" button or an error occurred:', error.message);
            break;
        }
    }

    // Get the final HTML content
    const html = await page.content();

    // Use Cheerio to parse the product data
    const $ = cheerio.load(html);
    const products = [];

    $('.product-item').each((_, element) => {
        const name = $(element).find('.product-name').text().trim();
        const price = $(element).find('.product-price').text().trim();
        const image = $(element).find('.product-image').attr('src');
        const link = $(element).find('a').attr('href');

        products.push({
            name,
            price,
            image,
            link,
        });
    });

    console.log(`Total products parsed: ${products.length}`);

    // Convert product information to CSV
    try {
        // Define CSV fields
        const fields = ['name', 'price', 'image', 'link']; 
        // Convert JSON to CSV
        const csv = parse(products, { fields });

        // Save CSV to a file 
        fs.writeFileSync('products.csv', csv); 
        console.log('Product information exported to products.csv');
    } catch (error) {
        console.error('Error exporting to CSV:', error.message);
    }

    await browser.close(); // Close the browser
})();

You should see an automatic addition of a file named products.csv to your file structure once you save and run the script.

The output - products.csv:

Conclusion

This tutorial delved into the intricacies of scraping data from a page that requires simulation to access its hidden contents. You learned how to perform web scraping on dynamic pages using Node.js and some additional libraries, parse your scraped data into a more organized format, and unpack it into a CSV file.

Common JavaScript Mistakes Developers Make

Bobate Olusegun — Wed, 14 Aug 2024 08:53:45 +0000

Have you ever been in a situation where you are creating a functional web application using JavaScript, and suddenly, your perfect build becomes a nightmare embedded amid thick red lines (errors)? Frustration sets in, and you get worried, questioning your skills and asking yourself, “What went wrong?”

Funnily, in most scenarios, the cause of the break in the code and errors isn’t some complex bugs but rather a common mistake hidden in the fundamentals of your code. This guide will be the compass that navigates your coding journey in such situations.

In this article, you’ll learn how to navigate these common mistakes. This guide will provide engaging explanations and practical solutions where you see the mistakes and how to fix them.

Without further ado, let’s jump right in.

Misusing the `let`, `var`, & `const` - Variables Scope

In JavaScript, you can declare variables using keywords like let, var, or const. While it's common for developers to perceive var and let as interchangeable due to their shared mutability feature—allowing variables declared with them to be changed or mutated—there's a crucial distinction regarding their scope. It's essential to recognize that these keywords differ significantly in how they define the scope of a variable.

How does `var` differ from `let` and `const`?

JavaScript divides scope into global, function, and block scopes. In this segment, you only need to focus on two types of scopes: function and block.

Function scope: Variables declared within a function are accessible only within that function and not outside. This technique encapsulates and prevents accidental modification from other parts of your code.

Block scope: Introduced in ES6 (ECMAScript 2015), block scope allows you to declare variables with the let and const keywords within specific code blocks defined by curly braces, such as if statements, loops, and arrow functions. This provides even more precise control over variable accessibility and helps prevent unwanted side effects.

Considering the definition of block scope, you may have noticed the absence of the var keyword. Was this an oversight? Not at all! Variables defined using the var keyword are function-scoped, whereas those declared with let or const are block-scoped. The following code snippets will elucidate these concepts further.

Let's start by translating the definition of function scope into code:

function testVar() {
  var test = "new variable";
}
console.log(test);
// This will return an error: Uncaught ReferenceError: test is not defined.

The code above confirms that variables declared with the var keyword are function-scoped. When you attempt to access the test variable using the console.log() statement outside of the function where it was defined, you get an error - "Uncaught ReferenceError: test is not defined."

In this scenario, the variable is scoped locally to the function where it was defined and subsequently destroyed. Hence, outside the function, the console.log() statement causes an error because the variable gets removed from the memory stack when it is destroyed.

However, unlike the previous attempt, accessing the test variable using the console.log() statement within the defining function retrieves the variable's value without encountering a reference error.

function testVar() {
  var test = "new variable";
  console.log(test); // This returns - new variable
}

testVar();

The code below will help you learn how these variables work with respect to their scope type.

function variableScopes() {
  // testing var scope
  var varTest = 1;
  if (true) {
    var varTest = 2;
    console.log("Inside this if block, var yields this:", varTest);
  }
  console.log("Outside the if block, var yields this:", varTest);

  // testing let scope
  let letTest = 1;
  if (true) {
    let letTest = 2;
    console.log("Inside this if block, let yields this:", letTest);
  }
  console.log("Outside the if block, let yields this:", letTest);

  // testing const scope
  const constTest = 1;
  if (true) {
    const constTest = 2;
    console.log("Inside this if block, const yields this:", constTest);
  }
  console.log("Outside the if block, const yields this:", constTest);
}

variableScopes();
// The code result:
// Inside this if block, var yields this: 2
// Outside the if block, var yields this: 2
// Inside this if block, let yields this: 2
// Outside the if block, let yields this: 1
// Inside this if block, const yields this: 2
// Outside the if block, const yields this: 1

Deductions from the code above:

var: Thevar keyword is function-scoped, meaning variables declared with var are accessible throughout the entire function. The provided code declares the variable varTest twice inside and outside the if statement. However, due to the function scope of var, the variable is essentially re-declared within the same scope, leading to unexpected behaviour. As a result, when the value of varTest is modified inside the if block, it affects the variable declared outside the block, leading to both console.log statements displaying the value 2.
let: Unlike var, the let keyword is block-scoped, meaning variables declared with let are only accessible within the defined block. In the code, the variable letTest is declared inside and outside the if statement using the let keyword. As expected with block scope, modifying the value of letTest inside the if block only affects the variable within that block. Therefore, the first console.log inside the if block displays a value of 2, while the one outside the block retains the initial value of 1.
const: Similar to the let keyword, variables declared with const are also block-scoped. The code declares the variable constTest as a constant inside and outside the if statement. Despite being constants, the block scope allows re-declaration within different blocks. However, reassigning a value to a constant is not allowed. Thus, modifying the value of constTest inside the if block affects only the variable within that block, while the value outside the block remains unchanged.

Misunderstanding Loose and Strict Equality

Mastering the use of equality operators is crucial for JavaScript developers. Unlike other languages that rely on a single type, JavaScript offers two: the strict equality operator and the loose equality operator. Understanding the nuances between these operators is essential for writing robust and error-free JavaScript code.

Loose Equality

The loose equality performs type coercion before comparison. This operator tends to convert the operands to the same type before evaluating the equality. While this may seem convenient, it often leads to unexpected results, especially when comparing different data types.

The loose equality operator in JavaScript follows several basic rules to determine when to perform type coercion:

If the operands have the same type, In this case, where both have the same type, no coercion is necessary, and the equality comparison gets done.
If one operand is null and the other is undefined, JavaScript treats null and undefined as equal when using loose equality. Also, null and undefined values can't undergo type coercion, so they are equal.
If one operand is a number and the other is a string, JavaScript will attempt to convert the string operand to a number before comparing the values.
If one operand is a boolean, If one operand is a boolean, JavaScript will attempt to convert that operand to the numeric value. The numeric values: the value of false is converted to 0, whereas the value of true is converted to 1.
If one operand is an object and the other is not, JavaScript will attempt to convert the object operand to a primitive value (using the valueOf and toString methods) before comparing.
If both operands are objects, JavaScript compares their references to determine whether they are the same object. Note that the references are compared, not their values. Two objects are only equal if they reference the same object in memory.
If either operand is NaN, the loose equality operator returns false. Note that even if both operands are NaN, you still get false because, by default, NaN is not equal to NaN.

Strict Equality

Strict equality compares both values and types strictly without performing any type coercion. It demands that both operands have the same value and data type for equality to be true. This approach offers clarity and predictability, eliminating the pitfalls of implicit type conversion.

It's of utmost importance to be aware of the potential issues and unexpected outcomes that can arise when using loose equality. To steer clear of these, it is strongly recommended that you always use strict equality when comparing operands. This practice will help you maintain data type integrity throughout your codebase, ensuring a more robust and reliable application.

Here is a code snippet for testing different scenarios with their respective results:

// These snippets showcase how JavaScript's loose and
//strict equality operators behave in various scenarios.

// Testing loose equality
const num1 = 5;
const num2 = "5";

console.log(num1 == num2);

// Testing strict equality:
const num3 = 5;
const num4 = "5";

console.log(num3 === num4); // false

// More examples of loose equality
const value1 = 0;
const value2 = false;

console.log(value1 == value2); // true

// More examples of strict equality:
const value3 = 0;
const value4 = false;

console.log(value3 === value4); // false

// Array comparison with loose equality:
const arr1 = [1, 2, 3];
const arr2 = "1,2,3";

console.log(arr1 == arr2); // true

// Array comparison with strict equality:
const arr3 = [1, 2, 3];
const arr4 = "1,2,3";

console.log(arr3 === arr4); // false

Unneccesary usage of the Else block

JavaScript developers are often fond of adding an else block immediately after an if block, even when the logic inside the else block is essentially the default behaviour or can be handled without the else block. This leads to unnecessary code complexity, which can be simplified by restructuring the code.

An else block is executed when the condition of the preceding if statement is evaluated as false. However, in situations where the else block contains code that can be executed without explicitly checking the condition, using the else block becomes redundant and can be avoided.

Code example:

const isEven = (num) => {
  if (num % 2 === 0) {
    return true;
  } else {
    return false;
  }
}
isEven(4); // true
isEven(3); // false

In this code, the function isEven takes a number as input and checks if it's even. If the number is divisible by two without a remainder, it returns true, indicating that the number is even. Otherwise, it returns false, indicating that the number is odd. However, using the else block is unnecessary because if the condition in the if statement is not met (i.e., the number is not even), the function will naturally reach the next line after the if block without needing an else statement.

Now, without the else statement:

const isEven = (num) => {
  if (num % 2 === 0) {
    return true;
  }
  return false;
}
isEven(4); // true
isEven(3); // false

This code is a more concise version of the first code. It checks if the number is even using the if statement; if it is, it returns true. However, if the number is not even, it will return false. There's no need for an else block because the return false statement will only execute if the condition for the if statement is false.

You can even simplify it further by using an arrow function like this:

const isEven = (num) => {
  return num % 2 === 0;
}

This code further simplifies the logic by directly returning the result of the expression num % 2 === 0. If this expression is evaluated as true, the function returns true, indicating that the number is even. Otherwise, it returns false.

Misusing Mutable and Immutable Types

A developer must understand the difference between mutable and immutable types and how they work under the hood. This segment will take objects as the case study to deeply understand how mutable types work and the mistakes usually made when working with them.

Mutable types: In JavaScript, mutable types are those whose values can be changed after creation. Examples include objects and arrays.
Immutable types: Conversely, immutable types are types whose values cannot be changed after creation. Examples include strings, numbers, and boolean values.

Consider the code snippet below to understand how immutable types work in JavaScript:

let x = 2;
let y = x; // y becomes the copy of the value in variable x which is 2
x += 2;
y += 1;
console.log(x, y); //This will return 4, 3

In this code sample, we define a variable x with a value of 2. The variable x holds an immutable type, precisely a number. Once you define an immutable type, you can't change it directly.

The line "let y = x" creates a copy of the variable x value and assigns it to y. It's crucial to understand that y is independent of x; any operations performed on x will not affect y, and vice versa. This concept is fundamental to understanding immutable types.

Understanding Mutable Types and References

Mutable types, such as objects and arrays in JavaScript, behave differently from immutable types. When you assign one variable to another with mutable types, they point to the same underlying data in memory. This means that modifying one variable will directly affect the other, as they share a reference to the same data.

Let's consider a simple array code snippet to illustrate this concept:

let x = [];
let y = x;
x.push(1);
y.push(2);
console.log(x); // output [1, 2]
console.log(y); // output [1, 2]

In the code above, variables x and y are arrays initially empty. When we push elements into x and y, we observe that both arrays end up with the same elements - [1, 2]. Unlike immutable types, this behaviour is because mutable types store a reference to the object rather than the actual value.

Here's a breakdown of what happens in the code snippet:

Variable Assignment: When we assign y to x, y now references the same array that x points to. No copying of the array's content occurs; both variables reference the same array in memory.
Modifying the Arrays: When we push elements into either x or y, the modification directly affects the shared array in memory. Both x and y point to this array, so any changes made using either variable get reflected in the shared array.

Real-world Scenario: Misunderstanding Mutable vs Immutable Types

A common mistake occurs when developers mix mutable and immutable types, mainly when dealing with nested objects. Let’s consider the code snippet below:

const developer = {
  name: "John Doe",
  age: 25,
  core: {
    programmingLanguage: "JavaScript",
    framework: "React",
    role: "Frontend Developer",
  },
};

// creating a similar developer but with a different name and language
const developer2 = developer;
developer2.name = "Jane Doe";
developer2.core.programmingLanguage = "TypeScript";

console.log("developer", developer); // {name: 'Jane Doe', age: 25, core: {programmingLanguage: 'TypeScript', framework: 'React', role: 'Frontend Developer"}}
console.log("developer2", developer2); // {name: 'Jane Doe', age: 25, core: {programmingLanguage: 'TypeScript', framework: 'React', role: 'Frontend Developer"}}

When you run the code above, you will notice that developer2, which copies the property of the developer object, modified the developer object, automatically making the two objects identical. Now, I believe you understand why! It is because they are both pointing to the same reference in memory. The question is, "How can you have the two objects without them modifying each other?"

When dealing with objects in JavaScript, a common approach for creating a copy is to use the spread operator (...). However, it's important to note that this method, known as shallow copy, only addresses part of the cloning process.

Consider the use of the spread operator in creating a shallow copy:

const developer2 = { ...developer };

While this method prevents direct modifications to the global object developer, it falls short when dealing with nested objects. Changes to nested properties in the copied object developer2 can still impact the original object developer. For example:

developer2.core.programmingLanguage = "TypeScript";

This modification affects the programmingLanguage value in the nested core object of both developer and developer2.

The reason behind this behaviour lies in how the spread operator operates. It copies the object's properties, but when encountering nested objects, it copies their references rather than their values. As a result, changes to nested objects in the copied version get reflected in the original object due to shared references.

To overcome this limitation and ensure a complete separation between objects, developers turn to a concept known as deep cloning. Deep cloning involves creating a new object with independent values, including nested objects.

In JavaScript, a standard method for deep cloning is using JSON.parse() and JSON.stringify(). To see how this works, replace this line of code:

const developer2 = developer;

With this:

const developer2 = JSON.parse(JSON.stringify(developer));

This new line of code creates a deep clone of the developer object, ensuring that modifications to developer2 do not affect the developer. The JSON.stringify() method converts the object into a string (an immutable type), and then JSON.parse() converts it back into an object, effectively creating a new object with its separate memory reference. Note that there are other methods for performing deep cloning.

The code using deep cloning:

const developer = {
  name: "John Doe",
  age: 25,
  core: {
    programmingLanguage: "JavaScript",
    framework: "React",
    role: "Frontend Developer",
  },
};

// creating a similar developer but with a different name and language
const developer2 = JSON.parse(JSON.stringify(developer));
developer2.name = "Jane Doe";
developer2.core.programmingLanguage = "TypeScript";

console.log("developer", developer); // {name: 'John Doe', age: 25, core: {programmingLanguage: 'JavaScript', framework: 'React', role: 'Frontend Developer"}}
console.log("developer2", developer2); // {name: 'Jane Doe', age: 25, core: {programmingLanguage: 'TypeScript', framework: 'React', role: 'Frontend Developer"}}

Not Understanding the Context of 'this' Keyword: Arrow Functions vs Regular Functions

One common mistake JavaScript developers encounter is not fully grasping the behaviour of the this keyword within arrow functions compared to regular functions. This distinction is crucial as it affects how this is scoped and accessed within different function types.

Sample Code:

function createProgrammingLanguage(name, author) {
  return {
    name,
    author,

    useRegularFunction: function () {
      console.log(`${this.name} was created by ${this.author}`);
    },

    useArrowFunction: () => {
      console.log(`${this.name} was created by ${this.author}`);
    },
  };
}

const javascript = createProgrammingLanguage(
  "JavaScript",
  "Brendan Eich",
);
javascript.useArrowFunction();
javascript.useRegularFunction();

Run the code above in a code editor. If you use an online code editor like CodeSandbox, you will notice that the editor throws an error - "Cannot read properties of undefined (reading 'type')." It points out that the issue is from the useArrowFunction(), but if you are using an IDE like Visual Studio Code or Sublime Text then you would notice that calling the useArrowFunction() method results in this: "JavaScript was created by Brendan Eich" while calling the useRegularFunction() results in this: "undefined was created by undefined".

Explanation of the code Output

The error encountered when running the useArrowFunction method occurs because arrow functions do not have this context; they inherit it from the surrounding lexical scope where they are defined. In this case, since useArrowFunction is defined within createProgrammingLanguage, it refers to the global context (usually a window object in a browser environment) where name, and author are undefined.

On the other hand, useRegularFunction is a regular function defined inside an object literal. Regular functions have their own this context, which is determined by how they are called. In this context, this correctly refers to the object returned by createProgrammingLanguage(), allowing useRegularFunction() to access name and author properties without issues.

The right way to use `this` in an Arrow function

This solution demonstrates how to correctly use this within an arrow function by leveraging lexical scoping.

function createProgrammingLanguage(name, author) {
  return {
    name,
    author,

    overallFunction: function () {
      console.log(
        `Regular function: ${this.name} was created by ${this.author}`,
      );

      // Arrow function inherits this from the parent function
      const arrowFunction = () => {
        console.log(
          `Arrow function: ${this.name} was created by ${this.author}`,
        );
      };

      arrowFunction();
    },
  };
}

const javascript = createProgrammingLanguage("JavaScript", "Brendan Eich");

javascript.overallFunction();

// Result
// Regular function: JavaScript was created by Brendan Eich
// Arrow function: JavaScript was created by Brendan Eich

Code Explanation

Regular Function Context: Inside the overallFunction, this correctly refers to the object returned by createProgrammingLanguage(). Therefore, the values are retrieved when accessing this.name and this.author.
Arrow Function Context: The arrowFunction is defined within overallFunction. Arrow functions inherit this from their surrounding lexical scope, the overallFunction. This inheritance ensures that this within the arrow function refers to the same object as this in the parent regular function. As a result, the arrow function correctly accesses this.name and this.author, producing the desired output without encountering the "Cannot read properties of undefined" error.

By understanding arrow functions' lexical scoping behaviour and leveraging this behaviour to inherit this from the parent function's context, you ensure that arrow functions can access object properties and methods within the appropriate context, resolving issues that result in having the this references being undefined.

Accidentally Creating Memory Leaks

Memory leaks in JavaScript can be subtle and insidious, causing problems on devices with limited memory or in frequently called functions. In JavaScript, memory leaks happen when data is held in memory even though it's no longer needed. The primary cause of memory leaks in JavaScript is often unwanted references. Let's explore some common scenarios, how they lead to memory leaks and the solutions.

Accidental Global Variables: Accidentally declaring variables in the global scope can lead to memory leaks, as these variables persist as long as the window object exists. Here's an example of a function that mistakenly creates a global variable:

function defineLanaguage() {
  language = "JavaScript"; // Accidental global variable
}

In this code, language becomes a property of the window object ("window.language = 'JavaScript'"). To prevent this and ensure language is scoped correctly, use var, let, or const:

function defineLanaguage() {
  let language = "JavaScript"; // Scoped variable
}

Using a scoped variable ensures that language goes out of scope at the end of the function's execution, preventing memory leaks.

Interval Timers: Interval timers can cause memory leaks if improperly managed. Consider the following code:

let language = "JavaScript";
setInterval(() => {
  console.log(language);
}, 100);

In this code, the interval timer keeps a reference to the language variable, preventing it from being garbage collected even when not needed. To avoid this, clear the interval timer when it's no longer required:

let language = "JavaScript";
let intervalId = setInterval(() => {
  console.log(language);
}, 100);

// Clear the interval when no longer needed
clearInterval(intervalId);

Clearing the interval ensures the handler function and its references are cleaned up properly.

JavaScript Closures: Closures in JavaScript can inadvertently cause memory leaks if not managed carefully. Consider the following example:

let outer = function () {
  let language = "JavaScript";
  return function () {
    return language;
  };
};

This closure retains a reference to the language variable, preventing it from being collected as garbage. To avoid this, ensure that closures release unnecessary references:

let outer = function () {
  let language = "JavaScript";
  return function () {
    return language;
  };
};

// Clear the outer function reference when no longer needed
outer = null;

Clearing the reference to the outer function allows the language variable to be garbage collected when it's no longer needed.

By addressing these common scenarios of memory leaks in JavaScript, developers can improve the efficiency and stability of their code. To prevent memory leaks, always scope variables correctly, manage interval timers responsibly, and release unnecessary closures. You can research and see some other instances that lead to memory leaks, but the ones mentioned here are common.

Using Variable has Key in Object Wrongly

One common mistake in JavaScript is improperly using a variable as a key when defining an object literal. This mistake can lead to unexpected behaviour or incorrect object structures. Let's delve into this issue, understand why it occurs, and explore the correct approach to defining object keys dynamically.

In order to understand the mistake, consider the following code snippet:

var type = true;
var language = null;

if (type) {
  language = "TypeScript";
} else {
  language = "JavaScript";
}

var obj = {
  language: "programming language",
};

console.log(obj); // Output - { language: "programming language" }

In the code above, the mistake is using the variable language directly as the object (obj) key. Despite language being dynamically assigned a value based on the type condition, it is interpreted as a literal key language rather than using its value as the key.

Expected Result vs Actual Result

Expected Result: { TypeScript: "programming language" }
Actual Result: { language: "programming language" }

Correcting the Mistake

JavaScript provides a syntax using square brackets ([ ]) to use a variable as a dynamic key in an object. This allows for the evaluation of the variable's value as the key.

var type = true;
var language = null;

if (type) {
  language = "TypeScript";
} else {
  language = "JavaScript";
}

var obj = {
  [language]: "programming language",
};

console.log(obj); // Output - { TypeScript: "programming language" }

Explanation of the Solution

Problem: The original code mistakenly used language as a literal key, resulting in { language: "programming language" }.
Solution: By enclosing language within square brackets ([ ]) during object declaration, JavaScript interprets it as a dynamic key, using the value of language as the key name ("TypeScript" in this case).

Conclusion

Through this exploration of common JavaScript mistakes, you've gained valuable insights into how to write cleaner, more efficient code.

Keep growing, learning, and building!

Scaling up your skill and escaping Tutorial Hell as a Frontend Developer.

Bobate Olusegun — Sun, 17 Jul 2022 23:52:50 +0000

If you are looking for some great tools and resources to enhance your front-end skills, read on for free websites, YouTube channels, and other resources that will help you become a better front-end developer.

Getting your path around front-end development with the tons of resources out there can be ‌a daunting task. Most people get stuck in a state called “Tutorial Hell”, which occurs when you’re excellently following along in a tutorial, but everything goes wrong when you tend to build your application from what you learned in the tutorial.

What is Tutorial Hell?

Tutorial Hell is a state where most beginners keep watching tutorial videos, reading several books and articles, feeling they are making progress in their development journey, but in the actual sense, they are static (no actual progress recorded).

Fortunately, there are two major ways to escape tutorial hell. These are:

By learning and understanding the basics of the needed concepts for the technology you learning, in this case, front-end web technologies (HTML, CSS, and JavaScript).
Practice what you are learning by building projects on your own.

Top resources for learning and understanding the basics of the front-end web technologies

Plenty of good front-end development learning resources are out there, but choosing the best and the ones that resonate with you from all the many options could sometimes be ‌daunting.

I’ve compiled a list of some of the best front-end development learning resources based on the following criteria:

The number of downloads and reviews.
How beginner-friendly is it?
Cost (paltry amount or free).

Note that it is perfectly okay and even recommended that you use over one resource to learn software development. That’s why I have divided the learning resources into three categories: Bootcamp, Websites, and YouTube.

You don’t necessarily need to use all the resources I have mentioned in this post in other not to get caught up in tutorial hell, I suggest you check through and select the one(s) that best suit your learning preferences.

Bootcamps - a complete tutorial guide to a particular technology.

The Complete Web Developer Zero to Mastery - learn to code and become a web developer using HTML, CSS, and JavaScript.
Modern HTML and CSS from the Beginning (including Sass) - learn how to build responsive websites and UIs with HTML5, CSS3 & Sass also get better at CSS Flex and Grid.
Modern JavaScript from Novice to Ninja - learn modern JavaScript from the very start (beginners) to ninja-level (expert) by building exceptional JavaScript applications.
Build your first Web Pages with HTML and CSS - become an HTML and CSS master as an absolute beginner.

Websites - platforms you can fall back on to quickly learn a concept.

Front-end web developer - MDN - learn all about Front-end development, HTML CSS JavaScript HTTPS Web APIs Web Technologies.
Front-end web developer - W3schools- learn about the dos and don'ts of Front-end development and the right way to get started.
Freecodecamp responsive web design- learn and understand the languages developers use to build web pages.
Scrimba - Frontend Development- learn about front-end development from HTML through front-end frameworks.
Learn Frontend Development Codecademy- learn beyond the necessary languages needed for front-end development and how to think like a front-end engineer.
Frontend Masters- As the name explains, this website helps developers master advanced concepts, and the fun part is that very experienced developers working in the big tech firms teach the courses.

YouTube Channels - the hub of a series of tutorial videos to learn and build-out projects.

I strongly believe that you could pick one resource listed above and get to understand the basics of the web technologies used for front-end development.

With that said, the next step is putting your gained knowledge to the test by building projects of varying complexities.

Knowledge gained and not put to the test is much like the knowledge that hasn’t been gained.

The top resources for generating designs and ideas for front-end development projects

If you’re thinking of developing a front-end project from scratch all by yourself, you must take into account the effort and time it will take you to come up with an impressive design. Thus, properly structured resources are a great help to guide you on your designs.

In no particular order, I have picked out some of the most useful resources that can help you get started with building exceptional front-end designs that would help your growth as a front-end developer.

Let the ideas ‌percolate…

Codewell.cc

Codewell.cc is one of the best platforms out there for enhancing your frontend skills. It is simple to use and very efficient in getting real design templates to practice your HTML and CSS skills. Codewell is a challenge-based platform that provides a series of technical challenges for practising HTML and CSS.

The challenges on this platform are free or premium. The free challenges are available to everyone who signs up on the platform, while the ones tagged premium are only available to those who subscribe to the pro version.

For the free challenges, you get access to the assets (icons, images) for that project, the README.md file, and the PNG design files for desktop, tablet, and mobile. The prosubscription, however, comes with an additional Figma file.

There is a community on slack that helps you to solve your impediments. In case you encounter any issues, while working on a challenge, ‌share it on slack and you will have people willing to help.

DevChallenges

DevChallenges is another great website to scale up your frontend skills. To get started on this resource, you just have to carry out the following three steps and you are ready:

Navigate to the challenge paths, choose a challenge, and read the description of the challenge.
Swing into action by working on the projects either by yourself or with friends. After all, teamwork is what the work mode practice in the real world.
Completing the challenge and submitting your solution. If you complete all the challenges in a path, you will earn a certificate for it.

Within the context of this article, the challenge paths required are the Responsive Web Developer and the Front-end Developer. For each challenge chosen, you get a Figma file for the design and other resources needed to build out the project.

If you encounter any difficulty building a project and no one can help, all you need to do is navigate to the solution tab within the ‌challenge page and you get access to the source code of those who have submitted their solution to that project you are working on.

FrontendPractice

Front-end Practice is a great initiative created by Kyle Shook. The sole aim of this resource is to help frontend developers test their skills by creating a carefully curated list of web pages they can recreate.

This resource is really helpful because of its real-world application and use cases. Completing these challenges will make you more comfortable with your skills as a front-end developer.

After you sign in, navigate to the projects section and choose the website you wish to recreate. Kyle Shook went further to assist anyone who wants to take part in recreating any of the websites by providing resources that could assist you on a particular challenge, colors to use, and what you will learn to build the site.

FrontendMentor

Front-end Mentor is the platform I regard as the haven of projects to practice front-end development. This website is like codewell in terms of the structure of the challenge interfaces and tags of challenges as either free or premium.

It also tags every challenge with its corresponding level of difficulty. With this, you can easily navigate and choose the challenge that suits you according to the level of your experience or expertise.

After signing up on the website, navigate to the challenges section, then select the project you would like to work on and download the starter files. The platform provides you with assets (all the images you need for building out a project) and other resources like a Read.MD file to guide you on what is expected for a project.

You can also join the slack community where you can interact with other prominent developers and share ideas.

!00DaysCSS

As a frontend developer, you should know how important CSS is for every user interface created. Without CSS, websites will just be plain text with functionality (because of JavaScript) but it won’t be attractive. This led Matthias Martin to develop a 100-day of CSS practice challenge.

As illustrated in the snapshot above, you get a CSS challenge for 100 consecutive days. All you need to do is follow the provided template, and recreate the example by being creative (you can decide to change properties like color, font size, and other CSS properties).

To take part in this challenge-based learning, you must create a codepen account because that’s the platform needed to code out the challenge. Submit a link to your code on codepen for each challenge by copying and pasting it into the input field created for each challenge.

Acefrontend

Acefrontend, as the word implies, is a platform created to help frontend developers prepare for job interviews. The creator of this website being an interviewer at silicon valley has noticed how frontend developers fail their interviews due to minor mistakes. Therefore, Acefrontend was created. A platform where you practice minor projects, you might be asked to code out during an interview since some developers become rusty after a period.

Choose a challenge from the challenges page, click on it and start coding it out. If you get stuck during the challenge, you can request a hint or reveal the solution.

CSS Battle

CSSBattle with over 14000+ players is the first-ever code-golfing (code golf is a type of recreational computer programming competition where participants strive to achieve the shortest possible source code that solves a certain problem.) platform created by Kushagra Agarwal and Kushagra Gour.

This is a CSS gaming platform where you are presented with an image target you need to replicate using CSS and slight HTML.

Here is an example of an image target screen:

The secret to topping the leaderboard is by using fewer bytes to complete a challenge and a more visual match (i.e, the closer your solution is to the image target given).

FreeCodeCamp Challenge

FreeCodeCamp responsive web design projects are projects selected by FreeCodeCamp to help learners put their newly gained knowledge from the FreeCodeCamp Responsive Web Design Course to test. In this section, they provide you with five web programming projects ‌you should solve to learn the Responsive Web Design Certification.

To take part, you need an online editor because you will have to submit the link to your project for FreeCodeCamp to examine it.

Follow the instructions given for each project and build all five projects so you can earn yourself the certificate.

First Timers

Having an open-source project or contributing to an open-source project is one thing that attracts recruiters on a resume. But the question is, how does one get to contribute to an open-source project? This can be a daunting task.

First Timers is a hub of open-source resources that helps you with a curated list of resources to get started with open-source. These resources bridge the gap between those who have created projects and made them open-source with those willing to contribute as little as a line of code to make the project more efficient.

In addition, some other great resources to check out are:

Conclusion

Being an expert at what you do is a very important thing for anyone regardless of the profession. As a front-end developer, there are a lot of resources on the web to become an expert in this field.

Here, I picked out the best resources for you to get started with. There are lots of benefits attached to using these resources to understand concepts of front-end technologies, optimization of codes, and deployment of projects.

[My Submission For Innovative Idea Contribution Section of Deepgram x DEV Hackathon]

Bobate Olusegun — Mon, 11 Apr 2022 20:52:17 +0000

Introduction

For a while now, some ideas have been running through my brain. I've basically be finding ways to ease myself of some activities in my day-to-day living by automating them. With Deepgram, I feel some of this issues will be solved. For the record; Deepgram is the first speech recognition technology am making use of.
All I want, is to see how I can use Deepgram to solve some of the issues causing a boring lifestyle for me especially in academics.

My Deepgram Use-Case

In my freshman's year in school, we were offering general courses which warrants almost all students in their first year to compulsorily take. Sometimes coming late just simply means you should not expect getting a seat unless a friend kept one for you. As if that's not enough, Lecturer's come to the lecture theatre speaking in tiny voices (also known as bedroom voice). Oh! I didn't give you the shocker, whenever I have class for 9am in the morning, I must leave my hostel as early as 5:30am and this still doesn't guarantee me a sit in the first four rows of the lecture theatre - irony of students.

These got me thinking of how I could get to have a standard note (because ever before I got admission, I was told of how important getting all that is said in a lecture is, making lectures superior to textbooks at times). One day, I thought of building an app that I could install on my phone which would be capable of detecting speech(voice - the words) of my lecturer and translate it into a well-aligned note for me. This still remain something I haven't done because I want something robust and better than any application out there for the same course.

This is what birth my idea - "A full fledged speech Converter into a well aligned note, which would be able to detect things like topic, name of lecturer if this is the first lecture for that course and so on".

Dive into Details

A lot of industry would benefit from this innovation, starting from academics field.

Feature: The Deepgram transcriber

First Use case: Lecture Converter into well-aligned note.
This innovation will help students get standard notes from lectures received. Using the Deepgram's Speech-to-text technology, a lecture received by student can be converted into a note that is free of grammar error.
This will assist students who find it difficult to spell some words to be free; this is one major issue students face in school especially universities because notes are dictated sometimes.
The Deepgram's Speech-to-text technology is expected to be able to detect noise and represent it as - .... or -----, it should also be able to automatically detect when and where punctuation marks should be applied (just like how grammarly detects that).

Second Use Case: Music/songs converter into well-aligned text.
For a while now, I found it difficult to get the lyrics from a song especially rap songs. Having something that works like the shazam app (which returns title of song when played) but for the lyrics of a song, is an amazing innovation Deepgram can proffer.
The Deepgram's Speech-to-text technology will be used to take in speech of song played and automatically converts it to a well-aligned readable text for user. We can never tell this may just sell fast just like the shazam app did. You could go further to make it possible that the Speech-to-text technology could detect and understand any language, because some musicians sing in their native language. It will be cool if Deepgram Speech-to-text technology could detect and understand songs sang in some countries native language into english text which is a universal language.
Just maybe, this might help people like me want to listen to some musicians and this could help their songs go viral, and most importantly let peace continue to grow in the world simply because I understand other people culture just through a song I listened to and loved it.

These ideas will help the music industry, academic industry, the world at large.

Conclusion

The aforementioned ideas can be made and incorporated into API (Application Programming Interface) which could help developers build better apps and one developer might just build the next Shazam for song lyrics, how cool is that. I look forward to getting an opportunity to write something about a feature of the Deepgram Speech-to-text technology, that would be a great privilege.

Thank you Deepgram for making this hackathon happen and if I don't win, am happy I have been able to get an opportunity to drop an idea I have for the Speech-to-text technology. Thanks for this awesome opportunity. In spite of everything, I wish this ideas are brought to life.

God bless Deepgram, keep creating amazing technology.

Arrays and Array Methods in JavaScript

Bobate Olusegun — Sun, 20 Feb 2022 16:41:02 +0000

Let's say you're given the task of computing the test scores of all the students in your class who took maths and displaying the scores that are lower than the average. Your naïve method will be to first assign each student's score to a variable, then access each score by referencing the name of the variable, compute the average score, and check for scores below the average score. This strategy will make the program more difficult to use, and it will also break the DRY (Do Not Repeat Yourself) principle.
The use of a data structure known as an 'array' in JavaScript and other languages has resulted in a more efficient way of performing the task above. You can use an array to store all the scores of students who took maths in a list-like structure assigned to just one variable, and you can refer to any score using the variable name and index. For us programmers, the array makes life easier.

In this article, we'll learn how to create arrays in JavaScript and how to modify them with array methods. By the end of this session, you'll be able to apply the most often used array methods in JavaScript. This article is beginner-friendly, so don't worry if you know nothing about arrays in JavaScript. With that out of the way, let's get down to business with this tutorial.

Prerequisites

To follow along with this tutorial, you'll need the following:

Basic Knowledge of JavaScript
A text editor like Vs Code installed on your local desktop

What is an Array?

An array can be thought of as a large container that stores things of many types. The items in the large container can be referred to (i.e accessed later by a property each item possesses, which is the position).

Arrays In JavaScript

In JavaScript, an array is one of the most important data structures every JavaScript Developer must understand as well as be comfortable with its usage.

Arrays in JavaScript are ordered lists of values inserted between an opening square bracket ( [ ) and a closing square bracket ( ] ). Commas separate the list of values.

Example of an array in JavaScript:

let names = ["Moses" , "Jacob", "Isaac", "Abraham"]
console.log(names) // logs [ 'Moses', 'Jacob', 'Isaac', 'Abraham' ]

Since JavaScript is not statically typed, an array in JavaScript can hold different types of data like the code below:

let main_arr = ["Isaac", "football", {name:"Moses"  , age: 21}, [one, two], 20]

The code snippet above shows that arrays can hold data of different types. The array defined above contains different data types; strings, objects, array (YES!, an array can store another array), integer, and so on.

Creating Arrays

In JavaScript, we create arrays using two methods. They are:

Using Array constructor

//sysntax
let arr = new Array();
console.log(arr) //logs []

Embedding elements within square brackets ([])

//syntax
//This is the most used method of creating arrays.
let arr = [];
console.log(arr) //logs []

If you console log variable arr in the two code snippets above, you would notice that square brackets are returned. This simply means that the two methods are valid for creating arrays.

IsArray Method

JavaScript has a built-in method that checks if an item is an array. It returns true if the item passed to it is an array, otherwise, it returns false.

The implementation:

let programming_language = 'JavaScript';
console.log(Array.isArray(programming_language)); //logs false

let programming_languages = ['python', 'javaScript', 'java', 'golang'];
console.log(Array.isArray(programming_languages)); //logs true

Length Vs Index

Indexing of arrays in JavaScript starts at zero. This statement means that the first element of an array is accessed using this numeric slot - arr[0]. The length of an array is the number of elements in an array. For example, the names array created above has four names embedded in it, meaning the number of elements of the names array is four, and the size of the array is four. In simple terms, the number of elements of an array is equal to the size or length of the array.

Let’s use a practical example to understand this better.

//let’s say we have an array with just one element.
let arr_new = ["JavaScript"];
//the number of elements of the arr_new array is one, so therefore the size of the array is one.
//In JavaScript we use the length method to get the size of an array

console.log(arr_new.length); //logs 1

//recall indexing starts at zero, to get the element in the arr_new array, we use the index
console.log(arr_new[0]); //logs JavaScript

Note, in JavaScript, we use the indexof() method to get the index of a particular element in an array. If you use the indexof() method to check for the index of an existing element in an array, the index is returned otherwise it returns -1 (meaning the element doesn't exist in the array).

So far, we’ve learned how to create arrays, access the elements in an array, and also how to obtain the size of an array using the built-in length method that JavaScript provides for us.

Accessing Elements In an Array

Now that we know how to create an array in JavaScript, the question that comes to mind, is, how are the elements (values contained in an array) accessed. Essentially, numbers are used as lookup keys for arrays. The opening square bracket ( [ ) and closing square bracket ( ] ) notations are used to access a particular element in an array, by inserting the index number of that particular element in between the square brackets.

The code below will expain better on how to access element in an array:

//create an array
let names =  ["isaac", "samuel", "daniel", "moses"];
//In this instance, we want to access the second element of the names array
let names_access = names[1];
console.log(names_access) // logs samuel

Note, arrays in JavaScript are zero-indexed. This means the first element of an array is at position 0. In other words, to get an index of a particular element in an array, we start counting from zero and not from one.

Modify Elements In an Array

In JavaScript, we can modify elements in an array. The common application of array modification in JavaScript are:

Changing existing elements in an array.

//syntax
let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
//change the second element ('basketball') in the sports array to 'lawn tennis'
sports[1] = 'lawn tennis';
console.log(sports) //logs [ 'football', 'lawn tennis', 'Tennis', 'volleyball' ]
//change the second element back to 'basketball'
sports[1] = 'basketball';
console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]

Adding new elements to an array

//syntax
let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]
//Since the array has elements in it, we can only add a new element at the end of the array
//You need to know the index of the last element in the array.
//The last index will be the length of the array - 1 because the positioning of elements starts from the index of zero.
//To get the number of elements in the sports array. We use the length method.
let sports_length = sports.length;
console.log(sports_length); //logs 4
//Now that we know the length of the array. The last index = length (which is 4) - 1.     //   //That's 3.
//So therefore the next element or the new element to be added be at index (last index +    //1), which is 4.
sports[4] = 'Lawn Tennis';
console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball', 'Lawn Tennis' ]

Array Methods

Array methods in JavaScript are simply the set of built-in functions that enables us to manipulate or modify arrays. Arrays in JavaScript are mutable. In this section, you would learn and understand how to use array methods.The array methods are:

Pop Array Method
Push Array Method
Shift Array Method
Unshift Array Method
Slice Array Method
Splice Array Method
Map Array Method
Filter Array Method
Reverse Array Method
Concat Array Method
Join Array Method
Sort Array Method
Includes Array Method
Some Array Method
Every Array Method
Findindex Array Method
Find Array Method
ForEach Array Method
Reduce Array Method

Pop Array Method (array.pop())

This method is used to remove the last element in an array. You don't need to pass any argument into the parentheses.

The implementation:

 //syntax
 let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
 let sports_popped = sports.pop();
 console.log(sports);// logs [ 'football', 'basketball', 'Tennis' ]
 console.log(sports_popped); // logs volleyball

Note, if you wish to remove more than just the last element, you have to call the pop() method as many times as you want to remove elements from the end of the array.

Push Array Method (array.push())

The push() method adds an element to the end of an existing array, then returns the length of the new array. This method takes in an argument, unlike the pop() method. The argument that's passed should be the element that you want to add at the end of the array.

The implementation:

//syntax
let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_pushed = sports.push('Lawn Tennis');
console.log(sports);// logs [ 'football', 'basketball', 'Tennis', 'volleyball', 'Lawn Tennis' ]
console.log(sports_pushed); // logs 5

From the code snippet above, we can conclude that this method copies the elements in the
Original array, adds the new element to the list of elements. It then reassigns the variable of the old array to a new array with a list of the elements of the old array with an inclusion of the new element (pushed element).

Note, the push() method is an added feature; this feature enables you to add multiple elements to the end of the array at once.

//syntax
let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_pushed = sports.push('Lawn Tennis','cricket');
console.log(sports);// logs [ 'football', 'basketball', 'Tennis', 'volleyball', 'Lawn Tennis', 'cricket' ]
console.log(sports_pushed); // logs 6

In the code snippet above, we used the push() method to add two elements to the end of the sports array.

Shift Array Method (array.shift())

This method removes the first element of an array. It's the opposite of the pop() method, as it removes the element from the beginning while pop() removes the element from the end of an array. The method also returns the element that was removed. This method is also similar to the pop() method in the sense that it doesn't take in any argument.

The implementation:

 let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
 let sports_shifted = sports.shift()
 console.log(sports); //logs [ 'basketball', 'Tennis', 'volleyball' ]
 console.log(sports_shifted); //logs football

Note, if you wish to remove more than just the first element, you have to call the shift() method as many times as you want to remove elements from the beginning of the array.

Unshift Array Method (array.unshift())

This method adds an element to the beginning of an array. It's the opposite of the push() method. The method returns the length of the new array. This method is also similar to the push() method in the sense that it takes an argument, the argument should be the element you want to add to the array.

The implementation:

 let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
 let sports_unshifted = sports.unshift('Lawn Tennis');
 console.log(sports); //logs [ 'Lawn Tennis', 'football', 'basketball', 'Tennis', 'volleyball' ]
 console.log(sports_unshifted); //logs 5

Note, if you use the unshift method without passing an argument, you don't get an error; there will be no difference in the elements of the array before and after the unshift method is applied.

The implementation:

 //before the unshift method is applied
 let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
 console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]
 console.log(sports.length); // logs 4

 //after the unshift method is applied
 let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
 let sports_unshifted = sports.unshift()
 console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]
 console.log(sports_unshifted); //logs 4

Slice Array Method (array.slice())

This method returns a fragment of an existing array. It takes two numerical arguments which are indexes of existing elements in the array to which the method is applied. The first argument is the starting index (position) of elements that would be copied from the original array to the new array, while the second argument is the ending index (position) of elements that would be copied to the new array. The element at the position of the first argument is copied to the new array but the element at the position of the second argument is not copied to the new array. This means that the last element of the new array would be the element of the preceding index of the second argument in the original array. The method doesn't mutate the original array.

The syntax:
array.slice(start, end);

The implementation:

let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_sliced = sports.slice(1,3);
console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ], the original array still exist
console.log(sports_sliced); //logs [ 'basketball', 'Tennis' ]

Note, if you use the slice method without passing an argument, you don't get an error; there will be no difference in the elements of the original array and new array. This also applies when zero is passed as the only argument.

The implementation:

let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_sliced = sports.slice();
let sports_one_sliced = sports.slice(0);
console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]
console.log(sports_sliced); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]
console.log(sports_one_sliced) //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]

Normally, you are expected to pass two arguments when using the slice method, but if you pass just one argument, JavaScript automatically takes that argument as the starting index and copies all elements from that index to the end.

The implementation:

let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_one_sliced = sports.slice(1);
let sports_two_sliced = sports.slice(2);
console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]
console.log(sports_one_sliced); //logs [ 'basketball', 'Tennis', 'volleyball' ]
console.log(sports_two_sliced); //logs [ 'Tennis', 'volleyball' ]

Splice Array Method (array.splice())

This method is used to replace, remove, and add a new element to an array. The splice() method takes in two arguments - starting index and delete count respectively. The elements are deleted from the starting index and the ending index is determined by the delete count.

The implementation:

let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_spliced = sports.splice(1,3);
console.log(sports); //logs [ 'football' ]
console.log(sports_spliced); // logs [ 'basketball', 'Tennis', 'volleyball' ]

In the code snippet above, the starting index is one, that is why the elements are deleted starting from the element in index one, and the ending index is three because the delete count is three; meaning delete three elements starting from index one, and that is the element at index one, index two and index three. The splice() method mutates the original array.

This method can also be used to add new elements to an array. In this instance, it takes starting index - like where you want to add the new elements, delete count - as zero (since nothing is expected to be deleted) and the elements you want to add, all separated with commas (',').

The implementation:

let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_spliced = sports.splice(3, 0, "lawn tennis", 'wrestling');
console.log(sports); //logs [
//   'football',
//   'basketball',
//   'Tennis',
//   'lawn tennis',
//   'wrestling',
//   'volleyball'
// ]
console.log(sports_spliced); // logs []

Map Array Method (array.map())

The map() method creates a new array and populates it with the result of a callback function for each element in the original array. This method doesn't mutate the original array.

The implementation:

let numbers = [1, 2, 3, 4, 5, 6];

let triple_number = numbers.map(triple_nums);

//this is the callback function
function triple_nums(num) {
  return num * 3;
}

console.log(triple_number); //logs [ 3, 6, 9, 12, 15, 18 ]
console.log(numbers); //logs [ 1, 2, 3, 4, 5, 6 ], the original array still exist

Filter Array Method (array.filter())

The filter() method creates a new array that is populated by elements that satisfy the condition of the callback function.

The implementation:

//lets return even numbers
let numbers = [1, 2, 3, 4, 5, 6];

let even_nums = numbers.filter(even_numbers);
//this is the callback function
function even_numbers(num) {
  return num % 2 === 0; //the condition
}

console.log(numbers); // logs [ 1, 2, 3, 4, 5, 6 ]
console.log(even_nums); //logs [ 2, 4, 6 ]

Under the hood, JavaScript will check if each element satisfies the condition. If an element in the array satisfies the condition, it resolves to True then it is passed to the new array, otherwise, it resolves to False and is not passed to the new array.

This method doesn't mutate the original array.

Reverse Array Method (array.reverse())

As the name implies, this method reverses the order of elements in an array. The first element becomes the last and the last element becomes the first. It returns a new array with elements having reversed order. This method mutates the original array.

The implementation:

//let's return the reversed order of the numbers array.
let numbers = [1, 2, 3, 4, 5, 6];

let reversed = numbers.reverse();

console.log(reversed); //logs [ 6, 5, 4, 3, 2, 1 ]
console.log(numbers); //logs [ 6, 5, 4, 3, 2, 1 ]

In the code snippet above, you would notice that the reversed array and numbers array are the same after the reverse() method has been applied.

Concat Array Method (array.concat())

This method merges multiple arrays (it can merge more than two arrays). The argument it takes is the array that is to be merged to the array the method is applied. This method doesn't mutate the original arrays.

The implementation:

//let's concatenate two arrays.
let nums_one = [1, 2, 3, 4, 5, 6];
let nums_two = [7, 8, 9, 10, 11, 12];

let nums_combined = nums_one.concat(nums_two);

console.log(nums_combined); //logs [
//     1,  2, 3, 4,  5,
//     6,  7, 8, 9, 10,
//    11, 12
//  ]

In the explanation of what the concat() method is, I mentioned that we can use it to merge multiple arrays. When merging more than two arrays, you need to do the following:

Apply the concat() method to the first array
Pass the other two arrays as arguments for the concat() method
Separate the two arrays passed as arguments with a comma

Note, the list above applies when we want to merge three arrays.

The implementation:

//let's concatenate two arrays.
let nums_one = [1, 2, 3, 4, 5, 6];
let nums_two = [7, 8, 9, 10, 11, 12];
let nums_three = [13, 14, 15, 16, 17, 18];

let nums_combined = nums_one.concat(nums_two, nums_three);

console.log(nums_combined); //logs [
//     1,  2,  3,  4,  5,  6,  7,
//     8,  9, 10, 11, 12, 13, 14,
//    15, 16, 17, 18
//  ]

Join Array Method (array.join())

The join() method creates and returns a string that comprises elements in an array, the elements are separated by commas - by default. The argument passed into the method stands as the separator of the elements of the array. The method doesn't mutate the original array.

Syntax
arr.join(separator);

The implementation:

//let's join elements of the array with a separator
let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let joined_sports = sports.join();
console.log(joined_sports); //logs football,basketball,Tennis,volleyball

//let's join elements of the array with a separator
let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let joined_sports = sports.join('-');
console.log(joined_sports); //logs football-basketball-Tennis-volleyball

Sort Array Method (array.sort())

The sort() method simply sorts elements in an array in ascending order. It sorts strings using the first alphabet. The method loops through all elements in an array then compare them with each of their starting characters. This is how the method gets the element that would start the series of sorted elements. The method mutates the original array.

The implementation:

//let's sort elements of the sports array
let sports = ['football', 'basketball', 'tennis', 'volleyball'];
let sorted_sports = sports.sort();
console.log(sorted_sport); //logs [ 'basketball', 'football', 'tennis', 'volleyball' ]
console.log(sports); //logs [ 'basketball', 'football', 'tennis', 'volleyball' ]

Note, the sort() method is case sensitive when using it make sure all the elements in the array the method is applied are consistent in lettering (i.e they are all starting with lowercase letters or they are all starting with uppercase letters).

Let's apply the sort() method to an array that has numbers as its elements.
The implementation:

//let's sort elements of the numbers array
let numbers = [7, 4, 6, 2, 3, 5, 1];
let sorted_numbers = numbers.sort();
console.log(numbers); //logs 
// [
//   1, 2, 3, 4,
//   5, 6, 7
// ]

The sort() method doesn't sort an array with elements of one digit, two digits, and above.
For example:

//let's sort elements of the numbers array
let numbers = [70, 1, 100, 20, 35, 50, 11];
let sorted_numbers = numbers.sort();
console.log(numbers); //logs [
//     1, 100, 11, 20,
//    35,  50, 70
//  ]

The code above shows that the sort() method uses the first alphabet or the first number of two digits or three digits number to sort an array with elements of numbers with more than one digit. In situations like this, we make use of the comparison function. Comparison function is a function that defines an alternative sort order.

The implementation of comparison function with sort() method:

//let's sort elements of the numbers array
let numbers = [70, 1, 100, 20, 35, 50, 11];
let sorted_numbers = numbers.sort(comparisonFunction);

function comparisonFunction(a, b) {
  return a-b;
}

console.log(numbers); //logs [
//     1, 11,  20, 35,
//    50, 70, 100
//  ]

//Alternatively if you want to have it in descending order, you simply do:
let numbers = [70, 1, 100, 20, 35, 50, 11];
let sorted_numbers = numbers.sort(comparisonFunction);

function comparisonFunction(a, b) {
  return b-a;
}

console.log(numbers); //logs [
//     100, 70, 50, 35,
//      20, 11,  1
//   ]

Includes Array Method (array.includes())

The includes() method checks if an element exists in an array. It returns true if the element exists in the array, otherwise false.

The implementation:

let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_included = sports.includes('basketball');
let sports_not_included = sports.includes('lawn tennis');
console.log(sports_included); // logs true
console.log(sports_not_included); // logs false

This method is case sensitive, whatever element you want to check for must be in the same letter case as the one that conforms with it in the array. This means that both elements must be either in uppercase or lowercase letters, or their first character must be either in uppercase or lowercase letters.

Some Array Method (array.some())

This method tests if at least an element in an array satisfies the condition passed by the callback function. If at least one element meets the criteria of the callback function, the result is resolved to true otherwise false.

The implementation:

//let's check if at least an element in the numbers array is even
let if_even = [2, 5, 6, 9, 11]; // we have at least two elements that are even
let if_not_even = [1, 3, 5, 9]; // there is no even number

let if_even_passed = if_even.some(even_numbers);
let even_not_passed = if_not_even.some(even_numbers);
//this is the callback function
function even_numbers(num) {
  return num % 2 === 0; //the condition
}

console.log(if_even_passed); // logs true 
console.log(even_not_passed); // logs false

Every Array Method (array.every())

This method tests if all elements in an array satisfy the condition passed through the callback function. Unlike the some() method, the every() method checks if all the elements of an array satisfy the condition in the callback function.
This method returns true if the elements in the array satisfy the condition in the callback function and false if the elements in the array don’t satisfy the condition.

The implementation:

//let's check if the the elements of the numbers array are all even
let if_even = [2, 4, 6, 8, 10];
let if_not_even = [1, 2, 3, 8, 10];

let if_even_passed = if_even.every(even_numbers);
let even_not_passed = if_not_even.every(even_numbers);
//this is the callback function
function even_numbers(num) {
  return num % 2 === 0; //the condition
}

console.log(if_even_passed); // logs true 
console.log(even_not_passed); // logs false

Note, all elements must satisfy the condition. IF some elements satisfy the condition, the result is still resolved to false.

Findindex Array Method (array.findIndex())

This method returns the index of the first element that satisfies the condition in the callback function.

The implementation:

let numbers = [1, 2, 3, 4, 5, 6];

function find_index(num) {
  return num >= 4;
}

let indexed_number = numbers.findIndex(find_index);
console.log(indexed_number); //logs 3

Note, if no element in the given array satisfies the condition, an index of -1 is returned.
For example:

let numbers = [1, 2, 3, 4, 5, 6];

function find_index(num) {
  return num >= 7;
}

let indexed_number = numbers.findIndex(find_index);
console.log(indexed_number); //logs -1

Find Array Method (array.find())

This method is similar to the findIndex(); the only difference is that the find() method returns the value of the first element that satisfies the condition in the callback function.

The implementation:

let numbers = [1, 20, 35, 40, 52, 6];

function find_value(num) {
  return num >= 10;
}

let found_number = numbers.find(find_value);
console.log(found_number); //logs 20

Unlike the findIndex() method which returns an index of -1 when no element satisfies the condition in the callback function, the find() method returns undefined if no element satisfies the condition in the callback function.

The implementation:

let numbers = [1, 20, 35, 40, 52, 6];

function find_value(num) {
  return num >= 60;
}

let found_number = numbers.find(find_value);
console.log(found_number); //logs undefined

ForEach Array Method (array.forEach())

This method loops through an array. The method relies on a callback function on what should be done. The method takes three parameters: a value, an index, and an array.

The implementation:

let months = ['january', 'february', 'march', 'april', 'may', 'june'];

let months_aligned = months.forEach(month_display);

function month_display(month, index, arr) {
  console.log(`MOnth ${index + 1} - ${month}`); //In JavaScript, indexing starts from zero.
}

console.log(months_aligned); //logs MOnth 1 - january
// MOnth 2 - february
// MOnth 3 - march
// MOnth 4 - april
// MOnth 5 - may
// MOnth 6 - june

We can use this method to perform the addition of numbers in an array.
The implementation:

let numbers = [1, 20, 35, 40, 52, 6]; 

let counter_sum = 0;

numbers.forEach((num) => {
  counter_sum += num;
})

console.log(counter_sum); //logs 154; that's the sum of all the elements in the numbers array.

Reduce Array Method (array.reduce())

As the name implies, this method reduces elements of an array to a single element. The method takes a callback function that is called in every iteration instance. This callback function has two arguments - an accumulator and a currentValue.
By default, the accumulator is set to the first value in the array while the currentValue is the second value in the array. The reduce() method takes either one or two arguments, the callback function or the callback function with the accumulator respectively.

The syntax: reduce method taking one argument

//es5 version
let arr = []; // the array we want to apply the reduce method

//callback function
function example(accumulator, currentValue) {
  //input what you want to perform with this callback function
}

let arr_reduced = arr.reduce(example); //the reduce method takes one argument(the callback function)

//es6 version(arrow functions)
let arr = []; // the array we want to apply the reduce method
let arr_reduced = arr.reduce((accumulator, currentValue) => {}) //the reduce method takes one argument(the callback function)

In the code snippet above, the accumulator will be set to the first value in arr because there is no defined value for the accumulator, while the currentValue will be the second value in arr.

The syntax: reduce method taking two arguments

//es5 version
let arr = []; // the array we want to apply the reduce method

//callback function
function example(accumulator, currentValue) {
  //input what you want to perform with this callback function
}

let arr_reduced = arr.reduce(example, acc_value); //the reduce method takes two argument(the callback function and accumulator intial value) 

//es6 version(arrow functions)
let arr = []; // the array we want to apply the reduce method
let arr_reduced = arr.reduce((accumulator, currentValue) => {}, acc_value) //the reduce method takes two argument(the callback function and accumulator intial value)

Since the reduce() method takes a second argument - the accumulator, in the code snippet above, the accumulator is set to that defined value while the currentValue will be the first value in arr. The accumulator-defined value can be any value depending on your end goal, in most code snippets online, the accumulator-defined value is zero(0).

Let's practicalize with a basic problem of summing up numbers in an array

Use the reduce method to get the sum of numbers.

let numbers = [1, 20, 35, 40, 52, 6]; 

function sum_numbers(accumulator, currentValue) {
  console.log("The accumulator ", accumulator); //The accumulator  1 The accumulator  21 The accumulator  56 The accumulator  96 The accumulator  148
  return accumulator + currentValue;
}

 //since an accumulator is not defined, you will notice that the initial value of the accumulator is 1, that's because no accumulator was defined.

let result_val = numbers.reduce(sum_numbers);
console.log('The result is ',result_val); //logs 154

You can condense the code above into this:

let numbers = [1, 20, 35, 40, 52, 6]; 
let result_val = numbers.reduce((accumulator, currentValue) => accumulator + currentValue , 0);
console.log(result_val); //logs 154

let's use the reduce method with the ternary operator to find the number that is greater than all other numbers in the array

let numbers = [1, 20, 35, 20, 52, 6]; 

let greatest = numbers.reduce((accumulator, currentValue) => currentValue > accumulator ? currentValue : accumulator);
console.log(greatest);

Note, it is not compulsory to name your variables as accumulator and currentvalue at all times. I just spelled out the name in full for easy grasp. You can shorten them to acc - accumulator and cur - currentValue.

Conclusion

In this article, we learned about array and array methods in JavaScript. First, we looked at some important information about arrays; like how to define or create arrays. Afterwhich we covered how to use some methods to check for an array and, modify arrays. Then, we explored the various important array methods (the ones you would need occasionally as a JavaScript developer).

For further reading check out the following:

You should also try out some leetcode easy array questions here

I hope you enjoyed this article as I anticipated, please like, leave a comment and, share this article.

Basics Of localStorage.

Bobate Olusegun — Wed, 21 Jul 2021 21:58:12 +0000

Information being stored on a user's computer is a very powerful strategy for a developer making cool things for the web. In this article we will look at how we can store information on the user's computer which the user can access after closing the browser weeks winged away into months,and months into years after the data was saved and also what it can be used for.
Before we get a detailed picture of what localstorage is all about , I think it is highly recommended for you to know the difference between client-side storage and server-side storage in relation to websites and applications. Basically , Server-side is an external means of storage which deals with pulling data from the server each time a request is made , using a database , while Client-side on the other side is an internal means of storage, it consists of javascript APIs that allow you to store data in the browser(client).

Prerequisites

For you to get the best out of this article , it is important to know and have the following:

Basics of javascript ; aspect of javascript like defining
variables, object, array, function, JSON,DOM.
You will also need an IDE(code editor) ; for example: Atom , sublime text , bracket , visual studio code.
For this article I will be using visual studio code which you can download here.
A web browser.You can get google chrome via the link below , that's the browser that would be used in this article.
Google chrome can be downloaded here.

What Is localStorage?

local storage , one of the web storage APIs(a set of mechanisms that enables browsers to store key-value pairs) , is a storage mechanism that has data with no expiration date , data that will persist across browser sessions. It is found in a browser and not on a server. It can be compared to a large javascript object , where data is stored in a form known as key-valuepairs. The keys and values stored with localstorage are always in the UTF-16 string format , which stores two bytes per character. One of the most amazing things about localstorage is that we can do much more than just to store data , we can retrieve data or delete it with the help of localstoragemethods which will be discussed in details later in this article.

localStorage vs SessionStorage.

First of all,we must know that Web Storage API consists of two mechanisms:localStorage and SessionStorage which are similar in a way,they maintain a separate storage area for each document's origin for the period of a browser session.
The main difference you should know is that SessionStorage maintains storage only for the period the browser is active(open) while localStorage retains data even when the browser is closed.In other words,SessionStorage has expiring date(immediately the browser is closed) for it's data but localStorage stores data for a long period of time(days,months,years) , and only loses the data if it is explicitly cleared by the user.

Technically , the localStorage read-only property of the window interface allows you to access a Storage object for theDocument'sorigin; the stored data is saved across browser sessions.

What Is Cookie?

A cookie is a text file hosted on the user's computer and connected to the domain that your website runs on. You can store information in them , read them out and delete them. Cookie has few limitation though:

They allow up to only 4 KB of data storage.
They add to the load of every document accessed on the domain.
They are used to spy on people's surfing behaviour.Security-conscious users turn them off or request to be asked every time whether a cookie should be set.

Why Use localStorage?

The major problem with HTTP as a transport layer of the web is that it is stateless. This simply means that when you make use of an application and then close it , it's state will always be reset on next visit. As a developer , it is pertinent to store the user interface somewhere. Normally , this is done with the help of a server , using the username which serves as a key to know the exact state to retract. However , we know that it will be cumbersome to be implementing the signup method in staticapplications or websites.
This is where localstorage comes in. You would need a key to know which state to revert to when the user returns.

Where Is localStorage?

For the aim of this article , I will be using chrome browser as I mentioned earlier in the Prerequisite , it is pretty similar accessing the localStorage of any browser. We open the console by right clicking in the browser and choosing the inspect option , then navigate to the Application tab where we see Localstorage by the left side under the storage tab.
Something like this:

When we expand the LocalStorage dropdown , we get this;

As we can see above , we have two columns namely Key and Value , which are normallly occupied with data , it is empty in this screenshot because i cleared the localstorage.

We can access the storage object by using Window.localStorage , and also fill up the two columns in the screenshot above by using some pre-defined
localStorage methods. For accessing the storage we use this syntax:

//Accessing the localStorage
Window.localStorage
// or
localStorage

localStorage Methods

The localStorage offers five methods that we can implement in our code , these methods aids the smooth use of localStorage and enhances the CRUD functionality , they are also pretty easy once you know the syntax for using each one of them. In this section we would practicalize these methods by using actual code once we get the syntax for each one of them. They are:

1.setItem():It is use to add key and the corresponding value to localStorage.

2.getItem():This is the method used to retrieve value from localStorage.

3.removeItem():Use to remove a particular value from localStorage with the help of the corresponding key.

4.clear():use to empty thelocalStorage.

5.Key():Passed a number to retreive the nth key of a localStorage.

setItem(key,value)

//use to add something to localStorage
localStorage.setItem('key','value');

getItem(key)

//use to access a value in the localStorage
localStorage.getItem('key');

removeItem(key)

//use to remove a particular value in the localStorage
localStorage.removeItem('key');

clear()

//use to remove all the values in the localStorage
localStorage.clear();

We should do real practical of using these methods now,since we know the syntax for each.
Let's start by adding something to the localStorage.

//adding value to empty localStorage
//open your code editor and run this code then check the localStorage
window.localStorage.setItem("cars","Ls-500");

One thing you should know as earlier mentioned , is that localStorage can store data only in string format. Unfortunately , our data is in object form but localStorage only store data in string format. There is an antedote for this issue , which is the use of JSON and it's methods , JSON.stringify()and JSON.parse(). When we want to store data , we convert to string using JSON.stringify() and we convert string back to object on retrieving data using the JSON.parse() method.

let's add more values to the localStorage using the setItem() method so we can understand better.

//storing data in object inside the localStorage
const programmer = {name:"Segun", age:12, language:"Javascript"}
const save = JSON.stringify(programmer);
localStorage.setItem("programmer",save);

Now the localStorage is occupied with more data and should look like this:

Note , we can continue to add up values to the localStorage as long as the data saved does not exceed the max storage capacity of the localStorage , which is 5MB.

Moving to the next phase , let's retrieve the corresponding value of programmer key. Don't forget we need to convert it back to object before we can retrieve it , which would be outputted by console logging it.

const saved = localStorage.getItem("programmer");
console.log(saved);
const retrieve = JSON.parse(saved);
console.log(retrieve);

This should be your output:

Lastly , let's use the removeItem() to delete one of the values afterwhich we will use the clear method to empty the localStorage:

Our localStorage screenshot looks like this initially:

localStorage.removeItem("cars");

Running the above code using the removeItem() method , our localStorage should look like this now:

localStorage.clear();

Wow , see what we have:

Key()
I believe that you know index starts from zero in javascript.The first item in a list is accessed with index Zero.

//filling the localStorage , because the clear() method has emptied the localStorage
window.localStorage.setItem("cars","Ls-500");

const programmer = {name:"Segun", age:12, language:"Javascript"}
const save = JSON.stringify(programmer);
localStorage.setItem("programmer",save);

console.log(window.localStorage.key(0))//it retuens the first key in the localStorage which is `cars`;

The code above is accessing the key with index zero , meaning the first key in the localStorage.

localStorage Browser Support
localStorage , a type of web storage is supported across all major browsers. It is important for us to be sure that the browser we using supports localStorage , this can be done by opening your browser console and running the code below:

//localStorage browser support
 if (typeof(Storage) !== "undefined") {
  console.log("Browser supports localStoarge");
} else {
 console.log("Browser  does not support localStoarge");
}

You should have something like this if you run the code:

localStorage Limitations

There are two sides to a coin,definitely everything has it's own advantages and disadvantages.The following are limitations/disadvantages of localStorage:

1.Limited Storage Capacity:localStorage is limited to just 5MB data storage across all major browsers.

2.Insecure Data:localStorage has no data protection , data in localStorage can be accessed easily on the webpage.It is susceptible to cross-site scripting(client-side code injection attack).

3.Synchronous Operation :localStorage runs Synchronous Operation system,meaning operations runs step by step , one after the other.

4 Mode of Storage:localStorage can only store data in string format , but this mode of storage might be cumbersome when working on a complex project.

Conclusion

In this article , I introduced you to what localStorage is , why you need localStorage , how you can access it in your browser , the methods it has and how you can implement them.Sensitive data should not be stored in the localStorage , use Server-Side storage instead.

If you find this article helpful as I anticipate , especially if you are just learning localStorage for the first time , please kindly share.

DEV Community: Bobate Olusegun

Decoding JavaScript: A Guide to Deobfuscation

Practical Explanation of JavaScript Deobfuscation and Obfuscation

Why is JavaScript Deobfuscation Important?

How JavaScript Deobfuscation Works

Solutions for JavaScript Deobfuscation

How to Scrape Data from a Page with Infinite Scroll

Prerequisites

Initialize the Project

Accessing the Content of the Page

Simulate the Load More Products Process

Parse Product Information

Export Product Information to CSV

Conclusion

Common JavaScript Mistakes Developers Make

Misusing the let, var, & const - Variables Scope

How does var differ from let and const?

Misunderstanding Loose and Strict Equality

Loose Equality

Strict Equality

Unneccesary usage of the Else block

Misusing Mutable and Immutable Types

Understanding Mutable Types and References

Real-world Scenario: Misunderstanding Mutable vs Immutable Types

Not Understanding the Context of 'this' Keyword: Arrow Functions vs Regular Functions

Explanation of the code Output

The right way to use this in an Arrow function

Code Explanation

Accidentally Creating Memory Leaks

Using Variable has Key in Object Wrongly

Correcting the Mistake

Explanation of the Solution

Conclusion

Scaling up your skill and escaping Tutorial Hell as a Frontend Developer.

What is Tutorial Hell?

Top resources for learning and understanding the basics of the front-end web technologies

The top resources for generating designs and ideas for front-end development projects

Conclusion

[My Submission For Innovative Idea Contribution Section of Deepgram x DEV Hackathon]

Introduction

My Deepgram Use-Case

Dive into Details

Conclusion

Arrays and Array Methods in JavaScript

Prerequisites

What is an Array?

Arrays In JavaScript

Creating Arrays

IsArray Method

Length Vs Index

Accessing Elements In an Array

Modify Elements In an Array

Array Methods

Pop Array Method (array.pop())

Push Array Method (array.push())

Shift Array Method (array.shift())

Unshift Array Method (array.unshift())

Slice Array Method (array.slice())

Splice Array Method (array.splice())

Map Array Method (array.map())

Filter Array Method (array.filter())

Reverse Array Method (array.reverse())

Concat Array Method (array.concat())

Join Array Method (array.join())

Sort Array Method (array.sort())

Includes Array Method (array.includes())

Some Array Method (array.some())

Every Array Method (array.every())

Findindex Array Method (array.findIndex())

Find Array Method (array.find())

ForEach Array Method (array.forEach())

Reduce Array Method (array.reduce())

Conclusion

Basics Of localStorage.

Prerequisites

What Is localStorage?

localStorage vs SessionStorage.

What Is Cookie?

Why Use localStorage?

Where Is localStorage?

Misusing the `let`, `var`, & `const` - Variables Scope

How does `var` differ from `let` and `const`?

The right way to use `this` in an Arrow function