DEV Community: Madhan Raj

React vs React DOM

Madhan Raj — Wed, 15 Jul 2026 17:31:41 +0000

React is a JavaScript library used for building user interfaces, especially for single-page applications. React DOM is a separate package that enables React to update and render UI components on the web browser by directly interacting with the browser's Document Object Model (DOM), ensuring smooth, dynamic user experiences by not reloading the whole page.

Differences between the React and React Dom

Advantages of React

Virtual DOM for Efficiency: React uses a virtual DOM to quickly figure out what needs updating, making apps faster and more responsive without reloading the entire page.
Ideal for Single-Page Applications (SPAs): React is perfect for single-page applications(SPA), where the content updates dynamically without needing to reload the whole page, giving users a smoother experience.
Reusable Components: React allows developers to build applications using reusable components, making code easier to manage, test, and scale.
One-Way Data Binding: React allows one way data binding which means that the data will flow in one direction, which makes it easier to understand and debug. This helps developers manage and track how data changes across the app.

Disadvantages of React

Documentation Limitations: While React's official website offers good documentation, some developers find it lacking in detailed explanations or depth for complex use cases. This can make it challenging for newcomers to grasp more advanced concepts.
Complex Advanced Features: React's basic concepts are easy to understand, but advanced features use complex parts of JavaScript. The many advanced topics can make it hard for developers to master React fully.
Frequent Updates: React is updated often, and new versions sometimes introduce changes that break old code, requiring developers to keep up with updates.

Advantages of React DOM

Efficient Updates: React DOM updates only the parts of the UI that have changed, making updates faster and reducing unnecessary re-rendering.
Virtual DOM Optimization: By utilizing a virtual DOM, ReactDOM minimizes direct manipulation of the browser’s DOM, enhancing speed and overall app performance.
Cross-Browser Compatibility: React DOM ensures that your app works consistently across different web browsers, handling compatibility issues automatically.
Cross-Browser Compatibility: React DOM helps in creating smooth, dynamic interfaces by efficiently handling the changes in the UI, resulting in a better user experience.

Disadvantages of React DOM

Initial Load Time: React DOM may take time to load and render large applications initially, affecting the startup speed.
SEO Limitations: By default, ReactDOM does not render content for search engines, making SEO optimization challenging without using additional tools like server-side rendering
Complexity for Large Apps: For very large applications, the virtual DOM utilized by ReactDOM can introduce unnecessary complexity and overhead, which may lead to slower performance.

Reference
https://www.geeksforgeeks.org/reactjs/react-vs-react-dom/

REACT Components

Madhan Raj — Tue, 14 Jul 2026 17:06:27 +0000

REACT Components
Components are like functions that return HTML elements.
React Components

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.

In older React code bases, you may find Class components primarily used.

It is now suggested to use Function components along with Hooks, instead of Class components.

Class components are still supported, check the Class components section for more information.
Create Your First Component

When creating a React component, the component's name MUST start with an upper case letter.

React components returns HTML code.

Example

Create a Function component called Car


function Car() {
  return (
    <h2>Hi, I am a Car!</h2>
  );
}

Rendering a Component

Now your React application has a component called Car, which returns an

element.

To use this component in your application, refer to it like this:
Example


Display the Car component in the "root" element:

createRoot(document.getElementById('root')).render(
  <Car />
)
``
**Props**

Arguments can be passed into a component as props, which stands for properties.

You send the arguments into the component as HTML attributes.

You will learn more about props in our React Props chapter.
**Example**

Use an attribute to pass a color to the Car component, and use it in the render function:

function Car(props) {
return (

I am a {props.color} Car!

);
}






**Components in Components**

We can refer to components inside other components:
**Example**

Use the Car component inside the Garage component:

