Ok, before discussing other things. Let’s answer the main question that you may have in your mind and that is - What is PM2?

PM2 is a production-grade process manager for Node.js applications. It is designed to help manage, monitor, and keep applications running continuously. PM2 provides features such as automatic application restarts on failure, and comprehensive log management. This tool simplifies the deployment and management of Node.js applications by enabling efficient resource use and ensuring high availability, making it especially useful for managing web servers, APIs, and complex Node.js services in production environments.

Step 1: Installing PM2

Let's begin our journey by installing PM2. Open your terminal and run:

npm install -g pm2

This command installs PM2 globally on your system, making it available for all your projects.

Step 2: Running Your First Node.js File with PM2

Let's start with a simple Node.js file. Create a file named app.js with the following content:

console.log('Hello, PM2!');
setInterval(() => {
    console.log("'I'm still running!");
}, 5000);

Now, let's run this file with PM2:

pm2 start app.js

Congratulations! You've just started your first process with PM2.

Step 3: Running npm Scripts with PM2

As your projects grow more complex, you'll often use npm scripts defined in your package.json file to start your application. PM2 can manage these scripts just as easily as it manages individual files.

Let's use a Next.js application as an example:

1. First, ensure your package.json has a start script. For a Next.js app, it typically looks like this:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

2. To run the production version of your Next.js app with PM2, use the following command:

pm2 start npm --name "next-app" -- start

This tells PM2 to run the npm start command, which in turn runs next start for a Next.js application.

• pm2 start npm: Runs the npm command using PM2.

• --name "next-app": Names the process for easy identification.

• -- start: Passes start as an argument to npm, ensuring that npm runs the start script defined in your package.json.

3. If you want to run the development version, you can use:

pm2 start npm --name "next-app-dev" -- run dev

This runs npm run dev, which starts the Next.js development server.

4. You can apply the same principle to other npm scripts. For example, if you have a custom script called server:

pm2 start npm --name "custom-server" -- run server

This approach is not limited to Next.js. You can use it with any Node.js application that uses npm scripts, such as Express.js servers, React applications, or even custom Node.js scripts.

Step 4: Managing Multiple npm Scripts

For complex projects with multiple components, such as a MERN (MongoDB, Express, React, Node.js) stack application, you'll often need to manage several npm scripts simultaneously. PM2's ecosystem file feature is perfect for this scenario, allowing you to define and manage multiple processes in a single configuration file.

Create a file named ecosystem.config.js in your project root. This file will define all the processes PM2 should manage. Here's an expanded example:

module.exports = {
  apps: [
    {
      name: "next-app",
      script: "npm",
      args: "start",
      cwd: "./frontend",
      env: {
        NODE_ENV: "production",
        PORT: 3000
      },
      env_development: {
        NODE_ENV: "development",
        PORT: 3000
      }
    },
    {
      name: "express-server",
      script: "npm",
      args: "run server",
      cwd: "./backend",
      env: {
        NODE_ENV: "production",
        PORT: 5000
      },
      env_development: {
        NODE_ENV: "development",
        PORT: 5000
      }
    },
  ]
}

Let's break down the configuration options:

• name: A unique identifier for each process.

• script: The command to run. Use "npm" for npm scripts.

• args: Arguments to pass to the script. For npm scripts, use "start", "run server", etc.

• cwd: The working directory for the process. Useful when your frontend and backend are in separate directories.

• env: Environment variables for production.

• env_development: Environment variables for development.

To start all processes defined in your ecosystem file:

pm2 start ecosystem.config.js

To start processes in development mode:

pm2 start ecosystem.config.js --env development

This approach gives you the flexibility to manage complex applications with multiple components, all through PM2.

Step 5: Basic PM2 Commands

Now that we have a process running, let's learn some basic PM2 commands:

1. List running processes:

pm2 list

2. Stop a specific process::

pm2 stop next-app

3. Restart a specific process:

pm2 restart next-app

4. Delete a specific process from PM2:

pm2 delete next-app

5. Stop all processes:

pm2 stop all

6. Restart all processes:

 pm2 restart all

7. Delete all processes:

pm2 delete all

Step 6: Monitoring Your Application

1. PM2 provides a real-time monitoring tool. Try it out:

pm2 monit

This command opens an interface where you can see CPU usage, memory consumption, and logs for your running processes.

2. Display process details:

pm2 show next-app

This command provides detailed information about a specific process, including its configuration, metadata, and recent logs.

Step 7: Reloading Without Downtime

To update your application with zero downtime:

pm2 reload ecosystem.config.js

This command gracefully reloads all processes defined in your ecosystem file, ensuring that your application remains available during updates.

Step 8: Managing Logs

Logs are crucial for understanding what's happening in your application. Here's how to view them:

1. View logs:

pm2 logs

2. View logs for a specific application:

pm2 logs next-app

3. Clear log files:

pm2 flush

4. To view only error logs:

pm2 logs --err

Step 9: Automatic Restart on Crashes

One of PM2's most powerful features is its ability to automatically restart applications that crash or stop unexpectedly. This feature ensures high availability and reliability for your Node.js applications.

Here's how it works:

1. PM2 constantly monitors the processes it manages.

2. If a process crashes or exits with an error code, PM2 will automatically restart it.

3. This happens without any manual intervention, minimizing downtime.

Here are some key options that allow you to fine-tune the automatic restart behavior. These options can be added to your ecosystem.config.js file or specified when starting an application.

1. max_restarts: Sets the maximum number of restarts within a time frame.

2. min_uptime: Minimum uptime of the app to be considered started.

3. max_memory_restart: Restarts the app if it exceeds a specified memory limit.

4. restart_delay: Delay between automatic restarts (in milliseconds).

5. autorestart: Enables or disables the automatic restart feature.

Let's update the ecosystem.config.js file to include these options:

module.exports = {
  apps: [{
    name: "my-app",
    script: "app.js",
    max_restarts: 10,
    min_uptime: "5s",
    max_memory_restart: "200M",
    restart_delay: 4000,
    autorestart: true
  }]
}

In this configuration:

• The app will restart a maximum of 10 times.

• The app must run for at least 5 seconds to be considered successfully started.

• If the app uses more than 200MB of memory, it will be restarted.

• There will be a 4-second delay between restarts.

• Automatic restarts are enabled (this is the default, but we're explicitly setting it here).

You can also set these options when starting an app from the command line:

pm2 start app.js --max-restarts 10 --min-uptime 5000 --max-memory-restart 200M --restart-delay 4000

Example: Demonstrating Automatic Restart

Let's create a simple Node.js application that will crash periodically to demonstrate PM2's automatic restart feature.

1. Create a new file named crash-test.js with the following content:

    let count = 0;
   
    setInterval(() => {
      console.log(`Running for ${count} seconds`);
      count++;
   
      if (count % 10 === 0) {
        console.log("Simulating a crash...");
        throw new Error("Application crashed!");
      }
    }, 1000);
   

   This script will run for 10 seconds and then simulate a crash by throwing an error.

2. Create an ecosystem.config.js file with the following content:

    module.exports = {
      apps: [{
        name: "crash-test",
        script: "crash-test.js",
        max_restarts: 5,
        min_uptime: "3s",
        restart_delay: 2000
      }]
    }
   

3. Start the application with PM2:

    pm2 start ecosystem.config.js
   

4. Monitor the application:

    pm2 monit
   

   You'll see in the monitoring interface that every 10 seconds, the application crashes and PM2 automatically restarts it, with a 2-second delay between restarts.

5. To view the logs and see the crash and restart events:

    pm2 logs crash-test
   

   You'll see output similar to this:

    0|crash-test  | Running for 8 seconds
    0|crash-test  | Running for 9 seconds
    0|crash-test  | Simulating a crash...
    0|crash-test  | Error: Application crashed!
    0|crash-test  |     at Timeout._onTimeout (/path/to/crash-test.js:8:11)
    0|crash-test  |     at listOnTimeout (node:internal/timers:559:17)
    0|crash-test  |     at processTimers (node:internal/timers:502:7)
    PM2        | App [crash-test:0] exited with code [1] via signal [SIGINT]
    PM2        | App [crash-test:0] starting in -fork mode-
    0|crash-test  | Running for 0 seconds
    0|crash-test  | Running for 1 seconds
   

This example demonstrates how PM2 automatically restarts your application when it crashes, ensuring continuous operation even in the face of unexpected errors. The configuration options we've set limit the number of restarts to 5 and introduce a 2-second delay between restarts, helping to prevent rapid restart loops in case of persistent issues.

Real-world Example: MERN Stack

Here's how you might set up an ecosystem file for a typical MERN stack application:

module.exports = {
  apps: [
    {
      name: "react-frontend",
      script: "npm",
      args: "start",
      cwd: "./client",
      env: {
        NODE_ENV: "production",
        PORT: 3000
      }
    },
    {
      name: "express-backend",
      script: "npm",
      args: "run server",
      cwd: "./server",
      env: {
        NODE_ENV: "production",
        PORT: 5000,
        MONGODB_URI: "mongodb://localhost:27017/myapp"
      }
    },
    {
      name: "mongodb",
      script: "mongod",
      args: "--port 27017"
    }
  ]
}

This configuration starts a React frontend, an Express.js backend, and a MongoDB instance, all managed by PM2.

By leveraging PM2's ecosystem files, you can efficiently manage complex, multi-component applications, ensuring all parts of your stack start together and are monitored effectively. This approach simplifies deployment, improves maintainability, and gives you fine-grained control over each component of your application.

Conclusion

Congratulations! You've completed your journey from PM2 basics to advanced usage. You've learned how to start simple scripts, manage complex applications, handle logs, use environment variables, and even tackle a full MERN stack. Remember, PM2 is a powerful tool with many more features to explore. As you continue your development journey, don't hesitate to dive into the PM2 documentation for more advanced usage and optimizations.

Happy coding, and may your applications always stay up and running with PM2!

Next Cloudinary CldUploadWidget

Next Cloudinary has provided a widget called CldUploadWidget which creates a new instance of the Cloudinary Upload Widget which gives an easy way to add upload capabilities to the Next.js app.

Whether the files are stored locally, accessed via URLs, or retrieved from third-party sources like Google Drive, this component can handle them seamlessly. This broad integration means users can interact with various file sources without needing complex configurations on the server.

CldUploadWidget supports two options: signed and unsigned. These options allow us to control the security and restrictions.

Powerful Image Optimization with CldImage

Another component CldImage is an evolution of Next.js’s native <Image /> component. It goes beyond basic image rendering, allowing for advanced optimization, transformations, and real-time manipulations. What sets CldImage apart is how easily you can implement image effects like cropping, adding filters, or adjusting colors with just a few props. These enhancements don't just simplify image handling; they also significantly improve application performance by reducing image payloads and enhancing load times—important factors for SEO and user experience.

For example, with CldImage, you can add a blur effect, resize images, or apply custom transformations on the fly, which would otherwise require extensive backend processing or third-party image editing tools. Here’s a quick comparison of what makes CldImage a 'pro' version of the Next.js <Image /> tag:

• Automatic Image Optimization: Like Next.js’s image component, but with the added flexibility of Cloudinary’s extensive transformations.

• Advanced Effects: Supports filters, overlays, and cropping using Cloudinary’s powerful API.

• Real-Time Adjustments: You can tweak images without needing to re-upload or manipulate them manually.

This feature set is essential for developers dealing with dynamic content or user-generated uploads, where having tools to manage, optimize, and enhance images can dramatically reduce overhead.

In CIdImage component we can render responsive Images just by using the sizes prop. With the sizes prop, we can configure as we want the sizes for our application, Here is an example:

  import { CldImage } from 'next-cloudinary';

  <CldImage
    width="960"
    height="600"
    src="<Your Public ID>"
    sizes="(max-width: 768px) 100vw,
          (max-width: 1200px) 50vw,
          33vw"
    alt="Description"
  />

This would give us roughly full-width images on mobile, a 2-column layout on tablets, and a 3-column layout on desktop views.

For the above code, the output would look like:

<img
  alt="Turtle"
  loading="lazy"
  width="960"
  height="600"
  decoding="async"
  data-nimg="1"
  style="color:transparent"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  srcset="
    https://res.cloudinary.com/<Cloud Name>/image/upload/c_limit,w_256/f_auto/q_auto/v1/<Public ID> 256w,
    https://res.cloudinary.com/<Cloud Name>/image/upload/c_limit,w_384/f_auto/q_auto/v1/<Public ID> 384w,
    https://res.cloudinary.com/<Cloud Name>/image/upload/c_limit,w_640/f_auto/q_auto/v1/<Public ID> 640w,
    https://res.cloudinary.com/<Cloud Name>/image/upload/c_limit,w_750/f_auto/q_auto/v1/<Public ID> 750w,
    https://res.cloudinary.com/<Cloud Name>/image/upload/c_limit,w_828/f_auto/q_auto/v1/<Public ID> 828w,
    https://res.cloudinary.com/<Cloud Name>/image/upload/c_limit,w_1080/f_auto/q_auto/v1/<Public ID> 1080w,
    https://res.cloudinary.com/<Cloud Name>/image/upload/c_limit,w_1200/f_auto/q_auto/v1/<Public ID> 1200w,
    https://res.cloudinary.com/<Cloud Name>/image/upload/c_limit,w_1920/f_auto/q_auto/v1/<Public ID> 1920w,
    https://res.cloudinary.com/<Cloud Name>/image/upload/c_limit,w_2048/f_auto/q_auto/v1/<Public ID> 2048w,
    https://res.cloudinary.com/<Cloud Name>/image/upload/c_limit,w_3840/f_auto/q_auto/v1/<Public ID> 3840w
  "
  src="https://res.cloudinary.com/<Cloud Name>/image/upload/c_limit,w_3840/f_auto/q_auto/v1/<Public ID>"
>

Where the image is automatically generated on the fly with Cloudinary by passing in a URL parameter of w_<width>.

Additional Functionalities

Next Cloudinary is more than file uploading and image optimization. It offers a range of additional features, like video transformations, responsive media handling, and even watermarking, which makes it incredibly versatile. By directly leveraging Cloudinary’s core strengths in Next.js, you can build highly performant, scalable applications without worrying about intricate asset management.

A Common Mistake That I Made - Should Be Aware

When configuring Next Cloudinary in your project, one easy-to-overlook step involves setting the correct environment variables. Specifically, when you configure Cloudinary with the cloud name, API key, and secret key, make sure that the cloud_name and api_key values are prefixed with NEXT_PUBLIC_. This ensures that they are exposed to both the client and server environments in Next.js.

Here’s the correct way to set up the configuration:

cloudinary.config({
    cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
    api_key: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET,
});

If you skip this prefix for the cloud_name or api_key, you’ll likely encounter an error such as:

vbnetCopy codeError: A Cloudinary API Key is required for signed requests, please make sure your environment variable is set and configured in your environment.

In my case, I mistakenly forgot to add the NEXT_PUBLIC_ prefix to the API key, leading to the above error. Here's what my incorrect code looked like:

cloudinary.config({
    cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,       // Missing NEXT_PUBLIC_ prefix
    api_secret: process.env.CLOUDINARY_API_SECRET,
});

Ensuring that the environment variables are correctly prefixed with NEXT_PUBLIC_ is essential for avoiding such issues when using Cloudinary in both server-side and client-side code.

Note: If you don't use the NEXT_PUBLIC_ you will still be able to get the values ​​on the API route in next js. but according to my research and experience, Next Cloudinary expects the env variable to be with that prefix. So, even if you get the value on the console, still it won't work.

Resources

• https://next.cloudinary.dev/

• https://stackoverflow.com/questions/69743178/how-to-fix-cloudinary-error-must-supply-api-key

• https://community.cloudinary.com/discussion/742/missing-dependency-signed-upload-requires-an-api-key

Understand the error message

It is important to understand the error message Before discussing the reason and solution of the error. Understanding the error message can make our work much easier.

let's break down the error message word by word to understand its components:

The first word of the error message is "fatal". In the Git error message the word "fatal" basically means that the current operation cannot be completed, and you need to take corrective actions to resolve the issue.

"not possible to fast-forward" This segment explains the nature of the error. The message indicates that, under the current conditions, a fast-forward merge is not possible.

At last The term "aborting" indicates that Git is canceling the ongoing operation. In the context of this error, Git cannot proceed with the intended merge operation due to the inability to perform a fast-forward merge.

Now if we put it all together, the error message is saying that an issue has been encountered during an attempted merge operation. The desired fast-forward merge is not possible, and Git is aborting the operation.

In real life scenario, this is a common Git error, which usually pops up when you do a Git pull from a remote branch.

Note: A "fast-forward" merge in Git is a type of merge that occurs when the target branch (the branch being merged into) has not diverged from the source branch (the branch being merged) since the last commit and can be directly updated with the new commits from another branch.

By default git always try to perform fast-forward merge if the feature branch contains a sequence of commits that can be “joined” to the current main branch, then Git will “fast-forward” those commits into main, instead of merge.

A fast-forward merge is recommended to be used for complex conflicts. Instead, you should use other ways to merge them.

The reason for fast-forward is not possible

If there are Divergent Histories or Diverging branches then the fast-forward commit is not possible.

In the context of Git, divergent changes refer to alterations made independently on both the branch being merged (feature_branch) and the target branch (main).

For example: Let's imagine the situation where someone adds a commit to the remote branch and at the same time you add a commit to the local branch.

Now when you run git pull in this situation. Git will try to fast-forward those commits but it won't be able to do that and will run a 'fatal: not possible to fast-forward, aborting' error. Because there is an extra commit on the local branch that doesn’t exist on the remote branch.

In short, When two branches have separate commit histories that don't form a linear sequence, Git cannot perform a fast-forward merge.

Possible Fixes for the error

There is no magic fix for the "fatal: Not possible to fast-forward, aborting" error. Your approach depends on what you're aiming for.

Here are some common options:

Changing the default settings

One simple way we can apply to solve error is changing the default behavior of git prevent fast-forward merges and always create a new merge commit, even in cases where a fast-forward is possible.

To inspect the configuration and determine whether the pull.ff setting is configured to only, developers can use the following commands: Check pull.ff Setting:

git config pull.ff

If you don't get any output after running this command, it typically indicates that the pull.ff configuration setting is not defined in any of the configuration files. Git will then fall back to its default behavior for handling merges when pulling changes.

To change the pull.ff (git pull regarding fast-forward merges) configuration, you can use the following commands:

Remove Default Setting:

git config --unset pull.ff

Set pull.ff to Another Value (e.g., true for rebase):

git config pull.ff true

Adjusting the configuration might be necessary based on the project's requirements or the preferred merging strategy. If a project involves workflows where non-fast-forward merges are acceptable or necessary, developers might choose to configure pull.ff differently.

Making commit manually (rebase/merge)

Merge commits are a tremendously useful tool in Git, but they can also add a layer of complexity. That is why it is better to create a merge commit manually without depending on Git to automatically do it for you by changing the default settings.

let's see an example situation and how to solve it.

For example: You're working on a feature branch called feature/new-feature where you've made several commits to implement a new feature. Meanwhile, the main branch has also progressed with new commits from other team members. Now you decide to integrate the changes from the main branch into your feature/new-feature branch to ensure your feature is up-to-date with the latest changes. You run git pull origin main while on the feature/new-feature branch to pull changes from the main branch. but you got the error fatal: Not possible to fast-forward, aborting

We can solve this issue in two ways. Let's see both of them:

1. Rebase Your Commits:

   Rebasing is an important Git topic that deserves an entire article of its own. In short, It essentially rewrites the commit history by placing your changes on top of the latest changes from another branch. This helps to create a linear project history and can facilitate smoother integration of changes from different branches.

   

   If you want to maintain a clean and linear history without unnecessary merge commits, rebasing is a good choice.

   To solve the issue using rebase, first of all, Determine which branch you want to merge your changes into. This is typically the branch you want to update with your changes, such as the main.

   Use the git rebase command to reapply your local commits onto the target branch. Here's how you can do it:

    git checkout feature/new-feature git rebase main
   

   This command sequence switches to your feature branch (feature/new-feature) and then release your commits onto the main branch. If there are conflicts between your changes and the changes on the target branch (main), Git will pause the rebase process and prompt you to resolve these conflicts manually. You'll need to edit the conflicted files, stage the changes, and continue the rebase process until all conflicts are resolved.

   Once all conflicts are resolved, you can continue the rebase process by using the following command:

    git rebase --continue
   

   This command tells Git to continue applying the remaining commits in the rebase operation.

   Finally, push the rebased changes to the remote repository if applicable, using git push. Since you've rewritten history with the rebased commits, you may need to force-push if you've already pushed your feature branch to the remote repository:

    git push origin feature/new-feature --force
   

   However, force-pushing can be risky, especially if others are also working on the same branch. If someone else has pulled the branch before you force-push, their local copy of the branch will become out of sync with the remote repository, leading to potential confusion and conflicts.

2. Perform a Regular Merge:

   Regular merging creates a merge commit that explicitly shows the merge point and preserves the individual commit history of both branches.

   

   If maintaining the independence of branches and clearly documenting points of divergence and integration is important, regular merging is a better choice.

   Switch to the target branch you want to merge into Using git checkout or git switch

    git checkout feature/new-feature
   

   Use git merge to merge the source branch into the target branch. Git will create a merge commit to reconcile the changes.

    git merge source_branch
   

   If Git encounters conflicts during the merge, you'll need to resolve them manually.

   After resolving conflicts, commit the changes.

    git commit -m "Merge branch 'source_branch' into 'target_branch'"
   

   If you're working with a remote repository, don't forget to push the changes.

    git push origin target_branch
   

   these should solve the error.

   When faced with the "fatal: not possible to fast-forward, aborting" error in Git, developers need to explore the commit history and identify the divergence between their current branch and the target branch.

   To understand the divergence, utilize the following command to view the commit history of both your current branch and the target branch:

   git log --graph --oneline HEAD <some/branch>
   

   This command provides a graphical representation of the commit history, highlighting any divergent changes between the two branches.

Resources

• Git merge

• How I fixed “fatal: Not possible to fast-forward, aborting”

• Git warning: Pulling without specifying how to reconcile divergent branches is discouraged

1. Variable Redeclaration in the Same Block Scope: When you attempt to declare a variable with the same name again within the same block scope.

2. Conflict with TypeScript Global Typings: When your chosen variable names clash with TypeScript's global typings.

This article will delve into both of these reasons, providing detailed explanations and offering solutions to address this common TypeScript issue.

Variable Redeclaration in the Same Block Scope

When you have two variables with the same name within the same scope, it triggers the "Cannot redeclare block-scoped variable" error. This happens because, during declaration, a variable's value is stored in memory. If you try to declare another variable with the same name in the same scope, it attempts to save it in the same memory location, leading to an error.

Here's an illustrative example:

let myVar = "Hello";  

let myVar = "World"; // Error: Cannot redeclare block-scoped variable 'myVar'.   

console.log(myVar);

In this example, the error occurs when attempting to redeclare myVar because let variables have block-level scope. The inner myVar is perceived as a redeclaration within the same block, leading to the error.

Solution 1: Update the existing variable without re-declaring it

To avoid this error, a straightforward solution is to update the existing variable rather than declaring it anew.

If you're looking to assign a new value to the variable, the proper approach involves initially declaring it with let and subsequently changing its value without redeclaring.

let myVar = "Hello";  

myVar = "World"; 

console.log(myVar); // 👉️ "World"

Unlike const and let, variables declared with var can be redeclared.

var myVar = "Hello";  

var myVar = "World";

console.log(myVar); // 👉️ World

However, note that the var keyword behaves less intuitively and is generally advised against.

Solution 2: Use Different Variable Names

Another effective strategy to circumvent this error is to employ unique names for different variables.

Consider the following TypeScript snippet as an example:

let greeting = "Hello";

let newGreeting = "World"; // Introduce a distinct variable name.

console.log(greeting); // This is perfectly acceptable.
console.log(newGreeting); // This is perfectly acceptable.

By selecting different names for variables within the same block, you not only mitigate the error but also enhance the readability of your code. This practice aligns with best coding practices and facilitates collaboration among developers.

Remember, clear and unique variable names are not just about solving errors; they significantly contribute to the overall robustness and comprehensibility of your codebase.

Solution 3: Change the variable's scope

If you prefer maintaining identical names for variables, an alternative is to modify the scope of one of the variables. By declaring a variable with the same name in a nested block, you establish a clear distinction between the variable in the outer scope and the one in the inner scope.

Let's illustrate this using TypeScript:

let greeting = "Hello";
if (true) {
   let greeting = "World";    
    console.log(greeting); // World 
}  
console.log(greeting); // Hello

In this scenario, the two greeting variables coexist harmoniously due to their existence in different scopes. The initial greeting variable resides within the module's scope, while the subsequent one finds its scope within the block.

Crucially, this scope-adjusting approach isn't confined to if blocks; it can be applied to any nested block delineated by curly braces ({ and }). The syntax involving curly braces allows for the creation of distinct blocks.

Here is the same example, without the if statement.

let greeting = "Hello";
{
   let greeting = "World";    
    console.log(greeting); // World 
}  
console.log(greeting); // Hello

However, having variables with the same name in different scopes might confuse those reading your code. As a best practice, it's advisable to steer clear of such naming conflicts.

Note: Using the var keyword for this approach would modify the value of the outer variable. This exemplifies one of the many reasons why the usage of var is discouraged.

Conflict with TypeScript Global Typings

If you're encountering the "Cannot redeclare block-scoped variable" error, but you're certain there's no duplicate variable with the same name. likely, you've inadvertently attempted to modify the global scope.

Let's unravel this scenario through an illustration:

const name = "Robiul";
// Cannot redeclare block-scoped variable 'name'.

Wait a minute! There's just one variable named name in our file. What's causing the hiccup?

When TypeScript encounters a file devoid of import or export declarations, it categorizes it as a script rather than a module. It makes its contents available in the global scope and to other modules.

Therefore, when an attempt is made to declare a variable with a name already in use, TypeScript raises an error.

Here's a practical example showcasing how this error manifests:

// ⛔️ Error: Cannot redeclare block-scoped variable 'name'.ts(2451)
// lib.dom.d.ts(17330, 15): 'name' was also declared here.
const name = "Robiul Hasan";

In this instance, the name variable is declared somewhere in the typings for the DOM library, leading to a clash between the global type definition and the local variable declaration.

Solution 1: Convert your file to an ES module

To fix the error, convert your file to an ES module, like this:

let greeting = "Hello";

console.log(greeting); // Hello

export {};

By introducing this export statement, you've effectively signaled TypeScript to treat the file as a module, eliminating the error stemming from the clash between global scope and local variable declarations.

Note: If you are working in a project where each file is treated as a module rather than a script, you can adjust your TypeScript configuration to force module detection in your tsconfig.json.

Enabling moduleDetection with the value force instructs TypeScript to treat every file as a module, irrespective of whether it contains imports or exports.

Here's an example configuration snippet for your tsconfig.json:

{
  "compilerOptions": {
    "moduleDetection": "force"
  }
}

Solution 2: Use an immediately invoked function expression(IIFE)

Another effective solution is employing an Immediately Invoked Function Expression (IIFE). This technique involves encapsulating the code segment containing the variable within a function that executes as soon as it's defined.

Here's a practical illustration:

(function () {
  // ✅ works as expected
  let greeting = "Hello";
  console.log(greeting); // Hello //
})();

In this setup, the IIFE executes immediately upon script execution, ensuring the inner variable doesn't conflict with the global scope, providing a straightforward yet powerful resolution. This approach enhances code organization and maintains variable isolation.

Resources

• Cannot redeclare block-scoped variable in TypeScript [Fixed]

• Explained: Cannot redeclare block-scoped variable

• How to Fix the "Cannot redeclare block-scoped variable" Error in TypeScript

Today, we're delving into a fascinating topic that you may have encountered while using Facebook. You might have noticed a popup while crafting a post - Changes you made may not be saved - when attempting to leave the page midway through your creative process. It's a feature that has caught our attention, and today, I'll show you how to implement this in your React project using React Router Dom V6.

Now, you might be thinking, "Isn't this simple to implement using the browser's beforeUnload event?" Well, the answer is a bit more complex. While it's indeed straightforward for multi-page applications, it's a different story when it comes to single-page applications. The beforeUnload event behaves seamlessly on the home page but doesn't play as nicely on other pages.

Additionally, React Router Dom v5 provides a few methods, such as Prompt and unsafe_navigationcontext, for implementing this feature. However, these approaches are not applicable in the latest version of React Router Dom(v6). In this version, there's no direct, out-of-the-box solution for our task.

My journey with this feature began when I encountered these very challenges. I decided to dig deeper, and it took me more than one week to delve into the depths of research. What I found not only solved the problem but also expanded my understanding of React and React Router Dom.

So, let's dive into this journey together.

What is this article all about?

This article is not like the so-called tutorial on the internet also this article is not similar to my other articles where I try to share my knowledge on different programming topics with you guys.

In this article I will go one step further I will cover the topic but in a storic way.

Basically, In this article, I am going to share my experience of doing research on this in-depth and what I have learned. it's like a demonstration of my journey of finding the best way to implement the feature.

I will take you through the whole journey how it began, how I got the minimal solution, What were its pros and cons, how I found better solutions, and lastly how I ended up my the journey by finding the solution that I was looking for.

Also, I will try to explain to you some tricky parts of the code so that you can understand what's going on and why things are going this way.

Since it's an article, I will try to bind myself just inside react and react-router dom without talking about multiple things in the same place. So that it feels much more relevant to you but at the same time I will try to cover all the things as much as possible to give you a taste of my one week journey.

So, be patient and read the whole article I believe you will learn lots of new things from this article.

But those who are in a hurry or only interested in the ultimate way to implement the feature can read the portion directly going to that part. Because I will cover three ways of making this feature and the first two ways are not recommended to use in your code.

Actually, these may work for you but when you have the better solution then why would take the least?

That's why you are most welcome to read only the ultimate solution from Using unstable_useBlocker from React Router Dom section skipping other portions.

Too much talk, now let's get started.

What do we intend to make?

First let's have a look at what exactly we are going to make, because, before starting the actual implementation we must have a proper idea of what we intend to make.

So, let's see a demonstration of the project we are going to make.

We will make a simple react app which will have simple and minimal two pages. The first one will be our home page and the second one will be a subroute or subpage name profile page. All these two pages will have a nav section on top of these pages and a form section at the center of these pages.

Here are the visualizations of these two pages.

Home page:

Profile page:

Now on these pages when we enter something on the form input and if we try to leave the page we will get a prompt like this one:

This prompt will be a little different for the profile page. But the main thing to consider is we will get a prompt like this instead of directly leaving the page. and if we select the cancel button this will keep us on this page and if we select the leave button this will leave the page.

Also when we get back to the page our typed data should be here as we had left it. For our scenario on the image on the top we are leaving the page with the value 4 for the first input field and when we get back to this page again this 4 should be here in the same input field.

We will build this functionality on both pages in our application because as I already mentioned the home route and other routes don't work in the same way in react router dom.

Here is the live link to this project:

link: https://prevent-unsaved-changes-page-leave.vercel.app/

Starter code to start implementation

To start with this article you will have to get the starter setup of the project that we are going to make. I have hosted all code inside this repo.

Just clone the repo running this command on your terminal

git clone https://github.com/robiulhr/prevent-unsaved-changes-page-leave.git

then open the project on the terminal and change the directory to starter_code directory

cd ./starter_code

and then install all dependencies of the project running this command:

npm install

inside the starter_code the folder structure will look like this after running the npm install

├── node_modules
├── src
   ├── component
   |  └── Form.jsx
   |  └── Nav.jsx
   ├── pages
   |  └── Home.jsx
   |  └── Profile.jsx
   ├── reducer
   |  └── formReducer.jsx
   ├── main.jsx
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── style.css
├── vite.config.js

If everything is alright then start the project by running this command:

npm run dev

That's it you are ready to go with the rest article.

beforeunload event to prevent page leave from Home page

If you search on the internet about the ways of preventing page leave the way you will find most of the answers is by using beforeunload. This is the easiest and most widely used way of preventing page leave on a website.

So, let's try to implement this in our project.

replace the whole code of Home.jsx the file with this code:

// Home.jsx
import "../../style.css";
import Nav from "../component/Nav";
import Form from "../component/Form";
import { useEffect, useState, useReducer, useCallback } from "react";
import formReducer from "../reducer/formReducer";
function Home() {
  const [dirty, setDirty] = useState(false);
  const [formData, dispatch] = useReducer(formReducer, {
    name: "",
    email: "",
  });
  const beforeunloadHandler = useCallback(
    function (e) {
      if (dirty) {
        e.preventDefault();
        e.returnValue = "";
      }
    },
    [dirty]
  );

  useEffect(() => {
    window.addEventListener("beforeunload", beforeunloadHandler);
    return () => {
      window.removeEventListener("beforeunload", beforeunloadHandler);
    };
  }, [beforeunloadHandler]);
  return (
    <>
      <Nav />
      <main>
        <h1>Welcome to Home Page</h1>
        <Form formData={formData} setDirty={setDirty} dispatch={dispatch} />
      </main>
    </>
  );
}

export default Home;

And the whole code of Form.jsx file with this code:

export default function Form ({setDirty,formData, dispatch}) {
 function nameChangeHandler(e) {
    dispatch({ type: "change_name", name: e.target.value });
    setDirty(true)
  }
  function emailChangeHandler(e) {
    dispatch({ type: "change_email", email: e.target.value });
    setDirty(true)    
  }

  return (
    <>
      <div className='form-wrapper'>
        <form>
          <div>
             <input onChange={nameChangeHandler} value={formData.name} type="text" placeholder="name" />
            <input onChange={emailChangeHandler} value={formData.email} type="email" placeholder="email" />
            <button type='submit'>Submit</button>
          </div>
        </form>
      </div>
    </>
  )
}

What are we doing here is that we have defined a state using the useState hook and we named it dirty. Then we are passing the setter function or state updater function setDirty to the form component. Depending on the dirty state value true or false we are adding the beforeunload event to the home page inside the useEffect hook which will run every time the dirty state gets updated.

Inside the Form page, we receive the setDirty function, after that, we use this function inside the nameChangeHandler and emailChangeHandler function so that it's the value of dirty state gets true when users write something on the form input fields.

Now run the project and write something on the home page from inputs.

then try to leave the page using the browser back button

or manually typing on the URL bar

you won't be able to leave the page instead you will get a popup like this.

Even if you want to close the tab by clicking on the cross button

you won't be able to do that too.

Also if you want to reload the page you will get a similar kind of error.

So, at this point, we have been able to make the feature workable at some point. we haven't yet thought of links on the page which are in the nav section. Because at this point our app can't prevent page leave for clicking on these links.

We will work with these things in future sections but now our concern is whatever we have achieved at this point these should work on every page of our application.

So, let's check it for other routes of this application. In our case which is the Profile page.

beforeunload event to prevent page leave from subroutes

Now, to implement the same feature replace the existing code of the Profile.jsx page inside the pages directory with the code below:

// Profile.jsx
import "../../style.css";
import Nav from "../component/Nav";
import Form from "../component/Form";
import { useCallback, useEffect, useState, useReducer } from "react";
import formReducer from "../reducer/formReducer";

function Profile() {
  const [dirty, setDirty] = useState(false);
  const [formData, dispatch] = useReducer(formReducer, {
    name: "",
    email: "",
  });
  const beforeunloadHandler = useCallback(
    function (e) {
      if (dirty) {
        e.preventDefault();
        e.returnValue = "";
      }
    },
    [dirty]
  );

  useEffect(() => {
    window.addEventListener("beforeunload", beforeunloadHandler);
    return () => {
      window.removeEventListener("beforeunload", beforeunloadHandler);
    };
  }, [beforeunloadHandler]);

  return (
    <>
      <Nav />
      <main>
        <h1>Welcome to Profile Page</h1>
        <Form setDirty={setDirty} formData={formData} dispatch={dispatch} />
      </main>
    </>
  );
}

export default Profile;

Now run the application and you will see it's working as same as the home page.

But the problem is if we try to use the browser back button to navigate away, it won't work for the profile page as it does for the home page.

Not only that even if you navigate to the profile page from the home page and then come back to the home page using the navigation link which is on the nav bar instead of using the browser back button. And then try out the feature on the home page. You will face the same problem on the home page too.

And from here problems start...

Now the question begins that it was working fine for the home page when we entered the home page directly on an empty tab but why it's not working now and also why it's not working on the profile page or more specifically on subpages?

Why beforeunload doesn't work properly on subpages?

To answer this question first we have to understand how the web page navigation works how it differs in single-page applications also how beforeunload event fits on both multipage and single-page applications.

Let's start with very basic

When we browse the internet you type a URL or click a link, and a new web page loads in your browser. But what's happening behind the scenes?

When you enter a website, your web browser creates a record of this action in its history. This history is like an itinerary of your online journey. The initial entry into a website becomes the starting point in your browsing history. At this point, browser history doesn't have any previous record since you have started with a fresh empty tab.

Now, as you navigate through the website, each page or state you visit is added to your browser's history.

For every new page, a new entry is pushed into the browser's history. This entry contains information about the URL or location of the page you're visiting.

The Back and Forward buttons in your browser allow you to move between pages. Clicking Back retrieves the previous entry from the history and loads that page. Forward takes you to the next entry, effectively reversing the Back action.

Think of your browser's history as a stack or list of pages. Each new page visited is added to the top of the stack.

Clicking Back pops the top page off the stack, loading the previous one.

Forward takes you forward in the stack.

Note: Browser's history mechanism doesn't necessarily use a stack data structure in a straightforward sense, but its behavior is conceptually similar to a stack.

Now let's understand what is the role of beforeunload event on this journey.

beforeunload event fires when the page gets unloaded. as we can feel this thing with the name of this event. it's a pretty self-explanatory name beforeunload

The beforeunload event plays a vital role in this navigation process.

In the multipage application, every time a user tries to navigate to another page server renders a new page and since the browser renders a new page it's obvious it has unloaded the existing page and here the beforeunload event gets executed. that's why when users attempt to leave a page close a tab or navigate away from a page, the browser triggers the beforeunload event.

On the other hand single page application works that way in that it gets loaded when we first time visit the website and it gets unloaded when we leave the application. between these whenever we change routes browser does not unload anything. it's just making some API requests to get data and applying JavaScript to show this data. no new page is getting loaded. Since changing the route is not unloading anything that's why beforeunload event is not firing. That's the reason inside single page application beforeunload event doesn't work except on the home page.

And same thing happens for the home page if we are not in the first history state that means if we visit another page and come back to the home page by navigating from another page and trying to back to the previous page in that case the beforeunload event won't fire anymore.

In this scenario, our browser's history has some previous page to navigate and that's why it's not leaving the website or unloading anything here it's just navigating us to its previous route.

In a short word, the beforeunload event only fires when any page is getting unloaded. since when we first time visiting a website and then try to go back we are unloading the page here. this thing will work the same way even if we visit the profile directly from an empty tab instead of navigating from other pages to it. On the other hand, the home page beforeunload event won't fire if we navigate to it from another page instead of directly entering the home page in a new tab.

I believe you are now clear about why beforeunload event doesn't work for other routes or sub-pages

To make the explanation more realistic and put some weight on my words let's have a look at how Facebook handles this issue. That will make us more clear on that.

How does Facebook prevent users from leaving the page?

Let's visit Facebook's home page and try to see a demonstration of the feature that we are working on.

Create a new empty tab on your browser and visit Facebook typing facebook.com on the URL bar.

Make sure you are logged in and navigating to the home page https://www.facebook.com/

now click on the post creation section

A popup will open to create a post. Write something random on the popup.

Now click on the browser back button without clicking anywhere else.

you will get an alert like this:

Now go to your profile page clicking on the profile button left side of the page.

And inside the profile page do the same as we did on the home page.

Here we will get an alert that looks like this:

Did you notice that Facebook uses different alert popups to handle the same feature for different pages?

It's not like they intentionally doing this. Actually, they are using two different ways to handle these scenarios and that is why the alert popup is different. In the first scenario, they are using the beforeunload event and that's why the alert is the browser's default popup.

On the other hand in the second scenario, they are using a different approach and used their custom popup to show the alert and we will discuss this in brief in upcoming sections.

Also now if you come back to the home page of Facebook from the profile page by clicking the link instead of the browser back button and try the same thing that we tried before on the home page. You will see the custom alert of Facebook instead of the default alert we had seen before. Feel free to experiment with this too.

And I believe that makes my point clear that beforeunload event doesn't work the same way in other routes of single page application as it works for the home page.

now you may be thinking if that's the case how we can make this feature for other routes?

To do that there are a few ways. We will see them.

using the popstate event

The first approach we will use is using the popstate event.

This procedure involves several modifications and additions to our project's code. Please remain patient and carefully follow the provided instructions. This will solve all problems and also will implement the Unsubmitted Data Preservation using the browser's localStorage.

Upon completion, you'll witness the enchantment.

1. Set up the starter code again. Follow the instructions from Starter code to start implementation section

2. Create a directory named hooks for custom hooks inside the src directory. Then inside this hooks directory create a file named usePrompt.jsx

   Paste this code below to the usePrompt.jsx file:

    import { useEffect, useContext } from "react";
    import { PopstateContext } from "../context/PopstateContext";
   
    function usePrompt(dirty, popStateHandler) {
      let prevPopStateHandler = useContext(PopstateContext);
      useEffect(() => {
        if (dirty) {
          prevPopStateHandler.current && window.removeEventListener("popstate", prevPopStateHandler.current);
          prevPopStateHandler.current = popStateHandler;
          window.addEventListener("popstate", popStateHandler, false);
        }
      }, [dirty]);
    }
   
    export default usePrompt;
   

   This usePrompt hook is designed to manage the event listeners related to the popstate event, which is triggered when the user navigates through the browser history. It does this based on the condition of whether there are unsaved changes (dirty).

3. Now Create a new file inside the component directory named FormPrompt.jsx and paste this code inside the file:

    // FormPrompt.jsx
    import { useCallback, useContext } from "react";
    import { useNavigate, useBeforeUnload, useLocation } from "react-router-dom";
    import usePrompt from "../hooks/usePrompt";
    import { PopstateContext } from "../context/PopstateContext";
   
    export default function FormPrompt({ dirty, formData }) {
      let prevPopStateHandler = useContext(PopstateContext);
      const location = useLocation();
      const navigate = useNavigate();
      const currentRoute = window.location.pathname;
      const popStateHandler = useCallback(
        function (e) {
          // The popstate event is fired each time when the current history entry changes.
          const confirmValue = confirm("You pressed a Back button! Are you sure?!");
          if (confirmValue) {
            prevPopStateHandler.current && window.removeEventListener("popstate", prevPopStateHandler.current);
            prevPopStateHandler.current = null;
            localStorage.setItem(location.pathname, JSON.stringify(formData));
            return true;
          } else {
            // Stay on the current page.
            navigate(currentRoute);
            if (prevPopStateHandler.current) {
              window.removeEventListener("popstate", prevPopStateHandler.current);
              window.addEventListener("popstate", prevPopStateHandler.current, false);
            }
            return false;
          }
        },
        [prevPopStateHandler.current]
      );
      usePrompt(dirty, popStateHandler);
      useBeforeUnload(
        useCallback(
          (event) => {
            if (dirty) {
              event.preventDefault();
              event.returnValue = "";
            }
          },
          [dirty]
        ),
        { capture: true }
      );
      return null;
    }
   

   This code defines a React component (FormPrompt) that uses hooks from React Router and custom hooks (useBeforeUnload, usePrompt). The component manages browser history events, prompts the user before leaving the page with unsaved changes, and handles form data persistence.

4. Create another file within the component directory named CustomLink.jsx.

   Paste the following code into it:

    import { useContext } from "react";
    import { Link, useLocation, useNavigate } from "react-router-dom";
    import { PopstateContext } from "../context/PopstateContext";
    export default function CustomLink({ children, ...props }) {
      const { onClick: passedClickHandler, to: path, formData, ...slicedProps } = props;
      const navigate = useNavigate();
      const prevPopStateHandler = useContext(PopstateContext);
      const location = useLocation();
      return (
        <Link
          onClick={(e) => {
            e.preventDefault();
            if (prevPopStateHandler.current) {
              let navigateTo;
              navigateTo = prevPopStateHandler.current();
              if (navigateTo) {
                navigate(path);
                prevPopStateHandler.current = null;
                localStorage.setItem(location.pathname, JSON.stringify(formData));
              }
            } else {
              navigate(path);
            }
            passedClickHandler?.(e);
          }}
          {...slicedProps}
        >
          {children}
        </Link>
      );
    }
   

   This code establishes a custom link (CustomLink) component similar to React Router DOM's Link component. This custom link is necessary because the React Router DOM's Link component doesn't provide a direct means to manage the popstate event. Since a custom popstate event is in use, this custom link is created to manually trigger the event when a user clicks on a navigation link.

5. To apply this CustomLink to our project we need to modify the Nav bar's code.

   replace the code of Nav.jsx with this code below:

    import CustomLink from "./CustomLink";
    export default function Nav({formData}) {
      return (
        <nav>
          <CustomLink formData={formData} to={"/"}>Home</CustomLink>
          <CustomLink formData={formData} to={"/profile"}>Profile</CustomLink>
        </nav>
      );
    }
   

6. Create another directory named context within the src directory, and within it, generate a file named PopstateContext.jsx. Copy and paste the ensuing code into PopstateContext.jsx:

   paste this code inside the PopstateContext.jsx file:

    import { createContext, useRef } from 'react'
   
    export const PopstateContext = createContext(null)
   
    export default function PopstateProvider ({ children }) {
      const prevPopStateHandler = useRef(null)
      return (
        <PopstateContext.Provider value={prevPopStateHandler}>
          {children}
        </PopstateContext.Provider>
      )
    }
   

   This code initiates a context to store the popstate event reference, making it globally accessible throughout the application. This is vital for dynamically managing the addition and removal of the popstate event across the entire project as per specific requirements.

7. To add this context to the app replace the main.jsx file

    import React from "react";
    import ReactDOM from "react-dom/client";
    import Home from "./pages/Home";
    import Profile from "./pages/Profile.jsx";
    import FormContextProvider from "./context/PopstateContext";
   
    import { createBrowserRouter, RouterProvider } from "react-router-dom";
    const router = createBrowserRouter([
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/profile",
        element: <Profile />,
      },
    ]);
   
    ReactDOM.createRoot(document.getElementById("root")).render(
      // <React.StrictMode>
      <FormContextProvider>
        <RouterProvider router={router} />
      </FormContextProvider>
      // </React.StrictMode>
    );
   

