DEV Community: mohandass

useMemo

mohandass — Wed, 10 Jun 2026 08:41:01 +0000

useMemo is a React build-in Hook that optimizes performance by caching (memorizing) the calculated result of a function between component re-renders instead of running a piece of logic on every single render React reuse the cached value useless its specific dependencies change.

Syntax :

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

The first argument is a function that returns the computed value.
The second argument is an array of dependencies. When any of these dependencies change, the function gets re-evaluated.

PROGRAM

import { useState, useMemo } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const [arr, setArr] = useState([7, 8, 9, 10])

  const showMax = useMemo(() => {

    return(Math.max(...arr))
  }, [arr])

  function addMax() {
    setArr([...arr,count + 5])
    console.log(arr);

  }
  return (
    <div>
      <h3>Count = {count}</h3>
      <button onClick={() => setCount(count + 1)}>Add</button>
      <button onClick={addMax}>Add New</button>
      <h5> Max Value = {showMax} </h5>

    </div>
  )
}

export default App

OUTPUT

useRef in React

mohandass — Mon, 01 Jun 2026 17:34:48 +0000

useRef is a build-in React Hook that returns a mutable object whose.current property persists across re-renders without triggering a component re-render when modified.It acts an "escape hatch" to store the data outside of React's standard visual render cycle.

Syntax :

import { useRef } from "react";

const ref = useRef(initialValue);

{
  current: initialValue
}

This returns a plain JavaScript object structured exactly like { current: initialValue }.
Manipulating the DOM you can directly link a ref object to an HTML node using the ref attribute. This is commonly used for managing focus, text selection, or triggering media play/pause mechanics.
Storing Mutable Variables It lets you hold variables that shouldn't reset when components re-render.
Caching Previous Props/State It allows you to preserve the historical value of state or props from the prior render cycle to run delta comparisons.

Rule

Do not read or write ref.current during rendering. Doing so makes your component impure because render operations must stay deterministic.
Only interact with refs inside event handlers or useEffect. You should update or evaluate refs within events or post-render side effects.

React Scenario Questions(useContext & useNavigate )

mohandass — Fri, 29 May 2026 05:49:46 +0000

1. 1. Login Scenario: User enters name in Login page and goes to Dashboard page. Username should be visible in Dashboard. Which hook stores the username and which hook navigates to Dashboard?

PROGRAM:

App.jsx

import { Routes, Route } from "react-router-dom"
import { createContext, useState } from "react"
import Login from "./Login"
import Dashboard from "./Dashboard"

export const nameContext = createContext()

function App() {

  const [name, setName] = useState("")

  return (
    <nameContext.Provider value={{ name, setName }}>

      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>

    </nameContext.Provider>
  )
}

export default App

Login.jsx

import { useContext } from "react"
import { useNavigate } from "react-router-dom"
import { nameContext } from "./App"

function Login() {

  const { name, setName } = useContext(nameContext)

  const navigate = useNavigate()

  function LoginPage() {
    navigate("/dashboard")
  }

  return (
    <div>

      <h1>Login Page</h1>

      <input
        type="text"
        placeholder="Enter Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={LoginPage}>
        Login
      </button>

    </div>
  )
}

export default Login

Dashboard.jsx

import { useContext } from "react"
import { nameContext } from "./App"

function Dashboard() {

  const { name } = useContext(nameContext)

  return (
    <div>

      <h1>Dashboard</h1>

      <h2>Welcome {name}</h2>

    </div>
  )
}

export default Dashboard

OUTPUT :

2. Logout Scenario: User clicks Logout in Dashboard and should go back to Login page. Login data should be cleared. Which hooks will you use?

PROGRAM:

App.jsx

import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
import Login from './Login'
import Dashboard from './Dashboard'
import { createContext, useState } from 'react'
import Profile from './Profile'
export const nameContext = createContext()
function App() {
  const [name, setName] = useState("")
  return (
    <div>
      <nameContext.Provider value={{ name, setName }}>
       <BrowserRouter>

        <Link to={"/"}>Login</Link>
        <Link to={"/dashboard"}>Dashboard</Link>


        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/dashboard' element={<Dashboard />} />

        </Routes>

      </BrowserRouter>
      </nameContext.Provider>

    </div>
  )
}

export default App

Login.jsx

import React, { useContext, useEffect } from 'react'
import { nameContext } from './App'
import { useNavigate } from 'react-router-dom'

function Login() {

  const { setName } = useContext(nameContext)

  const navigate = useNavigate()

  function handleLogin() {

    navigate("/dashboard")

  }

  return (
    <div>

      <h1>Login Page</h1>

      <input
        type='text'
        placeholder='enter name'
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={handleLogin}>
       Login
      </button>



    </div>
  )
}

