While there are awesome libraries and components like Swiper that are used to create responsive and accessible carousels, it's still important to know how to create these components from scratch.

Creating these components from scratch will make you a better React developer and help you appreciate the work that goes into creating these libraries and components.

So without further ado, let’s get started. :)

Getting Started

Before starting, you must have npm installed on your computer, which comes bundled with Node.js which you can install from here.

Project Setup

Run the following commands to initialize the React application and install the required dependencies.

npm create vite@latest react-carousel --template react
cd react-carousel
npm install
npm run dev

Folder Structure

Before we start writing any code, let's create the folder structure required for the front-end application.

You can create the above directories with these commands.

cd react-carousel/src
mkdir components hooks

(Optional) Adding fonts and styles

• Add these fonts to the head section of the index.html file under the project’s root directory.

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

• Replace the CSS inside the index.css with the code below:

*::before,
*,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 48;
}

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #9EC6F3;
}

Basic Carousel Layout

Now that we have created the initial set-up required to build and run the application, let’s start by creating the basic carousel layout — that is, the barebones HTML structure of the carousel component.

Note:— We will use CSS modules to style our React application. So for each component, we will also create a CSS or SCSS file for that component.

Create the Slider.jsx and Slider.module.css files inside the components/Slider folder and add the following code to them.

Slider.jsx

//Slider.jsx

import { Children } from "react";

import styles from "./Slider.module.css";

const Slider = ({
  items,
  children,
}) => {

  const sliderItems = items || Children.toArray(children);

  const sliderButtonHandler = (direction) => {
    if (direction === "forward") {
      // TODO: Add logic to slide to next item
    } else if (direction === "backward") {
      // TODO: Add logic to slide to previous item
    }
  };

  return (
    <div className={styles.slider}>
      <div className={styles.slidesContainer}>
        <div style={{ display: "flex" }}>
          {sliderItems.map((item, index) => {
            return (
              <div key={index}>
                {item}
              </div>
            );
          })}
        </div>
      </div>
      <button
        className={`${styles.slideButton} ${styles.slideButtonPrev}`}
        onClick={() => sliderButtonHandler("backward")}
      >
        <span
          className={`material-symbols-outlined ${styles.slideButtonIcon}`}
          style={{ letterSpacing: "4px" }}
        >
          arrow_back_ios_new
        </span>
      </button>
      <button
        className={`${styles.slideButton} ${styles.slideButtonNext}`}
        onClick={() => sliderButtonHandler("forward")}
      >
        <span className={`material-symbols-outlined ${styles.slideButtonIcon}`}>
          arrow_forward_ios
        </span>
      </button>
    </div>
  );
};

export default Slider;

Slider.module.css

.slider {
    position: relative;
    max-width: 1300px;
    width: 100%;
}

.slidesContainer {
    overflow: hidden;
    width: 100%;
    margin-left: 8px;
}

.slideButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 48px;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px;
    border: none;
    cursor: pointer;
}

.slideButton:hover {
    box-shadow: rgb(0 0 0 / 25%) 0px 4px 10px;
}

.slideButtonPrev {
    left: -24px;
}

.slideButtonNext {
    right: -24px;
}

.slideButtonIcon {
    color: #353840;
    font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 48;
}

@media screen and (max-width: 768px) {
    .slideButtonPrev {
        left: 0;
    }

    .slideButtonNext {
        right: 0;
    } 
}

Modify the App.jsx file to include the newly created Slider component.

App.jsx

import Slider from './components/Slider/Slider';

import './App.css';

function App() {
  const sliderItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

  return (
    <div>
          <Slider>
            {sliderItems.map((item, index) => (
                <div className="item" key={index}>{item}</div>
            ))}
          </Slider>
    </div>
  );
}

export default App;

App.css

.item {
  height: 310px;
  border-radius: 16px;
  background: #FFF1D5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #604652;
  font-size: 102px;
}

If you open the application in your browser, you’ll notice that the component we created doesn’t look anything like a carousel yet. But bear with me for a moment—we’ll soon add the necessary styles and functionality to turn it into a fully working carousel.

Before we dive into that, let me briefly explain the code we’ve written so far.

The Slider component accepts two props — items and children — either of which can be used to render the carousel content. We’ve also added two navigation buttons to move the slider forward and backward. Finally, we applied basic CSS styling to the component.

In the App component, we pass data to the Slider component by mapping over the sliderItems array.

Carousel Logic

Now that we have the layout of the carousel ready, let’s add the functionality needed to turn it into a working carousel.

Update the code inside the Slider.jsx and App.jsx with the code below.

Slider.jsx

import { Children, useState, useRef, useEffect } from "react";

import styles from "./Slider.module.css";

const Slider = ({
  slidesPerView: initialSliderPerView = 4,
  spaceBetween: initialSpaceBetween = 16,
  slidesPerGroup: initialSliderPerGroup = 4,  
  items,
  children,
}) => {
  // New Code
  const [slidesPerView, setSlidesPerView] = useState(initialSliderPerView);
  const [slidesPerGroup, setSlidesPerGroup] = useState(initialSliderPerGroup);
  const [spaceBetween, setSpaceBetween] = useState(initialSpaceBetween);

  const [sliderItemWidth, setSliderItemWidth] = useState(0);

  const sliderContainerRef = useRef(null);
  // New Code

  const sliderItems = items || Children.toArray(children);

  // New Code
  useEffect(() => {
    if (sliderContainerRef.current) {
      const sliderContainerWidth = sliderContainerRef.current.offsetWidth;

      const elements = sliderContainerRef.current.querySelectorAll('.slider-item');

      elements.forEach(el => {
        const sliderItemWidth = Math.ceil((sliderContainerWidth / slidesPerView) - spaceBetween);

        el.style.width = sliderItemWidth + 'px';

        Array.from(el.children).forEach(div => {
          div.style.width = sliderItemWidth + 'px';
        });

        setSliderItemWidth(sliderItemWidth);
      });
    }

  }, [slidesPerView, spaceBetween]);
  // New Code

  const sliderButtonHandler = (direction) => {
    if (direction === "forward") {
      // TODO: Add logic to slide to next item
    } else if (direction === "backward") {
      // TODO: Add logic to slide to previous item
    }
  };

  return (
    <div className={styles.slider}>
      <div className={styles.slidesContainer} ref={sliderContainerRef}>
        <div style={{ display: "flex" }}>
          {sliderItems.map((item, index) => {
            return (
              <div 
                className="slider-item" 
                key={index}
                style={{
                  marginRight: Number(spaceBetween)
                    ? `${spaceBetween}px`
                    : "0px",
                }}
              >
                {item}
              </div>
            );
          })}
        </div>
      </div>
      <button
        className={`${styles.slideButton} ${styles.slideButtonPrev}`}
        onClick={() => sliderButtonHandler("backward")}
      >
        <span
          className={`material-symbols-outlined ${styles.slideButtonIcon}`}
          style={{ letterSpacing: "4px" }}
        >
          arrow_back_ios_new
        </span>
      </button>
      <button
        className={`${styles.slideButton} ${styles.slideButtonNext}`}
        onClick={() => sliderButtonHandler("forward")}
      >
        <span className={`material-symbols-outlined ${styles.slideButtonIcon}`}>
          arrow_forward_ios
        </span>
      </button>
    </div>
  );
};

export default Slider;

App.jsx

import Slider from './components/Slider/Slider';

import './App.css';

function App() {
  const sliderItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

  return (
    <div className="flex-container">
          <Slider
            slidesPerView={4}
            slidesPerGroup={4}
            spaceBetween={16}
          >
            {sliderItems.map((item, index) => (
                <div className="item" key={index}>{item}</div>
            ))}
          </Slider>
    </div>
  );
}

export default App;

App.css

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.item {
  height: 310px;
  border-radius: 16px;
  background: #FFF1D5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #604652;
  font-size: 102px;
}

If you open the application in your browser, you’ll see that the component is starting to look like a carousel, but it doesn’t function like one yet.

Before we make it fully interactive, let’s quickly review the code we’ve written so far.

The Slider component now accepts three additional props: slidesPerView, slidesPerGroup, and spaceBetween.

• slidesPerView controls how many items are visible in the viewport at once.

• slidesPerGroup defines how many items move with each navigation.

• spaceBetween sets the spacing between each slide.

The component also uses a sliderItemWidth state variable to store the calculated width of each slide. This value is computed using the useEffect hook and a sliderContainerRef, which allow us to dynamically measure the container's width and divide it based on the number of slides per view.

Making it Functional

Let’s finally add the logic to turn it into a fully working carousel.

Update the Slider.jsx with the following code:

Slider.jsx

// Slider.jsx
import { Children, useState, useRef, useEffect } from "react";

import useInView from "../../hooks/useInView";

import styles from "./Slider.module.css";

const Slider = ({
  slidesPerView: initialSliderPerView = 4,
  spaceBetween: initialSpaceBetween = 16,
  slidesPerGroup: initialSliderPerGroup = 4,  
  items,
  children,
}) => {
  const [slidesPerView, setSlidesPerView] = useState(initialSliderPerView);
  const [slidesPerGroup, setSlidesPerGroup] = useState(initialSliderPerGroup);
  const [spaceBetween, setSpaceBetween] = useState(initialSpaceBetween);

  // New Code
  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
  // New Code

  const [sliderItemWidth, setSliderItemWidth] = useState(0);

  const sliderContainerRef = useRef(null);

  // New Code
  const { inView: lastSliderItemInView, ref: lastSliderItemRef } = useInView({
    root: sliderContainerRef.current,
    threshold: 0.95,
  });

  const { inView: firstSliderItemInView, ref: firstSliderItemRef } = useInView({
    root: sliderContainerRef.current,
    threshold: 1.0,
  });
  // New Code

  const sliderItems = items || Children.toArray(children);

  useEffect(() => {
    if (sliderContainerRef.current) {
      const sliderContainerWidth = sliderContainerRef.current.offsetWidth;

      const elements = sliderContainerRef.current.querySelectorAll('.slider-item');

      elements.forEach(el => {
        const sliderItemWidth = Math.ceil((sliderContainerWidth / slidesPerView) - spaceBetween);

        el.style.width = sliderItemWidth + 'px';

        Array.from(el.children).forEach(elem => {
          elem.style.width = sliderItemWidth + 'px';
        });

        setSliderItemWidth(sliderItemWidth);
      });
    }

  }, [slidesPerView, spaceBetween]);

  // New Code
  const sliderButtonHandler = (direction) => {
    if (direction === "forward") {
      if (!lastSliderItemInView && activeSlideIndex < (sliderItems.length - slidesPerGroup)) {
        setActiveSlideIndex((prevIndex) => {
          if((sliderItems.length - prevIndex) < slidesPerGroup && sliderItems.length - prevIndex != 0) {
            return sliderItems.length;
          }
          return prevIndex + slidesPerGroup;
        });
      }
    } else if (direction === "backward") {
      if (!firstSliderItemInView && activeSlideIndex > 0) {
        setActiveSlideIndex((prevIndex) => {
          if(prevIndex < slidesPerGroup) {
            return 0;
          }
          return prevIndex - slidesPerGroup;
        });
      }
    }
  };

  const setSliderItemRef = (index, sliderItemsArray) => {
    if (index === 0) {
      return firstSliderItemRef;
    }
    if (index === sliderItemsArray.length - 1) {
      return lastSliderItemRef;
    }
    return null;
  };
  // New Code

  return (
    <div className={styles.slider}>
      <div className={styles.slidesContainer} ref={sliderContainerRef}>
        <div style={{ 
          display: "flex",
          transition: "all 0.5s ease-in-out",
          transform: `translateX(${
            (sliderItemWidth + spaceBetween) * activeSlideIndex * -1
          }px)`,

          }}
        >
          {sliderItems.map((item, index, array) => {
            return (
              <div 
                className="slider-item" 
                key={index}
                ref={setSliderItemRef(index, array)}
                style={{
                  marginRight: Number(spaceBetween)
                    ? `${spaceBetween}px`
                    : "0px",
                }}
              >
                {item}
              </div>
            );
          })}
        </div>
      </div>
      <button
        className={`${styles.slideButton} ${styles.slideButtonPrev}`}
        onClick={() => sliderButtonHandler("backward")}
      >
        <span
          className={`material-symbols-outlined ${styles.slideButtonIcon}`}
          style={{ letterSpacing: "4px" }}
        >
          arrow_back_ios_new
        </span>
      </button>
      <button
        className={`${styles.slideButton} ${styles.slideButtonNext}`}
        onClick={() => sliderButtonHandler("forward")}
      >
        <span className={`material-symbols-outlined ${styles.slideButtonIcon}`}>
          arrow_forward_ios
        </span>
      </button>
    </div>
  );
};

export default Slider;

The updated code uses a custom useInView hook, which checks whether a slide is currently visible in the viewport.

Create a new file named useInView.js inside the hooks directory, and add the following code to it:

useInView.js

// useInView.js
import { useCallback, useEffect, useRef, useState } from "react";

const useInView = (
  options = {
    root: null,
    rootMargin: "0px",
    threshold: 1.0,
  }
) => {
  const [inView, setInView] = useState(false);
  const targetRef = useRef(null);

  const inViewRef = useCallback((node) => {
    if (node) {
      targetRef.current = node;
    }
  }, []);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setInView(true);
        } else {
          setInView(false);
        }
      });
    }, options);
    if (targetRef.current) {
      observer.observe(targetRef.current);
    }
  }, [options]);

  return { ref: targetRef, inView, inViewRef };
};

export default useInView;

We’ve made quite a few changes to the code to make the carousel interactive. Let’s quickly review the changes one by one:

• We introduced a new state variable, activeSlideIndex, which keeps track of the index of the leftmost visible slide in the viewport.

• We added a custom hook, useInView, that detects when a slide enters the viewport. This hook helps determine when the first or last slide becomes visible.

• The sliderButtonHandler function has been updated to handle carousel navigation. It adjusts the activeSlideIndex based on whether the user clicks the forward or backward button.

• Finally, we applied CSS transform to the slider container using the translateX function, which uses the activeSlideIndex to move the carousel forward or backward.

AutoPlay & Loop

Now that we’ve implemented basic navigation to move the carousel forward and backward using the navigation buttons, let’s make it more dynamic by adding autoplay and looping functionality.

These features will allow the carousel to automatically move to the next slide at regular intervals and loop back to the first slide once it reaches the end.

Update the Slider.jsx with the following code:

// Slider.jsx
import { Children, useState, useRef, useEffect } from "react";

import styles from "./Slider.module.css";
import useInView from "../../hooks/useInView";

const Slider = ({
  slidesPerView: initialSliderPerView = 4,
  spaceBetween: initialSpaceBetween = 16,
  slidesPerGroup: initialSliderPerGroup = 4,  
  items,
  children,
  loop,
  autoPlay = false,
  autoPlayInterval = 2000,
}) => {
  const [slidesPerView, setSlidesPerView] = useState(initialSliderPerView);
  const [slidesPerGroup, setSlidesPerGroup] = useState(initialSliderPerGroup);
  const [spaceBetween, setSpaceBetween] = useState(initialSpaceBetween);

  // New Code
  const [activeSlideIndex, setActiveSlideIndex] = useState(
    loop ? slidesPerView : 0
  );
  const [transitionEnabled, setTransitionEnabled] = useState(false);
  // New Code

  const [sliderItemWidth, setSliderItemWidth] = useState(0);

  const sliderContainerRef = useRef(null);

  const { inView: lastSliderItemInView, ref: lastSliderItemRef } = useInView({
    root: sliderContainerRef.current,
    threshold: 0.95,
  });

  const { inView: firstSliderItemInView, ref: firstSliderItemRef } = useInView({
    root: sliderContainerRef.current,
    threshold: 1.0,
  });


  items = items || Children.toArray(children);

  // New Code
  const sliderItems = loop
    ? [
        ...items.slice(-slidesPerView),
        ...items,
        ...items.slice(0, slidesPerView),
      ]
    : items;
  // New Code

  useEffect(() => {
    if (sliderContainerRef.current) {
      const sliderContainerWidth = sliderContainerRef.current.offsetWidth;

      const elements = sliderContainerRef.current.querySelectorAll('.slider-item');

      elements.forEach(el => {
        const sliderItemWidth = Math.ceil((sliderContainerWidth / slidesPerView) - spaceBetween);

        el.style.width = sliderItemWidth + 'px';

        Array.from(el.children).forEach(div => {
          div.style.width = sliderItemWidth + 'px';
        });

        setSliderItemWidth(sliderItemWidth);
      });
    }

  }, [slidesPerView, spaceBetween]);

  // New Code
  useEffect(() => {
    setTimeout(() => {
      setTransitionEnabled(true);
    }, 100);
  }, [firstSliderItemRef]);


  useEffect(() => {
    let intervalID;
    if (loop && autoPlay) {
      intervalID = setInterval(() => {
        if (
          activeSlideIndex === slidesPerGroup ||
          activeSlideIndex === items.length
        ) {
          setTransitionEnabled(true);
        }
        setActiveSlideIndex((prevIndex) => prevIndex + slidesPerGroup);
      }, autoPlayInterval);
    }
    return () => {
      if (intervalID) {
        clearInterval(intervalID);
      }
    };
  }, [
    loop,
    slidesPerGroup,
    activeSlideIndex,
    items.length,
    autoPlay,
    autoPlayInterval,
  ]);
  // New Code

  // New Code
  const sliderButtonHandler = (direction) => {
    if (
      activeSlideIndex === slidesPerGroup ||
      activeSlideIndex === items.length
    ) {
      setTransitionEnabled(true);
    }
    if (direction === "forward") {
      if (loop || (!loop && !lastSliderItemInView && activeSlideIndex < (items.length - slidesPerGroup))) {
        setActiveSlideIndex((prevIndex) => {
          if((items.length - prevIndex) < slidesPerGroup && items.length - prevIndex != 0) {
            return items.length;
          }
          return prevIndex + slidesPerGroup;
        });
      }
    } else if (direction === "backward") {
      if (loop || (!loop && !firstSliderItemInView && activeSlideIndex > 0)) {
        setActiveSlideIndex((prevIndex) => {
          if(prevIndex < slidesPerGroup) {
            return 0;
          }
          return prevIndex - slidesPerGroup;
        });
      }
    }
  };

  const handleTransitionEnd = () => {
    if (loop) {
      if (activeSlideIndex > items.length) {
        setTransitionEnabled(false);
        setActiveSlideIndex(slidesPerGroup);
      } else if (activeSlideIndex === 0) {
        setTransitionEnabled(false);
        setActiveSlideIndex(items.length);
      }
    }
  };
  // New Code

  const setSliderItemRef = (index, sliderItemsArray) => {
    if (loop && index === 0) {
      return firstSliderItemRef;
    }
    if (!loop) {
      if (index === 0) {
        return firstSliderItemRef;
      }
      if (index === sliderItemsArray.length - 1) {
        return lastSliderItemRef;
      }
    }
    return null;
  };

  return (
    <div className={styles.slider}>
      <div className={styles.slidesContainer} ref={sliderContainerRef}>
        <div 
          onTransitionEnd={handleTransitionEnd}
          style={{
            display: "flex",
            transition: !transitionEnabled ? "none" : "all 0.5s ease-in-out",
            transform: `translateX(${
              (sliderItemWidth + spaceBetween) * activeSlideIndex * -1
            }px)`,
          }}
        >
          {sliderItems.map((item, index, array) => {
            return (
              <div 
                className="slider-item" 
                key={index}
                ref={setSliderItemRef(index, array)}
                style={{
                  marginRight: Number(spaceBetween)
                    ? `${spaceBetween}px`
                    : "0px",
                }}
              >
                {item}
              </div>
            );
          })}
        </div>
      </div>
      <button
        className={`${styles.slideButton} ${styles.slideButtonPrev}`}
        onClick={() => sliderButtonHandler("backward")}
      >
        <span
          className={`material-symbols-outlined ${styles.slideButtonIcon}`}
          style={{ letterSpacing: "4px" }}
        >
          arrow_back_ios_new
        </span>
      </button>
      <button
        className={`${styles.slideButton} ${styles.slideButtonNext}`}
        onClick={() => sliderButtonHandler("forward")}
      >
        <span className={`material-symbols-outlined ${styles.slideButtonIcon}`}>
          arrow_forward_ios
        </span>
      </button>
    </div>
  );
};

export default Slider;

We have made a lot of changes to the component, let’s go through them one by one:

