DEV Community: Nihar Raote

How to create a simple PostgreSQL database with Expressjs?

Nihar Raote — Mon, 10 Jul 2023 17:10:03 +0000

PostgreSQL is a powerful database with features like multi-version concurrency control, a customizable storage interface for tables, a robust access-control system, support for full-text search among many others. It can be used with a variety of back-end languages like Nodejs, Rust, Python, Java, etc.

It is not difficult to setup a PostgreSQL database with a framework like Expressjs. This is a simple guide on creating a set of CRUD APIs. As long as you know the basics of Node and Express, you can follow along. Some experience with SQL databases (especially PostgreSQL) will help you understand this guide much better.

Creating an Express server

I will be creating a basic Express server:

A PostgreSQL table

We have our express server. Let's create a table in PostgreSQL. I will log in to the default database with my role and create a new database for our table. There will be a link at the end of this article about creating roles in PostgreSQL.

Here, with -d we specify a database. postgres is the default one. And -U specifies our role name. My role's name is personal. I created a database named userAPI and switched to it.

We have an empty users table in the userAPI database. We need to access this database from Express.

Connecting to the database

To communicate with our PostgreSQL database and table, we will need a package. The package we will be using is called node-postgres.

Let's use this package to start a connection with our database.

We have put the required configuration in a separate file. A new pool of connections is created with the following properties:

user - This is the user account/role we created that can access the userAPI database.
host - Since we are hosting Postgres on our own machine, localhost would be used. If you are connecting to a remote PostgreSQL database, then use the remote machine's address. For eg - http://86.152.120.12.
database - This is the database we would like to access.
password - The corresponding password for the user account/role.
port - By default the port is 5432. If you have configured a different port or are connecting to your remote machine, use the appropriate port number.

We have our Express server, a PostgreSQL database, an empty table, and the server can access the database. Let's create some APIs.

Simple CRUD

We will perform simple CRUD operations on our database - creating a new user, reading data about a user, updating a user's data, and deleting a user.

We will keep them in a separate file as well.

After extracting the name and email sent in the request, we use the query function to create a new record in the database. If you have used MySQL with Express before, this syntax will be very familiar.

We can read the data for all users or a single one:

These three functions also demonstrate how parameters are passed to SQL statements in node-postgres. If you have five parameters, then each parameter will be picked from the array in order. For example:

Let's create the update and delete functions:

Make sure to export the queries so we can use them to create endpoints:

Conclusion

If you have never worked with PostgreSQL before, I hope you try it.

Here are some additional resources:

A tutorial on creating roles in PostgreSQL.
Why use PostgreSQL?
How does PostgreSQL stack up against another equally popular database like MongoDB? Read this article about their differences and how to pick between them.
A fan of Sequelize? Learn how to use it with PostgreSQL and Express.
After creating a CRUD API with Express and PostgreSQL, you can build a front-end with Vue and have a full-stack application.

Custom React Hooks. What are they and how are they helpful?

Nihar Raote — Fri, 26 Aug 2022 14:57:00 +0000

Introduction

React Hooks were introduced in React.js v16.8. They allow us to use state in functional components, similar to the lifecycle hooks of class-based components. For every situation, there is a React Hook you can use. From the frequently used hooks like useState and useEffect to hooks like useCallback and useMemo, you can take your time to browse the documentation for the hook you need.

Since there are hooks for almost every situation you might encounter, is there a need for your own React Hook?

What are custom hooks?

When we want to re-use some logic in multiple places, we extract it to a function. If we also want to re-use some JSX along with it, we extract it to a separate component. Similarly, a React Hook is also a function.

If we want to create a reusable function that also uses React Hooks like useState and useEffect, we cannot store this logic in a plain function.

A component can be created to store this reusable logic so we can then use hooks. But this is not ideal if we do not have any JSX to write in that component.

In such situations, the reusable logic can be extracted to a custom React Hook. Making a custom React Hook is simple - prefix a function's name with use. For example:

An example of a custom hook

Here is some logic that has been extracted into a custom hook.

The custom hook useSelectClub takes an array of sports clubs as an argument. A person can belong to one or more sports clubs. If a club is marked as a person's favorite, then that club's code is returned. If the user belongs to a single club, that club's code is returned.

Wrapping up

I hope this short guide helped you to understand custom hooks in React and how to use them.

Just like how recurring JSX and logic can be turned into reusable components, logic that uses React Hooks can also be turned into reusable custom hooks.

