DEV Community: vidhya murali

Props in React

vidhya murali — Thu, 16 Jul 2026 06:07:23 +0000

React Props

props stands for properties.
Props are arguments passed into React components.
Props are passed to components via HTML attributes.

Note: React Props are read-only! You will get an error if you try to change their value.

To send props into a component, use the same syntax as HTML attributes:

The component receives the argument as a props object:

note : The name of the object is props, but you can call it anything you want.

Pass Multiple Properties

You can send as many properties as you want.
Every attribute is sent to the Car component as object properties.

All properties are received in the Car component inside the props object:

Another Example;

output:

Object Props

The component treats objects like objects, and you can use the dot notation to access the properties.

Array Props
Array props can be accessed using the indexes.

Pass Props from Component to Component

Attributes are also how you pass data from one component to another, as parameters.

React Destructuring Props

You can limit the properties a component receives by using destructuring.

Note: React uses curly brackets to destructure props: {color}.

You can also destruct the properties you need inside the component.

This way, the component receives all the properties, but the destructuring makes sure it only uses the ones it needs.

Destructuring ...rest

When you don't know how many properties you will receive, you can use the ...rest operator.

Meaning: you can specify the properties you need, and the rest will be stored in an object.

Default Values

With Destructuring, you can set default values for props.

If a property has no value, the default value will be used.

Reference : https://www.w3schools.com/react/react_props_destructuring.asp

React Basics

vidhya murali — Tue, 14 Jul 2026 08:43:05 +0000

What is Node.js?

Node.js is a JavaScript runtime environment that allows JavaScript to run outside the browser.

Before Node.js, JavaScript could only run inside browsers like Chrome or Firefox.

Node.js is built on Google's V8 JavaScript Engine, the same engine used by Chrome.

It allows developers to create

Backend servers
APIs
File systems
Command line tools
Real-time applications

without learning another language.

Real Example

When you type,

      npm create vite@latest

Node.js executes this command.

Without Node.js this command won't work.

Is Node.js a programming language? No.

Node.js is a runtime environment.

JavaScript is the programming language.

2. What is npm?

npm stands for Node Package Manager

It is the world's largest package manager.

It installs libraries and dependencies.

Why npm?

Instead of writing everything yourself,you install ready-made libraries.

Example

Instead of writing an HTTP client,
npm install axios

package.json

This file stores project information and dependencies.

package-lock.json

Stores exact versions ,dependency tree
to make sure every developer installs the same versions.

node_modules

Contains all installed packages.
Usually thousands of files.
Never edit manually.

Difference between npm install and npm update?

install-Installs dependencies.
update-Updates installed packages

What is Vite?

Modern Build Tool
Vite is a modern frontend build tool used to create fast web applications with frameworks like React, Vue, and Svelte.

Fast Development Server
It uses native ES Modules (ESM), so the development server starts almost instantly without bundling the entire project first.

Hot Module Replacement (HMR)
It updates only the changed module in the browser without refreshing the whole page, making development faster.

Optimized Production Build
Vite uses Rollup to generate optimized, smaller, and production-ready files.

Easy to Use
It has a simple setup, minimal configuration, and is faster than older tools like Create React App (CRA).

*CRA *- Create React App Problems

slow startup
slow build
slow refresh

HTML vs JSX

HTML -(HyperText Markup Language) is the standard markup language used to create and structure web pages. Browsers understand HTML directly.

JSX- (JavaScript XML) is a syntax extension for JavaScript used in React. It looks like HTML but is not HTML. JSX is converted into JavaScript by Babel before the browser can understand it.

What is Babel?

Babel is a JavaScript compiler (or transpiler) that converts modern JavaScript (ES6+) and JSX into JavaScript that browsers can understand.Because, Browsers do not understand JSX directly, and some older browsers do not support newer JavaScript features.

In React, Babel is mainly used to:

Convert JSX into JavaScript.
Convert modern JavaScript features into older JavaScript for better browser compatibility

Babel is commonly called a JavaScript compiler, but more specifically, it is a transpiler because it converts one version of JavaScript into another version of JavaScript

Setting up a React Environment

vidhya murali — Tue, 14 Jul 2026 08:04:43 +0000

To use React in production, you need npm which is included with Node.js.

Also, you need to set up a React Environment, and choose a build tool.

First, make sure you have Node.js installed. You can check by running this in your terminal:

  node -v

