DEV Community: Aditya Singh

Latest Redux Toolkit: Using the Builder Callback Notation in createReducer 💻

Aditya Singh — Mon, 17 Jun 2024 22:19:27 +0000

In recent updates to Redux Toolkit, the way we define reducers has evolved. The traditional object notation for createReducer has been replaced by a more flexible and powerful builder callback notation. This change is designed to offer better TypeScript support and more control over reducer logic. Let's dive into the difference and see how to upgrade your code.

The Old Way: Object Notation

Previously, we could define our reducers using an object where keys were action types and values were the corresponding reducer functions. Here’s an example:

import { createReducer } from '@reduxjs/toolkit';

let id = 0;

const tasksReducer = createReducer([], {
  ADD_TASK: (state, action) => {
    state.push({
      id: ++id,
      task: action.payload.task,
      completed: false,
    });
  },
  REMOVE_TASK: (state, action) => {
    const index = state.findIndex((task) => task.id === action.payload.id);
    if (index !== -1) {
      state.splice(index, 1);
    }
  },
  COMPLETE_TASK: (state, action) => {
    const index = state.findIndex((task) => task.id === action.payload.id);
    if (index !== -1) {
      state[index].completed = true;
    }
  },
});

export default tasksReducer;

The New Way: Builder Callback Notation

With the new builder callback notation, we define reducers using a builder pattern. This approach provides a more structured and scalable way to handle actions, especially in larger applications.

import { createReducer } from '@reduxjs/toolkit';

let id = 0;

const tasksReducer = createReducer([], (builder) => {
  builder
    .addCase('ADD_TASK', (state, action) => {
      state.push({
        id: ++id,
        task: action.payload.task,
        completed: false,
      });
    })
    .addCase('REMOVE_TASK', (state, action) => {
      const index = state.findIndex((task) => task.id === action.payload.id);
      if (index !== -1) {
        state.splice(index, 1);
      }
    })
    .addCase('COMPLETE_TASK', (state, action) => {
      const index = state.findIndex((task) => task.id === action.payload.id);
      if (index !== -1) {
        state[index].completed = true;
      }
    });
});

export default tasksReducer;

Function Composition in JavaScript! 🛠️

Aditya Singh — Sat, 25 May 2024 07:59:50 +0000

Function composition is a powerful technique to build clean, readable code by combining simple functions. Here’s a practical example:

Trim whitespace from a username
Convert the name to uppercase
Generate a greeting message
Check out this code snippet:

let username = "  Harley  ";
const trim = (name) => name.trim();
const convertToUpper = (name) => name.toUpperCase();
const generateMessage = (name) => `Hello ${name}, Good Morning!`;

const result = generateMessage(convertToUpper(trim(username))); // it goes right to left
console.log(result); // "Hello HARLEY, Good Morning!"

By composing these functions, you can transform data step-by-step in a clear and efficient manner. This approach is not only elegant but also helps in maintaining and scaling your code.

Try it out and let me know what you think! 😊👇

Higher Order Functions in JS! 💻✨

Aditya Singh — Thu, 23 May 2024 20:37:11 +0000

A Higher Order Function is a function that takes another function as an argument, returns a function, or both. Let’s see some examples! 👇

1️⃣ Classic Example: setTimeout

setTimeout(() => {
  console.log('Runs after 5000ms!');
}, 5000); // Best example of higher order function

This runs the callback function after 5000ms! ⏲️

2️⃣ Using map

let numbers = [1, 2, 3, 4];
numbers.map(number => number * 10);

Transforms each element in the array by multiplying by 10! 🔟

3️⃣ Custom Example: applyOperation

function applyOperation(arr, operation) {
  return arr.map(operation);
}

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

let squaredNumbers = applyOperation(numbers, number => number * number);

console.log(squaredNumbers); // [1, 4, 9, 16]

This higher-order function takes an array and a function (operation) to apply to each element! 🔄

🌟 Key Takeaway: Higher Order Functions make your code more flexible and powerful! Start using them to simplify your code today! 🚀

🚀 JavaScript Functions

Aditya Singh — Thu, 23 May 2024 08:28:41 +0000

Today, we're diving into some cool ways to use functions in JS! 💻✨

1️⃣ Assign a Function to a Variable

function greeting() {
  console.log("Good Morning");
}