export default Login

Dashboard.jsx

import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'
import { nameContext } from './App'

const Dashboard = () => {

  const { name } = useContext(nameContext)

  const navigate = useNavigate()

  function handleLogout() {

    navigate("/")

  }

   function handleNext() {

    navigate("/profile")

  }

  return (
    <div>

      <h1>Welcome {name}</h1>

      <button onClick={handleLogout}>
        Logout  
      </button>

    </div>
  )
}

export default Dashboard

OUTPUT :

3. Name Sharing Scenario: User enters name in Home page and Profile page shows the same name. How will you share the data between pages?

PROGRAM:

App.jsx

import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
import Login from './Login'
import Dashboard from './Dashboard'
import { createContext, useState } from 'react'
import Profile from './Profile'
export const nameContext = createContext()
function App() {
  const [name, setName] = useState("")
  return (
    <div>

      <nameContext.Provider value={{ name, setName }}>
       <BrowserRouter>

        <Link to={"/"}>Login</Link>
        <Link to={"/dashboard"}>Dashboard</Link>
        <Link to={"/profile"}>Profile</Link>

        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/dashboard' element={<Dashboard />} />
          <Route path='/profile' element={<Profile />} />
        </Routes>

      </BrowserRouter>
      </nameContext.Provider>

    </div>
  )
}

export default App

Login.jsx

import React, { useContext, useEffect } from 'react'
import { nameContext } from './App'
import { useNavigate } from 'react-router-dom'

function Login() {

  const { setName } = useContext(nameContext)

  const navigate = useNavigate()

//   useEffect(() => {

//     console.log("Component Rendered")

//   }, [])

  function handleLogin() {

    navigate("/dashboard")

  }

  return (
    <div>

      <h1>Login Page</h1>

      <input
        type='text'
        placeholder='enter name'
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={handleLogin}>
       Login
      </button>



    </div>
  )
}

export default Login

Dashboard.jsx

import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'
import { nameContext } from './App'

const Dashboard = () => {

  const { name } = useContext(nameContext)

  const navigate = useNavigate()

  function handleLogout() {

    navigate("/")

  }

   function handleNext() {

    navigate("/profile")

  }

  return (
    <div>

      <h1>Welcome {name}</h1>

      <button onClick={handleLogout}>
        Logout  
      </button>
      <button onClick={handleNext}>Go To Profile</button>

    </div>
  )
}

export default Dashboard

Profile.jsx

import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'

import { nameContext } from './App'

function Profile() {
    const { name } = useContext(nameContext)
    const navigate = useNavigate()

    function handelBack(){
        navigate('/')
    }
  return (

    <div>
        <h1>{name} Profile</h1>

        </div>
  )
}
export default Profile

OUTPUT :

4. Button Navigation Scenario: User clicks Next button in Home page and About page should open. Which hook will you use?

PROGRAM:

App.jsx

import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"

function App() {

  return (

    <Routes>

      <Route path="/" element={<Home />} />

      <Route path="/about" element={<About />} />

    </Routes>

  )
}

export default App

Home.jsx

import { useNavigate } from "react-router-dom"

function Home() {

  const navigate = useNavigate()

  function NextPage() {

    navigate("/about")

  }

  return (

    <div>

      <h1>Home Page</h1>

      <button onClick={NextPage}>
        Next
      </button>

    </div>

  )
}

export default Home

About.jsx



function About() {

  return (

    <div>

      <h1>About Page</h1>

    </div>

  )
}

export default About

OUTPUT :

5. Back Navigation Scenario: User moves from Home page to Details page and clicks Back button to return Home. How will you implement navigation?

PROGRAM:

App.jsx

import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
import Login from './Login'
import Dashboard from './Dashboard'
import { createContext, useState } from 'react'
import Profile from './Profile'
export const nameContext = createContext()
function App() {
  const [name, setName] = useState("")
  return (
    <div>

      <nameContext.Provider value={{ name, setName }}>
       <BrowserRouter>

        <Link to={"/"}>Login</Link>
        <Link to={"/dashboard"}>Dashboard</Link>
        <Link to={"/profile"}>Profile</Link>

        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/dashboard' element={<Dashboard />} />
          <Route path='/profile' element={<Profile />} />
        </Routes>

      </BrowserRouter>
      </nameContext.Provider>
      {/* <Login /> */}
    </div>
  )
}

export default App

Profile.jsx

import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'

import { nameContext } from './App'

function Profile() {
    const { name } = useContext(nameContext)
    const navigate = useNavigate()

    function handelBack(){
        navigate('/')
    }
  return (

    <div>
        <h1>{name} Profile</h1>
       <button onClick={handelBack}>Back</button>
        </div>
  )
}
export default Profile

OUTPUT :

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' }