DEV Community: mohandass

BrowserRouter

mohandass — Wed, 27 May 2026 19:40:33 +0000

A BrowserRouter is the built-in context provider component from the `react-router-dom library that enables client-side routing web application.It acts as the orchestration engine for your app's navigation, allowing the user interface to sync seamlessly with the browser's address bar without triggering a full page refresh.
BrowserRouter utilizes the native HTML5 History API (pushState, replaceState, and the popstate event) to dynamically manipulate the URL path. When a user triggers a route change:
If the React is not supported for BrowserRouter.So open the Terminal and use this comment npm install react-router-dom
Router (): This acts as the parent container that wraps your entire application. It monitors changes in the browser's address bar using the HTML5 History API.
Routes (): This works as a central switchboard container. It scans through all defined child options to find the single closest path match for the active URL.
Route (): This defines an individual path mapping. It accepts a path property (the target URL string) and an element property (the exact component layout to render).

Example:

Can we use the Link only using inside the BrowserRouter

useNavigate()

The useNavigate hook in react-router-dom returns a function that allows you to change routes programmatically inside your React components. It is primarily used for imperative navigation, meaning you change the URL in response to specific code logic or events (like form submissions, button clicks, or authentication status changes) rather than relying on a static link.
To use it, import it from react-router-dom and initialize it inside your functional component

Example:

Reference:https://www.geeksforgeeks.org/reactjs/browserrouter-in-react/

https://www.w3schools.com/react/react_router.asp

React Hooks

mohandass — Mon, 18 May 2026 16:43:15 +0000

React hooks are function that allow you to "hook into" React state And lifecycle from function components. Introduced React 16.8,they Eliminated the need for complex class components for most use cases,Making code more readable and reusable.

Most Frequently Used Hooks

useState
useEffect
useContext
useRef
useMemo
useCallback
useReducer

1. useState

useState is hooks in React used to create and manage state inside functional components.State means data that can change over time.

Common Data Types in used to useState()

String - useState("")
Number - useState(0)
Boolean - useState(false)
Array - useState([])
Object - useState({})

What is real DOM ?

The real DOM(Document Object Model ) is the actual structural representation of a webpage provided by the browser. It organized the HTML into a tree of object, allowing programing language like javaScript to dynamically read,style and alter the page's content,structure,and attributes.
Every changes made the Real DOM directly translates to visual updates on the user's screen.
The Heavy process in Real DOM. Modifying the Real DOM is relatively slow and resource heavy.Because the browser recalculate the CSS style, page layouts,and repaint the screen with every tiny changes updating it frequently can cause performance lag in complex with web application.

What is virtual DOM ?

The virtual DOM(VDOM) is a lightweight, in memory representation of the Real Document Object Model (DOM) used by React to optimized UI rendering.Instead of directly updating the slow browser DOM for every change,the system update the VDOM,compares it to a previous snapshot(diffing) and only update the necessary changes to the Real DOM.

How it's Works

Render: When data changes, the entire UI is re-rendered in the Virtual DOM representation.
Diffing: The framework compares the new VDOM with a snapshot of the old VDOM taken just before the update.
Update: The framework calculates the minimal set of changes needed and applies only those changes to the real DOM.
Lightweight Representation: It is a JavaScript object tree that represents what the user interface should look like, making it fast to create and manipulate in memory.

What is Components in React

mohandass — Thu, 14 May 2026 16:30:47 +0000

1. What is Components in React ?

A react, Components are the independent and reusable building block Used to create user interfaces(UI). They Function similarly to JavaScript functions but operate in isolation To return JSX (JavaScript XML), which describes what should appear on The screen. You build small parts Separately then combine them to create a full website or app.

Examples:

Button
Navbar
Card
Footer
Product Box
Login From

Each of these can be a separate React component.

Simple Example
Normal HTML like:
<button>welcome!</button>

React Component

function Button() {
  return <button>Welcome!</button>;
}

export default Button;

-Button is the component name
-Component names must start with CAPITAL letters
-Component must return one parent element
-It's return UI using JSX
-You can reuse it anywhere

Types of Components

There are two primary ways to define a components in React

Functional Component (Most Common)
Class Component (Old Method)

2. What is React Folder Structure ?

A React folder structure is they way files and folders are organized inside the React project.

If you create a project using Vite

npm create vite@latest

You'll get somethings like this :

Important Folders & Files

1. node_modules/

Contains:

Installed packages
React library
Dependencies

Example:

-React
-React DOM
-Vite packages

If you Never edit this folder manually.

2. public/

Stores static files:

Images
Fonts
Videos
Icons

3. src/ (Most Important)

This is where most contains React code is written.

Usually contains :

Components
Hooks
pages
CSS
API calls

4. assets/

It's stores projects assets.

Images
Icons
Videos

5. styles

CSS files.

Navbar.css
home.css
globle.css

6. App.jsx

Main component.

function App() {
  return <h1>Hello React</h1>;
}

export default App;

This is control application UI.

7. main.jsx

Entry point of the app.

8. index.html

Main HTML file.

<div id="root"></div>

React renders insides this root div.

8. package.json

Project information and dependencies.

contains:

Scripts
Packages
Versions

What is React.js

mohandass — Wed, 13 May 2026 16:50:36 +0000

1. What is React j.s
React is a free and open source JavaScript library. It's used for Building user interfaces(UIs) specifically for single-page Applications(SPA). Created by Facebook(now meta) in 2013,it's allows Developers create large web application that can change data without Reloading the page.

React helps developers create:

Websites
Single Page Applications (SPA)
Dashboards
E-commerce apps
Social media apps
Mobile apps (with React Native)

Why React was Created

React was created to solve problems developers faced while building larger and dynamic web applications.

Before React, developers updated HTML manually using JavaScript.

Example:
document.getElementById("title").innerHTML = "welcome";

When the application become larger:

Code became messy
Updating UI became difficult
Performance issues happened

React solving this by introducing :

Components,Virtual DOM,State management,Reusable UI

2. What is the different between library and Framework ?

The primary difference between a library and a framework is Inversion of Control(IOC) in short, When you use a library, your are the in charge; When you use a framework, the framework is in charge.

Use a library when:

You need flexibility
Small project
Specific feature only
Want custom architecture

Use a framework when:

Building large applications
Need standard structure
Team collaboration
Faster large-scale development

Simple Concept

Library = Helper-(It helps your code)

Framework = Foundation-(Your app runs inside it)

3. What is Build Tool

A build tool is a software utility that automates the process of converting source code.which typically includes JSX, modern JavaScript (ES6+), and CSS—into a optimized, production-ready format that web browsers can understand

Why Build Tools Are Needed

Modern web applications use:

Multiple files
React components
TypeScript
SCSS
Images
APIs
Modules

Browsers cannot directly understand everything.

For example:

-Browsers do not understand JSX directly
-Browsers do not understand TypeScript directly

Build tools convert them into normal JavaScript, HTML, and CSS.

Common Examples by Language

Java - Apache Maven, Gradle
JavaScript - npm,webpack,vite
C/C++ - Make, CMake
Python - Poetry, pip

4. What is vite

Vite (pronounced “veet”) is a modern frontend build tool used to create fast web applications.It offers instant server startup and lightning-fast Hot Module Replacement (HMR), making it a popular replacement for tools like Create React App.

Why Vite Was Created

Older build tools like:

Webpack

became slow for large applications.

Problems:

-Slow startup
-Slow rebuilds
-Slow hot reload

Vite was created to solve these speed problems.

Vite helps developers:

-Start projects quickly
-Run development servers
-Bundle files
-Optimize applications

Closure

mohandass — Wed, 06 May 2026 16:21:44 +0000

A closure in javascript is a feature where an inner function retains access to variable of it's outer function.Even after that outer function has finished executing.

EXAMPLE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function bank() {
            let min_balance = 500;
            const actions = {
           deposit: function (amt) {
                min_balance = min_balance + amt;
                console.log("current balance is ",min_balance);

            },
            withdraw : function(amt){
                min_balance = min_balance - amt;
                console.log("current balance is ",min_balance);
            }

        }
return actions;



        }
        const check_bla = bank();
        check_bla.deposit(220);
        check_bla.withdraw(500);
    </script>
</body>
</html>

OUTPUT:

DOM Exercise

mohandass — Wed, 29 Apr 2026 15:58:03 +0000

EXERCISE 1.Change Text on Button Click

PROGRAM:

<body>

    <h1 id="text">welcome JavaScript</h1>
    <button id="but" onclick="changetext()">change</button>
    <script>

const heading = document.getElementById("text")
function changetext() {
    heading.innerText="welcome DOM";
}


    </script>

OUTPUT:

EXERCISE 2. Light ON/OFF

PROGRAM:

<body>
    <img id="bulb-img" src="https://www.w3schools.com/js/pic_bulboff.gif" alt="">
    <button style="color: green; padding: 10px 15px; border-radius: 20px; font-size: medium;" id="bnt1" onclick="bulb_change()">ON</button>
    <!-- <button id="butt2" onclick="bulb_normal()">off</button> -->

    <script>



function bulb_change() {
const bnt = document.getElementById("bnt1")
const bulb = document.getElementById("bulb-img")

if(bulb.src  == "https://www.w3schools.com/js/pic_bulboff.gif"){
bulb.src = "https://www.w3schools.com/js/pic_bulbon.gif"
bnt.innerText="OFF";
bnt.style.color="red"
}

else{
bulb.src = "https://www.w3schools.com/js/pic_bulboff.gif"
bnt.innerText="ON";
bnt.style.color="green"
}

}

OUTPUT:

EXERCISE 3. Count Number

PROGRAM:

<body>
    <h1>Count = <span id="number">0</span></h1>
    <button id="butt_add" onclick="increase()">+</button>
    <button id="butt_sub" onclick="decrease()">-</button>
    <button id="but_reset" onclick="Reset()">Reset</button>
    <script>
const number_input = document.getElementById("number")
let i = 0;
function increase() {

i++;
number_input.innerText = i;
}
function decrease(){
    if(i > 0){
    i--;
    number_input.innerText = i;
    }
}
function Reset() {
     i = 0;
    number_input.innerText = i;
}

OUTPUT:

EXERCISE 4. Live Character Counter

PROGRAM:

<body>
    <input id="user-input" type="text" oninput="calculate()">
    <h1 id="result">Count = <span id="number">0</span></h1>
    <script>

function calculate() {
   const num =  document.getElementById("number")
   const user = document.getElementById("user-input")
   num.innerText = user.value.length;

}

OUTPUT:

What is DOM in JavaScript and ten interview questions for DOM ?

mohandass — Mon, 27 Apr 2026 16:42:06 +0000

The Document Object Model(DOM) is a programing interface for web documents. It's represents an HTML or XML document as a tree of objects.Allowing a language like javascript to dynamically access and update the page's content, structure,and style.
DOCUMENT - is the whole HTML loaded in the browser.It is entry point to access manipulate anything 0n the page.
OBJECT - is the every part of the page is an object
document - whole page object
Elements (<div>,<h1>) - element objects
Attributes(id,class) - attributes objects.
MODEL - is a structured way (tree) to organize those objects
TREE STRUCTURE : The browser converts HTML code into a hierarchical tree.The document is the root, while elements attributes,(like <div> or <p>), and text are "nodes" within that tree.

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

Ten Interview Questions for DOM in JavaScript?

1. What is the DOM?

The Document Object Model(DOM) is a programing interface for web documents. It's represents an HTML or XML document as a tree of objects.Allowing a language like javascript to dynamically access and update the page's content, structure,and style.

2. What is the document object?

Document represents the entire web page and is the entry point to access and modify DOM elements.

3. How do you select an element in the DOM?

Use document.getElementById("id") to select a single element using it's ID

4. What is the difference between getElementById and querySelector?

getElementById - select by a ID only
querySelector - (TBD)

5. How do you change the content of an element?

Use element.innerHTML or element.textContent to modify text or HTML inside an element.

6. How do you change styles using JavaScript?

Use element.style.color = "yellow" to change the styles dynamically .

7. What is an event in the DOM?

An even is an action like a click,hover and key press that javascript can respond to.

8. How do you add an event listener? - (TBD)

9. How do you create and add a new element? - (TBD)

10. What is the difference between innerHTML and textContent?-(TBD)

JavaScript scenario questions (variables,operators,conditional statements)

mohandass — Sat, 18 Apr 2026 16:31:50 +0000

1. You are building a login system.Store username and password in variable and check whether are filled.

PROGRAM:

let name = "messi";
let password = 123456;
if(!name){
    console.log("please give user name")
}else if(!password){
    console.log("please give password")
} else{
    console.log("login successful")
}

OUTPUT:
login successful

2. Create variable to store a product's name,price,and stock.Print message like:

"iPhone cost ₹60000 and only 5 left in stock"

PROGRAM:

let name = "iPhone 16";
let price = "₹60000";
let stock =  5 ;

console.log(`${name} costs ${price} and only ${stock} left in stock.`)

OUTPUT:

iPhone 16 costs ₹60000 and only 5 left in stock.

3. Store a student's marks in 3 subjects and calculate total.

PROGRAM:

let marks = 70;
let marks1 = 90;
let marks2 = 50;
const total = marks + marks1+ marks2;
console.log("total:",total)

OUTPUT:
total: 210

4. Swap two numbers without using a their variable.

PROGRAM:

let a = 10;
let b = 7;

a=a+b;
b=a-b;
a=a-b

console.log(a)
console.log(b)

OUTPUT:
7 //a
10 //b

5. Create a variable that store whether a user is logged in or not and show a welcome message.

PROGRAM:

let isLoggedin = true;
if(isLoggedin){
    console.log("welcome!")
}else{
    console.log("please log in to continue")
}

OUTPUT:
WELCOME!

6. An e-commerce website gives 10% discount.Calculate final price.-(TBD)

7. Check whether a number is even or odd using operator.

PROGRAM:

let i = 19;
if(i % 2 ==0){
    console.log("Even Number")
}else{
    console.log("Odd Number")
}

OUTPUT:
Odd Number

8. Compare two passwords entered by user.

PROGRAM:

let password = "abc123"
let password1 = "abc123"
if(password == password1){
    console.log("Matched")
}else{
    console.log("Not Matched");
}

OUTPUT:
Matched

9.A person is eligible to vote if age >=18.Write condition.

PROGRAM:

let personAge = 15;
if(personAge >= 18){
console.log("Is Eligible for Vote")
}else{
    console.log("Is Not Eligible for Vote")
}

OUTPUT:
Is Not Eligible for Vote

10. Use logical AND to check:

User is logged in
User is admin Then allow dashboard access.

PROGRAM:

let isLoggedin = true;
let admin = true;
if(isLoggedin && admin){
    console.log("Allow dashboard access")
}else{
console.log(" Not allow dashboard access")
}

OUTPUT:
Allow dashboard access

11. Create a function that calculate total cart amount.

PROGRAM:

const cart = [300,500,450,];

function amt(acc,val){
    return acc+val;
}
const totalamt= cart.reduce(amt)
console.log("Total :",totalamt)

OUTPUT:
Total : 1250

12. Create a function to greet a user by name.

PROGRAM:

let name = "MESSI"
function greet(user){
    return greet(user)

}
console.log(`WELCOME! ${name} `)

OUTPUT:
WELCOME! MESSI

13. Create a function to convert Celsius and Fahrenheit.

PROGRAM:

function fahrenheit(celsius){
    return (celsius*9/5) + 32 + "°F"
}

console.log(fahrenheit(10))

OUTPUT:
50°F

14. Create a function that returns the largest of two numbers.

PROGRAM:

function findlargest(a,b){
    if(a > b){
        return a;
    }else{
        return b;
    }
}
const largnum = findlargest(10, 100);
console.log(largnum)

OUTPUT:
100 //b

15. Create a function to calculate EMI for a loan.-(TBD)

16. If user role is "admin" show admin panel,else show user dashboard.

PROGRAM:

let admin = false;
if(admin == true){
console.log("Show admin panel")
}else{
    console.log("Show user dashbord")
}

OUTPUT:
Show user dashbord

17. check if number is positive,negative, or zero.

PROGRAM:

function checknumber(num){
    if(num > 0){
        return "positive Number"
    }else if (num < 0){
return "negative Number"
    }else{
        return "Zero"
    }
}
const number = checknumber(11)
console.log(number)

OUTPUT:
positive Number

18. Check if a year is leap year.

PROGRAM:

let year = 2004;
if(year % 4 == 0){
    console.log("leap year")
}else{
console.log("Not a leap year")
}

OUTPUT:
leap year

19. Movie ticket pricing: Child(<12)-₹100 Adult-₹200.

PROGRAM:

let age = 15;

if(age <= 12){
    console.log("Movie ticket price ₹100")
}else{
    console.log("Movie ticket price ₹200")
}

OUTPUT:
Movie ticket price ₹200

20. If marks >=90-Grade A 75-Grade B else-Fail.

PROGRAM:

let mark = 80;
if(mark >= 90){
    console.log("Grae A")
}else if(mark >= 75){
console.log("Grade B")
}else{
    console.log("Fail")
}

OUTPUT:
Grade B

Object & Array Scenario Quections

mohandass — Fri, 17 Apr 2026 19:21:45 +0000

1. User Profile Update
You have:
const user = {
name:"vijay",
age:25,
email:"vijay@gmail.com"};

Update email and a new property isActive = true.

PROGRAM:

const user = {name:"vijay",
    age: 25,
    email: "vijay@gmail.com"
 }
 user.email = "mohan2004@gmail.com"
 user.isActive = true
 console.log(user)

OUTPUT:
{
name: 'vijay',
age: 25,
email: 'mohan2004@gmail.com',
isActive: true
}

2. Shopping Cart Total
You have:
const cart = [
{name: "shirt",price : 500},
{name: "shoes",price : 1500},
{name :"cap", price : 300}

];

Calculate total price.

PROGRAM:

const cart = [
    {name: "shirt",price : 500},
    {name: "shoes",price : 1500},
    {name :"cap", price : 300}

];

const sum = cart.map(val=> val.price).reduce((total,val)=> total+val)

console.log("total :", sum );

OUTPUT:
total : 2300

3. Find Specific Object

You have:
const user = [
{name: "vijay", age: 25},
{name: "Arun", age: 30},
{name: "Kumar", age: 28}
];

From an array of users,find the user whose name is "Arun".

PROGRAM:

const user = [
    {name: "vijay", age: 25},
    {name: "Arun", age: 30},
    {name: "Kumar", age: 28}
];
function nam(user){
    return user.name == "Arun"
}
const result = user.filter(nam);
console.log(result);

OUTPUT:
[ { name: 'Arun', age: 30 } ]

4. Add item to array

You have:
const products = [{name: "shirt", price:1500},
{name: "shoes", price:1500}];

Add a new product dynamically to an existing product array remove a product with the name "shoes" from the array.From a product list,return only items with price > 1000.

PROGRAM:

const products = [{name: "shirt", price:1500},{name: "shoes", price:1500}];

products.push({name:"watch", price:1700})



const sum = products.filter(val=>val.name!="shoes"&&val.price>1000)
console.log(sum);

OUTPUT:
[ { name: 'shirt', price: 1500 }, { name: 'watch', price: 1700 } ]

5. Count items in object

You have:
const fruits = {
apple:2,
banana:5,
mango:3
};

Find the total number of fruits.

PROGRAM:

const fruits = {
    apple:2,
    banana:5,
    mango:3
};

const newarr = Object.values(fruits)

function arr1(total,value){
    return total + value
}
const arr = newarr.reduce(arr1)
console.log("fruits total:",arr)

OUTPUT:
fruits total: 10

6. Convert array to object
You have:

const users = ["vijay","arun","kumar"];

Convert into:
{ vijay:true,
Arun:true,
Kumar:true }

PROGRAM:

const users = ["vijay","arun","kumar"];

function arr(value){
    return [value,"true"]
}
const result = users.map(arr)
const obj = Object.fromEntries(result)
console.log(obj);

OUTPUT:
{ vijay: 'true', arun: 'true', kumar: 'true' }

Javascript Array iteration methods

mohandass — Wed, 15 Apr 2026 19:27:31 +0000

Array iteration method in javascript are built in tools allows you to operate on every item in an array,One at a time.The most of the method a callback function as a arguments.Which is execute for each elements in a array.

Array Iteration Methods

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

1. forEach()

The forEach() method calls a function (a callback function) once for each array element.It's used for side effects, and returns undefined(void).

Example:

Note that the function is take 3 arguments

The item value
The item index
The array itself

Above the example used only the value arguments.

2. Array map()

The map() method create a new array performing a function on each array elements.
The map() method dose not execute the function for array elements without values.
The map() method is a non-mutating method,meaning it dose not change the original array.

Example:

Note the function is take 3 arguments:

The item value
The item index
The array itself

Above the example callback function used only the value parameter.The index and array it can be your choice.

3. flatMap()

The flatMap() method is built in array function that combines two operations into a single efficient.that is mapping and flattening,the mapping each elements using a callback function.And then flattening the result by the exactly one level.
This method is return the new array and dose not modify the original array.

Example:

Output:
[ 8, 18, 10, 14, 6 ]

4. filter()

The filter() method is create a new array containing only the elements from an existing array that pass a specific test(condition)
It's is the iterative method,that meaning it's runs a provided function for every element in the array
This method is returns a new array.it dose not change the original array

Example:

The example create a new array from elements with a value lager than 35
Note that the function take three arguments:
The item value
The item index
The array itself
Above the example callback function used only the value,The index and array parameters can be omitted.

Output:
[ 90, 50, 70 ]

5. reduce()

The reduce() method runs a function on each array element to produce a single value.
This method dose not change the original array

Example:

The example finds the sum of all number in the array.
total (accumulator) starts as the first element - 30.
Iteration starts from the second element.
Above the example is used only the value.

Output:
79

6. reduceRight()

The reduce() method runs a function on each array element to produce a single value.
But it processes the array from right to left (descending index order).

Example:

total starts as the last element - 25
Iteration starts from the second-last element
The reduce() is start from beginning
The reduceRight() is start from end

Output:
79

7. every()

The every() method test whether all elements in an array pass a specific condition.
This method return the boolean value.It returns true only if ALL elements pass the condition.If even one element fails - returns false immediately

Example:

If the example check it all array values are larger than 35

Output:
false

8. some()

The some() method is used to check if at least one element in an array passes a specific test.
It's return the boolean value.true if it finds a match, and false otherwise.

Example:

This example checks if some array values are larger than 35

Output:
true

9. Array.from()

The Array.from() method is a static method in JavaScript used to create a new, shallow-copied Array instance from an iterable or array-like object.
Any object with a length property

Example:

This Array,from is takes the string.It splits each character
And it's Take the word MESSI, break it into letters, and store them in an array.

Output:
[ 'M', 'E', 'S', 'S', 'I' ]

10. keys()-(TBD)

The keys() method of an array returns a new Array Iterator object that contains the indexes (keys) for each element in the array,not the values.
The Returns provides an Array Iterator rather than a list of values.

Example:

Output:
Object [Array Iterator] {}

12.with()

The with()method is used to update a single element in an array by returning a new array with the change applied.without changing the original array.

Example:

*arr.with(1, 10) → replace the element at index 1.Then the Index 1 currently has 30

It returns a new array with that value replaced
arr stays the same (immutable)
The newarr is the modified copy

Output:
[ 20, 30, 40 ]//unchanged
[ 20, 10, 40 ]

13. Spread (...)

The Spread (...) method is represented by three dots (...) and is used to expand or "spread" the elements of an iterable—like an array, string, or object—into individual items.
This method create a shallow copy.So dose not change the original array.

Example:

...arr1 - spreads elements: 20, 30, 40,...arr2 - spreads elements: 50, 60, 70
...arr3 is combined into a new array

Output:
[ 20, 30, 40, 50, 60, 70 ]

14. Rest (...)

The Rest (...) method is generally refers to the rest parameter (or rest operator) syntax, which is written as three dots (...) followed by a variable name. It is used to collect multiple elements and "condense" them into a single array.
The rest operator (...) allows us to destruct an array and collect the leftovers.

Example:

A first gets the first element - 20
Then second gets the second element - 30
...others are collect the remaining elements into an array - [40,50,60,]

Output:
20
30
[ 40, 50, 60 ]

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

Discuss about the topics of 1.what is callback function in js 2.Javascript is single threaded or multithreaded ? 3. Array iteration methods in js

mohandass — Tue, 14 Apr 2026 10:01:26 +0000

A callback function in javascript is a function passed as an argument into another function.
Which is then executed or (callback) inside that outer function to complete the specific task.
Later is typically when a specific event occurs or an asynchronous operation completes.

BASIC CALLBACK:

OUTPUT:
Hello, thomas
Goodbye

Types of Callback

There are two primary ways callback are used:

Asynchronous callback
Synchronous callback

ASYNCHRONOUS

Asynchronous callback is executed immediately during the execution of the main function,blocking further code until finish.

Example:Array.Prototype.forEach(),map(),and filter()-(TBD)

SYNCHRONOUS

Synchronous callback is executed at a later time after an operation like fetching data or a time.Completes allowing the rest of the program to continue running in meantime.

Examples: setTimeout(), addEventListener(), and network requests (API calls)-(TBD)

Javascript is single threaded or Multithreaded

Javacsript is a single-threaded meaning it executes one task at a time on a single main thread.While the language itself dose not support multi threads for execution it achieves concurrency doing many things at once through an event-driven,non-blocking architecture.

Array Iteration Methods in javascript

A javascript in array iteration methods are built in tools that allow you to loop through array elements and perform operations on them.These methods typically take a callback function as a argument which is executed for each items in the array.

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 (...) - (TBD)

1. forEach

The forEach() method calls a function (a callback function) once for each array element.It's used for side effects, and returns undefined.

Example:

Note that the function takes 3 arguments

The item value
The item index
The array itself

Above the example used the value and index parameters only.

OUTPUT:
50 0
30 1
25 2
10 3
60 4

WHAT IS FTP,TCP

mohandass — Sat, 11 Apr 2026 18:09:27 +0000

1. File Transfer Protocol(FTP)

File transfer protocol(FTP) is an application layer protocol that Used to file transfer between client and a server over a TCP,IP Network.It's provide a standardized method for file exchange across Different system.
- Support text,image,binary,and program files.
- Enable uploading,downloading,and remote file management.
- Used to TCP for ensure reliable communication.

Working and Uses of FTP

FTP follows a client-server model and uses two connections
Control connection (port 21) for commends.
Data connection(port 20)for file transfer.
User connect to the server use login credentials.
User navigate directories used commends ls and cd.
Using for transferring files uses get and put.
supports both active and passive mods for communication.


         control channel 
client -------------------> sever 
       <------------------                     
           Data channel

Types of Connection in FTP

FTP use two separate TCP connection to handle communication one dedicating to control information and another dedicating to actual data transfer
Control connection
data connection

FTP Data Types

FTP data types define how file contents are represented and transmitted between the client and server during file transfer.

ASCII: This data type is used for transferring text files with character encoding based on the ASCII standard.
EBCDIC: This data type is used for transferring text files encoded in IBM’s Extended Binary Coded Decimal Interchange Code.
Image (Binary): This data type transfers files as a continuous stream of bytes without any modification.
Local: This data type is used for transferring files that contain data stored in logical bytes of a specified bit length.

FTP common commends

get filename - download a single file in the server.
mget filename - download a multiple files form the server.
ls - used for list of the files in the current server directory.

Types of FTP

Anonymous FTP
Password-Protected FTP
FTPS (FTP Secure)
SFTP (SSH File Transfer Protocol)
(TBD)

2. Transmission control protocol(TCP)

Transmission control protocol is the protocol that allow the device communicate reliable a network.It is ensure that data reaches the destination correctly and a right order.Even the part of the network slow and unreliable.

It works at the Transport Layer (Layer 4) of the OSI model and is an essential part of the TCP/IP protocol suite used for Internet communication.
TCP establishes a logical connection between the sender and receiver before data transmission begins.
It ensures that data is delivered accurately and in the same order in which it was sent using acknowledgements and sequence numbers.
TCP detects errors using checksums and retransmits lost or corrupted packets to maintain data integrity.
It controls the data transmission rate to avoid overwhelming the receiver and adapts to network congestion for efficient communication.

Connection Establishment (Three-Way Handshake)

TCP is connection-orientated, meaning a connection must be established before any data is sent. This is done using a three-way handshake

TCP Handshake process

           FIN-ACK
       -------------->
             ACK
       <------------- 
           ACK-FIN
 Client<--------------Server  
             ACK
      --------------->

Step 1: FIN (Client → Server): The client sends a FIN segment to initiate closure, entering the FIN-WAIT-1 state.

Step 2: ACK (Server → Client): The server sends an ACK to acknowledge the FIN. The server enters CLOSE-WAIT (can still send data), and the client enters FIN-WAIT-2.

Step 3: FIN (Server → Client): Once the server finishes sending remaining data, it sends its own FIN segment to the client.

Step 4: ACK (Client → Server): The client sends an ACK to acknowledge the server's FIN, entering the TIME-WAIT state. After a set period, the connection is fully closed.

WORKING

Segmenting
Routing via IP
Reassembly at Receiver
Acknowledgments (ACKs)
Retransmission
Flow & Error Control
(TBD)

REFERENCE:https://www.geeksforgeeks.org/