8. Create another custom hook inside the hooks directory named useFormData.jsx

    import { useEffect, useContext } from "react";
    import { useLocation } from "react-router-dom";
    import { PopstateContext } from "../context/PopstateContext";
    export default function useFormData(formData, setDirty, dispatch) {
      const prevPopStateHandler = useContext(PopstateContext);
      const location = useLocation();
      // restore the saved data from local storage
      useEffect(() => {
        const prevData = JSON.parse(localStorage.getItem(location.pathname));
        if (prevData) {
          dispatch({ type: "restore", data: prevData });
          localStorage.removeItem(location.pathname);
        }
      }, []);
   
      // mark the form as dirty if there is form value otherwise mark as not dirty
      useEffect(() => {
        if (formData.name === "" && formData.email === "") {
          setDirty(false);
          prevPopStateHandler.current && window.removeEventListener("popstate", prevPopStateHandler.current);
          prevPopStateHandler.current = null;
        } else setDirty(true);
      }, [formData]);
    }
   

   This hook manages the form data within localStorage when the user visits the page, and it also handles the popstate event based on changes in formData.

Now if we add this FormPrompt component and the useFormData hook inside the project's pages these will solve all the issues that we were facing.

Let's try it now on the profile page:

import { useReducer, useState } from "react";
import "../../style.css";
import Nav from "../component/Nav";
import Form from "../component/Form";
import FormPrompt from "../component/FormPrompt";
import formReducer from "../reducer/formReducer";
import useFormData from "../hooks/useFormData";
function Profile() {
  const [dirty, setDirty] = useState(false);
  const [formData, dispatch] = useReducer(formReducer, {
    name: "",
    email: "",
  });
  useFormData(formData, setDirty, dispatch);
  return (
    <>
      <FormPrompt dirty={dirty} formData={formData} />
      <Nav formData={formData} />
      <main>
        <h1>Welcome to Profile Page</h1>
        <Form formData={formData} dispatch={dispatch} />
      </main>
    </>
  );
}

export default Profile;

Now run the app and check the feature. This code will do the same for the rest things but we won't see the issues that we were encountering before and preserve the data on localStorage:

Now let's apply the same for the Home page. replace the Home.jsx file code with this code below:

import { useReducer, useState } from "react";
import "../../style.css";
import Nav from "../component/Nav";
import Form from "../component/Form";
import FormPrompt from "../component/FormPrompt";
import formReducer from "../reducer/formReducer";
import useFormData from "../hooks/useFormData";
function Home() {
  const [dirty, setDirty] = useState(false);
  const [formData, dispatch] = useReducer(formReducer, {
    name: "",
    email: "",
  });
  useFormData(formData, setDirty, dispatch);
  return (
    <>
      <FormPrompt dirty={dirty} formData={formData} />
      <Nav formData={formData} />
      <main>
        <h1>Welcome to Home Page</h1>
        <Form formData={formData} dispatch={dispatch} />
      </main>
    </>
  );
}

export default Home;

Now run the application again, now both the home and profile pages should solve the issues and also preserve the data on localStorage

using the history npm package

In the previous section, we have seen how can we make the feature workable for all situations using popstate event But there is another way that we can use without using popstate event.

Here we will use a npm package name history this is a very popular and widely used package and even React router dom also use this package behind the scene. So, you can imagine how popular and authentic this package is.

And the interesting thing is we don't need to start from the beginning to do that. whatever code we have written so far few of them are still relevant also the folder structure will be totally the same. We just need to make some changes to a few files.

1. First of all, let's install the package in our code:

    npm install history
   

2. Now replace the usePromp.jsx file code with this code:

    import { useEffect, useContext } from "react";
    import { NavigationRef } from "../context/NavigationRefContext";
    import { createBrowserHistory } from "history";
   
    export default function usePrompt(dirty,formData, locationChangeHandler) {
      let { unblockNavigationRef, blockHandlerRef } = useContext(NavigationRef);
      const history = createBrowserHistory();
      useEffect(() => {
        if (dirty) {
          if (unblockNavigationRef.current) unblockNavigationRef.current();
          unblockNavigationRef.current = history.listen(locationChangeHandler);
          blockHandlerRef.current = locationChangeHandler;
        }
      }, [dirty, formData]);
    }
   

3. Then replace the useFormData.jsx file code:

    import { useEffect } from "react";
    import { useLocation } from "react-router-dom";
    export default function useFormData(formData, setDirty, dispatch) {
      const location = useLocation();
      // restore the saved data from local storage
      useEffect(() => {
        const prevData = localStorage.getItem(location.pathname);
        if (prevData && prevData !== "undefined") {
          const parsedData = JSON.parse(prevData);
          dispatch({ type: "restore", data: parsedData });
          localStorage.removeItem(location.pathname);
        }
      }, []);
   
      // mark the form as dirty if there is form value otherwise mark as not dirty
      useEffect(() => {
        if (formData.name !== "" || formData.email !== "") {
          setDirty(true);
        }
      }, [formData]);
    }
   

4. Then replace the FormPrompt.jsx file code with this code:

    // FormPrompt.jsx
    import { useCallback, useContext, useEffect } from "react";
    import { useNavigate, useBeforeUnload, useLocation } from "react-router-dom";
    import usePrompt from "../hooks/usePrompt";
    import { NavigationRef } from "../context/NavigationRefContext";
   
    export default function FormPrompt({ dirty, formData }) {
      let { unblockNavigationRef, blockHandlerRef } = useContext(NavigationRef);
      const location = useLocation();
      const navigate = useNavigate();
      const currentRoute = location.pathname;
      const locationChangeHandler = useCallback(
        function (transition) {
          if (transition.action === "POP") {
            const confirmValue = confirm("are you sure?");
            if (confirmValue) {
              unblockNavigationRef.current?.();
              unblockNavigationRef.current = null;
              blockHandlerRef.current = null;
              localStorage.setItem(currentRoute, JSON.stringify(formData));
              return true;
            } else {
              localStorage.setItem(currentRoute, JSON.stringify(formData));
              navigate(currentRoute);
              return false;
            }
          }
        },
        [formData, unblockNavigationRef.current, blockHandlerRef.current]
      );
   
      usePrompt(dirty, formData, locationChangeHandler);
      useBeforeUnload(
        useCallback(
          (event) => {
            if (dirty) {
              event.preventDefault();
              event.returnValue = "";
            }
          },
          [dirty]
        ),
        { capture: true }
      );
      return null;
    }
   

5. Replace the CustomLink.jsx file code:

    import { useContext } from "react";
    import { Link, useLocation, useNavigate } from "react-router-dom";
    import { NavigationRef } from "../context/NavigationRefContext";
    export default function CustomLink({ children, ...props }) {
      const { onClick: passedClickHandler, to: path, formData, ...slicedProps } = props;
      const navigate = useNavigate();
      const { unblockNavigationRef, blockHandlerRef } = useContext(NavigationRef);
      const location = useLocation();
      return (
        <Link
          onClick={(e) => {
            e.preventDefault();
            if (unblockNavigationRef.current && blockHandlerRef.current) {
              const confirmed = confirm("are you sure?");
              if (confirmed) {
                navigate(path);
                unblockNavigationRef.current();
                unblockNavigationRef.current = null;
                blockHandlerRef.current = null;
                localStorage.setItem(location.pathname, JSON.stringify(formData));
              }
            } else {
              navigate(path);
            }
            passedClickHandler?.(e);
          }}
          {...slicedProps}
        >
          {children}
        </Link>
      );
    }
   

6. Inside the context folder rename the PopstateContext.jsx file to NavigationRefContext.jsx and replace the code inside it:

    import { createContext, useRef } from 'react'
   
    export const NavigationRef = createContext(null)
   
    export default function NavigationRefProvider ({ children }) {
      const unblockNavigationRef = useRef(null)
      const blockHandlerRef = useRef(null)
      return (
        <NavigationRef.Provider value={{unblockNavigationRef,blockHandlerRef}}>
          {children}
        </NavigationRef.Provider>
      )
    }
   

7. Inside the main.jsx file, update the context file path

    // remove this line
    import FormContextProvider from "./context/PopstateContext";
   
    // add this line
    import FormContextProvider from "./context/NavigationRefContext.jsx";
   

We don't need to do anything new for the pages the setup we did before is still applicable.

Now run the application and you will see that your application is working as it was before.

Note: These two ways work well but these are not good enough to rely on also there are situations where they may won't work properly so I don't recommend using these on your project.

But you can explore these ways just for fun and enrich your knowledge.

Using unstable_useBlocker from React Router Dom

Now the way I am going to discuss is the ultimate solution that I have found to make this feature in a much easier way.

Note: The solution I am talking about is not authorized by the authority or not recommended by the industry standard but it can make the work done properly.

Also, this unstable_useBlocker is not documented in the documentation but it exists on the react router dom source code.

To apply this way we need to start from the beginning which means from the starter code I have provided. Because this way is much easier to implement in comparison to the other two ways we have discussed before. Much code is irrelevant now.

so it's better to start from the beginning. Also, this will help to follow the section even if are just reading this section instead of reading the whole article.

1. Set up the starter code again. Follow the instructions from Starter code to start implementation section

2. Create a directory named hooks for custom hooks inside the src directory. Then inside this hooks directory create a file named usePrompt.jsx

   Paste this code below to the usePrompt.jsx file:

    import { useEffect, useRef } from "react";
    import { unstable_useBlocker as useBlocker } from "react-router-dom";
   
    function usePrompt(onLocationChange, hasUnsavedChanges) {
      const blocker = useBlocker(hasUnsavedChanges ? onLocationChange : false);
      const prevState = useRef(blocker.state);
   
      useEffect(() => {
        if (blocker.state === "blocked") {
          blocker.reset();
        }
        prevState.current = blocker.state;
      }, [blocker]);
    }
    export default usePrompt;
   

   This usePrompt hook is designed to manage the blocking behavior during navigation changes based on whether there are unsaved changes in the application. This hook plays a similar role as the usePrompt hooks we used in the previous two ways but it uses the unstable_useBlocker instead of popstate event or history npm package.

3. Now Create a new file inside the component directory named FormPrompt.jsx and paste this code inside the file:

    import { useCallback } from "react";
    import { useBeforeUnload, useLocation } from "react-router-dom";
    import usePrompt from "../hooks/usePrompt";
   
    const stepLinks = ["/", "/profile"];
    const FormPrompt = ({ dirty, formData }) => {
      const location = useLocation();
      const onLocationChange = useCallback(
        ({ nextLocation }) => {
          let confirmValue = false;
          if (stepLinks.includes(nextLocation.pathname) && dirty) {
            confirmValue = !window.confirm("You have unsaved changes, are you sure you want to leave?");
          }
          if (!confirmValue) localStorage.setItem(location.pathname, JSON.stringify(formData));
          return confirmValue;
        },
        [dirty, formData]
      );
   
      usePrompt(onLocationChange, dirty);
      useBeforeUnload(
        useCallback(
          (event) => {
            if (dirty) {
              event.preventDefault();
              event.returnValue = "";
            }
          },
          [dirty]
        ),
        { capture: true }
      );
   
      return null;
    };
   
    export default FormPrompt;
   

   This FormPrompt component manages navigation prompts and handles unsaved changes during navigation events, offering a confirmation dialog to users.

4. Create another custom hook inside the hooks directory named useFormData.jsx and paste this code:

    import { useEffect } from "react";
    import { useLocation } from "react-router-dom";
    export default function useFormData(formData, setDirty, dispatch) {
      const location = useLocation();
      // restore the saved data from local storage
      useEffect(() => {
        const prevData = JSON.parse(localStorage.getItem(location.pathname));
        if (prevData) {
          dispatch({ type: "restore", data: prevData });
          localStorage.removeItem(location.pathname);
        }
      }, []);
   
      // mark the form as dirty if there is form value otherwise mark as not dirty
      useEffect(() => {
        if (formData.name === "" && formData.email === "") {
          setDirty(false);
        } else setDirty(true);
      }, [formData]);
    }
   

   This useFormData hook manages the form data, restores it from localStorage when the user visits the page, and tracks changes to mark the form as dirty or not dirty accordingly.

Now we are done with the feature implementation let's apply it to the project's pages.

1. Replace the Home.jsx file's code:

    import { useReducer, useState } from "react";
    import "../../style.css";
    import Nav from "../component/Nav";
    import Form from "../component/Form";
    import FormPrompt from "../component/FormPrompt";
    import useFormData from "../hooks/useFormData";
    import formReducer from "../reducer/formReducer";
    function Home() {
      const [dirty, setDirty] = useState(false);
      const [formData, dispatch] = useReducer(formReducer, {
        name: "",
        email: "",
      });
      useFormData(formData, setDirty, dispatch);
      return (
        <>
          <FormPrompt formData={formData} dirty={dirty} />
          <Nav />
          <main>
            <h1>Welcome to Home Page</h1>
            <Form formData={formData} dispatch={dispatch} />
          </main>
        </>
      );
    }
   
    export default Home;
   

2. Replace the Profile.jsx file's code:

    import { useReducer, useState } from "react";
    import "../../style.css";
    import Nav from "../component/Nav";
    import Form from "../component/Form";
    import FormPrompt from "../component/FormPrompt";
    import useFormData from "../hooks/useFormData";
    import formReducer from "../reducer/formReducer";
   
    function Profile() {
      const [dirty, setDirty] = useState(false);
      const [formData, dispatch] = useReducer(formReducer, {
        name: "",
        email: "",
      });
      useFormData(formData, setDirty, dispatch);
      return (
        <>
          <FormPrompt formData={formData} dirty={dirty} />
          <Nav />
          <main>
            <h1>Welcome to Profile Page</h1>
            <Form formData={formData} dispatch={dispatch} />
          </main>
        </>
      );
    }
   
    export default Profile;
   

Now run the application again and see the magic.

Conclusion

Alerts for Unsaved Changes and Unsubmitted Data Preservation are not commonly implemented features. You might not encounter many situations where you'll need to incorporate these into your application. but these are cool features to know as a developer.

I started playing around with these as an experiment, and it turned into a fun learning experience.

The motive behind sharing this article is to pass on the enthusiasm and knowledge I gathered while working on these unique features. I hope you had a similar experience. Feel free to express your thoughts in the comments, and if you have any questions, don't hesitate to ask.

All the code of this article you will find in this GitHub repo

Happy coding :)

Resources

• Example implementation of usePrompt and React Router v5's <Prompt> with unstable_useBlocker

• Display Warning for Unsaved Form Data on Page Exit

• Disabling back button in React with react-router v5

• Prevent navigation with React router v6

Hello developers, hope you're all doing great. I've noticed a common challenge among many aspiring developers – the quest for unique project ideas to apply their programming skills. Beginners often find themselves at a crossroads, having learned the fundamental concepts and tools but struggling to find truly distinctive project ideas.

The internet is flooded with project ideas, but most of them are similar, done, and redone by countless developers. You search online, and every "best React.js project ideas" list gives you déjà vu.

It's like, "Come on, give me something different!"

Now, imagine this scenario: Hundreds of developers undertake the same project. How do you stand out? How do you showcase your unique abilities? How do you show that you've got that special sauce, that secret ingredient?

Well, it's not about reinventing the wheel every time. Sometimes, it's the little tweaks that turn something ordinary into something extraordinary. Not every project needs to be groundbreaking; sometimes, the magic is in the refinement and personal touch you bring to the table.

The trick is in taking a project and making it uniquely yours. You don't have to reinvent the wheel with every project. Sometimes, the real magic happens when you put your own spin on something familiar. it's about taking a common project and putting your own spin on it, making it uniquely yours.

Recruiters understand this reality. They don't expect every candidate to present an entirely unique project. What they look for is the ability to innovate, to turn something common into something special. Demonstrating your knack for improvement and creativity on a familiar project is equally valuable.

So, let's explore how you can transform a simple and ubiquitous project into something truly unique. And to keep it real, we're going to do this with a classic: the Tic Tac Toe game.

Note: Before we dive in, I want to make something crystal clear. I'm not here to walk you through the code. What I am going to do is share some feature ideas that can turn a simple Tic Tac Toe into something totally unique. The goal is for you to take these ideas and apply them to other projects as well.
While my primary focus in this article is on frontend development, it's important to note that these techniques can be adapted for backend projects as well.

Basic features

To make the article more interesting and inspiring I have already made a version of tic tac toe using react and react router dom.

let me spill the beans on the secret sauce that turned my Tic Tac Toe from ordinary to extraordinary.

1. A Game of Choices: More Tiles, More Fun!

   • Feature Description: I added a feature that lets players pick how big they want their Tic Tac Toe playground to be. You know, Tic Tac Toe is usually on a 3x3 grid. Well, not anymore!
     Now, you can choose to play on a classic 3x3 board, spice things up with a 4x4 challenge, or go all-in for a brain-bending 5x5 experience. It's like choosing your adventure but in Tic Tac Toe land.
     More tiles, more fun – you're in control!

     

   • What You'll Learn: By adding this feature, you'll learn how to organize your React app with reusable parts, making it easier to manage. You'll also get the hang of showing different things based on user choices, like changing the board size. It's like learning to adjust parts of your app depending on what the user picks or the app's current situation.

2. The 10-Second Countdown! Feature Description:

   • Quick Decision Time: You're playing your move, but here's the catch – you only have 10 seconds! It's like a little race against the clock in your Tic Tac Toe adventure. Feel the excitement, make your move before the countdown hits zero, and all's good.
     But here's the twist – if you take too long, your move gets tossed into a random spot. It's like a speedy game of Tic Tac Toe with a time limit – can you beat the clock? 🕐💨

     

   • What You'll Learn: Adding this feature will teach you how to manage asynchronous operations. You'll be working with the setTimeout method, and it's crucial to handle it carefully to avoid memory leaks. This hands-on experience will enhance your grasp of asynchronous code, event loops, stacks, and more.

3. Rewind and Replay! History Feature:

   • Feature Description: With the History Feature, you can look back at every move you've made, go back to any point you want, and redo your moves. It's like having a magical time machine in your Tic Tac Toe game. But, a heads up – if you decide to change things up, anything after that point is wiped out. So, choose your moves wisely and have fun exploring your game journey!

     

   • What You'll Learn: Implementing this feature provides hands-on experience with manipulating arrays and objects more effectively. You'll dive into using advanced array and object methods, gaining valuable insights for real-world applications.

4. Prevent Page Leave: No Escape Until Victory!

   • Feature Description: Here's the deal with Prevent Page Leave: Imagine you're in the middle of an epic game, and suddenly you think about leaving the page. Well, not so fast! This feature throws up a popup that says, "Hold up! Are you sure you want to leave this awesome game?" You've got two choices: finish the game like a champ or leave the page by selecting exit.

     

   • What You'll Learn: This feature, though seemingly straightforward, is a unique and intriguing aspect of web development. While it may appear easy to implement, tackling it within a single-page application adds a layer of complexity. The process of implementing this feature provides an in-depth understanding of the nuances involved in single-page application development.

There are many small things on the project but I have highlighted only the most important and unique ones.

here are the project live links

1. https://tic-tac-toe-virid-eight.vercel.app/

2. https://robiulhr.github.io/Tic-Tac-Toe/

Advanced features

There are so many features that can be implemented in this project let's have a look at them:

1. Sound Effects: Adding a Sonic Touch!

   • Feature Description: Let's talk about adding some fun noises to your Tic Tac Toe game – we call these "Sound Effects". Imagine every time you put an X or an O on the board, there's a little sound. Win the game? Cue a victory cheer! It's all about making your game not just something you see but something you hear too.

   • What You'll Learn: By adding this feature, you'll gain hands-on experience with the browser's audio API, enhancing your skills in working with various built-in browser APIs.

2. Interactive Animations: Bringing the Board to Life!

   • Feature Description: Now, instead of just placing Xs and Os on the board like usual, think about making your Tic Tac Toe board a bit more lively. You can do it with something called "Interactive Animations."
     Here's a simple idea: When someone makes a move, instead of just putting their X or O on the board, you can make it do a little spin or a jump. It's all about adding a touch of fun to each move.
     There are easy-to-use tools and libraries out there that can help your game pieces come to life with just a few lines of code. It's like giving your game a playful vibe! 🕺💃✨

   • What You'll Learn: By implementing interactive animations in your project, you'll gain hands-on experience with various tools and animation libraries. This endeavor will not only enhance your creativity but also encourage innovative thinking, forcing you to create visually appealing elements.