• The slider component now accepts three more props — loop, autoPlay and autoPlayInterval.

• If looping is enabled, sliderItems becomes:

    const sliderItems = [
      ...items.slice(-slidesPerView),
      ...items,
      ...items.slice(0, slidesPerView),
    ];
  

• This allows the slider to simulate an infinite loop. When the user scrolls to the "end" or "start" of the carousel, the fake extra items allow a seamless visual transition back to the start or end, and the slider can be quickly repositioned behind the scenes.

• The initial value of activeSlideIndex is set to the value of slidesPerView when looping is enabled.

• The sliderButtonHandler function has been updated to handle looping behavior, adjusting the activeSlideIndex appropriately when navigating forward or backward

• A new useEffect hook has been introduced to implement the autoplay functionality. It automatically updates the activeSlideIndex at a specified interval, moving the carousel forward without user interaction.

• A handleTransitionEnd function has been added to temporarily remove the CSS transition from the slider container once the carousel reaches the end.

• Another useEffect hook has been introduced that re-enables the transition when the first item becomes visible again, ensuring a smooth loop back to the beginning.

Finally update the App.jsx to enable autoplay and looping:

import Slider from './components/Slider/Slider';

import './App.css';

function App() {
  const sliderItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

  return (
    <div className="flex-container">
          <Slider
            slidesPerView={4}
            slidesPerGroup={4}
            spaceBetween={16}
            autoPlay={true}
            autoPlayInterval={2000}
            loop={true}
          >
            {sliderItems.map((item, index) => (
                <div className="item" key={index}>{item}</div>
            ))}
          </Slider>
    </div>
  );
}

export default App;

Responsive Design

That was a lot of code we wrote, but there’s still one important piece of functionality that’s still missing — making the carousel responsive. Let’s finally add the code required to make it responsive across devices of different resolutions.

Update the Slider.jsx with the following code.

import { useRef, useState, useEffect, Children } from "react";

import useInView from "../../hooks/useInView";
import useWindowDimensions from "../../hooks/useWindowDimensions";

import styles from "./Slider.module.css";

const Slider = ({
  slidesPerView: initialSliderPerView,
  spaceBetween: initialSpaceBetween,
  slidesPerGroup: initialSliderPerGroup,
  loop,
  breakpoints,
  items,
  children,
  autoPlay = false,
  autoPlayInterval = 2000,
}) => {
  const [slidesPerView, setSlidesPerView] = useState(initialSliderPerView);
  const [slidesPerGroup, setSlidesPerGroup] = useState(initialSliderPerGroup);
  const [spaceBetween, setSpaceBetween] = useState(initialSpaceBetween);
  const [activeSlideIndex, setActiveSlideIndex] = useState(
    loop ? slidesPerView : 0
  );
  const [transitionEnabled, setTransitionEnabled] = useState(false);
  const [sliderItemWidth, setSliderItemWidth] = useState(0);
  const sliderContainerRef = useRef(null);

  // New Code
  const { width: deviceWidth } = useWindowDimensions();
  // New Code

  const { inView: lastSliderItemInView, ref: lastSliderItemRef } = useInView({
    root: sliderContainerRef.current,
    threshold: 0.95,
  });

  const { inView: firstSliderItemInView, ref: firstSliderItemRef } = useInView({
    root: sliderContainerRef.current,
    threshold: 1.0,
  });

  items = items || Children.toArray(children);

  useEffect(() => {
    if (sliderContainerRef.current) {
      const sliderContainerWidth = sliderContainerRef.current.offsetWidth;

      const elements = sliderContainerRef.current.querySelectorAll('.slider-item');

      elements.forEach(el => {
        const sliderItemWidth = Math.ceil((sliderContainerWidth / slidesPerView) - spaceBetween);

        el.style.width = sliderItemWidth + 'px';

        Array.from(el.children).forEach(div => {
          div.style.width = sliderItemWidth + 'px';
        });

        setSliderItemWidth(sliderItemWidth);
      });
    }

  }, [slidesPerView, spaceBetween]);

  useEffect(() => {
    setTimeout(() => {
      setTransitionEnabled(true);
    }, 100);
  }, [firstSliderItemRef]);

 // New Code
  useEffect(() => {
    if (breakpoints) {
      Object.keys(breakpoints).forEach((breakpoint) => {
        if (Number(breakpoint) && deviceWidth >= Number(breakpoint)) {
          setSlidesPerView(
            (prev) => breakpoints[breakpoint].slidesPerView || prev
          );
          setSlidesPerGroup(
            (prev) => breakpoints[breakpoint].slidesPerGroup || prev
          );
          setSpaceBetween(
            (prev) => breakpoints[breakpoint].spaceBetween || prev
          );
          if(loop) {
            setActiveSlideIndex((prev) => breakpoints[breakpoint].slidesPerView || prev);
          }
        }
      });
    }
  }, [deviceWidth, breakpoints, loop]);
  // New Code

  useEffect(() => {
    let intervalID;
    if (loop && autoPlay) {
      intervalID = setInterval(() => {
        if (
          activeSlideIndex === slidesPerGroup ||
          activeSlideIndex === items.length
        ) {
          setTransitionEnabled(true);
        }
        setActiveSlideIndex((prevIndex) => prevIndex + slidesPerGroup);
      }, autoPlayInterval);
    }
    return () => {
      if (intervalID) {
        clearInterval(intervalID);
      }
    };
  }, [
    loop,
    slidesPerGroup,
    activeSlideIndex,
    items.length,
    autoPlay,
    autoPlayInterval,
  ]);

  const sliderButtonHandler = (direction) => {
    if (
      activeSlideIndex === slidesPerGroup ||
      activeSlideIndex === items.length
    ) {
      setTransitionEnabled(true);
    }
    if (direction === "forward") {
      if (loop || (!loop && !lastSliderItemInView && activeSlideIndex < (items.length - slidesPerGroup))) {
        setActiveSlideIndex((prevIndex) => {
          if((items.length - prevIndex) < slidesPerGroup && items.length - prevIndex != 0) {
            return items.length;
          }
          return prevIndex + slidesPerGroup;
        });
      }
    } else if (direction === "backward") {
      if (loop || (!loop && !firstSliderItemInView && activeSlideIndex > 0)) {
        setActiveSlideIndex((prevIndex) => {
          if(prevIndex < slidesPerGroup) {
            return 0;
          }
          return prevIndex - slidesPerGroup;
        });
      }
    }
  };

  const handleTransitionEnd = () => {
    if (loop) {
      if (activeSlideIndex > items.length) {
        setTransitionEnabled(false);
        setActiveSlideIndex(slidesPerGroup);
      } else if (activeSlideIndex === 0) {
        setTransitionEnabled(false);
        setActiveSlideIndex(items.length);
      }
    }
  };

  const sliderItems = loop
    ? [
        ...items.slice(-slidesPerView),
        ...items,
        ...items.slice(0, slidesPerView),
      ]
    : items;

  const setSliderItemRef = (index, sliderItemsArray) => {
    if (loop && index === 0) {
      return firstSliderItemRef;
    }
    if (!loop) {
      if (index === 0) {
        return firstSliderItemRef;
      }
      if (index === sliderItemsArray.length - 1) {
        return lastSliderItemRef;
      }
    }
    return null;
  };

  return (
    <div className={styles.slider}>
      <div className={styles.slidesContainer} ref={sliderContainerRef}>
        <div
          onTransitionEnd={handleTransitionEnd}
          style={{
            display: "flex",
            transition: !transitionEnabled ? "none" : "all 0.5s ease-in-out",
            transform: `translateX(${
              (sliderItemWidth + spaceBetween) * activeSlideIndex * -1
            }px)`,
            marginBottom: "3px",
          }}
        >
          {sliderItems.map((item, index, array) => {
            return (
              <div
                className="slider-item" 
                key={index}
                ref={setSliderItemRef(index, array)}
                style={{
                  marginRight: Number(spaceBetween)
                    ? `${spaceBetween}px`
                    : "0px",
                }}
              >
                {item}
              </div>
            );
          })}
        </div>
      </div>
      <button
        className={`${styles.slideButton} ${styles.slideButtonPrev}`}
        onClick={() => sliderButtonHandler("backward")}
      >
        <span
          className={`material-symbols-outlined ${styles.slideButtonIcon}`}
          style={{ letterSpacing: "4px" }}
        >
          arrow_back_ios_new
        </span>
      </button>
      <button
        className={`${styles.slideButton} ${styles.slideButtonNext}`}
        onClick={() => sliderButtonHandler("forward")}
      >
        <span className={`material-symbols-outlined ${styles.slideButtonIcon}`}>
          arrow_forward_ios
        </span>
      </button>
    </div>
  );
};

export default Slider;

Create a new file named useWindowDimensions.js inside the hooks directory and add the following code to it:

useWindowDimensions.js

import { useState, useEffect } from "react";

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height,
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(
    getWindowDimensions()
  );

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowDimensions;
}

Let’s quickly go through the changes we made one by one:

• The updated code uses another custom useWindowDimensions hook, which returns the height and width of the browser window both when it is first initialized and whenever the window is resized.

• The component now accepts one additional prop — breakpoints, an object that defines how many items should be visible in the carousel based on the device’s screen width.

• Each key in the breakpoints object (e.g., 320, 768, 1366) represents a minimum viewport width (in pixels). The corresponding value defines the layout configuration at that width.

• A new useEffect hook has been added to dynamically update the slidesPerView, slidesPerGroup, and spaceBetween values according to the current screen width, if the breakpoints prop is provided

Finally update the App.jsx to enable responsive behavior:

import Slider from './components/Slider/Slider';
import './App.css';

function App() {
  const sliderItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

  return (
    <div className="flex-container">
          <Slider
            spaceBetween={16}
            slidesPerView={4}
            slidesPerGroup={4}
            loop={true}
            autoPlay={true}
            autoPlayInterval={4000}
            breakpoints={{
              320: {
                slidesPerView: 1,
                slidesPerGroup: 1,
              },
              1366: {
                slidesPerView: 4,
                slidesPerGroup: 4,
                spaceBetween: 18
              },
            }}
          >
            {sliderItems.map((item, index) => (
                <div className="item" key={index}>{item}</div>
            ))}
          </Slider>
    </div>
  );
}

export default App;

Final Result

Source Code

You can download the source code from my GitHub repo:

Conclusion

In this article, we walked through building a fully functional, customizable, and responsive carousel component in React from scratch. Starting with a basic layout, we incrementally added key features like navigation controls, autoplay and loop.

Finally, we implemented responsive behavior using the breakpoints prop, allowing the carousel to adapt seamlessly to different screen sizes and device resolutions.

By now, you should have a solid understanding of how to build a flexible carousel component that can be reused and extended in your own projects.

That’s it and hope you found this article helpful! Please feel free to comment below and ask anything, suggest feedback or just chat. You can also follow me on Hashnode, Medium and Twitter. Cheers! ⭐️

1. Security: Since JWT is stateless and does not store any information on the server, there's no way to invalidate it from the server side. If a JWT is stolen or compromised, an attacker can gain access to sensitive information.

2. Lack of Revocation: As JWT is stateless, it makes it difficult to revoke tokens from the server side when a user logs out or changes their password, or to allow users to sign out from all devices.

3. Limited Validity Period: As JWT is valid for a limited amount of time, the users will have to log in to the application whenever the JWT expires, which is not a good user experience.

We can avoid these issues either by 1) Using Sessions, or 2) Using Refresh and Access tokens to authenticate users, which I will cover in this article.

Before getting started, let's first understand what refresh and access tokens are.

What are Access Tokens?

Access tokens are short-lived tokens that are issued by an authorization server and are used to access protected resources. Access tokens are passed in the header of an API request and are used to verify that the user has the necessary permissions to access the requested resource.

What are Refresh Tokens?

Refresh tokens are long-lived tokens that are issued along with access tokens. They are used to request a new access token when the current access token expires. This allows the user to remain authenticated even if the access token has expired, without having to re-enter their credentials.

Getting Started

Before starting, you must have npm installed on your computer, which comes bundled with Node.js which you can install from here.

Folder Structure:

You can create the above directories with these commands.

mkdir refresh-token-auth-app
cd refresh-token-auth-app
mkdir client server

This project is divided into two parts:

1. Node.js & Express application for the backend.

2. ReactJS application for the front end.

Creating Backend Application:

Run the following commands to initialize the Node.js project and install the required dependencies.

cd refresh-token-auth-app/server
npm init -y
npm install express jsonwebtoken cookie-parser cors dotenv ms http-errors

Creating Frontend Application:

Run the following commands to initialize the React project.

cd refresh-token-auth-app
npx create-react-app client

Authentication Flow

Now that we have set up the project structure required for the application, let's understand the general overview of how the refresh and access token-based authentication will work in our application.

1. When a user first logs in to our application, the server will generate an access token and a refresh token for the user. The access token will be sent as a part of the response body, while the refresh token will be sent as an httpOnly cookie. The refresh token will also be stored in the database for each user.

2. When the access token is about to expire, our application will automatically send a request to the server to refresh the access token, also known as silent authentication. Since we are storing the access token in memory instead of local storage to prevent XSS attacks, our application will also perform silent authentication when the user refreshes the browser window.

3. When a user logs out of the application, the server will remove the refresh token stored in the database and the cookie.

API Endpoints

Now that we have a basic understanding of the authentication flow of our application, let's list the API endpoints necessary for the application to work.

We will need these endpoints to make our application work.

1. POST - /auth/sign-up to allow users to sign up.

2. POST - /auth/login to allow users to log in.

3. POST - /auth/refresh to generate a new access token using the given refresh token.

4. POST - /auth/logout to log out the user.

5. GET - /users/list (optional) to get the list of users.

Folder Structure

Before we start writing these APIs, let's create the folder structure required for the backend application.

You can create the above directories with these commands.

cd server
mkdir controllers middlewares routes data utils
touch app.js

Creating Express Application

Add the following boilerplate code to the app.js file to create the express application.

const path = require('path');
require('dotenv').config();

const express = require('express');
const cors = require('cors');
const cookieParser = require('cookie-parser');

const { PORT, NODE_ENV } = process.env;

const isDev = NODE_ENV === 'development';

const app = express();

if (isDev) {
    app.use(
        cors({
            origin: 'http://localhost:3000',
            optionsSuccessStatus: 200,
            credentials: true,
        })
    );
}

app.use(express.json({ type: 'application/json' }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(express.static(path.join(__dirname, 'public')));

app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});

app.use((req, res, next) => {
    const error = new Error('Not Found');
    error.status = 404;
    next(error);
});

app.use((error, req, res, next) => {
   console.error("\x1b[31m", error);
   if (res.headersSent) {
        return next(error);
    }
    return res.status(error.status || 500).json({
        error: {
            status: error.status || 500,
            message: error.status ? error.message : "Internal Server Error",
        },
    });
});

app.listen(PORT || 5000, (error) => {
    if (error) {
        console.log("Error in server setup");
        return;
    }
    console.log("Server listening on Port", PORT);
});

Here I am using:

1. dotenv middleware to load environment variables from the .env file into the process.env variable.

2. cors middleware to allow Cross-Origin Resource Sharing (CORS) in development mode.

3. express.json to parse the request body as JSON.

4. cookie-parser middleware to parse cookies in the incoming request headers.

5. express.static middleware to serve the static files from the public directory.

6. Error handler middleware — which is executed when an error occurs in the application.

7. And Finally app.listen method to create a new server and listen on the specified port defined by the PORT environment variable.

Add this code to the package.json script section:

"start": "node app.js"

Environment variables

Create a .env file at the root of the server directory and add the following environment variables to that file.

PORT=5000

ACCESS_TOKEN_SECRET=7rG7v5ElkhMpIHdQfs5l4sC+zprSYD2DNII4fzRusLevT2n0fEvpFzd6Ei2GpXzwEkghDxWxONRx0eCvcrsziY6EuF6GutZX+niTT6QJylTba/ydgURY9+7k1rn8w7sfiCAQPBg7c/SlY/nMRsDF4/5MSQATlfuSXX+9BIKgDmFWwZA19QqGS4cWKNiQO7JEhcNjkpy0FtaeUzK1/q0pG5Rjq8V8L8zbyhttUbAWd3h8N+m5vV7gi22HBrLlqpbFL0IIeb3GHWEe9z1nymyQNjLdxO6kcNRBNmWR7nRbamje6TJ6aHChebONL5h3GRWAFLwS188L41iNp67EqcNSqg==

REFRESH_TOKEN_SECRET=LbIiOVV6MuKQ7A2KnGi6uW6vxrypJrouog48VY4bJjrJJdBbq0XLuKBU4Ia/Pzphvk4j6iUa7EEFnpgCBRewvxPCIyHZpHrGRZjUtCmbjGpLqIe5tlgMlEOPTzrwYAkgAHBNN6UzeZl55wlzOSiCWbhqcw2V6qDy8KYh+llIm/eBUVVlThNw7TDsn0LtcLBjhkzaBQqCUzZQmOLtTpCerjnzaWzlS2vSyP96zJ/yemlkgF21EZkiKPdoNrJPeaXNk4kqECHNlZ4mccpCTSWPr+RPR/vjGltCRL6nhJ1w6MqBDYFpXcAHcv54fz1bXcEwkhEO5imzoKa6aMg/1LPpTw==

COOKIE_SECRET=Ak1jjwP38UQ3TUPatxFva2tytaYx0HnKxkfytoQAoignerppxxg7ogh2tUxnKhSe0JXVL7kbAZsHcnCFE3hY3OI2nuydrR9JL/xrj30EFBSQNjQ7FK8rY8S0QES/5z28k+etbBd9u7ms/bo/+YuA2ueJ2MiFCeRNH7UGknueF3JHEa+sfSVsf3QLIBgXd2WwmemRNYeqtpRmdxY29t8HeDwJqtoY9WdLU2onahQCzyuzD2/5aJWwwSIGyL7VeHSg7BQ/DDK+s2tv/IP6LVr3kVGMwhOGJksh6N5Ndeh9p22BkxsN4Nw1jzlxRGN4OhNmLdiPkFsAzj2B739z87mwNQ==

ACCESS_TOKEN_LIFE=15m

REFRESH_TOKEN_LIFE=30d

You can generate these secret keys in NodeJS console / REPL (Read Evaluate Print Loop) using:

require('crypto').randomBytes(256).toString('base64');

Because the access token is meant to be short-lived, It has been set to expire after 15 minutes. The refresh token is meant to remain valid for a longer duration, so its expiration time has been set to 30 days.

Adding Dummy Data

For the sake of simplicity, I am not using any database in this article, so let's create a new data.js file inside the data folder. This file contains the dummy data required for the application to function.

// data.js
const users = [
    {
        id: 1,
        name: "John Doe",
        email: "johndoe@example.com",
        userName: "johndoe",
        password: "JohnDoe@123"
    },
    {
        id: 2,
        name: "Jane Smith",
        email: "janesmith@example.com",
        userName: "janesmith",
        password: "JaneSmith@123"
    },
];

const tokens = [];  // [{userId: number, refreshToken: string, expirationTime: number }]

module.exports = { users, tokens };

Here, the users array is used to store the application's users and the tokens array is used to store the users' refresh tokens along with their user ID and the token's expiration time.

Note:— I am storing the passwords as plain text, but you should not store them as plain text for real-world applications.

Adding Routes, Controllers and Middlewares

Adding Auth Routes

Add this code to the auth.js file inside the routes folder.

const router = require('express').Router();

const authController = require('../controllers/auth');
const authMiddleware = require('../middlewares/auth');

router.post(
    '/sign-up',
    authController.signUp,
    authMiddleware.generateAuthTokens
);

router.post(
    '/login',
    authController.login,
    authMiddleware.generateAuthTokens
);

router.post(
    '/logout',
    authMiddleware.isAuthenticated,
    authController.logout
);

router.post(
    '/refresh',
    authController.refreshAccessToken
);

module.exports = router;

1. POST /auth/sign-up: This endpoint handles the sign-up requests. It uses the authController.signUp method to create a new user account, and then uses the authMiddleware.generateAuthTokens middleware to generate authentication tokens for the user.

2. POST /auth/login: This endpoint handles the login requests. It uses the authController.login method to authenticate the user, and then uses the authMiddleware.generateAuthTokens middleware to generate authentication tokens for the user.

3. POST /auth/logout: This endpoint handles user logout requests. It uses the authMiddleware.isAuthenticated middleware to check if the user is authenticated, and then uses the authController.logout method to log out the user.