Install a Build Tool (Vite)
When you have Node.js installed, you can start creating a React application by choosing a build tool.

We will use the Vite build tool

  npm install -g create-vite
  npm create vite@latest my-react-app -- --template react
  Need to install the following packages:
  create-vite@9.0.7
  Ok to proceed? (y)

  or

  npm create vite@latest

A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:5173 in the address bar.

Now that your development environment is set up, let's try to modify the default app to display "Hello, World!"

*Example *:
This is the default content of the App.jsx file in the src folder:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import heroImg from './assets/hero.png'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <section id="center">
        <div className="hero">
          <img src={heroImg} className="base" width="170" height="179" alt="" />
          <img src={reactLogo} className="framework" alt="React logo" />
          <img src={viteLogo} className="vite" alt="Vite logo" />
        </div>
        <div>
          <h1>Get started</h1>
          <p>
            Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
          </p>
        </div>
        <button
          type="button"
          className="counter"
          onClick={() => setCount((count) => count + 1)}
        >
          Count is {count}
        </button>
      </section>

      <div className="ticks"></div>

      <section id="next-steps">
        <div id="docs">
          <svg className="icon" role="presentation" aria-hidden="true">
            <use href="/icons.svg#documentation-icon"></use>
          </svg>
          <h2>Documentation</h2>
          <p>Your questions, answered</p>
          <ul>
            <li>
              <a href="https://vite.dev/" target="_blank">
                <img className="logo" src={viteLogo} alt="" />
                Explore Vite
              </a>
            </li>
            <li>
              <a href="https://react.dev/" target="_blank">
                <img className="button-icon" src={reactLogo} alt="" />
                Learn more
              </a>
            </li>
          </ul>
        </div>
        <div id="social">
          <svg className="icon" role="presentation" aria-hidden="true">
            <use href="/icons.svg#social-icon"></use>
          </svg>
          <h2>Connect with us</h2>
          <p>Join the Vite community</p>
          <ul>
            <li>
              <a href="https://github.com/vitejs/vite" target="_blank">
                <svg
                  className="button-icon"
                  role="presentation"
                  aria-hidden="true"
                >
                  <use href="/icons.svg#github-icon"></use>
                </svg>
                GitHub
              </a>
            </li>
            <li>
              <a href="https://chat.vite.dev/" target="_blank">
                <svg
                  className="button-icon"
                  role="presentation"
                  aria-hidden="true"
                >
                  <use href="/icons.svg#discord-icon"></use>
                </svg>
                Discord
              </a>
            </li>
            <li>
              <a href="https://x.com/vite_js" target="_blank">
                <svg
                  className="button-icon"
                  role="presentation"
                  aria-hidden="true"
                >
                  <use href="/icons.svg#x-icon"></use>
                </svg>
                X.com
              </a>
            </li>
            <li>
              <a href="https://bsky.app/profile/vite.dev" target="_blank">
                <svg
                  className="button-icon"
                  role="presentation"
                  aria-hidden="true"
                >
                  <use href="/icons.svg#bluesky-icon"></use>
                </svg>
                Bluesky
              </a>
            </li>
          </ul>
        </div>
      </section>

      <div className="ticks"></div>
      <section id="spacer"></section>
    </>
  )
}

export default App

Example

Replace all the content of the App.jsx file with the code below:

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

Notice that the changes are visible immediately after you save the file, you do not have to reload the browser!

React - Components

vidhya murali — Mon, 13 Jul 2026 19:16:03 +0000

React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable components. From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you’ll learn to create, customize, and conditionally display React components.

Your first component

React applications are built from isolated pieces of UI called components. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a Gallery component rendering three Profile components:

Components are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey!

Components: UI building blocks

On the Web, HTML lets us create rich structured documents with its built-in set of tags like<h1> and<li>:


<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

This markup represents this article<article>, its heading <h1>, and an (abbreviated) table of contents as an ordered list <ol>. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web.

React lets you combine your markup, CSS, and JavaScript into custom “components”, reusable UI elements for your app. The table of contents code you saw above could be turned into a <TableOfContents />component you could render on every page. Under the hood, it still uses the same HTML tags like <article>, <h1>, etc.

Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you’re reading is made out of React components:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development

Defining a component

Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: a React component is a JavaScript function that you can sprinkle with markup. Here’s what that looks like (you can edit the example below):