3. Different Types of Play: Mix It Up!

   • Feature Description: Right now, your app is set up for two players on one device. But think about this – what if players could play in different ways:

     1. Play Against the Computer Alone: Ever thought about challenging the computer all by yourself? It's like having your private game.

     2. Battle Friends Online: Now, imagine playing with friends online, no matter where they are. It's like having a game night without being in the same room.

        So, your game isn't just for two players anymore. You can play solo against the computer or have a virtual match with friends. Cool, right?

   • What You'll Learn: This feature provides an opportunity to delve into real-time data and the application of tools like web socket, especially when implementing the functionality for playing with friends online. Additionally, you'll explore the intricacies of Tic Tac Toe algorithms as you implement AI for playing against the computer.
     Leveraging available npm packages will equip you with the necessary resources for feature implementation, enhancing your understanding of algorithms and how to integrate them seamlessly into your own projects.

4. User Authentication: Personalizing the Experience!

   • Feature Description: Let's make your Tic Tac Toe game a bit more personal.

     Here's what User Authentication mean:

     • User Registration: Think of it like creating your own spot in the game. Pick a username and password to have your unique space.

     • Login: Once you're registered, use your chosen details to enter the game. It's like unlocking the door to your special gaming area.

   • What You'll Learn: Incorporating authentication into the project provides you with the opportunity to engage in full-stack development. You'll dive into backend and database operations to implement the necessary APIs. Integrating these components with the front end offers valuable experience in creating a full-stack project.
     And here's the bonus: This feature opens up lots of possibilities. We can now keep track of users for a long time in our system, recognizing them each time they play. This gives us the power to add cool features like a point table and much more! This journey serves as a stepping stone for beginner programmers aspiring to become proficient full-stack developers.

5. Scoreboard Galore: Track and Brag!

   • Feature Description: Let's step up our app game by introducing the Scorecard feature! let's add a Scoreboard! This Scoreboard will have:

     • The number of wins users have notched up.

     • The count of losses the user bravely faced.

     • A record of all the matches the user played.

     • Track of who your opponent was in each match!

   • What You'll Learn: By incorporating this feature, you'll have the chance to apply your problem-solving skills to a real-life project. It goes beyond mere syntax memorization; it's a demonstration of your problem-solving abilities. Working with data structures like arrays, objects, and their associated methods, this feature explores the logical aspects, demanding thoughtful solutions. It serves as proof of your adeptness in overcoming challenges and implementing effective solutions.

6. Chat System: Connect Beyond the Board!

   • Feature Description: Let's infuse a social touch into our app! Enhance its engagement and features by incorporating a chat system. This allows users to participate in live chats while fully immersed in the game.

   • What You'll Learn: Implementing this feature isn't just about coding; it's a journey that enhances your development skills. You'll dive into real-time communication protocols, understand user experience nuances, and master the art of creating engaging in-app communities.
     The recruiter, upon seeing this, will be impressed not only by your technical prowess but also by your ability to create immersive and socially connected applications, showcasing a well-rounded skill set.

These features we've explored are merely the tip of the iceberg. The possibilities are boundless, transforming your Tic Tac Toe from a mere game into a complete experience. I didn't have the time to add these features myself, but you can explore them in your version. And hey, if you want to contribute to mine, you're more than welcome!

Check out the source code 🚀🎮✨

Conclusion

After exploring the insights in this article, I trust you've gained a clear understanding of how to transform an ordinary project into something truly unique. We used Tic Tac Toe as our canvas, but guess what? You can sprinkle these magic tricks on any project.

Remember, your coding journey is not just about syntax and frameworks; it's about injecting your creativity to make every project uniquely yours.

So, whether you're developing a game, a website, or a mobile app, seize the opportunity to innovate and leave your distinctive mark. Now, armed with these tricks, go ahead, infuse your projects with creativity, and watch them soar to new heights! 🚀💻✨

Have you ever wondered about deploying your React project on both GitHub Pages and Vercel simultaneously? Well, it's not just possible; it's super simple!

Now, you might be thinking, 'Why would I do that?'

Let's be real; in most cases, you won't deploy the same project on different servers. But, here's the twist. I've noticed something among beginner developers who showcase their practical projects on GitHub Pages or Vercel for their portfolio. Often, the shared link doesn't work smoothly, creating a not-so-great impression. Imagine having a backup deployment on another platform! It's a solution to avoid those awkward moments.

So, I'm here to guide you through deploying on both GitHub Pages and Vercel. It's not just a tech hack, it's an exploration! Join me, and let's dive in together.

Are you ready for the journey?

Note: While there are multiple methods to create a React app, for the purpose of this guide, we'll be considering a React project using Vite, known for its speed and simplicity, which offers an efficient front-end build process. Although other approaches exist, we've chosen Vite for its ease of use. And for the routing, I am using react router dom.

All the code for this article is available on this GitHub repository. Feel free to check it out for a better understanding. Additionally, it can be used as a convenient template for kickstarting your React projects with GitHub Pages and Vercel. Feel free to fork, and utilize the code to enhance your development workflow.

Deploy Vite React app to GitHub Pages

1. Begin by configuring the base URL in the vite.config.js file. This step is crucial because GitHub Pages uses a subdirectory-like URL structure for Project Pages. When hosted on GitHub Pages, a project is accessible at a link resembling <ROOT>/project-name/.

   Define the base URL to match the project name to avoid errors and ensure your project can locate its assets correctly.

   This is how the links should look like:

    ❌ Bad 
    https://robiulhr.github.io/assets/favicon.17e50649.svg  
    ✅ Good 
    https://robiulhr.github.io/deploy_react_app_github_pages_vercel/assets/favicon.17e50649.svg
   

   Update the vite.config.js file accordingly. Here project name is the name of our repository which means use the repo name as the base URL.

    base: "/deploy_react_app_github_pages_vercel";
   

   after adding the base URL the vite.config.js file will look like this:

   

2. Add a homepage field to your project’s package.json:

    "homepage": "https://username.github.io/repo_name"
   

   Replace username with your GitHub username and repo_name with your repository’s name.

3. Install gh-pages in your project:

    npm install --save gh-pages
   

   Modify your package.json scripts by adding these two scripts below:

    "scripts": {    
       "predeploy": "npm run build",    
       "deploy": "gh-pages -d dist", 
     }
   

   predeploy ensures the latest build is ready before deployment, and deploy triggers the deployment process.

4. Since we've included the base URL in the vite.config.js file as the repo name for deployment, we need to make adjustments in our React Router DOM setup. In your project's router setup, locate the part where you create the router using createBrowserRouter.

   As the second parameter of the createBrowserRouter method, add the following code:

    const router = createBrowserRouter(routes, { basename: import.meta.env.BASE_URL });
   

   This line ensures that React Router DOM correctly handles the new base URL configuration.

   

5. Execute the following command to deploy your application:

    npm run deploy
   

   This command creates a new branch named gh-pages in your GitHub repository.

6. Set the source branch to gh-pages in the GitHub Pages section of your repository’s settings.

   

   Navigate to Settings > Pages to find the link to your deployed site.

Automate Deployment using GitHub Actions

Manually deploying your project to GitHub Pages works, but wouldn't it be convenient if this process happened automatically with every push to the main branch?

GitHub Actions makes this automation easy. You can create workflows that specify the steps to build and deploy your React app whenever changes are pushed to the specified branch.

GitHub Actions work by defining workflows using YAML files in a .github/workflows directory in your repository. These workflows contain a set of jobs and steps that GitHub will run in response to events, such as pushes, pull requests, or manual triggers.

1. In your project repository, create a new folder named .github/workflows if it doesn't exist. Inside the workflows folder, create a new file named deploy.yml. This file will define your GitHub Actions workflow.

2. Paste the following YAML content into deploy.yml:

    name: Deploy
   
    on:
      push:
        branches:
          - main
   
    jobs:
      build:
        name: Build
        runs-on: ubuntu-latest
   
        strategy:
          matrix:
            node-version: [16.x] # Specify the Node.js version you want to use
   
        steps:
          - name: Checkout repo
            uses: actions/checkout@v2
   
          - name: Setup Node
            uses: actions/setup-node@v3
            with:
              node-version: ${{ matrix.node-version }}
   
          - name: Install dependencies
            run: npm install
   
          - name: Build project
            run: npm run build
   
          - name: Upload production-ready build files
            uses: actions/upload-artifact@v2
            with:
              name: production-files
              path: ./dist
   
      deploy:
        name: Deploy
        needs: build
        runs-on: ubuntu-latest
        if: github.ref == 'refs/heads/main'
   
        steps:
          - name: Download artifact
            uses: actions/download-artifact@v2
            with:
              name: production-files
              path: ./dist
   
          - name: Deploy to GitHub Pages
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: ./dist
   

   This workflow consists of two jobs: build and deploy.

   The build job installs dependencies and builds the project, while the deploy job uses the action to deploy the contents of the ./dist directory to GitHub Pages.

3. Commit the changes to your repository and push them to the main branch.

    git add .
    git commit -m "Add GitHub Actions workflow for automatic deployment"
    git push origin main
   

4. After running all the commands above, we can see our directory files on GitHub.

   In the repository, proceed to the Actions tab. Click on the recent workflow.

   you might notice that it failed initially due to missing permissions.

   

   Since our action modifies the repository, it requires write permissions.

   To resolve this, Navigate to Actions Settings, Select Read and Write permissions, and Hit Save.

   

   Now, check the status of your workflows. Go to Actions, and verify if the workflows have been executed successfully. If not, click on the failed workflow name. Inside the page, on the top-right section, you'll find an option to re-run the job.

   

   A successfully executed workflow will appear like this:

   

   Now, with every update to your project, GitHub Actions will automatically build and deploy your React project to GitHub Pages, keeping your live demo up to date.

Deploy Vite react app on Vercel

1. To deploy your Vite React app on Vercel, begin by creating a new account. You can easily log in using OAuth.

   

   Once logged in successfully, you'll land on the Vercel dashboard.

2. Import the project from the Git repository. If it's your first time using Vercel, you'll be prompted to install it for GitHub. Click "Install Now For GitHub" and follow the instructions. Save the settings for GitHub.

3. Navigate back to the import Git page, and you'll see that your GitHub is now connected. Click "Import Project from GitHub.".

4. If you haven't given permission for your GitHub repo click on the 'Adjust GitHub App Permissions' to provide the necessary permission. This will open a popup and from this popup select the repo you want to deploy to give the Repository access and click save.

5. Now you will see your selected project repo on the 'Import Git Repository' section.

   

   Click "Import" and you'll get a form to enter the project name, root directory, and Framework preset.

   

6. Make sure the Framework preset is selected as vite and the root directory is set to ./.

7. Add an environment variable with the key as VITE_BASE_PATH and the value as /.

   

   You can name it anything, but ensure it starts with VITE_ the preset. Leave other settings as default and click "Deploy."

Your React application will deploy within seconds, providing two to three preview links.

Handle Base URL Dynamically

Even though we've completed the deployment process on Vercel, there's one more thing to address.

Since we've set the repository name as the basename in our vite.config.js file, we need to configure this dynamically. Otherwise, Vite will use the /repo-name URL instead of root URL /.

Inside the vite.config.js file, update the base URL with the following line:

base: process.env.VITE_BASE_PATH || '/deploy_react_app_github_pages_vercel',

With these changes, you've dynamically configured the base URL for your Vite React app on Vercel.

Solve Client Side Routing issue on Vercel

After completing all the deployment steps, there's one more thing to address: making client-side routing work seamlessly on Vercel. Without this setup, if you navigate to a sub-route of your project and refresh the page, it won't work.

Let's fix this react router issue on Vercel by adding a configuration file.

• Add a file called vercel.json to the root directory of your project.

• Insert the following code into the vercel.json file:

    {
      "rewrites": [
        {
          "source": "/(.*)",
          "destination": "/index.html"
        }
      ]
    }
  

This configuration ensures that all routes lead to index.html, enabling proper client-side routing.

Note: As deployment processes on platforms like GitHub Pages and Vercel are subject to frequent updates, it's possible that the steps outlined here might differ when you execute them. If you encounter any difficulties deploying your project, kindly share the specific issues in the comments section.

For the most current and detailed information, consult the official Vercel documentation for deploying Vite applications: vite on vercel

With this setup, every time you push code to your repository, your project will be automatically deployed on both GitHub Pages and Vercel, providing a seamless and reliable deployment experience.

Resources

• 8 ways to deploy a React app for free

• Deploying Vite project to GitHub Pages

• Deploy Vite app to GitHub Pages using GitHub Actions

Hello there, fellow JavaScript and node js learner! We all know that practice makes perfect, and what's better than a challenge to level up our skills? I found myself on a mission to discover a project that could take my JavaScript and node js knowledge to the next level. Something interesting, effective, and practical, where I could put all my learning into action.

And guess what? I found it - Cute Express!

It's my very own version of the famous Express.js framework. I built it from the heart, driven by my passion for coding and inspired by the elegance of Express js.

In this article, I'm thrilled to show you the cool things I've created and that is Cute Express.

Let's dive in and explore its features and functionalities together!

What is Cute Express?

Cute Express is a lightweight and feature-rich web framework that covers almost all basic and a few advanced features of Express.js. It's like having a smaller and cuter clone, or you could even consider it a pocket-sized version of Express.js.

However, let's be clear – Cute Express isn't trying to conquer the web development world and It's not intended for industry use or to replace anything. It's a fun project I crafted purely for practicing my JavaScript and Node.js skills.

Unlike serious industry tools, Cute Express is your coding companion for creative experimentation. It's my way of exploring the world of web frameworks while having a blast.

So, join me as we unravel the adorable charm and practicality of Cute Express
together!

Features of Cute Express

Now, let's talk about the real deal – the features of Cute Express that I've crafted with my own hands tailored to my coding style and preferences.

Cute Express is all about embracing the tried-and-true features of Express.js – no frills, no extra fuss.

From routing to handling different HTTP methods, Cute Express is packed with functionalities that mirror those of actual express js. I wanted to challenge myself and see if I could recreate the Express.js magic in my unique way, sticking to its core functionalities.

Just like Express.js, Cute Express lets you define routes, handle middleware, and respond to various HTTP requests. It's all about creating a smooth and intuitive experience for developers, just on a smaller scale.

Setting Up a Basic Server with Cute Express

let's start our journey by setting up a basic server.

To begin, let's install Cute Express as a dependency:

npm install cute-express

Learn more about the installation process from Installing Cute Express.

Now, let's create a simple server using Cute Express:

const cuteExpress = require('cute-express') 
const app = cuteExpress() 
const port = 3000  

app.get('/', (req, res) => {
   res.send('Welcome to Cute Express!');
})  

app.listen(port, () => {
   console.log(`Example app listening on port ${port}`)
})

Do you notice the resemblance? The process mirrors the simplicity of creating a server in Express.js. With just a few lines of code, we have a basic server that listens on port 3000. As you visit http://localhost:3000 in your browser, you'll be greeted with the message Welcome to Cute Express!

Routing with Cute Express

Ah, routing – the heart and soul of any web framework. Let's dive into the world of routing in Cute Express, where we'll navigate through URLs and create delightful paths for our users to follow.

In Cute Express, routing is a breeze, and it'll feel just like home if you've ever worked with Express.js. Defining routes is straightforward:

const cuteExpress = require('cute-express'); 
const app = cuteExpress();  

// Define routes 
app.get('/', (req, res) => {
   res.send('Welcome to Cute Express!'); 
});  

app.get('/about', (req, res) => {
   res.send('Learn more about Cute Express.'); 
});  

app.post('/contact', (req, res) => {
   // Handle contact form submission 
});  

// Start the server 
app.listen(3000, () => {
   console.log('Server is running on port 3000'); 
});

Notice the familiarity? We're defining routes using app.get() and app.post() – just like you would in Express.js. When a user visits /about, Cute Express will greet them with Learn more about Cute Express.

But wait, there's more! Cute Express also supports dynamic routing with parameters:

app.get('/user/:id', (req, res) => {
   const userId = req.params.id;
   res.send(`Hello, User ${userId}!`); 
});

When a user visits /user/42, Cute Express will warmly say, Hello, User 42! This flexible routing lets you create personalized experiences for your users.

And guess what? You can even use regular expressions as paths, giving you the flexibility to match complex patterns and create advanced routing logic.

// Using regular expressions as paths 
app.get(/\/product\/(\d+)/, (req, res) => {
  const productUrl = req.url;
  res.send(`Product ID: ${productUrl.split("/")[2]}`);  
});

Middleware in Cute Express

Middleware – the mystical bridge between requests and responses. Just like Express.js, Cute Express supports middleware functions that can handle a wide range of tasks, from logging to authentication.

Declaring middleware in Cute Express is a breeze. Simply use app.use() and unleash the power:

const cuteExpress = require('cute-express');
const app = cuteExpress();

// A simple middleware
app.use((req, res, next) => {
  console.log('A request is coming in...');
  next(); // Don't forget to call next to continue the flow
});

// More middleware functions...

See? You can log messages, check authentication, or perform various operations in middleware. Cute Express maintains the order, executing middleware functions in the sequence they're defined.

But let's raise the stakes! How about middleware for specific routes?

Just like Express.js, Cute Express infuses middleware functions directly into your route declarations, creating a symphony of power and flexibility. Behold, the elegance of middleware in action:

// Middleware for a specific route 
app.get('/profile', (req, res, next) => {
   console.log('Middleware for /profile activated.');
   next(); 
}, 
(req, res) => {
   res.send('Welcome to your profile!'); 
});

In this scenario, the middleware only activates when users venture into the /profile route.

Conclusion

As you've seen, Cute Express has some fascinating features that I've introduced here. However, there's a lot more to uncover beyond what I've covered in this article.

To make sure you have an enjoyable experience and don't get overwhelmed, I've focused on showing you the basics.

But don't stop here!

Dive into Cute Express by exploring its documentation. It's like a map that will guide you through all the exciting places within the framework.

If you ever have thoughts, ideas, or suggestions, I'd be thrilled to hear them. Your input could make Cute Express even better for everyone.

And guess what? If you're feeling brave and want to contribute to this project, you're invited! Whether you're a coding expert or just starting, your input is valuable.

So, go ahead and let your creativity flow. Cute Express is here to accompany you on your coding journey.

Have fun exploring, and happy coding!

• Source code

• npm package

Have you ever found yourself wondering what people mean when they talk about 'object-oriented programming' or 'functional programming'? These terms can sound confusing and leave you scratching your head, unsure of their true meaning.

Well, fret not! In this article, I am here to make things crystal clear. We'll dive into the world of programming paradigms and explain these concepts in plain and simple language. We'll explore popular paradigms like object-oriented programming and functional programming, breaking them down into easy-to-understand ideas.

By the end of this article, you'll have a clear understanding of these programming paradigms and be able to join the conversation with confidence. No more confusion or feeling left out when people mention these terms!

Whether you are a seasoned developer or just starting your programming journey, this exploration of programming paradigms will broaden your horizons and empower you to think creatively and tackle complex problems with confidence.

So, Let's jump right in and explore this exciting world together!

What are Programming Paradigms?

Programming paradigms are different ways or approaches that programmers use to write code. Just like there are various ways to approach everyday tasks, such as cooking or building, there are different approaches to coding.

Think of programming paradigms as different sets of instructions or strategies that programmers follow to solve problems and build software. Each paradigm has its unique characteristics and principles that guide how code is organized and structured. These different approaches yield the same result but involve different ways of thinking and organizing the process.

To better understand this concept, let's consider the process of making a cup of coffee.

When making coffee, you can approach it in different ways, just like programming paradigms offer different approaches to coding. When making a cup of coffee, you can follow a set of step-by-step instructions, where each action is explicitly defined (imperative approach).

You measure the water, grind the coffee beans, heat the water to a specific temperature, pour the water over the coffee grounds, and finally, enjoy your cup of coffee.

Each action is explicitly defined, and you have full control over every step of the process.

On the other hand, Alternatively, you can describe the desired outcome without specifying each step (declarative approach).

You simply state that you want a cup of coffee. This approach focuses on the end result rather than the specific instructions. The coffee machine takes care of the process, determining the water temperature, grind size, and other details to achieve the desired outcome.

In this case, someone else, like the coffee machine, has already defined how the process of making coffee should be done. These different approaches yield the same result—a cup of coffee—but involve different ways of thinking and organizing the process.

In the declarative approach, the responsibility for executing the detailed steps lies with someone else or a pre-existing system.

Similarly, programming paradigms offer different ways to tackle coding challenges. Some paradigms focus on specifying explicit instructions (imperative), while others prioritize describing the desired outcome (declarative). Each paradigm offers its own benefits and considerations.

What Programming Paradigms are Not?

Besides understanding what programming paradigms are, it is equally important to know what programming paradigms are not. This clarity is especially crucial for new programmers to avoid confusion and misconceptions.

This Understanding will help you approach the subject with a clearer perspective, appreciating the strengths and limitations of each paradigm.

Firstly, a programming paradigm is not a specific programming language or a strict set of rules. It's not a one-size-fits-all solution or a magic trick for solving every programming problem effortlessly.

Instead, think of programming paradigms as shared ways of thinking and organizing code. They're like guiding principles and ideas that programmers agree upon and follow.

Secondly, programming paradigms are not a strict progression or separate categories. They can coexist within a programming language or project. Developers often mix and match different paradigms based on their software's needs.

Programming languages are not always tied to a single paradigm. Some languages are designed for a particular paradigm, but many languages allow you to adapt your code to fit different paradigms.

It's important to understand that using a specific programming paradigm doesn't guarantee good or bad code. The quality of code depends on factors like the developer's skills, best practices, and coding standards, regardless of the paradigm used.

Remember, programming paradigms are flexible frameworks, not strict rules, allowing you to navigate the programming landscape and make informed decisions in your coding journey.

Why should I care?

To answer this question in short, Programming paradigms are essential general knowledge for developers.

However, if we delve into a more detailed explanation, we discover that Exploring programming paradigms is not only interesting but also crucial for expanding your understanding of different approaches to programming. It goes beyond the usual tools and techniques, encouraging you to think creatively and explore new problem-solving strategies.

You've probably come across terms like object-oriented programming (OOP) or functional programming in the coding world. Having a basic understanding of programming paradigms helps you grasp these concepts and enhances your overall comprehension of programming.

Ever wondered why there are so many programming languages out there?

Understanding programming paradigms holds the key to unraveling this mystery.

Each paradigm represents a unique philosophy and set of principles that shape how developers think and solve problems.

For example, in OOP, developers focus on modeling real-world objects and their interactions. They use concepts like encapsulation, inheritance, and polymorphism to organize their code and promote code reuse.

Embracing OOP allows for a modular and intuitive approach to development, enabling developers to analyze problems based on objects and relationships. This flexibility in thinking and problem-solving is highly valuable in the dynamic field of software development.

Developers who embrace different paradigms become more adaptable and can tackle challenges from various perspectives. They have a wider range of tools at their disposal, allowing them to choose the most suitable paradigm for a specific task or even combine paradigms to create powerful solutions.

Types of Programming Paradigms

While there are multiple programming paradigms, we can categorize them into two major groups:

• Imperative Paradigms: Imperative paradigms focus on explicitly defining step-by-step instructions to manipulate the program state.

• Declarative Paradigms: Declarative paradigms focus on describing the desired outcome or result, rather than explicitly specifying the steps to achieve it.

Almost all major programming paradigms have a main concept of either instructing the computer step-by-step or describing the desired outcome and they can be broadly categorized as either imperative or declarative.

However, every programming paradigm comes in different flavors, each with its own unique ideas, benefits, and challenges.

But in this article, we will mainly focus on understanding the imperative and declarative nature of programming paradigms to make it simple to understand.

Understanding the Major Programming Paradigms

So far, we have discussed what programming paradigms are and why they matter.

Now let's explore a few of them...

Note: Keep in mind that this list is not complete, as there are other programming paradigms beyond what we'll cover here. However, we will focus on the most popular and widely-used ones.

Imperative Programming Paradigm

Imperative programming serves as the foundation for many programming paradigms. It consists of sets of detailed instructions that are given to the computer to execute in a given order.

It's called "imperative" because as programmers, we dictate exactly what the computer has to do in a very specific way.

Imperative programming focuses on explicitly defining step-by-step instructions to manipulate the program state. Programs are composed of a sequence of statements that change the variable's values and control flow. Imperative programming provides a basic structure for other paradigms to build upon.

Let's consider the following coding problem to understand more:

Problem: Given an array of integers, find the average of these numbers.

We can solve this problem using different programming paradigms, such as imperative, procedural, object-oriented, functional, and declarative programming.

In imperative programming, we would iterate over the array, keeping track of the sum and count of the numbers encountered. We can use a loop and an accumulator variable to update the sum.

Here's an example solution in JavaScript:

const numbers = [10, 20, 30, 40, 50];
let sum = 0;
let count = 0;

// Iterate through each element in the numbers array
for (let i = 0; i < numbers.length; i++) {
  // Accumulate the sum of the numbers
  sum += numbers[i];
  // Increment the count of elements
  count++;
}

// Calculate the average by dividing the sum by the count
const average = sum / count;

// Output the calculated average
console.log(average);

Here we define the necessary variables, sum, and count, and initialize them both to 0. We then proceed with a loop that iterates through each element in the numbers array.

Inside the loop, we accumulate the sum of the numbers by adding each element to the sum variable, and simultaneously increment the count variable to keep track of the number of elements encountered.

Once the loop completes, we calculate the average by dividing the accumulated sum by the count of elements. The result is stored in the average variable.

Finally, we output the calculated average to the console using console.log(average).

In this imperative solution, we're focusing on describing "how" to perform tasks providing detailed and specific instructions to the program. We are We explicitly iterate through each element in the array, accumulate the sum, and keep track of the count.

Imperative programming languages, such as C, Pascal, or Python, follow a step-by-step approach to execute code. Developers provide explicit instructions to the computer, specifying exactly how to perform each task. This level of control and specificity allows for fine-grained manipulation of program state and enables precise control over program flow.

Imperative programming is particularly useful in scenarios where detailed control is required, such as low-level programming, algorithm implementation, or situations where efficiency is a primary concern.

However, it can sometimes result in verbose and complex code, especially for large-scale applications. Therefore, it is important to strike a balance between explicit instructions and code readability when employing imperative programming.

Procedural Programming Paradigm

Procedural programming is a programming paradigm that focuses on breaking down a program into a set of procedures or functions. It emphasizes dividing the program into smaller, manageable chunks of code that can be executed in a specific order.

It is closely related to imperative programming and can be considered a subset of it. Procedural programming extends imperative programming by introducing the concept of functions or procedures. It still shares the fundamental idea of providing step-by-step instructions to the computer, specifying the precise sequence of actions to be performed.

One of the key advantages of procedural programming is its emphasis on code modularity and reusability. By breaking the program into separate procedures or functions, developers can create reusable blocks of code that can be called from different parts of the program.

This promotes code organization, simplifies maintenance, and reduces code duplication. Procedures encapsulate a set of instructions, making the code more manageable and easier to understand.

Procedural programming provides a structured approach to program design and works well for problems that can be divided into logical, sequential steps. It allows developers to focus on specific tasks or subroutines, making it easier to reason about and debug the code.

Here's an example that demonstrates procedural programming using the previous problem of calculating the average of a list of numbers:

function calculateAverage(numbers) {
  const sum = sumNumbers(numbers);
  const count = numbers.length;
  const average = sum / count;
  return average;
}