4. POST /auth/refresh: This endpoint is used to refresh the access token. When the access token expires, the client can use this endpoint to obtain a new access token by sending a valid refresh token in the request body. The authController.refreshAccessToken function is called to handle this request and generate a new access token.

Adding Users Routes

Add this code to the users.js file inside the routes folder.

const router = require('express').Router();

const { isAuthenticated } = require('../middlewares/auth');

const usersController = require('../controllers/users');

router.get('/list', isAuthenticated, usersController.getUsersList);

router.get('/me', isAuthenticated, usersController.getAuthenticatedUser);

router.get('/:id', isAuthenticated, usersController.getUserById);

module.exports = router;

1. GET /users/list: This endpoint is used to retrieve the list of users. It uses the authMiddleware.isAuthenticated middleware to check if the user is authenticated, and then uses the usersController.getUsersList method to get the list of users.

2. GET /users/me: This endpoint is used to retrieve the authenticated user's information. It uses the authMiddleware.isAuthenticated middleware to check if the user is authenticated, and then uses the usersController.getAuthenticatedUser method to get the authenticated user.

3. GET /users/:id: This endpoint is used to retrieve a user's information by ID. It uses the authMiddleware.isAuthenticated middleware to check if the user is authenticated, and then uses the usersController.getUserById method to get the user by their ID. The user's ID is specified in the URL path using a route parameter (:id).

Updating app.js:

Add this code inside app.js to add the auth and users routes.

/**
 * Existing Code
 */
const path = require('path');
require('dotenv').config();

const express = require('express');
const cors = require('cors');
const cookieParser = require('cookie-parser');

/**
 * New Code
 */
const authRoutes = require('./routes/auth');
const usersRoutes = require('./routes/users');

/**
 * Existing Code
 */
const { PORT, NODE_ENV } = process.env;

const isDev = NODE_ENV === 'development';

const app = express();

if (isDev) {
    app.use(
        cors({
            origin: 'http://localhost:3000',
            optionsSuccessStatus: 200,
            credentials: true,
        })
    );
}

app.use(express.json({ type: 'application/json' }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(express.static(path.join(__dirname, 'public')));

/**
 * New Code
 */
app.use('/api/auth', authRoutes);
app.use('/api/users', usersRoutes);

Adding Auth Controllers

Add this code to the auth.js file inside the controllers folder.

Sign-up Controller

const createError = require('http-errors');

const { users } = require('../data/data');

const signUp = async (req, res, next) => {
    const { name, username, email, password } = req.body;

    if(!name || !username || !email || !password) {
        return res.status(422).json({
            error: 'Please fill all the required fields'
        });
    }

    try {
        const userAlreadyExists = users.find(user => {
            if (user.userName === username || user.email === email) {
                return true;
            }
            return false;
        });

        if (userAlreadyExists) {
            return res.status(422).json({
                error: 'Username or email already exists'
            });
        }

        const newUser = {
            id: users[users.length - 1].id + 1,
            name: name,
            userName: username,
            email: email,
            password: password
        };

        users.push(newUser);

        req.userId = newUser.id;
        return next();
    } catch (error) {
        return next(error);
    }
};

module.exports = {
    signUp
}

The signUp function is responsible for handling the sign-up process. It requires the user's name, username, email, and password to be sent in the request body. It then checks if all the required fields are present, and if not, it returns a response with a 422 status code and an error message.

Next, it checks if a user with the same username or email already exists in the users array. If it does, it returns a response with a 422 status code and an error message indicating that the username or email already exists.

If the user does not already exist, the function creates a new user object with the required fields, assigns it a unique id, and pushes it to the users array.

The function then sets the userId property of the req object to the newly created user's id and calls the next function to pass control to the next middleware to generate the authentication tokens for the user.

If any error occurs during the execution of the function, it calls the next function with the error to pass control to the error-handling middleware.

Login Controller

const createError = require('http-errors');

const { users } = require('../data/data');

const signUp = async (req, res, next) => { .... };

const login = async (req, res, next) => {
    const { username, password } = req.body;

    try {
        if (!username || !password) {
            return res.status(422).json({
                error: 'Please fill all the required fields'
            });
        }

        const user = users.find(user => {
            if (user.userName === username || user.email === username) {
                return true;
            }
            return false;
        });

        if (!user) {
            const error = createError.Unauthorized('Invalid username or password');
            throw error;
        }

        const passwordsMatch = user.password == password;

        if (!passwordsMatch) {
            const error = createError.Unauthorized('Invalid username or password');
            throw error;
        }

        req.userId = user.id;
        return next();
    } catch (error) {
        return next(error);
    }
};

module.exports = {
    signUp,
    login
}

The login function is responsible for handling the log-in process. It requires the user's username and password to be sent in the request body. If either of these fields is missing, it sends an error response back to the client indicating that both fields are required.

Next, the function searches for a user in the users array by checking if either the userName or email of the user matches the provided username. If a matching user is found, the function checks if the provided password matches the user's password.

If the provided password does not match, the function sends an error response indicating that the username or password is invalid. If the provided password matches, the function then sets the userId property of the req object to the authenticated user's id and calls the next function to pass control to the next middleware to generate the authentication tokens for the user.

If any error occurs during the execution of the function, it calls the next function with the error to pass control to the error-handling middleware.

Logout Controller

const jwt = require('jsonwebtoken');
const createError = require("http-errors");
const ms = require('ms');

const { clearTokens, generateJWT } = require("../utils/auth");
const { users, tokens } = require("../data/data");

const signUp = async (req, res, next) => { .... };

const login = async (req, res, next) => { .... };

const logout = async (req, res, next) => {
  await clearTokens(req, res, next);
  return res.sendStatus(204);
};

module.exports = {
    signUp,
    login,
    logout
};

The logout function is responsible for logging out the user. It does so by calling the clearTokens function to remove the user's refresh token from the server as well as from the user's cookie.

Once the clearTokens function has finished its execution, the logout function sends the response with the HTTP status code of 204 (which means "No Content") back to the client.

Refresh Access Token Controller

const jwt = require('jsonwebtoken');
const createError = require("http-errors");
const ms = require('ms');

const { clearTokens, generateJWT } = require("../utils/auth");
const { users, tokens } = require("../data/data");

const signUp = async (req, res, next) => { .... };

const login = async (req, res, next) => { .... };

const logout = async (req, res, next) => { .... };

const refreshAccessToken = async (req, res, next) => {
  const { REFRESH_TOKEN_SECRET, ACCESS_TOKEN_SECRET, ACCESS_TOKEN_LIFE } = process.env;

  const { signedCookies } = req;
  const { refreshToken } = signedCookies;
  if (!refreshToken) {
    return res.sendStatus(204);
  }
  try {
    const refreshTokenInDB = tokens.find(token => token.refreshToken == refreshToken)?.refreshToken;

    if (!refreshTokenInDB) {
      await clearTokens(req, res, next);
      const error = createError.Unauthorized();
      throw error;
    }

    try {
      const decodedToken = jwt.verify(refreshToken, REFRESH_TOKEN_SECRET);
      const { userId } = decodedToken;
      const user = users.find(user => user.id == userId);

      if (!user) {
        await clearTokens(req, res);
        const error = createError("Invalid credentials", 401);
        throw error;
      }

      const accessToken = generateJWT(
        user.id,
        ACCESS_TOKEN_SECRET,
        ACCESS_TOKEN_LIFE
      );
      return res.status(200).json({
        user,
        accessToken,
        expiresAt: new Date(Date.now() + ms(ACCESS_TOKEN_LIFE)),
      });
    } catch (error) {
      return next(error);
    }
  } catch (error) {
    return next(error);
  }
};

module.exports = {
    signUp,
    login,
    logout,
    refreshAccessToken
};

This refreshAccessToken function is responsible for refreshing the access token of a user. The function first checks for a refresh token in the signed cookies of the request. If a refresh token is found, it checks if the token is valid by comparing it with the tokens stored in the tokens array.

If the token is invalid, it clears all tokens and throws an error with a 401 status code. If the token is valid, it decodes the refresh token to get the user ID, checks if the user is valid, generates a new access token, and returns it along with the user information and the expiration time. If there is an error in the process, the function passes the error to the next error-handling middleware function.

Adding Users Controllers

Add this code to the users.js file inside the controllers folder.

const createError = require('http-errors');

const { users } = require('../data/data');

const getUsersList = async (req, res, next) => {
    const usersListWithOutPassword = users.map(user => {
        const {password, ...userWithOutPassword} = user;
        return {...userWithOutPassword};
    });

    return res.status(200).json({
        data: usersListWithOutPassword
    })
};

const getAuthenticatedUser = async (req, res, next) => {
    try {
        const { userId } = req;

        const authenticatedUser = users.find(user => user.id == userId);

        if(authenticatedUser) {
            return res.status(200).json({
                data: authenticatedUser
            })
        }

        const error = createError.NotFound();
        throw error;

    } catch(error) {
        return next(error);
    }

};

const getUserById = async (req, res, next) => {
    try {
        const { id } = req.params;

        const user = users.find(user => user.id == id);

        if (user) {
            return res.status(200).json({
                data: user
            })
        }

        const error = createError.NotFound();
        throw error;
    } catch(error) {
        return next(error);
    }
};

module.exports = {
    getUsersList,
    getAuthenticatedUser,
    getUserById
}

1. getUsersList: This function returns a list of all users.

2. getAuthenticatedUser: This function returns the currently authenticated user based on their userId.

3. getUserById: This function returns a user by their ID.

Adding Auth Middlewares

Add this code to the auth.js file inside the middlewares folder.

generateAuthTokens middleware

This middleware is used to generate access and refresh tokens once a user successfully signs up or logs into our application.

const jwt = require('jsonwebtoken');
const createError = require('http-errors');
const ms = require('ms');

const { generateJWT } = require('../utils/auth');

const { ACCESS_TOKEN_LIFE, REFRESH_TOKEN_LIFE, ACCESS_TOKEN_SECRET, REFRESH_TOKEN_SECRET, NODE_ENV } = process.env;

const dev = NODE_ENV === 'development';

const { users, tokens } = require('../data/data');

const generateAuthTokens = async (req, res, next) => {
    try {
        const user = users.find(user => user.id === req.userId);

        const refreshToken = generateJWT(
            req.userId,
            REFRESH_TOKEN_SECRET,
            REFRESH_TOKEN_LIFE
        );

        const accessToken = generateJWT(
            req.userId, 
            ACCESS_TOKEN_SECRET, 
            ACCESS_TOKEN_LIFE
        );

        const token = {
            refreshToken,
            userId: req.userId,
            expirationTime: new Date(Date.now() + ms(REFRESH_TOKEN_LIFE)).getTime(),
        };

        tokens.push(token);

        res.cookie("refreshToken", refreshToken, {
            httpOnly: true,
            secure: !dev,
            signed: true,
            expires: new Date(Date.now() + ms(REFRESH_TOKEN_LIFE)),
        });

        const expiresAt = new Date(Date.now() + ms(ACCESS_TOKEN_LIFE));

        return res.status(200).json({
            user,
            token: accessToken,
            expiresAt,
        });
    } catch (error) {
        return next(error);
    }
};

module.exports = {
    generateAuthTokens
}

The refresh and access tokens are generated by calling the generateJWT function with the authenticated user's ID, token secret, and the token expiration time.

Here I am sending the access token as part of the response body along with its expiration time and the authenticated user's object, and sending the refresh token as an httpOnly cookie. I am also saving the refresh token in the database (tokens array here) to invalidate the user's session from the backend.

Note:— I am sending the refresh token as an httpOnly cookie to prevent it from being read using JavaScript, and setting the secure attribute to false in development mode and true in production to only send cookies using HTTPS in production.

isAuthenticated Middleware

This middleware is used to check if the user is authenticated to access the protected routes.

const jwt = require('jsonwebtoken');
const createError = require('http-errors');
const ms = require('ms');

const { generateJWT } = require('../utils/auth');

const { ACCESS_TOKEN_LIFE, REFRESH_TOKEN_LIFE, ACCESS_TOKEN_SECRET, REFRESH_TOKEN_SECRET, NODE_ENV } = process.env;

const dev = NODE_ENV === 'development';

const { users, tokens } = require('../data/data');

const generateAuthTokens = async (req, res, next) => { ... };

const isAuthenticated = async (req, res, next) => {
    try {
        const authToken = req.get('Authorization');
        const accessToken = authToken?.split('Bearer ')[1];
        if (!accessToken) {
            const error = createError.Unauthorized();
            throw error;
        }

        const { signedCookies = {} } = req;

        const { refreshToken } = signedCookies;
        if (!refreshToken) {
            const error = createError.Unauthorized();
            throw error;
        }

        let refreshTokenInDB = tokens.find(token => token.refreshToken === refreshToken);

        if (!refreshTokenInDB) {
            const error = createError.Unauthorized();
            throw error;
        }

        refreshTokenInDB = refreshTokenInDB.refreshToken;

        let decodedToken;
        try {
            decodedToken = jwt.verify(accessToken, ACCESS_TOKEN_SECRET);
        } catch (err) {
            const error = createError.Unauthorized();
            return next(error);
        }

        const { userId } = decodedToken;

        const user = users.find(user => user.id == userId);
        if (!user) {
            const error = createError.Unauthorized();
            throw error;
        }

        req.userId = user.id;
        return next();
    } catch (error) {
        return next(error);
    }
};

module.exports = {
    generateAuthTokens,
    isAuthenticated
}

This middleware function checks whether the incoming request is authenticated or not. It does this by first checking if the request has an access token in the authorization header. If it doesn't, the function throws an error indicating that the request is unauthorized.

If the request has an access token, the middleware function checks for the presence of a refresh token in a signed cookie. If there is no refresh token, the function throws an error indicating that the request is unauthorized.

If the request has both an access token and a refresh token, the middleware function checks whether the refresh token is present in the database. If it is not, the function throws an error indicating that the request is unauthorized.

If the refresh token is present in the database, the middleware function attempts to decode the access token using the access token secret. If the decoding fails, the function throws an error indicating that the request is unauthorized.

If the decoding succeeds, the middleware function retrieves the user ID from the decoded token, and checks if there is a user in the database with that ID. If there is no user, the function throws an error indicating that the request is unauthorized.

If the user is found, the middleware function sets the userId property of the request object to the user's ID and calls the next() function to pass control to the next middleware function in the chain.

Adding Utility Functions

Add this code inside the auth.js file inside the utils directory.

const jwt = require('jsonwebtoken');

const { tokens } = require('../data/data');

const dev = process.env.NODE_ENV === 'development';

const generateJWT = (userId, secret, expirationTime) => {
    return jwt.sign(
        {
            userId,
        },
        secret,
        { expiresIn: expirationTime }
    );
}
const clearTokens = async (req, res) => {
    const { signedCookies = {} } = req;
    const { refreshToken } = signedCookies;
    if (refreshToken) {
        const index = tokens.findIndex(token => token.refreshToken === refreshToken);
        if(index) {
            tokens.splice(index, 1);
        }
    }
    res.clearCookie('refreshToken', {
        httpOnly: true,
        secure: !dev,
        signed: true,
    });
};

module.exports = {
    generateJWT,
    clearTokens
};

1. generateJWT: This function is used to generate the access and refresh token using the jsonwebtoken library.

2. clearTokens: This function is used clear the refresh token from the database and the cookie when a user logs out from the application.

Creating React Application

Run the following commands to initialize the React application and install the required dependencies.

cd refresh-token-auth-app
npx create-react-app client

cd client
npm install axios react-router-dom react-hook-form
npm install --save-dev sass

Folder Structure

Before we start writing any code, let's create the folder structure required for the front-end application.

You can create the above directories with these commands.

cd client/src
mkdir components contexts utils

(Optional) Adding fonts and styles

• Add this font to the head section of the index.html file under the public directory.

<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;700&display=swap" rel="stylesheet" />

• Replace the CSS code inside the index.css with the code below:

*::before,
*,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit;
}

body {
  margin: 0;
  font-family: 'Urbanist', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

• And finally, remove the code inside the App.css file or delete the App.css as we won't need this file in this tutorial.

Proxying API Requests

Add this line of code to the package.json file if you want to write requests like axios.post('/api/auth/sign-up') instead of axios.post('http://localhost:5000/api/auth/sign-up')

  "proxy": "http://localhost:5000"

Signup Component

Let's start by creating the signup component, which allows users to sign up for our application by filling out the signup form.

Note:— We will use CSS modules to style our React application. So for each component, we will also create a CSS or SCSS file for that component.

Signup.js

Create a new folder Signup under the components directory and create a new file Signup.js under that new folder.

import { Link } from "react-router-dom";
import { useForm } from "react-hook-form";

import styles from "./Signup.module.scss";

const Signup = () => {
  const {
    handleSubmit,
    register,
    formState: { errors, touchedFields },
  } = useForm({
    defaultValues: {
      name: "",
      username: "",
      email: "",
      password: "",
      confirmPassword: "",
    },
    mode: "onChange",
  });

  const onSubmit = async (values) => {};

  return (
    <div className={styles.container}>
      <div className={styles.formWrapper}>
        <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
          <h1 className={styles.formTitle}>Create New Account</h1>
          <div className={styles.formGroup}>
            <input
              className={styles.input}
              type="text"
              name="name"
              id="name"
              placeholder="Name"
              {...register("name", {
                required: { value: true, message: "Name is required." },
                minLength: { value: 2, message: "Name cannot be less than 2 characters" },
                maxLength: { value: 30, message: "Name cannot be more than 30 characters" },
              })}
            />
            <div className={styles.validationError}>
              <span>{touchedFields.name && errors.name?.message}</span>
            </div>
          </div>
          <div className={styles.formGroup}>
            <input
              className={styles.input}
              type="text"
              name="username"
              id="username"
              placeholder="Username"
              {...register("username", {
                required: { value: true, message: "Username is required." },
                minLength: { value: 2, message: "Username cannot be less than 2 characters" }
              })}
            />
            <div className={styles.validationError}>
              <span>{touchedFields.username && errors.username?.message}</span>
            </div>
          </div>
          <div className={styles.formGroup}>
            <input
              className={styles.input}
              type="email"
              name="email"
              id="email"
              autoComplete="email"
              placeholder="Email"
              {...register("email", {
                required: { value: true, message: "Email is required." },
                pattern: { value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: 'Please enter a valid email'}
              })}
            />
            <div className={styles.validationError}>
              <span>{touchedFields.email && errors.email?.message}</span>
            </div>
          </div>
          <div className={styles.formGroup}>
            <input
              className={styles.input}
              type="password"
              name="password"
              id="password"
              autoComplete="new-password"
              placeholder="Password"
              {...register("password", {
                required: { value: true, message: "Password is required." },
                minLength: { value: 6, message: "Password cannot be less than 6 characters"},
                maxLength: { value: 30, message: "Password cannot be more than 30 characters"}
              })}
            />
            <div className={styles.validationError}>
              <span>{touchedFields.password && errors.password?.message}</span>
            </div>
          </div>
          <div className={styles.formGroup}>
            <input
              className={styles.input}
              type="password"
              name="confirmPassword"
              id="confirmPassword"
              autoComplete="new-password"
              placeholder="Confirm Password"
              {...register("confirmPassword", {
                required: {
                  value: true,
                  message: "confirmPassword is required.",
                },
                validate: (value, formValues) => {
                  if(value !== formValues.password) {
                    return 'Confirm password does not match the password';
                  }
                  return true;
                }
              })}
            />
            <div className={styles.validationError}>
              <span>
                {touchedFields.confirmPassword &&
                  errors.confirmPassword?.message}
              </span>
            </div>
          </div>
          <div className={styles.formGroup}>
                <button className={styles.submitButton} type="submit">Sign Up</button>
          </div>
          <p className={styles.text}>
            <span>
              Already have an account?
            </span>
          <Link className={styles.link} to="/login">Login</Link>
          </p>
        </form>
      </div>
    </div>
  );
}

export default Signup;

It's just a simple sign-up form that contains name, username, email, password, and confirm password input fields using which a user can sign up for our application.

Note:— Here I am using the React Hook Form library to manage the sign-up form. You can use the HTML form validation to validate the form if you don't want to use any external library.

Signup.module.scss

Add this code inside the Signup.module.scss under the Signup folder to style the sign-up form.

.container {
  display: flex;
  justify-content: center;
  background-color: rgb(0 128 128 / 10%);
  padding: 40px 20px;
  min-height: 100vh;
}

.formWrapper {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  align-items: center;
  width: 100%;
}

.form {
  padding: 20px 30px;
  width: 500px;
  background: #fff;
  box-shadow: 2px 2px 7px 2px rgb(0 0 0 / 20%);
  margin-right: 10px;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.formTitle {
  color: teal;
  font-weight: 300;
  text-align: left;
  margin-bottom: 20px;
  font-size: 30px;

  @media (max-width: 768px) {
    font-size: 22px;
  }
}

.formGroup {
  position: relative;
  margin: 10px 0;
}

.input {
  font-size: 16px;
  padding: 11px 12px;
  width: 100%;
  outline: 1px solid #d4d5d9;
  border: none;
  color: #282c3f;
  caret-color: teal;
  font-weight: 500;

  &:focus {
    outline: 1px solid teal;
  }

  @media (max-width: 768px) {
    font-size: 14px;
  }

  @media (max-width: 768px) {
    font-size: 14px;
  }
}

.submitButton {
  background: teal;
  color: white;
  border: 1px solid transparent;
  padding: 10px 20px;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
}

.validationError {
  color: red;
  height: 20px;
}

.text {
  color: #1b2839;
  font-weight: 500;

  @media (max-width: 768px) {
    font-size: 14px;
  }

  @media (max-width: 768px) {
    font-size: 14px;
  }
}

.link {
  color: teal;
  margin-left: 5px;
}

Adding the Sign-up Route

Replace the code inside the App.js file with the code below:

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import Signup from "./components/Signup/Signup";

function App() {
  const router = createBrowserRouter([
    {
      path: "/",
      element: <h1>Hello World!!</h1>,
    },
    {
      path: "sign-up",
      element: <Signup />,
    },
  ]);

  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

You can now visit the sign-up page by going to http://localhost:3000/sign-up

Making the Form Work

So we have made the sign-up form but the users can't actually sign up through it. Let's connect the form with the backend, which allows users to sign up if they haven't already.

Saving Authentication State Using Context API

Before we connect our form with the backend, let's create a context to store the currently authenticated user.

auth-context.js

Add this file under the src/contexts directory and add the following code to that file.

import * as React from 'react';
import PropTypes from 'prop-types';

import { STATUS } from '../utils/utils';

const initialState = {
  user: {},
  token: null,
  expiresAt: null,
  isAuthenticated: false,
  status: STATUS.PENDING,
};

const AuthContext = React.createContext({
  ...initialState,
  login: (user = {}, token = '', expiresAt = '') => {},
  logout: () => {},
  updateUser: () => {},
  setAuthenticationStatus: () => {},
});

const authReducer = (state, action) => {
  switch (action.type) {
    case 'login': {
      return {
        user: action.payload.user,
        token: action.payload.token,
        expiresAt: action.payload.expiresAt,
        isAuthenticated: true,
        verifyingToken: false,
        status: STATUS.SUCCEEDED,
      };
    }
    case 'logout': {
      return {
        ...initialState,
        status: STATUS.IDLE,
      };
    }
    case 'updateUser': {
      return {
        ...state,
        user: action.payload.user,
      };
    }
    case 'status': {
      return {
        ...state,
        status: action.payload.status,
      };
    }
    default: {
      throw new Error(`Unhandled action type: ${action.type}`);
    }
  }
};

const AuthProvider = ({ children }) => {
  const [state, dispatch] = React.useReducer(authReducer, initialState);

  const login = React.useCallback((user, token, expiresAt) => {
    dispatch({
      type: 'login',
      payload: {
        user,
        token,
        expiresAt,
      },
    });
  }, []);

  const logout = React.useCallback(() => {
    dispatch({
      type: 'logout',
    });
  }, []);

  const updateUser = React.useCallback((user) => {
    dispatch({
      type: 'updateUser',
      payload: {
        user,
      },
    });
  }, []);

  const setAuthenticationStatus = React.useCallback((status) => {
    dispatch({
      type: 'status',
      payload: {
        status,
      },
    });
  }, []);

  const value = React.useMemo(
    () => ({ ...state, login, logout, updateUser, setAuthenticationStatus }),
    [state, setAuthenticationStatus, login, logout, updateUser]
  );

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

const useAuth = () => {
  const context = React.useContext(AuthContext);

  if (context === undefined) {
    throw new Error('useAuth must be used within a AuthProvider');
  }

  return context;
};

AuthProvider.propTypes = {
  children: PropTypes.element.isRequired,
};

export { AuthProvider, useAuth };

In this code, I am using a custom hook useAuth which returns the current context value created using the AuthContext which contains the authentication state along with the functions used to log in, log out, and update the authentication status.

I am also defining a component AuthProvider that returns the context provider AuthContext.Provider. The AuthProvider component uses the useReducer hook to update the authentication state whenever a user logs in or logs out of the application.

The state returned by the useReducer is then passed as the value (along with functions like login and logout which updates the auth state using the dispatch method returned by the useReducer hook) to the AuthContext.Provider. The AuthContext.Provider also contains components passed to the AuthProvider component as children.

utils.js

Add this code inside the src/utils/utils.js file.

const STATUS = Object.freeze({
  IDLE: 'idle',
  PENDING: 'pending',
  SUCCEEDED: 'succeeded',
  FAILED: 'failed',
});

export {
    STATUS
}

This code defines an object which is used to represent the status of an HTTP request whether it is pending, failed, or succeeded.

Using the AuthProvider

Replace the code inside the src/index.js file with the code below:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { AuthProvider } from './contexts/auth-context';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AuthProvider>
      <App />
    </AuthProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Using this code, every component nested deep inside the <App /> component can now access and update the authentication state using the useAuth custom hook.

Connecting the form with the backend

Update the code inside the Signup.js file with the code below:

import { Link, useNavigate } from "react-router-dom";
import { useForm } from "react-hook-form";
import axios from "axios";

import { useAuth } from "../../contexts/auth-context";
import { STATUS } from "../../utils/utils";

import styles from "./Signup.module.scss";

const Signup = () => {
  // Existing code
  const {
    handleSubmit,
    register,
    formState: { errors, touchedFields },
  } = useForm({
    defaultValues: {
      name: "",
      username: "",
      email: "",
      password: "",
      confirmPassword: "",
    },
    mode: "onChange",
  });

  // New code
  const navigate = useNavigate();

  const { login, setAuthenticationStatus } = useAuth();

  const onSubmit = async (values) => {
    const newUser = {
      name: values.name,
      username: values.username,
      email: values.email,
      password: values.password,
      confirmPassword: values.confirmPassword,
    };

    try {
      setAuthenticationStatus(STATUS.PENDING);
      const response = await axios.post("/api/auth/sign-up", newUser);
      setAuthenticationStatus(STATUS.SUCCEEDED);
      const { user, token, expiresAt } = response.data;
      login(user, token, expiresAt);
      navigate("/");
    } catch (error) {
      alert(error.response.data.error.message);
      setAuthenticationStatus(STATUS.FAILED);
    }
  };

  // Existing code
  return (
    <div className={styles.container}>
      <div className={styles.formWrapper}>
        <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
          <h1 className={styles.formTitle}>Create New Account</h1>
          <div className={styles.formGroup}>
            <input
              className={styles.input}
              type="text"
              name="name"
              id="name"
              placeholder="Name"
              {...register("name", {
                required: { value: true, message: "Name is required." },
                minLength: {
                  value: 2,
                  message: "Name cannot be less than 2 characters",
                },
                maxLength: {
                  value: 30,
                  message: "Name cannot be more than 30 characters",
                },
              })}
            />
            <div className={styles.validationError}>
              <span>{touchedFields.name && errors.name?.message}</span>
            </div>
          </div>
          <div className={styles.formGroup}>
            <input
              className={styles.input}
              type="text"
              name="username"
              id="username"
              placeholder="Username"
              {...register("username", {
                required: { value: true, message: "Username is required." },
                minLength: {
                  value: 2,
                  message: "Username cannot be less than 2 characters",
                },
              })}
            />
            <div className={styles.validationError}>
              <span>{touchedFields.username && errors.username?.message}</span>
            </div>
          </div>
          <div className={styles.formGroup}>
            <input
              className={styles.input}
              type="email"
              name="email"
              id="email"
              autoComplete="email"
              placeholder="Email"
              {...register("email", {
                required: { value: true, message: "Email is required." },
                pattern: {
                  value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                  message: "Please enter a valid email",
                },
              })}
            />
            <div className={styles.validationError}>
              <span>{touchedFields.email && errors.email?.message}</span>
            </div>
          </div>
          <div className={styles.formGroup}>
            <input
              className={styles.input}
              type="password"
              name="password"
              id="password"
              autoComplete="new-password"
              placeholder="Password"
              {...register("password", {
                required: { value: true, message: "Password is required." },
                minLength: {
                  value: 6,
                  message: "Password cannot be less than 6 characters",
                },
                maxLength: {
                  value: 30,
                  message: "Password cannot be more than 30 characters",
                },
              })}
            />
            <div className={styles.validationError}>
              <span>{touchedFields.password && errors.password?.message}</span>
            </div>
          </div>
          <div className={styles.formGroup}>
            <input
              className={styles.input}
              type="password"
              name="confirmPassword"
              id="confirmPassword"
              autoComplete="new-password"
              placeholder="Confirm Password"
              {...register("confirmPassword", {
                required: {
                  value: true,
                  message: "confirmPassword is required.",
                },
                validate: (value, formValues) => {
                  if (value !== formValues.password) {
                    return "Confirm password does not match the password";
                  }
                  return true;
                },
              })}
            />
            <div className={styles.validationError}>
              <span>
                {touchedFields.confirmPassword &&
                  errors.confirmPassword?.message}
              </span>
            </div>
          </div>
          <div className={styles.formGroup}>
            <button className={styles.submitButton} type="submit">
              Sign Up
            </button>
          </div>
          <p className={styles.text}>
            <span>Already have an account?</span>
            <Link className={styles.link} to="/login">
              Login
            </Link>
          </p>
        </form>
      </div>
    </div>
  );
};

export default Signup;

The onSubmit method is called when the user submits the signup form. Inside the function, a new object called newUser is created with its properties set to form values. Inside the try...catch block, we call the signup API with the newUser object as the request body.

If the request is successful, we extract the user, token, and the token expiry time from the response and call the login function from the useAuth hook. This function updates the authentication state with the new user and token, and redirects the user to the home page.

Login Component

Login.js

Add this code inside the Login.js file under the src/components/Login directory.

import { Link, useNavigate } from "react-router-dom";
import { useForm } from "react-hook-form";
import axios from "axios";

import { useAuth } from "../../contexts/auth-context";
import { STATUS } from "../../utils/utils";

import styles from "./Login.module.scss";

const Login = () => {
  const {
    handleSubmit,
    register,
    formState: { errors, touchedFields },
  } = useForm({
    defaultValues: {
      username: "",
      password: "",
    },
    mode: "onChange",
  });

  const navigate = useNavigate();

  const { login, setAuthenticationStatus } = useAuth();

  const onSubmit = async (values) => {
    const user = {
      username: values.username,
      password: values.password,
    };

    try {
      setAuthenticationStatus(STATUS.PENDING);
      const response = await axios.post("/api/auth/login", user);
      setAuthenticationStatus(STATUS.SUCCEEDED);
      const { user: userObj, token, expiresAt } = response.data;
      login(userObj, token, expiresAt);
      navigate('/');
    } catch (error) {
      alert(error.response.data.error.message);
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.formWrapper}>
        <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
          <h1 className={styles.formTitle}>Sign In</h1>
          <div className={styles.formGroup}>
            <input
              className={styles.input}
              type="text"
              name="username"
              id="username"
              aria-label="Username or Email"
              required
              placeholder="Username or Email"
              {...register("username", {
                required: { value: true, message: "This field is required." },
              })}
            />
            <div className={styles.validationError}>
              <span>{touchedFields.name && errors.name?.message}</span>
            </div>
          </div>
          <div className={styles.formGroup}>
            <input
              className={styles.input}
              type="password"
              name="password"
              id="password"
              required
              placeholder="Password"
              {...register("password", {
                required: { value: true, message: "Password is required." },
              })}
            />
            <div className={styles.validationError}>
              <span>{touchedFields.password && errors.password?.message}</span>
            </div>
          </div>
          <div className={styles.formGroup}>
            <button className={styles.submitButton} type="submit">
              Sign In
            </button>
          </div>
          <p className={styles.text}>
            <span>Don't have an account?</span>
            <Link className={styles.link} to="/sign-up">
              Sign Up
            </Link>
          </p>
        </form>
      </div>
    </div>
  );
};

export default Login;

Login.module.scss

Add this code inside the Login.module.scss file under the src/components/Login directory.

.container {
  min-height: 100vh;
  background-color: rgb(0 128 128 / 10%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}

.formWrapper {
  max-width: 500px;
  width: 100%;
}

.form {
  background-color: #fff;
  box-shadow: 2px 2px 7px 2px rgb(0 0 0 / 20%);
  width: 100%;
  padding: 20px 30px;
}

.formTitle {
  color: teal;
  font-weight: 300;
  text-align: left;
  margin-bottom: 20px;
  font-size: 30px;
}

.formGroup {
  position: relative;
  margin: 10px 0;
}

.input {
  font-size: 16px;
  padding: 11px 12px;
  width: 100%;
  outline: 1px solid #d4d5d9;
  border: none;
  color: #282c3f;
  caret-color: teal;
  font-weight: 500;

  &:focus {
    outline: 1px solid teal;
  }

  @media (max-width: 768px) {
    font-size: 14px;
  }

  @media (max-width: 768px) {
    font-size: 14px;
  }
}

.submitButton {
  background: teal;
  color: white;
  border: 1px solid transparent;
  padding: 10px 20px;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;

  :disabled {
    background-color: grey;
  }
}

.validationError {
  color: red;
  height: 20px;
}

.text {
  color: #1b2839;
  font-weight: 500;

  @media (max-width: 768px) {
    font-size: 14px;
  }

  @media (max-width: 768px) {
    font-size: 14px;
  }
}

.link {
  color: teal;
  margin-left: 5px;
}

Adding the Login Route

Replace the code inside the App.js file with the code below:

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import Signup from "./components/Signup/Signup";
import Login from './components/Login/Login';

function App() {
  const router = createBrowserRouter([
    {
      path: "/",
      element: <h1>Hello World!!</h1>,
    },
    {
      path: "sign-up",
      element: <Signup />,
    },
    {
    path: "login",
    element: (
        <Login />
    ),
  },
  ]);

  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

You can now visit the login page by going to http://localhost:3000/login

Adding Silent Authentication

As we know the access token is only valid for 15 minutes, without silent authentication the user will have to log in again every time the token expires. To prevent users from getting logged out every time the token expires let's implement silent authentication:

What is Silent Authentication?

Silent Authentication is the process of refreshing the user's access token in the background before the token expires or when a user reloads the page. Because we are not storing access tokens in local storage (to prevent XSS attacks), we have to perform silent authentication on page reload as well.

Replace the code inside the App.js with the code below:

import { useCallback, useEffect } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import axios from "axios";

import Signup from "./components/Signup/Signup";
import Login from "./components/Login/Login";

import { useAuth } from "./contexts/auth-context";

function App() {
  // New Code
  const { login, logout, isAuthenticated, expiresAt } = useAuth();

  const refreshAccessToken = useCallback(async () => {
    try {
      const response = await axios.post(
        "/api/auth/refresh",
        {},
        {
          withCredentials: true,
        }
      );

      const { user, accessToken, expiresAt } = response.data;

      if (response.status === 204) {
        logout();
      } else {
        login(user, accessToken, expiresAt);
      }
    } catch (error) {
      logout();
    }
  }, [login, logout]);

  useEffect(() => {
    refreshAccessToken();
  }, [refreshAccessToken]);

  useEffect(() => {
    let refreshAccessTokenTimerId;

    if (isAuthenticated) {
      refreshAccessTokenTimerId = setTimeout(() => {
        refreshAccessToken();
      }, new Date(expiresAt).getTime() - Date.now() - 10 * 1000);
    }

    return () => {
      if (isAuthenticated && refreshAccessTokenTimerId) {
        clearTimeout(refreshAccessTokenTimerId);
      }
    };
  }, [expiresAt, isAuthenticated, refreshAccessToken]);

  // Existing code 
  const router = createBrowserRouter([
    {
      path: "/",
      element: <h1>Hello World!!</h1>,
    },
    {
      path: "sign-up",
      element: <Signup />,
    },
    {
      path: "login",
      element: <Login />,
    },
  ]);

  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

So What's happening here?

Let's break down the code and explain its functionality step by step:

• refreshAccessToken function: This function is responsible for refreshing the access token. It does so by making a POST request to /api/auth/refresh endpoint. Since the refresh token is stored as an httpOnly cookie, I am also setting the withCredentials option to true to automatically send the refresh token with the request. If the request is successful, we call the login function to update the access token stored in memory, otherwise, we log out the user if there's any error.

• Performing silent authentication on page reload: Since the access token is stored only in the memory and not in local storage or cookie, we have to perform silent authentication whenever the page reloads or the application is loaded for the first time. We do this by calling the refreshAccessToken function inside the first useEffect hook that only runs when the App component is mounted.

• Performing silent authentication before the access token expires: The second useEffect is responsible for performing silent authentication before the access token expires. This effect runs whenever a user signs up or logs in to the application or when the access token is refreshed. Inside this effect, we first check if the user is authenticated, if yes then we set a timer using the setTimeout which executes the refreshAccessToken() function 10 seconds before the access token expires. We clear the timer when the effect cleanup is run.

Adding additional routes and components

A user is now able to sign up and log in to our application and can remain logged in as long as the refresh token is valid. Let's add some more routes and components which a user can only access when they are authenticated.

Adding Home Component

Add this code inside the Home.js file under the src/components/Home directory.

import { useAuth } from "../../contexts/auth-context";

import styles from "./Home.module.scss";

const Home = () => {
  const { user } = useAuth();

  return (
    <div className={styles.container}>
      <h1 className={styles.heading}><span className={styles.colorTeal}>Welcome</span> <span className={styles.colorBlack}>{user.name}</span></h1>
    </div>
  );
};

export default Home;

This is just a simple home page where we print the currently authenticated user's name on the screen.

Home.module.scss

Add this code inside the Home.module.scss file under the src/components/Home directory.

.container {
    margin-top: 120px;
    padding: 15px;
}

.heading {
    text-align: center;
}

.colorTeal {
    color: teal;
}

.colorBlack {
    color: #1b2839;
}

Adding Users Component

Add this code inside the Users.js file under the src/components/Users directory.

import { useEffect, useState } from "react";
import axios from "axios";

import User from "./User/User";

import { useAuth } from "../../contexts/auth-context";

import styles from './Users.module.scss';

const Users = () => {
  const { token } = useAuth();
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get("/api/users/list", {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
      .then((res) => {
        setUsers(res.data.data);
      })
      .catch((error) => {
        console.log("Something went wrong.", error);
      });
  }, [token]);

  return (
    <div className={styles.container}>
      {users.map((user) => (
        <div key={user.id} className={styles.userContainer}>
            <User user={user}/>
        </div>
      ))}
    </div>
  );
};

export default Users;

In this component, we first fetch the list of users using an HTTP GET request to the /api/users/list endpoint passing the access token as an Authorization header. If the request is successful, we set users state with the user list received from the server.

Users.module.scss

Add this code inside the Users.module.scss file under the src/components/Users directory.

.container {
    margin-top: 150px;
}

.userContainer {
    margin-bottom: 20px;
}

Adding User Component

Add this code inside the User.js file under the src/components/Users/User directory.

import styles from './User.module.scss';

const User = ({ user }) => {
  return (
    <div className={styles.container}>
      <div className={styles.imageContainer}>
        <img
          className={styles.image}
          src="https://img.freepik.com/free-vector/businessman-character-avatar-isolated_24877-60111.jpg"
          alt="User Avatar"
        />
      </div>
      <div>
        <h2>{user.name}</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
          ornare neque quis purus tempus interdum. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit.{" "}
        </p>
      </div>
    </div>
  );
};

export default User;

User.module.scss

Add this code inside the User.module.scss file under the src/components/Users/User directory.

.container {
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  gap: 20px;
  align-items: center;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  padding: 20px 18px;
}

.imageContainer {
  width: 200px;
  height: 100px;
  overflow: hidden;
  flex-basis: 100px;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 50%;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Adding routes for Home and Users components

Update the router config in App.js with the new config.

import { useCallback, useEffect } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import axios from "axios";

import Signup from "./components/Signup/Signup";
import Login from "./components/Login/Login";
import Home from "./components/Home/Home";
import Users from "./components/Users/Users";

import { useAuth } from "./contexts/auth-context";

function App() {
  const { login, logout, isAuthenticated, expiresAt } = useAuth();

  const refreshAccessToken = useCallback(async () => {
    try {
      const response = await axios.post(
        "/api/auth/refresh",
        {},
        {
          withCredentials: true,
        }
      );

      const { user, accessToken, expiresAt } = response.data;

      if (response.status === 204) {
        logout();
      } else {
        login(user, accessToken, expiresAt);
      }
    } catch (error) {
      logout();
    }
  }, [login, logout]);

  useEffect(() => {
    refreshAccessToken();
  }, [refreshAccessToken]);

  useEffect(() => {
    let refreshAccessTokenTimerId;

    if (isAuthenticated) {
      refreshAccessTokenTimerId = setTimeout(() => {
        refreshAccessToken();
      }, new Date(expiresAt).getTime() - Date.now() - 10 * 1000);
    }

    return () => {
      if (isAuthenticated && refreshAccessTokenTimerId) {
        clearTimeout(refreshAccessTokenTimerId);
      }
    };
  }, [expiresAt, isAuthenticated, refreshAccessToken]);

// New code
  const router = createBrowserRouter([
    {
      path: "/",
      element: <Home />,
    },
    {
      path: "sign-up",
      element: <Signup />,
    },
    {
      path: "login",
      element: <Login />,
    },
    {
      path: "users",
      element: <Users />
    }
  ]);

// Existing code
  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

You can now visit the home and users page by going to http://localhost:3000 and http://localhost:3000/users

Home page

Users Page

Adding Navbar

Let's add a Navbar component that displays Login and Sign up links when the user is not logged in and displays the logout button when a user is logged in.

Navbar.js

Add this code inside the Navbar.js under the src/components/Navbar directory.

import { Link, useNavigate } from "react-router-dom";
import axios from "axios";

import { useAuth } from "../../contexts/auth-context";

import styles from "./Navbar.module.scss";

const Navbar = () => {
  const { isAuthenticated, token, logout } = useAuth();
  const navigate = useNavigate();

  const logOutHandler = async () => {
    try {
      await axios.post(
        "/api/auth/logout",
        {},
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );
      logout();
      navigate('/login');
    } catch (error) {
      console.log("Something went wrong.", error);
    }
  };

  return (
    <header className={styles.header}>
      <nav className={styles.navigation}>
        <div>
          <Link className={styles.brand} to="/">
            Demo App
          </Link>
        </div>
        <div className={styles.navigationListContainer}>
          <ul className={styles.navigationList}>
            {!isAuthenticated && (
              <>
                <li className={styles.navigationItem}>
                  <Link className={styles.navigationLink} to="/login">
                    Login
                  </Link>
                </li>
                <li className={styles.navigationItem}>
                  <Link className={styles.navigationLink} to="/sign-up">
                    Sign Up
                  </Link>
                </li>
              </>
            )}
            {isAuthenticated && (
              <>
                <li className={styles.navigationItem}>
                  <Link className={styles.navigationLink} to="/users">
                    Users
                  </Link>
                </li>
                <li className={styles.navigationItem}>
                  <button
                    className={styles.navigationLink}
                    onClick={logOutHandler}
                  >
                    Log out
                  </button>
                </li>
              </>
            )}
          </ul>
        </div>
      </nav>
    </header>
  );
};

export default Navbar;

There are a couple of things happening here, let me explain them step by step:

• Since we are using the useAuth() custom hook to handle user authentication, it provides us with a set of properties and functions to effectively manage the authentication process.

• The isAuthenticated property is used to check if the user is authenticated or not. If the user is authenticated, we show the log-out button; otherwise, we display the login and sign-up buttons.

• The logOutHandler is called when a user clicks on the log-out button. It sends a POST request to /api/auth/logout endpoint with the access token as the Authorization header and calls the logout() function once we get a successful response back from the server.

• The logout() is responsible for clearing the user object from the reducer state.

• After the user is logged out, we redirect them to the login page.

Navbar.module.scss

Add this code inside the Navbar.module.scss file under the src/components/Navbar directory.

.header {
    height: 70px;
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    -webkit-box-shadow: 0px 8px 5px 0px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 8px 5px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 8px 5px 0px rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    @media (max-width: 768px) {
        height: 60px;
    }
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

.brand {
    color: #1b2839;
    text-decoration: none;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;

    &:hover {
        color: teal;
    }

    @media (max-width: 768px) {
        font-size: 22px;
    }
}

.navigationList {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
    flex-basis: 33%;

    @media (max-width: 768px) {
        flex-direction: column;
    }
}

.navigationItem {
    margin-right: 20px;
    transition: all 5s;

    @media (max-width: 768px) {
        margin-right: 0;
        margin-bottom: 30px;
    }
}

.navigationLink {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #1b2839;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 14px;

    &:hover {
        color: teal;
    }

    &:hover svg {
        stroke: teal;
    }

    &:hover>span {
        color: teal;
    }

    // button styles
    background: none;
    border: none;

    @media (max-width: 768px) {
        flex-direction: row;

        & svg {
            margin-right: 5px;
        }
    }
}

Adding Navbar to the application

We have two choices when it comes to adding the Navbar component to our application. First, we can add it separately to each component, like the Login, Signup, or Home page. Alternatively, we can use the Layout route and component, which allows us to group multiple routes together under a common layout.

Adding Layout route and component

Layout.js

Add this code inside the Layout.js file under the src/components/Layout directory.

import { Outlet } from "react-router-dom";

import Navbar from "../Navbar/Navbar";

const Layout = () => {
  return (
    <div>
      <Navbar />
      <div>
        <Outlet />
      </div>
    </div>
  );
};

export default Layout;

Here we are using React Router's <Outlet /> component to render the child route components inside of the Layout component.

(Optional) Adding Route Protection

Currently, a user can visit the Home and Users page even if they are unauthenticated. Similarly, if a user is already authenticated, they can still visit the Login and Sign Up pages. To prevent that, let's add route protection:

Update the App.js code with this code:

import { useCallback, useEffect } from "react";
import {
  createBrowserRouter,
  RouterProvider,
  useLocation,
  Navigate,
} from "react-router-dom";
import PropTypes from "prop-types";
import axios from "axios";

import Signup from "./components/Signup/Signup";
import Login from "./components/Login/Login";
import Home from "./components/Home/Home";
import Users from "./components/Users/Users";
import Layout from "./components/Layout/Layout";
import SplashScreen from "./components/SplashScreen/SplashScreen";

import { useAuth } from "./contexts/auth-context";
import { STATUS } from "./utils/utils";

function App() {
  const { login, logout, isAuthenticated, expiresAt } = useAuth();

  const refreshAccessToken = useCallback(async () => {
    try {
      const response = await axios.post(
        "/api/auth/refresh",
        {},
        {
          withCredentials: true,
        }
      );

      const { user, accessToken, expiresAt } = response.data;

      if (response.status === 204) {
        logout();
      } else {
        login(user, accessToken, expiresAt);
      }
    } catch (error) {
      logout();
    }
  }, [login, logout]);

  useEffect(() => {
    refreshAccessToken();
  }, [refreshAccessToken]);

  useEffect(() => {
    let refreshAccessTokenTimerId;

    if (isAuthenticated) {
      refreshAccessTokenTimerId = setTimeout(() => {
        refreshAccessToken();
      }, new Date(expiresAt).getTime() - Date.now() - 10 * 1000);
    }

    return () => {
      if (isAuthenticated && refreshAccessTokenTimerId) {
        clearTimeout(refreshAccessTokenTimerId);
      }
    };
  }, [expiresAt, isAuthenticated, refreshAccessToken]);

// New code
  const router = createBrowserRouter([
    {
      element: <Layout />,
      children: [
        {
          path: "/",
          element: (
            <RequireAuth redirectTo="/sign-up">
              <Home />
            </RequireAuth>
          ),
        },
        {
          path: "sign-up",
          element: (
            <RedirectIfLoggedIn redirectTo="/">
              <Signup />
            </RedirectIfLoggedIn>
          ),
        },
        {
          path: "login",
          element: (
            <RedirectIfLoggedIn redirectTo="/">
              <Login />
            </RedirectIfLoggedIn>
          ),
        },
        {
          path: "users",
          element: (
            <RequireAuth redirectTo="/sign-up">
              <Users />
            </RequireAuth>
          ),
        }
      ],
    },
  ]);

  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

// New code
const RequireAuth = ({ children, redirectTo }) => {
  const { isAuthenticated, status } = useAuth();
  const location = useLocation();

  if (status === STATUS.PENDING) return <SplashScreen />;

  return isAuthenticated ? (
    children
  ) : (
    <Navigate to={redirectTo} state={{ from: location }} />
  );
};

// New code
const RedirectIfLoggedIn = ({ children, redirectTo }) => {
  const { isAuthenticated, status } = useAuth();
  const location = useLocation();

  if (status === STATUS.PENDING) return <SplashScreen />;

  return isAuthenticated ? (
    <Navigate to={location.state?.from?.pathname || redirectTo} />
  ) : (
    children
  );
};

RequireAuth.propTypes = {
  children: PropTypes.element.isRequired,
  redirectTo: PropTypes.string.isRequired,
};

RedirectIfLoggedIn.propTypes = {
  children: PropTypes.element.isRequired,
  redirectTo: PropTypes.string.isRequired,
};

export default App;

We have added two new components to the App.js file 1. <RequireAuth /> and 2. <RedirectIfLoggedIn /> component. The RequireAuth component is used to protect routes that only an authenticated user can visit, while the RedirectIfLoggedIn component is used to hide routes like sign-up and login which an authenticated user cannot visit.

RequireAuth Component:

This component takes in two props: children and redirectTo. The redirectTo prop specifies the path to which an unauthenticated user should be redirected. It relies on the isAuthenticated and status properties returned by the useAuth hook to determine the user's authentication status.

If the user is unauthenticated, the component redirects them to the path specified in the redirectTo prop. On the other hand, if the user is authenticated, the component renders the child components passed through the children prop. If the authentication status is pending, the component displays the SplashScreen component.

RedirectIfLoggedIn Component:

This component also takes in two props: children and redirectTo. The redirectTo prop specifies the path to which an authenticated user should be redirected. It relies on the isAuthenticated and status properties returned by the useAuth hook to determine the user's authentication status.

If the user is authenticated, the component redirects them to the path specified in the redirectTo prop. On the other hand, if the user is unauthenticated, the component renders the child components passed through the children prop. If the authentication status is pending, the component displays the SplashScreen component.

SplashScreen Component:

Add this code inside the SplashScreen.js file under the src/components/SplashScreen directory.

import styles from './SplashScreen.module.scss';

const SplashScreen = () => {
  return (
    <div className={styles.container}>
      <div className={styles.iconContainer}>
        <div>
            ...loading
        </div>
      </div>
    </div>
  );
};

export default SplashScreen;

SplashScreen.module.scss

Add this code inside the SplashScreen.module.scss file under the src/components/SplashScreen directory.

.container {
    background-color: #fff;
    color: teal;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999;
}

.iconContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: (-50%, -50%);
    color: teal;
}

Final Result

Source Code

You can download the source code from my GitHub repo:

Conclusion

So we have learned how to implement refresh and access token-based authentication in React and NodeJS. We have learned the difference between access and refresh tokens, and how to perform silent authentication by refreshing access tokens in the background. We have also learned how to protect routes in React applications using React Router.

That’s it and hope you found this article helpful! Please feel free to comment below and ask anything, suggest feedback or just chat. You can also follow me on Hashnode, Medium and Twitter. Cheers! ⭐️

JavaScript is a single-threaded programming language, which means only one thing can happen at a time. Before ES6, we used callbacks to handle asynchronous tasks such as network requests.

Using promises, we can avoid the infamous ‘callback hell’ and make our code cleaner, easier to read, and easier to understand.

Suppose we want to get some data from a server asynchronously, using callbacks we would do something like this:

getData(function(x){  
    console.log(x);  
    getMoreData(x, function(y){  
        console.log(y);   
        getSomeMoreData(y, function(z){   
            console.log(z);  
        });  
    });  
});

Here I am requesting some data from the server by calling the getData() function, which receives the data inside the callback function. Inside the callback function, I am requesting some more data by calling the getMoreData() function passing the previously received data as an argument and so on.

This is what we call callback hell, where each callback is nested inside another callback, and each inner callback is dependent on its parent.

We can rewrite the above snippet using promises. For example:

getData()  
  .then((x) => {  
    console.log(x);  
    return getMoreData(x);  
  })  
  .then((y) => {  
    console.log(y);  
    return getSomeMoreData(y);  
  })  
  .then((z) => {  
    console.log(z);  
   });

We can see that this is much cleaner and easier to understand than the callbacks example above it.

What is a Promise?

A Promise is an object that holds the future value of an async operation. For example, if we are requesting some data from a server, the promise promises us to get that data that we can use in the future.

Before we get into all the technical stuff, let’s understand the terminology of a Promise.

States of a Promise

A Promise in JavaScript just like a promise in the real world has 3 states. It can be 1) unresolved (pending), 2) resolved (fulfilled), or 3) rejected. For example:

States of Promise

• Unresolved or Pending — A Promise is pending if the result is not ready. That is, it’s waiting for something to finish (for example, an async operation).

• Resolved or Fulfilled — A Promise is resolved if the result is available. That is, something finished (for example, an async operation) and all went well.

• Rejected — A Promise is rejected if an error happened.

Now that we know what a Promise is, and Promise terminology, let’s get back to the practical side of the Promises.

Creating a Promise

Most of the time you will be consuming promises rather than creating them, but it’s still important to know how to create them.

Syntax:

const promise = new Promise((resolve, reject) => {
...
});

We create a new promise using the Promise constructor it takes a single argument, a callback, also known as the executor function which takes two callbacks, resolve and reject.

The executor function is immediately executed when a promise is created. The promise is resolved by calling the resolve() and rejected by calling reject(). For example:

const promise = new Promise((resolve, reject) => {
    if(allWentWell) {
        resolve('All things went well!');
    } else {
        reject('Something went wrong');
    }
});

The resolve() and reject() takes one argument which can be a string, number, boolean, array or object.

Let’s look at another example to fully understand the promise creation.

const promise = new Promise((resolve, reject) => {
    const randomNumber = Math.random();
    setTimeout(() => {
        if(randomNumber < .6) {
            resolve('All things went well!');
        } else {
            reject('Something went wrong');
        }
    }, 2000);
});

Here I am creating a new promise using the Promise constructor. The promise is resolved or rejected after 2 seconds of its creation. The promise is resolved if the randomNumber is less than .6 and rejected otherwise.

When the promise is created, it will be in the pending state, and its value will be undefined. For example:

Promise status pending

After the 2 seconds timer finishes, the promise is either resolved or rejected randomly, and its value will be the value passed to the resolve or reject function. For example:

Promise status resolved

Promise status rejected

Note — A promise can be resolved or rejected only once. Further invocation of resolve() or reject() has no effect on the Promise state. For example:

const promise = new Promise((resolve, reject) => {
    resolve('Promise resolved'); // Promise is resolved
    reject('Promise rejected'); // Promise can't be rejected
});

Since resolve() is called first so the Promise will be resolved. Calling reject() after that will have no effect on the Promise state.

Consuming a Promise

Now that we know how to create a promise, let’s understand how to consume an already-created promise. We consume a promise by calling then() and catch() methods on the promise.

For example, requesting data from an API using fetch which returns a promise.

**.then()** syntax: promise.then(successCallback, failureCallback)

The successCallback is called when a promise is resolved. It takes one argument which is the value passed to resolve().

The failureCallback is called when a promise is rejected. It takes one argument which is the value passed to reject().

For example:

const promise = new Promise((resolve, reject) => {
    const randomNumber = Math.random();
    if(randomNumber < .7) {
        resolve('All things went well!');
    } else {
        reject(new Error('Something went wrong'));
    }
});

promise.then(
    (data) => {
        console.log(data); // prints 'All things went well!'
    },
    (error) => {
        console.log(error); // prints Error object
    }
);

Here if the promise is resolved, the successCallback is called with the value passed to resolve(). And if the promise is rejected, the failureCallback is called with the value passed to reject().

**.catch()** syntax: promise.catch(failureCallback)

We use catch() for handling errors. It’s more readable than handling errors inside the failureCallback callback of the then() callback. For example:

const promise = new Promise((resolve, reject) => {
    reject(new Error('Something went wrong'));
});

promise
.then((data) => {
    console.log(data);
})
.catch((error) => {
    console.log(error); // prints Error object
});

Promise Chaining

The then() and catch() methods can also return a new promise which can be handled by chaining another then() at the end of the previous then() method.

We use promise chaining when we want to resolve promises in a sequence.

For example:

const promise1 = new Promise((resolve, reject) => {
    resolve('Promise1 resolved');
});

const promise2 = new Promise((resolve, reject) => {
    resolve('Promise2 resolved');
});

const promise3 = new Promise((resolve, reject) => {
    reject('Promise3 rejected');
});

promise1
.then((data) => {
    console.log(data); // Promise1 resolved
    return promise2;
})
.then((data) => {
    console.log(data); // Promise2 resolved
    return promise3;
})
.then((data) => {
    console.log(data);
})
.catch((error) => {
    console.log(error); // Promise3 rejected
});

So what’s happening here?

• When promise1 is resolved, the then() method is called which returns promise2.

• The next then() is called when promise2 is resolved which returns promise3.

• Since promise3 is rejected, the next then() is not called instead catch() is called which handles the promise3 rejection.

Note — Generally only one catch() is enough for handling the rejection of any promise in the promise chain, if it’s at the end of the chain.

Common Mistake

A lot of beginners make the mistake of nesting promises inside another promise. For example:

const promise1 = new Promise((resolve, reject) => {
    resolve('Promise1 resolved');
});

const promise2 = new Promise((resolve, reject) => {
    resolve('Promise2 resolved');
});

const promise3 = new Promise((resolve, reject) => {
    reject('Promise3 rejected');
});

promise1.then((data) => {
    console.log(data); // Promise1 resolved

    promise2.then((data) => {
        console.log(data); // Promise2 resolved

        promise3.then((data) => {
            console.log(data);
        }).catch((error) => {
            console.log(error); // Promise3 rejected
        });

    }).catch((error) => {
        console.log(error);
    })

}).catch((error) => {
    console.log(error);
});

Although this works fine, this is considered to be a poor style and makes our code difficult to read. If you have a sequence of promises to resolve, it’s better to chain promises one after another rather than nest one inside another.

Promise.all( )

This method takes an array of promises as input and returns a new promise that fulfills when all of the promises inside the input array have been fulfilled or rejected as soon as one of the promises in the array rejects. For example:

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise1 resolved');
    }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise2 resolved');
    }, 1500);
});

Promise.all([promise1, promise2])
    .then((data) => console.log(data[0], data[1]))
    .catch((error) => console.log(error));

• Here the data argument inside the then() method is an array that contains promise values in the same order as defined in the promise array passed to Promise.all() (if all promises fulfill).

• The promise is rejected with the reason of rejection from the first rejected promise in the input array. For example:

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise1 resolved');
    }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('Promise2 rejected');
    }, 1500);
});

Promise.all([promise1, promise2])
    .then((data) => console.log(data[0], data[1]))
    .catch((error) => console.log(error)); // Promise2 rejected

• Here we have two promises where one is resolved after 2 seconds, and the other is rejected after 1.5 seconds.

• As soon as the second promise is rejected after 1.5 seconds, the returned promise from Promise.all() is rejected without waiting for the first promise to be resolved.

This method can be useful when you have more than one promise, and you want to know when all of the promises have been resolved. For example, if you are requesting data from different APIs and you want to do something with the data only when all of the requests are successful.

So Promise.all() waits for all promises to succeed and fails if any of the promises in the array fails.

Promise.race( )

This method takes an array of promises as input and returns a new promise that fulfills as soon as one of the promises in the input array fulfills or rejects as soon as one of the promises in the input array rejects. For example:

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise1 resolved');
    }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('Promise2 rejected');
    }, 1500);
});

Promise.race([promise1, promise2])
    .then((data) => console.log(data)) // Promise1 resolved
    .catch((error) => console.log(error));

• Here we have two promises where one is resolved after 1 second, and the other is rejected after 1.5 seconds.

• As soon as the first promise is resolved after 1 second, the returned promise from Promise.race() is resolved without waiting for the second promise to be resolved or rejected.

• Here data passed to the then() method is the value of the first promise that resolves.