let message = greeting;
message();
greeting(); // both will give the same results

Now you can call message() just like greeting()! 🥳

2️⃣ Pass Functions as Arguments

function greeting() {
  return "Good morning";
}

function printMessage(anFunction) {
  console.log(anFunction());
}

printMessage(greeting);

Functions as arguments? Yes, please! 🎁

3️⃣ Return Functions from Other Functions

function greeting() {
    return function() {
            return "Good Morning!";
        }
    }

    let anFunction = greeting();
    let message = anFunction();

Functions returning functions? Mind-blowing! 🤯

🌟 Key Takeaway: Functions in JS are super flexible! Use them like any other variable. Get creative and have fun coding! 🚀

Mastering React's Lifecycle Methods: A Step-by-Step Guide

Aditya Singh — Sun, 15 Oct 2023 06:45:35 +0000

💡 React is a popular JavaScript library for building user interfaces. One of the fundamental concepts in React is the component lifecycle, which represents the various stages a component goes through from birth to death. Understanding these lifecycle methods is crucial for building robust and efficient React applications.

Now we will take a deep dive into React's lifecycle methods, exploring how and when they are called, and why they are essential for building great React applications.

What are Lifecycle Methods?

In React, components can be thought of as building blocks for your user interface. These components can be in one of three main phases: Mounting, Updating, or Unmounting. React provides special methods, known as lifecycle methods, which are automatically called at specific points during each of these phases. These methods give developers the ability to control what happens at different stages of a component's existence.

The Mounting Phase

constructor: This is the first method called when a component is created. It's used for initializing state and binding event handlers.
render: The render method is responsible for rendering the component's output to the DOM.
componentDidMount: After a component is rendered to the DOM, this method is called. It's a good place to perform initial data fetching or set up subscriptions.

The Updating Phase

shouldComponentUpdate: This method is called before the component updates, giving you the opportunity to control whether the update should proceed based on the new and previous props and state.
render: Just like in the Mounting phase, the render method is called to update the component's output.
componentDidUpdate: After the component updates, this method is called. It's useful for performing side effects after a component re-renders.

The Unmounting Phase

componentWillUnmount: This method is called just before a component is removed from the DOM. It's the ideal place to clean up resources like event listeners.

Why Lifecycle Methods Are Important?

Managing Side Effects: They allow you to handle side effects like data fetching, DOM manipulation, and event subscriptions at the right time.
Optimizing Performance: By controlling when a component should update and when it should not, you can optimize your application's performance.
Resource Cleanup: Lifecycle methods help you clean up resources when a component is unmounted, preventing memory leaks and improving the user experience.
Synchronization with External Data: They enable you to synchronize your components with external data sources, ensuring that your UI is always up-to-date.

Let's look at a simple example to illustrate the use of lifecycle methods in a React component. Suppose we have a component that fetches data from an API and displays it on the screen.

import React, { Component } from 'react';

class DataFetcher extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? <p>Data: {data}</p> : <p>Loading data...</p>}
      </div>
    );
  }
}

export default DataFetcher;

Conclusion

Understanding React's lifecycle methods is essential for developing efficient and performant React applications. These methods provide you with the tools to manage component behavior, handle side effects, and ensure that your components are always in sync with external data sources. By mastering these methods, you can take your React development skills to the next level and build more robust and dynamic user interfaces.

Understanding async/await in JavaScript

Aditya Singh — Sat, 22 Jul 2023 11:31:17 +0000

💡 async/await is built on top of Promises and provides a more readable way to write asynchronous code. The async keyword is used to define a function that returns a Promise. Inside an async function, you can use the await keyword before an expression that returns a Promise.

Asynchronous Function:

// Simulating an asynchronous operation with a Promise
function fetchUserData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { id: 1, name: 'John Doe' };
      resolve(user);
    }, 1000);
  });
}

// Using async/await to handle the Promise
async function getUserData() {
  try {
    const user = await fetchUserData();
    console.log('User:', user);
    return user;
  } catch (error) {
    console.error('Error fetching user data:', error);
    throw error;
  }
}

In this example, getUserData() is an async function that uses the await keyword before calling fetchUserData(). When getUserData() is called, it waits for the fetchUserData() Promise to resolve before logging the user data to the console.

Error Handling:

function performTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() < 0.5; // Simulating success/failure
      if (success) {
        resolve('Task completed successfully!');
      } else {
        reject(new Error('Task failed.'));
      }
    }, 1500);
  });
}

async function doTask() {
  try {
    const result = await performTask();
    console.log(result);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

In this example, doTask() awaits the result of performTask() and handles both success and failure scenarios using the try-catch block.

Multiple Async Operations:

Async/await makes it easier to deal with multiple asynchronous operations. You can use await with multiple Promises, and they will execute sequentially.

function fetchResource(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`Resource loaded from ${url}`);
    }, 800);
  });
}

async function loadResources() {
  const resource1 = await fetchResource('https://example.com/resource1');
  console.log(resource1);

  const resource2 = await fetchResource('https://example.com/resource2');
  console.log(resource2);

  const resource3 = await fetchResource('https://example.com/resource3');
  console.log(resource3);
}

loadResources();

In this example, loadResources() loads three resources sequentially using await, ensuring each operation completes before moving on to the next.

Conclusion:

With async/await, managing Promises and handling errors become more intuitive and less error-prone. As you move deeper into JavaScript development, mastering async/await will prove to be an essential skill for building efficient and responsive applications.

JavaScript's 'this' Keyword: Understanding Its Power and Usage

Aditya Singh — Fri, 21 Jul 2023 09:14:03 +0000

💡 At first, it can be confusing, but once you grasp its concept and usage, you'll find it to be a powerful tool. In this blog, we'll demystify the this keyword, explaining what it is, how it works, and its different use cases.

What is 'this' in JavaScript?

In JavaScript, this is a special keyword that refers to the current execution context, or more precisely, the object that owns the code being executed. The value of this is determined dynamically at runtime, depending on how a function is called.

Global Context:

When this is used outside of any function or object, it refers to the global object. In browsers, the global object is the window object. For example:

console.log(this); // Points to the 'window' object in the browser

Function Invocation:

When this is used inside a regular function (not an arrow function), its value depends on how the function is invoked:

Regular Function Call:

When a function is called without any context (e.g., not attached to any object), this will also point to the global object (window in browsers) in non-strict mode. However, in strict mode, this will be undefined.
```
function greet() {
  console.log(this); // 'this' points to 'window' or is 'undefined' in strict mode
}

greet();
```

Method Call:

When a function is called as a method of an object, this refers to the object itself.

const person = {
  name: 'John',
  greet: function() {
    console.log(this.name); // 'this' points to the 'person' object
  }
};

person.greet(); // Output: John

Arrow Functions:

Unlike regular functions, arrow functions capture the this value lexically from their surrounding scope. This means that the value of this inside an arrow function is the same as the value of this outside the arrow function.

const obj = {
  name: 'Alice',
  sayHello: function() {
    setTimeout(() => {
      console.log(this.name); // 'this' still refers to the 'obj' object
    }, 1000);
  }
};

obj.sayHello(); // Output: Alice

Constructor Functions:

When using a constructor function with the new keyword, this inside the constructor refers to the newly created instance.
```
function Person(name) {
  this.name = name;
}

const person1 = new Person('Bob');
console.log(person1.name); // Output: Bob
```

Event Handlers:

In event handlers, this usually points to the element that triggered the event.

<button id="myButton">Click Me</button>

<script>
document.getElementById('myButton').addEventListener('click', function() {
  console.log(this); // Points to the button element
});
</script>

Conclusion

The this keyword in JavaScript plays a crucial role in determining the context in which a function is executed. Understanding its behavior is vital to writing effective and maintainable code. Remember, this can be different depending on the way a function is called, so pay close attention to the function invocation to correctly understand its value.

JavaScript Promises: Unleashing the Power of Asynchronous Programming

Aditya Singh — Thu, 20 Jul 2023 09:41:59 +0000

💡 Asynchronous programming is a crucial concept in JavaScript, allowing developers to handle time-consuming tasks without blocking the main execution thread. One of the most significant advancements in this area is the introduction of JavaScript Promises.

Why Promises are Introduced?

Nested callbacks, commonly referred to as "callback hell," occur when you have multiple asynchronous operations that depend on each other. This nesting of callbacks can quickly become confusing and difficult to manage. Promises eliminate callback hell by enabling you to chain multiple asynchronous operations more gracefully.

What are Promises?