function sumNumbers(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

const numbers = [10, 20, 30, 40, 50];
const result = calculateAverage(numbers);
console.log(result);

In this example, we define the calculateAverage function that takes an array of numbers as input. Instead of calculating the sum and count within the calculateAverage function as we did in the imperative paradigm, we introduce a separate function sumNumbers that calculates the sum of the numbers.

The calculateAverage function calls the sumNumbers function to obtain the sum, calculates the count using the length of the numbers array, and then calculates the average by dividing the sum by the count.

By breaking down the problem into reusable functions, procedural programming promotes code modularity and reusability. Each function has a specific responsibility, making the code easier to understand and maintain.

Procedural programming is commonly used in languages like C, Pascal, and Fortran.

However, many modern languages, including Python and JavaScript, also support procedural programming alongside other paradigms, allowing developers to choose the most appropriate approach for their projects.

Object-Oriented Programming Paradigm

One of the most popular and widely used programming paradigms is object-oriented programming (OOP). It focuses on representing real-world entities as objects and organizing code around these objects.

It provides a way to structure programs by grouping related data and behavior into objects, which are instances of classes. Object-oriented programming builds upon the foundations of imperative and procedural programming.

It takes the concept of breaking down a program into smaller, reusable parts (functions or procedures) and extends it to objects, which encapsulate both data and behavior.

Objects in OOP act as self-contained entities that can communicate and interact with each other through well-defined interfaces. This enhances code organization and promotes reusability, allowing for more modular and maintainable codebases.

In the object-oriented paradigm, objects are the fundamental building blocks. An object encapsulates data (known as attributes or properties) and behaviors (known as methods) that operate on that data. Objects interact with each other through method invocations and can communicate by sending messages.

OOP introduces the concept of classes, which are blueprints for creating objects. A class defines the structure and behavior of objects, including their attributes and methods. Objects are instances of classes, meaning they are created based on the class definition.

Note: There are multiple types of OOP paradigms such as Prototype-based, and class-based.

Key concepts in Object-Oriented Programming include:

• Encapsulation: Encapsulation is like putting related things together in a box. It keeps some information private and provides a way to interact with it through a public interface.

• Inheritance: Inheritance is like passing down traits from parents to children. It allows new classes to inherit properties and behaviors from existing classes.

• Polymorphism: Polymorphism is like using the same word to mean different things in different contexts. It allows objects of different types to be treated as if they were the same type.

• Abstraction: Abstraction is like simplifying something complex. It focuses on the important parts while hiding unnecessary details.

Here's an example that demonstrates the Object-Oriented Programming Paradigm using the previous problem of calculating the average of a list of numbers:

class AverageCalculator {
   constructor(numbers) {
     this.numbers = numbers;
   }
    calculateAverage() {
     const sum = this.sumNumbers();
     const count = this.numbers.length;
     const average = sum / count;
     return average;
   }
    sumNumbers() {
     let sum = 0;
     for (let i = 0; i < this.numbers.length; i++) {
       sum += this.numbers[i];
     }
     return sum;
   }
 }

 const numbers = [10, 20, 30, 40, 50];
 const calculator = new AverageCalculator(numbers);
 const result = calculator.calculateAverage();
 console.log(result);

In this Object-Oriented Programming example, we define a class AverageCalculator that represents a calculator object for calculating the average of a list of numbers. The class has a constructor that takes an array of numbers as input and assigns it to the numbers property.

It also defines two methods: calculateAverage() to calculate the average and sumNumbers() to calculate the sum of the numbers. We create an instance of the AverageCalculator class by passing the numbers array to the constructor.

Then, we call the calculateAverage() method on the instance to obtain the average.

Finally, we log the result to the console. In this OOP approach, we encapsulate the data (the numbers array) and the behavior (the calculation methods) within the AverageCalculator class.

By creating an instance of the class, we can perform average calculations on different sets of numbers, promoting reusability and modularity.

Object-Oriented Programming provides a modular and extensible approach to software development. It allows for the creation of reusable code components, enhances code organization, and facilitates the modeling of complex systems.

OOP is widely used in languages such as Java, C++, and Python to build robust and scalable applications.

Declarative Programming Paradigm

Declarative programming is a programming paradigm that focuses on expressing the desired outcome or result, rather than specifying the exact steps to achieve it. It's all about hiding away complexity and bringing programming languages closer to human language and thinking.

It contrasts with imperative programming, where the programmer provides instructions on how to execute a task. In declarative programming, the emphasis is on what needs to be achieved, leaving the implementation details to the underlying system or framework.

This paradigm utilizes declarations, constraints, and high-level abstractions to describe the problem domain and define the desired behavior. It encompasses various sub-paradigms such as functional programming, logic programming, and database query languages, each with its unique characteristics.

Key features of declarative programming include its focus on specifying the desired result, expressing constraints and relationships, employing high-level abstractions, promoting code reusability, and emphasizing data transformations over direct state manipulation.

Let's take the example of calculating the average of a list of numbers to demonstrate the declarative programming paradigm:

const numbers = [10, 20, 30, 40, 50];
const sum = numbers.reduce((acc, num) => acc + num, 0);
const average = sum / numbers.length;

console.log(average);

In this example, we use the reduce method, a higher-order function in JavaScript, to declaratively calculate the sum of the numbers in the array. We provide a callback function that defines the accumulation logic. The reduce method iterates over each element of the array, updating the accumulator by adding the current element's value.

Finally, we divide the sum by the length of the array to calculate the average.

See that with the reduce function, we're not explicitly telling the computer to iterate over the array. We just say what we want ("reduce") and update the accumulator by adding the current element's value.

By utilizing higher-order functions and method chaining, this declarative programming approach allows us to express complex computations concisely. The focus is on describing the desired result (the sum and average calculation) rather than specifying the step-by-step procedure.

One of the advantages of declarative programming is its ability to improve code clarity, reusability, and maintainability. By separating the problem description from the implementation details, declarative programming enhances code readability and reduces the likelihood of introducing bugs.

It enables programmers to express computations as a composition of functions and transformations, promoting code organization and comprehension.

Note: It's important to note that while declarative programming hides away the complexity of implementation details, the computer still processes the information using imperative code.

Functional Programming Paradigm

Functional programming is another widely used programming paradigm, closely related to declarative programming and often considered a subset of it.

Functional programming treats functions as first-class citizens, enabling them to be assigned to variables, passed as arguments, and returned from other functions. This paradigm focuses on immutability, pure functions, and higher-order functions.

Pure functions are fundamental in functional programming. They solely depend on their inputs to produce results and have no side effects. Regardless of the context, a pure function will always produce the same output for the same input. This enhances code reliability and predictability.

Functional programming languages like Haskell, Lisp, and JavaScript (with libraries like React) promote the use of functions as first-class citizens and encourage a declarative and concise coding style. The paradigm discourages mutable state and data modification, promoting code reliability and predictability.

Functional programming emphasizes higher-order functions, which provide flexibility and enable function composition and reusability. By emphasizing modularity and avoiding side effects, functional programming makes it easier to identify and separate responsibilities within the codebase, improving code maintainability.

Taking the example of calculating the average of an array, we can demonstrate the functional programming approach:

const numbers = [10, 20, 30, 40, 50];

// Function to calculate the average 
const calculateAverage = (arr) => {
   const sum = arr.reduce((acc, num) => acc + num, 0);
   const count = arr.length;
   return sum / count;
};

// Calculate the average using the functional approach 
const average = calculateAverage(numbers);
console.log(average)

In this functional programming example, code is almost the same as the declarative paradigm, but we wrap our iteration within a function called calculateAverage. It uses the reduce method to calculate the sum of the numbers in the array and then divides it by the length of the array to obtain the average.

The calculateAverage function is a pure function as it solely depends on its input and produces a predictable output without modifying any external state. This promotes code reusability, modularity, and easier testing.

By encapsulating the logic within the calculateAverage function, we ensure that it doesn't modify anything outside its scope. It processes its information within the function and doesn't have any side effects on the surrounding code.

Functional programming encourages writing programs primarily using functions. By promoting code modularity, immutability, and the absence of side effects, functional programming enhances code reliability and maintainability.

Importance of Choosing the Right Paradigm

Choosing the right programming paradigm can seem pointless to beginners at times.

After all, most paradigms can work fine for many scenarios, and getting the work done is the primary objective. However, selecting the appropriate paradigm involves considering various factors beyond immediate functionality.

Paradigms have a significant impact on code management, project extensibility, code performance, and other aspects of software development. Merely achieving the desired outcome is not enough reason to choose a paradigm. It's crucial to evaluate how well the paradigm aligns with the project requirements and long-term goals.

A well-suited paradigm can improve code organization, maintainability, and readability. It can provide the necessary structure for future scalability and ease of maintenance.

Additionally, certain paradigms may optimize code performance, making it more efficient and resource-friendly.

Therefore, it's essential to weigh the pros and cons of different paradigms and assess their compatibility with the project's specific needs. It's not just about making the work done; it's about selecting the paradigm that can best address the broader aspects of software development and contribute to the success of the project.

How to Choose the Right Paradigm

After knowing the importance of choosing the right paradigm, you may wonder how to choose the right paradigm for your project or development needs.

It is essential to acknowledge that selecting the appropriate paradigm is a complex task that requires a strong understanding of programming principles and substantial experience working with different paradigms.

However, to gain a basic understanding, let's explore some key points that should be considered when choosing the right programming paradigm:

• Nature of the Problem: Consider the nature of the problem you are trying to solve. Some paradigms align naturally with specific types of problems. For example, functional programming is well-suited for complex mathematical calculations or data transformations.

• Project Requirements: Evaluate the specific requirements of your project. Each paradigm offers different strengths. If code organization, modularity, and reuse are important, an object-oriented paradigm might be a good fit.

• Team Expertise: Take into account the expertise and experience of your development team. If they are skilled in a particular paradigm, leveraging their expertise can lead to greater efficiency. However, exploring new paradigms can also enhance their problem-solving abilities and broaden their skill set.

• Available Resources: Consider the availability of tools, libraries, and frameworks that support the paradigm you are considering. Some paradigms have extensive ecosystems and resources that can facilitate development.

• Compatibility and Integration: Think about how well a particular paradigm integrates with your existing codebase or external systems. Maintaining consistency can be beneficial, but choosing a paradigm that aligns well with external systems can simplify integration efforts.

• Hybrid Approaches: Remember that you are not limited to a single paradigm. Many programming languages support multiple paradigms and allow hybrid approaches. You can combine paradigms to leverage their strengths in different aspects of your project.

Ultimately, the choice of programming paradigm should be based on careful consideration of project requirements, problem domain, team expertise, and available resources. Evaluate the strengths and limitations of each paradigm and determine how well they align with your specific needs.

Misconceptions about Programming Paradigms

At this point in the article, we have covered all the major programming paradigms and Choosing the right paradigm.

Now, let's address Two common misconceptions that often arise in discussions about programming paradigms.

Misconception 1: "One Paradigm is Superior to Others"

It's important to note that no single programming paradigm is inherently superior to others. Each paradigm has its strengths and weaknesses, and its effectiveness depends on the context in which they are applied.

The choice of a programming paradigm should be based on the specific requirements of the project, the problem domain, team expertise, and available resources. A paradigm that works well for one project may not be the best fit for another.

Instead of viewing paradigms as competitors, it's more productive to see them as tools in a developer's toolkit. Each paradigm provides unique approaches and techniques that can be utilized to solve different types of problems efficiently.

Furthermore, many modern programming languages support multiple paradigms, allowing developers to mix and match approaches as needed. Hybrid approaches that combine paradigms can often lead to more flexible and robust solutions.

The key is to have a broad understanding of different paradigms and their underlying principles. This knowledge empowers developers to make informed decisions and choose the most appropriate paradigm for a given situation.

Remember, the goal of programming is to solve problems effectively and efficiently. By embracing the diversity of programming paradigms and understanding their strengths, developers can unlock their full potential and create innovative and high-quality software solutions.

Misconception 2: "One Paradigm to Rule Them All"

The funniest misconception about programming paradigms is the belief in "One Paradigm to Rule Them All". It's like thinking there's a magical programming approach that can solve every problem and is superior to all others. Imagine if there were a legendary programming paradigm that had all the answers, like a superhero of programming.

This misconception humorously suggests that this mythical paradigm would be incredibly powerful, efficient, and adaptable, capable of tackling any software challenge effortlessly.

But here's the reality: programming paradigms are diverse and designed for different purposes. Each paradigm has its own strengths and limitations, and no single paradigm can be the best for every situation. It's like saying there's one perfect tool that can fix any problem, from fixing a leaky faucet to building a skyscraper!

In the real world of software development, projects have unique requirements and demands. That's why developers need to understand the various paradigms and choose the most suitable one for each situation. It's about using the right tool for the right job, rather than searching for a mythical all-in-one solution.

So, while the idea of a "One Paradigm to Rule Them All" is humorous, it reminds us that programming is diverse and exciting, with a range of paradigms to explore and combine. Embracing this diversity allows developers to adapt their approaches, solve problems creatively, and build robust and innovative software.

Conclusion

Programming paradigms play a crucial role in shaping how developers approach problem-solving and code organization. Each paradigm offers its own unique characteristics and approaches, providing developers with diverse tools to tackle different types of problems effectively.

Whether it's imperative, object-oriented, functional, or a combination of paradigms, selecting the right approach can greatly influence the quality and success of a software project.

Keep exploring these paradigms, experimenting with their principles, and expanding your programming toolkit. With a solid understanding of different paradigms, you'll be well-equipped to approach diverse programming challenges with confidence and creativity.

Happy Coding :)

Resources

• https://www.freecodecamp.org/news/an-introduction-to-programming-paradigms/

• https://en.wikipedia.org/wiki/Programming_paradigm

Welcome to this article where we will Find out What is Node.js Exactly and will explore the world of Node.js. We often associate JavaScript with making websites interactive and dynamic,

but did you know that it was mainly confined to web browsers?

That's where Node.js comes in. It's like a magical tool that frees JavaScript from its browser boundaries and unlocks its true potential.

In this article, we will take a closer look at how Node.js empowers JavaScript to operate outside the browser and create powerful web applications. we'll explore the features and benefits of Node.js in more detail.

But don't worry, I won't get too technical. My goal is to explain everything in simple terms and use real-life analogies so that everyone, even if you're new to programming, can understand what Node.js is all about and why it's so prevalent in web development.

So, let's dive in and discover the exciting world of Node.js together!

What is Node.js exactly?

You may have come across the definition of Node.js as a JavaScript runtime that runs JavaScript outside the browser. However, this definition can be confusing at first.

Let's break it down into simpler terms.

Think of Node.js as a tool or platform that allows JavaScript to be executed beyond the confines of a web browser. It provides JavaScript with the capability to run on servers, computers, or devices.

In other words, Node.js expands the scope of JavaScript, enabling it to be used for server-side development and other applications outside the browser environment.

Node.js is like breaking the boundaries that restricted JavaScript to a limited area and unleashing its true potential. JavaScript was originally confined to running inside web browsers, limiting its capabilities to enhancing website interactivity.

But with the introduction of Node.js, JavaScript can now operate outside of those boundaries and perform tasks beyond the browser environment.

Let's Understand this using a Real life example:

Imagine you're a chef working in a small restaurant. Your main job is to prepare delicious dishes for the customers.

However, you're only allowed to work within the confines of the restaurant's kitchen, using the ingredients and tools available inside. This limits your ability to source new ingredients from different places or collaborate with other talented chefs.

Now, imagine if someone came along and removed those limitations. Suddenly, you have the freedom to step outside the restaurant, explore different markets to find unique ingredients and connect with other chefs to exchange ideas and techniques.

This newfound freedom allows you to unleash your full potential and create extraordinary culinary experiences.

In this analogy, the restaurant represents the web browser, and you, the chef, represent JavaScript. Introducing Node.js is like stepping out of the restaurant, breaking free from the limitations, and expanding the possibilities of what JavaScript can do.

Node.js has set JavaScript free from the confines of the browser, breaking it out of its cage and unleashing its power for server-side development.

It empowers developers to use JavaScript not just in the browser, but also on servers, enabling them to build powerful web applications, real-time chat apps, data-intensive systems, and more.

Node.js opens up a whole new world of opportunities for JavaScript, making it a versatile and powerful language that can be used across different domains. It revolutionizes web development by providing a platform where JavaScript can flourish beyond the browser and fulfill its true potential.

How Does Node.js Work?

To understand how Node.js works, let's continue with our restaurant analogy. Now that you, as the chef, have stepped outside the restaurant and embraced the newfound freedom, let's see how you can make the most of it.

In the traditional cooking process, you would follow a sequential approach. You would prepare one dish at a time, waiting for each dish to cook before moving on to the next. This sequential process can be time-consuming and inefficient, especially if you have multiple dishes to prepare.

But with Node.js, things work differently. As the liberated chef, you can now multitask and work on multiple dishes simultaneously. You can start preparing one dish while another is already cooking, and perhaps brainstorm new recipes for future creations.

You are no longer bound by a strict sequence; instead, you can efficiently manage your time and resources to accomplish more.

Similarly, Node.js operates on a non-blocking, event-driven model. It can handle multiple tasks concurrently without getting stuck waiting for one task to complete before moving on to the next.

This non-blocking nature allows Node.js to make the most of available resources and deliver high performance.

In technical terms, Node.js uses an event loop, which is like a central dispatcher that listens for events and triggers corresponding actions. It allows Node.js to efficiently handle multiple requests and perform tasks asynchronously.

This means that Node.js can start processing a request, such as fetching data from a database or making an API call, and while waiting for the response, it can handle other requests, ensuring that the server remains responsive and productive.

It can handle a large number of concurrent connections and perform data-intensive operations without compromising performance.

Key Features of Node.js

Node.js comes with a set of powerful features that make it a popular choice for building web applications.

These unique features make Node.js a powerful and popular choice for building scalable, high-performance web applications. By leveraging these capabilities, developers can create efficient, real-time, and data-intensive applications that meet the demands of modern web development.

Let's explore some of its key features:

Asynchronous and Non-Blocking

Node.js follows an asynchronous and non-blocking programming model. This means it can handle multiple tasks simultaneously without waiting for each task to complete before moving on to the next one.

It's like a multitasking magician that can juggle multiple requests and operations efficiently. Let's switch gears to our restaurant analogy.

As we discussed before, in a traditional synchronous model, the chef would have to wait for each dish to finish cooking before starting the next one.

It's like a chef working alone in the kitchen, carefully monitoring each dish as it cooks, and only moving on to the next one once the previous dish is done.

But with Node.js, it's like having a highly skilled chef who can multitask effortlessly.

Imagine the chef utilizing specialized tools and equipment that handle time-consuming tasks like cooking the food.

While the food is simmering on the stove or baking in the oven, the chef can efficiently work on preparing other dishes simultaneously.

This parallel processing capability of Node.js frees the chef from the constraints of waiting for each dish to finish cooking before starting the next one.

It's like having an assistant chef or an automated cooking system that takes care of the time-consuming tasks, allowing the chef to focus on other aspects of food preparation.

The analogy of a chef using tools or automated systems to handle time-consuming tasks in the kitchen represents how Node.js leverages non-blocking I/O and event-driven architecture to maximize efficiency in web development.

By efficiently managing resources and handling multiple tasks concurrently, Node.js enables faster and more responsive applications, enhancing the overall user experience.

Event Driven Architecture

Node.js utilizes an event-driven architecture, which means it listens for events and responds to them asynchronously. Events can be triggered by various actions, such as user interactions, network requests, or file system operations.

When an event occurs, Node.js responds by executing the associated callback function, allowing the application to continue handling other tasks in the meantime.

In Restaurant Analogy, It's like running a bustling restaurant with a highly skilled chef and a set of specialized tools and equipment.

In this scenario, Node.js acts as the chef, utilizing specialized tools and equipment that handle time-consuming tasks like cooking food. These tools not only assist in the cooking process but also have the ability to notify the chef when a specific task is completed.

Just like the chef relies on these tools, Node.js leverages an event loop that acts as the notification system. When Node.js initiates a task, it registers an event and continues to process other tasks without waiting.

Meanwhile, the event loop keeps an eye on these tasks and alerts Node.js when a specific task is finished, just like the specialized tools notify the chef.

This event-driven approach of Node.js allows it to efficiently handle numerous requests and operations simultaneously, similar to how the chef can multitask with the help of specialized tools. It frees Node.js from the constraints of waiting for each task to finish before moving on to the next one, resulting in faster response times and improved performance.

Single-Threaded Event Loop

In the world of web development, Node.js stands out with its single-threaded event loop architecture. This unique approach allows Node.js to handle concurrent requests efficiently, providing excellent performance and scalability.

Let's delve into this architecture using our restaurant analogy.

Imagine your restaurant has a talented and efficient chef who can effortlessly manage multiple orders. Instead of hiring additional chefs for each order, your chef excels at prioritizing tasks, delegating responsibilities, and ensuring the smooth progress of each order.

Similarly, Node.js maximizes resource utilization by efficiently handling multiple requests within a single thread.

Node.js's single-threaded event loop architecture eliminates the need for spawning multiple threads for each request, reducing memory consumption and eliminating the overhead of context switching.

It's like having your chef expertly juggling different orders in the kitchen, without the need for additional chefs.

Remember we discussed the event loop notifying when a specific task gets finished in a previous section?

Now, let's explore how this process happens.

When a request or operation is initiated, it is placed in a task queue, waiting to be processed. The event loop continuously checks this task queue and retrieves tasks one by one for execution.

As the event loop retrieves a task from the queue, it executes the associated callback function, which may involve performing I/O operations, accessing databases, or processing data. While waiting for these operations to complete, the event loop doesn't block and continues to check for new tasks in the queue.

Once an asynchronous operation is finished, the associated callback function is placed in the event loop's callback queue. In the next iteration of the event loop, these callback functions are retrieved from the callback queue and executed.

This mechanism ensures that tasks are executed in the order they were added to the queue, maintaining the integrity of the application's logic.

This event-driven approach not only allows Node.js to efficiently manage concurrent tasks but also provides a way for the event loop to notify when a specific task finishes. When a callback function is placed in the callback queue, the event loop detects its presence and initiates its execution.

It's like your chef receiving a notification when a specific dish finishes cooking, prompting them to proceed with the next steps of food preparation.

By utilizing this architecture, Node.js optimizes performance and ensures responsiveness. The event loop, like your chef's management skills, efficiently schedules considering priority and executes tasks, allowing Node.js to handle a large number of concurrent requests seamlessly.

Cross Platform Compatibility

Node.js is built to run on multiple platforms, ensuring compatibility across different operating systems such as Windows, macOS, and Linux.

This cross-platform support enables developers to create applications that can seamlessly run on various environments.

Imagine having a versatile restaurant that can cater to customers from different locations and backgrounds. Regardless of whether your customers prefer different cuisines or have diverse dietary preferences, your restaurant is adaptable and capable of meeting their needs.

Similarly, Node.js's cross-platform compatibility allows developers to reach a wider audience and ensure their applications can be deployed and used across different operating systems.

Node.js's ability to run consistently across platforms simplifies development, deployment, and maintenance efforts, as developers can focus on building the application logic without worrying about the underlying operating system.

It provides a unified environment for developers to create robust and reliable applications that can be deployed seamlessly on various platforms.

With Node.js's cross-platform compatibility, developers can leverage its power and flexibility to build applications that can reach users across different devices and operating systems, expanding their potential user base and enhancing the accessibility of their software solutions.

Extensive Module Library (npm)

Node.js comes with a powerful module library called npm (Node Package Manager), offering a vast collection of pre-built modules and packages.

These modules cover a wide range of functionalities and can be seamlessly integrated into Node.js applications, saving developers valuable time and effort.

Imagine having a comprehensive recipe book in your restaurant kitchen, filled with a diverse selection of recipes for various specialties and techniques. This recipe book serves as a valuable resource, allowing you to enhance your culinary creations and experiment with new flavors.

In a similar manner, the npm module library empowers developers by providing a rich repository of ready-to-use modules that can be incorporated into their Node.js applications.

With npm, developers can easily search for and install modules tailored to their specific needs, whether it's for database connectivity, web frameworks, authentication, data processing, or any other functionality required for their application.

These modules have been developed and shared by a thriving community of developers, ensuring their reliability and usefulness.

By leveraging the npm module library, developers can significantly expedite the development process, as they don't have to reinvent the wheel for every functionality they require. They can rely on the existing modules, benefiting from the expertise and contributions of the wider Node.js community.

Furthermore, npm provides version management, allowing developers to easily update or switch between different module versions to meet the evolving needs of their applications. This ensures compatibility and provides a streamlined workflow for maintaining and managing dependencies.

Benefits of Node.js

Node.js offers several compelling benefits that make it a preferred choice for web development.

Let's explore some of the key Benefits of using Node.js:

Improved Efficiency and leverage JavaScript expertise

Node.js offers enhanced development efficiency and leverages JavaScript expertise. It streamlines the development process by enabling developers to utilize JavaScript on both the client and server sides of a web application.

This unified language approach eliminates the need to switch between different programming languages or frameworks, improving overall efficiency.

Just like a versatile set of tools in a restaurant kitchen that can handle various cooking techniques, Node.js empowers developers to work more efficiently and effectively.

By leveraging the same JavaScript language for both client-side and server-side development tasks, Node.js simplifies the development process. Developers can write code using JavaScript for the front-end user interface and back-end server logic, leveraging their existing JavaScript skills.

This unified approach reduces the learning curve and allows developers to reuse code, shared libraries, and their JavaScript knowledge across the entire application.

With Node.js, developers seamlessly transition between client-side and server-side programming, accessing a consistent set of tools, libraries, and frameworks. This eliminates the need to learn a new language or framework for server-side development, saving time and effort.

It's like having an experienced chef in a restaurant who is already familiar with the tools and techniques, making the introduction of new dishes or menu expansion easier and more efficient.

Furthermore, The ability to leverage existing JavaScript skills and reuse code not only reduces the learning curve but also increases productivity. Developers can quickly build upon their existing knowledge and focus on learning the specific features and capabilities of Node.js.

It's similar to experienced chefs who can adapt to new recipes and techniques effortlessly, allowing the introduction of a wider variety of delicious dishes to customers.

With Node.js and its compatibility with JavaScript, developers can leverage their existing skills and knowledge to build efficient and scalable server-side applications.

This combination of enhanced development efficiency and JavaScript expertise empowers developers to streamline the development process, deliver high-quality web applications, and create exceptional digital experiences for users.

Node js Provides Enhanced Performance

Node.js is renowned for its exceptional performance and scalability. Its event-driven, non-blocking I/O model enables it to handle numerous concurrent connections efficiently, minimizing resource wastage.

This results in accelerated response times, enhanced throughput, and superior overall performance.

Imagine having an efficient system in your restaurant that can handle a large number of customers swiftly and seamlessly. Every order is processed promptly, ensuring that all customers receive their meals without enduring lengthy waiting times.

This efficiency optimizes customer satisfaction and allows your restaurant to serve a greater volume of patrons. Similarly, Node.js excels at managing multiple concurrent connections without blocking or slowing down the application. Its event-driven architecture listens for events and responds to them asynchronously.

This means that while one connection is waiting for a response, Node.js can swiftly move on to handle other incoming requests. It's like having a team of highly skilled and dedicated staff members in your restaurant who work diligently to fulfill customer orders without any delays.

By efficiently handling concurrent connections and events, Node.js maximizes resource utilization and ensures that your application remains highly responsive.

This is especially crucial in scenarios where real-time interactions or data-intensive operations are involved.

Node.js's performance capabilities make it an ideal choice for building scalable applications that can effortlessly handle a large number of users or process significant amounts of data.

Real Time Applications

Node.js is exceptionally well-suited for developing real-time applications, ranging from interactive menus to collaborative order tracking systems. Its event-driven architecture and built-in support for WebSockets facilitate seamless communication and instantaneous updates between clients and servers.

Imagine a system in your restaurant where customers can place their orders and receive live updates as their orders are prepared and served. Node.js enables a similar experience in the digital realm.

It's like having a dynamic platform in your restaurant where customers can interact with your staff, provide instructions, and receive real-time updates on their orders.

With Node.js, you can establish persistent connections between clients and servers, enabling bidirectional communication. This means that data can be sent and received instantly, allowing for real-time collaboration and interaction.

It's like having a dedicated communication channel between your restaurant and your customers, ensuring a smooth and interactive dining experience.

The event-driven nature of Node.js plays a crucial role in enabling real-time functionality. When a client initiates an action, such as placing an order or requesting a menu update, Node.js responds promptly by triggering the appropriate event and delivering the corresponding updates to all relevant clients.

It's like having an attentive team in your restaurant who immediately responds to customer requests and ensures that everyone stays informed about the progress of their orders.

Additionally, Node.js provides native support for WebSockets, a communication protocol that enables persistent, full-duplex communication between clients and servers over a single connection.

This allows for efficient and low-latency data transmission, facilitating real-time updates without the need for frequent refreshing. It's like having a streamlined and efficient order management system in your restaurant that keeps customers updated in real time.

Whether you're building a reservation system where customers can book tables and receive instant confirmations or a collaborative tool where multiple users can contribute to a shared menu in real time, Node.js empowers you to create highly interactive and responsive experiences.

It's like having a cutting-edge digital infrastructure in your restaurant that enables seamless communication and collaboration among customers and staff.

Node js Provides Scalability

Node.js's ability to handle a large number of concurrent connections makes it highly scalable. It excels at efficiently managing resources and leveraging asynchronous operations, allowing it to handle increased workloads without compromising performance.

Imagine a bustling restaurant during peak hours, where numerous customers place their orders simultaneously. Node.js enables similar scalability in the digital realm.

It's like having a flexible and expandable system in your restaurant that can seamlessly accommodate a growing number of customers and ensure that everyone is served promptly.

The non-blocking, event-driven architecture of Node.js is One of the key strengths which we discussed earlier section.

With this architecture, Node.js can effectively manage a large number of concurrent connections. It avoids the bottleneck of traditional blocking I/O, where each operation would need to wait for the previous one to complete, by allowing operations to be executed concurrently and independently.

Node.js optimizes resource utilization by employing the single-threaded event loop architecture. Instead of spawning a new thread for each connection, it leverages a single thread to handle multiple connections, reducing memory consumption and eliminating the overhead of context switching.

The scalability of Node.js is also enhanced by its ecosystem of modules and tools specifically designed for building scalable applications. These modules provide features like clustering, load balancing, and distributed computing, enabling you to scale your application across multiple processes or even multiple servers.

It's like having a network of interconnected restaurants that collaborate to meet the demands of a large number of customers.

Whether you're running a small restaurant with a few tables or a large establishment with high customer traffic, Node.js empowers you to scale your digital infrastructure to match the needs of your business.

It's like having a responsive and adaptable system in your restaurant that grows with your customer base and ensures a seamless dining experience for everyone.

Node js has Active and Supportive Community

Node.js benefits from a vibrant and active community of developers who contribute to its growth and offer valuable resources, tutorials, and support.

This community acts as a valuable asset, providing a wealth of knowledge and expertise that makes it easier to learn and troubleshoot Node.js applications.

Imagine having a group of experienced chefs in your restaurant who are always there to offer guidance and share their expertise. They can help you improve your recipes, suggest new techniques, and troubleshoot any challenges you may encounter.

Similarly, the Node.js community serves as a supportive and knowledgeable group of individuals who are passionate about the technology and eager to help others succeed.

The Node.js community has created an extensive range of resources, including documentation, tutorials, forums, and online communities. These resources serve as a valuable knowledge base, helping developers learn Node.js and discover best practices.

It's like having access to a comprehensive library of cookbooks, recipe collections, and forums where you can exchange ideas with other chefs.

Furthermore, the community actively contributes to the development of Node.js by creating and maintaining open-source modules and libraries. These modules can be easily integrated into your projects, saving development time and effort.

It's like having a network of talented chefs who share their innovative recipes and techniques with you, allowing you to enhance your restaurant's offerings without starting from scratch.

The collaborative nature of the Node.js community also ensures that the technology stays up to date with the latest trends and developments. The community actively discusses new features, shares insights, and provides feedback, leading to continuous improvements in Node.js.

It's like being part of a culinary association or guild, where chefs come together to exchange ideas, learn from each other, and push the boundaries of their craft.

Conclusion

In conclusion, Node.js is a game-changer in web development. It allows JavaScript to break free from web browsers and enables the creation of dynamic and interactive web applications.

Just like a restaurant empowers its chef with freedom, Node.js gives JavaScript more freedom to do things it couldn't do before. It simplifies development by using a single language, JavaScript, for both the client and server sides.

Node.js excels at handling multiple tasks simultaneously, making applications highly scalable. It also benefits from a vast library of pre-built modules, saving developers time and effort.

Node.js has revolutionized the way JavaScript operates, making the web more dynamic and flavorful. It's a popular choice for building modern web applications.

So, next time you dine at a restaurant, remember how Node.js has empowered JavaScript to venture beyond its traditional confines, making the web a more exciting place.

There are scenarios where you might need to split a number into its digits and store them in an array When working with numbers in JavaScript. This can be useful for tasks such as performing mathematical operations on each digit or manipulating the digits individually.

In this article, we will delve into various techniques for splitting a number into an array of digits using JavaScript. We will not only cover the fundamental approaches but also address important considerations such as handling negative numbers and float numbers.

By the end of this article, you will gain a comprehensive understanding of how to extract and organize the digits of a number effectively. Whether you're working with integers or float numbers, this article will equip you with the necessary knowledge and techniques to accomplish the task efficiently.

So, Let's get started!

Different Ways to split numbers into Arrays

In the context of splitting numbers, there are two main approaches that we will explore in this article:

• Using string conversion

• Using math operations.

These approaches offer different ways to extract individual digits from a number and store them in an array.

By leveraging string conversion, we can convert the number into a string and iterate over its characters.

On the other hand, using math operations allows us to perform calculations to extract the digits.

Both approaches have their advantages and are suited for different scenarios.

Let's delve into each approach and explore its implementation in detail.

Splitting a Number Using String Conversion

The most straightforward approach to splitting a number into an array is by converting it to a string and then iterating over each character to extract the digits.

This technique involves converting the number to a string representation using methods like toString() or the String() constructor. Once the number is converted to a string, we can access each character and extract the desired digits.

There are multiple techniques available to do that,

Let's explore some of these techniques to gain a better understanding of how to split a number into an array using string conversion.

Split Number Using for loop

We can use a for loop to iterate over each digit of the number and add it to an array after converting the number to a string.

Here's an example that demonstrates the usage of a for loop to split a number into an array:

 function splitNumberUsingForLoop(number) {
   const digits = [];
   const numberString = number.toString(); // Convert the number to a string

   for (let i = 0; i < numberString.length; i++) {
     const digit = parseInt(numberString[i]); // Convert each character back to a number
     digits.push(digit); // Add the digit to the end of the array
   }

   return digits;
 }

 const number = 12345;
 const digits = splitNumberUsingForLoop(number);
 console.log(digits); // [1, 2, 3, 4, 5]

In the example above, we define a function called splitNumberUsingForLoop that takes a number as input. Inside the function, we initialize an empty array called digits to store the individual digits of the number. We convert the number to a string using the toString() method.

Next, we use a for loop to iterate over each character in the numberString. We convert each character back to a number using parseInt() and then push it to the digits array using the push() method.

After the loop finishes, we return the digits array, which contains all the individual digits of the number.

Using a for loop gives us control over the iteration process and allows us to handle each digit individually. It provides flexibility in case we need to perform additional operations or validations during the iteration.

Split Number Using split() Method

Another way to split a number into an array of digits in the string conversion approach is by using the split() method after converting the number to a string.

Here's an example that demonstrates the usage of the split() method:

const number = 12345;
const numberString = number.toString(); // Convert the number to a string
const digits = numberString.split(""); // Split the string into an array of individual characters

console.log(digits); // ["1", "2", "3", "4", "5"]

In the example above, we convert the number to a string using the toString() method. Then, we call the split("") method on the resulting string, passing an empty string as the separator. This splits the string into an array of individual characters, which represent the digits of the number.

By using the split() method, we can easily obtain an array of digits from a number. This approach is straightforward and can be useful when you specifically need the digit values as strings.

Split Number Using Spread Operator

Another way to split a number into an array of digits is by using the spread operator after converting the number to a string. The spread operator allows us to spread the characters of a string into individual elements of an array.

Here's an example that demonstrates the usage of the spread operator:

const number = 12345;
const numberString = number.toString(); // Convert the number to a string
const digits = [...numberString]; // Spread the characters of the string into an array

console.log(digits); // ["1", "2", "3", "4", "5"]

In the example above, we convert the number to a string using the toString() method. Then, by using the spread operator [...], we spread the characters of the string into individual elements of an array. This results in an array where each element represents a digit of the number.

Using the spread operator provides a concise and readable way to split a number into an array of digits. It is particularly useful when you need to work with the digit values as strings and want to avoid using the split() method.

Split Number Using reduce() or map() method

As you can see When using the .split() method or spread operator to split a number into an array of digits, the resulting array will contain string values as the elements.

However, if you prefer the elements to be numbers instead of strings, you can combine this approach with the .reduce() or .map() method.

Here's an example using the .reduce() method:

const number = 12345;
const numberString = number.toString(); // Convert the number to a string
const digits = numberString.split('').reduce((acc, curr) => {
  acc.push(parseInt(curr)); // Convert each character back to a number
  return acc;
}, []);

console.log(digits); // [1, 2, 3, 4, 5]

In this example, we first convert the number to a string using the .toString() method. Then, we split the string into an array of individual characters using .split('').

By applying the .reduce() method, we iterate over each character and use parseInt() to convert it back to a number. The resulting array contain the number values instead of strings.

Similarly, you can achieve the same result using the .map() method:

const number = 12345;
const numberString = number.toString(); // Convert the number to a string
const digits = [...numberString].map((digit) => parseInt(digit));

console.log(digits); // [1, 2, 3, 4, 5]

In this example, we convert the number to a string using the .toString() method. Then, by using the spread operator, we convert the string into an array of individual characters.

Finally, we apply the .map() method to iterate over each character and use parseInt() to convert it back to a number. The resulting array contains the number values extracted from the original number.

Split Number Using Array.from() Method

We can use Array.from() method to do that, This method creates a new array instance from an array-like or iterable object, allowing us to generate an array of digits from a number. To split a number using the Array.from() method, we pass the string as the first argument to Array.from() after converting the number to a string.

Additionally, we can provide a mapping function as the second argument to convert each character to a numeric digit.

Here's an example that demonstrates the usage of the Array.from() method:

const number = 12345;
const numberString = number.toString(); // Convert the number to a string
const digits = Array.from(numberString, Number); // Create an array of digits

console.log(digits); // [1, 2, 3, 4, 5]

In the example above, we convert the number to a string using the toString() method. Then, we pass the string and the Number function as arguments to Array.from(). The Number function is used as a mapping function to convert each character of the string to a numeric digit.

Using the Array.from() method provides a flexible approach to splitting a number into an array of digits. It allows us to customize the mapping function if needed and provides a clean and concise solution for the task.

Splitting a Number Using Math Operations

Another approach to splitting a number is by Using Math Operations which involves using mathematical operations such as modulus and division.

By leveraging the Remainder or modulus operator (%) and division, we can isolate each digit and add it to an array. This method is more suitable when you require precise numeric calculations along with digit extraction.