So Promise.race() waits for one of the promises in the array to succeed or fail and fulfills or rejects as soon as one of the promises in the array is resolved or rejected.

Conclusion

We have learned what promises are and how to use them in JavaScript. A Promise has two parts 1) Promise creation and 2) consuming a Promise. Most of the time you will be consuming promises rather than creating them, but it’s still important to know how to create them.

That’s it and hope you found this article helpful! Please feel free to comment below and ask anything, suggest feedback or just chat. Cheers! ⭐️

If you are learning JavaScript, you might have seen the this keyword. The this keyword in JavaScript behaves differently compared to other programming languages. This causes a lot of confusion for programmers.

In other object-oriented programming languages, the this keyword always refers to the current instance of the class. Whereas in JavaScript, the value of this depends on how a function is called.

Let’s look at some examples to demonstrate the behavior of this in JavaScript.

Example 1:

const person = {  
  firstName: 'John',  
  lastName: 'Doe',  
  printName: function() {  
    console.log(this.firstName + ' ' + this.lastName);  
  }  
};

Now let’s execute the printName method.

person.printName();

This prints:

John Doe

Here, I am calling the printName() method using the person object, so the this keyword inside the method refers to the person object.

Let’s write the below snippet at the end of the above code.

const printFullName = person.printName;  
printFullName();

What do you think the console.log will now output? Surprisingly, this prints:

undefined undefined

Why does this happen?

Here, we are storing a reference of person.printName to printFullName variable. After that, we are calling it without an object reference, so this will now refer to the window (global) object or undefined (in strict mode).

If the script is in strict mode, this refers to undefined, so console.log() will return an error.

Example 2:

const counter = {  
  count: 0,  
  incrementCounter: function() {  
    console.log(this);  
    this.count++;  
  }  
}

document.querySelector('.btn').addEventListener('click', counter.incrementCounter);

What would be the value of this inside incrementCounter() method?

In the above snippet, the this keyword refers to the DOM element where the event happened, not the counter object.

So we can see that the this keyword inside a function refers to different objects depending on how the function is called and sometimes we accidentally lose reference to the this variable. So how can we prevent that from happening?

Call( ), Bind( ), and Apply( ) to Rescue

We use Call, Bind and Apply methods to set the this keyword independent of how the function is called. This is especially useful for the callbacks (as in the above example).

We know that functions are a special kind of objects in JavaScript. So they have access to the same methods and properties as objects. To prove functions are objects, we can do something like this, for example:

function greeting() {  
  console.log('Hello World');  
}

greeting.lang = 'English';

// Prints 'English'  
console.log(greeting.lang);

JavaScript also provides some special methods and properties to every function object. So every function in JavaScript inherits those methods. Call, bind, and apply are some of the methods that every function inherits.

Bind( )

The bind method creates a new function and sets the this keyword to the specified object.

Syntax:

`function`.bind(thisArg, optionalArguments)

For example:

Let’s suppose we have two person objects.

const john = {  
  name: 'John',  
  age: 24,  
};

const jane = {  
  name: 'Jane',  
  age: 22,  
};

Let’s add a greeting function:

function greeting() {  
  console.log(`Hi, I am ${this.name} and I am ${this.age} years old`);  
}

We can use the bind method on the greeting function to bind the this keyword to john and jane objects. For example:

const greetingJohn = greeting.bind(john);

// Hi, I am John and I am 24 years old  
greetingJohn();

const greetingJane = greeting.bind(jane);

// Hi, I am Jane and I am 22 years old  
greetingJane();

Here greeting.bind(john) creates a new function with this set to john object, which we then assign to greetingJohn variable.

We can also use bind in case of callbacks and event handlers. For example:

const counter = {  
  count: 0,  
  incrementCounter: function() {  
    console.log(this);  
    this.count++;  
  }  
};

document.querySelector('.btn').addEventListener('click', counter.incrementCounter.bind(counter));

In the above example, the this keyword inside the incrementCounter method will now correctly refer to the counter object instead of the event object.

Bind() can also accept arguments

We can also pass extra arguments to the bind method. The general syntax for this is function.bind(this, arg1, arg2, ...). For example:

function greeting(lang) {  
  console.log(`${lang}: I am ${this.name}`);  
}

const john = {  
  name: 'John'  
};

const jane = {  
  name: 'Jane'  
};

const greetingJohn = greeting.bind(john, 'en');  
greetingJohn();

const greetingJane = greeting.bind(jane, 'es');  
greetingJane();

In the above example, the bind method creates a new function with certain parameters predefined (lang in this case) and this keyword set to the john and jane objects.

Call ( )

The call method sets the this inside the function and immediately executes that function.

The difference between call() and bind() is that the call() sets the this keyword and executes the function immediately and it does not create a new copy of the function, while the bind() creates a copy of that function and sets the this keyword.

Syntax:

`function`.call(thisArg, arg1, agr2, ...)

For example:

function greeting() {  
  console.log(`Hi, I am ${this.name} and I am ${this.age} years old`);  
}

const john = {  
  name: 'John',  
  age: 24,  
};

const jane = {  
  name: 'Jane',  
  age: 22,  
};

// Hi, I am John and I am 24 years old  
greeting.call(john);

// Hi, I am Jane and I am 22 years old  
greeting.call(jane);

The above example is similar to the bind() example except that call() does not create a new function. We are directly setting the this keyword using call().

Call () can also accept arguments

Call() also accepts a comma-separated list of arguments. The general syntax for this is function.call(this, arg1, arg2, ...)

For example:

function greet(greeting) {  
  console.log(`${greeting}, I am ${this.name} and I am ${this.age} years old`);  
}

const john = {  
  name: 'John',  
  age: 24,  
};

const jane = {  
  name: 'Jane',  
  age: 22,  
};

// Hi, I am John and I am 24 years old  
greet.call(john, 'Hi');

// Hello, I am Jane and I am 22 years old  
greet.call(jane, 'Hello');

Apply ( )

The apply() method is similar to call(). The difference is that the apply() method accepts an array of arguments instead of comma-separated values.

Syntax:

`function`.apply(thisArg, [argumentsArr])

For example:

function greet(greeting, lang) {  
  console.log(lang);  
  console.log(`${greeting}, I am ${this.name} and I am ${this.age} years old`);  
}

const john = {  
  name: 'John',  
  age: 24,  
};

const jane = {  
  name: 'Jane',  
  age: 22,  
};

// en
// Hi, I am John and I am 24 years old  
greet.apply(john, ['Hi', 'en']);

// es
// Hola, I am Jane and I am 22 years old  
greet.apply(jane, ['Hola', 'es']);

Conclusion

We have learned how this keyword behaves differently in JavaScript than in other object-oriented languages. The call, bind and apply methods can be used to set the this keyword independent of how a function is called.

The bind method creates a copy of the function and sets the this keyword, while the call and apply methods set the this keyword and calls the function immediately.

That’s it and if you found this article helpful, please click the like 🙂 button, you can also follow me on Hashnode, Medium and Twitter, and if you have any doubt, feel free to comment! I’d be happy to help :)

When you start a new project, you don’t immediately start coding. You first have to define the purpose and scope of the project, then list out the project features or specs. After you can either start coding or if you are working on a more complex project then you should choose a design pattern that best suits your project.

What is a Design Pattern?

In software engineering, a design pattern is a reusable solution for commonly occurring problems in software design. Design patterns represent the best practices used by experienced software developers. A design pattern can be thought of as a programming template.

Why use Design Patterns?

Many programmers either think design patterns are a waste of time or they don’t know how to apply them appropriately. But using an appropriate design pattern can help you to write better and more understandable code, and the code can be easily maintained because it’s easier to understand.

Most importantly, the design patterns give software developers a common vocabulary to talk about. They show the intent of your code instantly to someone learning the code.

For example, if you are using decorator pattern in your project, then a new programmer would immediately know what that piece of code is doing, and they can focus more on solving the business problem rather than trying to understand what that code is doing.

Now that we know what design patterns are, and why they are important, let’s dive into various design patterns used in JavaScript.

Module Pattern

A Module is a piece of self-contained code so we can update the Module without affecting the other parts of the code. Modules also allow us to avoid namespace pollution by creating a separate scope for our variables. We can also reuse modules in other projects when they are decoupled from other pieces of code.

Modules are an integral part of any modern JavaScript application and help in keeping our code clean, separated and organized. There are many ways to create modules in JavaScript, one of which is the Module pattern.

Unlike other programming languages, JavaScript doesn’t have access modifiers, that is, you can’t declare a variable as private or public. So the Module pattern is also used to emulate the concept of encapsulation.

This pattern uses IIFE (immediately-invoked function expression), closures and function scope to simulate this concept. For example:

const myModule = (function() {

  const privateVariable = 'Hello World';

  function privateMethod() {  
    console.log(privateVariable);  
  }

  return {  
    publicMethod: function() {  
      privateMethod();  
    }  
  }

})();

myModule.publicMethod();

As it’s IIFE, the code is immediately executed, and the returned object is assigned to the myModule variable. Due to closures, the returned object can still access the functions and variables defined inside the IIFE even after when IIFE has finished.

So the variables and functions defined inside the IIFE are essentially hidden from the outer scope and thus making it private to the myModule variable.

After the code is executed, the myModule variable looks like this:

const myModule = {  
  publicMethod: function() {  
    privateMethod();  
  }
};

So we can call the publicMethod() which will, in turn, call the privateMethod(). For example:

// Prints 'Hello World'  
module.publicMethod();

Revealing Module Pattern

The Revealing Module pattern is a slightly improved version of the module pattern by Christian Heilmann. The problem with the module pattern is that we have to create new public functions just to call the private functions and variables.

In this pattern, we map the returned object’s properties to the private functions that we want to reveal as public. That’s why it’s called the Revealing Module pattern. For example:

const myRevealingModule = (function() {

  let privateVar = 'Peter';  
  const publicVar = 'Hello World';

  function privateFunction() {  
    console.log('Name: '+ privateVar);  
  }

  function publicSetName(name) {  
    privateVar = name;  
  }

  function publicGetName() {  
    privateFunction();  
  }

/* reveal methods and variables by assigning them to object properties */

  return {  
    setName: publicSetName,  
    greeting: publicVar,  
    getName: publicGetName  
  };

})();

myRevealingModule.setName('Mark');

// prints Name: Mark  
myRevealingModule.getName();

This pattern makes it easier to understand which of our functions and variables can be accessed publicly, which helps in code readability.

After the code is executed, the myRevealingModule looks like this:

const myRevealingModule = {  
  setName: publicSetName,  
  greeting: publicVar,  
  getName: publicGetName  
};

We can call myRevealingModule.setName('Mark'), which is a reference to the inner publicSetName and myRevealingModule.getName(), which is a reference to the inner publicGetName. For example:

myRevealingModule.setName('Mark');

// prints Name: Mark  
myRevealingModule.getName();

Advantages of Revealing Module pattern over Module Pattern:

• We can change public members to private and vice versa by modifying a single line in the return statement.

• The returned object contains no function definitions, all right-hand side expressions are defined inside the IIFE, making the code clear and easy to read.

ES6 Modules

Before ES6, JavaScript didn’t have built-in modules, so developers had to rely on third-party libraries or the module pattern to implement modules. But with ES6, JavaScript has native modules.

ES6 modules are stored in files. There can only be one module per file. Everything inside a module is private by default. Functions, variables, and classes are exposed using the export keyword. The code inside a module always runs in strict mode.

Exporting a Module

There are two ways to export a function and variable declaration:

• By adding the export keyword in front of the function and variable declaration. For example:

// utils.js

export const greeting = 'Hello World';

export function sum(num1, num2) {  
  console.log('Sum:', num1, num2);  
  return num1 + num2;  
}

export function subtract(num1, num2) {  
  console.log('Subtract:', num1, num2);  
  return num1 - num2;  
}

// This is a private function
function privateLog() {  
  console.log('Private Function');  
}

• By adding the export keyword at end of the code containing names of functions and variables we want to export. For example:

// utils.js

function multiply(num1, num2) {  
  console.log('Multiply:', num1, num2);  
  return num1 \* num2;  
}

function divide(num1, num2) {  
  console.log('Divide:', num1, num2);  
  return num1 / num2;  
}

// This is a private function

function privateLog() {  
  console.log('Private Function');  
}

export {multiply, divide};

Importing a Module

Similar to exporting a module, there are two ways to import a module by using the import keyword. For example:

• Importing multiple items at one time

// main.js

// importing multiple items  
import { sum, multiply } from './utils.js';

console.log(sum(3, 7));  
console.log(multiply(3, 7));

• Importing all items of a module

// main.js

// importing all items of a module

import * as utils from './utils.js';

console.log(utils.sum(3, 7));  
console.log(utils.multiply(3, 7));

Imports and Exports can be aliased

If you want to avoid naming collisions, you can change the name of the exported object both during export as well as import. For example:

• Renaming an export

// utils.js

function sum(num1, num2) {  
  console.log('Sum:', num1, num2);  
  return num1 + num2;  
}

function multiply(num1, num2) {  
  console.log('Multiply:', num1, num2);  
  return num1 \* num2;  
}

export {sum as add, multiply};

• Renaming an import

// main.js

import { add, multiply as mult } from './utils.js';

console.log(add(3, 7));  
console.log(mult(3, 7));

Singleton Pattern

A Singleton is an object which can be instantiated only once. A singleton pattern creates a new instance of a class if one doesn’t exist. If an instance exists, it simply returns a reference to that object. Any repeated calls to the constructor would always fetch the same object.

JavaScript has always had singletons built-in to the language. We just don’t call them singletons, we call them object literal. For example:

const user = {  
  name: 'Peter',  
  age: 25,  
  job: 'Teacher',  
  greet: function() {  
    console.log('Hello!');  
  }  
};

Because each object in JavaScript occupies a unique memory location and when we call the user object, we are essentially returning a reference to this object.

If we try to copy the user variable into another variable and modify that variable. For example:

const user1 = user;  
user1.name = 'Mark';

We would see both objects are modified because objects in JavaScript are passed by reference, not by value. So there is only a single object in the memory. For example:

// prints 'Mark'  
console.log(user.name);

// prints 'Mark'  
console.log(user1.name);

// prints true  
console.log(user === user1);

Singleton pattern can be implemented using the constructor function. For example:

let instance = null;

function User() {  
  if(instance) {  
    return instance;  
  }

  instance = this;  
  this.name = 'Peter';  
  this.age = 25;

  return instance;  
}

const user1 = new User();  
const user2 = new User();

// prints true  
console.log(user1 === user2);

When this constructor function is called, it checks if the instance object exists or not. If the object doesn’t exist, it assigns the this variable to the instance variable. And if the object exists, it just returns that object.

Singletons can also be implemented using the module pattern. For example:

const singleton = (function() {  
  let instance;

  function init() {  
    return {  
      name: 'Peter',  
      age: 24,  
    };  
  }

  return {  
    getInstance: function() {  
      if(!instance) {  
        instance = init();  
      }
      return instance;  
    }  
  }  
})();

const instanceA = singleton.getInstance();  
const instanceB = singleton.getInstance();

// prints true  
console.log(instanceA === instanceB);

In the above code, we are creating a new instance by calling the singleton.getInstance method. If an instance already exists, this method simply returns that instance, if the instance doesn’t exist, it creates a new instance by calling the init() function.

Factory Pattern

Factory Pattern is a pattern that uses factory methods to create objects without specifying the exact class or constructor function from which the object will be created.

The factory pattern is used to create objects without exposing the instantiation logic. This pattern can be used when we need to generate a different object depending upon a specific condition. For example:

class Car{  
  constructor(options) {  
    this.doors = options.doors || 4;  
    this.state = options.state || 'brand new';  
    this.color = options.color || 'white';  
  }  
}

class Truck {  
  constructor(options) {  
    this.doors = options.doors || 4;  
    this.state = options.state || 'used';  
    this.color = options.color || 'black';  
  }  
}

class VehicleFactory {  
  createVehicle(options) {  
    if(options.vehicleType === 'car') {  
      return new Car(options);  
    } else if(options.vehicleType === 'truck') {  
      return new Truck(options);  
    }  
  }  
}

Here I have created a Car and a Truck class (with some default values) which is used to create new car and truck objects. And I have defined a VehicleFactory class to create and return a new object based on vehicleType property received in the options object.

const factory = new VehicleFactory();

const car = factory.createVehicle({  
  vehicleType: 'car',  
  doors: 4,  
  color: 'silver',  
  state: 'Brand New'  
});

const truck= factory.createVehicle({  
  vehicleType: 'truck',  
  doors: 2,  
  color: 'white',  
  state: 'used'  
});

// Prints Car {doors: 4, state: "Brand New", color: "silver"}  
console.log(car);

// Prints Truck {doors: 2, state: "used", color: "white"}  
console.log(truck);

I have created a new object factory of VehicleFactory class. After that, we can create a new Car or Truck object by calling factory.createVehicle and passing an options object with a vehicleType property with a value of car or truck.

Decorator Pattern

A Decorator pattern is used to extend the functionality of an object without modifying the existing class or constructor function. This pattern can be used to add features to an object without modifying the underlying code using them.

A simple example of this pattern would be:

function Car(name) {  
  this.name = name;

  // Default values  
  this.color = 'White';  
}

// Creating a new Object to decorate  
const tesla= new Car('Tesla Model 3');

// Decorating the object with new functionality
tesla.setColor = function(color) {  
  this.color = color;  
}

tesla.setPrice = function(price) {  
  this.price = price;  
}

tesla.setColor('black');  
tesla.setPrice(49000);

// prints black  
console.log(tesla.color);

A more practical example of this pattern would be:

Let’s say, the cost of a car differs depending on the number of features it has. Without decorator pattern, we would have to create different classes for different combinations of features, each having a cost method to calculate the cost. For example:

class Car() {  
}

class CarWithAC() {  
}

class CarWithAutoTransmission {  
}

class CarWithPowerLocks {  
}

class CarWithACandPowerLocks {  
}

But with decorator pattern, we can create a base class Car and add the cost of different configurations to its object using the decorator functions. For example:

class Car {  
  constructor() {  
    // Default Cost  
    this.cost = function() {  
      return 20000;  
    }  
  }  
}

// Decorator function  
function carWithAC(car) {  
  car.hasAC = true;  
  const prevCost = car.cost();  
  car.cost = function() {  
    return prevCost + 500;  
  }  
}

// Decorator function  
function carWithAutoTransmission(car) {  
  car.hasAutoTransmission = true;  
  const prevCost = car.cost();  
  car.cost = function() {  
    return prevCost + 2000;  
  }  
}

// Decorator function  
function carWithPowerLocks(car) {  
  car.hasPowerLocks = true;  
  const prevCost = car.cost();  
  car.cost = function() {  
    return prevCost + 500;  
  }  
}

First, we create a base class Car for creating the Car objects. Then, we create the decorator for the feature we want to add to it and pass the Car object as a parameter. Then we override the cost function of that object which returns the updated cost of the car and adds a new property to that object to indicate which feature has been added.

To add a new feature, we could do something like this:

const car = new Car();  
console.log(car.cost());

carWithAC(car);  
carWithAutoTransmission(car);  
carWithPowerLocks(car);

In the end, we can calculate the cost of the car like this:

// Calculating total cost of the car  
console.log(car.cost());

Conclusion

We have learned about various design patterns used in JavaScript, but there are many design patterns that I haven’t covered here, which can be implemented in JavaScript.

While it’s important to know various design patterns, it’s also equally important not to overuse them. Before using a design pattern, you should carefully consider if your problem fits that design pattern or not. To know if a pattern fits your problem, you should study the design pattern as well as the applications of that design pattern.

That’s it and if you found this article helpful, please click the like 🙂 button, you can also follow me on Hashnode, Medium and Twitter, and if you have any doubt, feel free to comment! I’d be happy to help :)

If you are learning JavaScript, you must have come across the term Higher-Order Functions. Although it may sound complicated, it isn’t.

What makes JavaScript suitable for functional programming is that it accepts Higher-Order Functions.

Higher-Order Functions are extensively used in JavaScript. If you have been programming in JavaScript for a while, you may have already used them without even knowing.

To fully understand this concept, you first have to understand what Functional Programming is and the concept of First-Class Functions.

What is Functional Programming

In most simple terms, Functional Programming is a form of programming in which you can pass functions as parameters to other functions and also return them as values. In functional programming, we think and code in terms of functions.

JavaScript, Haskell, Clojure, Scala, and Erlang are some of the languages that implement functional programming.

First-Class Functions

If you have been learning JavaScript, you may have heard that JavaScript treats functions as first-class citizens. That’s because in JavaScript or any other functional programming language functions are objects.

In JavaScript, functions are a special type of object. They are Function objects. For example:

function greeting() {  
  console.log('Hello World');  
}
// Invoking the function  
greeting();  // prints 'Hello World

To prove functions are objects in JavaScript, we could do something like this:

// We can add properties to functions as we do with objects  
greeting.lang = 'English';

// Prints 'English'  
console.log(greeting.lang);

Note — While this is perfectly valid in JavaScript, this is considered a harmful practice. You should not add random properties to the function objects, use an object if you have to.

In JavaScript, everything you can do with other types like objects, strings, or numbers, you can do with functions. You can pass them as parameters to other functions (callbacks), assign them to variables and pass them around, etc. This is why functions in JavaScript are known as First-Class Functions.

Assigning Functions to Variables

We can assign functions to variables in JavaScript. For example:

const square = function(x) {  
  return x * x;  
}

// prints 25  
square(5);

We can also pass them around. For example:

const foo = square;

// prints 36  
foo(6);

Passing Functions as Parameters

We can pass functions as parameters to other functions. For example:

function formalGreeting() {  
  console.log("How are you?");  
}

function casualGreeting() {  
  console.log("What's up?");  
}

function greet(type, greetFormal, greetCasual) {  
  if(type === 'formal') {  
    greetFormal();  
  } else if(type === 'casual') {  
    greetCasual();  
  }
}

// prints 'What's up?'  
greet('casual', formalGreeting, casualGreeting);

Now that we know what first-class functions are, let’s dive into Higher-Order functions in JavaScript.

Higher-Order Functions

Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them. In simple words, A Higher-Order function is a function that receives a function as an argument or returns the function as output.

For example, Array.prototype.map, Array.prototype.filter and Array.prototype.reduce are some of the Higher-Order functions built into the language.

Higher-Order Functions in Action

Let’s take a look at some examples of built-in higher-order functions and see how it compares to solutions where we aren’t using Higher-Order Functions.

Array.prototype.map

The map() method creates a new array by calling the callback function provided as an argument on every element in the input array. The map() method will take every returned value from the callback function and creates a new array using those values.

The callback function passed to the map() method accepts 3 arguments: element, index, and array.

Let’s look at some examples:

Example 1#

Let’s say we have an array of numbers and we want to create a new array where each item is double the values in the original array. Let’s see how we can solve this problem with and without Higher-Order Functions.

Without Higher-order functions

const arr1 = [1, 2, 3];  
const arr2 = [];

for(let i = 0; i < arr1.length; i++) {  
  arr2.push(arr1[i] * 2);  
}

// prints [ 2, 4, 6 ]  
console.log(arr2);

With Higher-order function map

const arr1 = [1, 2, 3];

const arr2 = arr1.map(function(item) {  
  return item * 2;  
});

console.log(arr2);

We can make this even shorter using the arrow function syntax:

const arr1 = [1, 2, 3];

const arr2 = arr1.map(item => item * 2);

console.log(arr2);

Example 2#

Let’s say we have an array containing the birth year of different persons and we want to create an array that contains their ages. For example:

Without Higher-order function

const birthYear = [1975, 1997, 2002, 1995, 1985];  
const ages = [];

for(let i = 0; i < birthYear.length; i++) {  
  let age = new Date().getFullYear() - birthYear[i];  
  ages.push(age);  
}

// prints [ 43, 21, 16, 23, 33 ]  
console.log(ages);

With Higher-order function map

const birthYear = [1975, 1997, 2002, 1995, 1985];

const ages = birthYear.map(year => new Date().getFullYear() - year);

// prints [ 43, 21, 16, 23, 33 ]  
console.log(ages);

Array.prototype.filter

The filter() method creates a new array with all elements that pass the test provided by the callback function. The callback function passed to the filter() method accepts 3 arguments: element, index, and array.

Let’s look at some examples:

Example 1

Let’s say we have an array that contains objects with name and age properties. We want to create an array that contains only the persons with ages greater than or equal to 18.

Without Higher-order function

const persons = [  
  { name: 'Peter', age: 16 },  
  { name: 'Mark', age: 18 },  
  { name: 'John', age: 27 },  
  { name: 'Jane', age: 14 },  
  { name: 'Tony', age: 24},  
];

const adults = [];

for(let i = 0; i < persons.length; i++) {  
  if(persons[i].age >= 18) {  
    adults.push(persons[i]);  
  }  
}

console.log(adults);

With Higher-order function filter

const persons = [  
  { name: 'Peter', age: 16 },  
  { name: 'Mark', age: 18 },  
  { name: 'John', age: 27 },  
  { name: 'Jane', age: 14 },  
  { name: 'Tony', age: 24},  
];

const adults = persons.filter(person => person.age >= 18);

console.log(adults);

Array.prototype.reduce

The reduce method executes the callback function on each member of the calling array which results in a single output value. The reduce method accepts two parameters: 1) The reducer function (callback), 2) and an optional initialValue.

The reducer function (callback) accepts four parameters: accumulator, currentValue, currentIndex, and sourceArray.

If an initialValue is provided, then the accumulator will be equal to the initialValue and the currentValue will be equal to the first element in the array.

If no initialValue is provided, then the accumulator will be equal to the first element in the array and the currentValue will be equal to the second element in the array.

Example 1

Let’s say we have to sum an array of numbers:

With Higher-order function reduce

const arr = [5, 7, 1, 8, 4];

const sum = arr.reduce(function(accumulator, currentValue) {  
  return accumulator + currentValue;  
});

// prints 25  
console.log(sum);

Every time the reducer function is called on each value in the array, the accumulator keeps the result of the previous operation returned from the reducer function, and the currentValue is set to the current item of the array. In the end, the result is stored in the sum variable.

We can also provide an initial value to this function:

const arr = [5, 7, 1, 8, 4];

const sum = arr.reduce(function(accumulator, currentValue) {  
  return accumulator + currentValue;  
}, 10);

// prints 35  
console.log(sum);

Without Higher-order function

const arr = [5, 7, 1, 8, 4];

let sum = 0;

for(let i = 0; i < arr.length; i++) {  
  sum = sum + arr[i];  
}

// prints 25  
console.log(sum);

You can see that using the High-order functions made our code cleaner, more concise, and less verbose.

Creating Our own Higher-Order Function

Up until this point, we saw various Higher-order functions built into the language. Now let’s create our own Higher-order function.

Let’s imagine JavaScript didn’t have the native map method. We could build it ourselves thus creating our own Higher-Order Function.

Let’s say, we have an array of strings and we want to convert this array to an array of integers, where each element represent the length of the string in the original array. For example:

const stringArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C'];  

function map(arr, fn) {
  const newArray = [];  
  for(let i = 0; i < arr.length; i++) {  
    newArray.push(  
      fn(arr[i])  
    );  
  }
  return newArray;  
}

const lengthArray = map(stringArray, function(item) {  
  return item.length;  
});

// prints [ 10, 6, 3, 4, 1 ]  
console.log(lengthArray);

In the above example, we created a Higher-order function map which accepts an array and a callback function fn. This function loops over the provided array and calls the callback function fn inside the newArray.push function call on each iteration.

The callback function fn receives the current element of the array and returns the length of that element, which is stored inside the newArray. After the for loop has finished, the newArray is returned and assigned to the lengthArray.

Conclusion

We have learned what Higher-order functions are and saw some of the built-in Higher-order functions in JavaScript. We also learned how to create our own Higher-order functions.

In a nutshell, a Higher-order function is a function that may receive a function as an argument and can even return a function. Higher-order functions are just like regular functions with the added ability to receive other functions as arguments and return them as output.

That’s it and if you found this article helpful, please click the like 🙂 button, you can also follow me on Hashnode, Medium and Twitter, and if you have any doubt, feel free to comment! I’d be happy to help :)

Scope and Scope Chain are fundamental concepts of JavaScript and other programming languages. Yet, these concepts confuse many new JavaScript developers. The knowledge of these concepts is essential in mastering JavaScript.

Having a proper understanding of these concepts will help you to write better, more efficient and clean code. Which will, in turn, help you to become a better JavaScript developer.

So in this article, I will explain what scope and scope chain is, how JavaScript engine performs variable lookups and internals of these concepts.

So without further ado, Let’s get started :)

What is Scope?

Scope in JavaScript refers to the accessibility or visibility of variables. That is, which parts of a program have access to the variable or where the variable is visible.

Why is Scope Important?

1. The main benefit of scope is security. That is, the variables can be accessed from only a certain area of the program. Using scope, we can avoid unintended modifications to the variables from other parts of the program.
2. The scope also reduces the namespace collisions. That is, we can use the same variable names in different scopes.

Types of Scope

There are three types of scope in JavaScript — 1) Global Scope, 2) Function Scope, and, 3) Block Scope.

1. Global Scope

Any variable that’s not inside any function or block (a pair of curly braces), is inside the global scope. The variables in global scope can be accessed from anywhere in the program. For example:

var greeting = 'Hello World!';

function greet() {  
  console.log(greeting);  
}

// Prints 'Hello World!'  
greet();

2. Local Scope or Function Scope

Variables declared inside a function is inside the local scope. They can only be accessed from within that function, that means they can’t be accessed from the outside code. For example:

function greet() {  
  var greeting = 'Hello World!';  
  console.log(greeting);  
}

// Prints 'Hello World!'  
greet();

// Uncaught ReferenceError: greeting is not defined  
console.log(greeting);

3. Block Scope

ES6 introduced let and const variables, unlike var variables, they can be scoped to the nearest pair of curly braces. That means, they can’t be accessed from outside that pair of curly braces. For example:

{  
  let greeting = 'Hello World!';  
  var lang = 'English';  
  console.log(greeting); // Prints 'Hello World!'  
}

// Prints 'English'  
console.log(lang);

// Uncaught ReferenceError: greeting is not defined  
console.log(greeting);

We can see that var variables can be used outside the block, that is, var variables are not block scoped.

Nested Scope

Just like functions in JavaScript, a scope can be nested inside another scope. For example:

var name = 'Peter';

function greet() {  
  var greeting = 'Hello';  
  {  
    let lang = 'English';  
    console.log(`${lang}: ${greeting} ${name}`);  
  }  
}

greet();

Here we have 3 scopes nested within each other. First, the block scope (created due to the let variable) is nested inside the local or function scope which is in turn nested inside the global scope.

Lexical Scope

Lexical Scope (also known as Static Scope) literally means that scope is determined at the lexing time (generally referred to as compiling) rather than at runtime. For example:

let number = 42;

function printNumber() {  
  console.log(number);  
}

function log() {  
  let number = 54;  
  printNumber();  
}

// Prints 42  
log();

Here the console.log(number) will always print 42 no matter from where the function printNumber() is called. This is different from languages with the dynamic scope where the console.log(number) will print different value depending on from where the function printNumber() is called.

If the above code was written in a language that supports dynamic scoping, the console.log(number) would have printed 54 instead.

Using lexical scope we can determine the scope of the variable just by looking at the source code. Whereas in the case of dynamic scoping the scope can’t be determined until the code is executed.

Most of the programming languages support lexical or static scope such as C, C++, Java, JavaScript. Perl supports both static and dynamic scoping.

Scope Chain

When a variable is used in JavaScript, the JavaScript engine will try to find the variable’s value in the current scope. If it could not find the variable, it will look into the outer scope and will continue to do so until it finds the variable or reaches global scope.

If it’s still could not find the variable, it will either implicitly declare the variable in the global scope (if not in strict mode) or return an error.

For example:

let foo = 'foo';

function bar() {  
  let baz = 'baz';

  // Prints 'baz'  
  console.log(baz);

  // Prints 'foo'  
  console.log(foo);

  number = 42;  
  console.log(number);  // Prints 42  
}

bar();

When the function bar() is executed, the JavaScript engine looks for the baz variable and finds it in the current scope. Next, it looks for foo variable in the current scope and it can’t find it there, so it looks for the variable in outer scope and finds it there (i.e global scope).

After that, we assign 42 to the number variable, so the JavaScript engine looks for the number variable in the current scope and after that in the outer scope.

If the script is not in strict mode, the engine will create a new variable named number and assign 42 to it or return an error (if not in strict mode).

So when a variable is used the engine will traverse the scope chain until it finds the variable.

How Does Scope and Scope Chain Work?

Up until now, we have discussed what scope is and types of scope. Now let’s understand how JavaScript engine determines the scope of variables and perform variable lookups under the hood.

In order to understand how JavaScript engine performs variable lookups, we have to understand the concept of lexical environment in JavaScript.

What is a Lexical Environment?

A lexical environment is a structure that holds identifier-variable mapping. (here identifier refers to the name of variables/functions, and the variable is the reference to actual object [including function object and array object] or primitive value).

Simply put, a lexical environment is a place where variables and references to the objects are stored.

Note — Don’t confuse lexical scope with the lexical environment, lexical scope is a scope that is determined at compile time and a lexical environment is a place where variables are stored during the program execution.

Conceptually a lexical environment looks like this:

lexicalEnvironment = {  
  a: 25,  
  obj: <ref. to the object>  
}

A new lexical environment is created for each lexical scope but only when the code in that scope is executed. The lexical environment also has a reference to its outer lexical environment ( i.e outer scope). For example:

lexicalEnvironment = {  
  a: 25,  
  obj: <ref. to the object>

  outer: <outer lexical environemt>  
}

How does JavaScript Engine Perform Variable Lookups?

Now that we know what scope, scope chain and lexical environment are, let’s now understand how JavaScript engine uses the lexical environment to determine scope and scope chain.

Let’s take a look at below code snippet to understand the above concepts.

let greeting = 'Hello';

function greet() {  
  let name = 'Peter';  
  console.log(`${greeting} ${name}`);  
}

greet();

{  
  let greeting = 'Hello World!'  
  console.log(greeting);  
}

When the above script loads, a global lexical environment is created, which contains variables and functions defined inside the global scope. For example:

globalLexicalEnvironment = {  
  greeting: 'Hello'  
  greet: <ref. to greet function>

  outer: <null>  
}

Here outer lexical environment is set to null because there is no outer scope after global scope.

After that, a call to the greet() function is encountered. So a new lexical environment is created for the greet() function. For example:

functionLexicalEnvironment = {  
  name: 'Peter'

  outer: <globalLexicalEnvironment>  
}

Here outer lexical environment is set to globalLexicalEnvironment because its outer scope is the global scope.

After that, the JavaScript engine executes the console.log(`${greeting} ${name}`) statement.

The JavaScript engine tries to find the greeting and name variables inside the function’s lexical environment. It finds the name variable inside the current lexical environment but it won’t be able to find the greeting variable inside the current lexical environment.

So it looks inside the outer lexical environment (defined by the outer property i.e global lexical environment) and finds the greeting variable.

Next, the JavaScript engine executes at the code inside the block. So it creates a new lexical environment for that block. For example:

blockLexicalEnvironment = {  
  greeting: 'Hello World',

  outer: <globalLexicalEnvironment>  
}

Next, the console.log(greeting) statement is executed, the JavaScript engine finds the variable in the current lexical environment and uses that variable. So it does not look inside the outer lexical environment (global lexical environment) for the variable.

Note — A new lexical environment is created only for let and const declarations, not var declarations. var declarations are added to the current lexical environment (global or function lexical environment).

So when a variable is used in a program, the JavaScript engine will try to find the variable in the current lexical environment and if it could not find the variable there, it looks inside the outer lexical environment to find the variable. So that’s how the JavaScript engine performs variable lookups.

Conclusion

So in a nutshell, a scope is an area where a variable is visible and accessible. Just like functions, scopes in JavaScript can be nested and the JavaScript engine traverses the scope chain to find the variables used in the program.

JavaScript uses lexical scope which means that scope of variables is determined at compile time. The JavaScript engine uses the lexical environment to store the variables during the program execution.

Scope and scope chain are fundamental concepts of JavaScript that every JavaScript developer should understand. Having a good knowledge of these concepts will help you to become a much more effective and better JavaScript developer.

That’s it and if you found this article helpful, please click the like 🙂 button, you can also follow me on Hashnode, Medium and Twitter, and if you have any doubt, feel free to comment! I’d be happy to help :)

Many JavaScript programmers explain hoisting as JavaScript’s behavior of moving declarations (variable and function) to the top of their current scope (function or global). As if they were physically moved to the top of your code, which is not the case. For example:

console.log(a);
var a= 'Hello World!';

They will say, the above code will transform into this code after hoisting:

var a;
console.log(a);
a = 'Hello World!';

Although this is what appears to be happening (because the code is working fine), this isn’t actually happening, your code isn’t going anywhere. The JavaScript engine is not physically moving your code, your code stays where you typed it.

So What is Hoisting Then?

During compile phase, just microseconds before your code is executed, it is scanned for function and variable declarations. All these functions and variable declarations are added to the memory inside a JavaScript data structure called Lexical Environment. So that they can be used even before they are actually declared in the source code.

What is a Lexical Environment?

A lexical environment is a data structure that holds identifier-variable mapping. (here identifier refers to the name of variables/functions, and the variable is the reference to actual object [including function object] or primitive value).

This is what a lexical environment conceptually look like:

LexicalEnvironment = {
  Identifier:  <value>,
  Identifier:  <function object>
}

So in short, a lexical environment is a place where variables and functions live during the program execution.

If you want to know more about lexical environments, you can read my previous article here.

Now that we know what hoisting actually is, let’s take a look at how hoisting happens for function and variable (var, let and const) declarations.

Hoisting Function Declaration:

helloWorld();  // prints 'Hello World!' to the console
function helloWorld(){
  console.log('Hello World!');
}

As we already know that function declarations are added to the memory during the compile stage, so we are able to access it in our code before the actual function declaration.

So the lexical environment for the above code will look something like this:

lexicalEnvironment = {
  helloWorld: < func >
}

So when the JavaScript engine encounters a call to helloWorld(), it will look into the lexical environment, finds the function and will be able to execute it.

Hoisting Function Expressions

Only function declarations are hoisted in JavaScript, function expressions are not hoisted. For example: this code won’t work.

helloWorld();  // TypeError: helloWorld is not a function
var helloWorld = function(){
  console.log('Hello World!');
}

As JavaScript only hoist declarations, not initializations (assignments), so the helloWorld will be treated as a variable, not as a function. Because helloWorld is a var variable, so the engine will assign is the undefined value during hoisting.

So this code will work.

var helloWorld = function(){
  console.log('Hello World!');  prints 'Hello World!'
}
helloWorld();

Hoisting var variables:

Let’s look at some examples to understand hoisting in case of var variables.

console.log(a); // outputs 'undefined'  
var a = 3;

We expected 3 but instead got undefined. Why?

Remember JavaScript only hoist declarations, not initializations. That is, during compile time, JavaScript only stores function and variable declarations in the memory, not their assignments (value).

But why **undefined**?

When JavaScript engine finds a var variable declaration during the compile phase, it will add that variable to the lexical environment and initialize it with undefined and later during the execution when it reaches the line where the actual assignment is done in the code, it will assign that value to the variable.

So the initial lexical environment for the above code will look something like this:

lexicalEnvironment = {
  a: undefined
}

That’s why we got undefined instead of 3. And when the engine reaches the line (during execution) where the actual assignment is done, it will update the value of the variable in its lexical environment. So the lexical environment after the assignment will look like this:

lexicalEnvironment = {  
  a: 3  
}

Hoisting let and const variables:

Let’s first take a look at some examples:

console.log(a);  
let a = 3;

Output:

ReferenceError: a is not defined

So are let and const variables not hoisted?

The answer is a bit more complicated than that. All declarations (function, var, let, const and class) are hoisted in JavaScript, while the var declarations are initialized with undefined, but let and const declarations remain uninitialized.

They will only get initialized when their lexical binding (assignment) is evaluated during runtime by the JavaScript engine. This means you can’t access the variable before the engine evaluates its value at the place it was declared in the source code. This is what we call “Temporal Dead Zone”, A time span between variable creation and its initialization where they can’t be accessed.

If the JavaScript engine still can’t find the value of let or const variables at the line where they were declared, it will assign them the value of undefined or return an error (in case of const).

Let’s look at some more example:

let a;  
console.log(a); // outputs undefined  
a = 5;

Here during the compile phase, the JavaScript engine encounters the variable a and stores it in the lexical environment, but because it’s a let variable, the engine does not initialize it with any value. So during the compile phase, the lexical environment will look like this:

lexicalEnvironment = {  
  a: <uninitialized>  
}

Now if we try to access the variable before it is declared, the JavaScript engine will try to fetch the value of the variable from the lexical environment, because the variable is uninitialized, it will throw a reference error.

During the execution, when the engine reaches the line where the variable was declared, it will try to evaluate its binding (value), because the variable has no value associated with it, it will assign it undefined.

So the lexical environment will look like this after execution of the first line:

lexicalEnvironment = {  
  a: undefined  
}

And undefined will be logged to the console and after that 5 will be assigned to it and the lexical environment will be updated to contain the value of a to 5 from undefined.

Note — We can reference the let and const variables in the code (eg. function body ) even before they are declared, as long as that code is not executed before the variable declaration.

For example, This code is perfectly valid.

function foo () {  
  console.log(a);  
}

let a = 20;  
foo();  // This is perfectly valid

But this will generate a reference error.

function foo() {  
 console.log(a); // ReferenceError: a is not defined  
}  
foo(); // This is not valid  
let a = 20;

Hoisting Class Declaration

Just as let and const declarations, classes in JavaScript are also hoisted, and just as let or const declarations, they remain uninitialized until evaluation. So they are also affected by the “Temporal Dead Zone”. For example:

let peter = new Person('Peter', 25); // ReferenceError: Person is not defined  
console.log(peter);

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

So to access the classes, you have to declare them first. For example:

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

let peter = new Person('Peter', 25);   
console.log(peter);  
// Person { name: 'Peter', age: 25 }

So again during the compile phase, the lexical environment for the above code will look like this:

lexicalEnvironment = {  
  Person: <uninitialized>  
}

And when the engine has evaluated the class statement, it will initialize the class with the value.

lexicalEnvironment = {  
  Person: <Person object>  
}

Hoisting Class Expressions

Just as function expressions, class expressions are also not hoisted. For example, this code won’t work.

let peter = new Person('Peter', 25); // ReferenceError: Person is not defined  
console.log(peter);

let Person = class {  
  constructor(name, age) {  
    this.name = name;  
    this.age = age;  
  }  
}

The correct way to do it is like this:

let Person = class {  
  constructor(name, age) {  
    this.name = name;  
    this.age = age;  
  }  
}

let peter = new Person('Peter', 25);   
console.log(peter);  
// Person { name: 'Peter', age: 25 }

Conclusion

So now we know that during hoisting our code is not physically moved by the JavaScript engine. Having a proper understanding of the hoisting mechanism will help you avoid any future bugs and confusion arising due to hoisting. To avoid possible side effects of hoisting like undefined variables or reference error, always try to declare the variables at the top of their respective scopes and also always try to initialize variables when you declare them.

That’s it and if you found this article helpful, please click the like 🙂 button, you can also follow me on Hashnode, Medium and Twitter, and if you have any doubt, feel free to comment! I’d be happy to help :)

If you are or want to be a JavaScript developer, then you must know how the JavaScript programs are executed internally. The understanding of execution context and execution stack is vital in order to understand other JavaScript concepts such as Hoisting, Scope, and Closures.

Properly understanding the concept of execution context and execution stack will make you a much better JavaScript developer.

So without further ado, let’s get started :)

What is an Execution Context?

Simply put, an execution context is an abstract concept of an environment where the Javascript code is evaluated and executed. Whenever any code is run in JavaScript, it’s run inside an execution context.

Types of Execution Context

There are three types of execution context in JavaScript.

• Global Execution Context — This is the default or base execution context. The code that is not inside any function is in the global execution context. It performs two things: it creates a global object which is a window object (in the case of browsers) and sets the value of this to equal to the global object. There can only be one global execution context in a program.
• Functional Execution Context — Every time a function is invoked, a brand new execution context is created for that function. Each function has its own execution context, but it’s created when the function is invoked or called. There can be any number of function execution contexts. Whenever a new execution context is created, it goes through a series of steps in a defined order which I will discuss later in this article.
• Eval Function Execution Context — Code executed inside an eval function also gets its own execution context, but as eval isn’t usually used by JavaScript developers, so I will not discuss it here.

Execution Stack

Execution stack, also known as “calling stack” in other programming languages, is a stack with a LIFO (Last in, First out) structure, which is used to store all the execution context created during the code execution.

When the JavaScript engine first encounters your script, it creates a global execution context and pushes it to the current execution stack. Whenever the engine finds a function invocation, it creates a new execution context for that function and pushes it to the top of the stack.

The engine executes the function whose execution context is at the top of the stack. When this function completes, its execution stack is popped off from the stack, and the control reaches to the context below it in the current stack.

Let’s understand this with a code example below:

let a = 'Hello World!';

function first() {  
  console.log('Inside first function');  
  second();  
  console.log('Again inside first function');  
}

function second() {  
  console.log('Inside second function');  
}

first();  
console.log('Inside Global Execution Context');

When the above code loads in the browser, the JavaScript engine creates a global execution context and pushes it to the current execution stack. When a call to first() is encountered, the JavaScript engines creates a new execution context for that function and pushes it to the top of the current execution stack.

When the second() function is called from within the first() function, the Javascript engine creates a new execution context for that function and pushes it to the top of the current execution stack. When the second() function finishes, its execution context is popped off from the current stack, and the control reaches to the execution context below it, that is the first() function execution context.

When the first() finishes, its execution stack is removed from the stack and control reaches to the global execution context. Once all the code is executed, the JavaScript engine removes the global execution context from the current stack.

How is the Execution Context created?

Up until now, we have seen how the JavaScript engine manages the execution context, Now let’s understand how an execution context is created by the JavaScript engine.

The execution context is created in two phases: 1) Creation Phase and 2) Execution Phase.

The Creation Phase

The execution context is created during the creation phase. Following things happen during the creation phase:

1. LexicalEnvironment component is created.
2. VariableEnvironment component is created.

So the execution context can be conceptually represented as follows:

ExecutionContext = {  
  LexicalEnvironment = <ref. to LexicalEnvironment in memory>,  
  VariableEnvironment = <ref. to VariableEnvironment in  memory>,  
}

Lexical Environment

The official ES6 docs define Lexical Environment as

A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting structure of ECMAScript code. A Lexical Environment consists of an Environment Record and a possibly null reference to an outer Lexical Environment.

Simply put, A lexical environment is a structure that holds identifier-variable mapping. (here identifier refers to the name of variables/functions, and the variable is the reference to actual object [including function object and array object] or primitive value).

For example, consider the following snippet:

var a = 20;  
var b = 40;

function foo() {  
  console.log('bar');  
}

So the lexical environment for the above snippet looks like this:

lexicalEnvironment = {  
  a: 20,  
  b: 40,  
  foo: <ref. to foo function>  
}

Each Lexical Environment has three components:

1. Environment Record
2. Reference to the outer environment,
3. This binding.

Environment Record

The environment record is the place where the variable and function declarations are stored inside the lexical environment.

There are also two types of environment record :

• Declarative environment record — As its name suggests stores variable and function declarations. The lexical environment for function code contains a declarative environment record.
• Object environment record — The lexical environment for global code contains a objective environment record. Apart from variable and function declarations, the object environment record also stores a global binding object (window object in browsers). So for each of binding object’s property (in case of browsers, it contains properties and methods provided by browser to the window object), a new entry is created in the record.

Note — For the function code, the environment record also contains an arguments object that contains the mapping between indexes and arguments passed to the function and the length(number) of the arguments passed into the function. For example, an argument object for the below function looks like this:

function foo(a, b) {  
  var c = a + b;  
}  
foo(2, 3);

// argument object  
Arguments: {0: 2, 1: 3, length: 2},

Reference to the Outer Environment

The reference to the outer environment means it has access to its outer lexical environment. That means that the JavaScript engine can look for variables inside the outer environment if they are not found in the current lexical environment.

This Binding

In this component, the value of this is determined or set.

In the global execution context, the value of this refers to the global object. (in browsers, this refers to the Window Object).

In the function execution context, the value of this depends on how the function is called. If it is called by an object reference, then the value of this is set to that object, otherwise, the value of this is set to the global object or undefined(in strict mode). For example:

const person = {  
  name: 'peter',  
  birthYear: 1994,  
  calcAge: function() {  
    console.log(2018 - this.birthYear);  
  }  
}

person.calcAge();   
// 'this' refers to 'person', because 'calcAge' was called with //'person' object reference

const calculateAge = person.calcAge;  
calculateAge();  
// 'this' refers to the global window object, because no object reference was given

Abstractly, the lexical environment looks like this in pseudocode:

GlobalExectionContext = {
    LexicalEnvironment: {
        EnvironmentRecord: {
            Type: "Object",
            // Identifier bindings go here
        }
        outer: < null > ,
        this: < global object >
    }
}
FunctionExectionContext = {
    LexicalEnvironment: {
        EnvironmentRecord: {
            Type: "Declarative",
            // Identifier bindings go here
        }
        outer: < Global or outer
        function environment reference > ,
        this: < depends on how
        function is called >
    }
}

Variable Environment:

It’s also a Lexical Environment whose EnvironmentRecord holds bindings created by VariableStatements within this execution context.

As written above, the variable environment is also a lexical environment, So it has all the properties and components of a lexical environment as defined above.

In ES6, one difference between LexicalEnvironment component and the VariableEnvironment component is that the former is used to store function declaration and variable (let and const) bindings, while the latter is used to store the variable (var) bindings only.

Execution Phase

In this phase assignments to all those variables are done and the code is finally executed.

Example

Let’s look at some example to understand the above concepts:

let a = 20;  
const b = 30;  
var c;

function multiply(e, f) {  
 var g = 20;  
 return e \* f \* g;  
}

c = multiply(20, 30);

When the above code is executed, the JavaScript engine creates a global execution context to execute the global code. So the global execution context will look something like this during the creation phase:

GlobalExectionContext = {
    LexicalEnvironment: {
        EnvironmentRecord: {
            Type: "Object",
            // Identifier bindings go here  
            a: < uninitialized > ,
            b: < uninitialized > ,
            multiply: < func >
        }
        outer: < null > ,
        ThisBinding: < Global Object >
    },
    VariableEnvironment: {
        EnvironmentRecord: {
            Type: "Object",
            // Identifier bindings go here  
            c: undefined,
        }
        outer: < null > ,
        ThisBinding: < Global Object >
    }
}

During the execution phase, the variable assignments are done. So the global execution context will look something like this during the execution phase.

GlobalExectionContext = {
    LexicalEnvironment: {
        EnvironmentRecord: {
            Type: "Object",
            // Identifier bindings go here  
            a: 20,
            b: 30,
            multiply: < func >
        }
        outer: < null > ,
        ThisBinding: < Global Object >
    },
    VariableEnvironment: {
        EnvironmentRecord: {
            Type: "Object",
            // Identifier bindings go here  
            c: undefined,
        }
        outer: < null > ,
        ThisBinding: < Global Object >
    }
}

When a call to function multiply(20, 30) is encountered, a new function execution context is created to execute the function code. So the function execution context will look something like this during the creation phase:

FunctionExectionContext = {
    LexicalEnvironment: {
        EnvironmentRecord: {
            Type: "Declarative",
            // Identifier bindings go here  
            Arguments: {
                0: 20,
                1: 30,
                length: 2
            },
        },
        outer: < GlobalLexicalEnvironment > ,
        ThisBinding: < Global Object or undefined > ,
    },
    VariableEnvironment: {
        EnvironmentRecord: {
            Type: "Declarative",
            // Identifier bindings go here  
            g: undefined
        },
        outer: < GlobalLexicalEnvironment > ,
        ThisBinding: < Global Object or undefined >
    }
}

After this, the execution context goes through the execution phase that means assignments to the variables inside the function are done. So the function execution context will look something like this during the execution phase:

FunctionExectionContext = {
    LexicalEnvironment: {
        EnvironmentRecord: {
            Type: "Declarative",
            // Identifier bindings go here  
            Arguments: {
                0: 20,
                1: 30,
                length: 2
            },
        },
        outer: < GlobalLexicalEnvironment > ,
        ThisBinding: < Global Object or undefined > ,
    },
    VariableEnvironment: {
        EnvironmentRecord: {
            Type: "Declarative",
            // Identifier bindings go here  
            g: 20
        },
        outer: < GlobalLexicalEnvironment > ,
        ThisBinding: < Global Object or undefined >
    }
}

After the function completes, the returned value is stored inside c. So the global lexical environment is updated. After that, the global code completes and the program finishes.

Note — As you might have noticed that the let and const defined variables do not have any value associated with them during the creation phase, but var defined variables are set to undefined .

This is because, during the creation phase, the code is scanned for variable and function declarations, while the function declaration is stored in its entirety in the environment, the variables are initially set to undefined (in case of var) or remain uninitialized (in case of let and const).

This is the reason why you can access var defined variables before they are declared (though undefined) but get a reference error when accessing let and const variables before they are declared.

This is, what we call hoisting.

Note — During the execution phase, if the JavaScript engine couldn’t find the value of let variable at the actual place it was declared in the source code, then it will assign it the value of undefined.

Conclusion

So we have discussed how JavaScript programs are executed internally. While it’s not necessary that you learn all these concepts to be an awesome JavaScript developer, having a decent understanding of the above concepts will help you to understand other concepts such as Hoisting, Scope, and Closures more easily and deeply.

That’s it and if you found this article helpful, please click the like 🙂 button, you can also follow me on Hashnode, Medium and Twitter, and if you have any doubt, feel free to comment! I’d be happy to help :)

While CSS is getting more powerful day by day, it still lacks certain features (such as code reuse) that make it harder to maintain when the projects get bigger and more complex.

There are many CSS methodologies (such as OOCSS, and SMACSS) that help us write more maintainable CSS code, but these methodologies alone aren’t enough to solve the problem of maintaining large CSS codebases.

That’s where Sass comes into play. Sass provides us with features and tools that regular CSS doesn’t have, using Sass we can write more readable, maintainable, and reusable CSS code.

So in this article, I will dive into what Sass is, how to compile Sass code into regular CSS, and discuss features that make it so powerful.

So without further ado, let’s get started :)

What is Sass?

If you know CSS or if you are learning CSS, then you must have heard about Sass. Sass is a CSS preprocessor, a superset of CSS that adds features that aren’t available in regular CSS.

A CSS preprocessor is a language that extends CSS, adds features to CSS, and gets compiled into regular CSS. A CSS preprocessor helps developers to write cleaner and easier-to-understand CSS code.

Some well known CSS preprocessors are: SASS, LESS, and Stylus.

Sass or SCSS?

There are two syntaxes available for Sass. 1) SCSS and 2) Sass

1. SCSS known as Sassy CSS is a newer and most-used version of Sass. It has a similar syntax to CSS because it’s a language extension or a superset of CSS. So a valid CSS is also a valid SCSS. Its file extension is .scss.
2. Sass is an older syntax of Sass. It uses indentation rather than brackets. Its file extension is .sass.

In this article, I will use the SCSS syntax of Sass.

Installing Sass

Browsers do not understand Sass, for browsers to understand the Sass code we write, we have to convert it into regular CSS code. We do this by running the Sass compiler which converts our Sass code to into regular CSS code.

Getting Started:

Before starting, you must have npm installed on your computer, which comes bundled with Node.js, you can install it from here.

Folder Structure:

Let’s first create the below folder in which we will install Sass.

You can create the above directories with these commands.

mkdir sass-demo  
cd sass-demo  
mkdir -p sass css

Initialize the Project Directory:

All projects that use the node package manager(npm) must be initialized. To initialize the project enter the below command in a terminal. This will create a package.json file.

npm init -y

Installing sass

The sass package is the JavaScript implementation of the sass. This command will install sass as a dependency of our project.

npm install sass

Compiling Sass Code to CSS

Create an npm script to compile the Sass code into CSS code. Add this script inside the script section of the package.json file.

"compile-sass": "sass sass/main.scss css/style.css"

Here main.scss is our main Sass file, and style.css is the compiled CSS file.

We can also add a --watch flag. The watch flag tells the Sass compiler to watch your source files for changes, and re-compile CSS each time you save your Sass files. For example:

"compile-sass": "sass sass/main.scss css/style.css --watch"

Finally, we can compile our Sass code into CSS by running the below command in the terminal.

npm run compile-sass

Sass Features

Now that we know what Sass is, and how to install Sass, let’s dive into various features of Sass that make it so powerful.

1# Variables

Variables are one of the most useful features of Sass. Variables allow us to define certain values and reuse them across the code. Variables in Sass are similar to variables in JavaScript. In Sass, variables always start with a $.

For example:

$variable-name: variable-value;

Let’s take a look at the below HTML:

<div class="heading">  
  <h1 class="heading-primary">This is a primary heading</h1>  
  <h2 class="heading-secondary">This is a secondary heading</h2>  
</div>

Let’s define two variables for primary and secondary colors:

$color-primary: #55c57a;  
$color-secondary: #7ed56f;

Let’s style the above headings in Sass:

.heading-primary {  
  color: $color-primary;  
  text-align: center;  
  margin-top: 10px;  
}

.heading-secondary {  
  color: $color-secondary;  
  text-align: center;  
  margin-top: 15px;  
}

The above code will be compiled into below CSS code:

.heading-primary {  
  color: #55c57a;  
  text-align: center;  
  margin-top: 10px;  
}

.heading-secondary {  
  color: #7ed56f;  
  text-align: center;  
  margin-top: 15px;  
}

After compiling, the variables will be replaced by their actual values in CSS.

2# Nesting

Nesting is another useful feature of Sass. CSS doesn’t support selector nesting. Using nesting, we can nest child selectors inside the parent selector.

For example, consider the below HTML:

<nav class="navigation">  
  <ul>  
    <li>Home</li>  
    <li>About</li>  
    <li>Contact</li>  
  </ul>  
</nav>

Without Sass, we’d have to write the following CSS code:

.navigation {  
  background-color: yellow;  
  padding: 20px;  
}

.navigation ul {  
  list-style: none;  
}

.navigation li {  
  text-align: center;  
  margin-top: 20px;  
}

Notice that we have to repeat the navigation class name every time we want to style its children. With Sass, we can write cleaner and less repetitive code. For example:

.navigation {  
  background-color: yellow;  
  padding: 20px;

  ul {  
    list-style: none;  
  }

  li {  
    text-align: center;  
    margin-top: 20px;  
  }  
}

3# Mixins

Mixins are yet another powerful feature of Sass. Using mixins, we can reduce code redundancy and increase code reuse. A mixin is a reusable piece of code that is similar to functions. For example, we can define a mixin as follows:

@mixin mixin_name() {  
  /* code */  
}

Let’s take a look at the below HTML:

<div class="box">  
  <div>  
  </div>  
</div>

Sass code:

.box {  
  background-color: red;  
  width: 100%;  
  height: 100vh;  
  position: relative;  

  div {  
    width: 200px;  
    height: 200px;  
    background-color: blue;  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
  }  
}

Here we are positioning the inner div at the center of the outer div. We can place the code inside a mixin called absCenterPosition. For example:

@mixin absCenterPosition() {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
}

We can include the above mixin in our code by using the @include directive, for example:

.box {  
  background-color: red;  
  width: 100%;  
  height: 100vh;  
  position: relative;  

  div {  
    width: 200px;  
    height: 200px;  
    background-color: blue;  
    @include absCenterPosition;  
  }  
}

We can also pass arguments to the mixins. For example:

@mixin box-shadow($x, $y, $blur, $spread) {  
  -webkit-box-shadow: $x $y $blur $spread;  
  -moz-box-shadow: $x $y $blur $spread;  
  -ms-box-shadow: $x $y $blur $spread;  
  box-shadow: $x $y $blur $spread;  
}

We can include the mixin as:

.box {  
  background-color: red;  
  width: 100%;  
  height: 100vh;  
  position: relative;  

  div {  
    width: 200px;  
    height: 200px;  
    background-color: blue;  
    @include absCenterPosition;  
    @include box-shadow(0, 5px, 5px, rgba(0, 0, 0, 0.7));  
  }  
}