Promises are JavaScript objects that represent the eventual completion (or failure) of an asynchronous operation, returning a value or an error. They provide a clean and organized way to manage complex asynchronous code, making it easier to reason about and maintain.

Stages of Promises:

Pending: The initial state of a promise when it is created. It represents that the asynchronous operation is ongoing, and the promise is yet to be fulfilled or rejected.

Fulfilled: The promise enters this state when the asynchronous operation is successful. It means that the value the promise is supposed to return is available and can be accessed using the then() method.

Rejected: If the asynchronous operation encounters an error or fails, the promise enters the rejected state. The rejection reason, typically an error object, can be accessed using the catch() method or another then() with an error handling callback.

Creating a Promise:

Creating a promise in JavaScript involves using the Promise constructor, which takes a function as its argument. This function, also known as the "executor," contains the asynchronous operation you want to perform. The executor function receives two arguments: resolve and reject. You call these functions inside the executor to indicate the promise's outcome - whether it was fulfilled or rejected.

Handling Promises:

Handling promises involves using the then() and catch() methods to process the results of asynchronous operations and handle any errors that may occur during their execution. By chaining these methods, you can manage the flow of asynchronous code more effectively.

 let p = new Promise((resolve, reject) => {
     let a =1+1
     if(a==2){
         resolve('success')
     } else {
         reject('Falied')
     }
 }) 

 p.then((message)=>{
     console.log("This is in the then " + message)
 }).catch((message)=>{
     console.log("This is in the catch " + message)
 })

Using Promise.all() and Promise.race() :

These two utility functions, Promise.all() and Promise.race(), come in handy when dealing with multiple promises simultaneously. We'll delve into their differences and use cases.

Promise.all():

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const promise3 = fetch('https://api.example.com/data3');

// Promise.all() - Wait for all promises to resolve
Promise.all([promise1, promise2, promise3])
  .then(responses => {
    // Handle the resolved values of all three promises here
    console.log('Responses:', responses);
  })
  .catch(error => {
    // Handle any one of the promises being rejected here
    console.error('Error:', error.message);
  });

Promise.race():

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const promise3 = fetch('https://api.example.com/data3');

// Promise.race() - Get the first resolved promise
Promise.race([promise1, promise2, promise3])
  .then(response => {
    // Handle the first resolved promise here
    console.log('First Response:', response);
  })
  .catch(error => {
    // Handle any one of the promises being rejected here
    console.error('Error:', error.message);
  });

Conclusion:

JavaScript Promises provide a powerful mechanism for managing asynchronous operations in a more structured and intuitive way. By using methods such as then(), catch(), and finally(), developers can handle fulfilled and rejected promises gracefully, leading to more maintainable and error-resistant code.

Furthermore, Promise.resolve(), Promise.reject(), Promise.all(), Promise.race(), Promise.allSettled(), and Promise.any() offer additional functionalities to handle various asynchronous scenarios effectively. These methods play a crucial role in composing complex asynchronous workflows and synchronizing multiple promises with ease.

Closures: The Power of Lexical Scoping

Aditya Singh — Wed, 19 Jul 2023 10:28:25 +0000

💡 Closures enable developers to create and manage private variables, encapsulate functionality, and maintain data integrity. In this blog, we'll demystify closures, explore their inner workings, and see how they leverage lexical scoping to enhance the capabilities of JavaScript functions.

What is a Closure?

A closure is a function that retains access to its outer function's scope even after the outer function has finished executing. In simpler terms, a closure allows a function to remember and access variables from the scope where it was created, even if that scope is no longer in use.