There are several ways to implement this approach.

Let's explore the most popular two of them:

Split Number Using while Loop

One way to split a number using math operations is by utilizing a while loop.

Here's an example implementation:

function splitNumberUsingWhileLoop(number) {
  const digits = [];
  let tempNumber = number;

  while (tempNumber > 0) {
    const digit = tempNumber % 10;
    digits.unshift(digit);
    tempNumber = Math.floor(tempNumber / 10);
  }

  return digits;
}

const number = 12345;
const digits = splitNumberUsingWhileLoop(number);
console.log(digits); // [1, 2, 3, 4, 5]

In this implementation, we start with an empty digits array. The tempNumber variable is initialized with the input number. The while loop runs as long as tempNumber is greater than 0. In each iteration, we extract the last digit of tempNumber using the modulus operator (%) and add it to the beginning of the digits array using the unshift() method.

Then, we update tempNumber by dividing it by 10 and using Math.floor() to remove the last digit. This process continues until tempNumber becomes 0, indicating that all digits have been extracted. Finally, we return the digits array.

Split Number Using Recursion

Recursion is another way to split a number using math operations. It involves breaking down a number into its digits by utilizing a recursive function. Each recursive call processes a portion of the number, gradually extracting the digits until the base case is reached.

Here's an example implementation:

function splitNumberRecursive(number) {
  if (number < 10) {
    return [number]; // Base case: return the single digit
  }

  const lastDigit = number % 10; // Extract the last digit
  const remainingNumber = Math.floor(number / 10); // Remove the last digit

  return [...splitNumberRecursive(remainingNumber), lastDigit]; // Concatenate the recursive result with the last digit
}

const number = 12345;
const digits = splitNumberRecursive(number);
console.log(digits); // [1, 2, 3, 4, 5]

In this recursive implementation, the function checks if the number is less than 10, which indicates that we have reached the base case of a single digit. If the base case is met, the function returns an array containing that single digit.

Otherwise, it extracts the last digit using the modulus operator (%) and removes the last digit using division and Math.floor(). The function then recursively calls itself with the remaining number and concatenates the recursive result with the last digit.

Handling Negative Numbers

So far we have discussed different approaches for splitting a number but Handling negative numbers when splitting them requires special attention to ensure accurate results. If we don't handle negative numbers separately, it can introduce complexity into our code.

Let's explore how we can handle negative numbers:

Handling Negative Numbers in String Conversion

When using string conversion to split numbers, we can incorporate handling for negative numbers during the conversion process.

Here's the updated code that considers negative numbers in for loop approach that we talked about earlier:

function splitNumberUsingForLoop(number) {
  const digits = [];
  const numberString = Math.abs(number).toString(); // Convert the absolute value of the number to a string

  for (let i = 0; i < numberString.length; i++) {
    const digit = parseInt(numberString[i]); // Convert each character back to a number
    digits.push(digit); // Add the digit to the end of the array
  }

  if (number < 0) {
    digits[0] = -digits[0]; // Modify the first digit to include the negative sign
  }

  return digits;
}

const number = -12345;
const digits = splitNumberUsingForLoop(number);
console.log(digits); // [-1, 2, 3, 4, 5]

In this updated code, we first convert the absolute value of the number to a string using Math.abs() to ensure we're working with positive numbers. The rest of the logic remains the same, where each character is converted back to a number and added to the digits array.

After the loop, we check if the original number is negative (number < 0). If it is, we modify the first digit in the digits array to include the negative sign. This way, the resulting array represents the correct split digits of the negative number.

Note: Here we have used the for loop approach only but you can do the same with other approaches too.

Handling Negative Numbers in Math Operations

When splitting numbers using Math Operations, we can also incorporate handling for negative numbers within the code. By making a simple adjustment, we can ensure accurate results even when dealing with negative values.

Here's the updated code for handling negative numbers using math operations:

function splitNumberUsingWhileLoop(number) {
  const digits = [];
  let tempNumber = Math.abs(number);

  while (tempNumber > 0) {
    const digit = tempNumber % 10;
    digits.unshift(digit);
    tempNumber = Math.floor(tempNumber / 10);
  }

  if (number < 0) {
    digits[0] = -digits[0]; // Adjust the sign of the first digit for negative numbers
  }

  return digits;
}

const number = -12345;
const digits = splitNumberUsingWhileLoop(number);
console.log(digits); // [-1, 2, 3, 4, 5]

In this updated code, we first obtain the absolute value of the number using Math.abs() and assign it to the tempNumber variable. Then, we perform the splitting process as before using the while loop. After the loop, we add an additional check to adjust the sign of the first digit if the original number is negative. This ensures that negative numbers are correctly handled during the splitting operation.

Note: Here we have used the while loop approach only but you can do the same with the recursion approach too.

Handling Float Numbers

Just like negative numbers, When it comes to splitting float numbers, additional considerations are necessary to handle both the integer and fractional parts accurately. Let's explore techniques to split float numbers into their integer and fractional components:

Handling Float Numbers in String Conversion

To split float numbers using string conversion, we can leverage the same approach as discussed earlier but need to do some extra stuff to handle the floating point.

First, we convert the float number to a string and then split it based on the decimal point. The resulting array will contain two elements: the integer part and the fractional part.

Here's the updated code for the split approach:

function splitFloatNumberUsingStringConversion(floatNumber) {
  const numberString = floatNumber.toString();
  const [integerPart, fractionalPart] = numberString.split(".");

  const integerDigits = integerPart.split("").map(Number);
  const fractionalDigits = fractionalPart ? fractionalPart.split("").map(Number) : [];

  return { integerDigits, fractionalDigits };
}

// Example usage
const floatNumber = 12.345;
const { integerDigits, fractionalDigits } = splitFloatNumberUsingStringConversion(floatNumber);
console.log(integerDigits);     // [1, 2]
console.log(fractionalDigits);  // [3, 4, 5]

In this code, the splitFloatNumberUsingStringConversion function takes a floating-point number and converts it to a string. It then splits the string into separate parts for the integer and fractional portions using the dot (.) as the delimiter.

The integer part is converted to an array of digits by splitting the string and mapping each character to a number using the map function. The fractional part is also converted to an array of digits in a similar way. If there is no fractional part, an empty array is returned for fractionalDigits.

Finally, the function returns an object containing the integerDigits and fractionalDigits arrays. These arrays can be accessed separately and used as needed. In the provided example, integerDigits contains [1, 2] and fractionalDigits contains [3, 4, 5], representing the integer and fractional parts of the original floating-point number, respectively.

Note: We have not covered the handling of float numbers in the math operation approach to keep things simple. Float numbers can introduce precision limitations and rounding errors in JavaScript. To handle float numbers accurately, additional steps and considerations are required. In this article, we have focused on the handling of whole numbers to provide a straightforward explanation.

Conclusion

In this article, we explored various techniques for splitting a number into an array in JavaScript. Whether you prefer string conversion or mathematical operations each approach offers its advantages and can be applied based on your specific requirements.

By mastering the art of splitting numbers, you'll have the flexibility to handle numerical data effectively and perform various calculations with ease.

Remember to consider factors such as decimal numbers, negative numbers, and performance optimizations when implementing these techniques. With a solid understanding of splitting numbers in JavaScript, you'll be well-equipped to tackle complex numeric tasks in your projects.

Happy coding :)

You may encounter scenarios where you need to rename an object key When working with objects in JavaScript. Renaming object keys can help to maintain consistency, enhance code readability, or align with specific naming conventions.

In this blog post, we will delve into different techniques and approaches to effectively rename object keys in JavaScript. We'll cover both mutable and immutable methods, including manual approaches using Object.assign(), Object.defineProperty(), object destructuring, property assignment, and more.

Additionally, we'll discover the benefits of leveraging external libraries like Lodash that provide specialized functions for renaming object keys.

By the end of this article, you'll have a solid understanding of how to tackle key renaming tasks in JavaScript, empowering you to write more concise and organized code.

So, Let's start!

Prerequisites

Before diving into the concept of renaming object keys in JavaScript, it's important to have a basic understanding of the language and its fundamental concepts like variables, functions, and basic control flow (such as if statements and loops).

If you are new to JavaScript or need a refresher, there are several online resources available, such as MDN Web Docs, W3Schools, and freeCodeCamp, that offer comprehensive tutorials and guides.

In addition to these resources, two highly recommended books for beginners in JavaScript are:

• Head First JavaScript Programming: A Brain-Friendly Guide

• JavaScript: The Definitive Guide: Master the World's Most-Used Programming Language

These books will provide you with a solid foundation in JavaScript programming, allowing you to confidently explore the techniques and concepts discussed in this article.

By having a strong grasp of JavaScript fundamentals, you'll be well-prepared to understand the various methods and approaches for renaming object keys in JavaScript.

Immutable Object Approach

In JavaScript, objects are mutable, meaning you can modify their properties directly. However, when it comes to renaming object keys, you may prefer to maintain immutability and create a new object with the updated key.

To achieve this, you can follow the immutable object approach, which involves creating a new object with the desired key name while preserving the other properties. This approach ensures that the original object remains unchanged.

By employing the immutable object approach, you ensure that the original object remains intact and create a new object with the desired key renaming.

There are a few commonly used techniques for achieving this.

Let's explore them:

Using Object Destructuring and Property Assignment

One way to rename an object key in an immutable approach is by utilizing object destructuring and property assignment. This technique involves extracting the value associated with the existing key and assigning it to a new key without altering the original object.

Here's an example:

const myObject = { oldKey: 'value' };  

// Renaming the key from 'oldKey' to 'newKey' 
const { oldKey: newKey, ...rest } = myObject; 
const updatedObject = { newKey, ...rest };

console.log(updatedObject); // { newKey: 'value' }

In the above example, we start with an object myObject that has a key called oldKey with a corresponding value. By using object destructuring, we create a new variable newKey and assign it the value of oldKey. The rest of the properties in the object are collected using the spread operator ...rest.

This ensures that all other properties of the original object are preserved in the updatedObject.

Finally, we create a new object updatedObject with the renamed key newKey and include the remaining properties from myObject.

Note: It's important to note that this method does not modify the original object myObject. Instead, it creates a new object updatedObject with the desired key renaming. The original object myObject remains unchanged and can still be accessed separately.

Using object destructuring and property assignment provides a concise and elegant way to rename object keys while maintaining the integrity of the original object. This approach can be especially useful when you want to create a modified version of an object without altering the original data.

Creating a New Object with Renamed Keys

Another approach to renaming object keys while preserving the original object is by creating a new object with the renamed keys.

const myObject = { oldKey: 'value' };  

// Creating a new object with renamed key 
const updatedObject = { newKey: myObject.oldKey };  

console.log(updatedObject); // { newKey: 'value' }

In the above example, we directly create a new object updatedObject with the desired key newKey and assign it the corresponding value from the original object myObject.

This allows us to achieve the renaming effect while keeping the original object intact. Unlike the object destructuring approach, which extracts all properties and creates a new object, this method selectively picks the specific key-value pair from the original object and assigns it to a new key in the updated object.

This approach can be useful when you only need to rename a few specific keys and want to avoid creating a duplicate object with all properties. It provides a straightforward and concise way to achieve key renaming without modifying the original object.

Using Object.assign() method

Another method to rename an object key while not modifying the original object is by using the Object.assign() method. This method allows you to copy the properties of one or more source objects to a target object.

For example, you can create a new object and assign the desired key-value pair using Object.assign():

const myObject = { oldKey: 'value' };

// Creating a new object with renamed key using Object.assign()
const updatedObject = Object.assign({}, {
    newKey: myObject.oldKey
 });

console.log(updatedObject); // { newKey: 'value' }

In the above example, we use Object.assign() to create a new object by merging an empty target object ({}) with the properties of the myObject and an additional key-value pair ({ newKey: myObject.oldKey }).

This allows us to achieve key renaming without modifying the original object.

Using Object.defineProperty() method

Another approach to renaming object keys while maintaining immutability is by using the Object.defineProperty() method. This method allows you to define or modify the properties of an object, including renaming keys.

Here's an example:

const myObject = { oldKey: 'value' };

// Creating a new object with the renamed key using Object.defineProperty()
const updatedObject = Object.defineProperty(
  {},
  'newKey',
  Object.getOwnPropertyDescriptor(myObject, 'oldKey')
);

console.log(updatedObject); // { newKey: 'value' }

In the above example, we create a new object updatedObject and use Object.defineProperty() to define the property newKey based on the descriptor of the oldKey from the original object. This creates a new object with the desired key renamed while preserving the associated value.

By utilizing Object.defineProperty(), we can achieve key renaming in an immutable manner by creating a new object with the renamed key, leaving the original object unchanged.

Modifying the Original Object

If you are open to modifying the original object, you can directly rename the key within the existing object by deleting the old key and assigning a new key-value pair. This approach allows you to update the object in place and achieve the desired key renaming effect.

We can achieve this by using delete operator or combining other methods with delete operator.

Let's explore them:

Note: It's important to note that this approach directly modifies the original object. If you have any dependencies or references to the original key, they will be impacted by this renaming operation.

Therefore, consider this method when it is acceptable and desired to update the object in place.

Using delete operator

Using the delete operator is the most commonly used approach to rename object keys by modifying the original object in Javascript.

Here's an example:

const myObject = { oldKey: 'value' };  

// Renaming the key within the original object 
myObject.newKey = myObject.oldKey; 
delete myObject.oldKey;  

console.log(myObject); // { newKey: 'value' }

In the above example, we start with an object myObject that has a key called oldKey with a corresponding value. To rename the key, we first assign the value of myObject.oldKey to a new key called newKey within the same object. This effectively renames the key while preserving the associated value.

Next, using the delete operator, we remove the oldKey from the object, ensuring that only the new key remains. As a result, the object is modified, and we obtain the desired key renaming within the original object itself.

You can also use bracket notation to assign the new value and delete the old one:

const myObject = { oldKey: 'value' };  

// Renaming the key within the original object 
myObject["newKey"] = myObject["oldKey"]; 
delete myObject["oldKey"];  

console.log(myObject); // { newKey: 'value' }

Combining Other methods with delete operator

While renaming an object key Modifying the Original Object approach typically refers to using the delete operator, it is worth noting that you can achieve the same effect by combining other techniques like Object.assign() or Object.defineProperty() with the delete operator.

Here's an example that demonstrates the combination of techniques:

const myObject = { oldKey: 'value' };

// Renaming the key using Object.assign() and delete operator
Object.assign(myObject, { newKey: myObject.oldKey });
delete myObject.oldKey;

console.log(myObject); // { newKey: 'value' }

In the above example, we first use Object.assign() to assign a new key-value pair to the original object, effectively renaming the key. Then, we use the delete operator to remove the old key from the object.

By combining these techniques, we achieve the desired key renaming effect while modifying the original object.

It's important to consider the implications of combining these techniques. Ensure that the properties you are assigning using Object.assign() does not conflict with existing keys in the object.

By combining different techniques, you can customize the key renaming process and choose the most suitable approach for your specific use case.

Using a Library or Utility Function

In addition to the manual approaches discussed earlier, you can leverage existing JavaScript libraries or utility functions specifically designed for renaming object keys. These libraries provide convenient methods that simplify the process and offer additional functionalities.

One such popular library is Lodash, which provides a rich set of utility functions for JavaScript. Lodash includes a renameKeys function that allows you to rename object keys easily.

Note: The approach mentioned in this section requires the lodash.js library, which is not available in standard JavaScript. To use this method, you need to install the lodash library using the following command:

npm i --save lodash

Please note that this command assumes you have npm (Node Package Manager) installed and configured in your development environment. Installing the lodash library will provide you with additional functionality for renaming object keys in JavaScript.

Here's an example of how you can use Lodash's renameKeys function:

const _ = require('lodash');  
const myObject = { oldKey: 'value' };  

// Renaming the key using Lodash 
const updatedObject = _.renameKeys(myObject, { oldKey: 'newKey' });  

console.log(updatedObject); // { newKey: 'value' }

In the above example, we start by importing the Lodash library using the require statement. We have an object myObject with a key called oldKey and its corresponding value.

By using Lodash's renameKeys function, we pass in the myObject and an object specifying the key mapping to perform the renaming. In this case, we want to rename the oldKey to newKey.

The renameKeys function performs the key renaming operation and returns a new object updatedObject with the renamed key.

By utilizing a library like Lodash, you can benefit from well-tested and optimized code, reducing the amount of custom code you need to write and potentially improving performance.

Rename multiple keys using map() method

So far, we have explored various approaches to renaming object keys in javascript. However, there may be situations where you need to rename multiple keys simultaneously.

In such cases, you can leverage the map() method in combination with any of the techniques discussed in this article.

The map() method allows you to iterate over the keys of an object and perform a transformation operation on each key-value pair. By utilizing this method, you can easily rename multiple keys in one go.

Here's an example that demonstrates the use of the map() method for renaming multiple keys:

const myObject = {
  oldKey1: 'value1',
  oldKey2: 'value2',
  oldKey3: 'value3'
};

const keyMap = {
  oldKey1: 'newKey1',
  oldKey2: 'newKey2',
  oldKey3: 'newKey3'
};

const updatedObject = Object.fromEntries(
  Object.entries(myObject).map(([key, value]) => [keyMap[key] || key, value])
);

console.log(updatedObject);
/*
{
  newKey1: 'value1',
  newKey2: 'value2',
  newKey3: 'value3'
}
*/

In the above example, we define a keyMap object that maps the old keys to their corresponding new keys. We then use the map() method in combination with Object.entries() to iterate over the object's key-value pairs.

Within the map() callback, we check if a key exists in the keyMap object and use the mapped new key if available, or keep the original key as is.

Finally, we use Object.fromEntries() to convert the updated key-value pairs back into an object.

By using the map() method, you can efficiently rename multiple keys in an object with ease. This approach provides flexibility and allows for more complex key renaming scenarios.

Deep Object Key Renaming

In some cases, you may need to rename keys that are nested within nested objects or arrays. The techniques mentioned earlier can be extended to handle deep object key renaming.

Note: This section covers an advanced technique for renaming keys within deeply nested objects. If you find it challenging or are not familiar with nested data structures in JavaScript, feel free to skip this section.

One approach is to use recursion to traverse through the object and rename keys at each level.

Here's an example implementation:

function renameKeysDeep(obj, keyMap) {
   if (typeof obj !== 'object' || obj === null) {
     return obj;
   }

   if (Array.isArray(obj)) {
     return obj.map((item) => renameKeysDeep(item, keyMap));
   }

  const renamedObj = {};

  for (const key in obj) {
     if (obj.hasOwnProperty(key)) {
       const newKey = keyMap[key] || key;
       renamedObj[newKey] = renameKeysDeep(obj[key], keyMap);
     }
   }
   return renamedObj; 
}  

const myObject = {
   id: 1,
   info: {
     name: 'John',
     age: 30,
     address: {
       street: '123 Main St',
       city: 'New York',
     },
   },
 };  

const updatedObject = renameKeysDeep(myObject, {
   id: 'userId',
   name: 'fullName',
   street: 'location.street',
 });  

console.log(updatedObject); 

/* 
{
   userId: 1,
   info: {
     fullName: 'John',
     age: 30,
     address: {
       location.street: '123 Main St',
       city: 'New York',
     },
   },
 } 
*/

In this provided example, the renameKeysDeep function is employed to recursively traverse the object and rename keys based on the provided keyMap object.

The function intelligently handles nested objects and arrays, ensuring that keys are appropriately renamed throughout the data structure.

By implementing deep object key renaming, you gain the flexibility to work with intricate data structures and maintain consistent key renaming across all levels of nesting.

This technique proves valuable when you encounter complex objects that require key modifications within deeply nested hierarchies.

Conclusion

In this blog post, we explored various techniques for renaming object keys in JavaScript. We discussed the Immutable Object Approach, Modifying the Original Object with Renamed Keys, Using a Library or Utility Function, and Deep Object Key Renaming.

These approaches provide different ways to achieve key renaming based on factors such as immutability, in-place modification, external library usage, renaming multiple keys, and handling nested objects.

By understanding these techniques, you now have the tools to efficiently rename object keys according to your specific needs. Choose the approach that suits your project and enjoy the benefits of consistent and readable code.

Happy coding :)

Working with strings is a common task in JavaScript development. Whether you're validating user input, processing data, or implementing string manipulation operations, it's important to have robust techniques to check if a string is empty in javascript.

In this blog post, we will dive into various approaches to check if a string is empty in JavaScript. We'll cover methods that not only detect an empty string but also handle scenarios where the string may contain only whitespace characters, or it may be null or undefined.

By familiarizing yourself with these techniques, you'll gain the knowledge and tools necessary to handle empty string scenarios effectively in your JavaScript code.

Let's get started!

Why do we need to check Empty string

Before we jump into different ways of checking if a string is empty or not, let's take a moment to understand why it's important. At first, it may seem like a small detail, but there are good reasons why we need to pay attention to empty strings.

By understanding the reason, we can see how this seemingly simple task can have a big impact on our code.

To illustrate the importance of checking for an empty string, let's consider a simple example.

Imagine a scenario where you have a search feature on your website that allows users to input a search query. Let's say the search functionality uses JavaScript to process the query and display the search results.

Here's a code example without checking for an empty string:

// Example: Search functionality without checking for an empty string 
let performSearch = function(){
    // code here
}
let searchQuery = document.getElementById('search input').value 
// Process the search query and display the results 
performSearch(searchQuery)

In this code, the searchQuery variable is assigned the value of the user's input from an HTML input field with the ID searchInput. However, this code doesn't include any validation to check if the user has actually entered a search query or left the field empty.

The problem arises when a user submits the form without entering any search query. Without checking for an empty string, the code will proceed to process the empty search query. This can lead to unexpected behavior, such as displaying incorrect or irrelevant search results or throwing errors in the search functionality.

By not checking for an empty string in the search functionality, if the user submits the form without entering any search query, the code will still proceed to execute the search logic.

In this case, it will log an error message indicating an empty search query. This helps to highlight the unexpected behavior that can occur when empty input is not properly validated.

To address this issue, it is important to check if the search query is empty before proceeding with the search functionality.

Method 1: Using the Length Property

The simplest way of checking if a string is empty in JavaScript is the length property. By comparing the length of a string to zero, we can determine if it is empty or not.

let myStr = ''

if (myStr.length === 0) {
  console.log('This is a javascript empty string!')
}

However, this approach will not handle cases where the string contains only whitespace characters.

To overcome this, we can use the trim() method to remove the leading and trailing whitespace before checking the length.

Consider the following code snippet:

let myStr = ' ';

if (myStr.trim().length === 0) {
  console.log('This is a javascript empty string!');
} else {
  console.log('This is NOT a javascript empty string!');
}

In this case, the initial check would erroneously classify the string as non-empty due to the presence of whitespace.

However, by applying the trim() method, we ensure that whitespace is eliminated before checking the length, and correctly identifying an empty string.

It's important to note that the length property does not work for null or undefined values, and attempting to access the length property of a null or undefined value will throw an error.

To handle these, we can add additional conditions to check if the value is of a type string before performing the length check.

For instance:

let myStr = null;

if (typeof myStr === 'string' && myStr.trim().length === 0) {
  console.log('This is a javascript empty string!');
}

This code first verifies that the value is a string using the typeof operator before applying the trim() method and checking the length. This approach prevents errors when dealing with null or undefined values.

To handle all of these null, undefined, and empty string at the same time, we can combine the conditions using the logical (||) OR operator:

let myStr = null;

if (myStr === null || myStr === undefined || myStr.trim().length === 0) {
  console.log('This is a javascript empty string!');
} else {
  console.log('This is not a javascript empty string!');
}

By considering all these scenarios, we can accurately determine whether a string is empty or not, ensuring proper handling and avoiding potential issues in our code.

Method 2: comparing to a string

Another approach to checking if a string is empty is by comparing it to an empty string.

Here's an example:

let myStr = "";

if (myStr === "") {
  console.log("This is a javascript empty string!");
}

However, similar to the previous method, this approach does not consider strings that contain only whitespace characters. To treat a string containing only whitespace as empty, we can use the trim() method before comparing it to an empty string.

Here's an example function that checks if a string is empty, considering whitespace characters:

function checkIfEmpty(str) {
  if (str.trim() === '') {
    console.log('String is empty string');
  } else {
    console.log('String is NOT empty string');
  }
}

const str1 = 'not empty';
const str2 = '';      // empty
const str3 = ' ';     // contains only whitespace

checkIfEmpty(str1);   // outputs: String is NOT empty
checkIfEmpty(str2);   // outputs: String is empty
checkIfEmpty(str3);   // outputs: String is empty

In the checkIfEmpty function, we call the trim() method on the string to remove any leading or trailing whitespace. Then, we compare the resulting trimmed string with an empty string to determine if it's empty or not.

Using the trim() method ensures that strings containing only whitespace characters are treated as empty. It removes all whitespace from the beginning and end of the string, returning a new string without modifying the original.

Note: Trimming a string is particularly useful when validating required fields in a form, as it helps ensure that the user entered actual data instead of just whitespace.

Method 3: Using the ! Operator

Javascript treats empty strings as falsy values, which means they evaluate to false in a boolean context. We can take advantage of this behavior to check if a string is empty using the negation operator (!).

Here's an example:

function isEmptyString(str) {
  return !str;
}

In this example, the isEmptyString function takes a string as an argument and returns true if the string is empty, and false otherwise. By using the negation operator !, we are essentially checking if the string is falsy, which includes empty strings.

However, like the previous methods, this approach does not consider strings that contain only whitespace characters. To handle whitespace characters, we can combine this approach with the trim() method.

Here's an example:

function checkIfEmpty(str) {
  if (!str.trim()) {
    console.log('String is empty');
  } else {
    console.log('String is NOT empty');
  }
}

const str1 = 'not empty';
const str2 = '';      // empty
const str3 = ' ';     // contains only whitespace

checkIfEmpty(str1);   // outputs: String is NOT empty
checkIfEmpty(str2);   // outputs: String is empty
checkIfEmpty(str3);   // outputs: String is empty

In the checkIfEmpty function, we call the trim() method on the string to remove leading and trailing whitespace. Then, we compare the trimmed string with an empty string to determine if it's empty or not.

The trim() method removes all whitespace from the beginning and end of a string and returns a new string, without modifying the original. This allows us to accurately handle strings with whitespace characters.

It's important to note that checking for an empty string using the negation operator or combining it with trim() will not handle null and undefined values. If you also need to handle null and undefined, you can modify the condition as follows:

javascriptCopy codefunction checkIfEmpty(str) {
  if (!str || str.trim() === '') {
    console.log('String is empty');
  } else {
    console.log('String is NOT empty');
  }
}

In the above code, the condition !str checks if the str variable is falsy (null, undefined, an empty string, or a 0). If it is, the code inside the if block will be executed, indicating that the string is empty.

By incorporating these checks, we ensure proper handling of empty strings, including those with whitespace characters, null values, and undefined variables, in our JavaScript code.

Method 4: Using the Nullish Coalescing Operator (??)

Until now, we have explored three ways to check for an empty string. However, there is an advanced approach introduced in ECMAScript 2020 that can help reduce the amount of code needed.

The nullish coalescing operator (??) provides a concise way to check if a string is empty or bullish:

function isEmptyString(str) {
  return (str ?? '') === '';
}

In the code above, the nullish coalescing operator (??) checks if the value of str is either null or undefined. If it is, the operator returns an empty string ''. We then compare the result with an empty string '' to determine if the string is empty or nullish.

By using the nullish coalescing operator, we can handle the scenario where the string is either null or undefined.

Additionally, we can leverage the optional chaining (?.) operator to handle null and undefined values:

const str = ' ';

if (str?.trim()) {
  console.log('The string is NOT empty');
} else {
  console.log('The string is empty');
}

The optional chaining operator (?.) short-circuits and returns undefined if the value to the left is nullish (null or undefined). This allows us to handle cases where the string variable holds an undefined value:

const str = undefined;

if (str?.trim()) {
  console.log('The string is NOT empty');
} else {
  console.log('The string is empty');
}

Instead of encountering an error when trying to call the trim() method on an undefined value, the optional chaining operator prevents the error by returning undefined.

Using the nullish coalescing operator and optional chaining operator can simplify your code and handle null, undefined, and empty string scenarios more effectively.

Value is NOT an empty string, undefined or null

Previously, we learned how to check if a string is empty, null, or undefined. Now, let's explore how to check if a string is not an empty string, undefined, or null using a similar approach.

To determine if a value is not an empty string, undefined, or null, you can use the logical AND (&&) operator in JavaScript. This approach ensures that all conditions must be met for the if block to be executed.

Let's break down the code:

const str = 'bobbyhadz.com';

if (typeof str !== 'undefined' && str !== null && str.trim() !== '') {
  console.log('The value is NOT undefined, null, or an empty string');
} else {
  console.log('The value is undefined, null, or an empty string');
}

In the code above, we perform the following checks:

1. First, we use typeof to check if the variable str is not of type undefined. This condition prevents the code from throwing an error if str has not been declared or defined.

2. Next, we check if str is not null. The null value represents the intentional absence of any object value. In javascript, By checking whether the string is null or empty, we ensure that the variable has a valid value.

3. Finally, we verify that str.trim() is not an empty string. An empty string has no characters and is represented by two quotation marks with nothing in between.

By combining these conditions with the logical AND operator (&&), we ensure that all of them must evaluate to true for the if block to be executed. If any of the conditions is not met, the else block runs, indicating that the value is either undefined, null, or an empty string.

Using this approach provides a comprehensive check to determine if a value has valid content, helping you avoid unexpected behavior or errors in your code.

Conclusion

In this blog post, we have explored various techniques to check for empty, null, or undefined strings in JavaScript. By using methods such as length comparison, string comparison, negation operator (!), and nullish coalescing operator (??), we can effectively handle these scenarios.

By incorporating these techniques into your code, you can ensure the reliability and stability of your JavaScript applications. Remember to practice and experiment with these methods to deepen your understanding and proficiency.

Continuously refining your skills will make you a more adept JavaScript developer, capable of leveraging these techniques to enhance the functionality of your applications.

Keep exploring and enjoy the journey of mastering JavaScript!

Resources

• https://www.freecodecamp.org/news/javascript-check-empty-string-checking-null-or-empty-in-js/

• https://bobbyhadz.com/blog/javascript-check-if-string-is-empty

There are many ways to round a number to 2 Decimal Places in javascript. Also, you may have read a few articles on the internet discussing different approaches to do that.

But one thing that I have realized all of the articles has just talked about a few techniques of doing that but not much about the use case of it or things that we need to consider about it.

In this article, I will try to give you the full explanation of it not only discussing various techniques and methods that can be used to achieve the desired rounding effect but also shed light on the practical use cases and considerations associated with rounding. And we are taking two 2 decimal points it doesn't mean we will always use 2 decimal places it can be any number of decimal places depending on the specific use case and requirements of the application.

But, since we are talking about so many things it doesn't mean this will make things so complicated, not at all. I will make sure that we are getting the whole Idea and also keeping things very easy to understand at the same time.

So let's begin.

Why Do We Need to Round a Number?

Let's start our journey by answering the question that might appear in a person's mind when he will first hears the term "Round a Number to 2 Decimal Places".

And that is "Why do we need it?".

This is a very important and at the same time very relevant question that needs to be answered.

To answer the question let's consider a practical scenario:

Suppose you have an application that tracks the temperature readings from different sensors. Each sensor provides temperature measurements with high precision, including values beyond two decimal places.

For example:

• Sensor 1: 25.7689°C

• Sensor 2: 26.1356°C

• Sensor 3: 25.9241°C

To calculate the average temperature from these sensor readings, you add them up and divide them by the total number of sensors. The average temperature without rounding would be 25.9429°C.

However, displaying the average temperature with all the decimal places can be visually overwhelming and unnecessary for most users. It's more appropriate to round the average temperature to a desired level of precision, such as 2 decimal places, to provide a more concise and meaningful representation.

By rounding the average temperature to 2 decimal places, the displayed value becomes 25.94°C.

In this scenario rounding the number helps to simplify the temperature representation, making it easier to read and understand without sacrificing the overall accuracy significantly.

This is just a simple example, there are many scenarios where we will be in need of rounding the number to desired decimal places.

Different Ways to Round a Number

Rounding numbers in JavaScript can be achieved using various approaches.

Here are different ways to do that:

JavaScript toFixed Method

The first way that we will talk about is the toFixed() method. This is a built-in JavaScript function that allows you to round a number to a specific number of decimal places. It provides a convenient way to format and display numeric values precisely.

The toFixed() method is particularly useful when you need to ensure a consistent number of decimal places in your calculations, financial applications, or data representation.

Here's how you can use the toFixed() method to round numbers to 2 decimal places:

const number = 3.14159; 
const roundedNumber = number.toFixed(2); 
console.log(roundedNumber); // Output: "3.14"

In this method, you call the toFixed() method on a number and provide the desired number of decimal places as an argument. The method returns a string representation of the rounded number with the specified decimal places.

One key advantage of using toFixed() is that it automatically adds trailing zeros if necessary.

For example:

If you have the number 3, calling toFixed(2) will return 3.00, ensuring that the output always has the specified number of decimal places.

Note: It's important to note that the toFixed() method uses rounding rules, which means that if the next decimal place is 5 or greater, it rounds up the preceding digit.

For example:

if you have the number 3.145, calling toFixed(2) will round it to 3.15

Math.round() Method