function Car() {
  return (
    <h2>I am a Car!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}


createRoot(document.getElementById('root')).render(
  <Garage />
);



**Reference**
https://www.w3schools.com/react/react_components.asp

Introduction to REACT

Madhan Raj — Mon, 13 Jul 2026 16:29:31 +0000

What is React?

React is a front-end JavaScript library.

React was developed by the Facebook Software Engineer Jordan Walke.

React is also known as React.js or ReactJS.

React is a tool for building UI components.

How does React Work?

React creates a VIRTUAL DOM in memory.

Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.

React only changes what needs to be changed!

React finds out what changes have been made, and changes only what needs to be changed.

You will learn the various aspects of how React does this in the rest of this tutorial.
What You Should Already Know

Before you continue you should have a basic understanding of the following:

HTML
CSS
JavaScript

If you want to study these subjects first, find the tutorials on our Home page.
React.JS History

Latest version of React.JS is 19.2.

Initial release to the Public (version 0.3.0) was in July 2013.

React.JS was first used in 2011 for Facebook's Newsfeed feature.

Facebook Software Engineer, Jordan Walke, created it.

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

Javascript Fetch API

Madhan Raj — Fri, 10 Jul 2026 10:52:23 +0000

JavaScript Fetch API
Examples

fetch(file)
.then(x => x.text())
.then(y => myDisplay(y));

Fetch is based on async and await. The example might be easier to understand like this:

async function getText(file) {
  let x = await fetch(file);
  let y = await x.text();
  myDisplay(y);
}

Use understandable names instead of x and y:

async function getText(file) {
  let myObject = await fetch(file);
  let myText = await myObject.text();
  myDisplay(myText);
}

Description

The fetch() method starts the process of fetching a resource from a server.

The fetch() method returns a Promise that resolves to a Response object.

Syntax
fetch(file)

Parameters
Parameter | Description
file | Optional.
The name of a resource to fetch.
Return Value

Type | Description
Promise | A Promise that resolves to a Response object.

Reference
https://www.w3schools.com/jsref/api_fetch.asp

Promise in Javascript

Madhan Raj — Thu, 09 Jul 2026 18:06:31 +0000

JavaScript Promises

A Promise represents the eventual result of an asynchronous operation.

It acts as a placeholder for a value that is not available yet.

Instead of waiting for the operation to finish, JavaScript continues running other code.

When the operation completes, the Promise is either fulfilled with a value or rejected with an error.
Why Promises?

Callbacks work well for simple asynchronous tasks.

However, when several asynchronous operations depend on each other, callbacks can become deeply nested.

Promises provide a cleaner and more readable way to organize asynchronous code.
Example

step1(function(result1) {
  step2(result1, function(result2) {
    step3(result2, function(result3) {
      display(result3);
    });
  });
});

The style above is often called callback hell.

Promises let you write the same logic in a cleaner way.
Same Flow with Promises
Example

step1()
  .then(step2)
  .then(step3)
  .then(display);

Each then() waits for the previous Promise to finish.

The code is flatter and easier to read.
Promise States

A Promise acts as a placeholder for a value that will be available at some point in the future, allowing you to handle asynchronous code in a cleaner way than traditional callbacks.

Every Promise is always in one of 3 states.
State Description
Pending The initial state.
The operation has started but is not fulfilled or rejected.
Fulfilled The operation has completed and a value is available.
Rejected The operation has failed and a value (error) is available.

Pending
│
├────────► Fulfilled
│
└────────► Rejected

A promise is considered settled if it is fulfilled or rejected (not pending).
Promises and JavaScript APIs

Many web APIs return promises.

fetch() is a common example.
Example

fetch("fetch.txt")
.then(function(response) {
  return response.text();
})
.then(function(data) {
  myDisplayer(data);
})
.catch(function(error) {
  myDisplayer(error);
});

This is promise-based async programming.

Most of the time you will use Promises returned by JavaScript APIs.

But you can also create your own Promise.

Creating a Promise

Here is how to CREATE a Promise:
Syntax

let myPromise = new Promise(function(resolve, reject) {

// Code that may take some time

  resolve(value); // when successful
  reject(value);  // when error
});

The promise constructor takes a function with two parameters.
Parameter Description
resolve function to run if finishes successfully
reject function to run if finishes with an error

Call resolve() when the operation succeeds.

Call reject() when it fails.
Using a Promise

Here is how to USE a Promise:
Syntax

// USE a Promise
myPromise.then(
  function(value) { /* code if success */ },
  function(value) { /* code if error */ }
);

then() takes two arguments, one callback function for success and another for failure.

Both are optional, so you can add a callback function for success or failure only.
Examples

// Create a Promise
let myPromise = new Promise(function(resolve, reject) {

// Code that may take some time

  let success = true;
  if (success) {
    resolve("Done");
  } else {
    reject("Failed");
  }
});

// Use the Promise
myPromise.then(
  function(value) {myDisplayer(value);},
  function(value) {myDisplayer(value);}
);

// Create a Promise
let myPromise = new Promise(function(resolve, reject) {

// Code that may take some time

  let success = false;
  if (success) {
    resolve("Done");
  } else {
    reject("Failed");
  }
});

// Use the Promise
myPromise.then(
  function(value) {myDisplayer(value);},
  function(value) {myDisplayer(value);}
);

A promise represents a value that will be available later.

A promise is a container for a future result.

The result can be a value or an error.
The then() Method

The then() method runs when a Promise is fulfilled.
Example

fetch("fetch.txt")
.then(function(response) {
  return response.text();
})
.then(function(data) {
  myDisplayer(data);
});

The first then() receives the fetch response.

The second then() receives the data returned by the first.
The catch() Method

If a Promise is rejected, catch() handles the error.
Example

fetch("fetch.txt")
.then(function(response) {
  return response.text();
})
.then(function(data) {
  myDisplayer(data);
})
.catch(function(error) {
  myDisplayer(error);
});

Reference
https://www.w3schools.com/js/js_promise.asp

CallBack and CallBack Hell in JS

Madhan Raj — Wed, 08 Jul 2026 11:03:40 +0000

In JavaScript, callbacks are used for handling operations like reading files and making API requests. When there is excessive nesting of the functions it leads to a problem known as the callback hell. Due to this, it becomes difficult to read the code, debug, and maintain. But when we implement the promises and async/await it helps in improving the code.

What are Callbacks in JavaScript?

In JavaScript, callbacks are functions that are passed as arguments from one function to another and are executed after the completion of a certain task. They are commonly used in asynchronous operations, such as reading files, making HTTP requests, or handling user input.

A function can accept another function as a parameter.
Callbacks allow one function to call another at a later time.
A callback function can execute after another function has finished.

How Do Callbacks Work in JavaScript?

JavaScript executes code line by line (synchronously), but sometimes we need to delay execution or wait for a task to complete before running the next function. Callbacks help achieve this by passing a function that is executed later.
Example of a Callback

function greet(name, callback) {
    console.log(`Hello, ${name}!`);
    callback();  // calling the callback function
}

function afterGreet() {
    console.log('Greeting is complete!');
}

greet('Anjali', afterGreet);

Output

Hello, Anjali!
Greeting is complete!

Problem with Callbacks
Callback Hell (Pyramid of Doom)

When multiple asynchronous operations depend on each other, callbacks get deeply nested, making the code hard to read and maintain.


getUser(userId, (user) => {
    getOrders(user, (orders) => {
        processOrders(orders, (processed) => {
            sendEmail(processed, (confirmation) => {
                console.log("Order Processed:", confirmation);
            });
        });
    });
});

What is Callback Hell?

Callback Hell in JavaScript can be defined as the situation where we have nested callbacks(functions passed as arguments to other functions) which makes the code difficult to read and debug. The term "callback hell" describes the deep nesting of functions that can result in poor code readability and difficulty in debugging, especially when handling multiple asynchronous operations.

function task1(callback) {
    setTimeout(() => {
        console.log("Task One completed");
        callback();
    },);
}

function task2(callback) {
    setTimeout(() => {
        console.log("Task Two completed");
        callback();
    },);
}

task1(function () {
    task2(function () {
        console.log("Both tasks completed");
    });
});

Output

Task One completed
Task Two completed
Both tasks completed

In this example

The two tasks (task1 and task2) are executed one after the other.
Each task has a callback that triggers the next task, causing the callback to be nested inside the other, leading to Callback Hell.

Solution to Callback Hell
Promises

Promises can help in avoiding the callback hell by providing the structured way to handle the asynchronous operations using the .then() method. Due to which the code becomes more readable by avoiding the deeply neseted callbacks.

For more details read this article - JavaScript Promises

Async/await

Async/await can help in avoiding the callback hell by writing the asynchronous code that looks like the synchronous code due to which the code becomes more cleaner and readable and reduces the complexity.

Reference
https://www.geeksforgeeks.org/javascript/what-to-understand-callback-and-callback-hell-in-javascript/

JavaScript Closures

Madhan Raj — Tue, 07 Jul 2026 14:25:19 +0000

JavaScript variables can belong to:
The local scope
The global scope

Global variables can be made local (private) with closures.

Closures make it possible for a function to have "private" variables.

A closure is created when a function remembers the variables from its outer scope, even after the outer function has finished executing.

Closures are an advanced topic.

Make sure you understand JavaScript functions and scope first.

JavaScript Functions

JavaScript Scope

Local Variables

A local variable is a "private" variable defined inside a function.

A function can access all variables in the local scope.
Example

a is a local variable defined inside the function:

function myFunction() {
  let a = 4;
  return a * a;
}

Global Variables

A global variable is a "public" variable defined outside a function.

A function can access all variables in the global scope:
Example

a is global variable defined outside the function:

let a = 4;
function myFunction() {
  return a * a;
}

In a web page, global variables belong to the page.

Global variables can be used (or changed) by all scripts in the page.

A local variable can only be used inside the function where it is defined. It is private and hidden from other functions and other scripting code.

Global and local variables with the same name are different variables. Modifying one, does not modify the other.

Undeclared variables (created without a keyword var, let, const), are always global, even if they are created inside a function.
Example

The variable a is a global variable because it is undeclared:

function myFunction() {
  a = 4;
}

REFERENCE
https://www.w3schools.com/js/js_function_closures.asp

Document Object Model [DOM] CRUD Operations

Madhan Raj — Fri, 03 Jul 2026 18:16:45 +0000

Introduction to DOM Manipulation

The Document Object Model (DOM) is a programming interface provided by the browser that represents an HTML document as a tree-like structure. Every HTML element, attribute, and piece of text becomes an object that JavaScript can access and manipulate.
Using DOM manipulation, We can:

Access HTML elements

Create new elements

Update existing content

Add or remove attributes

Delete elements dynamically

Build interactive web applications
For example, when you click a button and the webpage updates without refreshing, JavaScript is usually manipulating the DOM behind the scenes.

1. Accessing Elements

 getElementById()
    getElementsByClassName()
    getElementsByTagName()
    querySelector()
    querySelectorAll()

These are the main DOM element selection (accessing) methods in JavaScript.
Before modifying an element, we must first access it from the DOM.
2. Creating Elements

Creating elements means generating new HTML elements dynamically using JavaScript.

createElement()

Creates a new HTML element.
Syntax

document.createElement("tagName");

Example

const heading = document.createElement("h1");

heading.innerText = "Welcome to My Website";

console.log(heading);

Output

<h1>Welcome to My Website</h1>

Note: The element is created in memory and will not appear on the page until it is added to the DOM.
3. Adding Elements

After creating an element, it must be inserted into the webpage.
append()

Adds content at the end of a parent element.
Example

const container = document.getElementById("container");

const p = document.createElement("p");
p.innerText = "New Paragraph";

container.append(p);

Paragraph is added as the last child of that Container.
appendChild()

Adds a single node as the last child of a parent element.
Example


const list = document.getElementById("list");

const li = document.createElement("li");
li.innerText = "Apple";

list.appendChild(li);

Adds the list item at the end.
prepend()

Adds content at the beginning of a parent element.
Example

const container = document.getElementById("container");

const h1 = document.createElement("h1");
h1.innerText = "Welcome";

container.prepend(h1);

Heading appears before all existing children.
before()

Inserts an element before another element.
Example

const para = document.getElementById("para");

const heading = document.createElement("h2");
heading.innerText = "Article Title";

para.before(heading);

Heading appears before the paragraph.
after()

Inserts an element after another element.
Example

const para = document.getElementById("para");

const button = document.createElement("button");
button.innerText = "Read More";

para.after(button);

Button appears after the paragraph.
insertBefore()

Inserts a new element before a specified child element.
Example

const ul = document.getElementById("list");

const newItem = document.createElement("li");
newItem.innerText = "Mango";

const firstItem = ul.children[0];

ul.insertBefore(newItem, firstItem);

Mango becomes the first list item.

Use appendChild() when adding one element node.
Use append() when you want to add multiple elements or text in a single statement.
append() Adding multiple Element


<div id="container"></div>

const container = document.getElementById("container");

const h1 = document.createElement("h1");
h1.innerText = "Title";

const p = document.createElement("p");
p.innerText = "Paragraph";

container.append(h1, p);

Output

<div id="container">
    <h1>Title</h1>
    <p>Paragraph</p>
</div>

You cannot do this with appendChild().
4. Updating Elements

Updating elements means changing the content of existing HTML elements.
innerText

Returns or updates only the visible text.
Example

<p id="text">Hello World</p>

<script>
document.getElementById("text").innerText = "Welcome";
</script>

Output

Welcome

textContent

Returns or updates all text content, including hidden text.
Example

<p id="text">Hello World</p>

<script>
document.getElementById("text").textContent = "JavaScript DOM";
</script>

Output

JavaScript DOM

innerHTML

Returns or updates HTML content inside an element.
Example

<div id="box"></div>

<script>
document.getElementById("box").innerHTML =
"<h2>Welcome</h2><p>This is a paragraph.</p>";
</script>

Output

Welcome
This is a paragraph.

Note: innerHTML can add HTML tags, while innerText and textContent add only plain text.
5. Working with Attributes

Attributes provide additional information about HTML elements.
setAttribute()

Adds or updates an attribute.
Example

const image = document.getElementById("photo");

image.setAttribute("src", "image.jpg");

Output

<img src="image.jpg">

getAttribute()

Gets the value of an attribute.
Example

const image = document.getElementById("photo");

console.log(image.getAttribute("src"));

Example

const image = document.getElementById("photo");

image.removeAttribute("src");

Output

<img>

hasAttribute()

Checks whether an attribute exists.
Example

const image = document.getElementById("photo");

console.log(image.hasAttribute("src"));

Output

true

setAttribute() does not append values to an existing attribute. It sets the attribute to the exact value you provide.

Syntax

element.setAttribute(attributeName, value);

With id

Example

<p id="para">Hello</p>

const p = document.getElementById("para");

p.setAttribute("id", "message");

Output


<p id="message">Hello</p>

The old id="para" is replaced by id="message".

Since an element should have only one ID, the previous ID is overwritten.
With class

Example

<p class="text">Hello</p>

const p = document.querySelector("p");

p.setAttribute("class", "heading");

Output

<p class="heading">Hello</p>

The old class text is removed and replaced with heading.
Multiple Classes

Suppose you have:

<p class="text">Hello</p>

p.setAttribute("class", "text active");

Output

<p class="text active">Hello</p>

Now the element has two classes:

text

active
But notice that you're still replacing the entire class attribute value with "text active".

If You Want to Add a Class Without Removing Existing Ones
Use classList.add()
Example

<p class="text">Hello</p>

p.classList.add("active");

Output

<p class="text active">Hello</p>

Here the existing class text remains, and active is added.

setAttribute() replaces the entire attribute value. It does not merge or append automatically. For classes, classList is usually the better choice when you want to add or remove classes dynamically.

We can do the same things simply without using these functions.
Changing an ID

<p id="para">Hello</p>

const p = document.getElementById("para");

p.id = "message";

**Output**

<p id="message">Hello</p>

Removing an ID

p.id = "";

Output


<p>Hello</p>

Changing a Class

<p class="text">Hello</p>

p.className = "heading";

Output

<p class="heading">Hello</p>

Adding Multiple Classes

p.className = "text active";

Output

<p class="text active">Hello</p>

Removing All Classes

p.className = "";

Output

<p>Hello</p>

For common attributes (id, class, src, href, value), developers usually use the property approach because it's shorter and easier to read. setAttribute() and removeAttribute() are more useful when working with custom attributes.

6. Removing Elements

Removing elements means deleting HTML elements from the DOM.
remove()

Removes an element from the webpage.
Example


<p id="message">This message will be removed.</p>

<script>
const msg = document.getElementById("message");

msg.remove();
</script>

The paragraph is completely removed from the webpage.
DOM CRUD Operations Summary

CRUD stands for Create, Read, Update, and Delete.

Example CRUD Flow

// Create
const p = document.createElement("p");

// Update
p.innerText = "Hello DOM";

// Add to page
document.body.appendChild(p);

// Delete
p.remove();

DOM Manipulation is one of the most important concepts in JavaScript because it allows developers to interact with and modify web pages dynamically. By learning how to access, create, add, update, and remove elements, you can build interactive applications such as to-do lists, calculators, form validators, and many other modern web projects. Mastering these DOM methods is a strong foundation for learning advanced JavaScript frameworks and front-end development.
References

JavaScript Math Reference

Madhan Raj — Thu, 02 Jul 2026 06:47:25 +0000

JavaScript Math Object

The Math Object

The JavaScript Math object allows you to perform mathematical tasks.

The Math object is static.

All methods and properties can be used without creating a Math object first.
Math.PI;
Math Properties (Constants)

The syntax for any Math property is : Math.property.

JavaScript provides 8 mathematical constants that can be accessed as Math properties:
Example

Math.E        // returns Euler's number
Math.PI       // returns PI
Math.SQRT2    // returns the square root of 2
Math.SQRT1_2  // returns the square root of 1/2
Math.LN2      // returns the natural logarithm of 2
Math.LN10     // returns the natural logarithm of 10
Math.LOG2E    // returns base 2 logarithm of E
Math.LOG10E   // returns base 10 logarithm of E

Math Methods

The syntax for Math any methods is : Math.method(number)

Number to Integer

There are 4 common methods to round a number to an integer:

Math.round()
Math.round(x) returns the nearest integer:
Examples

Math.round(4.6);
Math.round(4.5);
Math.round(4.4);

Math.ceil()
Math.ceil(x) returns the value of x rounded up to its nearest integer:
Example

Math.ceil(4.9);
Math.ceil(4.7);
Math.ceil(4.4);
Math.ceil(4.2);
Math.ceil(-4.2);

Math.floor()

Math.floor(x) returns the value of x rounded down to its nearest integer:
Example

Math.floor(4.9);
Math.floor(4.7);
Math.floor(4.4);
Math.floor(4.2);
Math.floor(-4.2);

Math.sqrt()

Math.sqrt(x) returns the square root of x:
Example

Math.sqrt(64);

Reference
https://www.w3schools.com/js/js_math_reference.asp

Software Development Life Cycle[SDLC]

Madhan Raj — Wed, 01 Jul 2026 18:01:36 +0000

The Software Development Life Cycle (SDLC) is a structured process used to plan, design, develop, test, deploy, and maintain software. It ensures a systematic workflow and helps align software development with business goals and user requirements.

Provides a clear and organized framework for managing development phases
Helps in early detection of defects, reducing overall cost and time
Ensures high-quality software delivery that meets user expectations

Stages of the Software Development Life Cycle

The Software Development Life Cycle (SDLC) typically consists of six or seven stages, depending on the development model used.
Stage 1: Planning & Feasibility Analysis

This stage determines whether the project is technically, financially, and operationally feasible.

Activities: Feasibility analysis, cost estimation, scheduling, resource planning
Output: Project Plan, Feasibility Report
Key Roles: Project Managers, Senior Engineers, Stakeholders

Stage 2: Requirement Specification (SRS)

In this stage, detailed functional and non-functional requirements are documented clearly and approved by stakeholders.

Activities: Requirement gathering, validation, documentation
Output: Software Requirement Specification (SRS)
Key Roles: Business Analysts, Product Owners

Stage 3: System Design

In this stage, the approved requirements are transformed into a technical blueprint for implementation.

High-Level Design (HLD): Defines system architecture, technology stack, database design, and major modules.
Low-Level Design (LLD): Specifies component logic, APIs, data structures, and workflows.
Output: Design Document Specification (DDS)

Stage 4: Development (Coding)

Developers build the software based on the approved design.

Activities: Coding, code reviews, unit testing, version control management
Tools: IDEs, version control systems, debuggers
Output: Source code, executable application
Key Roles: Frontend, Backend, Full Stack Developers

Stage 5: Testing

Testing ensures the software meets requirements and is free from defects before release.

Types of Testing include:

Unit Testing: Verifies individual components
Integration Testing: Ensures modules work together
System Testing: Validates the complete system
User Acceptance Testing (UAT): Confirms business requirements are met

Stage 6: Deployment

The tested software is released to users.

Activities: Production setup, deployment, smoke testing
Modern Approach: Continuous Integration and Continuous Deployment (CI/CD) pipelines for faster and reliable releases
Output: Live application
Key Roles: DevOps Engineers, Release Managers

Stage 7: Maintenance

Post-deployment support ensures long-term usability.

Activities: Bug fixes, performance tuning, updates, feature enhancements
Output: Patches, updates, new versions
Key Roles: Support Engineers, Developers

Software Development Life Cycle Models

Software Development Models are structured frameworks that guide the planning, execution, and delivery of software projects. They define the sequence of development stages, such as requirements, design, coding, testing, and deployment.
Common Models

Waterfall Model
Agile Model
V-Model
Spiral Model
Incremental Model
RAD Model

Importance of SDLC

Provides a clear and organized development framework.
Improves planning, cost control, and project management.
Ensures better quality through defined testing phases.
Helps deliver software that meets user and business needs.

Embedding Security into the SDLC

Security is integrated throughout the Software Development Life Cycle using a DevSecOps approach. It is built into every stage, from design to deployment, ensuring continuous protection.

Vulnerabilities are identified and fixed early in the development process.
Automated security checks are integrated into build and CI/CD pipelines.
Security becomes a shared responsibility across development, testing, and operations teams.

Embedding security into the SDLC reduces risks, improves software resilience, and enables the delivery of safer applications.
Common SDLC Mistakes Teams Make

Even experienced teams misuse SDLC by focusing on form over substance. Some frequent mistakes include:

Treating documentation as the goal: Producing SRS and design documents without validating assumptions with real users.
Late or inadequate testing: Testing is rushed or reduced due to time pressure, increasing post-release defects.
Ignoring non-functional requirements: Performance, security, and scalability are considered too late.
Poor communication between teams: Gaps between business, development, and QA lead to misaligned outcomes.
Skipping feedback loops: Limited iteration and user feedback cause issues to surface only after deployment.
Overengineering early: Designing overly complex solutions before validating core functionality.

Avoiding these mistakes requires continuous collaboration, early validation, and a mindset that values outcomes over processes.
Real Life Example of SDLC

Banking Application Development using SDLC:

Planning & Analysis: Identify banking features such as account management, fund transfers, and security requirements.
Design: Create UI designs, system architecture, databases, and technology stack.
Development: Implement frontend interfaces, backend services, and APIs.
Testing: Conduct functional, performance, and security testing.
Deployment & Maintenance: Release the application and continuously monitor, fix defects, and add enhancements.

Reasons for Project Failure Despite Following SDLC

Following SDLC does not automatically guarantee project success. Many projects fail because teams treat SDLC as a checklist rather than a decision-making framework.

Poor requirement clarity: Requirements are documented but not deeply understood, leading to incorrect assumptions and rework.
Weak stakeholder involvement: Limited feedback from users or business teams results in solutions that don’t solve real problems.
Rigid execution: Teams follow the process mechanically and resist adapting to changing business or technical realities.
Underestimated complexity: Risks related to scalability, integration, or performance are identified too late.
Lack of ownership: Roles exist on paper, but accountability for outcomes is unclear.

SDLC provides structure, but success depends on how thoughtfully it is applied.
Reference
https://www.geeksforgeeks.org/software-engineering/software-development-life-cycle-sdlc/

Document Object Model [DOM]

Madhan Raj — Tue, 30 Jun 2026 18:10:11 +0000

Definition of DOM:

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language.

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.

Nodes can also have event handlers attached to them. Once an event is triggered, the event handlers get executed.
Concepts and usage:

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

A web page is a document that can be either displayed in the browser window or as the HTML source. In both cases, it is the same document but the Document Object Model (DOM) representation allows it to be manipulated. As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.

DOM stands for Document Object Model. It is an interface that allows JavaScript to access and manipulate HTML elements dynamically.
Example : Change Text

HTML


<h1 id="title">Hello</h1>

<button onclick="changeText()">
Change
</button>

JavaScript

function changeText() {
    document.getElementById("title").innerHTML = "Welcome!";
}

Before clicking

Hello

After clicking

Welcome!

getElementById()

    getElementById() is a DOM method used to find and access an HTML element by its id.

    getElementById() is a DOM method that returns the HTML element

whose id matches the given value.

Syntax


document.getElementById("idName");

    document → Represents the entire HTML page.

    getElementById() → Searches for an element by its id.

    "idName" → The value of the id attribute in the HTML.

getElementById() is a DOM method that selects a single HTML element using its unique id. It returns the element object, allowing JavaScript to read or modify its content, style, or attributes.

Remember: getElementById() only finds the element. What you do after finding it (such as changing innerHTML, style, or value) determines the action performed on that element.
innerText

innerText is a DOM property used to get or set the visible text inside an HTML element.

innerText is a property that returns or changes the visible text content of an HTML element.

Syntax

element.innerText = "New Text";

Example 1: Get Text
HTML

<h1 id="title">Hello World</h1>

JavaScript

let text = document.getElementById("title").innerText;
console.log(text);

Output

Hello World

    Here document.getElementById("title") → Finds the
    element.

    .innerText → Reads the visible text inside it.
 Example 2: Change Text
 **HTML**

<h1 id="title">Hello</h1>

JavaScript

document.getElementById("title").innerText = "Welcome";

Before

Hello

After

Welcome

innerText → Reads or changes the visible text inside that element.
Reference
https://www.w3schools.com/js/js_htmldom.asp

JavaScript Array Iterations

Madhan Raj — Wed, 24 Jun 2026 06:57:19 +0000

JavaScript Array Iterations

Array Iteration Methods
Array iteration methods operate on every array item.

Array forEach
Array map()
Array flatMap()
Array filter()
Array reduce()
Array reduceRight()
Array every()
Array some()
Array from()
Array keys()
Array entries()
Array with()
Array Spread (...)
Array Rest (...)

JavaScript Array forEach()

The forEach() method calls a function (a callback function) once for each array element.
Example

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt += value + "<br>";
}

Note that the function takes 3 arguments:

The item value
The item index
The array itself

The example above uses only the value parameter. The example can be rewritten to:
Example

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value + "<br>";
}

JavaScript Array map()

The map() method creates a new array by performing a function on each array element.

The map() method does not execute the function for array elements without values.

The map() method does not change the original array.

This example multiplies each array value by 2:
Example

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

Note that the function takes 3 arguments:

The item value
The item index
The array itself

When a callback function uses only the value parameter, the index and array parameters can be omitted:
Example

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

JavaScript Array flatMap()

ES2019 added the Array flatMap() method to JavaScript.

The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.
Example

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap(x => [x, x * 10]);

JavaScript Array filter()

The filter() method creates a new array with array elements that pass a test.

This example creates a new array from elements with a value larger than 18:
Example

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

JavaScript Array reduce()

The reduce() method runs a function on each array element to produce a single value.

The reduce() method works from left-to-right in the array. See also reduceRight().

The reduce() method does not reduce the original array.

This example finds the sum of all numbers in an array:
Example

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

Note that the function takes 4 arguments:

The total (the initial value / previously returned value)
The item value
The item index
The array itself

Since the example above does not use the index and array parameters, it can be rewritten to:
Example

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

JavaScript Array reduceRight()

The reduceRight() method runs a function on each array element to produce a single value.

The reduceRight() works from right-to-left in the array. See also reduce().

The reduceRight() method does not reduce the original array.

This example finds the sum of all numbers in an array:
Example

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

Note that the function takes 4 arguments:

The total (the initial value / previously returned value)
The item value
The item index
The array itself

The example above does not use the index and array parameters. It can be rewritten to:
Example

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

JavaScript Array every()

The every() method checks if all array values pass a test.

This example checks if all array values are larger than 18:
Example

const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

JavaScript Array some()

The some() method checks if some array values pass a test.

This example checks if some array values are larger than 18:
Example

const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

JavaScript Array.from()

The Array.from() method returns an Array object from:

Any iterable object

Any object with a length property

Example

Create an Array from a String:
let text = "ABCDEFG";
Array.from(text);

JavaScript Array Spread (...)

The ... operator expands an array into individual elements.

This can be used join arrays:
Example 1

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];

In the example above, ...arr1 expands arr1 into single elements, ...arr2 expands arr2 into single elements, and arr3 is constructed using ...arr1 and ...arr2.
Example 2

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "Des"];

const year = [...q1, ...q2, ...q3, ...q4];

The spread operator (...) can be used to copy an array:
Example 3

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

The spread operator (...) can be used to pass arguments to a function:
Example 4

const numbers = [23,55,21,87,56];
let minValue = Math.min(...numbers);
let maxValue = Math.max(...numbers);

Reference
https://www.w3schools.com/js/js_array_iteration.asp