Forem: Krishna Nigalye

React Form Optimization: Populating dropdowns using APIs 🚀

Krishna Nigalye — Mon, 11 Dec 2023 05:31:31 +0000

This blog was originally published on medium. Link to the article attached here.

Managing forms in React is a familiar task for developers. In this tutorial, I won’t be covering the basics of form creation. Instead, I’ll guide you through a specific scenario: handling multiple select fields (dropdowns) with values populated from APIs. Throughout, I’ll emphasize best practices to ensure your code is both clean and maintainable.

Setting Up the Project

Before we start, make sure you have a React project initialized. You can use create-react-app or any other method of your choice.

Once your project is ready, create a new component for your form called ErrorMessage.js. This sample form is going to capture following fields to report an error.

Name — Name of the error — text field
Error Code — Error codes populated using API— Select field
Service Team — Team Names populated using API— Select field
Description — Description of the error — text field

As mentioned above, we have two Select fields called Error Code and Service Team. We need to populate these two Select fields using responses from APIs.

Note: This tutorial focuses exclusively on the UI aspect, and API creation is not within its scope. The explanation will be limited to the user interface implementation. Additionally, for simplicity, we won’t be incorporating advanced form-handling libraries such as React Hook Form or Formik. However, feel free to explore and integrate these libraries for more sophisticated form management.

This is how the code for error message form looks (ErrorMessage1.jsx from repository).

import { useState, useEffect } from "react";
import axios from "axios";
import { API_URL } from "../constants";