The Math.round() function is another approach to round a number to the nearest integer. By combining it with some arithmetic operations, we can round a number to 2 decimal places.

Here's an example:

const number = 3.14159; 
const roundedNumber = Math.round(number * 100) / 100; 
console.log(roundedNumber); // Output: 3.14

In this example, we have multiplied the number by 100 to shift the decimal places to the right. Then, we have applied Math.round() to round the adjusted number to the nearest integer. Finally, we have divided the result by 100 to shift the decimal places back to the original position.

This way of rounding numbers is a little bit tricky but it can be useful in scenarios where more precise control over the rounding process is required, or when you want to avoid using the toFixed() method.

Math.floor() or Math.ceil()

If you want to round a number to 2 decimal places but always javascript round down or always round up, you can use the Math.floor() or Math.ceil() function, respectively.

Here are the examples:

const number = 3.14159;

// Rounding down
const roundedDown = Math.floor(number * 100) / 100;
console.log(roundedDown); // Output: 3.14

// Rounding up
const roundedUp = Math.ceil(number * 100) / 100;
console.log(roundedUp); // Output: 3.15

In the above example, we have used both Math.floor() and Math.ceil() functions to round the number to 2 decimal places.

Using Math.floor() ensures that the number is always rounded down to the nearest integer. In our example, we multiply the number by 100 to shift the decimal places to the right, apply Math.floor() to round it down to the nearest integer, and then divide it by 100 to shift the decimal places back.

On the other hand, Math.ceil() always rounds up to the nearest integer. Similarly, we multiply the number by 100, use Math.ceil() to round it up, and divide it by 100 to restore the original decimal places.

These methods are particularly useful when you have specific rounding rules to follow, such as in financial calculations or when dealing with quantities that cannot be fractional.

parseFloat() in combination with toPrecision()

Rounding a number to 2 decimal places can also be achieved by using parseFloat() in combination with the toPrecision() function. This method provides an alternative approach to obtaining the desired rounded value.

Here's an example:

const number = 3.14159; 
const roundedNumber = parseFloat(number.toPrecision(3));
console.log(roundedNumber); // Output: 3.14

In this approach, we utilize the toPrecision(3) function, which returns a string representation of the number with four significant digits. By specifying 3 as the argument, we ensure that the resulting string contains the necessary precision for rounding to 2 decimal places.

Next, we apply the parseFloat() function to the resulting string. This converts the string representation back into a number, effectively rounding it to 2 decimal places.

Using parseFloat() in combination with toPrecision() allows us to round the number to 2 decimal places without resorting to explicit multiplication or arithmetic operations. It provides a concise and straightforward approach to achieving the desired rounding effect.

Note: It's important to note that toPrecision() method works based on significant digits rather than a specific decimal place.

Therefore, it may yield slightly different results when dealing with numbers that have trailing zeros or non-zero digits after the second decimal place.

For Example:

let number = 0.3442; 
console.log(number.toPrecision(3)); // Output: 0.344

In this example you can see we are getting 0.344 as output where our expected result is 0.30

So, be carefull of this thing when choosing this approach.

Math.trunc() method

The Math.trunc() method, in combination with appropriate arithmetic operations, offers a concise solution for rounding numbers to 2 decimal places.

Let's explore the following example:

const number = 3.14159; 
const roundedNumber = Math.trunc(number / 0.01) * 0.01;
console.log(roundedNumber); // Output: 3.14

In this example, we begin by dividing the number by 0.01. This operation effectively shifts the decimal places two positions to the left.

By doing so, we convert the number to an integer value, discarding the decimal portion.

Next, we apply the Math.trunc() function to the result of the division. Math.trunc() returns the integer part of a number and discards any fractional digits.

This step ensures that we retain only the whole number part obtained from the previous division.

Finally, we multiply the truncated number by 0.01 This multiplication restores the original decimal places, effectively rounding the number to 2 decimal places.

Note: it's important to note that this method relies on integer manipulation and may not be suitable for all rounding scenarios.

Consider the specific requirements of your use case, such as handling negative numbers or ensuring consistent behavior with rounding rules, when selecting this approach.

Rounding with Bitwise Operators

So far, we have discussed 5 ways of rounding but all of these were using javascript built in methods. If you prefer a more customized approach, you can use Bitwise operators for doing that.

By using the bitwise OR operator (|) in combination with multiplication and division, you can effectively round the number.

Here's an example:

const number = 3.14159; 
const roundedNumber = (number * 100 | 0) / 100; 
console.log(roundedNumber); // Output: 3.14

In this example, we multiply the number by 100, effectively shifting the decimal places 2 positions to the right.

Then, we apply the bitwise OR operation (|) with 0. This bitwise operation converts the multiplied number to an integer by truncating the decimal portion.

Finally, we divide the truncated number by 100, shifting the decimal places back to their original position, resulting in a rounded number with two decimal places.

Note: it's important to note that bitwise operations are typically used for manipulating integer values and may not be as intuitive for rounding purposes.

While this method provides an alternative approach to rounding, it's crucial to consider the implications of using bitwise operators and the potential for unexpected behavior if applied incorrectly.

It's recommended to use bitwise rounding with caution and ensure it aligns with your specific requirements.

Things to Consider

At this point of this article, we have learned 6 ways of rounding a number. But there are a few important factors to consider When rounding a number.

Because if you don't consider these things it may occur complications in your code sometimes. Also, there are different ways to round a number and every way of rounding has its own pros and cons. These considerations will help you to find out which one fits best for your specific use case.

Let's explore some key considerations to keep in mind:

Negative Numbers

When rounding numbers to two decimal places in JavaScript, it's important to consider how negative numbers should be handled.

Depending on your specific use case and desired outcome, you may need to decide whether negative numbers should be rounded away from zero (upwards) or towards zero (downwards). If you want to round negative numbers away from zero, you can use the Math.ceil() function. This function always rounds up to the nearest greater or equal integer. When applied to negative numbers, it rounds them toward positive infinity.

For example:

-3.14 would be rounded to -3.00

On the other hand, If you prefer to round negative numbers toward zero, you can use the Math.floor() function. This function always rounds down to the nearest lesser or equal integer. When applied to negative numbers, it rounds them toward negative infinity.

For example:

-3.14 would be rounded to -4.00

Consider the specific requirements of your application and the desired behavior for negative numbers and choose the rounding approach that best aligns with your use case.

Handling NaN and Infinity

When dealing with floating-point numbers in JavaScript, it's essential to handle special cases like NaN (Not a Number) and Infinity. These values can occur as a result of specific calculations or user input and can lead to unexpected results or errors if not properly handled.

Therefore, it's important to check for these special cases before performing any rounding operations.

Let's have a look at how can we handle these:

• NaN Detection: Use the isNaN() function to check if a value is NaN. This function returns true if the value is NaN and false otherwise. By checking for NaN before rounding, you can handle this special case appropriately based on your application's requirements.

• Infinity Detection: To detect Infinity, you can use the isFinite() function. This function returns true if the value is a finite number (including negative and positive values) and false if it is Infinity or NaN. Similar to NaN, it is important to handle Infinity separately to avoid any unexpected behavior during rounding.

By handling NaN and Infinity cases appropriately, you can prevent unexpected results or errors in your rounding logic. Implementing proper checks and error handling mechanisms will enhance the robustness and reliability of your code, ensuring that it can handle a wide range of input scenarios without encountering issues related to these special values.

Intermediate Calculations

When performing intermediate calculations before rounding numbers to 2 decimal places in JavaScript, you have two options to consider:

• Rounding at Each Step: Rounding at each step involves rounding the intermediate result at every calculation step. This approach helps maintain accuracy throughout the calculations by minimizing rounding errors. It is particularly useful for complex calculations that involve multiple arithmetic operations.
  However, rounding at each step may increase computational overhead and potentially impact performance, especially when dealing with a large number of intermediate calculations.

• Rounding at the End: Rounding at the end means performing the rounding operation after all the intermediate calculations are completed. This approach can be more efficient, especially for simpler calculations or cases where the rounding precision requirement is not critical at each intermediate step.
  By rounding at the end, you reduce the number of rounding operations performed and potentially improve performance.
  However, it's important to be aware that rounding errors may accumulate throughout the intermediate calculations, which can impact the final result.

The choice between rounding at each step or rounding at the end depends on the complexity of your calculations, the level of accuracy required, and the performance considerations of your specific use case.

It is recommended to conduct thorough testing and validation to determine which approach yields the desired accuracy and performance characteristics for your application.

By carefully considering the timing of rounding during intermediate calculations, you can strike a balance between accuracy and efficiency, ensuring that your rounded results are both precise and reliable.

Precision and Data Integrity

When rounding numbers in JavaScript, it's important to consider the precision and data integrity implications. Rounding introduces a level of imprecision, which can impact the accuracy of calculations and data analysis.

While rounding to two decimal places improves readability and is commonly used for display purposes, it's crucial to assess whether this level of precision is acceptable for your specific application.

Depending on the nature of your data and the requirements of your calculations, you may need higher precision to maintain data integrity.

To determine the right precision level:

• Check Application Requirements: Different applications have different precision needs. Evaluate your specific requirements, such as financial data, scientific calculations, or statistical analysis.

• Assess Calculation Accuracy: Complex calculations or intermediate steps may benefit from rounding at each stage, while simpler operations can be rounded at the end for efficiency.

• Consider Data Sensitivity: Determine if small deviations are significant in your context. If precision is crucial for data analysis or decision-making, higher decimal places or alternative methods may be needed.

By considering these factors, you can choose the appropriate rounding method that meets your needs and maintains accuracy in your calculations.

Consistency and Communication

Maintaining consistency in rounding practices is of paramount importance to ensure accurate interpretation and avoid confusion in your application. When rounding numbers to two decimal places in JavaScript, it's crucial to establish clear and consistent rounding rules throughout your codebase. To maintain consistency, follow these guidelines:

• Document Rounding Approach: Clearly document and communicate the rounding method and precision used in your JavaScript code. Share this information with developers, testers, and future maintainers so that everyone understands how rounding is handled.

• Consider Context-Specific Rules: Be aware of any industry or domain-specific rules or regulations regarding rounding. Align your rounding approach with these guidelines, especially in areas such as finance or currency calculations.

• Maintain Consistency Across the Application: Apply the same rounding method and precision consistently throughout your application. This ensures that the interpretation of rounded values remains uniform and avoids confusion caused by inconsistent rounding practices.

• Update Documentation and Communicate Changes: Keep your rounding documentation up to date and communicate any changes or refinements to the rounding methodology. This ensures that all stakeholders are aware of the updates and can adjust their understanding accordingly.

By following these principles, you can establish a reliable and consistent rounding approach in your JavaScript code, promoting accuracy and clarity in the interpretation of rounded numbers.

Localization and Internationalization

When rounding numbers, it's essential to consider the localization and internationalization aspects. Rounding conventions can vary across different regions and languages, and it's important to be aware of specific rounding rules or cultural expectations that may apply to your target audience.

If your application supports multiple locales, it's crucial to ensure that the rounding behavior aligns with the conventions of the selected locale.

Here are some key points to consider:

• Regional Rounding Conventions: Different regions may have different ways of rounding numbers. It's important to understand the rounding practices in your target regions to ensure accuracy and cultural appropriateness.

• Language and Presentation: Rounding can affect how numbers are presented in different languages. Pay attention to language-specific nuances and present rounded numbers in a culturally and linguistically appropriate manner.

• Locale-specific Formatting: Follow the formatting conventions of the selected locale when displaying rounded numbers, including decimal and thousand separators, currency symbols, and other numeric representations.

• Localization Libraries and APIs: Use localization libraries and APIs in JavaScript to handle localized rounding and number formatting. These tools simplify the implementation of localized rounding based on specific locales.

• User Preferences: Consider allowing users to customize the rounding behavior to meet their preferences, as some users may have specific rounding requirements based on their cultural or professional context.

By considering localization and internationalization aspects in rounding numbers, you ensure that your application respects cultural conventions, meets user expectations, and provides a seamless experience for users from different regions and languages. Adapting rounding behavior and number presentation to the specific locale creates a more inclusive and user friendly application.

Testing and Validation

Testing and validating your rounding implementation is crucial to ensure that it performs as expected in various scenarios. By conducting thorough tests, including edge cases and boundary values, you can verify the accuracy and consistency of the rounding results.

Consider the following points when testing and validating your rounding implementation:

• Test Coverage: Design test cases that cover a wide range of input values, including both positive and negative numbers. Test scenarios that involve rounding up, rounding down, and rounding to the nearest value. Include edge cases such as numbers close to the rounding thresholds and extreme values to ensure your implementation handles them correctly.

• Consistency Checks: Validate that the rounding results are consistent across multiple rounds of testing. Run the same set of tests multiple times to ensure the output remains the same. This helps identify any non-deterministic behavior or inconsistencies in the rounding process.

• Boundary Values: Pay special attention to test cases involving boundary values. These are values that are close to the rounding thresholds, such as numbers ending in .005 or .995.
  Verify that the rounding behavior aligns with your desired outcome and adheres to the rounding rules you've defined.

• Comparison to Expected Results: For each test case, compare the rounding results to the expected outcomes. This can be done manually or through automated assertions.
  Ensure that the rounded values match your expectations, considering factors such as the rounding method, precision, and specific rounding rules.

• Automated Testing: Implement automated tests using testing frameworks or libraries available in JavaScript. Automated tests can be run repeatedly and integrated into your development workflow, providing efficient and consistent validation of your rounding implementation.
  Consider writing unit tests, integration tests, or even end-to-end tests that cover rounding scenarios across different parts of your application.

• Validation with Real World Data: If possible, validate your rounding implementation using real-world data or datasets representative of your application's usage. This can help identify any issues or unexpected behavior that may arise when dealing with actual data.

• Performance Considerations: Assess the performance impact of your rounding implementation, especially if it's applied to a large number of data points or performed in computationally intensive calculations.
  Measure the execution time and resource consumption to ensure that the rounding process is efficient and does not introduce significant bottlenecks in your application.

By following these testing practices, you can ensure the accuracy, consistency, and performance of your rounding implementation, giving you confidence in its reliability and suitability for your application.

Conclusion

Rounding numbers to desired decimal places is a common requirement in JavaScript, and having control over precision is essential for accurate calculations and data representation.

In this blog post, we've explored 6 different ways to do that. Each way of rounding offers a way to achieve the desired rounding effect. Depending on your specific use case, you can choose the method that best suits your needs.

Remember to practice and experiment with these techniques to deepen your understanding and proficiency. With experience, you'll unlock their full potential and discover even more creative ways to enhance the functionality of your JavaScript applications. Keep exploring and refining your skills to become a more adept JavaScript developer.

Happy coding :)

Javascript hasOwnProperty method is a built-in function in JavaScript that allows you to check whether an object has a specific property. This method is particularly important when you want to determine if a property exists directly on an object and not on its prototype chain(not inherited from its prototype).

This statement can be confusing. right?

Don't get panic, I am here to make you understand this in a very easy and efficient way.

In this article, we will explore the hasOwnProperty() method in detail, discussing its purpose and significance in property checking. We will deep dive into its syntax, purpose, and various scenarios where it can be applied.

By the end, you'll have a solid understanding of how to effectively utilize the hasOwnProperty() method in your JavaScript projects.

Prerequisites

Before diving into the concepts of javascript hasOwnProperty method, it's beneficial to have a basic understanding of JavaScript and its fundamental concepts. Familiarity with javascript variables, functions, and basic control flow (such as if statements and loops will make it easier to grasp the concepts discussed in this article.

If you're new to JavaScript or need a refresher, there are a few online resources available to learn the basics. Websites like MDN Web Docs, W3Schools, and freeCodeCamp offer comprehensive tutorials and guides that can help you get started on your JavaScript journey.

Additionally, I highly recommend the following two books for beginners in JavaScript:

• Head First JavaScript Programming: A Brain-Friendly Guide

• JavaScript: The Definitive Guide: Master the World's Most-Used Programming Language

By diving into these resources, you'll gain a solid foundation in JavaScript programming, equipping you with the necessary knowledge to explore the intricacies of hasOwnProperty and unlock new possibilities in your web development projects.

So, before we dive into the intricacies of javascript hasOwnProperty, make sure you have a solid foundation in JavaScript programming.

Once you're ready, let's explore the power of hasOwnProperty method and unlock new possibilities in your web development projects.

Syntax and parameters

To effectively utilize the JavaScript hasOwnProperty method, the First thing we need to do is getting know its syntax and get used to it by understanding its syntax and parameters in detail.

let's explore the syntax of it.

Note: If you find the syntax confusing, don't worry! In the upcoming sections of this article, we will explore various examples and use cases. I assure you that by reading the full article, you will gain a clear understanding of how to use hasOwnProperty() effectively. So, be patient and keep reading to unlock the full potential of this powerful JavaScript method.

The hasOwnProperty() method follows the following syntax:

object.hasOwnProperty(property)

Here,

• object: This parameter represents the object on which the property check is performed. It can be any JavaScript object, including built-in objects, user-defined objects, or instances of classes.

• property: This parameter specifies the name of the property being checked. It should be a string representing the property name.

• return value: The hasOwnProperty() method returns a boolean value indicating whether the object has the specified property. It returns true if the object has the property, and false otherwise.

The hasOwnProperty() method returns true if the specified property is a direct property of the object — even if the value is null or undefined. The method returns false if the property is inherited, or has not been declared at all. Which we will discuss in later sections.

Working with hasOwnProperty()

Now we know the syntax of the javascript hasOwnProperty() method, let's look at an example of how to apply it in practical code.

let's consider an object called myObject:

 const person = {   name: 'John',   age: 30 }

To check if myObject has the property named name and gender, we would use the hasOwnProperty() method as follows:

console.log(person.hasOwnProperty('name')) // Output: true 
console.log(person.hasOwnProperty('gender')) // Output: false

In the above example, the person object has the properties name and age. The first console.log() statement checks if the object has the name property, and since the person object has the name property it returns true.

On the other hand, The second console.log() statement checks if the object has the gender property, and it returns false because the object does not have that property.

pretty straightforward. right?

Not really!

Handling inherited properties

In the previous section, we have seen that javascript hasOwnProperty method behaves in a very straightforward manner when we are checking for a property of the object.

But it works differently when we check for an inherited property of an object.

We know that In JavaScript, objects can inherit properties from their prototypes through the prototype chain. This inheritance behavior brings the importance of the hasOwnProperty() method into the spotlight, especially when dealing with inherited properties.

The hasOwnProperty() method ignores inherited properties. It focuses solely on the properties directly owned by the object itself.

When you invoke hasOwnProperty() on an object, it evaluates whether the object possesses a non-inherited property with the specified name. If such a property exists, the method returns true; otherwise, it returns false.

This method serves as a reliable indicator of whether an object has a specific property, regardless of its inheritance.

To clarify, consider the following example:

const person = {   name: 'John',   age: 30 }  
console.log(person.hasOwnProperty('name')) // Output: true
console.log(person.hasOwnProperty('toString')) // Output: false

In this example, we have an object called person with properties name and age. When we call hasOwnProperty() on the person object with name as the argument, it returns true since 'name' is a direct property owned by the object itself.

However, when we call hasOwnProperty() with toString as the argument, it returns false because toString is an inherited property from the object's prototype.

Purpose of hasownproperty()

At this point of this article after understanding the behavior of javascript hasOwnProperty, you might be thinking what is the purpose of it, more specifically why do we need it?

Let's find out the answer. Probably you have heard the statement

everything is object in javascript.

What does it mean actually?

of course, we won't discuss its full explanation here.

In short, This means you can treat almost anything as an object in javascript. This includes numbers, strings, functions, and even arrays. And since almost anything can be treated as object, they also inherit properties from their parent objects through the prototype chain as an Object does.

That's why When working with objects, it can be challenging to differentiate between properties that are locally defined and those inherited from prototypes.

To address this, JavaScript provides the hasOwnProperty() method, which allows you to determine if a property exists directly on an object or is inherited from its prototype chain.

By using hasOwnProperty(), we ensure that we don't unintentionally modify any inherited properties or methods. It allows us to safely customize the behavior according to our requirements without affecting properties inherited from the prototype chain.

Here's an example to illustrate this:

const person = {
   name: 'John',   age: 30 
}  
if (person.hasOwnProperty('greet')) {
   person.greet = function () {
     console.log(`Hello, my name is ${this.name}`)   
  } 
}  

person.greet() // Output: Hello, my name is John

In this example, we have an object called person with properties like name and age. We want to customize the greet() method to provide a personalized greeting.

Using hasOwnProperty(), we check if the greet property already exists directly on the person object. If it does, we override the existing method with a new implementation that says Hello, my name is John In that way we are ensuring that we don't unintentionally modify inherited greed method in the person object.

Note: In some browsers where it is supported, Object.hasOwn() is recommended over hasOwnProperty().

hasOwnProperty() on Different JavaScript Objects

javascript hasOwnProperty method can be called on various JavaScript objects since most objects inherit its methods.

For example, let's consider the Array object. Since Array is an object itself, you can use the hasOwnProperty() method to check the existence of an index within the array:

const fruits = ['Apple', 'Banana', 'Watermelon', 'Orange'] 
console.log(fruits.hasOwnProperty(3)) // Output: true (corresponding to 'Orange') 
console.log(fruits.hasOwnProperty(4)) // Output: false (index not defined)

In this example, the fruits array contains several elements. By calling hasOwnProperty() on the array object with the argument 3, it returns true because the element at index 3 (Orange) exists within the array.

On the other hand, calling hasOwnProperty() with the argument 4 returns false because the array does not have an element at that index.

The ability to use hasOwnProperty() on arrays allows you to verify the presence of specific indices or elements within the array. It provides a convenient way to check the existence of array elements, ensuring that you access valid and defined values.

Objects where hasOwnProperty() is unavailable

Although the javascript hasOwnProperty method is generally available in most JavaScript objects, there are certain cases where it may not be accessible.

hasOwnProperty as a property name

If an object redefines or overrides the hasOwnProperty() method, the original implementation from Object.prototype will not be available.

Here's an illustration of this scenario:

const customObj = {
   hasOwnProperty: function () {
     return 'Custom hasOwnProperty'  
   } 
}
customObj.hasOwnProperty('prop') // 'Custom hasOwnProperty'

In this case, the customObj object has its own implementation of hasOwnProperty(), which returns a custom message instead of the usual behavior.

As a result, when trying to call hasOwnProperty() on customObj, output will be the text(Custom hasOwnProperty) returned from the custom hasOwnProperty function.

Object created using Object.create(null)

Another scenario where hasOwnProperty() may not be accessible is when an object is created using Object.create(null). Objects created this way do not inherit from Object.prototype, and therefore do not have access to its methods, including hasOwnProperty().

Here's an example:

const foo = Object.create(null) 
foo.prop = 'exists' 
foo.hasOwnProperty('prop') // Error: foo.hasOwnProperty is not a function

In this case, foo is created using Object.create(null), which explicitly specifies that the object should not inherit from Object.prototype.

As a result, calling hasOwnProperty() on foo will throw an error because the method is not available.

Note: To handle these cases, you can use alternative approaches. One option is to use Object.hasOwn() method, which is a safer alternative that works even in situations where hasOwnProperty() may not be available.

Another option is to use hasOwnProperty() from another object that does inherit from Object.prototype, such as a plain {} object.

It's important to be aware of these scenarios and handle them accordingly to ensure your code functions as intended and avoids any unexpected errors or inconsistencies.

Handling non-object values

When the javascript hasOwnProperty method is invoked on non-object values, such as primitive data types or null, its behavior differs from when it is used on actual objects. It's important to understand these differences and the impact they have on property checks.

When hasOwnProperty() is called on a non-object value, the method will create a temporary wrapper object of the corresponding type and check for the existence of the property. If the property exists directly on the wrapper object, hasOwnProperty() will return true. Otherwise, it will return false.

Here's how hasOwnProperty() behaves with different types of values:

• String Primitive:

    const name = 'John' 
    console.log(name.hasOwnProperty('length')) // Output: true
  

  In this case, the name variable is a string primitive. When hasOwnProperty() is called on it, JavaScript automatically converts it into a temporary String object. The String object has a property named length that it directly owns, so the method returns true.

• Number Primitive:

    const age = 30 console.log(age.hasOwnProperty('toString')) // Output: false
  

  Here, the age variable is a number primitive. When hasOwnProperty() is called on it, it is converted into a temporary Number object.
  The Number object doesn't have a property named toString that it directly owns, so the method returns false.

• Boolean Primitive:

    const isValid = true 
    console.log(isValid.hasOwnProperty('valueOf')) // Output: false
  

  In this example, the isValid variable is a boolean primitive. When hasOwnProperty() is called on it, it is converted into a temporary Boolean object. The Boolean object doesn't have a property named valueOf that it directly owns, so the method returns false.

• Null and Undefined:

    let obj = null 
    console.log(obj.hasOwnProperty('property')) // Output: TypeError: Cannot convert null to object  let value 
    console.log(value.hasOwnProperty('property')) // Output: TypeError: Cannot convert undefined to object
  

  When hasOwnProperty() is called on null or undefined values, a TypeError is thrown. These values cannot be converted to objects, so invoking hasOwnProperty() directly on them results in an error.

It's important to be aware of how hasOwnProperty() behaves with different data types to ensure accurate property checks and handle any potential errors that may arise.

To avoid these errors, it is recommended to perform a type check before using the hasOwnProperty() method.

You can use the typeof operator to determine if the value is an object before calling hasOwnProperty().

For example:

const obj = { prop: 'value' } 
const str = 'Hello'  

if (typeof obj === 'object' && obj.hasOwnProperty('prop')) {           
    console.log("Object has own property 'prop'") 
}  

if (typeof str === 'object' && str.hasOwnProperty('length')) {  
    console.log("String has own property 'length'") 
} else {
   console.log("Value is not an object or does not have own property 'length'") 
}

In this example, we first check if obj is of type object and then use hasOwnProperty() to determine if it has the property prop.

Similarly, we perform the same check for str to verify if it is of type object and has the property length. If the conditions are met, the corresponding success message is logged.

Otherwise, if the value is not an object or doesn't have the expected property, an appropriate error message is displayed.

By performing the type check before calling hasOwnProperty(), you ensure that the method is only invoked on valid object values, mitigating any potential errors that could occur.

Conclusion

Javascript hasOwnProperty method is a useful tool for checking the existence of properties on objects. This provides more control and accuracy when performing property checks and manipulations.

Now that you have a solid understanding of hasOwnProperty(), you have a powerful tool at your disposal to handle property-related tasks with precision.

By leveraging this method, you can confidently work with object properties, tailor their behavior, and create more robust and reliable JavaScript applications.

Remember to practice and experiment with hasOwnProperty() to further deepen your understanding and proficiency. As you gain experience, you'll unlock its full potential and discover even more creative ways to enhance the functionality of your JavaScript applications.

Resource

• Object.prototype.hasOwnProperty()

• Javascript hasownproperty method

• When to use Object.hasOwnProperty

• Object.prototype.hasOwnProperty()

forEach method In JavaScript is an essential component that simplifies the process of iterating over elements in an array. It provides a convenient and straightforward way to perform actions on each element without using the traditional loop.

With its ease of use and versatility, it allows developers to perform operations on each element individually, such as accessing its value, modifying it, or invoking other functions based on specific conditions.

In this comprehensive blog post, we will dive deep into the forEach method, and try to understand its concepts through practical examples.

By the end, you'll have a solid understanding of how to leverage the full potential of forEach in your JavaScript projects, enhancing your coding skills and productivity.

So let's dive into the world of forEach and unlock its capabilities together!

Prerequisites

Before diving into the world of forEach, it's very important to have a basic understanding of JavaScript fundamentals, arrays, functions, and iteration concepts.

I assume you are familiar with fundamental topics such as variables, data types, operators, control flow, array properties and methods, function definition and invocation, and loops and conditional statements.

Before reading the full article please make sure you understand these topics. Because without having knowledge of these topics there is a high chance you won't understand the examples I have used in this article.

Additionally, If you're new to JavaScript or need a refresher, there are few online resources available to learn the basics.

Websites like MDN Web Docs, W3Schools, and freeCodeCamp offer comprehensive tutorials and guides that can help you get started on your JavaScript journey.

Also, I highly recommend the following two books for beginners in JavaScript:

• Head First JavaScript Programming: A Brain-Friendly Guide

• JavaScript: The Definitive Guide: Master the World's Most-Used Programming Language

By diving into these resources, you'll gain a solid foundation in JavaScript programming and acquire the skills required to explore the world of forEach method in JavaScript and open up new opportunities for your web development projects.

Understanding the purpose of forEach

To study and explore the forEach method in-depth, it's crucial to understand its purpose first. Because It may seem pointless to go into its details before understanding the goal.

So, let's take a moment to understand why the forEach method exists and what it aims to achieve.

The purpose of the forEach method in JavaScript is to simplify the process of iterating over elements in an array and performing an action on each element. It provides a more elegant and expressive alternative to traditional for loops, making code more readable and concise.

By using the forEach method in JavaScript, you can avoid the hassle of manually managing everything and focus on the logic you want to execute for each array element. It abstracts away the low-level details of iteration and allows you to concentrate on the specific operation you wish to perform.

For example, consider an array of names:

const names = ['Alice', 'Bob', 'Charlie']

If you wanted to print each name to the console using a traditional for loop, you would need to handle the index and access the array elements explicitly:

for (let i = 0; i < names.length; i++) {
   console.log(names[i]) 
}

However, with the forEach method, the syntax becomes much more straightforward:

names.forEach(function (name) {
   console.log(name) 
})

Note: If you're feeling confused about the syntax of the forEach method at this point, don't worry! We will dive into the syntax and explain all its parameters using examples.

So, please be patient and read the full article until the end. We'll make sure everything becomes clear and understandable.

The forEach method abstracts away the index management, providing a clean and concise way to iterate over the array and execute the desired action for each element. It simplifies the code structure, enhances readability, and reduces the chances of introducing errors.

So, by understanding the purpose of the forEach method, you can appreciate its value and leverage it effectively in your JavaScript projects. It serves as a powerful tool for iterating over arrays and performing actions on each element, making your code more elegant and efficient.

Syntax and parameters

The syntax of forEach is quite straightforward. It follows this format:

array.forEach(callback(currentValue, index, array), thisArg)

The key component of forEach is the callback function, which is executed for each element in the array. It plays a vital role in defining the actions to be performed on each element.

The callback function accepts three parameters:

• currentValue

• index

• array

These parameters provide valuable information during the iteration process.

The callback function allows you to define the actions to be performed on each element during the iteration.

The currentValue parameter represents the current element being processed, while the index parameter provides the index of the current element. The array parameter refers to the array on which the forEach method is being called.

Additionally, you can optionally specify the thisArg parameter to determine the value of this within the callback.

By utilizing the callback function and these parameters effectively, you can perform custom operations on each element of the array, such as modifying the values, accessing properties, or invoking other functions.

Now that we have learned the syntax of the forEach method in JavaScript, let's explore how to work with it and understand its functionality in the next sections.

Defining and passing callbacks to forEach

To use the forEach method, you need to define and pass a callback function as its parameter. This callback function will be invoked for each element in the array.

There are two common ways to define the callback function:

• Inline function

• named function

Let's see how we can use the Inline function as the callback through an example:

const numbers = [1, 2, 3, 4, 5]  
numbers.forEach(function (element) {
   console.log(element) 
})

In the above example, we define an inline callback function directly as an argument to the forEach method. This function takes an element parameter, representing each element in the numbers array.

By using inline callback functions, you can keep the code concise and avoid the need for defining separate named functions. Inline functions are particularly useful for simple operations that don't require reusability.

Now let's see Passing a named function as the callback:

const numbers = [1, 2, 3, 4, 5]  

function logElement(element) {
   console.log(element) 
}  

numbers.forEach(logElement)

In the above example, we define a named function logElement that takes an element parameter. We then pass this named function as an argument to the forEach method.

Passing a named function is useful when you have complex or reusable operations that you want to separate from the forEach loop. It enhances code modularity and allows you to reuse the same function in other parts of your codebase.

Note: Whether you choose to define the callback function inline or as a named function depends on the complexity and reusability of the operations you need to perform on each element. Both approaches are valid and provide flexibility in how you work with the forEach method.

Accessing element, index, and original array within the callback

When working with the forEach method in JavaScript, the parameters of the forEach method allows you to access and work with the current element, index, and the original array within the callback function.

Let's explore how to use each parameter effectively:

• Current Element (element): The first parameter of the callback function represents the current element being processed. You can use this parameter to perform actions or operations on each element individually.
  For example:

    const fruits = ['apple', 'banana', 'orange'];  
  
    fruits.forEach(function (fruit) {
       console.log(fruit); 
    });
  

  In this example, the callback function logs each fruit to the console. The fruit parameter represents the current element being processed, allowing you to access and work with it within the function.

• Index (index): The second parameter of the callback function represents the index of the current element. It provides the position of the element within the array.

  For example:

    const fruits = ['apple', 'banana', 'orange'];  
  
    fruits.forEach(function (fruit, index) {
       console.log(`Fruit at index ${index} is ${fruit}`); 
    });
  

  In this example, the callback function logs each fruit along with its corresponding index. The index parameter allows you to access and utilize the index information within the function.