Step 1: Export the component

The export default prefix is a standard JavaScript syntax (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in Importing and Exporting Components!)

Step 2: Define the function

With function Profile() { } you define a JavaScript function with the name Profile.

Step 3: Add markup

The component returns an tag with src and alt attributes. is written like HTML, but it is actually JavaScript under the hood! This syntax is called JSX, and it lets you embed markup inside JavaScript.

Return statements can be written all on one line, as in this component:

Using a component

Now that you’ve defined your Profile component, you can nest it inside other components. For example, you can export a Gallery component that uses multiple Profile components:

Reference : https://react.dev/learn/your-first-component

What I Learned at the Code on JVM Meetup: Engineering Concepts Beyond Java

vidhya murali — Mon, 13 Jul 2026 10:53:27 +0000

Last Saturday (11-07-2026)

I attended the Code on JVM Meetup, and it was a great learning experience. Although I primarily work on frontend development and am currently exploring Java Full Stack, this meetup gave me a broader perspective on how large-scale systems are designed and how modern applications handle performance, scalability, and massive amounts of data.

Here are some of my key takeaways from the event.

Session 1: Engineering Building Blocks

The first session wasn't just about Java—it focused on the engineering concepts that power real-world applications.

Data Structures & Problem Solving

The speaker emphasized the importance of strengthening Data Structures and Algorithms (DSA).

Some recommended platforms for practice:

LeetCode
HackerRank

They also suggested exploring Abstract Syntax Trees (ASTs) to understand how programming languages parse and analyze code.

Another important concept discussed was Big O Notation, which helps measure the time and space complexity of algorithms.

Bloom Filter

One concept that caught my attention was the Bloom Filter.

A Bloom Filter is a space-efficient probabilistic data structure used to quickly check whether an element may exist in a dataset.

It is commonly used in:

Apache Cassandra
Google Chrome
Feed readers

I learned that Bloom Filters are designed to save memory while providing very fast lookups, although they may occasionally produce false positives.

HNSW Graph & RAG

Another interesting topic was the HNSW (Hierarchical Navigable Small World) Graph.

It is widely used for:

Vector databases
AI Search
Recommendation systems

The speaker also clarified something I hadn't thought about before:

RAG (Retrieval-Augmented Generation) is not an AI model itself—it is an algorithmic approach that retrieves relevant information before an AI generates a response.

That was an important distinction for me.

Skip List

We also learned about Skip Lists, which provide faster searching compared to traditional linked lists.

Real-world use cases include:

Redis Sorted Sets
Rate Limiting
Storage Engines

LSM Trees

The session then moved to Log-Structured Merge Trees (LSM Trees).

LSM Trees are optimized for writing large amounts of data to disk and are commonly used in databases.

Examples include:

RocksDB
CockroachDB
Cassandra
Instagram's backend systems

This helped me understand how databases efficiently handle high write workloads.

Consistent Hashing

Another fascinating topic was Consistent Hashing.

It is used to distribute requests across multiple servers without causing major redistribution when servers are added or removed.

Applications include:

Load Balancing
CDNs like Akamai
Amazon DynamoDB
Discord Routing

Learning how requests are routed efficiently in distributed systems was particularly interesting.

Hexagonal Grid (H3 Index)

I also discovered H3, a hexagonal geospatial indexing system developed by Uber.

It is used in location-based applications such as:

Uber
Swiggy
Zomato
Ola
Other ride-sharing platforms

This was one of the most practical concepts discussed because it directly connects to apps many of us use every day.

HyperLogLog

One concept I had never heard of before was HyperLogLog.

It is an algorithm used to estimate the number of unique elements in a huge dataset while consuming very little memory.

Some interesting facts:

Uses only about 12 KB of memory.
Has an approximate error rate of 0.81%.

It is useful for:

Reddit analytics
Google BigQuery
Large-scale analytics dashboards

React Uses Trees Too

One interesting point was that tree data structures are also used in React's reconciliation process, where React compares the old Virtual DOM with the new Virtual DOM to efficiently update the UI.

As someone interested in frontend development, this connection between DSA and React really stood out.

Session 2: Building a Micro SaaS

The second session was presented by Angel John.

The discussion focused on building Micro SaaS products.

Some advice that stayed with me:

Build products that solve real problems.
Find people who are actually willing to pay for your solution.
Validate your idea before investing too much time into development.