function outerFunction() {
  let outerVariable = 'I am from the outer function';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // Output: "I am from the outer function"

In this example, innerFunction is a closure because it has access to the outerVariable, even after outerFunction has finished executing and returned innerFunction.

Lexical Scoping

To comprehend closures fully, it's essential to grasp the concept of lexical scoping. In JavaScript, lexical scoping means that the accessibility of variables is determined by their physical location in the source code. When a function is defined, it captures its surrounding scope, including variables and functions declared in that scope.

In the previous example, innerFunction is declared inside outerFunction, creating a closure. The closure holds a reference to the scope of outerFunction, allowing it to access outerVariable even when called from outside its original scope

Common Use Cases for Closures

Closures find application in various scenarios:

Data Privacy: Closures can be used to create private variables that are inaccessible from outside the function scope. This technique is often employed in design patterns like the Module Pattern, helping developers hide implementation details and expose only necessary functionalities.
Function Factories: Closures enable the creation of function factories that generate specialized functions based on different configurations. This is useful when you need similar functions with slight variations.
Callback Functions: Closures are heavily used in asynchronous programming, where callback functions need access to their surrounding data and context.
Memoization: Closures can be employed for memoization, which is a technique to cache expensive function results to improve performance.

Conclusion:

By understanding lexical scoping and the inner workings of closures, you can utilize this feature to your advantage while avoiding potential memory-related pitfalls. Embrace closures as one of the core building blocks of JavaScript, and they will undoubtedly enhance your programming skills and allow you to write cleaner and more maintainable code.

The JavaScript Event Loop: Understanding Its Mechanics and Functionality

Aditya Singh — Tue, 18 Jul 2023 12:05:22 +0000

💡 In the world of JavaScript, the event loop plays a crucial role in managing the execution of asynchronous code. It ensures that our programs remain responsive and efficient, allowing tasks to be executed in a timely manner. So, let's dive in and unravel the JavaScript event loop!

What is the event loop?

The event loop is a mechanism that handles the order of execution in JavaScript. It maintains a constant loop, continuously checking for pending tasks and executing them when appropriate. These tasks can include events, callbacks, and timers. Understanding the event loop is essential for writing efficient and responsive JavaScript code.

The Call Stack:

To comprehend the event loop, we must first understand the call stack. The call stack is a data structure that keeps track of function calls in our code. Whenever a function is invoked, it is pushed onto the call stack, and when it completes, it is popped off the stack. This stack-like behavior ensures that functions execute in a last-in, first-out (LIFO) order.

JavaScript is single-threaded, meaning it can only execute one task at a time. However, it can handle asynchronous operations efficiently by utilizing callback functions, promises, and event listeners. These asynchronous tasks are processed in the background, allowing the main thread to continue with other operations. The event loop plays a crucial role in managing this concurrency.

Why do we need macrotask and microtask queue?

The presence of macrotask and microtask queues in the JavaScript event loop is essential for managing asynchronous operations and maintaining the responsiveness of applications. Macrotask queues allow time-consuming tasks like timers and I/O operations to be scheduled and executed efficiently, preventing them from blocking other code execution. On the other hand, microtask queues prioritize important tasks such as promise callbacks, ensuring they are processed before the next macrotask. This division of tasks allows JavaScript to handle time-sensitive operations and maintain a smooth user experience by efficiently managing and executing tasks in the most optimal order.

How event loop works?

The event loop monitors the call stack by checking its status after each task is executed. When a task completes and the call stack becomes empty, the event loop checks the event queue (macrotask and microtask queue) for pending tasks. If there are tasks in the event queue, they are enqueued onto the call stack for execution. This process ensures that tasks from the event queue are processed in a timely manner. Microtasks are executed after the current task but before checking the event queue again, ensuring their prompt execution. By continuously monitoring the call stack, the event loop ensures that tasks are executed efficiently and that JavaScript applications remain responsive.

Conclusion:

Understanding the JavaScript event loop is essential for writing efficient and responsive code. By comprehending how the event loop manages the execution of asynchronous tasks, we can harness its power to build performant web applications. Remember, the event loop continuously checks the call stack and event queue, ensuring that tasks are executed in the most optimal order. With this knowledge in hand, you are now equipped to leverage the event loop to its full potential in your JavaScript projects.

Inside the JavaScript Engine: Unveiling the Magic Behind Efficient Code Execution

Aditya Singh — Mon, 17 Jul 2023 09:38:59 +0000

💡 When you run a JavaScript program, do you ever stop to wonder how it works? How does the code you write get transformed into something a computer can execute? What happens behind the scenes in the JavaScript engine?

We'll take a deep dive into the inner workings of the JavaScript engine. We'll explore the different components of a JavaScript engine and how they work together to execute your code.

Here are some types of components in a JavaScript runtime environment:

Memory Heap: This is where memory allocation happens.
Call Stack: This manages the execution of function calls.
Event Loop: This controls the flow of the program by handling callbacks and asynchronous operations.
Web API: This allows interaction with web-related features, such as DOM manipulation and HTTP requests.
Callback Queue: This stores callbacks that are ready to be executed by the Event Loop.

Now, let's now explore what exactly happens when your code enters the JavaScript runtime environment.

Initialization:

When your code enters the JavaScript runtime environment, the first step is initialization. The runtime environment sets up the necessary components, such as the JavaScript engine, memory heap, and call stack. It prepares the stage for code execution and ensures that the environment is ready to handle your code.

Lexical Analysis and Parsing:

Once initialization is complete, the JavaScript engine takes over. It performs lexical analysis, breaking your code into individual tokens and identifying their types. The engine then parses these tokens, constructing the Abstract Syntax Tree (AST), which represents the structure and meaning of your code.

Execution Context Creation:

Next, the JavaScript engine creates an execution context for your code. An execution context defines the scope, variables, and references that your code can access during runtime. It also sets up the scope chain and the "this" value, which determines the context in which your code is executed.

Code Execution:

With the execution context in place, the JavaScript engine starts executing your code line by line. It follows the control flow of your program, executing statements, evaluating expressions, and invoking functions as required. As your code executes, the engine updates the call stack, keeping track of the functions and their respective execution points.

Memory Management:

Memory management is a critical aspect of the JavaScript runtime environment. The memory heap dynamically allocates memory to store objects and variables created during code execution. The JavaScript engine employs garbage collection algorithms to reclaim memory occupied by objects that are no longer in use, preventing memory leaks and optimizing memory utilization.

Asynchronous Operations and Event Loop:

JavaScript is known for its asynchronous nature, allowing non-blocking operations such as network requests and timers. The JavaScript runtime environment manages these asynchronous tasks using the event loop. The event loop constantly monitors the call stack and handles the execution of pending asynchronous operations, ensuring that they are processed when their respective events occur.

Error Handling:

During code execution, errors can occur. The JavaScript runtime environment includes mechanisms to handle these errors gracefully. It provides error objects and stack traces to help developers identify and debug issues. Additionally, developers can employ try-catch blocks to catch and handle specific types of errors within their code.

Completion and Cleanup:

Once your code has been executed completely, the JavaScript runtime environment performs cleanup tasks. It releases any resources held, closes connections, and finalizes the execution process. At this point, the environment awaits further instructions or code to be executed.

Conclusion:

The JavaScript runtime environment plays a crucial role in executing your JavaScript code, providing the necessary infrastructure and components for smooth execution. From initialization to memory management, error handling, and asynchronous operations, the runtime environment ensures that your code runs efficiently and interacts seamlessly with its surroundings.

JavaScript Naming Conventions: Unlocking the Secrets to Clear and Concise Code

Aditya Singh — Sun, 16 Jul 2023 11:39:04 +0000

💡 The naming convention play a crucial role in JavaScript development. They serve as a roadmap, guiding developers towards writing clean, maintainable, and readable code. By following these guidelines, you will not only improve your own development experience but also make your code more accessible to other developers.

Variables

JavaScript variables names are case-sensitive, lowercase and uppercase letters are distinct. Recommended way to declare, is with camel case variable names.

let newName = 'John';

Boolean

Boolean variables plays a crucial role in JavaScript programming by representing true or false conditions. When naming Boolean variables, we should use is or has as prefixes.

let hasEmail = true;

Functions

Similar to variables, the camel case approach is recommended way to declare function names. In addition to that you should use nouns and verbs as prefix.
Example: If we declare a function to retrieve a name, the function name should be getName.

function getDetails(name, email){
    return '${name} ${email}';
}

Constants

The constants should be written in uppercase because they are nonchanging variables.

const PIE = 3.14

Classes

The classes should be written in pascal case. Here we have to use descriptive titles that explain the class’s capabilities.

class NewDetails{
    constructor(name, email){
        this.name= name;
        this.email = email; 
    }
}
var detail = newDetails('John', 'john@gmail.com')

Component

JavaScript components are widely used in frontend frameworks like React. Similar to classes, the pascal case approach is recommended way to declare component names.

function NewDetails(detail){
    return(
        <div>
            <h1>{detail.name}</h1>
        </div>
    );
}

Conclusion

By applying these practices, you'll enhance collaboration, ease debugging, and ensure a smoother development experience. Embrace the power of effective naming conventions and unlock the full potential of your JavaScript codebase.