• Original Array (array): The third parameter of the callback function represents the original array being iterated. It allows you to reference the entire array and perform operations or make decisions based on its properties or other elements.

  For example:

    const fruits = ['apple', 'banana', 'orange']; 
  
    fruits.forEach(function (fruit, index, array) {
       if (array.length > 3) {
         console.log('The array is too long');   
       } 
    });
  

  In this example, the callback function checks if the length of the array is greater than 3 and logs a message if it is. The array parameter provides access to the original array, enabling you to use its properties or perform operations based on the array as a whole.

By utilizing these parameters effectively within the callback function, you can access and work with the current element, index, and the original array to perform various operations, make decisions, or modify the array elements as needed.

'thisArg' Parameter in forEach Method

The second parameter of the forEach method in JavaScript is called thisArg. It is an optional parameter that allows you to specify the value of this within the callback function.

By default, when the callback function is executed, the value of this inside the callback function refers to the global object (window in a browser environment or global in Node.js).

However, if you pass a value for thisArg, the this value within the callback function will be set to the provided value. The thisArg parameter can be useful in scenarios where you want to explicitly set the context or scope for the callback function.

For example, if you have an object and you want to use a method from that object as the callback function, you can pass the object as thisArg to ensure the method is invoked with the correct context.

Here's an example to illustrate the usage of the thisArg parameter:

const person = {   
   name: 'John',
   greet: function() {
     console.log(`Hello, ${this.name}!`);
   } 
};  

const names = ['Alice', 'Bob', 'Charlie'];  

names.forEach(person.greet, person);

In this example, we have an object person with a greet method. We use the forEach method on an array of names and pass person.greet as the callback function.

By passing person as the thisArg parameter, we ensure that the greet method is invoked with person as the this value, allowing it to access the name property correctly.

By understanding and utilizing the thisArg parameter effectively, you can control the context in which the callback function is executed and tailor it to your specific needs.

Arrow functions for concise and expressive callbacks

In the previous section, we have seen how to define and pass callback in the forEach method and we have used normal functions as the callbacks.

But it is also possible to use arrow functions instead of normal functions as callbacks.

Arrow functions provide a more compact syntax for defining functions and automatically bind the current scope, eliminating the need for explicit binding or preserving the this keyword. This results in code that is easier to read and understand.

Here's an example demonstrating the use of arrow functions as callbacks with the forEach method:

const numbers = [1, 2, 3, 4, 5]  

numbers.forEach(element => {
   console.log(element) 
})

In the above example, we have an array called numbers containing a sequence of numeric values. Instead of using a traditional function expression, we utilize an arrow function as the callback for the forEach method.

The arrow function takes element as its parameter, representing the current element being processed. Arrow functions provide a concise and expressive way to define callback functions.

They have a more compact syntax, and the lexical scoping of arrow functions allows them to automatically bind the current scope, which means you don't need to explicitly bind or preserve the this keyword.

By using arrow functions as callbacks, you can make your code more readable and maintainable. They offer a clean and concise way to define functions, especially for short and straightforward operations within the forEach loop.

Benefits of Using forEach

After exploring various aspects of the forEach method, Now it's time to explore the benefits it offers.

To understand the benefits of forEach Let's consider the example that we are using so far. Iterating over an array of numbers and performing various actions on each element using the forEach method.

const numbers = [1, 2, 3, 4, 5];  // Example using forEach 

numbers.forEach(function (element) {
   console.log(element * 2); 
});

Here are the benefits that we are getting from forEach method in JavaScript:

• Cleaner Syntax: In the example, forEach provides a cleaner syntax compared to traditional for loops. The callback function focuses on the action to be performed on each element (console.log(element * 2)), without the need for manual index management or loop control.

• Improved Readability: By using forEach, the purpose of the iteration is clearly stated. Other developers can easily understand that we are doubling each element (element * 2), making the code more readable and comprehensible.

• Simplified Iteration: With forEach, we don't need to worry about initializing counters, defining loop conditions, or incrementing indexes manually. The forEach method takes care of all the iteration details, allowing us to focus on the specific action of doubling each element.

• Avoiding Common Pitfalls: The forEach method automatically handles the iteration logic, ensuring that the callback function is executed for each element in the array. This avoids common pitfalls like off-by-one errors or infinite loops, as forEach guarantees that every element is processed correctly.

• Enhancing Functional Programming: The example aligns with functional programming principles by using forEach. We define the desired action for each element within the callback function, separating the iteration logic from the specific action of doubling the elements. This promotes a declarative style of coding, enhancing immutability and predictability.

• Compatibility with Array-like Objects: Although the example uses an array, forEach is also compatible with array-like objects. This flexibility allows us to apply the same iteration logic to different types of collections, such as NodeList or HTMLCollection, expanding the utility of the forEach method.

By considering these benefits within the context of the provided example, we can see how forEach simplifies iteration, improves readability, and aligns with functional programming principles.

Real-world example of forEach

So far, we have learned so many things related to forEach method in JavaScript. Now let's see a real-world example of forEach so that we can feel all things we have learned so far.

Suppose you have an array of user objects representing customers in an e-commerce application. Each user object contains properties such as name, email, and purchasedItems. You want to send a personalized email to each customer, thanking them for their purchase and providing additional information about related products.
Here is the code snippet to do that:

const users = [
  {
    name: 'John Doe',
    email: 'johndoe@example.com',
    purchasedItems: ['Shirt', 'Shoes', 'Hat'],
  },
  {
    name: 'Jane Smith',
    email: 'janesmith@example.com',
    purchasedItems: ['Dress', 'Handbag'],
  },
  // ... more user objects
];

users.forEach(function(user) {
  const { name, email, purchasedItems } = user;

  // Generate personalized email content
  const emailContent = `
    Hi ${name},
    Thank you for your recent purchase of ${purchasedItems.join(', ')} from our store. We appreciate your support!

    We thought you might also be interested in checking out our new arrivals. Feel free to visit our website for more amazing products.

    If you have any questions or need assistance, please don't hesitate to contact us.

    Best regards,
    Your Store Team
  `;

  // Send the email to the customer
  sendEmail(email, emailContent);
});

In the given example, the forEach method is used to iterate over the users array. For each user, a personalized email is generated using template literals and the user's data. The email is then sent to the respective user's email address using the sendEmail function.

Inside the forEach loop, a callback function is defined, which takes a single argument, user. This parameter represents the current user object being processed during each iteration. By destructuring the user object, we extract the relevant properties such as name, email, and purchasedItems using object destructuring.

Using template literals, we then generate personalized email content for each user. The email content includes a thank-you message, the purchased items, and a suggestion to explore new arrivals. The join() method is used to concatenate the purchased items into a comma-separated string.

Once the email content is generated, it can be passed to the sendEmail function along with the customer's email address (email) to send the email. You can assume that the sendEmail function is a custom function that handles the logic of sending emails.

The forEach loop ensures that the callback function is executed for each user in the users array, allowing you to send personalized emails to all customers who made purchases.

Cool, right?

This example highlights the benefits of using forEach in a real-world scenario. It simplifies the process of iterating over an array, eliminating the need for manual loop control and index management. It allows you to focus on the specific task of generating personalized emails for each user, enhancing code readability and maintainability.

It's just a simple example of a use case that we can achieve using the forEach method in JavaScript. And I believe now you can feel how much powerful this forEach method is.

Conclusion

forEach method in JavaScript is a fundamental tool in JavaScript that empowers developers to iterate over arrays with ease and flexibility.

By understanding its features and concepts you can leverage the full potential of forEach in your projects, making your code more concise, readable, and efficient.

With the knowledge gained from this comprehensive guide, you are well-equipped to use the power of forEach and elevate your JavaScript programming skills to new heights.

Remember to practice and experiment with the concepts discussed in this blog post to solidify your understanding and become a master of the forEach method in JavaScript.

Happy coding :)

JavaScript is a powerful programming language that allows developers to create dynamic and interactive web applications. One important feature of JavaScript is the Javascript setTimeout method function, which enables the javascript wait.

Understanding how to effectively use setTimeout is crucial for controlling the timing and flow of your JavaScript programs. In this comprehensive guide, we will dive deep into the world of Javascript setTimeout method and explore its various functionalities.

Whether you are a beginner or an experienced developer, this article will provide you with all the knowledge you need to harness the full potential of setTimeout in your JavaScript projects.

So, Get ready to master the art of timing in JavaScript and unlock new possibilities for creating responsive and efficient web applications.

Let's delve into the world of setTimeout and discover all its secrets!

Prerequisites

Before delving into the world of setTimeout, it's beneficial to have a basic understanding of JavaScript and its fundamental concepts. Familiarity with variables, functions, and basic control flow (such as if statements and loops) will make it easier to grasp the concepts discussed in this article.

If you're new to JavaScript or need a refresher, there are numerous online resources available to learn the basics. Websites like MDN Web Docs, W3Schools, and freeCodeCamp offer comprehensive tutorials and guides that can help you get started on your JavaScript journey.

Additionally, I highly recommend the following two books for beginners in JavaScript:

• Head First JavaScript Programming: A Brain-Friendly Guide

• JavaScript: The Definitive Guide: Master the World's Most-Used Programming Language

By diving into these resources, you'll gain a solid foundation in JavaScript programming, equipping you with the necessary knowledge to explore the intricacies of setTimeout and unlock new possibilities in your web development projects.

So, before we dive into the intricacies of setTimeout, make sure you have a solid foundation in JavaScript programming.

Once you're ready, let's explore the power of setTimeout and unlock new possibilities in your web development projects.

The purpose of setTimeout

To begin, let's understand the purpose of setTimeout first.

setTimeout is commonly used in scenarios where you want to introduce delays, schedule events, or perform tasks at specific time intervals.

little confusing right?

Let's understand this with an example:

Note: please avoid thinking about its syntax for now. we will discuss the Syntex later on.

Suppose you want to declare a function but instead of calling it immediately, you want to call it after a certain period of time.

This is where setTimeout comes into the picture. It provides the functionality to delay the execution of a function.

Take a look at the following code:

function greetUser() {  
 console.log('Hello, user!') 
}  
setTimeout(greetUser, 1000)

In this example, we have a function called greetUser that simply logs a greeting message to the console. We want to delay the execution of this function by 1 seconds.

To achieve this, we use the setTimeout function and pass the greetUser function as the first argument and 1000 as the second argument.

And that's it!

When you run this code, it will make javascript wait 1 second and then print the greeting message "Hello, user!" to the console.

Syntax and Parameters of setTimeout

To effectively use setTimeout, it's important to grasp its syntax and parameters.

The basic syntax of setTimeout is as follows:

setTimeout(function, delay, param1, param2, ...);

Let's break down the different components:

• The first parameter is the function or code snippet that you want to execute after the specified delay. It can be a named function or an anonymous function.

• The second parameter delay represents the time interval in milliseconds before the code execution begins. It determines the delay duration before the specified function is invoked.

• Additional parameters, such as param1, param2, and so on, are optional. You can use them to pass arguments to the function specified in the first parameter.

These setTimeout parameters allow you to customize the behavior of the function when it is executed.

The setTimeout() returns a timeoutID which is a positive integer identifying the timer created as a result of calling the method. The timeoutID can be used to cancel timeout by passing it to the clearTimeout() method which we will discuss in another article.

Note: If you find the syntax confusing, don't worry!

In the upcoming sections of this blog, we will explore various examples and use cases for each parameter in detail. I assure you that by reading the full article, you will gain a clear understanding of how to use setTimeout effectively.

So, be patient and keep reading to unlock the full potential of this powerful JavaScript function.

setTimeout code breakdown

I know you already got an idea of what happened to the code that we used before. But To reinforce our understanding let's break down the code together:

function greetUser() {
  console.log('Hello, user!')
}

setTimeout(greetUser, 1000)

In this code snippet:

1. We define a function called greetUser using the function keyword. This function is responsible for printing the greeting message to the console.

2. We use the setTimeout function to schedule the execution of the greetUser function after a specified delay. The delay is set to 1000 milliseconds, which is equivalent to 1 seconds.

3. The first argument passed to setTimeout is the function reference greetUser. This tells setTimeout which function to execute after the specified delay.

4. The second argument 1000 represents the delay in milliseconds. It determines the time period before the code execution begins.

By using setTimeout, we instruct JavaScript wait 1 second and then invoke the greetUser function. As a result, the greeting message "Hello, user!" will be printed on the console.

Using the anonymous function as a callback

In the previous code example, we used a named function as the callback function in the setTimeout function.

However, setTimeout also allows you to provide an anonymous function as a callback that will be executed after the specified delay.

Anonymous functions are commonly used when the code to be executed is simple and doesn't require a separate named function.

Here's an example:

setTimeout(function () {  
 console.log('This code executes after the delay') 
}, 1000)

In this case, the anonymous function serves as the callback. It logs a message to the console after a delay of 1000 milliseconds (or 1 seconds).

You can replace the console.log statement with any code you want to execute after the delay. Using anonymous functions as callbacks in setTimeout provides flexibility and allows you to define and execute code inline without the need for separate function declarations.

Passing arguments to the callback function

In the setTimeout callback function, You can easily pass parameters or arguments.

Suppose you have a function that accepts parameters, and you want to provide specific values to those parameters when the function is executed after the delay:

function greet(name) {   
  console.log('Hello, ' + name + '!') 
}  

setTimeout(greet, 5000, 'John')

In this example, the greet function is scheduled to wait 5 seconds (5000 milliseconds), and the argument John is passed as the name parameter.

You can adjust the delay and the argument values according to your specific use case.

Using this approach, you can customize the behavior of the callback function by passing different values as arguments, allowing for more dynamic and flexible code execution.

Here are some additional tips for passing arguments to the callback function:

• You can pass any number of arguments to the callback function.

• The arguments will be passed to the callback function in the same order that they were passed to setTimeout.

• If you pass a variable number of arguments to the callback function, you can use the arguments object to access them.

Here is an example below:

function processArgs() {
  for (let i = 0; i < arguments.length; i++) {
    console.log("Argument " + (i + 1) + ": " + arguments[i]);
  }
}

setTimeout(processArgs, 1000, "apple", "banana", "cherry");

In this example, the processArgs function prints each argument along with its corresponding index to the console. The output will be:

Argument 1: apple
Argument 2: banana
Argument 3: cherry

Passing string literals

Passing a string as the first argument to setTimeout instead of a function can lead to potential issues and is generally not recommended.

It has similar problems to using eval().

Here's an example of passing a string literals to setTimeout:

// Don't do this 
setTimeout("console.log('Hello World!');", 500)

In this case, the string "console.log('Hello World!');" is evaluated as code in the global context when the timeout expires.

However, using a string in this way can cause problems because the evaluation happens in a different context, and local symbols or variables may not be available.

To avoid these issues, it's recommended to pass a function as the first argument to setTimeout instead. This ensures that the code is executed within the correct context and has access to local symbols.

Here's an alternative approach using a function as the callback:

// Do this instead 
setTimeout(() => {
   console.log('Hello World!') 
}, 500)

In this example, an arrow function is used as the callback. The arrow function provides a concise and safer way to execute code after the specified delay.

It avoids the pitfalls associated with passing string literals to setTimeout and ensures that the code is executed within the correct scope.

By passing a function instead of a string, you can maintain better control over the execution context and avoid potential issues with accessing local variables or symbols.

Maximum delay value

The maximum delay value that can be set in the Javascript setTimeout method function depends on the JavaScript implementation and the environment in which it is running.

In most modern browsers and JavaScript environments, the maximum delay value is approximately 2^31 - 1 milliseconds, which is roughly 24.85 days. If you attempt to set a delay value greater than this maximum, it will be automatically clamped to the maximum allowable value.

Therefore, if you need to schedule a task that exceeds this maximum delay, you might need to consider alternative approaches or use a combination of multiple setTimeout calls.

It's worth noting that extremely long delay values should be used with caution, as they may not be reliable or practical for many real-world scenarios. If you require precise timing or longer delays, you may want to explore other techniques or APIs specifically designed for such purposes.

Here are some alternative approaches for scheduling tasks that exceed the maximum delay value:

• Use a combination of multiple setTimeout calls. This can be used to break down a long task into smaller chunks that can be scheduled individually.

• Use a background thread or process. This can be used to execute tasks that do not need to interact with the main thread or user interface.

• Use a third-party library or API. There are a number of libraries and APIs available that provide support for scheduling tasks with longer delays.

The best approach for scheduling a task that exceeds the maximum delay value will depend on the specific requirements of the task.

How setTimeout works behind the scenes

So far we have discussed so many things about Javascript setTimeout method.

But, To fully grasp the concept of Javascript setTimeout method, it's crucial to understand its underlying mechanism and how it works behind the scenes.

Now let's understand how this works behind the scenes.

Note: This section explores advanced concepts of JavaScript such as the Event Loop, Call Stack, and Web API. If you're not familiar with these concepts, feel free to skip this section as it won't affect your understanding of setTimeout and its usage.

However, if you're interested in delving deeper into the inner workings of JavaScript and gaining insights into the mechanisms behind the setTimeout function, this section is specifically tailored for you.

JavaScript is a single-threaded programming language, which means it can only handle one task at a time.

However, web browsers have additional components like the Event Loop, Call Stack, and Web API that helps manage asynchronous tasks and enables non-blocking behavior.

When you use the setTimeout function in JavaScript. It follows a specific workflow involving these components.

Let's break it down step by step from a beginner's perspective:

• The setTimeout function is added to the call stack, which creates a timer in the Web API component of the browser. The specified delay is set, and the timer starts counting down.

• While the timer is running, the JavaScript engine continues executing other code if there is any. It doesn't wait for the timer to expire before moving forward.

• After the specified time interval (e.g., javascript wait 5 seconds) elapses, the timer expires, and the callback function provided to setTimeout is moved from the Web API to the callback queue. The callback queue holds the functions that are ready to be executed.

• The Event Loop is responsible for continuously monitoring both the call stack and the callback queue. It checks if the call stack is empty.

• If the call stack is empty, the event loop takes the callback function from the callback queue and pushes it onto the call stack for execution. This process ensures that the callback functions are executed in the order they were added to the queue.

Let's consider an example to better understand this process:

function task() {   
  console.log('setTimeout Demo!') 
}  
setTimeout(task, 5000)

In this example, the task function is scheduled to execute after javascript wait 5 seconds (5000 milliseconds).

Here's how it unfolds:

• The setTimeout function is added to the call stack, creating a timer in the Web API.

  

  The timer starts counting down, and the JavaScript engine proceeds to execute other code if present.

• After approximately 3 seconds, the timer expires, and the task function is moved
  from the Web API to the callback queue.

  

• Since the call stack is empty, the event loop removes the task function from the callback queue, pushes it onto the call stack, and executes it.

  

• Inside the task function, the console.log() statement is executed, creating a new function execution context.

  

• Finally, when the console.log() and task function are completed, they are popped out of the call stack.

By following this process, JavaScript can handle asynchronous tasks, such as delayed execution with setTimeout, without blocking the execution of other code.

The this Problem

When using setTimeout with a method, you may encounter a this keyword problem, where the value of this inside the method differs from your expectation.

This issue arises due to the way setTimeout works and the separate execution context it uses.

By default, when a method is invoked using setTimeout, the this value inside the method is set to the window (or global) object instead of the object you intended.

This behavior can lead to unexpected results, as shown in the following example:

const myArray = ['zero', 'one', 'two']
myArray.myMethod = function (sProperty) {
  console.log(arguments.length > 0 ? this[sProperty] : this)
}

myArray.myMethod() // prints "zero,one,two" (the whole array)
myArray.myMethod(1) // prints "one"

In the above example, when myMethod is called directly on myArray, the this value is correctly set to myArray.

However, when using setTimeout with myArray.myMethod, the this value defaults to the window object.

To overcome this issue, there are a few solutions you can employ:

• Use a wrapper function:

  A common approach is to use a wrapper function that explicitly sets the desired this value:

setTimeout(function () { 
    myArray.myMethod() 
}, 1000) // prints "zero,one,two" after 1 seconds

setTimeout(function () { 
   myArray.myMethod('1') 
}, 2500) // prints "one" after 2.5 seconds

• Arrow function as the wrapper function:

  Arrow functions do not bind their own this value and instead inherit it from the surrounding scope.

  This behavior can be leveraged to maintain the expected this value inside the callback function.

  Here's an example of using an arrow function as a callback with setTimeout:

    const myArray = ['zero', 'one', 'two'] 
  
    setTimeout(() => {
     myArray.myMethod() 
    }, 1000) // prints "zero,one,two" after 1 seconds 
  
    setTimeout(() => {
     myArray.myMethod('1') 
    }, 2500) // prints "one" after 2.5 seconds
  

  In this case, the arrow function does not have its own this binding and instead uses the this value from the surrounding scope, which is the expected value of myArray.

  Using an arrow function as a callback can provide a concise and convenient solution to the this problem when working with setTimeout and methods.

  It's important to note that arrow functions have some differences in behavior compared to regular functions, so it's essential to consider their implications and choose the most suitable solution based on your specific use case.

    setTimeout(() => {
      myArray.myMethod()
    }, 1000) // prints "zero,one,two" after 1 seconds
  
    setTimeout(() => {
      myArray.myMethod('1')
    }, 2500) // prints "one" after 2.5 seconds
  

• Use bind:
  Another option is to use the bind() method to bind the desired this value to the method:

    const myArray = ['zero', 'one', 'two']
    const myBoundMethod = function (sProperty) {
      console.log(arguments.length > 0 ? this[sProperty] : this)
    }.bind(myArray)
  
    myBoundMethod() // prints "zero,one,two" because 'this' is bound to myArray in the function
    myBoundMethod(1) // prints "one"
  
    setTimeout(myBoundMethod, 1000) // still prints "zero,one,two" after 1 second due to the binding
    setTimeout(myBoundMethod, 1500, '1') // prints "one" after 1.5 seconds
  

  By using bind(), you create a new function that is permanently bound to the specified this value, ensuring it remains consistent when passed to setTimeout or called elsewhere.

These solutions help resolve the this problem when using setTimeout with methods, allowing you to maintain the desired context and avoid unexpected behavior.

Nested timeouts

Nested timeouts refer to the situation where a setTimeout function is called within the callback function of another setTimeout.

This approach can be used to create a sequence of timed events or to introduce delays between consecutive actions.

Here's an example to illustrate nested timeouts:

setTimeout(function () { 
  console.log('First timeout executed.') 
   setTimeout(function () {
     console.log('Second timeout executed.')
      setTimeout(function () {
       console.log('Third timeout executed.')
     }, 2000)
   },1000)
 }, 500)

In this example, we have three setTimeout functions nested inside each other. Each setTimeout has its own callback function and delay.

The first setTimeout executes after 500 milliseconds, the second executes after 1000 milliseconds (1 second) from the first timeout, and the third executes after 2000 milliseconds (2 seconds) from the second timeout.

When you run this code, it will output the following:

First timeout executed. 
Second timeout executed. 
Third timeout executed.

By nesting timeouts, you can create a sequence of actions that occur at different time intervals. This can be useful for scenarios where you need to orchestrate a series of events or introduce delays between specific operations.

However, it's important to be mindful of the potential complexity that can arise from deeply nested timeouts. As the number of nested timeouts increases, the code can become harder to read and maintain.

In such cases, alternative approaches like using async/await or libraries/frameworks that handle asynchronous operations may be more appropriate.

Remember to use nested timeouts judiciously and consider other options depending on the complexity and requirements of your code.

Conclusion

The setTimeout function is a fundamental tool in JavaScript, enabling developers to create dynamic and interactive experiences on the web.

By mastering setTimeout, you gain the ability to control timing, schedule tasks, and build sophisticated applications. With the insights and examples shared in this blog, you're now equipped to leverage setTimeout effectively and unlock the full potential of JavaScript's timer capabilities.

Now you have a powerful tool at your disposal to handle timing-related tasks, manage delays, and create more interactive and dynamic web applications.

Remember to practice and experiment with setTimeout to deepen your understanding and unlock its full potential. With this knowledge, you are well-equipped to harness the power of setTimeout and enhance the functionality of your JavaScript applications.

Happy coding :)

Resource

• https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

• https://www.javascripttutorial.net/javascript-bom/javascript-settimeout/

JavaScript Loop is a fundamental part of any programming language, and JavaScript is no exception. JavaScript loop is a powerful tool that allows developers to iterate over collections of data, perform operations on each item, and make decisions based on certain conditions.

However, loops can quickly become a source of problems if not implemented properly. Poorly written loops can lead to performance issues, bugs, and code that is difficult to maintain.

Whether you're a beginner or an experienced developer, writing efficient and effective loops can be a challenging task.

In this comprehensive guide, we'll explore the best practices for writing JavaScript loop that will help to take your code from noob to pro. We'll start with the basics, including choosing the right loop type and optimizing loop performance. Then we'll dive into more advanced topics like using functional programming techniques and being careful with the asynchronous loops to avoid weird things in your code.

Whether you're working with arrays, objects, or other data structures, our tips and tricks will help you write clean, concise, and bug-free loops.

So if you're ready to master the art of JavaScript loop, buckle up and let's dive in!

Choosing the Right Type of Loop

When you are writing a JavaScript Loop, the First thing you need to do is choose the right type of loop. JavaScript offers several types of loops, including for loop, while loop, and do-while loop, each with its own strengths and weaknesses. Depending on the specific requirements of your code, one type of loop may be more efficient or more readable than another.

Therefore, it's essential to consider the situation and choose the appropriate loop type to achieve the desired results.

let's enlighten them one by one:

Starting with the most popular one, The For loop. It's the most common type of loop in JavaScript and is often used when you know how many times you want to execute a block of code.

For example, imagine you have an array of numbers and you want to calculate their sum:

let numbers = [1, 2, 3, 4, 5] 
let sum = 0 
for (let i = 0; i < numbers.length; i++) { 
    sum += numbers[i] 
} 
console.log(sum) // Output: 15

Here, the for loop is used to iterate over each element in the numbers array and add its value to the sum variable.

Next While loop, it is useful when you want to repeatedly execute a block of code until a certain condition is met.

For example, imagine you want to generate random numbers between 0 and 1 until you get a number greater than 0.5:

let randomNumber = Math.random() 
while (randomNumber <= 0.5) { 
    randomNumber = Math.random() 
} 
console.log(randomNumber) // Output: a number greater than 0.5

In this case, the while loop repeatedly generates a new random number until it gets one that is greater than 0.5.

Next Do-while loop, It's similar to while loop, but the difference is that a do-while loop will always execute its block of code at least once, regardless of whether the condition is initially true or false.

For example, imagine you want to ask the user to enter a number between 1 and 10, and keep asking until they enter a valid number:

let number 
do { 
number = prompt('Enter a number between 1 and 10:') 
} while (number < 1 || number > 10) 
console.log(number) // Output: a number between 1 and 10

In this case, the do-while loop repeatedly prompts the user to enter a number until they enter a number between 1 and 10.

So, as you can see, choosing the right type of loop depends on the specific task you are trying to accomplish. If you know how many times you want to execute a block of code, a for loop may be the best choice. If you want to repeatedly execute a block of code until a certain condition is met, while loop or do-while loop may be more appropriate.

By selecting the right type of loop, you can make your code more efficient and easier to read.

Use the Right Loop Control Statement

After choosing the appropriate loop for your desired task, the Next thing you need to know is how to use the right loop control statement. There are two main loop control statements available in JavaScript: break and continue.

These Loop control statements allow you to control the flow of a loop. break is used to exit a loop completely when a certain condition is met, On the other hand, continue is used to skip the current iteration of the loop and move on to the next one.

For example, let's say you have an array of numbers and you want to find the first even number in the array using a for loop. You can use break to exit the loop once you find the first even number:

const numbers = [1, 3, 2, 5, 4, 7, 6] 
for (let i = 0; i < numbers.length; i++) { 
    if (numbers[i] % 2 === 0) { 
        console.log(`The first even number is ${numbers[i]}`) 
        break 
    } 
}

In this example, the loop will exit as soon as it finds the first even number (which is 2). Without the break statement, the loop would continue iterating through the rest of the array.

On the other hand, let's say you want to print out all the odd numbers in the array, skipping over any even numbers. You can use continue to skip the even numbers:

const numbers = [1, 3, 2, 5, 4, 7, 6] 
for (let i = 0; i < numbers.length; i++) { 
        if (numbers[i] % 2 === 0) { 
            continue 
        }         
    console.log(`Odd number: ${numbers[i]}`) 
}

In this example, the loop will skip over the numbers and only print out the odd numbers (which are 1, 3, 5, and 7). Without the continue statement, the loop would print out all the numbers in the array.

Now we know how to choose the right loop for our task also when to use break and continue.

let's move to the next thing we need to think of when writing a loop and this is optimizing the Loop performance.

Optimizing The Loop Performance

In normal situations, it may not create a big change in our code performance but when we will work with a large number of data Optimizing the loop performance will become one of the most important things. Because Loop performance can have a significant impact on the overall performance of your JavaScript code.

Therefore, it's essential to profile and optimize the performance of your loops.

Here are some tips for optimizing loop performance:

Avoiding unnecessary calculations

One way to optimize JavaScript Loop performance is by avoiding unnecessary calculations.

To Understand the point let's have a look at the example below:

suppose you have a loop that iterates over an array. In that case, when you use a for loop to iterate over an array, the length of the array is checked in each iteration to see if the loop should continue.

For example, consider the following code:

let arr = [1, 2, 3, 4, 5] 
for (let i = 0; i < arr.length; i++) { 
    console.log(arr[i]) 
}

In each iteration of the loop, arr.length is checked to see if i is less than the length of the array.

However, arr.length is a property of the array, and accessing it in each iteration can be expensive if the array is very large.

Note: In JavaScript, an array is a special type of object that can store a collection of values of any data type. Every array has a length property, which represents the number of elements in the array. This length property is automatically updated as elements are added to or removed from the array. Since an array is an object, it can have properties and methods just like any other object. However, the length property is unique to arrays and allows for easy access to the number of elements in the array.

To improve performance, you can cache the length of the array outside the loop, like this:

let arr = [1, 2, 3, 4, 5] 
let len = arr.length // caching the length outside the loop 
for (let i = 0; i < len; i++) { 
    console.log(arr[i]) 
}

By doing this, you avoid accessing the length property of the array in each iteration, which can improve the performance of your code. This technique can be particularly useful when working with large arrays.

Note: It's worth noting that modern JavaScript engines like V8 are optimized to handle loops efficiently, and in some cases, caching the length of the array may not provide a significant performance boost. However, it's still a good practice to follow, especially when working with large arrays or in performance-critical code.

Use efficient loops

Another way to optimize loop performance is by using efficient loops.

For example, for loop is generally more efficient than the forEach loop when iterating over arrays.

Let's see the code snippet below to understand this:

let arr = [1, 2, 3, 4, 5] // Using for loop for iterating over the array 
for (let i = 0, len = arr.length; i < len; i++) { 
    console.log(arr[i]) 
}

In the above example, we are using a for loop to iterate over the arr array. But the question is we could do the same using the forEach loop.

why this is the better approach. right?

This topic is a bit complex and deserves a separate blog post to explain briefly. But one of the main reasons is When we use the forEach loop, it creates a new function scope for every element in the array. This means that for each element, a new function is created, and when the iteration is done, those functions are destroyed.

This process is not an issue if the array is small. However, for larger arrays, it can slow down the loop's execution.

On the other hand, for loop creates a single function scope for the entire loop, which means that it only has to create and destroy a single function scope.

Also, for loop provides a way to get control over the loop iteration using the break and continue which forEach loop simply doesn't provide.

That's why the for loop is more optimized for looping over arrays.

Minimize DOM manipulation

In JavaScript Loop, it's important to minimize DOM manipulation as much as possible. Because, When working with the Document Object Model (DOM) in JavaScript, manipulating the DOM can be a time-consuming process.

Each time you make a change to the DOM, the browser has to reflow and repaint the page, which can slow down your application, especially when working with large numbers of elements.

For Example:

// Inefficient DOM manipulation 
for (let i = 0; i < 1000; i++) {                 
    document.getElementById('myDiv').innerHTML += '<p>' + i + '</p>' 
} 
// More efficient DOM manipulation let output = '' 
for (let i = 0; i < 1000; i++) { 
    output += '<p>' + i + '</p>' 
} 
document.getElementById('myDiv').innerHTML = output

In the given example, the first loop is inefficient because it manipulates the DOM on every iteration. The innerHTML property of the myDiv element is updated with a new paragraph element on every iteration, resulting in a total of 1000 manipulations of the DOM.

On the other hand, The second loop is more efficient because it minimizes DOM manipulation. Instead of updating the DOM on every iteration, the loop concatenates a string of HTML to a variable called output.

Once the loop is complete, the output string is used to update the innerHTML property of the myDiv element just once, resulting in a single manipulation of the DOM.

Avoid Common Mistakes

There are a few common mistakes that developers normally do and you should be aware of and avoid common mistakes when working with loops in JavaScript:

Modifying Loop Variables Inside the Loop

Modifying loop variables inside the loop can lead to unexpected results or errors. It's generally not a good practice to modify loop variables inside the loop. Instead, you should use a separate variable to store any values that you want to modify.

For example, consider the following loop:

for (let i = 0; i < 10; i++) { 
    console.log(i); i++; // modifying i inside the loop 
}

In this loop, i is being modified inside the loop, which can lead to unexpected results. Instead, you should use a separate variable to store any values that you want to modify, like this:

for (let i = 0; i < 10; i++) { 
    console.log(i); 
    let modifiedValue = i + 1; // using a separate variable to modify i 
}

Not Using Curly Braces

It's possible to write a loop without curly braces, but it's generally not recommended. Without curly braces, it can be difficult to read and understand your code, and it can also lead to unexpected results or errors.

For example, consider the following loop:

for (let i = 0; i < 10; i++) 
console.log(i);

This loop does not have curly braces, which can make it difficult to read and understand the code. It's better to always use curly braces, even for single-line statements:

for (let i = 0; i < 10; i++) { 
    console.log(i); 
}

Be careful of Infinite Loop

An infinite loop is a loop that never stops. This can happen if you don't set up the correct exit condition or if the exit condition is never met. Infinite loops can cause your program to crash or hang, and they can be difficult to debug.

For example:

consider a loop that always increments the value of a variable but never checks if it has exceeded a certain value:

let count = 0 
while (count < 10) { 
    console.log(count) 
}

This code will result in an infinite loop because the count variable is never incremented beyond 0.

That's why you should always be careful about infinite loops. To avoid infinite loops, make sure you set up the correct exit condition and test it thoroughly.

Off-by-One Errors

Off-by-one errors occur when you use the wrong comparison operator or when you don't take into account the initial value of a loop variable. These errors can lead to incorrect results in your program or even crashes in some cases.

For example, let's say you have an array with 10 elements, and you want to loop through it and perform some operation on each element.

Here's how you might write the loop:

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
for (let i = 0; i < arr.length; i++) { 
    console.log(arr[i]); 
}

This code will loop through all 10 elements of the array and print their values to the console. However, what if you accidentally use the wrong comparison operator and write i <= arr.length instead of i < arr.length?

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
for (let i = 0; i <= arr.length; i++) { 
    console.log(arr[i]); 
}

This code will result in an off-by-one error, because it will try to access an element that doesn't exist when i is equal to arr.length. The loop will run a total of 11 times instead of 10, and the final iteration will throw an error because arr[10] is undefined.

To avoid off-by-one errors, always double-check your loop conditions to make sure you're using the correct comparison operator and taking into account the initial value of your loop variable.

By avoiding these common mistakes, you can ensure that your loops are running as intended and reduce the chances of errors or crashes in your program. It's always a good idea to double-check your loops for these mistakes before running your code.

Use Recursion if needed

While loops are powerful, sometimes recursion can be an even more elegant solution.

It is particularly useful for traversing hierarchical data structures, where it's not possible to know how many levels of nesting there are in advance. It can also lead to simpler and more elegant code than using nested loops, especially in cases where the depth of the structure is not known in advance.

Note: It's important to use recursion carefully and avoid infinite recursion, which can lead to a stack overflow error.

For example:

Let's say you have a nested array of numbers, and you want to find the sum of all the numbers in the array, including the nested ones. One way to do this is by using recursion. Here's an example of how you could use recursion to find the sum:

const nestedArray = [[1, 2, [3]], 4]; 
function sumArray(arr) { 
    let sum = 0; 
     for (let i = 0; i < arr.length; i++) { 
        if (Array.isArray(arr[i])) { 
            // If the element is an array, call the function recursively 
            sum += sumArray(arr[i]); } else { 
            // If the element is a number, add it to the sum 
            sum += arr[i]; 
        } 
      } 
return sum; 
} 
console.log(sumArray(nestedArray)); // Output: 10

In this example, we used Recursion because the input data, nestedArray, is a hierarchical data structure and the function need to traverse all the elements of the structure, regardless of the number of levels of nesting.

Recursion allows the function to call itself repeatedly until it reaches the deepest level of nesting and returns a value that can be used to calculate the final sum. The function checks whether each element in the array is an array itself, and if it is, the function calls itself with that element as the input.

This process repeats until all the nested arrays are traversed and the function reaches the deepest level of nesting, which is a number.

At that point, the function returns the number to the previous level of recursion, which can then use that value to calculate the sum of all the elements in the current level of nesting.

Conclusion

JavaScript loop is a fundamental part of any developer's toolbox, but they can be tricky to master. By following these best practices, you can write more efficient and effective loops that will help take your code to the next level.

Choose the right type of loop, use the right loop control statement, optimize loop performance, avoid common mistakes, and consider using recursion when appropriate. By keeping these tips in mind, you'll be well on your way to becoming a JavaScript loop expert.

So take the time to evaluate and optimize your loops, and your code will be better for it.

You have probably read that JavaScript is an interpreted language, while others argue that it's not an interpreted language and that it's actually a compiled language. Is javascript compiled or interpreted?

This can be confusing,

I was often confused because I received conflicting answers whenever I read books or articles about JavaScript being an interpreted or compiled language. But the truth is that it depends on how the language is implemented.

Let me explain.

To clarify this point, let's first examine what are compiler and interpreter also the difference between them

Compiler

A compiler is a software tool that translates human-readable source code into machine-executable code. The process of compilation involves several stages, including

• lexical analysis

• syntax analysis (parsing)

• semantic analysis

• code generation

• optimization

During lexical analysis, the compiler breaks down the source code into a series of tokens, which are individual units of meaning. For example, in the statement "x = 5 + 3;", the tokens would be "x", "=", "5", "+", and "3". The lexer also assigns a type to each token, such as "identifier", "operator", or "literal".

Then, during syntax analysis (parsing), the compiler checks the order and structure of the tokens to ensure that they form a valid program. This involves analyzing the grammar of the programming language and constructing a syntax tree that represents the structure of the program.

After the syntax analysis is complete, the compiler performs semantic analysis to check for logical errors in the code. This involves verifying that the program follows the rules of the language, such as type checking, scoping rules, and function calls.

Once the compiler has verified the correctness of the program, it generates machine code or bytecode that can be executed by the computer. This involves translating the syntax tree and semantic information into low-level instructions that can be executed by the computer's hardware.

Finally, the compiler performs optimization to improve the efficiency of the generated code. This process involves analyzing the code and making changes to improve the memory usage.

Overall, the compiler is an essential tool for translating human-readable source code into machine-executable code. The compilation process involves several stages, each of which is critical for producing correct and efficient code.

Interpreter

An interpreter is a program that reads and executes code written in a high-level programming language directly, without requiring an intermediate compilation step. Unlike a compiler, which translates the entire source code into machine code before execution, an interpreter reads and executes the source code line by line, translating and executing each statement as it is encountered.

When an interpreter runs a program,

• it first performs lexical analysis and parsing of the source code to generate an abstract syntax tree (AST) representing the program's structure.

• The interpreter then walks through the AST, executing each node in turn. During execution, the interpreter may generate and manipulate additional data structures to represent the state of the program, such as a symbol table for tracking variable values.

One advantage of using an interpreter is that it allows for more dynamic and interactive development, as programmers can test and modify their code on the fly without having to recompile the entire program. However, interpreting code can be slower than executing compiled code, since the interpreter has to perform additional work to translate and execute each statement.

Overall, an interpreter provides a convenient way to execute code in a high-level language, but may not be as performant as compiled code in certain situations.

Compiler vs. Interpreter in a simple way

There is a lot of technical information about compilers and interpreters, so let's make it simple:

And like everything else in life, let's try to understand it with a cup of tea.

Let's say you want to make a cup of black tea, you go to Google and search for the ingredients list, this is what you came up with:

• Black tea leaves

• Water

• Sugar (optional)

• Milk (optional)

There are 2 ways to make the tea, the Compiler or the Interpreter way.

The compiler will first, before doing any steeping, organize all the ingredients in front of him, the specific amounts of every single ingredient, only then, will he steep all the ready components of the tea.

The interpreter will take his cup and will start by reading the ingredients, line by line. he will boil the water, add the tea leaves, steep them for a few minutes, add sugar or milk if desired, and then strain the tea into the cup.

The build (preparation) time of the compiler will be longer than the interpreter's. However, the run (steeping) time will be much shorter.

Now that you know the difference let’s talk about JavaScript.

Is javascript compiled or interpreted Language?

When I first started learning JavaScript, I, like many others, was taught that it was an interpreted language, and I believed it for a long time. However, after conducting further research, I have come to realize that this is not entirely accurate.

While many people still consider JavaScript to be an interpreted language, there is evidence to suggest that it is actually a compiled language. One example of this can be seen in the way that the JavaScript engine handles bugs.

When you encounter a syntax error in your JavaScript code, the engine will typically alert you to the problem before it even begins executing the code. This suggests that the code is compiled and validated before it is executed, which is a characteristic of compiled languages.

You can try this for yourself by opening the following HTML code in your browser and checking the console:

console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World!);

The last line of code is missing a closing quotation mark, which should trigger a syntax error. However, if JavaScript were truly an interpreted language, the console would have already printed the first nine lines before throwing an error.

Instead, the program crashes immediately,

Uncaught SyntaxError: Invalid or unexpected token

That indicates that it was compiled and validated before execution.

While there is still debate over whether Is javascript compiled or interpreted? it's clear that it's not entirely accurate to call it an interpreted language.

Another way to prove that JavaScript is not an entirely interpreted language is through the concept of hoisting. For example, consider the following code:

max(1, 2);
// 2
function max(num1, num2){
  return num1 > num2 ? num1 : num2;
}

In traditional programming languages, a function must be defined before it can be called. However, in JavaScript, the function can be called before it is defined. This behavior is known as hoisting, and it's a fundamental aspect of how JavaScript works.

Note: We will explore more about `hoisting` in other blog for now this explanation is enough.

How does the JavaScript engine know about the max function before it reaches the declaration? The only reasonable answer to this question is that the code must first be compiled before execution.

So, Is javascript compiled?

Well, it's complicated. In the past, every programming language was fairly easy to categorize as either compiled or interpreted. However, with the modern approach of running source code, a sort of "in-between" area has been created.

How does JavaScript actually get translated?

JavaScript has come a long way since its inception as a simple scripting language. In the early days, JavaScript engines were only interpreters, which executed code line by line. However, as JavaScript became more popular and its use cases expanded, performance issues emerged. Interpreting code on-the-fly resulted in a loss of performance, especially for complex applications. This led to the development of new engines that use a just-in-time (JIT) compiler.

A JIT compiler is different from traditional compilers, such as those used for C++. Traditional compilers have plenty of time to optimize the code during compilation, but the JIT compiler must compile code just before it's executed. As soon as the JavaScript code is about to run, it gets compiled into executable bytecode.

Despite the differences in how JavaScript is compiled compared to other compiled languages, the process still follows some of the same rules as traditional compilers. The JavaScript code is parsed before execution, which makes it look like a parsed language. However, the code is converted to binary form before execution.

To better understand this process, let's take a closer look at how code execution works behind the scenes:

• First, the code is transpiled using tools like Babel or Webpack.

• The transpiled code is given to the engine, which parses it to an Abstract Syntax Tree (AST).

• The AST is then converted to bytecode that is understood by the machine. This is an Intermediate Representation (IR), which is further optimized by the JIT compiler.

• After optimization, the JS Virtual Machine (VM) executes the code.

Some people argue that the JS VM is "interpreting" the bytecode, but this is not entirely accurate. If we were to use that definition, we would also have to say that Java, which is another JVM-driven language, is also interpreted.

Thus, we can conclude that JavaScript is executed in three phases:

• Parsing

• Compiling

• Executing

JavaScript code is initially interpreted before any execution begins. For example, consider the following code:

console.log("Hello");
for(var i = 0;i<4;i++) {
    console.log(Hello);
}

The output shows the interpreter behavior in the above code example, where first Hello is printed to the console, and then an error is reported. This output strongly supports the fact that JavaScript is an interpreted language.

While it may seem like JavaScript code is being executed line by line, this is only true during the parsing phase. In reality, the entire code is compiled at once to convert it into machine-readable code before execution. Therefore, JavaScript is a just-in-time compiled language that uses an interpreter in its first phase.

Note: JavaScript can operate in an interpreted manner in older browsers. However, every modern browser currently supports "JIT", so JavaScript code is always compiled. Whether JavaScript is compiled or interpreted depends on the environment in which it is run. If it runs in older browsers, it's interpreted. If it runs in modern browsers, it's compiled.

Explaining JIT in JavaScript

Now that we have a basic understanding of how JavaScript works and what a JIT compiler is, let's delve deeper into how JIT compiler work and why they're important.

But don't worry, we won't get too technical with jargon. Instead, we'll explore JIT compiler in simple terms to understand how they work, why they're important, and the reason they were introduced in the first place.

JIT (just-in-time) compilation is a technique used by modern JavaScript engines to improve the performance of JavaScript code. Unlike traditional compilers that optimize code during compilation, JIT compiler take a middle-ground approach. They initially interpret the code and then selectively compile parts of it that are used repeatedly. This approach balances fast start-up time with improved performance.

When a JavaScript engine encounters a function, it can either interpret the code on-the-fly or compile the code before execution. Interpreting the code can be faster to start execution but slower in terms of overall performance, as the code is translated line-by-line each time the function is executed. Compiling the code before execution can be slower to start, but it can result in faster execution due to machine code optimizations.

In this approach, the code is compiled into machine code, which is then executed by the processor.

JIT compiler take a middle-ground approach, where they initially interpret the code and then selectively compile parts of it that are used repeatedly. As a result, the JIT compiler offers a balance of fast start-up time and improved performance.

To understand how JIT compilers work, let's consider an example:

function add(a, b) {
  return a + b;
}

for (let i = 0; i < 100000000; i++) {
  add(i, i + 1);
}

In this code, we have a simple add function that adds two numbers and a loop that calls this function 100 million times with different inputs.

When the JavaScript engine first encounters this code, it will interpret it on-the-fly and execute it. However, as the loop runs repeatedly, the engine detects that the add function is being called repeatedly and decides to compile it to machine code to improve performance.

The JIT compiler analyzes the code and optimizes it for the specific inputs being used in the loop.

For example, it may decide to inline the add function, which means replacing the function call with the actual addition code, eliminating the overhead of calling a function. Additionally, it may also perform other optimizations such as constant folding or dead-code elimination, which remove unnecessary computations.

Overall, the JIT compiler help improve the performance of JavaScript code by selectively compiling parts of it that are used repeatedly, while still allowing for fast start-up times.

Now that we have a better understanding of how the JIT compiler works, let's delve into the issues we previously discussed and their underlying causes.

Why the Pre-execution syntax error alerts

Let's explore the reason behind syntax error alerts in JavaScript using the same example we discussed earlier.

console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World!);

In the case of the code example provided, the JavaScript engine compiles the code before execution, and the syntax error is detected during the compilation phase. This is because the engine uses the JIT compiler that optimizes code on the fly as it's executed. When the engine encounters an error during the compilation phase, it immediately throws an error without executing any code.

Therefore, the fact that JavaScript detects syntax errors during the compilation phase suggests that it's more like a compiled language than an interpreted one.

What is the story of hoisting?

Let's now understand the hoisting in the context of JIT engine using the code we used before:

max(1, 2);
// 2
function max(num1, num2){
  return num1 > num2 ? num1 : num2;
}

So, how does the JavaScript engine know about the max function before it reaches the declaration?

The answer lies in the Just-In-Time (JIT) compilation process that occurs behind the scenes when JavaScript code is executed in modern browsers.

During the optimization step, the JIT compiler can analyze the code to determine which functions are likely to be called frequently and which variables are likely to be accessed repeatedly. By identifying these patterns, the compiler can optimize the code for faster execution, which can result in significant performance gains.

In the case of hoisting, the compiler can recognize the pattern of a function being declared at the top of its scope and optimize the code accordingly.

Conclusion

In summary, while JavaScript is commonly thought of as an interpreted language, it is actually a Just-In-Time compiled language. Modern JavaScript engines use a JIT compiler to optimize the code for execution. This compiler allows JavaScript to be executed much faster and in an efficient way than traditional interpreted languages. While the compiling of Javascript works in a different way, if compared to other compiled languages, it still follows some rules that reflect the process of compiling.

JavaScript code is parsed before execution, which makes it look like a parsed language, but the code is actually converted to binary(machine code that is directly executed by the computer's hardware) form before execution. This conversion process involves several steps, including transpiling the code, parsing it to an Abstract Syntax Tree (AST), converting it to bytecode, and optimizing it with a JIT compiler.

So, to answer the question "Is javascript compiled or interpreted language?" the answer is that it is a bit of both. It is interpreted in older browsers, but in modern browsers, it is compiled with the help of a JIT compiler.

Resource:

• https://www.linkedin.com/pulse/javascript-compiled-language-st%C3%A9phane-moreau/

• https://stackdiary.com/tutorials/is-javascript-a-compiled-or-interpreted-language/

• https://almogad.medium.com/javascript-is-it-compiled-or-interpreted-9779278468fc

• https://www.geeksforgeeks.org/is-javascript-interpreted-or-compiled/

Variable is an essential concept in almost every programming language, and there is much to know and understand about it. It is important for us to have a clear and deep understanding of these concepts related to the Variable.

In this post, we will explore almost all of the concepts related to Javascript variables in programming, but from a beginner's perspective. We will keep things simple to understand, and use examples to explore everything.

Even if you are new to programming and don't have much knowledge about JavaScript, you will be able to understand all the concepts we cover.

So, let's get started!

Javascript variables

In JavaScript, a variable is a named reference to a memory location that can hold different types of data, such as numbers, strings, booleans, objects, or functions. To access variable or modify the data stored in a variable, we use its name.

It's a little confusing, right?

let's have a look at the computer memory.

If you have a basic understanding of computer memory then you must know that Computer memory has millions of cells on it and every cell has its own address.

In our program, if we want to store value to access it later throughout the program, we have to keep it somewhere in the computer memory and we will need a way to call that value whenever we need.
we could have done that using the memory address after storing the data in the memory.
The problem is we can't use this address directly in our program. because you know the computer works in the binary system and in the binary system this memory address looks too weird and confusing. also, it's almost impossible to memorize.

Here variable comes in to solve this problem.

Variable gives us the simplest solution to handle it. We can simply create a variable and assign it to the value we want to store. now we don't need to memorize the weird and confusing memory address we can do the same using a simple and human-readable name.

When we are creating a variable and assigning a value to it. behind the since the Compilers and interpreters store the data inside the memory and replace the symbolic names of variables with the real data location/memory address.

That means our data is stored in memory and the variable is pointing to this memory location.

Note: In real scenarios, memory allocation is not as simple as I discussed here. also, Primitive type and Reference type values are treated differently when assigning them to Javascript variables. but for this post, I have avoided the advanced things and kept it simple so you can get an overall idea of how things work behind the scenes.

If you are still confused about what are variables in javascript, simply think of variables as named containers that hold information and can be referred to the data simply by naming the container.

That means,

• Creating a variable

• Giving a standard name to the variable

• Assigning a value to it.

Think of these steps as

• Taking a container

• Labeling it

• Putting something in this container.

Note: A Javascript variable is a container, not a value, this means that variables aren’t themselves values; they are a named container for values.

Javascript Variable Declaration

Before you use a variable in a JavaScript program, you must create or define variable, we call this declaring a variable.

we can Declare a JavaScript Variable using var or let :

var name; 
let age;

Here we are creating two variables, one using var and one using let.

var and let are the keywords that tell JavaScript you’re declaring a variable.

name and age are the names of those variables.

In Javascript, Semicolons(;) are totally optional (unless you want to have multiple statements in a single line, of course). (similar to a full stop(.) in the English language.)

Note: Though Semicolons(;) are optional in javascript, there are many languages where Semicolon(;) is a big factor. In those languages you must end the line using a semicolon otherwise will occur an error to your program.

In javascript multiple variable declaration can be done with the same var or let keyword:

var name, age;
let birthYear, address;

There is another keyword to declare Javascript variables which is const. This is used to declare the constant variables in javascript.

const  Pi = 3.1416

we will talk about this in any other blog.

Question: Suppose, a store has 20 apples in its inventory. how can you store this information in a javascript variable?

1. apples = 20;

2. let apples = 20;

3. ver apples = 20;

4. let apples;

Naming Variables

Not only in JavaScript but also, in all other languages variables must be identified with unique names following some rules and regulations which is called naming variables. These unique names are called identifiers. These Identifiers or names can be short (like a, b, and c) or more descriptive (age, name, userName).

Javascript variable name rules

There are some general rules to follow when we are naming variables (unique identifiers) for the variable.

Here are the rules below:

• Names can contain letters, Number digits(0-9), underscores _, and dollar signs $ but Spaces and special symbols/punctuation characters (like @, !, #, etc.) are not allowed to be used in the variable's name.

Note: In Javascript '_' and '$' are just like letters. They don't have any special meaning.

• Variable names must be started with either a letter, an underscore (_), or the dollar sign $ in javascript. It is not allowed to start variable names using numbers (0-9).

• JavaScript Names/identifiers are case sensitive (Variables named apple and APPLE are two different variables.).

• There are some reserved words, which cannot be used as variable names in your program because they are used by the language itself.

For example: let, var, for, and function are reserved.

The code below gives an Uncaught SyntaxError:

let var = 5;   //  Uncaught SyntaxError: Unexpected token 'var'
let function = 5; // Uncaught SyntaxError: Unexpected token 'function'

• In JavaScript, When the variable name contains multiple words, it is generally written in camelCase.
  That is: words go one after another, every word except the first one starting with a capital letter.

  For example, firstName, lastName, birthYear, etc.

• It is possible to use almost any language in a variable name, but not recommended. We should use English in variable names even if we’re writing a small script. so that if people from other countries need to read it they can read it. Because we will write code for global developers not only for our region.

Here are some valid and invalid variable names below:

// Example of valid variables names
let camelCased         //  first word is lowercase any additional word starts with an uppercase letter
let here2num                  // number in the middle, but not starting with numbers
let JAVASCRIPT_IN_UPPERCASE       // uppercase letters with underscores
let _Javascript_              //start and end with an underscore, with letters in the middle
let $_$                       // dollar signs and underscores
let $_foo3                // mix the dollar sign, underscores, letters and numbers
let _12foo           //start with underscores and contain numbers and letters
let _                 //   contains only underscore
let $             // contain only a dollar sign


// Example of invalid variables names

let random%         //  Don't use the percentage symbol
let 11years           //  Don't start with number(s)
let some-let      //  Don't use dashes
let one variable   //  Don't use spaces
let function           //  Don't use reserved keywords

Task: Which of the following is a valid JavaScript variable name?

1. 123variable

2. var-name

3. _variable

Write your answer in the comment section.

Naming variable Good practices

Giving a good name to the variable is one of the most important and complex skills in programming. Proper descriptive variable names can create a good impression for a programmer in the viewer's eyes.

In a real project, most of the time a programmer spends modifying and extending an existing code base rather than writing something completely new. When we return to the code after doing something else for a while or maybe for a long period of time, it’s much easier to get back into a flow for those codes that is well-labeled. Or, in other words, when the variables have been declared with good names.

So, Please spend time thinking about the right name when you are declaring a variable. Doing so will make you benefited in the future.

• Though variable names can be created in any way you want, it's a good practice to use human-readable, obvious meanings and maximally descriptive (the value the variable is referencing). If we name a variable as “user” then we should name related variables as currentUser or newUser.

• Stay away from short names like a, b, and c. These kinds of short names are easy to type. But these are only useful in small programs. When you will work on a big project, will forget the context of these kinds of names.

Note: Though There is no limit to the length of the variable name and it can be almost unlimited in length, You should avoid creating extremely long variable names. Shorter variable names help the JavaScript engine to execute the program faster.

• Since JavaScript is case-sensitive, apple and Apple are two different identifiers. But we should not use both of them in our program. Because this will occur confusion in the long term.

• The best way to create a variable is to use multiple words in camelCase. (e.g., myVarName).

Undefined value of a variable

When we declare a variable without assigning a value to it will have the value undefined.

It's the default behavior of javascript. Though this container should be empty, it is not. It still contains a value that is undefined.

Note: undefined is one type of data in javascript. we will see about undefined and other data types in any other blog in detail.

If you want to see their value, you can do that by simply doing console.log() in your web browser's console the output will be undefined.

let name, age, birthYear;
console.log(name);          // undefined
console.log(age);           // undefined
console.log(birthYear);     // undefined

Undeclared variable

Suppose you want to use a variable in a statement, but you haven't declared this variable yet. In this case, your code will throw a ReferenceError showing that the variable is not defined. In short, if we want to access an Unassigned or undeclared variable, the code will throw a runtime error.

Example:

console.log(xyz);  // ReferenceError: xyz is not defined

Try running the above line in the browser console.

In the real program, You should never try accessing a variable without declaring it.

Note: Don't get confused with the undefined and Unassigned/Undeclared variable — they are very different things. An undefined variable is a variable that has been declared in the program but has not been initialized with a value. In contrast, an undeclared variable is a variable that has not been declared yet.

Variable Assignment

After the declaration has been completed, we can use the equal(=) sign for Variable Assignment:

Example:

let age;
age = 22;

where the age is the name of the variable and it is assigned a value of 22.

Note: In JavaScript, the equal sign (=) is an assignment operator, not an equal to operator like in algebra. Though the following does not make sense in algebra:

x = x + 10;

But In JavaScript, it makes perfect sense:

First It calculates the value of x + 10 and assigns the result to variable x. In simple words, The value of x is incremented by 10.

Note: in JavaScript, the "equal to" operator is written like ==.

Also, the Javascript variable declaration and initialization can be combined. that means variable initialization can be done in the declaration:

var greetings = "Hello";
let name = "Robiul"

// or,
var greetings = "Hello", name = "Robiul";

//The same declaration can even span across multiple lines using comma(,):

var greetings = "Hello", 
      name = "Robiul";

Note: we can do Variable Assignment from user input

// Gets user input
var name = prompt("What is your name?");
var age = prompt("What is your favorite age? ");
console.log(name)  
console.log(age)

Changing Variable

The meaning of the word ‘variable’ is anything that can vary. That means once the initialization is finished we can change or update the value of the variable later on in the program if required.

It is similar to re-initializing the variable. We can do Updating or Re-assigning or Changing Variable by just typing the name of the variable followed by an equals sign(=) and then followed by the new value we want it to store.

var greetings = "Hello";
let myHobby = "Drawing";
console.log(greetings);   // Hello
console.log(myHobby);   // Drawing

// changing the value 
greetings = "Hi";
myHobby = "Programming"
console.log(greetings);   // Hi
console.log(myHobby);   // Programming

//   also, we can change the value as many times as we want:

let message;
message = "Hello";
console.log(message);  // Hello
message = "World"; 
console.log(message);  // World

javascript variable doesn't contain the history of the variable, which means when we change the value of a variable it removes the old data and stores the new one.

Note: There are a few functional programming languages, like Scala or Erlang that don't allow changing variable values.
In such languages, once the value is assigned in a variable, it’s there forever. If we want to reassign the variable or want to change the value of the variable, the language forces us to create a new variable (declare a new variable). We can’t reuse the old one.

Accessing JavaScript variables

As a beginner, you might be thinking about what is the procedure to access/use the value that is stored in a specific variable. It's simpler than declaring and assigning the variable. You just need to write the name of the variable that contains the value you want to access and you are done. This things also called “referencing a variable”.

// Declare and initialize the variable
var myNumVariable = 85
let myTextVariable = 'This is text.'

// Access the values in myNumVariable and myTextVariable
myNumVariable
// 85
myTextVariable
//  'This is text.'


// Re-assign myNumVariable and myTextVariable
myNumVariable = 50
myTextVariable = 'This is a updated Text'


// Access the values in myNumVariable and myTextVariable again
myNumVariable
// 50
myTextVariable
// 'This is a updated Text'

Basic usage of variables

• Once you declare a variable and initialize it, you can reference this variable by name anywhere elsewhere in your code.

var x = 10;
x + 2;
console.log(x)   // 12

• You can use an already declared variable when declaring a new variable.

var x = 100;
var y = x + 102;
console.log(y)  // 202

• you can do all kinds of arithmetic operations with JavaScript variables, using operators like =, +, *, and more. :

let x = 5 + 2 + 3;
console.log(x)  // 10

• You can also add a string to another string, but strings will be concatenated:

let x = "John" + " " + "Doe";
console.log(x)   // John Doe

Note: During arithmetic operations If you put a number in quotes, the rest of the numbers will be treated as strings, and all of them will be concatenated. Now try this:

let y = "5" + 2 + 3;
console.log(y)   // 523

This is called coercion in javascript

Why should we use variable

So far we have discussed what is variable, how to create it, and how it works in our program. But haven't discussed why this is so important and why should we use the variable.

Let's have a look at this too. we will discuss some point on how variable helps programmers to write optimized and efficient code :

To Understand these points let's see a program of a pretty simple and state-forward game called guess my number. This game logic is very simple, we will use a number in our code and the user will have to guess the number if the user guesses the correct number our program will show a successful message and if the user is wrong the program will show a failed message.

if(userInput==20){
  console.log("Hurrah, You guess the correct number.");
}else if(userInput<20){
  console.log("Sorry, Your guessed number is small. Please try a bigger one.")
}else if(useInput>20){
  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")
}

Here in this program, we have used the number 20 to make our program logic. This program will perform fine but this program is not well coded.

let's see what's wrong with this program and why this is not well coded and how variable makes our life easy and help us to make our code more efficient and optimized:

• The first problem with this program is we have to memorize the number 20 or have to check the number again and again whenever we will use it in our program. Maybe it doesn't seem a big problem for a small program and simple value like this but imagines a program that has a thousand lines of code and maybe hundreds of value like this number or maybe some huge numbers like 204025021, 12242250221 and we can't memorize all of them.

  Here variable helps us by giving a simple solution to deal with this kind of problem. we can simply store the value on a variable and just use a simple and descriptive name rather than using scary and ugly numbers every time when we need. so, Now we don't have to remember the number or any kind of value we can just remember the name we have given to the variable and use it anywhere in our program.

let myNum = 20;
if(userInput==myNum){
  console.log("Hurrah, You guess the correct number.");
}else if(userInput<myNum){
  console.log("Sorry, Your guessed number is small. Please try a bigger one.")
}else if(useInput>myNum){
  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")
}

• Now here comes the second problem with this code. that is when we will try to change the number we have to change the number from every place where we have used the number. and imagine when we will work on a big project we have to use a variable in several places. if we would need to change the value from all the places how painful and time-consuming it would be.

  Here variable gives us an opportunity to change the variable in all places by changing it in one place. we can store our value in a variable and use it anywhere in our program. whenever we need to change it we can just simply change it from one place and it will change everywhere.

let myNum = 20;
console.log(myNumber) // 20
if(userInput==myNum){
console.log(myNumber) // 20
  console.log("Hurrah, You guess the correct number.");
}else if(userInput<myNum){
  console.log(myNumber) // 20
  console.log("Sorry, Your guessed number is small. Please try a bigger one.")
}else if(useInput>myNum){
  console.log(myNumber) // 20
  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")
}
// change the value
myNum = 30;
console.log(myNumber) // 30
if(userInput==myNum){
  console.log(myNumber) // 30
  console.log("Hurrah, You guess the correct number.");
}else if(userInput<myNum){
  console.log(myNumber) // 30
  console.log("Sorry, Your guessed number is small. Please try a bigger one.")
}else if(useInput>myNum){
  console.log(myNumber) // 30
  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")
}

how simple it is! right?

• Another program with this program is we are using the number in a statical way. That means our program is not dynamic now. If we need any changed value we have to edit the source code which is very bad. To write a modern program we should have a feature to change the value dynamically.

  Here Variable gives us the best and simplest way to do that. we can simply create a variable and assign the value of the variable from a user input rather than assigning it statically.

  let myNum =  prompt("enter a number?");
if(userInput==myNum){
  console.log("Hurrah, You guess the correct number.");
}else if(userInput<myNum){
  console.log("Sorry, Your guessed number is small. Please try a bigger one.")
}else if(useInput>myNum){
  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")
}

Now our code is dynamic we can change the value whenever we want without changing or editing the source code.

Thus, variable helps us to write optimized, developer-friendly, and easy-to-understand code.

Note: Though variable helps us in many ways. but too many variables can harm the code performance very badly and it's can increase the server cost. so, we should be careful when we are declaring a variable.

Recap

• A variable is a computer memory location paired with an associated symbolic name, which contains some information or data referred to as a value.

• We can simply think of Javascript variables as named containers that hold information and can be referred to the data simply by naming the container.

• We can Declare a JavaScript Variable using var or let.

• All JavaScript variables must be identified with unique names. These unique names are called identifiers.

• There are some general rules to follow when we are constructing a name (unique identifiers) for the variable.

• A variable declared without a value will have the value undefined.

• A variable that has not been declared yet is called an undeclared.

• After the declaration, we can use the equal(=) sign to assign value to the variable

• You can combine variable declaration with variable initialization. that means initialization can be done in the declaration.

• Once a variable has been initialized with a value, you can change (or update) that value anytime and anywhere within its scope by giving it a different value.

• We can access a value of a variable simply by using the name of the variable. This is also called “referencing a variable”.

• You can reference a variable by name elsewhere in your code.

• You can use a variable when declaring other variables.

• You can do arithmetic with JavaScript variables, using operators like = and +.

• You can also add strings, but strings will be concatenated.

• variable helps us to write optimized and efficient code. Though it is helpful in many ways, too many variables can be harmful. so, we should be careful of it.

Resources

• JavaScript Variables

• Variables

• JavaScript Variables

• JavaScript Variables – A Beginner's Guide to var, const, and let

• Javascript variables

• Introduction to JavaScript Variables – What You Should to Know

• What are Variables in JavaScript ?

• VARIABLES

• JavaScript Variables

• JavaScript Variables – A to Z Guide for a Newbie in JavaScript!

• Variables in JavaScript