This session reminded me that building software isn't only about writing code—it's about solving meaningful problems.

Session 3: Handling High Load Applications

The final session focused on Java performance and handling high-load systems.

Topics covered included:

Bytes
Input Streams
Streaming Response Body
Virtual Threads (JDK 21)
Reactive Pipelines

One practical takeaway was choosing the right approach depending on file size:

Small files → Byte arrays
Medium files → Input Streams
Large files → Streaming Response Body
High concurrency → Streaming Response Body + Virtual Threads

The speaker also introduced Virtual Threads in JDK 21, explaining how they improve memory efficiency and make handling thousands of concurrent requests much easier.

Another topic was Reactive Pipelines using Flux<DataBuffer> for efficient streaming.

My Overall Experience

This meetup exposed me to many engineering concepts that I had only heard about briefly before.

Some topics, like Bloom Filters, HyperLogLog, Consistent Hashing, and H3 indexing, were completely new to me, and I'm excited to explore them further.

The biggest takeaway for me was that software engineering goes far beyond writing code. Understanding the data structures, algorithms, and system design principles behind modern applications helps us appreciate how products like Google Chrome, Uber, Discord, Instagram, and Amazon scale to millions of users.

I'm looking forward to attending more tech meetups and continuing to learn from the developer community.

If you've attended a meetup recently, I'd love to hear about your biggest takeaway in the comments!

How Does Async / Await Work in JavaScript?

vidhya murali — Wed, 08 Jul 2026 17:10:50 +0000

This is supposed to be the better way to write promises and it helps us keep our code simple and clean.

All you have to do is write the word async before any regular function and it becomes a promise.

Promises vs Async/Await in JavaScript

Before async/await, to make a promise we wrote this:

Now using async/await, we write one like this:

You need to understand ->

How to use the try and catch keywords
How to use the await keyword

How to use the Try and Catch keywords

We use the try keyword to run our code while we use catch to catch our errors. It's the same concept we saw when we looked at promises.

Let's see a comparison. We'll see a small demo of the format, then we'll start coding.

Promises in JS -> resolve or reject
We used resolve and reject in promises like this:

Async / Await in JS -> try, catch
When we're using async/await, we use this format

Don't panic, we'll discuss the await keyword next.

Now hopefully you understand the difference between promises and Async / Await.

The keyword await makes JavaScript wait until a promise settles and returns its result

How to use the await keyword in JavaScript

Let's go back to our ice cream shop. We don't know which topping a customer might prefer, chocolate or peanuts. So we need to stop our machine and go and ask our customer what they'd like on their ice cream.

Notice here that only our kitchen is stopped, but our staff outside the kitchen will still do things like:

doing the dishes
cleaning the tables
taking orders, and so on.

Let's create a small promise to ask which topping to use. The process takes three seconds.

Now, let's create our kitchen function with the async keyword first

Let's add other tasks below the kitchen() call.

We are literally going outside our kitchen to ask our customer, "what is your topping choice?" In the mean time, other things still get done.

Once, we get their topping choice, we enter the kitchen and finish the job

Small note

When using Async/ Await, you can also use the .then, .catch, and .finally handlers as well which are a core part of promises.

We're gonna create two functions ->

kitchen: to make ice cream
time: to assign the amount of time each small task will take . Let's start! First, create the time function:

Now, let's create our kitchen:

Let's give small instructions and test if our kitchen function is working or not:

The result looks like this when the shop is closed:

Here's the list of our tasks again:

async function kitchen(){
try{
await time(2000)
console.log(${stocks.Fruits[0]} was selected)

await time(0000)
console.log("production has started")

await time(2000)
console.log("fruit has been chopped")

await time(1000)
console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`)

await time(1000)
console.log("start the machine")

await time(2000)
console.log(`ice cream placed on ${stocks.holder[1]}`)

await time(3000)
console.log(`${stocks.toppings[0]} as toppings`)

await time(2000)
console.log("Serve Ice Cream")
}

catch(error){
 console.log("customer left")
}

}

And here's the result: 👇

Reference : https://www.freecodecamp.org/news/javascript-async-await-tutorial-learn-callbacks-promises-async-await-by-making-icecream/

Promise in JavaScript

vidhya murali — Wed, 08 Jul 2026 17:07:40 +0000

Promise

Promises were invented to solve the problem of callback hell and to better handle our tasks.

This is how a promise looks:

illustration of a promise format

Let's dissect promises together.

An illustration of the life of a promise

As the above charts show, a promise has three states:

Pending: This is the initial stage. Nothing happens here. Think of it like this, your customer is taking their time giving you an order. But they haven't ordered anything yet.
Resolved: This means that your customer has received their food and is happy.
Rejected: This means that your customer didn't receive their order and left the restaurant.

We need to understand four more things first ->

Relationship between time and work
Promise chaining
Error handling
The .finally handler

Let's start our ice cream shop and understand each of these concepts one by one by taking baby steps.

Relationship between time and work

If you remember, these are our steps and the time each takes to make ice cream"

Chart contains steps to make ice cream

For this to happen, let's create a variable in JavaScript:

Now create a function named order and pass two arguments named time, work and we're gonna make a promise to our customer, "We will serve you ice-cream" Like this ->

Our promise has 2 parts:

Resolved [ ice cream delivered ]
Rejected [ customer didn't get ice cream ]

Let's add the time and work factors inside our promise using a setTimeout() function inside our if statement. Follow me 👇

Note: In real life, you can avoid the time factor as well. This is completely dependent on the nature of your work.

Now, we're gonna use our newly created function to start ice-cream production.

Promise chaining

In this method, we defining what we need to do when the first task is complete using the .then handler. It looks something like this 👇

Illustration of promise chaining using .then handler

The .then handler returns a promise when our original promise is resolved.

Let me make it simpler: it's similar to giving instructions to someone. You tell someone to " First do this, then do that, then this other thing, then.., then.., then..." and so on.

The first task is our original promise.
The rest of the tasks return our promise once one small bit of work is completed

Note: don't forget to write the return word inside your .then handler. Otherwise, it won't work properly. If you're curious, try removing the return once we finish the steps

Using the same system, let's finish our project:

// step 1
order(2000,()=>console.log(${stocks.Fruits[0]} was selected))

// step 2
.then(()=>{
return order(0000,()=>console.log('production has started'))
})

// step 3
.then(()=>{
return order(2000, ()=>console.log("Fruit has been chopped"))
})

// step 4
.then(()=>{
return order(1000, ()=>console.log(${stocks.liquid[0]} and ${stocks.liquid[1]} added))
})

// step 5
.then(()=>{
return order(1000, ()=>console.log("start the machine"))
})

// step 6
.then(()=>{
return order(2000, ()=>console.log(ice cream placed on ${stocks.holder[1]}))
})

// step 7
.then(()=>{
return order(3000, ()=>console.log(${stocks.toppings[0]} as toppings))
})

// Step 8
.then(()=>{
return order(2000, ()=>console.log("Serve Ice Cream"))
})

Result :

Error handling

We need a way to handle errors when something goes wrong. But first, we need to understand the promise cycle:

An illustration of the life of a promise

To catch our errors, let's change our variable to false.

Which means our shop is closed. We're not selling ice cream to our customers anymore.

To handle this, we use the .catch handler. Just like .then, it also returns a promise, but only when our original promise is rejected.

A small reminder here:

.then works when a promise is resolved
.catch works when a promise is rejected Go down to the very bottom and write the following code

Just remember that there should be nothing between your previous .then handler and the .catch handler.

A couple things to note about this code:

The 1st message is coming from the reject() part of our promise
The 2nd message is coming from the .catch handler

How to use the .finally() handler

There's something called the finally handler which works regardless of whether our promise was resolved or rejected.

For example: whether we serve no customers or 100 customers, our shop will close at the end of the day

Break Time!

Reference : https://www.freecodecamp.org/news/javascript-async-await-tutorial-learn-callbacks-promises-async-await-by-making-icecream/

Introduction to React

vidhya murali — Fri, 03 Jul 2026 15:55:29 +0000

React

React is a Frond-End JavaScript Library. It is used to create UI(User Interface). UI means Everything that user sees and Interact with webpages or Applications.

It includes,

Buttons
Color
Layout
Text
Images ....

React is Espeacilly used to create SPA (Single Page Application).

Single Page Application :

SPA is Web Application that loades on only on HTML Page initially, When user try to navigate different Sections,it does not reload. Instead,it changes only nessary Contents on UI.

Example : Gmail

When you click:

Inbox
Sent
Drafts

The page does not reload. Only the content changes.

SPA behavior: One page is loaded initially, and JavaScript updates the content.

(Other Examples : Netflix, Facebook,Google Maps)

Benifits:

Faster Navigation
Better User Experience

DisAdvantage:

Initial Content Loading may be Slower.

Why is the initial loading of an SPA slower?

When you first open a Single Page Application (SPA), the browser has to download most of the JavaScript needed to run the application before it can display the interactive UI.

After that first load, moving between pages is very fast because the app is already running in the browser

Component Based Architecture

React is Component-Based Architecture.UI breaking into small Parts. those are called "Components" which is Reusable.Each Component has its own Logic ,Strcture and Styling.

Virtual DOM in React

React uses a Virtual DOM to improve the performance of UI updates.

The Virtual DOM is a lightweight, in-memory representation (copy) of the Real DOM.

When a React application is first rendered, React creates a Virtual DOM that represents the UI and then renders it to the Real DOM.

Whenever the application's state or props change, React creates a new Virtual DOM. It then compares the new Virtual DOM with the previous Virtual DOM using a process called the Diffing Algorithm.

The Diffing Algorithm identifies the differences between the two Virtual DOM trees. Based on these differences, React updates only the necessary parts of the Real DOM instead of re-rendering the entire page.

This entire process of comparing the Virtual DOMs and efficiently updating the Real DOM is called Reconciliation.

Because React updates only the changed elements, applications become faster and more efficient.

React was developed by FaceBook .

Current React Version is React 19.2.7

JavaScript Async/Await Tutorial – Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream 🍧🍨🍦

vidhya murali — Fri, 03 Jul 2026 11:56:15 +0000

Part-2

What are Callbacks in JavaScript?

When you nest a function inside another function as an argument, that's called a callback.

Here's an illustration of a callback:

Why do we use callbacks?

When doing a complex task, we break that task down into smaller steps. To help us establish a relationship between these steps according to time (optional) and order, we use callbacks.

Take a look at this example:👇

The shop will have two parts:

The storeroom will have all the ingredients [Our Backend]
We'll produce ice cream in our kitchen [The frontend]

Let's store our data

Now, we're gonna store our ingredients inside an object. Let's start!

  let stocks = {
  Fruits : ["strawberry", "grapes", "banana", "apple"]
  }

You can store these other ingredients in JavaScript objects like this🍦🍦🍧🍨,

The entire business depends on what a customer orders. Once we have an order, we start production and then we serve ice cream. So, we'll create two functions ->

order
production

let's establish a relationship between these two functions using a callback, like this: 👇

If you're wondering how we picked strawberry from our stock variable, here's the code with the format 👇

 let production = () =>{

     setTimeout(()=>{
     console.log("production has started")
      },0000)

   };

We'll nest another setTimeout function in our existing setTimeout function to chop the fruit. Like this: 👇

result :

let production = () =>{

setTimeout(()=>{
console.log("production has started")
setTimeout(()=>{
console.log("The fruit has been chopped")
setTimeout(()=>{
console.log(${stocks.liquid[0]} and ${stocks.liquid[1]} Added)
setTimeout(()=>{
console.log("start the machine")
setTimeout(()=>{
console.log(Ice cream placed on ${stocks.holder[1]})
setTimeout(()=>{
console.log(${stocks.toppings[0]} as toppings)
setTimeout(()=>{
console.log("serve Ice cream")
},2000)
},3000)
},2000)
},1000)
},1000)
},2000)
},0000)
};

Result :

Feeling confused?

This is called callback hell. It looks something like this.

Take a break

we will learn about CallBack Hell in next Post.....

Happy Learning.

JavaScript Async/Await Tutorial – Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream 🍧🍨🍦

vidhya murali — Fri, 03 Jul 2026 11:01:57 +0000

Part-1

Today, I learned about Callbacks in JavaScript from FreeCodeCamp using a fun ice cream making example.

Before learning callbacks, I first understood the difference between Synchronous and Asynchronous operations with simple examples.

Synchronous Operations: Tasks are executed one after another. The next task waits until the current task is completed.
Asynchronous Operations: Some tasks take time to complete, so JavaScript doesn't wait for them. Instead, it continues executing the remaining code while the long-running task is processed in the background.

These concepts helped me understand why callbacks are needed in JavaScript. Below, I have included the examples I used to explain synchronous and asynchronous operations, followed by the ice cream example that demonstrates how callbacks work.

Synchronous vs Asynchronous JavaScript

What is a Synchronous System?

In a synchronous system, tasks are completed one after another.

Think of this as if you have just one hand to accomplish 10 tasks. So, you have to complete one task at a time.

Imagine people standing in a queue at a restaurant.

The first customer places their order. Only after the restaurant staff finishes taking the first customer's order does the next customer get a chance to order. Everyone else in the queue has to wait for their turn.

Each customer is served one by one, and the next person's order cannot be taken until the previous person's order is completed.

This is exactly how synchronous operations work in JavaScript: tasks are executed sequentially, and each task waits for the previous one to finish before starting

Well, JavaScript is by default Synchronous [single threaded]. Think about it like this – one thread means one hand with which to do stuff.

What is an Asynchronous System?

In this system, tasks are completed independently.

Here, imagine that for 10 tasks, you have 10 hands. So, each hand can do each task independently and at the same time.

Example:

Imagine you put your clothes into a washing machine and start it.

The washing machine takes about 30 minutes to finish washing. Instead of standing there and waiting, you use that time to clean your room, watch TV, or cook.

When the washing machine finishes, it beeps, and you go back to take out your clothes.

Similarly, in JavaScript, some tasks take time to complete. Instead of waiting, JavaScript continues executing other tasks. Once the long-running task is finished, it notifies the program through a callback, Promise, or async/await.

To Summarize Synchronous vs Asynchronous JS:

When three images are on a marathon, in a:

Synchronous system, three images are in the same lane. One can't overtake the other. The race is finished one by one. If image number 2 stops, the following image stops.

Asynchronous system, the three images are in different lanes. They'll finish the race on their own pace. Nobody stops for anybody:

Synchronous and Asynchronous Code Examples

To test a synchronous system, write this code in JavaScript:

result :

Asynchronous code example

Let's say it takes two seconds to eat some ice cream. Now, let's test out an asynchronous system. Write the below code in JavaScript.

Result :

Now that you know the difference between synchronous and async operations, let's build our ice cream shop.

HTML DOM API

vidhya murali — Thu, 02 Jul 2026 07:31:56 +0000

Application Programming Interface

The DOM API (Application Programming Interface) is a set of Methods and Properties that allow JavaScript to change the content, structure, and style of any HTML elements.

An API Method is an Action that you can do on an HTML element.

An API Property is a Value that you can access on an HTML element

document is the HTML document.
getElementById() is a document method.
myPara = getElementById("demo") retrieves the "demo" element.
innerHTML is an element property.
myPara.innerHTML = "Hello World!" changes the property.

HTML DOM API Abilities

The DOM API provides us with the ability to:

Find and select elements
Change element content and attributes
Add, remove, or modify elements
Change CSS styles
Add event listeners to react to user input

JavaScript is the Language

The DOM API is a standard for how to get, change, add, or delete HTML DOM elements.

JavaScript is the language used in browsers to access the DOM through the API.

API Methods and Properties
Developers use global objects like document and window as entry points to any API.

If you want to access any element in an HTML page, you always start with accessing the document object. The document object represents your web page.

To manipulate HTML with JavaScript, you first need to select an element.

Below are some examples of how you can use the document object to access HTML:

Accessing Element Content

Accessing Element Attributes

Changing Element Attributes

The HTML DOM

vidhya murali — Thu, 02 Jul 2026 03:46:04 +0000

HTML Document Object Model

The HTML DOM (HTML Document Object Model) is an Object Model for HTML Documents.

The HTML DOM is a tree of Nodes that represents an HTML Page

The DOM Tree

When a web page loads, the browser creates a tree-like representation of the HTML document.
Accessing HTML Elements
The HTML DOM can be used to access HTML elements.

The most common way to access an HTML element is to use the id of the element:

Each part of the document are nodes in the tree:

Accessing HTML Elements

The HTML DOM can be used to access HTML elements.

The most common way to access an HTML element is to use the id of the element:

In the example above, the getElementById method used id="demo" to find the element.

id="demo" is an HTML property
getElementById() is a DOM Method
innerHTML is a DOM Property

The World Wide Web Consortium

The DOM is a W3C Standard (World Wide Web Consortium):

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The W3C DOM standard is separated into 3 different parts:

Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents