DEV Community: Varun Kelkar

Hoisting in JavaScript: The Simple Concept That Can Trick You

Varun Kelkar — Mon, 23 Dec 2024 09:12:34 +0000

Hoisting is one of the most commonly asked JavaScript interview questions, often considered a beginner-friendly concept. However, its behaviour can be deceptive, leading even seasoned developers into traps.

What is Hoisting?

Hoisting in JavaScript is a behaviour in which variable and function declarations are moved to the top of their containing scope (script or function) during the compilation phase, before the code execution.

Only the declarations are hoisted, not the initialisations or assignments.

Hoisting has a different behaviour for Variables, Functions & Classes. Lets understand them one by one.

Variable Hoisting

Hoisting for var keyword

Variables declared using var are hoisted, but their initialisation remains in place.

console.log(a); // Output: undefined (declaration hoisted, not initialisation)
var a = 5;
console.log(a); // Output: 5

Hoisting for let & const keywords

Variables declared with let and const are also hoisted, but they are not accessible before their declaration due to the "temporal dead zone."

console.log(b); // ReferenceError: Cannot access 'b' before initialisation
console.log(c); // ReferenceError: Cannot access 'c' before initialisation
let b = 10;
const c = 'alphabet';

Function Hoisting

Function declarations are fully hoisted, meaning you can call a function before it is defined.

greet(); // Output: Hello!
function greet() {
    console.log("Hello!");
}

Function expressions (using var, let, or const) are not fully hoisted; only the variable declaration is hoisted, not the assignment.

sayHello(); // TypeError: sayHello is not a function
var sayHello = function() {
     console.log("Hello!");
};

Class Hoisting

Classes are not hoisted in the same way as functions. Using a class before declaring it will result in a ReferenceError.

const obj = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialisation
class MyClass {
    constructor() {
        console.log("Hello from MyClass!");
    }
}

Good To Remember

Hoisting occurs within the scope where a variable or function is defined. Variables declared inside a function are hoisted to the top of that function's scope.
For let and const, a "temporal dead zone" exists from the start of the block until the variable's declaration is encountered. During this period, accessing the variable will throw a ReferenceError.

A few Best Practices to follow

Declare variables and functions at the top of their scope to avoid confusion and bugs.
Avoid using var in modern JavaScript; prefer let and const.
Understand the difference between function declarations and expressions to avoid errors.

Extra Information

What is Temporal Dead Zone(TDZ)?

The Temporal Dead Zone (TDZ) is the time between the start of a variable's scope and its declaration in the code. During this period, accessing the variable will throw a ReferenceError.

Why does TDZ exist?

Predictable Behavior
The TDZ ensures that variables are not used before they are properly declared and initialized.
Prevention of Common Bugs
Without the TDZ, variables might have undefined or unintended values before initialization, leading to hard-to-debug issues.
Encourages Declarative Code
By requiring variables to be declared before use, the TDZ promotes clearer and more structured code.

Hoisting might seem like a straightforward concept, but its nuances can catch even experienced developers off guard. By understanding how declarations are treated under the hood, you can write cleaner, more predictable code and ace those tricky interview questions. Remember, mastering the basics is the first step to becoming a JavaScript pro! Happy coding!

Alternative to AbortController for Handling Async Timeouts in JavaScript

Varun Kelkar — Wed, 27 Nov 2024 07:15:14 +0000

In the world of asynchronous JavaScript, understanding how to handle timeouts and cancellations isn’t just about tools like AbortController — it’s about crafting resilient and adaptable solutions for every scenario.

The AbortController API has become a go-to solution for handling task cancellations, especially in modern projects. However, it’s not always the ideal choice—or even an available one—depending on the context or the environment you're working in.

In this blog, we’ll explore alternative method for managing async timeouts without relying on AbortController.


async function customAbortController(asyncFunction, timeout = 5000) {
  return async (...args) => {
    const timeoutPromise = new Promise((_, reject) => {
      const id = setTimeout(() => {
        clearTimeout(id)
        reject(new Error(`Operation timed out after ${timeout} ms`))
      }, timeout)
    })
    try {
      return await Promise.race([asyncFunction(...args), timeoutPromise])
    } catch (error) {
      throw error
    }
  }
}

const abortControllerWrapper = async (asyncFunction, params) => {
  const response = await customAbortController(asyncFunction, 5000)
  return response(params);
}

// Example usage
const getUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users')
  // handle response the way you prefer.
}

const getTodoById = async (id) => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
  // handle response the way you prefer.
}

const loadUsers = async () => {
  try {
    const response = await abortControllerWrapper(getUsers);
    // handle response the way you prefer.
  } catch (error) {
    console.error("ERROR", error.message) // "Operation timed out after 5000 ms"
  }
}
loadUsers();

// Try out yourself for getTodoById 😄

What are we doing exactly?

In Javascript, Promise does not have any official way to cancel itself.

So we’re leveraging Promise.race() method here.

We’re creating a dummy Promise which resolves in given time & racing it against actual API call so either we get the API response or promise rejects after timeout has been crossed.

I hope this code was helpful 😄!

Feel free to customise according to your need & do let me know how did you feel about it ❤️

Mastering Error Boundaries in React: A Guide to Effective Error Handling

Varun Kelkar — Fri, 19 Jul 2024 12:10:44 +0000

What is an Error Boundary?

While building applications, errors are inevitable. They might come from APIs, UI or from several other places.

It's very important to handle these errors gracefully & maintain good UX despite these errors.

Error Boundary is one such way of error handling in React.

How does Error Boundary help?

To understand this, let's understand the situation before the introduction of the Error Boundary.

Before Error Boundaries, the errors occurring inside components eventually propagated & broke the UI or rendered the white screen.

This caused a really bad UX.

Error Boundary helps us to handle such errors & display a fallback UI instead of breaking the UI or white screen displayed.

How to use Error Boundary?

React v16 officially introduced Error Boundary.

It's a Class-Based Component which can be used to wrap your application.

It accepts a fallback UI to be displayed in case your application has errors or otherwise, it simply renders the children component to resume the normal flow of your application.

This is how the React Documentation recommends using it,

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

What's the problem with React's Error Boundary?

It cannot catch errors occurring in,

Event Handlers (these errors need to be handled with try-catch blocks)
Asynchronous Code (APIs, setTimeout, requestAnimationFrame etc.)
Server-side rendering
The error that occurs in Error Boundary itself
It does not work with Functional Components. Although we can make it work with a few code changes.
Hooks cannot be used inside it.

What's the solution?

There's a npm package called react-error-boundary which is a wrapper on top of the traditional Error Boundary component.

Using this package, we're able to overcome all the issues faced in the traditional Error Boundary component.

How to use it?

You can wrap your entire application with or you can wrap individual components with .

The granularity of implementation is up to you.

Let's understand how to use it.

import React from 'react';
import { ErrorBoundary } from "react-error-boundary";

const App = () => {
return <ErrorBoundary fallback={<div>Something went wrong</div>}>
/* rest of your component */
</ErrorBoundary>
}

This is the simplest example of using ErrorBoundary. There's more to this library.

Understanding react-error-boundary API

Let's try to understand API with different scenarios.

1. I want to show a generic fallback UI for Errors in the Application

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const App = () => {
 return <ErrorBoundary fallback={<div>Something went wrong</div>}>
 /* rest of your component */
 </ErrorBoundary>
 }

2. I want to show specific error details in my fallback component

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 function fallbackRender({ error, resetErrorBoundary }) {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre style={{ color: "red" }}>{error.message}</pre>
     </div>
   );
 }

 const App = () => {
 return <ErrorBoundary 
 fallbackRender={fallbackRender}
 onReset={(details) => {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 </ErrorBoundary>
 }

Instead of fallback or fallbackRender, you can also use a React Component.

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre style={{ color: "red" }}>{error.message}</pre>
     </div>
   );
 }

 const App = () => {
 return <ErrorBoundary 
 FallbackComponent={Fallback}
 onReset={(details) => {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 </ErrorBoundary>
 }

3. I want to Log my errors

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const logError = (error: Error, info: { componentStack: string }) => {
   // Do something with the error, e.g. log to an external API
 };

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre style={{ color: "red" }}>{error.message}</pre>
     </div>
   );
 }
 // You can use fallback / fallbackRender / FallbackComponent anything
 const App = () => {
 return <ErrorBoundary 
 FallbackComponent={Fallback}
 onError={logError}
 onReset={(details) => {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 </ErrorBoundary>
 }

4. I want to catch errors in event handlers & async code

 import { useErrorBoundary } from "react-error-boundary";

 function Example() {
   const { showBoundary } = useErrorBoundary();
   const getGreeting = async(name) => {
     try {
         const response = await fetchGreeting(name);
         // rest of your code
     } catch(error){
          // Show error boundary
         showBoundary(error);
     }
   }
   useEffect(() => {
    getGreeting()
   });

   return <Whatever UI you want to render/>
 }

A few gotchas

ErrorBoundary is a client component. You can only pass props to it that are serializeable or use it in files that have a "use client"; directive.

1. What is a serializable prop?

Serilzable prop means it can be converted to byte stream in such a way that byte stream can be converted back to orignal prop.

A common way to do that in Javascript is JSON.stringify() & JSON.parse().

2. How to use "use client"; directive?

Simply mention it at top of the file

"use client";

There are a few more variations you can use. But this article is good enough to get you started.

Checkout their full documentation here.

Please let me know in the comments if you found it helpful.

Happy Coding!

Understanding Closures in JavaScript: A Beginner's Guide

Varun Kelkar — Thu, 06 Jun 2024 06:21:48 +0000

What's a closure

Why are they needed

Encapsulation & State Management

Higher Order Functions

Function Currying & Composition

How Javascript libraries leverage closures

In the vast world of JavaScript, closures stand out as one of the most powerful and intriguing concepts. Whether you're a seasoned developer or just starting your coding journey, understanding closures is essential for mastering JavaScript.

In this blog post, we'll demystify closures, exploring their fundamental principles, practical applications, and why they are indispensable in modern JavaScript development.

By the end, you'll have a clear understanding of how closures work and how to leverage them to enhance your coding skills.

What's a closure ?

A closure is a fundamental concept in JavaScript (and many other programming languages) that allows a function to retain access to its lexical scope, even after the function that created the scope has finished executing.

To be honest, the definition does not give an idea about the power of closures🙈.

So what if a function can retain its lexical scope ? What's the big deal ?

Believe Me ❤️ , closures are an infinity stone in the gauntlet of functional programming 🔮

Why are they needed ?

In modern day code development, Functional Programming is highly leveraged because it has certain advantages over OOPS in certain areas.

With this change in approach, we still needed to support basic features of OOPS & clean coding.

Functional Programming has it's unique ways of implementing these features

Modular & Reusable Code.
Encapsulation & State Management.

This is exactly where closure is needed.

💡Functional Programming is easier to understand with examples. So i'll provide lots of them.

What is functional programming?

For simplicity, let's say functional programming is all about thinking in terms of functions & smartly leveraging them in our code.
Functions are treated as first class citizens. They can be declared as a variable, can be passed as arguments, can be returned from another function & much more.

Encapsulation & State Management

Functional Programming has no concept of access specifiers - public, private & protected.

So how do we achieve encapsulation?

Closure is one of the ways you can achieve encapsulation.

Use-case

We have a variable count & we want to allow limited operations on it - increment, decrement, reset & get.
We want to prevent count from external access i.e. keep it private.

First let's see OOPS way of achieving encapsulation.

Encapsulation using OOPS

class Count {
    private _count = 0;
    function increment(){
        this._count++;
    }
    function decrement(){
        this._count--;
    }
    function reset(){
        this._count = 0;
    }
    function getCount(){
        return this._count;
    }
}

const count = new Count();

Encapsulation using Functional Programming

function count() {
    let count = 0;
    return {
        increment: function(){
            count++;
        },
        decrement: function(){
            count--;
        },
        reset: function(){
            count = 0;
        },
        getCount: function(){
            return count;
        }
    };     
};

const fpCount = count();

Now does this statement ring a bell ??? Let's see...

Closure allows a function to retain access to its lexical scope, even after the function that created the scope has finished executing.

When we called count() it executed & returned us methods to play around with count variable.

But even after its execution, all handler methods remember value of count because they have access to their lexical environment.

Also using closures the handler functions manage the state of count variable.

This way we've achieved encapsulation & state management of count variable 😉🎉

Higher Order Functions

A higher-order function is a function that either Takes one or more functions as arguments or Returns a function as its result.

The purpose of Higher Order Functions is to make the code modular & reusable.

Use-case

We want to loop over an array

// Classical way to loop over an array
const numbers = [1,2,3,4,5,6];

for(let i = 0; i < numbers.length; i++){
    console.log('number ', numbers[i], ' is at index ', i);
}

// Same using functional programming

function printElementAndIndex(element, index) {
    console.log('number ', element, ' is at index ', index);
}

// For any beginners reading this, 
// forEach is a higher order function provided by javascript
numbers.forEach(printElementAndIndex);

You see printElementAndIndex was called for every element in numbers array.

It remembered the values of element & index passed to it at that iteration.

Attaching event handler

// Assuming we're attaching a click listener 
// on button with id 'my-button'

const button = document.getElementById('#my-button');

const handleButtonClick = (event) => {
 // handle click event here
}

// 'addEventListener' is the higher order function here
// because it accepts function as an argument
button.addEventListener('click',handleButtonClick);

addEventListener finishes its execution the moment UI is rendered.

handleButtonClick is a callback which executes later but it still gets access to Event object because of closure.

Function Currying & Composition

Function Currying is a technique using which a function with multiple arguments is transformed into a series of functions each taking one argument.

Function Composition is a technique using which we can combine two or more functions to create custom functions.

These techniques also help us write Modular & Reusable code by leveraging Pure Functions which is one of the fundamental advantages of using Functional Programming.

What are Pure Functions?

Functions which return consistent output provided it receives consistent input. They cause no side-effects, do not modify any external state & make code more predictable.

Use-case

Let's say we have to write a function which calculates bill.

The conditions are,

We give 10% discount if amount is greater than 1000.
We levy 7% service charge on total amount.

This is how we could've written it without functional programming.

function calculateBill(amount) {
    let totalAmount = amount;
    if(totalAmount > 1000){
        totalAmount = totalAmount - ( totalAmount * 10 / 10 );
    }
    return totalAmount + ( totalAmount * 7 / 100 );
}

Although this is a working function, it has some pitfalls.

Values of service charge & discount are hardcoded. In future if we have multiple discount offers depending on amount it's hard to adapt. Either too many if & else blocks or code duplication if separate function for each condition is created.
It's not a pure function.

Now let's write the same using Currying & Composition.

// Function Currying
// Notice how we split into two funtions
// Each handles one argument & makes function modular & reusable
function calculateDiscount(discountPercentage, eligibleAmount){
    return function(amount){
        if(amount > eligibleAmount) {
            return amount - ( amount * discountPercentage / 100 );
        }
        return amount;  
    }
}

function addServiceCharge(taxPercentage){
    return function(amount){
      return amount + ( amount * taxPercentage / 100 );
    }
}

// Later on if we change discount & tax percentages, 
// we can quickly adapt.
// Notice that these are pure functions.
const discountByTen = calculateDiscount(10, 1000);
const levyServiceChargeOf7 = addServiceCharge(7);

// Function Composition
// Notice how we combined existing functions to create new function
const composeBillCalculator = (levyServiceCharge, applyDiscount) 
=> amount => levyServiceCharge(applyDiscount(amount));

// Currently we have, 
// 1] 10% discount
// 2] 7% service charge
const calculateBill = 
composeBillCalculator(levyServiceChargeOf7, discountByTen);

export { calculateBill };

How Javascript libraries leverage closures

React

React, a popular frontend javascript library leverages closures to manage state of the component.

Also it has a concept of Hooks which entirely based on closures.

import React, { useState, useEffect } from 'react';

function Timer() {

    // useState leverages closure internally.
    // setSeconds is a setter to update state.
    // seconds acts like a getter.

    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds(prevSeconds => prevSeconds + 1);
        }, 1000);

        return () => clearInterval(interval); // Cleanup
    }, []); // Empty dependency array to run once

    return <div>{seconds} seconds have passed.</div>;
}

Nodejs

Nodejs, a popular backend javascript runtime, leverages closures when managing asynchronous execution via callbacks.

Use-case

File read operation


const fs = require('fs');

function readFile(filePath) {
    fs.readFile(filePath, 'utf8', (err, data) => {
        if (err) {
            console.error('Error reading file:', err);
            return;
        }
        console.log('File contents:', data);
    });
}

readFile('example.txt');

The callback function inside fs.readFile forms a closure that retains access to filePath and any other outer variables.

This closure ensures the callback can use these variables even after the asynchronous file read operation completes.

ExpressJs is a popular framework for Nodejs.
It has a concept called middlewares which uses closures.

I hope you understood how cool the closures are 😍

Do let me know in comments if you know any other usage of closures.

Go ahead leverage them in your code with confidence 😊

Additionally, closures are a popular topic in technical interviews. With the knowledge and examples provided here, you should be well-equipped to explain and demonstrate closures with confidence during your next interview.

Thank you for reading, and happy coding!

Understanding Closures in JavaScript

Varun Kelkar — Mon, 03 Jun 2024 15:55:58 +0000

What's a closure

Why are they needed

Encapsulation & State Management

Higher Order Functions

Function Currying & Composition

How Javascript libraries leverage closures

In this blog post, we'll demystify closures, exploring their fundamental principles, practical applications, and why they are indispensable in modern JavaScript development.

By the end, you'll have a clear understanding of how closures work and how to leverage them to enhance your coding skills.

What's a closure ?

To be honest, the definition does not give an idea about the power of closures🙈.

So what if a function can retain its lexical scope ? What's the big deal ?

Believe Me ❤️ , closures are an infinity stone in the gauntlet of functional programming 🔮

Why are they needed ?

In modern day code development, Functional Programming is highly leveraged because it has certain advantages over OOPS in certain areas.

With this change in approach, we still needed to support basic features of OOPS & clean coding.

Functional Programming has it's unique ways of implementing these features

Modular & Reusable Code.
Encapsulation & State Management.

This is exactly where closure is needed.

💡Functional Programming is easier to understand with examples. So i'll provide lots of them.

What is functional programming?

For simplicity, let's say functional programming is all about thinking in terms of functions & smartly leveraging them in our code.
Functions are treated as first class citizens. They can be declared as a variable, can be passed as arguments, can be returned from another function & much more.

Encapsulation & State Management

Functional Programming has no concept of access specifiers - public, private & protected.

So how do we achieve encapsulation?

Closure is one of the ways you can achieve encapsulation.

Use-case

We have a variable count & we want to allow limited operations on it - increment, decrement, reset & get.
We want to prevent count from external access i.e. keep it private.

First let's see OOPS way of achieving encapsulation.

Encapsulation using OOPS

class Count {
    private _count = 0;
    function increment(){
        this._count++;
    }
    function decrement(){
        this._count--;
    }
    function reset(){
        this._count = 0;
    }
    function getCount(){
        return this._count;
    }
}

const count = new Count();

Encapsulation using Functional Programming

function count() {
    let count = 0;
    return {
        increment: function(){
            count++;
        },
        decrement: function(){
            count--;
        },
        reset: function(){
            count = 0;
        },
        getCount: function(){
            return count;
        }
    };     
};

const fpCount = count();

Now does this statement ring a bell ??? Let's see...

Closure allows a function to retain access to its lexical scope, even after the function that created the scope has finished executing.

When we called count() it executed & returned us methods to play around with count variable.

But even after its execution, all handler methods remember value of count because they have access to their lexical environment.

Also using closures the handler functions manage the state of count variable.

This way we've achieved encapsulation & state management of count variable 😉🎉

Higher Order Functions

A higher-order function is a function that either Takes one or more functions as arguments or Returns a function as its result.

The purpose of Higher Order Functions is to make the code modular & reusable.

Use-case

We want to loop over an array

// Classical way to loop over an array
const numbers = [1,2,3,4,5,6];

for(let i = 0; i < numbers.length; i++){
    console.log('number ', numbers[i], ' is at index ', i);
}

// Same using functional programming

function printElementAndIndex(element, index) {
    console.log('number ', element, ' is at index ', index);
}

// For any beginners reading this, 
// forEach is a higher order function provided by javascript
numbers.forEach(printElementAndIndex);

You see printElementAndIndex was called for every element in numbers array.

It remembered the values of element & index passed to it at that iteration.

Attaching event handler

// Assuming we're attaching a click listener 
// on button with id 'my-button'

const button = document.getElementById('#my-button');

const handleButtonClick = (event) => {
 // handle click event here
}

// 'addEventListener' is the higher order function here
// because it accepts function as an argument
button.addEventListener('click',handleButtonClick);

addEventListener finishes its execution the moment UI is rendered.

handleButtonClick is a callback which executes later but it still gets access to Event object because of closure.

Function Currying & Composition

Function Currying is a technique using which a function with multiple arguments is transformed into a series of functions each taking one argument.

Function Composition is a technique using which we can combine two or more functions to create custom functions.

These techniques also help us write Modular & Reusable code by leveraging Pure Functions which is one of the fundamental advantages of using Functional Programming.

What are Pure Functions?

Functions which return consistent output provided it receives consistent input. They cause no side-effects, do not modify any external state & make code more predictable.

Use-case

Let's say we have to write a function which calculates bill.

The conditions are,

We give 10% discount if amount is greater than 1000.
We levy 7% service charge on total amount.

This is how we could've written it without functional programming.

function calculateBill(amount) {
    let totalAmount = amount;
    if(totalAmount > 1000){
        totalAmount = totalAmount - ( totalAmount * 10 / 10 );
    }
    return totalAmount + ( totalAmount * 7 / 100 );
}

Although this is a working function, it has some pitfalls.

Values of service charge & discount are hardcoded. In future if we have multiple discount offers depending on amount it's hard to adapt. Either too many if & else blocks or code duplication if separate function for each condition is created.
It's not a pure function.

Now let's write the same using Currying & Composition.

// Function Currying
// Notice how we split into two funtions
// Each handles one argument & makes function modular & reusable
function calculateDiscount(discountPercentage, eligibleAmount){
    return function(amount){
        if(amount > eligibleAmount) {
            return amount - ( amount * discountPercentage / 100 );
        }
        return amount;  
    }
}

function addServiceCharge(taxPercentage){
    return function(amount){
      return amount + ( amount * taxPercentage / 100 );
    }
}

// Later on if we change discount & tax percentages, 
// we can quickly adapt.
// Notice that these are pure functions.
const discountByTen = calculateDiscount(10, 1000);
const levyServiceChargeOf7 = addServiceCharge(7);

// Function Composition
// Notice how we combined existing functions to create new function
const composeBillCalculator = (levyServiceCharge, applyDiscount) 
=> amount => levyServiceCharge(applyDiscount(amount));

// Currently we have, 
// 1] 10% discount
// 2] 7% service charge
const calculateBill = 
composeBillCalculator(levyServiceChargeOf7, discountByTen);

export { calculateBill };

How Javascript libraries leverage closures

React

React, a popular frontend javascript library leverages closures to manage state of the component.

Also it has a concept of Hooks which entirely based on closures.

import React, { useState, useEffect } from 'react';

function Timer() {

    // useState leverages closure internally.
    // setSeconds is a setter to update state.
    // seconds acts like a getter.

    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds(prevSeconds => prevSeconds + 1);
        }, 1000);

        return () => clearInterval(interval); // Cleanup
    }, []); // Empty dependency array to run once

    return <div>{seconds} seconds have passed.</div>;
}

Nodejs

Nodejs, a popular backend javascript runtime, leverages closures when managing asynchronous execution via callbacks.

Use-case

File read operation


const fs = require('fs');

function readFile(filePath) {
    fs.readFile(filePath, 'utf8', (err, data) => {
        if (err) {
            console.error('Error reading file:', err);
            return;
        }
        console.log('File contents:', data);
    });
}

readFile('example.txt');

The callback function inside fs.readFile forms a closure that retains access to filePath and any other outer variables.

This closure ensures the callback can use these variables even after the asynchronous file read operation completes.

ExpressJs is a popular framework for Nodejs.
It has a concept called middlewares which uses closures.

I hope you understood how cool the closures are 😍

Do let me know in comments if you know any other usage of closures.

Go ahead leverage them in your code with confidence 😊

Thank you for reading, and happy coding!

Understanding JavaScript Debounce vs Throttle for Better App Efficiency

Varun Kelkar — Mon, 27 May 2024 10:28:48 +0000

Introduction

In the fast-paced world of web development, performance and efficiency are paramount. When building interactive applications, it's common to encounter events that fire frequently, such as window resizing, scrolling, or user input. Without proper handling, these events can lead to performance issues and a poor user experience. This is where debounce and throttle come into play.

Debounce and throttle are two essential techniques that help optimize event handling by controlling the rate at which functions are executed. While they both serve to improve performance, they do so in distinct ways, each suited to different scenarios.

In this blog, we'll dive deep into the concepts of debounce and throttle, explore their differences, and provide practical examples to help you implement these techniques in your JavaScript projects.

What is Throttle?

Throttle is a technique used in JavaScript to control the rate at which a function is executed. When an event occurs frequently, such as scrolling, resizing, or mouse movements, invoking a function for every single event can lead to performance bottlenecks.

Throttling helps manage this by ensuring that the function is only called at most once in a specified period, regardless of how many times the event is triggered.

Understanding the use case for throttle

Let's understand throttle with an example.

Let's assume you have a webpage like this.

You can type your input into search box & grid will render matching results.

Additionally, you can click the Refresh button to refresh grid data. This will trigger GET API call.

Now what if user keeps on clicking on Refresh button? It will trigger countless API calls & will lead to bad performance of webpage. At one point it may even crash.

This is where we can use throttle. Using throttle, we can limit the number of times the Refresh function is called.

This is how throttle looks like,

Once user clicks Refresh button, we call the refresh function & then block the refresh function from getting called again until certain time has passed let's say 300ms.

This way we can reduce the network calls & improve the performance.

How does throttle function look like?

Let's try to write our own throttle function.



function throttle(functionToCall, limit = 200){
    // Initially we want to call the `functionToCall`
    // Hence default value is set to true.
    let hasIntervalPassed = true;
    return function(...arguments){
        const context = this;
        const args = arguments;
        // Once the function is called, 
        // we now want to block the function call & set the limit
        if(hasIntervalPassed){
             // We're using `apply` because
             // 1] It can access context 
             // 2] Multiple arguments can be passed easily.
             functionToCall.apply(context, args);
             hasIntervalPassed = false;
             setTimeout(function(){
               // Once the interval has passed, 
               // we want to allow `functionToCall` to be called.
               hasIntervalPassed = true;
             }, limit);
        } 

    }
}

// Let's assume our button has id `my-custom-button`
const myButton = document.getElementById('my-custom-button');
function buttonClick (event) {
    // handle api call here
} 
myButton.addEventListener('click', throttle(function(event) {
  buttonClick(event);
}, 500))

This covers a very basic implementation of throttle function.

If you wish to use a more professional version, checkout Lodash Throttle.

It's a production ready & well-tested function.

What is Debounce?

Debounce is a technique used in JavaScript to limit the rate at which a function is executed. When an event triggers frequently, debounce ensures that the function runs only after a specified period of inactivity. This means the function will only be called once the event has stopped firing for a certain amount of time.

Understanding the use case for debounce

Lets take the same webpage as above

Let's say you have this webpage.

You want to search some data in the grid.

Let's assume a Search API call is invoked when anything is typed into search input. Now do we need to call Search API when for every keystroke? Will anything significant be captured in the search input per keystroke?

Invoking Search API per keystroke will have lots of network calls. This will put a lot of stress on your application. It may even crash.

With debounce we wait for a certain interval of time before we make the function call.

This way we even give user enough time to type something significant & this might even increase the accuracy of Search API results.

This is how debounce looks like,

We wait till user has interacted with component. When the time interval passes without any user activity, call the function.

If user interacts with the component before the interval has passed, we reset the interval & continue to wait until interval passes without any user activity.

How does debounce function look like?

Let's try to write our own debounce function.



function debounce(functionToCall, interval = 200){
    let timeOutId;
    return function(...arguments){
        // We keep storing all the arguments when user is interacting
        // When the user interaction stops for mentioned interval,
        // We call the function with these arguments
        const context = this;
        const args = arguments;
        // If the user keeps interacting before interval has passed,
        // We reset the interval 
        clearTimeout(timeOutId);
        // If no user activity is detected for mentioned interval,
        // We call the function
        timeOutId = setTimeout(() => {
        functionToCall.apply(context, args);
        },interval)
     };   
}

// Let's assume our search field has id `my-search-field`
const mySearchField = document.getElementById('my-search-field');
function handleSearch (event) {
    // handle api call here
} 
mySearchField.addEventListener('input', debounce(function(event) {
  handleSearch(event);
}, 2000));

This covers a very basic implementation of debounce function.

If you wish to use a more professional version, checkout Lodash Debounce.

It's a production ready & well-tested function.

That's it folks! Hope you enjoyed the learning 😄

Go ahead! Leverage throttle & debounce in your code 🥳

Mastering JavaScript: Understanding call, bind, and apply

Varun Kelkar — Thu, 16 May 2024 07:57:26 +0000

JavaScript is a versatile language with numerous built-in methods and functions that empower developers to create robust and efficient applications.

Among these, the call, apply, and bind methods stand out as powerful tools for manipulating the context of functions and managing how they're executed.

Also Explain call, apply & bind is one of the most popular interview questions 😎

In this comprehensive guide, we'll delve into the intricacies of call, apply, and bind, demystifying their functionality and showcasing their practical applications.

Let's get started 🥳

Why are these methods needed?

Let's take an example.

class Person {
    constructor(name, email, contact){
        this.name = name;
        this.email = email;
        this.contact = contact;
    }
}

class Vehicle {
    constructor(name, type, number){
        this.name = name;
        this.type = type;
        this.number = number;
    }
}

Consider these two classes. Let's say we want to print name of the person & vehicle.

What options do we have here?

We can add printName method to each of the classes. This way each class can have its own method. But the method would do exact same thing i.e. print the name.

So does it make sense to write duplicate code? What if we could write one generic print method & it could be shared between these classes?

This is exactly where call apply & bind come into picture.

How do these methods help?

Let's understand how we can solve this code duplication problem using these methods.

Call

Using call method, we can pass the context of Person & Vehicle classes & call the function printName .

Since printName has access to context of Person & Vehicle, it can access properties & methods of respective classes.

Call method allows to share generic functions between Classes & Objects.

const printName = function() {
    console.log('Name: ', this.name);
}

const person = new Person('abc', 'abc@gmail.com', '8768876543');

const vehicle = new Vehicle('aventador', 'sports', 'MJ10DS8765');

printName.call(person);
printName.call(vehicle);

// Output
// Name: abc
// Name: aventador

// What if we want to pass arguments to printName method?
// We can do like this
const printNameAndNumber = function(number) {
    console.log(this.name + ' has number ' + number);
}

printNameAndNumber.call(person, "8768876543");
printNameAndNumber.call(vehicle, "MJ10DS8765");

// Output
// abc has number 8768876543
// aventador has number MJ10DS8765

💡 You can pass any number of arguments to call method in CSV format. Remember, first argument always has to be the context & from second argument onwards you can pass anything.

Apply

apply method does the exact same things as the call method.

The only difference is the way you pass the arguments.

const printNameAndNumber = function(number) {
    console.log(this.name + ' has number ' + number);
}

const person = new Person('abc', 'abc@gmail.com', '8768876543');

const vehicle = new Vehicle('aventador', 'sports', 'MJ10DS8765');

printNameAndNumber.apply(person, ["8768876543"]);
printNameAndNumber.apply(vehicle, ["MJ10DS8765"]);

// Output is exactly as that of call method
// abc has number 8768876543
// aventador has number MJ10DS8765

💡In apply method, instead of passing arguments in CSV format, you pass an array of arguments. Remember, the first argument always has to be the context just like call method.

Bind

bind method does the exact same things as the call method.

The only difference is instead of calling the function immediately, it creates a reference to that function & returns the reference.

We can save the reference for future use.

const printNameAndNumber = function(number) {
    console.log(this.name + ' has number ' + number);
}

const person = new Person('abc', 'abc@gmail.com', '8768876543');

const vehicle = new Vehicle('aventador', 'sports', 'MJ10DS8765');

const printPersonDetails = printNameAndNumber.bind(person, "8768876543");
const printVehicleDetails = printNameAndNumber.bind(vehicle, "MJ10DS8765");

printPersonDetails();
printVehicleDetails();

// Output is exactly as that of call method
// abc has number 8768876543
// aventador has number MJ10DS8765

I hope this blog was really helpful 😄😉

Go ahead & start leveraging these methods in your code 😎

And yes, if anyone asks these methods in the interviews, nail them ❤️

DEV Community: Varun Kelkar

Hoisting in JavaScript: The Simple Concept That Can Trick You

What is Hoisting?

Variable Hoisting

Hoisting for var keyword

Hoisting for let & const keywords

Function Hoisting

Class Hoisting

Good To Remember

A few Best Practices to follow

Extra Information

What is Temporal Dead Zone(TDZ)?

Why does TDZ exist?

Alternative to AbortController for Handling Async Timeouts in JavaScript

What are we doing exactly?

Mastering Error Boundaries in React: A Guide to Effective Error Handling

What is an Error Boundary?

How does Error Boundary help?

How to use Error Boundary?

What's the problem with React's Error Boundary?

What's the solution?

How to use it?

Understanding react-error-boundary API

A few gotchas

Understanding Closures in JavaScript: A Beginner's Guide

Table of Contents

What's a closure ?

Why are they needed ?

Encapsulation & State Management

Encapsulation using OOPS

Encapsulation using Functional Programming

Higher Order Functions

Function Currying & Composition

How Javascript libraries leverage closures

React

Nodejs

Understanding Closures in JavaScript

Table of Contents

What's a closure ?

Why are they needed ?

Encapsulation & State Management

Encapsulation using OOPS

Encapsulation using Functional Programming

Higher Order Functions

Function Currying & Composition

How Javascript libraries leverage closures

React

Nodejs

Understanding JavaScript Debounce vs Throttle for Better App Efficiency

Introduction

What is Throttle?

Understanding the use case for throttle

How does throttle function look like?

What is Debounce?

Understanding the use case for debounce

How does debounce function look like?

Mastering JavaScript: Understanding call, bind, and apply

Why are these methods needed?

How do these methods help?

Call

Apply

Bind