const ErrorMessage = () => {
  const [formData, setFormData] = useState({
    name: "",
    serviceTeam: "",
    code: "",
    description: "\"\","
  });

  const [codeOptions, setCodeOptions] = useState([]);
  const [serviceTeams, setServiceTeams] = useState([]);

  const fetchCodeOptions = async () => {
    try {
      const response = await axios.get(API_URL.CODES);
      setCodeOptions(response.data);
    } catch (error) {
      console.error("Error fetching code options:", error);
    }
  };

  const fetchServiceTeams = async () => {
    try {
      const response = await axios.get(API_URL.TEAMS);
      setServiceTeams(response.data);
    } catch (error) {
      console.error("Error fetching type teams:", error);
    }
  };

  useEffect(() => {
    fetchCodeOptions();
    fetchServiceTeams();
  }, []);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({ ...prevData, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Add your form submission logic here
    console.log("Form submitted:", formData);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Error Name:
          <input type="text" name="name" value={formData.name} onChange={handleChange} />
        </label>
        <label>
          Service Team:
          <select name="type" value={formData.serviceTeam} onChange={handleChange}>
            <option value="">Service Team</option>
            {serviceTeams.length > 0
              ? serviceTeams.map((team) => (
                  <option key={team.id} value={team.name}>
                    {team.name}
                  </option>
                ))
              : "loading teams.."}
          </select>
        </label>
        <label>
          Code:
          <select name="code" value={formData.code} onChange={handleChange}>
            <option value="">Error Code</option>
            {codeOptions.length > 0
              ? codeOptions.map((code) => (
                  <option key={code.id} value={code.value}>
                    {code.value}
                  </option>
                ))
              : "loading codes.."}
          </select>
        </label>
        <label>
          Description:
          <textarea name="description" value={formData.description} onChange={handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default ErrorMessage;

There is nothing wrong with this code. It will work as expected but there is some scope for making it better.

Since our main focus is on improving the way we call APIs, let’s concentrate on useEffect code block for now. This is how the useEffect is defined.

useEffect(() => {
  fetchCodeOptions();
  fetchServiceTeams();
}, []);

To make sure, both the APIs are called and form is not visible until select fields are populated, we can do the following.

Define a new state to track if API responses are received. Let’s call it formVisible.
Also we can use Promise.all for calling APIs as shown below.

const [formVisible, setFormVisible] = useState(false);

useEffect(() => {
  Promise.all([fetchCodeOptions(), fetchServiceTeams()])
    .then(() => setFormVisible(true))
    .catch((error) => console.error("Error fetching external APIs:", error));
}, []);

Now, I can use this state to toggle visibility of this form. JSX part of the code will be changed as shown below.

const ErrorMessage = () => {
  // other states
  const [formVisible, setFormVisible] = useState(false);

  const fetchCodeOptions = async () => { /* logic goes here */ };
  const fetchServiceTeams = async () => { /* logic goes here */ };

  // rest of the functions

  useEffect(() => {
    Promise.all([fetchCodeOptions(), fetchServiceTeams()])
      .then(() => setFormVisible(true))
      .catch((error) => console.error("Error fetching external APIs:", error));
  }, []);

  return (
    <div>
      {formVisible ? (
        <form onSubmit={handleSubmit}>
          <label>
            Error Name:
            <input type="text" name="name" value={formData.name} onChange={handleChange} />
          </label>
          <label>
            Service Team:
            <select name="type" value={formData.serviceTeam} onChange={handleChange}>
              <option value="">Service Team</option>
              {serviceTeams.map((team) => (
                <option key={team.id} value={team.name}>
                  {team.name}
                </option>
              ))}
            </select>
          </label>
          <label>
            Code:
            <select name="code" value={formData.code} onChange={handleChange}>
              <option value="">Error Code</option>
              {codeOptions.map((code) => (
                <option key={code.id} value={code.value}>
                  {code.value}
                </option>
              ))}
            </select>
          </label>
          <label>
            Description:
            <textarea name="description" value={formData.description} onChange={handleChange} />
          </label>
          <button type="submit">Submit</button>
        </form>
      ) : (
        <p>Loading form...</p>
      )}
    </div>
  );
};

This will make sure that the form is not visible until all pre-required APIs are successful. (refer ErrorMessage2.jsx from the repository)

We can further improve API handling part as shown below. (refer ErrorMessage3.jsx from the repository)

const fetchData = async () => {
  try {
    const [codeResponse, teamResponse] = await Promise.all([
      axios.get(API_URL.CODES), 
      axios.get(API_URL.TEAMS)
    ]);

    setCodeOptions(codeResponse.data);
    setServiceTeams(teamResponse.data);
    setFormVisible(true);
  } catch (error) {
    console.error("Error fetching data from APIs:", error);
  }
};

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

Want to improve further? Let’s use an Immediately Invoked Function Expression (IIFE) to wrap the asynchronous logic. (refer ErrorMessage4.jsx from the repository)

useEffect(() => {
  (async () => {
    try {
      const [codeResponse, teamResponse] = await Promise.all([
        axios.get(API_URL.CODES), 
        axios.get(API_URL.TEAMS)
      ]);

      setCodeOptions(codeResponse.data);
      setServiceTeams(teamResponse.data);
      setFormVisible(true);
    } catch (error) {
      console.error("Error fetching data from APIs:", error);
    }
  })();
}, []);

This way, you can keep the asynchronous logic separate without defining an additional function outside of the useEffect block.

Handling Form Submissions

The handleChange function updates the form data as the user interacts with the form. The handleSubmit function is called when the form is submitted. In a real-world scenario, you would implement logic here to send the form data to a server or perform any necessary actions.

Other enhancements can include using loading spinners, having a common component for Select boxes etc.

Link to the code repository

Conclusion

In the course of this tutorial, I’ve employed an incremental approach to refactoring the code. While there is room for additional enhancements within the form code, for the purposes of this tutorial, I have concentrated specifically on refining the Select fields. These fields are dynamically populated through APIs in React applications.

I hope that this explanation will be helpful to you! Let me know in comments.

Micro-Frontends: Unleashing the Avengers' Newest Superpower!

Krishna Nigalye — Fri, 04 Aug 2023 03:16:15 +0000

Originally published on my medium page

Hey there, folks! Get ready for a super cool tech showdown!

In this story, our web developers as superheroes, just like the Avengers. They've got a new trick up their sleeves called Micro-Frontends. It's like breaking big stuff into smaller, easier-to-handle pieces. Think of it like the Avengers splitting up to handle different tasks separately. Our developers can do the same with the front-end of websites!

It's similar to using special ways to break down old, outdated web elements.

And the best part? Each part can be worked on, put out there, and made bigger all by itself. It's like each hero can do their thing without waiting for the others.

So, let's watch these web-building Avengers go wild with their Micro-Frontends powers! 🦸‍♂️🚀

What are Micro-Frontends?

In the age of monoliths, developers faced countless challenges. As applications grew in complexity, making even the smallest update felt like an epic battle. Teams struggled to collaborate. Deploying changes felt very risky, like trying to walk on a thin rope over a sea full of sharks.

But here comes the solution - Micro-Frontends!

Micro-Frontends, in simple terms, refers to a modern architectural approach for building web applications by breaking down the frontend into smaller, independent, and self-contained modules.
The main goal of Micro-Frontends is to improve the scalability, maintainability, and flexibility of large and complex web applications.

In this article, we will delve into the concept of Micro-Frontends. We will explore its key characteristics and illustrate its implementation through an example of an e-commerce site. The article also sheds light on three types of integrations for Micro Frontends.

So..

Let's understand with an Example

Let's consider a hypothetical example of an e-commerce website that uses a micro-frontend architecture. In this example, the e-commerce website is composed of four main micro-frontends:

Product Catalog: This micro-frontend is responsible for displaying the list of products available on the site. It includes features like product search, filtering, and sorting.
Shopping Cart: This micro-frontend handles the user's shopping cart functionality. It allows users to add products to their cart, update quantities, and proceed to checkout.
User Account: This micro-frontend deals with user authentication and account-related features. Users can log in, view their orders, and update their account information.

Each of these micro-frontends is developed as an independent project with its own codebase, build, and deployment process. They can be maintained by separate teams, allowing for parallel development and faster iterations.

Key Characteristics of Micro-Frontends

Decentralization: Since the e-commerce application functionality is broken into three independent units, each micro-frontend is typically owned and maintained by a separate team, which fosters decentralization and allows teams to work independently.
Loose Coupling: The loose coupling between these micro-frontends enables different teams to add new features or enhancements or bug/hot fixes to their micro-frontend without directly affecting other parts of the application.
Parallel Development: All the teams can work simultaneously on different features or modules, speeding up the development process.
Autonomous Deployment: These teams can deploy new features, updates or bug fixes without affecting other parts of the application.
Scalability: These micro-frontends can be scaled independently based on the specific requirements of each module, optimizing resource usage and performance.
Technology Diversity: Each team can the use of different technologies and frameworks for each of their module.
Improved Codebase Organization: In large codebases, it can be challenging to navigate and maintain code. Micro-frontends can improve codebase organization by breaking down the application into smaller, more manageable parts, making it easier to understand and maintain the code.
Improved QA Process: Micro-frontends can facilitate more focused and efficient testing, as teams can isolate and test individual modules independently.

Container

To orchestrate the communication and rendering of these micro-frontends, there is a central shell application, which acts as the Container for all these micro-frontends.
It provides the overall layout and navigation for the website.

Integration

Integration in the context of micro-frontends refers to the process of combining individual micro-frontend modules into a cohesive and functional web application.
As Micro-Frontends are designed as independent and autonomous units, integration becomes a crucial step to assemble these modules into a single user interface that provides a seamless and unified experience to the end-users.

Types of Integrations in Micro-Frontends

In Micro-Frontend architectures, there are three major types of integration to combine the individual micro-frontends into a cohesive web application.

1. Build-Time Integration

Build-time integration involves combining the micro-frontends during the build process before deploying the application.
In this approach, the various micro-frontends are built separately, and then they are bundled together into a single application during the build step.
In the context of our e-commerce website, in Build-time integration, team responsible for developing Product Catalog can publish it as an NPM package. Then the Container team will install/update the Product Catalog package and builds their app. After completing the build, the resulting bundle is then deployed as a complete e-commerce website.
Pros: Easy to set and understand
Cons: Container App has to be deployed every time one of the micro-frontends is updated.

2. Run-time Integration

Run-time integration (sometimes referred as Client-Side Integration) involves combining the micro-frontends on the client-side, usually within a Container.
The Container is responsible for loading and rendering the micro-frontends.
The Micro-Frontends can be loaded asynchronously at runtime, allowing for a more dynamic and flexible integration.
In the context of our e-commerce website, in Run-time Integration, the team responsible for developing Product Catalog can build their project and deploy the bundle as a static resource at https://my-web-app.com/productlist.js. Assuming the Container team has included the path of this file path into their code, when user navigates to https://my-web-app.com, container app fetches this resource at run-time whenever required and executes it.
In simple terms, the corresponding micro-frontends are dynamically loaded as and when needed.
Pros: Individual micro-frontends can be deployed independently at any point of time. Re-deployment of Container App is not required.
Cons: Setup can be complicated.

3. Server-Side Integration

Server-side integration involves combining the micro-frontends on the server-side before delivering the final HTML to the client.
In this approach, the server takes care of assembling the various micro-frontends into a complete HTML page, which is then sent to the client for rendering.
In the context of our e-commerce website, in Server-side integration, the server-side code (e.g. using server-side rendering or server templates) fetches data from the respective micro-frontends (Product Catalog, Shopping Cart, User Account) and generates a complete HTML page that includes the necessary components from each micro-frontend. The assembled HTML page is then sent to the client, where it can be further enhanced with client-side interactions.
Pros: Good for SEO; Initial load time is less
Cons: Not be suitable for highly dynamic applications or when the server load and tight coupling concerns need to be minimized

In summary, Micro-Frontends can be integrated through Run-time , Server-side, or build-time integration. Each integration type has its own advantages and disadvantages, and the choice depends on factors such as project requirements, tech stack, and the team's mindset.

Conclusion
In conclusion, Micro-Frontends offer a compelling solution for building scalable and maintainable web applications. Through the example of an e-commerce site, we witnessed how this approach can be helpful in the frontend development, unlocking agility and fostering continuous innovation.

By understanding and implementing the various integration options, developers can fully leverage the potential of Micro-Frontends to deliver seamless user experiences and stay ahead in today's dynamic digital landscape.

How React really work?

Krishna Nigalye — Wed, 05 May 2021 05:53:23 +0000

When it comes to learning React, you will come across at least one article or a talk on YouTube by Kent C Dodds. I am a huge fan of this guy. His blogs and videos are simply awesome. I will highly recommend you to go and read his blogs and listen to his talks on YouTube. I got an inspiration to write this article by one of his talks on YouTube.

You will find a lot of tutorials online about 'Writing your first program in React' or describing various features offered by React but you will hardly find any posts or videos that will explain you what happens behind the scenes.

Background

To understand how React works behind the scenes, it’s really important to have basic understanding of how to work with DOM elements using JavaScript. The program below shows how to display 'Hello World' text in the webpage.

React offers component based approach which means you can divide your page into components. In order to write react components we need two JS files.

React: which offers functions for creating react elements (similar to createElement())
ReactDOM: which offers functions for rendering react elements to the DOM (similar to append())

Once included, these JS files will give you access to two global objects namely React and ReactDOM. In order to create React elements, React object provides a function named createElement. This function takes following arguments.
In above function definition, the parameter children can be an array which can have child elements created using the same createElement command. Now, we have React elements but there has to be a way to render these elements to the DOM and ReactDOM does that for you. It provides a method called render that helps you to render elements into the DOM.

Now, let's say we want to create a DOM structure like this.
React code for this will be as shown below.
In real life projects, it is not possible to write code using the syntax mentioned above. This is where JSX comes into picture.

What is JSX?

JSX is a syntactic sugar on top of raw React APIs. It looks a lot like HTML but it is not. Your browser does not understand JSX so it needs something which will compile JSX into browser readable format. Most of the modern day apps use babel for this. In the image shown below, on left you can see the JSX syntax for displaying Hello World and on the right you will see how babel compiles the code using React library functions.
If you’d like to see how JSX gets compiled to JavaScript, check out the online babel REPL here.

To display 'Hello World' using JSX, you have to include babel script in your code. Now your code will look like this.
So, basically we tell babel to compile our JSX code on the fly. You can see the compiled version in the browser as shown below.
If you have object of props, you can pass it to element tag as shown below.

Final Thoughts

So as far as the basics are concerned, this is all what you need. Frankly speaking this is not at all required to get you started. You can start React without this but it's always good to learn about the basics. It gives you a kind of confidence to learn more about the language otherwise you keep on having that feeling of missing the first step. And I strongly believe whenever you are learning something new, it should always start with your first step. Good luck :)

Thank you for reading this article. Let me know your thoughts in comments section.

References:

I would really recommend you to follow this reference material for more information.

Excellent talk by Kent C Dodds https://www.youtube.com/watch?v=SAIdyBFHfVU
Introducing JSX https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx

Material-UI Select with React Hook Form

Krishna Nigalye — Fri, 26 Mar 2021 05:55:49 +0000

My experience with React hook Form (RHF) is amazing so far. When you are using external css libraries with react hook form, you have to make few adjustments for example in place of ref, you have to use inputRef to pass the register method of RHF.

In this post, I would like to share a solution to the problem of adding validation to Select component of Material-UI* with RHF. Implementing select box is not hard. You can do that with TextField and also with Select component of Material-UI but adding validation can give you a headache.

This is solution I implemented for adding select box with validations.

<Controller
  as={
    <Select>
     {options.map((option, index) => (
      <MenuItem key={index} value={option}>
        {option}
      </MenuItem>
     ))}
    </Select>
    }
  name={options_name}
  control={control}
  defaultValue=""
  rules={{ required: true }
/>

So validation worked for me by adding the following attribute to the controller.

rules={{ required: true }}

I hope this will be helpful.

What is a PWA?

Krishna Nigalye — Mon, 22 Mar 2021 05:57:48 +0000

In today’s world we are not new to mobile websites. Mobile web has improved tremendously in the last few years. The majority of today's websites are device friendly or I should say responsive because of frameworks like Bootstrap, Material or Foundation.

A Progressive Web App is also a mobile website but the one which is progressive in nature or in simple words with advanced capabilities. I know Progressive Web App is a long name but trust me, it’s not just three fancy words put together. Every word has some meaning. For the sake of this article, I am going to address it by its initials i.e. PWA. Before jumping to what PWA is and what are its pros and cons, we have to see why we may need to make our website a PWA so lets begin.

Mobile Apps vs Native Apps

The reasons why most of the users opt for a native app are the following.

Push notifications: User gets notified about the updates through notifications so it improves the user engagement with the app.
Icon on Home screen: It is always available at your fingertips. You can simply tap on the app icon and use it whenever you want.
Access to device features: These apps have access to native device features like camera, geolocation etc.
Offline support: Now a days almost all the apps work offline. If not whole, at least some portion of the app works offline.

On the other hand, there are mobile websites which are simply a mobile version of a normal desktop website. The web has a wider reach. You can search something on Google and boom, you get the results. You can click on it and you get to the website so no need to download any app from an app store or play store.

So, it's not important that which one is better. The important thing is do we need something which offers best of both the worlds?

Do we need an alternative?

One of the main reasons why companies feel a need to have a mobile app is, it offers a great deal of user engagement. If users are regularly using your app then there are possibilities that they may recommend your app to other users, and may be they will be interested in exploring paid features(if any) of the app.

Native apps may have an upper hand but even native apps can have some downsides.

From the customer point of view, if I am looking for a ‘To do/Reminder’ app I may see number of apps. Each one will have their pros and cons so it may become difficult to find an app which is suitable for the user needs. Also, some of the apps may consume some extra space on the phone which can make your device really slow.
From a company’s point of view, if I want to build an app targeting different platforms, I will need developers who know different languages and technologies like Swift or Objective C(iOS devices), Java(Android devices), C#(Windows) etc.

In today’s world developers and businesses looks for faster development and cost-effective solutions and that’s where PWA stands as a good option.

Let’s take a look at What is a PWA and what it brings to the table.

What is a Progressive Web App?

PWA is a website made to resemble an app that is installed on your smartphone, laptop, tablet, or desktop
It is built from the web technologies we all know like HTML, CSS, and JavaScript. Some of the frameworks have support for PWA too.

The features offered by a PWA are supported by most of the modern-day browsers. Some of them are

Push Notifications
Camera Access
Sharing Content
Location Services
Background Sync
Offline support and many more...

Even you can add a PWA to your home screen so it gives you a native app experience. Also PWAs are accessed through the web, they don’t require a download from the app store. Well, now a days Google does offer you a support for that, but if PWA is always a good option if you want to save some bucks.

In today’s fast paced world, when we develop a website, there are mainly three things we look for.

Reliable: It should load fast and provide offline functionality (at least for some part).
Fast: It should respond quickly to user actions.
Engaging: User should get a feeling of operating on a mobile app.

Well, you find all these things in a PWA. With a couple of additions, you can turn almost any website into a PWA. This means that you can build a PWA rather quickly, in regards to a native app that’s pretty difficult to develop.

According to studies, PWAs are simpler and faster than traditional mobile apps and websites. They can be shared through a URL, and most importantly, since they are not targeting any particular platform, they are cost effective and takes less development time.

Many sites you find online are actually a progressive web app. Here are some examples.

Let’s take an example of Pinterest. After they launched their website as a PWA, they observed

40% increase in user visits and 60% increase in user engagement
44% increase in revenues
Data storage comparison: The Pinterest PWA requires approx. 400 KB of data storage, which is much less than the native Android (19.8 MB) and iOS (161.1 MB) apps

Also after Twitter launched its Lite version, they observed

65% increase in pages per session
75% increase in Tweets sent
20% lower bounce rate
Data storage comparison: At 500 KB, Twitter Lite is much smaller than the corresponding Android app

Benefits of Progressive Web Apps

Easy to install
Universal Support
Works offline
Easily discoverable on web
Faster development targeting multiple platforms so cost effective
Native App experience to the end user

The companies which feel the need of PWA use the most recent web technologies which aims at delivering the most amazing web experience to the user. By boosting the performance, accessibility, and user engagement, progressive web app developers ensure that these apps are fast, engaging, and reliable.

Drawbacks of using PWA

Searching the App in the app store can be difficult. This can be a problem for some users. You cannot just go to the app store and search for an app.
There are some limitations on using the operating system of a smartphone. PWAs get deeper and deeper access to the operating system of a smartphone, but a native app can go deeper still. Plus, there are limits to what a PWA can do. For instance, PWAs are not the best choice when you want to build high-performance games.
Different PWAs cannot share resources or data among themselves because they are highly isolated.

Now we know the good side and a bad side of turning your website into a PWA but there is still an important question which needs to be answered.

Does my audience need this?

From the business point of view, you have to know your target audience. And you have to find out whether your business needs a PWA or not.

If you are in doubt, ask yourself these questions, - What do I want this technology to do?

Who are my end users?
Will they have a good data connection and solid device hardware?
What is the nature of content my PWA is going to offer?
And will this app help them do their job better?

Final Thoughts

There are some brownie points and there are some caveats, of course. While browsers have been quick to adopt the technology for this, there are still some limitations. IOS is supporting PWAs now, but there are still some limitations, so you may or may not get the same exact experience on all iOS devices.

So to conclude, PWAs are awesome and implementing them doesn’t have to be all that hard. But just because it’s easy doesn’t mean you have to do it. But if you do implement it, it's sure going to give your users a solid native app like experience.

Thank you for reading this article. Let me know your thoughts in the comments section. In the next article, I will focus more on the technical side of a PWA and what makes them so progressive so, stay tuned.

Reference Material

Awesome articles by Oleg Romanyuk https://www.freecodecamp.org/news/practical-tips-on-progressive-web-app-development/ https://keenethics.com/blog/progressive-web-apps-vs-native-which-to-choose-and-when
Awesome explanation by Maximilian Schwarzmüller(Academind) https://www.youtube.com/watch?v=dap6yIe1uK4

How JavaScript really works?

Krishna Nigalye — Mon, 15 Mar 2021 16:03:26 +0000

Heard of JavaScript but, don’t know the basics? Have no idea about what happens behind the scenes? Having troubles in cracking the interviews? Don’t worry. This post will get you started with fundamental concepts of JavaScript. These concepts may or mayn’t be used in your day to day activities, but if you are curious and want to dig deep into the world of JavaScript then I am sure that you will find this stuff really interesting. This post will cover one of the most basic topics of JS — Execution Context. So without further ado, lets get started.

Have you heard about the ‘Execution Context’?

Execution Context is one of the most basic concepts in JS. Let me put it this way.

Everything in JS happens inside the Execution Context.

Let us understand this with the help of an example. The code shown below finds square of the given number.

When we run a JS program, an Execution context is created. There are two phases involved in this process. First phase is called the Memory Creation phase and the second phase is called the Code Execution phase.

In the Memory Creation phase, JS parses the program and looks for variables and function definitions. In case of variables a special keyword called undefined is assigned and in case of functions, JS stores copy of the whole function definition. (check out the diagram).

Note: undefined is not a value, its a special keyword used in JS to indicate that a variable is not defined or assigned any value.

The second phase is the Code Execution phase. In this phase, JS starts from the beginning and goes in synchronous manner (one line at a time).

Note: This can be one of your first interview questions. ‘ Is JavaScript is a synchronous language or an asynchronous language’. I think you know the answer now.

At line 1, ‘n’ has a value set to 10 so JS removes the keyword undefined and sets the value to 10. Now the control goes to the next code block. Since this is a function definition, there is no code execution happening here so JS skips the function definition and moves control to line number 8. As soon as JS encounters a function invocation [ square(5) ], it creates a new Execution Context as shown below.

Now the whole process of Execution Context repeats for that function call. Lets see how the execution of the function block happens.

In the Memory Creation phase, we will have two variables, ‘number’ which is your function parameter and ‘ans’ which is the local variable. Both will have value set to ‘undefined’. In the second phase of this current Execution Context, JS starts from the first line of this function declaration. Since we are passing 5 as an argument in the function call, 5 is assigned as the value to the variable number. Now the control goes to the next line.

On the next line, JS executes [ number * number ] part of the line and the result of this operation (which is 25) is stored in the variable ‘ans’. Now the next line has a keyword ‘return’. As soon as JS encounters ‘return’ keyword, it moves control back to the parent Execution Context. Since we are returning the value of ‘ans’, the value 25 is returned and stored in the variable ‘squareOf5’. Now remember this.

When the control moves back to the place where the function call was made, the newly created Execution Context is deleted.

Check out the diagram below.

Now the control goes to the next line which is again a function call and whole process of Execution Context repeats again.

How JS keeps track of these Execution Contexts?

This happens through something called as a Call Stack or Execution Stack. It’s like a regular stack but mainly used for keeping track of Execution Contexts.

When the JS engine first encounters the script, it creates a Global Execution Context (GEC) and is pushed on the Call Stack. During the code execution part of GEC, whenever JS engine encounters a function call, it creates a new Execution Context and pushes it to the Call Stack.

The engine executes the function whose execution context is at the top of the stack. When this function is complete, its execution stack is popped off from the stack, and the process continues for the rest of the script.

Final Thoughts

I hope now you have got a good understanding of Execution Context now. If I have to explain the importance of Execution Context in simple language, I can say that Execution Context is the heart of JS.

Let me also mention that I have not gone into too much of depth but there are a lot of concepts which can be covered.

Thank you for reading this article. Let me know your thoughts in comments section.

References:

How JavaScript Code is executed? & Call Stack by Akshay Saini https://www.youtube.com/watch?v=iLWTnMzWtj4
An Article by Sukhjinder Arora
https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0