How to Improve DOM Structure with React Portal

Nihar Raote — Mon, 30 May 2022 13:15:36 +0000

What is it?

According to the official React documentation,

Portals provide a first-class way to render children into a DOM node that exists outside a DOM hierarchy of the parent component.

Take a look at this example - let's say you have a Calculator component, inside which there is a Buttons component. It would look something like this:

The root component App along with all its child components will be rendered inside a single DOM node (most likely a div with an id of #root). With React Portal, a child component like Buttons can be rendered outside the div with an id of #root. You can imagine the structure of the DOM to look something like this:

Why should I know this?

In certain situations, it is necessary to render some JSX or a component outside the root element. The best example of such a situation would be a modal.

A modal would typically cover the entire screen. One would expect this to be reflected in the DOM structure as well. However, that's not what happens in React. If a modal is nested inside a component, that is also how the DOM structure would look like. This can be confusing for people who use screen readers. From an accessibility standpoint, this is an issue.

Resolving this might be a bit easy to do in Vanilla JS and HTML, but harder to do in React. Since React applications have a single mount point, putting an element or component outside this mount point is a challenge. With React Portal, this becomes an easy task.

Although the element or component will be portaled to a different DOM node, it will still function as a regular React element. For our modal this means that it is in a different DOM node than the mount point. But it can still receive props and state and behave like a regular nested React element.

How do I use it?

Let's use the modal example from the section above. Creating a React Portal and mounting it to a different DOM node can be done in 2 steps:

Step 1:

Create another DOM node for mounting the modal:

The React application will be mounted to the div with an id of #root. And the modal will be mounted to the div with an id of #modal-root.

Step 2:

Create a Portal wrapper component:

This wrapper component will take a child element and create a Portal for it. The useEffect hook mounts the element and cleans up when the component is unomunted.

Here is how it might look:

Even though the Modal component is nested in the app hierarchy, it will look different in the DOM structure:

In the real DOM structure, you won't see the Modal component directly like this, but a div instead. This is simply a demonstration.

Extra resources

This article has another good use-case for using React Portals.
A dialog component is also a good scenario where React Portals is quite handy.
Do you need a ref from a React Portal? Then this solution for React 16 might help.
Learn how to create a Modal component with React Hooks, Context, and Portals.

These 3 differences between Reactjs and React Native are easy to spot.

Nihar Raote — Tue, 12 Apr 2022 17:56:14 +0000

What is React Native?

It is a JavaScript framework that is used to build cross-platform applications. React Native uses React.js. Because of this, opening a file from a React Native project, a React developer will find the structure and syntax used quite familiar. A React Native project can be packaged for both Android and iOS.

What are the differences between React and React Native code?

There are many things that are different between React and React Native. These differences become more prominent the closer we are to production.

During development, the differences might not seem much, but when pushing the code to a production environment, there is a noticeable difference between the two. After all, for Reactjs, the final result would most probably be a website. For React Native, it would be a mobile app.

Here are 3 primary differences a Reactjs developer will encounter when working with React Native for the first time.

1. Grouping elements

In React, to group some elements together and to create visual blocks of code, we mainly use div. Here's an example:

However, this code will not work in React Native. Since React Native code needs to map to native components on mobile, we need to use the View component instead of div. Let's change the above example to work in React Native:

Even though React Native uses Reactjs, in the end, the code needs to run on mobile devices. UI components like View help to map React Native code to native UI code.

So, in a React Native application, divs are no longer used. The View component needs to be used instead. You can think of the View component as React Native's alternative for div. When it comes to differences between React and React Native, these UI components stand out easily.

Speaking of differences, did you notice how the row and container classes were applied in React Native? That is the second difference.

2. Styling without CSS files

Unlike React, React Native does not style components with CSS files. Any styles needed are supposed to be created with the StyleSheet component. Let's use the example from the first point. This time, take a look at the styles as well:

Does this look familiar? It should. This is similar to how inline styles are written in React. There are also a few differences.

In React, padding: '20px' would be a typical line in an inline style. In React Native, this would instead be padding: 20. Of course, something like padding: '5%' is written the same way in React Native.

Do keep in mind that some style attributes might not work with relative units like % em rem. If you want to use these relative units for these attributes, there is a package available. It will be linked at the end of this article.

Another thing to keep in mind is that the shorthand syntax for various CSS attributes is not available in React Native. For example, take a look at the following comparison between a property inside a CSS file and its equivalent in React Native:

Although these longhand forms can also be used in CSS, it's the shorthand form that is usually used for convenience. In React Native, however, these shorthands cannot be used.

3. Default layout for all elements

In React Native, all components have a display of flex and direction of column applied by default. So there is no need to specify display: flex. Since flexbox is enabled everywhere by default, it becomes easier to style the layout.

I found it a little confusing in the beginning since I was used to the default flex direction of row. Over time I did get used to the column direction, but do keep that flex direction in mind before you start styling a bunch of nested components.

I think this default direction makes sense if you consider how a mobile device is usually held in portrait mode.

Wrapping up

These are some of the few differences that will seem unfamiliar to you when working with React Native for the first time. Pushing a React Native app to production can seem confusing to a developer who has never experienced that before.

This is also what makes React Native easier to get started with if you have worked with Reactjs.

The differences between React Native and React are because of different targets - a mobile application instead of a web application. Other than that, the rest of the development experience is similar to working with Reactjs.

Helpful resources

This package is a workaround for using the percentage unit for a responsive UI.
The official documentation on deploying React Native applications for both Android and iOS is well written.
Here is another great article on deploying React Native applications.
Expo is a framework that helps quickly develop, build, and deploy React Native applications.
Does your React Native application have a complex navigation structure? This article might help you out.

React Context and Hooks: Pass data and update it easily

Nihar Raote — Thu, 24 Feb 2022 18:33:56 +0000

In the previous article, we looked at what Context is and how to pass values with it. In this article we will look at updating the Context value from the child component. For our theme example this means clicking the button will now switch the theme between light and dark.

Updating Context value

In the previous article, we directly passed the theme via the Provider component. Although the value is passed to ThemeButton.js and ThemeWindow.js components, we cannot update this value.

To switch between the two theme types, we need to pass a function as well. This function will allow us to switch between both themes.

So we need to pass this function along with the dark theme via the Provider component. To do this, we can create a stateful object which will contain both the theme and a function. This way React can keep track of the theme and perform the necessary re-renders when it updates.

This is pretty straightforward. A stateful object containing a theme type and a function is passed via the Provider component. While the ThemeWindow component only needs minor changes, we do need to implement the function in the ThemeButton component.

Implementing theme switch function

Nothing special needs to be done to implement the function. Calling it when the button is pressed will switch the theme.

As easy as that. When this button is clicked, the switchTheme() function will be executed. This will update the stateful value and thus trigger a re-render. And finally, the updated theme will be rendered in the ThemeWindow component.

Wrapping up

This was the conclusion to the previous article about React Context. As you have seen, React Context is a powerful tool.

However, this simple example does not really showcase its power. In complex applications with dozens of components, where values and state need to be passed to several different components, React Context will make this job far easier than regular props.

React Context and Hooks: An excellent way to pass data

Nihar Raote — Wed, 26 Jan 2022 09:59:28 +0000

What is Context?

A Context is basically a JavaScript object that can be passed from one parent component to several child components efficiently. Props can pass values to components as well. But, if a value needs to be passed to a child component deep in the component tree, using props means the value also passes through components that do not need it. Or, if a value is required by several components, props can make it difficult.

This is a good use case for Context. Props need to be passed from one component to the other. With Context, the parent component provides the value, and the child components that need it can access it.

Passing values with Context and Hooks

Let's take a common example used for demonstrating Context - themes. Consider the following UI:

Here, the one with the red border is the main App.js component. The one with the green border is a component called ThemeButton.js, and the one with a blue border is the ThemeWindow.js component. The App component will have the other two as its child components. Clicking the button in ThemeButton will toggle the theme between light and dark. The result of the theme will be reflected in ThemeWindow.

We need to create a context first, then have the App component provide a value for its child components. The child component(s) will consume this provided value. Let's set this up.

1. Creating a context

A context can be created in a separate file or in the App component itself, but it is generally better to create a separate file for it. Since depending on your app, you may need multiple contexts for different features. It can thus be useful to have separate files.

Create a new file to hold the context and export it:

In this file, we export two things - an object containing theme values and our context. The createContext() function returns a Context object. It accepts an argument for the initial value similar to the useState hook. In this case, the light themes object is the default value of ThemeContext.

2. Passing values with the Provider component

Since the context has been created, let's add it in App.js.

Every Context object (created with React.createContext()) has a Provider component. This Provider component should be wrapped around all the child components that will be getting access to ThemeContext. Conversely, there is also a Consumer component. You can also use the useContext hook instead if you're not working with class-based components.

You must be wondering why the light object was used as the default value, but the Provider component has passed the dark object. First of all, the value prop used in the Provider component is something React recognizes so you cannot use a different name for that prop.

Whatever is passed through the value prop is what the child components consume. And if a component attempts to access ThemeContext but does not have a Provider component in the tree above, it will use the default value the Context object has (the light theme).

As a quick example, let's say there was a third component called ThemeFont.js. But this third component was not included within the Provider component -

Since ThemeFont is not wrapped by the Provider component, it will not receive the new value. Although it can still access ThemeContext, it will receive the default value, that is, the value we passed to createContext - the light themes object.

Not wrapping a component that needs access to a Context in a Provider component still gives it access to the Context's default value.

Although you probably wouldn't have a reason to do this, it is still good to know.

3. Consuming context in child components

Let's use React Hooks to consume the provided context value.

Running this app, you would get the following result:

The ThemeWindow certainly has the dark theme. But, the button to toggle the theme doesn't work. The next article will demonstrate how to update values passed via Context.

Some links to resources

Code splitting: Does this improve performance of React apps?

Nihar Raote — Wed, 29 Sep 2021 07:15:39 +0000

There are several ways to improve the performance of React applications. One of them is to make it look faster to users. This is different from compressing asset files or making animations and transitions smoother.

This article is about one such technique to improve the perceived performance of a React application. Although there are other ways to improve performance, this article will focus on implementing code splitting in React with the Parcel bundler.

What does code splitting mean?

As per MDN,

Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel.

This means when a page initially loads, a smaller bundle will be retrieved from the server. Any additional code will be lazy loaded as needed. While the total amount of code is the same (and perhaps even a few bytes larger), the amount of code needed during initial load can be reduced.

Where should I use it? And why?

By separating code into smaller bundles, load time is reduced, thus increasing performance. Even if you didn't change the code logic you wrote, the application certainly will seem faster. There is a link to an MDN page on perceived performance at the end of this article.

That said, it does not mean you should split every component into bundles. Fetching a lot of small bundles is not that different from fetching a single large bundle. Whether it's reducing the number of requests or reducing time for initial load, both have their pros and cons.

Your application might have components or files. The ones that might cause a page to load slowly are candidates for code splitting. For example, if there is a page with multiple images, split it. The page with images can load in the background while the other pages load before it and become interactive.

React has some good features to help implement code splitting.

Code splitting React components

There is no need for a configuration file to use code splitting with Parcel. Using the dynamic import syntax, React.lazy, and Suspense, we can code split a React component.

First, you need a React project. I wrote an article on creating a minimal React project with Parcel.

There is another package you need to install in addition to the dependencies of that project. It is a Babel plugin for parsing any dynamic imports. Install this in your project as well.

And add it to the Babel config file.

Create another component Message.js in the /src folder. A simple component will be enough to showcase how code splitting works in React.

Now import it with the dynamic import syntax along with React.lazy and Suspense.

The official React documentation offers an excellent explanation on the usage of React.lazy and Suspense for code splitting. A link to that page is also available at the end of this article.

Everything is ready. Now let's run the project and compare the results

How do I know it works?

After you run the project, it should open at http://localhost:1234. Open the developer console and switch to the network tab.

Yours might look a bit different, but you should see a separate bundle for the Message component.

It will be interesting to see how it might look without code splitting the Message component.

If you comment out the code splitting parts, import and use the Message component normally:

And look at the network tab of the developer console again, you will not see that message bundle.

Resources

This is how you would implement code splitting in React with Parcel. Here are links to additional resources that might help.

How many lines would it take to animate a button? GSAP makes it easy

Nihar Raote — Thu, 16 Sep 2021 11:59:05 +0000

In this article, I implement a simple button animation with GSAP and use the Composition API introduced in Vue 3.x. If you are not familiar with the Composition API, you can refer to the resources linked at the end of the article.

What is GSAP?

GSAP (GreenSock Animation Platform) is a JavaScript animation library that allows developers to create powerful animations with few lines of code. With this library, you get more precise control over your animations, which makes it easier to create complex animations. The GSAP library is small in size, easy to use, and works consistently across browsers with under-the-hood calculations.

Simple button animation

I have created a simple form and used GSAP to run an animation when the submit button is clicked. For this, I used the Composition API and ref from Vue. The animation itself takes only two lines of code:

Here's the codepen; you can tweak around to make some cool form animations as well:

Resources

Simple GreenSock Tutorial by Petr Tichy
A Beginner's Guide to GreenSock by Nicholas Kramer
How to Animate on the Web With GreenSock by Sarah Drasner
Official Vue docs on Composition API
Vue Composition API by Shawn Wildermuth
Comparing Composition API with Options API by Holly Guevara

Creating a custom Express server in Nuxt.js: 2 things to remember

Nihar Raote — Wed, 02 Jun 2021 13:28:07 +0000

Why would you want to create a custom server?

A Server-side Rendered (SSR) Nuxt.js application requires a Node.js server. This server renders a webpage and passes it to the client-side Vuejs. This server is implemented by Nuxt itself behind the scenes. However, this simple server makes it difficult to implement things like a POST or GET request, a Pusher channel, cookies, etc.

I needed to run a Puppeteer script on the server and thus extended the basic server provided by Nuxt.js by creating an Express server.

For a server-side rendered application, a Node.js server needs to be configured. Although Nuxt provides one for you, you can extend this server with serverMiddleware.

Note: While you can extend the server with serverMiddleware, you can also extend and control the application's routing with middleware.

Two things to keep in mind

Here are 2 things to take note of when creating an Express server in your Nuxt.js application -

1. Make sure to export the server

In a simple JavaScript/Node.js application, an Express server will be the one controlling and managing most of the application. But, in a Nuxt.js application, you need to export it because you are extending the server provided by Nuxt.js.

2. Mention the server file path in Nuxt.js config

This is mentioned in the documentation as well. Here is what worked for me:

Conclusion

It is very easy to extend the functionality of the default server provided by Nuxt.js. Remember, if you also want to control routing, you need to extend middleware.

For creating my custom Express server and writing this article, I mainly used the Nuxt.js documentation.

Quick tips: Persistent wrapper content in Next.js

Nihar Raote — Fri, 30 Apr 2021 17:44:49 +0000

What kind of content?

Generally what comes to mind when thinking about some content that would stay constant across all or multiple pages, is a navigation bar. It can also be a header, some branding, or a menu.

This is easy to do with the _app.js component present in Next.js projects. If you created your project with create-next-app, you would have this component too.

Creating a component that wraps around <Component /> will get the job done.

The wrapping component

Putting any component in the pages folder will create a new page. This component will not be a separate page on its own. So, create a new folder named components at the root of the project. Create a new file in it - Layout.js.

Writing a simple header like this:

and wrapping it around <Component /> in _app.js:

it should show up on all pages. Run the project:

npm run dev

Here is a CodeSandbox. I added some styles to Layout.js and also some nav links. As you can see, the header (along with the newly added nav links or navbar) is shown on both pages.

Make a simple React app with Webpack - An easy practical guide

Nihar Raote — Sun, 11 Apr 2021 13:26:59 +0000

Create React App is the first choice of most, if not all, React developers. It creates a React project for us and only requires a few commands. Its simplicity and quick nature make it a favorite among beginners as well. But, there are also ways to create a React app without it.

One of these ways is using a module bundler like Webpack and a compiler like Babel.

By the end of this article, you will have your very own React app without using create-react-app.

Dependencies and project structure

Since this React app will use the Webpack module bundler, we need to install quite a few dependencies. These dependencies are required by Webpack so it can detect and work with the various file types.

Here's what we need to install:

These two packages are the dependencies we need for our simple app. If your project needs any other packages, you may install those.

There are close to 10 devDependencies, so let's install them in groups and I'll explain what each dependency is for. First comes webpack:

webpack: Installs the webpack module bundler
webpack-cli: Offers a variety of commands that make it easier to work with webpack on the command line
webpack-dev-server: Allows us to use a simple web server with hot reload

Next, we'll install Babel:

@babel/core: Core package for the Babel compiler
@babel/preset-env: A smart preset that allows us to use the latest JavaScript syntax
@babel/preset-react: As the name suggests, it transpiles React code to plain JavaScript
babel-loader: A plugin that enables Webpack to work with Babel and its presets

The remaining devDependencies are for CSS and HTML:

style-loader, css-loader: Required so that webpack can detect .css files
html-webpack-plugin: Generates an HTML file that includes all your Webpack bundles via script tags

Everything a basic React project needs is installed. Now create these folders and file in the project's root:

A public folder for the HTML file and assets (images, fonts, etc.)
A src folder for .js files and React components
A babel.config.json Babel configuration file

At this point, your project folder should look something like this:

Webpack and Babel config

Let's add the presets in the Babel config file:

It is recommended to have two separate config files for Webpack - one for development and one for production. Although both files will have the same configuration for loaders and any plugins, there are slight differences. This is what a config file for development looks like:

Here, we first declare the mode configuration option. With this, Webpack can use its built-in optimizations accordingly. Next, module.rules is an array containing 3 objects:

This rule tells Webpack to look for files ending in .js and use Babel to compile them. babel-loader helps Webpack work with Babel.
The second rule tells Webpack to look for files ending in .css and make sense of them with the help of two loaders - style-loader and css-loader.
The last rule helps Webpack recognize image files. There is no need to install any external loader for this.

Note: According to the Webpack docs, style-loader and css-loader need to be used in the exact same order as in this config file or it won't work.

After loaders, we have two plugins. When Webpack bundles all JavaScript, CSS, and other necessary files, it also creates an HTML file. This is where we use the html-webpack-plugin. This plugin tells Webpack to use our HTML file as a template and inject the compiled bundles into it.

So, instead of creating its own HTML file, Webpack instead uses our HTML file - public/index.html and adds the bundled files to it via <script> tags.

The other plugin we use is HotModuleReplacementPlugin which comes with the webpack package and is used for hot reloading our app in development mode.

Finally, the devServer object contains options used by webpack-dev-server.

Now let's take a look at the production version of the configuration file:

Not much has changed except that we no longer need HotModuleReplacementPlugin and devServer since they will not be used in production. The mode option has also been set accordingly. You might have noticed the changes in output.

output.filename has a value that we haven't seen before. The values in square brackets are tokens. The [name] token allows Webpack to name files differently if we use code-splitting. [contenthash] is used so that the bundle file name changes when its content changes.

Running the app

Our app is almost ready. I have a simple App.js component:

The app looks like this now:

Finally, we need to add scripts to run our app:

With the serve option Webpack uses webpack-dev-server to create a web server. Let's run our app.

Open https://localhost:8080 in your browser and your app should be running.

Wrapping up

This is a basic React app where we manually configure Webpack. I hope this helped you to understand a bit about the various plugins and loaders Webpack requires and what its configuration files look like. The Webpack documentation is worth reading. It was the major resource I used for this article.

In comparison, Parcel uses very few dependencies. I wrote another article about creating a React app with Parcel. That said, both have their own pros and cons.

Here are links to some additional resources:

Webpack documentation on config files and the various options a config file can have
Webpack documentation on loading CSS and other assets
Webpack documentation on webpack-dev-server and html-webpack-plugin
An article from Carl Rippon on creating a React app that uses TypeScript and ESLint with Webpack 5
Babel documentation on its config files

How do closures make private variables possible in JavaScript?

Nihar Raote — Sat, 06 Mar 2021 12:22:40 +0000

Being able to implement private variables and methods is very helpful for restricting access to code. By making a variable private it limits the amount of code that can mutate it. There are several ways to implement private variables and methods in JavaScript. One of such ways is by using closures.

What is a closure?

A closure is the combination of a function bundled with its surrounding state. This means that we can access the scope in which the function is defined, from inside that function. Let's look at a simple example:

Here we have an outer function add and an inner function addFive. Assigning add to a variable will return the inner function addFive.

Invoking the variable and passing a number will execute addFive. At first, it seems accessing x should not be possible since x belongs to the scope of the outer function which has already finished executing. But, because the function addFive forms a closure, it also has access to the environment or scope in which it was declared (also known as the lexical environment).

If a function forms a closure, it can access variables and functions declared in the parent/outer function even after that parent/outer function finishes executing. This principle allows us to implement private variables.

Implementing private variables

In JavaScript, private variables are not natively available. But knowing how closures work, we can emulate them.

This example applies the concept we looked at in the previous section. An IIFE(Immediately Invoked Function Expression) is assigned to the constant Door. The IIFE executes immediately and returns an object with two methods. This returned object has a function and a variable in its lexical environment.

The IIFE finishes executing, so the variable and function are both inaccessible from the outside. Only the two methods inside the returned object can access them because they form closures.