Forem: PRIYA K

Final Keyword in Java

PRIYA K — Thu, 14 May 2026 05:52:03 +0000

In Java, final means something cannot be changed further. It can be applied to variables, methods, and classes — but the effect is different in each case.

1. Final Variable
A final variable can be assigned only once. After that, its value cannot change.

class Demo {
    final int age = 20;

    void display() {
        // age = 25;  // Error: cannot change final variable
        System.out.println(age);
    }
}

Why use it?
When you want a constant value, like PI, fixed ID, etc.

Example:

final double PI = 3.14;

2. Final Method
A final method cannot be overridden by a child class.

class Parent {
    final void show() {
        System.out.println("Parent method");
    }
}

class Child extends Parent {
    // void show() { }   // Error: cannot override final method
}

Why use it?
To prevent subclasses from changing the original behavior of a method.

3. Final Class
A final class cannot be inherited (extended).

final class Vehicle {
    void run() {
        System.out.println("Running");
    }
}

// class Car extends Vehicle { }  // Error: cannot inherit final class

Why use it?
When you want to stop other classes from inheriting it.

A common example is String class in Java — String is final, so no class can extend it.

Pattern Printing 2

PRIYA K — Wed, 13 May 2026 04:45:08 +0000

public class Main {
    public static void main(String[] args) {

        int num = 1;

        for (int row = 1; row <= 5; row++) {

            for (int col = 1; col <= 6 - row; col++) {
                System.out.print(num + " ");
                num++;
            }

            System.out.println();
        }
    }
}

Output
1 2 3 4 5
6 7 8 9
10 11 12
13 14
15

public class Main {
    public static void main(String[] args) {

        for (int row = 1; row <= 5; row++) {

            char ch = 'A';

            for (int col = 1; col <= 6 - row; col++) {
                System.out.print(ch + " ");
                ch++;
            }

            System.out.println();
        }
    }
}

Output
A B C D E
A B C D
A B C
A B
A

public class Main {
    public static void main(String[] args) {

        for (int row = 1; row <= 5; row++) {

            char ch = (char)('F' - row);

            for (int col = 1; col <= 6 - row; col++) {
                System.out.print(ch + " ");
                ch--;
            }

            System.out.println();
        }
    }
}

Output
E D C B A
D C B A
C B A
B A
A

public class Main {
    public static void main(String[] args) {

        for (int row = 1; row <= 5; row++) {

            for (int col = 1; col <= 5 - row; col++) {
                System.out.print(col + " ");
            }

            System.out.print("*");
            System.out.println();
        }
    }
}

Output
1 2 3 4 *
1 2 3 *
1 2 *
1 *
*

Pojo Class in Java

PRIYA K — Tue, 12 May 2026 05:22:03 +0000

POJO class in Java
POJO stands for Plain Old Java Object.
It means a simple Java class that is used to store data.
A POJO class is a simple Java class used to store and transfer data through objects.

A POJO class usually contains:
private variables (fields)
getter methods
setter methods
constructor (optional)
It does not need special inheritance or framework-specific code.

Simple Example

class Student {
    private String name;
    private int age;

    public Student() {
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}
Using the POJO class
public class Main {
    public static void main(String[] args) {

        Student s = new Student();

        s.setName("Priya");
        s.setAge(21);

        System.out.println(s.getName());
        System.out.println(s.getAge());
    }
}

Output:
Priya
21

Why use POJO class?
A POJO is mainly used to represent real data objects.

Example:
Student details
Employee details
Bank account details

Instead of keeping many separate variables, we group related data into one object.

Why not just use normal variables?
Without POJO:
String name = "Priya";
int age = 21;

This works for one person, but for many students it becomes messy.

With POJO:
Student s1 = new Student();
Student s2 = new Student();

Each object can store separate data.

Main features of POJO
Simple class
No special restrictions
Used for storing data
Reusable
Easy to maintain

String Programs

PRIYA K — Tue, 12 May 2026 00:40:25 +0000

1.{{{{}}}}

let str="{{{{}}}}";
let end=str.length-2;
let start=1;
let temp;
let arr=[];

for(let i=0;i<str.length;i++){
      arr[i] = str[i]
    }
  while(start<end){

        temp=arr[start];
        arr[start]=arr[end];
        arr[end]=temp;
        start+=2;
        end-=2;


}
let result = "";
for (let i = 0; i < arr.length; i++) {
    result += arr[i];          // Fix 2: build result string
}
 console.log(result);

output
{}{}{}{}

2.BBBBGGGG

let str="BBBBGGGG";
let end=str.length-2;
let start=1;
let temp;
let arr=[];

for(let i=0;i<str.length;i++){
      arr[i] = str[i]
    }
  while(start<end){

        temp=arr[start];
        arr[start]=arr[end];
        arr[end]=temp;
        start+=2;
        end-=2;


}
let result = "";
for (let i = 0; i < arr.length; i++) {
    result += arr[i];          // Fix 2: build result string
}
 console.log(result);

Output
BGBGBGBG

3.IceCream

let sen = "";

let arr = [];

// convert string to array manually
for (let i = 0; i < sen.length; i++) {
    arr[i] = sen[i];
}

let left = 0;
let right = arr.length - 1;

function isVowel(ch) {
    return ch == 'a' ||
           ch == 'e' ||
           ch == 'i' ||
           ch == 'o' ||
           ch == 'u';
}

while (left < right) {

    while (left < right && !isVowel(arr[left])) {
        left++;
    }

    while (left < right && !isVowel(arr[right])) {
        right--;
    }

    // swap
    let temp = arr[left];
    arr[left] = arr[right];
    arr[right] = temp;

    left++;
    right--;
}

// print manually
let result = "";

for (let i = 0; i < arr.length; i++) {
    result = result + arr[i];
}

console.log(result);

Output
acecreim

4.a1b2c3d4

str="a1b2c3d4";
result="";

for(let i=0;i<str.length;i=i+2){
  ch=str[i]

   let count = str[i + 1];

    for (let j = 0; j <= count; j++) {
        result = result + ch;
    }
}
console.log(result);

Output
aabbbccccddddd

5.a1b2c3d4

str="a1b2c3d4";
result="";

for(let i=0;i<str.length;i=i+2){
  ch=str[i]

   let count = str[i + 1];

    for (let j = 1; j <= count; j++) {
        result = result + ch;
    }
}
console.log(result);

Output
abbcccdddd

6.abcd1234

et str = "abcd1234";

let result = "";

let mid = str.length / 2;

for (let i = 0; i < mid; i++) {

    result = result + str[i];

    result = result + str[mid + i];
}

console.log(result);

Output
a1b2c3d4

CSS

PRIYA K — Sat, 09 May 2026 03:06:09 +0000

CSS (Cascading Style Sheets)
To add Styles to HTML
Styles-->adding colors,fonts,size,borders etc..,
Css is not a programming language.Css is not a Markup language either.
CSS is a Style Sheet Language. CSS is a rule-based language.

How to define Style for HTML Elements
1.In Line

<h1 style="color:red"> Priya </h1>

2.By Using Style Tag:

<html>
<head>
<style type="text/css">
h1{
   color:blue;
  }
</style>
</head>
<h1> Boopathi </h1>

3.keep separate CSS file
name as
Style.CSS


h1{color:red}

name as
index.html


<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<h1> Priya </h1>

4.Basic Structure Of CSS

tagname{
    property:value;
      }

eg.

h1{color:red;}

5.CSS comments = (/* Comments*/)
6.code: html

<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<h1> Priya </h1>
<p> This is the book </p>

code: css

h1{
   color:red;
   font-size: 5em;
}
p{
  color:black;
 }

Multiply Property values: code: html

<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<h1> Priya </h1>
<p> This is the book </p>

code:style1.Css

p{
  color:red;
  width: 500px;
  border: 1px solid black;
}

8.Selecting Multiple Elements
code: html

<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<h1> Priya </h1>
<p> This is the book </p>

code:style1.css

p,h1{
  color:red;
  width: 500px;
  border: 1px solid black;
}

9.CSS Selectors

<!DOCTYPE HTML>
<html>
<head>
<style>
p{
  text-align:center;
  color:red;
}
</style>
</head>
<body>
  <p>At W3Schools you will find complete references.</p>
  <p id="para1"> this style </p>
  <p> matches </p>
</body>
</html>

10.id selectos= apply selectors to more than one paragraph.

<!DOCTYPE HTML>
<html>
<head>
<style>
#para1{
  text-align:center;
  color:red;
}
#para2{
  text-align:center;
  color:blue;
}
</style>
</head>
<body>
  <p>At W3Schools you will find complete references.</p>
  <p id="para1"> this style </p>
  <p id="para2"> Book </p>
  <p> matches </p>
</body>
</html>

11.class selectors

<!DOCTYPE HTML>
<html>
<head>
<style>
.abcd{
  text-align:center;
  color:red;
</style>
</head>
<body>
  <h1 class="abcd"> where the wind blows </h1>
  <p class="bcde"> how the sea seems</p>

</body>
</html>

12.more than one class (keep . before the class name)

<!DOCTYPE HTML>
<html>
<head>
<style>
p.abcd{
  text-align:center;
  color:red;
  }
p.pqrs{
  font-size:300%
  }
</style>
</head>
<body>
  <h1 class="abcd"> clear appearance </h1>
  <p class="abcd"> in the middle </p>
  <p class="abcd pqrs"> Everything Changes</p>
</body>
</html>

13.Universal Selectors

<!DOCTYPE HTML>
<html>
<head>
<style>
*{
  text-align:center;
  color:red;
</style>
</head>
<body>
  <h1> Good Morning </h1>
  <p> Red </p>
  <p id ="para1"> Red Only </p>
  <p id > This also Red Only </p>
</body>
</html>

14.CSS Attribute Selector

<!DOCTYPE HTML>
<html>
<head>
<style>
a[target] {
   background-color:yellow;
}
</style>
</head>
<body>
  <h2> CSS[attribute] Selector </h2>
  <p> see where the yellow color changes </p>
  <a href ="https://www.ilugc.in" target="_blank"> ILUGC </a>
  <a href ="https://www.wikipedia.org" target="_blank"> Wikipedia 
</a>
</body>
</html>

15.

<!DOCTYPE HTML>
<html>
<head>
<style>
a[href] {
   background-color:yellow;
}
</style>
</head>
<body>
  <h2> CSS[attribute] Selector </h2>
  <p> see where the yellow color changes </p>
  <a href ="https://www.ilugc.in" target="_blank"> ILUGC </a>
  <a href ="https://www.wikipedia.org" target="_blank"> Wikipedia 
</a>
</body>
</html>

16.CSS Attribute Selector

<!DOCTYPE HTML>
<html>
<head>
<style>
[title~=linux] {
   border: 5px solid red;
}
</style>
</head>
<body>
  <h2> [attribute~="value"] see style </h2>
  <p> attribute Style Changes </p>
  <img src="rabbit.jpeg" title="animal" width="150" height="250">  
  <img src="linux.jpeg" title="linux" width="150" height="250"> 
  <img src="linux.jpeg" title="logo of linux" width="150" height="250"> 
</body>
</html>

17.CSS Attribute Selector

<!DOCTYPE HTML>
<html>
<head>
<style>
[class |= top] {
  background:yellow;
</style>
</head>
<body>
  <h2> CSS [attribute|="value"] Selector </h2>
  <h1 class="top-header"> Day dreamers </h1>
  <p class="top-text"> what i saw  </h1>
  <p class="topcontent"> Seeing God </h1>

CSS [attribute^="value"] Selector class^ --> starts with specified value

<!DOCTYPE HTML>
<html>
<head>
<style>
[class ^= "abc"] {
  background:pink;
}
</style>
</head>
<body>
  <h1> CSS [attribute^="abcd"] Selector </h1>
  <p class="abcd"> what i saw  </h1>
  <h1 class="bcde-123">change direction </h1>
  <p class="abcdefgh"> Seeing God </h1>
</body>
</html>

CSS [attribute$="value"] Selector

<!DOCTYPE HTML>
<html>
<head>
<style>
[class $= "xyz"] {
  background:pink;
}
</style>
</head>
<body>
  <h2> CSS [attribute$="value"] Selector </h2>
  <div class="abc_xyz"> what i saw  </div>
  <div class="abc">change direction </div>
  <div class="stuvwxyz"> Seeing God </div>
  <p class ="abc-xyz">Do everything by making plans </p>
</body>
</html>

CSS [attribute*="value"] Selector

<!DOCTYPE HTML>
<html>
<head>
<style>
[class *= "xy"] {
  background:pink;
}
</style>
</head>
<body>
  <h2> CSS [attribute *="value"] Selector </h2>
  <div class="abc_xyz_1"> what i saw  </div>
  <div class="xyabz">change direction </div>
  <div class="stuvwxyz_"> Seeing God </div>
  <p class ="aby-xz">Do everything by making plans </p>
</body>
</html>

Descendant Selector

<!DOCTYPE HTML>
<html>
<head>
<style>
div p{
  background:yellow;
}
</style>
</head>
<body>
  <h2> Descendant Selector </h2>
  <div>
    <p> iam p, div between two.</p>
    <p> iam also p, div between two.</p>
    <section><p> i too p,div between two.</p></section>
  </div>
  <p> iam living in p only </p>
  <p> iam living in p only </p>
</body>
</html>

Child Selector(>)

<!DOCTYPE HTML>
<html>
<head>
<style>
div > p{
  background:yellow;
}
</style>
</head>
<body>
  <h2> Descendant Selector </h2>
  <div>
    <p> iam p, div between two.</p>
    <p> iam also p, div between two.</p>
    <section><p> i too p,div between two.</p></section>
  </div>
  <p> iam living in p only </p>
  <p> iam living in p only </p>
</body>
</html>

nth type of selectors

<!DOCTYPE HTML>
<html>
<head>
<style>
/* Select the second element of div siblings */
div: nth-of-type(2) {
    background: red;
    color:yellow;
}
/* Select the second li element in a list*/
li: nth-of-type(2) {
    background: lightgreen;
    color:red;
}
/* Select every third  element among any group: nth-of-type(3) {
    background:yellow;
}
</style>
</head>
<body>

<div>
<p> Believe yourself </p>
</div>

<div>
<p> Past memories </p>
</div>

<div>
<p> Leader </p>
</div>
<ul>
  <li> Mahatma Gandhi </li>
  <li> Nehruji </li>
  <li> Indira Gandhi </li>
  <li>  nethaji </li>
  <li> Chandra Bose </li>
</ul>
</body>
</html>

24.
document ->html-> index.html
document ->html->style ->style1.css

Text:
color --> "#ff0000","rgb(0,255,0)","red"
text-align --> Left,Right,center,Justify
text-decoration --> link
text-transform --> uppercase,lowercase,capitalize
text-indent -->

index.html

<html>
<head>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<p class="first"> Dont Giveup! Keep on Trying! </p>
<p class="second">Even through it seems to be impossible,It will happen in your life one day</p>
<p class="third">All the very best Friends! Wait to receive the suprises in your life!!!!!</p>
</body>
</html>

style.css

p.first
{color:green;text-decoration:overline;text-transform:uppercase;test-indent:50px;}
p.second
{color:#0000ff;text-align:right;text-decoration:line-through;text-transform:lowercase;}
p.third
{color:rgb(255,0,0);text-align:center;text-decoration:underline;text-decoration:capitalize;}

25.Font:
font-family
font-style: Normal,Italic,Bold,Oblique
font-size: px,em

index.html

<html>
<head>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<p class="first"> Dont Giveup! Keep on Trying! </p>
<p class="second">Even through it seems to be impossible,It will happen in your life one day</p>
<p class="third">All the very best Friends! Wait to receive the suprises in your life!!!!!</p>
</body>
</html>

style.css

p.first{font-family:"Tiems New Roman",Times,serif; font-style:Oblique;font-size:10;}
p.second{font-style:italic;font-size:20;}
p.third{font-style:bold;font-size:30;}

Link: decorate link by color,font-family,font size

a:link =
a:hover =
a:active =
a.vsited=

index.html


<html>
<head>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<a href="https://freetamilebooks.com/ebooks/-eliya_tamilil_software_testing/" target="_blank"> Click here for Software Testing book </a>
</body>
</html>

style1.css

a:hover{color:red;background-color:yellow;}
a:active{color:white;background-color:black;}
a:visited{color:blue;background-color:lightgreen;}

List: Ordered List Unordered List

CSS

index.html

<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<body>

Types Of Testing

<ol>
<li> Funtional Testing </li>
<li> Non- Funtional Testing </li>
</ol>

Types of non-functional testing

<ul>
<li> Funtional Testing </li>
<li> Automation Testing </li>
</ul>
</body>
</html>

style.css

ol li{list-style-type:upper-roman;}
ol li{list-style-type:upper-circle;}

28.Visibility Property:
Display:
inline

style.css:


ol li{visibility: hidden;}
ol li{display:inline;}

TABLES:

<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<body> <table>

<tr>
<th> Name </th>
<th> Marks </th>
<th> Rank </th>
</tr>

<tr>
<th> priya </th>
<th> 450 </th>
<th> 3 </th>
</tr>

<tr>
<th> boopathi </th>
<th> 550 </th>
<th> 2 </th>
</tr>

</table></body>
</html>

style.css

table{width:"60%";height:"40%"; border:3px solid red;}
th{border:2px solid green;}
th{border:1px solid orange;}

29.

<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<body> <table>

<tr>
<th> Name </th>
<th> Marks </th>
<th> Rank </th>
</tr>

<tr>
<th> priya </th>
<th> 450 </th>
<th> 3 </th>
</tr>

<tr>
<th> boopathi </th>
<th> 550 </th>
<th> 2 </th>
</tr>

</table></body>
</html>

style.css

table{width:"60%";height:"40%"; border:3px solid red;}
th{border:2px solid green;}
th{border:1px solid orange;}

table{width:60%;height:40%;border:3px solid red;
border-collapse:collapse;}

30. Divisions:
index.html

This is the book


style.css

div{width:"60%";height:"40%"; border:3px solid red;margin:25px;}



style.css

div{width:"60%";height:"40%"; border:3px solid : red;margin:25px;padding:25px;}


31.Body Background:

index.html

1oth time success

style1.css

body{background-color:skyblue;}
body{background-image: url("../linux.jpeg");}

body{
background-image:url("../linux.jpeg");
background-repeat: repeat-x;
}



style1.css

body{background-color:skyblue;}
body{background-image: url("../linux.jpeg");}

body{
background-image:url("../linux.jpeg");
background-repeat: repeat-y;
}


style1.css

body{background-color:skyblue;}
body{background-image: url("../linux.jpeg");}

body{
background-image:url("../linux.jpeg");
background-repeat: no-repeat;
}


style1.css

body{background-color:skyblue;}
body{background-image: url("../linux.jpeg");}

body{
background-image:url("../linux.jpeg");
background-repeat: no-repeat;
background-position:right-top;
}

32. POSITIONING:static

index.html:

<!DOCTYPE html>

position: static;

1oth time failure


style1.css:

div.static {
position: static;
border: 3px solid #73AD21;
}


33.positioning:fixed
index.html:

<!DOCTYPE html>

position: static;

1oth time failure


style1.css:

div.fixed {
position: fixed;
bottom:0;
right :0;
width: 300px;
border: 3px solid #73AD21;
}


34.positioning:absolute

index.html:

<!DOCTYPE html>

position: static;

1oth time failure


style1.css:

div.absolute{
position: absolute;
top:80px;
right :0;
width: 300px;
height: 200px;
border: 3px solid #73AD21;
}


35.positioning:sticky

36.Box model - where the content should be placed inside the box
rules for box model:
- Content Edge
- Border Edge
- Padding Edge
- Margin

p{
width:200px;
border: 3px solid red;
padding: 40px 50px 60px 70px;
margin: 100px 5px 300px 400px;
}


37.VIBGYOR with html ,css

38.

<!DOCTYPE html>

Here is a span element which is red, as it is span element Here is a span element which is blue, because it inherits from its parent. Here is a span element which is red, because it is span element.


style1.css

span{
color: red;
border: 1px solid black;
}

.extra span{
color: inherit;
}


39.initial
index.html

<!DOCTYPE html>

heading

heading means what


style1.css:

div{
color: red;
border: 1px solid black;
}

h1{
color: initial;
}


40.revert property
div --> parent tag
p--> child tag

index.html:

<!DOCTYPE html>

sun shines

class ="changes"> purple flower


style1.css:

parents{
color: blue;
}
p{
color: red;
}
changes{
color: revert;
}


41.
index.html

<!DOCTYPE html>

1 2 3 4

style1.css

div.one{margin:5px;padding:5px;border:1px;solid red;float:left;text-align:center;}

div.one img{display:inline; margin:5px; border:1px solid yellow; width:170px; height:150px;}

div.one a:hover img{border:1px solid blue;}
div.two {text-align:center; font-weight:normal; width:120px; margin:5px;}


42.Opacity
index.html

<!DOCTYPE html>

1 2 3 4


style1.css

div.one{margin:5px;padding:5px;border:1px;solid red;float:left;text-align:center;}

div.one img{display:inline; margin:5px; border:1px solid yellow; width:170px; height:150px;opacity: 0.4; filter: alpha(opacity=40);}

div.one a:hover img{border:1px solid blue;opacity:1;filter: alpha(opacity=100);}
div.two {text-align:center; font-weight:normal; width:120px; margin:5px;}


43.CSS Layout:
Flex Box: flexbox is designed for one-dimensional layout
index.html((one dimension layout))

<!DOCTYPE html>

one two three

style.css

.wrapper{
display:flex;
}
.wrapper > div {
flex:1;
}


eg...

index.html

<!DOCTYPE html>

home about contact us

style.css

.wrapper{
display:flex;
}
.wrapper > div {
flex:1;
}


43.Grid layout - for two dimensional layout

index.html

<!DOCTYPE html>

one two three four five six


style.css

.wrapper{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}

44.

Java

PRIYA K — Sat, 09 May 2026 03:05:09 +0000

Java is statically Typed

1.In Java ,Need to specify the "return" ,"not Return"
"void" means not return anything

public class Shop
{
    Static String ShopName = "Priya"
    String name;
    int price;
public static void main(String[]args)
{
    Shop product1 = new Shop()
    product1.name = "abc";
    product1.price = 10;
    product1.buy();
}
}

Output
Cannot find symbol

Explanation:
If method is not declared means [Cannot Find Symbol]

[Invalid Method Declaration]
If method is not Correctly 'defined' and 'Return Type' is not given

Inside a method ,we can call another method .
Inside a method ,we cannot define it

Using Void

public class Shop
{
    Static String ShopName = "Priya"
    String name;
    int price;
public static void main(String[]args)
{
    Shop product1 = new Shop()
    product1.name = "abc";
    product1.price = 10;
    product1.buy();
}
public void buy(){
    System.out.println("Buy Method")
}

output
Buy Method

public class Shop
{
    static String ShopName = "Priya";
    String name;
    int price;

    void buy()
    {
        System.out.println("Product: " + name);
        System.out.println("Price: " + price);
        System.out.println("Shop: " + ShopName);
    }

    public static void main(String[] args)
    {
        Shop product1 = new Shop();
        product1.name = "abc";
        product1.price = 10;
        product1.buy();
    }
}

Output
Product: abc
Price: 10
Shop: Priya

public class Calculator
{
    public static void main(String[] args)
    {
        Calculator casio = new Calculator();
        casio.add(10, 20);//method calling
    }

//method definition
    public void add(int no1, int no2)
    {
        System.out.println(no1 + no2);
    }
}

Output
30

React

PRIYA K — Sat, 09 May 2026 03:04:29 +0000

1.Component
What is component?

means function return HTML elements
javaScript functions that return JSX
independent and reusable bits of code
Starts with Capital letters
in one file, multiple components

why components is used?

Reusability – use the same UI in many places
Modularity – split big UI into small parts
Easy to manage & update
Clean, organized code

Types of Functional Component
1.Functional component

syntax: JavaScript Function
State: useState()
LifeCycle:useEffect()
Hooks: supported
code length: less
performance:faster
React Recommendation:Preferred

example

function App(){
   return(
     <div>
       <h1> Hello React </h1>
       <p> This is my first React App </p>
     </div>
  );
}
export default App;

2.Class Component

syntax: ES6
State: this.state
LifeCycle:lifecycle methods
Hooks: not supported
code length: more
performance:slightly slower
React Recommendation:old

example

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello React</h1>
        <p>This is my first React App</p>
      </div>
    );
  }
}

export default App;

2.what is XML?

Xml means extensible markup language extensible means create your own tags
is a markup language used to store and transport data in a structured ,readable format.
Structured – Data is organized in a tree-like hierarchy.
Platform-independent – Can be used across different systems.
Text-based – Easy to read and debug.
user defined tags
must have closing tags
case sensitive
must be well formed (properly nested tags)
can include attributes

example

<student>
    <name>Priya</name>
    <age>20</age>
    <course>AI & Data Science</course>
</student>

3.what is JS vs JSX?
JavaScript?
JavaScript is a programming language used to add logic, behavior, and interactivity to web pages.

Features

Variables, functions, loops
Conditions (if, switch)
DOM manipulation
Works in browser & server

let name = "Priya";
function greet() {
  return "Hello " + name;
}

JSX (JavaScript XML)
JSX?
JSX is a syntax extension of JavaScript used in React to write HTML-like code inside JavaScript.

JSX is NOT a separate language

Example (JSX)

const element = <h1>Hello Priya</h1>;

Behind the scenes, JSX is converted to JavaScript:

React.createElement("h1", null, "Hello Priya");

JavaScript Array

PRIYA K — Sat, 09 May 2026 03:04:11 +0000

eg.
const marks = [20,30,40,50,60]
console.log(marks[-1])
output
undefined

const marks = [20,30,40,50,60]
const marks(marks.at(-1));
output
50

Array
In Java,array stores homogeneous elements.fixed size.
eg:
java = [10,20,30,40,50]

In Javascript,array stores heterogeneous elements.flexible size.
eg:
javascript = [10,"string",20,"priya"]

method
*logic ,*return type,*arguments

Array Methods
Array flat()
eg.
function mult(x){
return [x,x*10]
}
const myArr = [1,2,3,4,5,6]
const newArr = myArr.flapMap(mult);
output
[1, 10, 2, 20, 3, 30, 4, 40, 5, 50, 6, 60]

Array
Array iterations
forEach() is used , so we can avoid use looping methods.
logic :
The forEach() method calls a function (a callback function) once for each array element.
return :
void(nothing to return)
arguments:
call back

value,index,array
for each in functions
code
const marks = [89,88,99,"abcd"]
marks.forEach(display)
function display(value,index,array){
console.log(value,index,array)
}
output
89 0
Array(4) [ 89, 88, 99, "abcd" ]
88 1
Array(4) [ 89, 88, 99, "abcd" ]
99 2
Array(4) [ 89, 88, 99, "abcd" ]
abcd 3
Array(4) [ 89, 88, 99, "abcd" ]

4 times = display is called

object: keep the object and then call the method

arrow functions is used for only one function.
for each in arrow function
eg .
const marks = [89,88,99,"abcd"]
marks.forEach(value => console.log(value))
output
89
88
99
abcd

eg.
const marks = [89,88,99,"abcd"]
marks.forEach(value,index,array => console.log(value,index,array))
output
value is not defined

console.log is not a callback
callback depends on the before function

callback functions
eg
function display(cb){
console.log("display");
cb(); //cb(); output display
}
function add(){
console.log("add");
}
display(add)
output
display
add

eg
function display(cb){
console.log("display");
cb(); //cb(); output display
}
function add(){
console.log("add" + 10);
}
display(add)

output
display
add10

Array methods:
JavaScript Array length:
The length property returns the length (size) of an array:
Example
JavaScript Array length

 const fruits = ["banana","cherry","pineapple","mango"]
        fruits.length = 3
        console.log(fruits)
output:
Array(5) [ "banana", "cherry", "pineapple", "mango", "kiwi" ]

       const fruits = ["banana","apple","orange"];
        let size = fruits.length;
        console.log(size)
output 3

        const fruits = ["banana","apple","orange"];    
        console.log(fruits.length)
output 3
The length property can also be used to set the length of an array:
        const fruits = ["banana","cherry","pineapple","mango"]
        fruits.length = 3
        console.log(fruits)
output [ "banana", "cherry", "pineapple" ]

JavaScript Array toString():
The toString() method returns the elements of an array as a comma separated string.
Example

        const cars = ["bmw","honda","toyota","tesla"]
        let denote = cars.toString()
        console.log(denote)

output
bmw,honda,toyota,tesla

Note
Every JavaScript object has a toString() method.
The toString() method is used internally by JavaScript when an object needs to be displayed as a text (like in HTML), or when an object needs to be used as a string.

JavaScript Array join():
The join() method also joins all array elements into a string.
It behaves just like toString(), but in addition you can specify the separator:
Example

        const cars = ["bmw","honda","toyota","tesla"]
        console.log(cars.join("#"));

output:
bmw#honda#toyota#tesla

join() and toString() similarities
joins all array elements into a string.

join() vs toString()
join() : specify the separator

JavaScript Array at():
Examples

        const cars = ["bmw","honda","toyota","tesla"]
        let denote = cars.at(-3)
        console.log(denote)

output honda

The at() method returns an indexed element from an array.
The at() method returns the same as [].
Note
Many languages allow negative bracket indexing like [-1] to access elements from the end of an object / array / string.
This is not possible in JavaScript, because [] is used for accessing both arrays and objects. obj[-1] refers to the value of key -1, not to the last property of the object.

Popping and Pushing
Popping
Popping :The pop() method removes the last element from an array
Popping items out of an array
The pop() method returns the value that was "popped out"
eg..

        const cars = ["bmw","honda","toyota","tesla"]
        console.log(cars.pop())
        console.log(cars)

output
tesla
Array(4)["bmw","honda","toyota"]

Pushing
Pushing :The push() method adds a new element to an array (at the end)
Pushing items into an array.
eg..

        const cars = ["bmw","honda","toyota","tesla"]
        console.log(cars.push("aadi"))
        console.log(cars)

output
5
Array(5) [ "bmw", "honda", "toyota", "tesla", "aadi" ]
eg..

        const fruits = ["Banana", "Orange", "Apple", "Mango"];
        let length = fruits.push("Kiwi");
        console.log(length)

output
5

JavaScript Array shift():
Shifting is equivalent to popping, but working on the first element instead of the last.
The shift() method removes the first array element and "shifts" all other elements to a lower index.
eg..

        const fruits = ["Banana", "Orange", "Apple", "Mango"];
        console.log(fruits.shift()) #The shift() method returns the value that was "shifted out"
        console.log(fruits)

output
Banana
Array(3) [ "Orange", "Apple", "Mango" ]

JavaScript Array unshift():
The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:
Example

        const fruits = ["Banana", "Orange", "Apple", "Mango"];
        console.log(fruits.unshift("dragon fruit")) #The unshift() method returns the new array length
        console.log(fruits)

output
5
Array(5) [ "dragon fruit", "Banana", "Orange", "Apple", "Mango" ]

pop and shift
remove elements

pop vs shift
pop :remove elements in last position
shift:remove elements in first position

push and unshift
add elements

push vs unshift
push: add elements in last position
unshift:add elements in first position

Changing Elements
Array elements are accessed using their index number:
Array indexes start with 0:
[0] is the first array element
[1] is the second
[2] is the third ...
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
console.log(fruits)

Array.isArray()

        const fruits = ["Banana", "Orange", "Apple", "Mango"];
        console.log(Array.isArray(fruits))

output:
true

JavaScript Array delete():
Using delete() leaves undefined holes in the array.
Use pop() or shift() instead.
Example

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
console.log(fruits)

Merging Arrays (Concatenating):
In programming languages, concatenation means joining strings end-to-end.
Concatenating arrays means joining arrays end-to-end.
The concat() method does not change the existing arrays. It always returns a new array.
The concat() method can take any number of array arguments.

JavaScript Array concat():
The concat() method creates a new array by merging (concatenating) existing arrays:
Example (Merging Two Arrays)

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
console.log(myChildren)

Example (Merging Three Arrays):

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
console.log(myChildren)

The concat() method can also take strings as arguments:
Example (Merging an Array with Values)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); 
console.log(myChildren)

Array copyWithin():
The copyWithin() method copies array elements to another position in an array.
The copyWithin() method overwrites the existing values.
The copyWithin() method does not add items to the array.
The copyWithin() method does not change the length of the array.
Examples
Copy to index 2, all elements from index 0:

          const fruits = ["Banana", "Orange", "Apple", "Mango"];
          console.log(fruits.copyWithin(2,0))
output:
["Banana", "Orange","Banana", "Orange"]

Copy to index 2, the elements from index 0 to 2:
const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
console.log(fruits.copyWithin(2, 0, 2));
output:
[ "Banana", "Orange", "Banana", "Orange", "Kiwi", "Papaya" ]

Flattening an Array:
Flattening an array is the process of reducing the dimensionality of an array.
Flattening is useful when you want to convert a multi-dimensional array into a one-dimensional array.
JavaScript Array flat():
The flat() method creates a new array with sub-array elements concatenated to a specified depth.
Example

const number = [[1,2],[3,4],[5,6]]
console.log(number.flat())

output:
[1,2,3,4,5,6]

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

        const number = [1,2,3,4]
        console.log(number.flatMap(x => [x,x*2]))

output:
[ 1, 2, 2, 4, 3, 6, 4, 8 ]

JavaScript Array Search:

Common Errors While Using Global Variables in Java Programming

PRIYA K — Sat, 09 May 2026 03:03:38 +0000

1.Error: Accessing Instance Global Variable in Static Method

class GlobalError1
{
    int cost = 1000;   // instance global variable

    public static void main(String args[])
    {
        System.out.println(cost);   // ERROR
    }
}

Output
non-static variable cost cannot be referenced from a static context

class GlobalError1
{
    int cost = 1000;

    public static void main(String args[])
    {
        GlobalError1 obj = new GlobalError1();
        System.out.println(obj.cost);
    }
}

2.Error: Using Object for Static Variable

class GlobalError2
{
    static String name = "Scooby";

    public static void main(String args[])
    {
        System.out.println(namee);   // spelling error
    }
}

Output
Cannot find symbol

class GlobalError2
{
    static String name = "Scooby";

    public static void main(String args[])
    {
        System.out.println(name);
    }
}

3.Error: Using Variable Without Declaration

class GlobalError3
{
    public static void main(String args[])
    {
        name = "Tom";   // ERROR
        System.out.println(name);
    }
}

Output
cannot find symbol variable name

class GlobalError3
{
    static String name;

    public static void main(String args[])
    {
        name = "Tom";
        System.out.println(name);
    }
}

4.Error: Missing Semicolon in Global Variable

class GlobalError4
{
    static String name = "Scooby"

    public static void main(String args[])
    {
        System.out.println(name);
    }
}

Output
';' expected

class GlobalError4
{
    static String name = "Scooby";

    public static void main(String args[])
    {
        System.out.println(name);
    }
}

5.Error: Using Local Variable Outside Method

class GlobalError5
{
    public static void main(String args[])
    {
        int a = 10;
    }

    System.out.println(a);   // ERROR
}

output
illegal start of type

class GlobalError5
{
    static int a = 10;

    public static void main(String args[])
    {
        System.out.println(a);
    }
}

6.Error: Using Global Variable Before Object Creation

class GlobalError6
{
    int price = 500;

    public static void main(String args[])
    {
        System.out.println(price);   // ERROR
    }
}

Output
non-static variable price cannot be referenced from a static context

class GlobalError6
{
    int price = 500;

    public static void main(String args[])
    {
        GlobalError6 obj = new GlobalError6();
        System.out.println(obj.price);
    }
}

Functions in JavaScript

PRIYA K — Sat, 09 May 2026 03:03:02 +0000

Functions

Reusable block of code designed to perform a specific task.
Fundamental building blocks in JavaScript.
ia similar to procedure -A set of statements to perform a task.
Procedure to qualify as a function , it Take inputs,perform action and return outputs
Use a function,define it somewhere in the scope
Allows to reuse,organise and modlarise code

Defining Functions or Function Declaration
A function definition (also called a function declaration, or function statement) consists of

the function keyword,
The name of the function.
A list of parameters to the function, enclosed in parentheses and separated by commas.
The JavaScript statements that define the function, enclosed in curly braces, { /* … */ }.

function functionName(parameters) {
  // code
}

Example

function square(number) {
  return number * number;
}

JavaScript passes values in two ways:
Primitive values (like number, string)
1.Passed by value
Means a copy is sent

function change(x) {
  x = 10;
}

let a = 5;
change(a);
console.log(a); // still 5

Because only a copy of a is changed, not the original.

2.Objects & Arrays
*Passed by reference *
Means the function can modify the original data.
if the function changes the object's properties, that change is visible outside the function.

Example with Object:

function myFunc(theObject) {
  theObject.make = "Toyota";
}

const myCar = {
  make: "Honda",
  model: "Accord",
  year: 1998,
};

console.log(myCar.make); // "Honda"
myFunc(myCar);
console.log(myCar.make); // "Toyota"

The original object changed

Example with Array:
When you pass an array as a parameter, if the function changes any of the array's values, that change is visible outside the function.

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

Array also changed outside the function

Function declarations and expressions can be nested, which forms a scope chain.
For example:

function addSquares(a, b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}

Scope
Inner function can use outer function variables
Outer function cannot use inner function variables

Summary
Function = reusable block of code
Parameters = inputs
return = gives output
Primitive → copy (no change outside)
Object/Array → original can change
Functions can be inside other functions

What is a Function Expression?
You create a function and store it in a variable

const square = function (number) {
  return number * number;
};

call it :

square(4); // 16

Variable = square
Function = stored inside it

Anonymous Function (No name)

const square = function (number) {
  return number * number;
};

Named Function Expression
A name is given:

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
};

Why give a name?
Helps in recursion (function calling itself)
Helps in debugging

factorial(3); // 6

In Function Expression,Functions can be send as an Arguments to another function
using Map function

Functions can be passed like values!

function map(f, arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    result[i] = f(arr[i]);
  }
  return result;
}

Calling it:

const numbers = [0, 1, 2];

const cubes = map(function (x) {
  return x * x * x;
}, numbers);

console.log(cubes); // [0, 1, 8]

We passed a function inside another function

Function Based on Condition

let myFunc;

if (num === 0) {
  myFunc = function (obj) {
    obj.make = "Toyota";
  };
}

Function is created only if condition is true

*Function Constructor *
create functions from strings:

const add = new Function("a", "b", "return a + b");

Unsafe (like eval())

What is a Method?
A method = function inside an object

const person = {
  name: "Priya",
  greet: function () {
    console.log("Hello");
  }
};

person.greet(); // Hello

greet is a method

Summary
Function Declaration Function Expression
function add(){} const add = function(){}
Has name Can be anonymous
Loaded before execution Created at runtime

Function expression = function stored in a variable
Can be anonymous or named
Can pass functions as arguments
Can create functions inside conditions
Method = function inside object

What is “calling a function”?
Defining a function ≠ running it
You must call it to execute

function square(n) {
  return n * n;
}

call it:

square(5); // 25

When called:
5 goes into n
Function runs
Returns 25

Function must be in scope
*Hoisting *

square(5);

function square(n) {
  return n * n;
}

Because function declarations are hoisted (moved up internally)

Passing Arguments
numbers
strings
objects
arrays

Example (Object)

function change(obj) {
  obj.name = "Priya";
}

let person = { name: "Anu" };
change(person);

console.log(person.name); // Priya

Recursive Function (Function calling itself)
A function can call itself

Example: Factorial

function factorial(n) {
  if (n === 0 || n === 1) return 1;
  return n * factorial(n - 1);
}

Calls:

factorial(5);
// 5 * 4 * 3 * 2 * 1 = 120

Output:

console.log(factorial(5)); // 120

Special Ways to Call Functions
** 1.call()**
Calls function with a specific object

function greet() {
  console.log(this.name);
}

const person = { name: "Priya" };

greet.call(person); // Priya

2. apply()
Same as call(), but arguments in array

function add(a, b) {
  return a + b;
}

add.apply(null, [2, 3]); // 5

In JavaScript:
Functions are objects
So they have methods like:
call()
apply()

Summary
Define ≠ execute
Call function using ()
Can pass any type as argument
Functions can call themselves (recursion)
call() and apply() help control how function runs

What is Hoisting?
Hoisting = JavaScript moves declarations to the top
So even if you write code later, JS behaves like it’s written at the top.

Function Declaration (Works with Hoisting )

console.log(square(5)); // 25

function square(n) {
  return n * n;
}

So you can call the function before defining it

Function Expression (Does NOT work )

console.log(square(5)); // Error

const square = function (n) {
  return n * n;
};

gives error:
ReferenceError: Cannot access 'square' before initialization

Why does this fail?
const square is not hoisted like a function
Only the variable name is reserved
The function is assigned later

So before assignment → it doesn't exist yet

*Comparison *
Type Hoisted? Can call before declaration?
Function Declaration Yes

Function Expression No

Function Declaration → Teacher writes answer on board before class starts
Function Expression → Teacher writes answer only when class reaches that point

Summary
Hoisting = moving declarations to top
Works for function declarations
Does NOT work for function expressions
That’s why one works before definition and one doesn’t

What is Recursion?
Recursion = a function calling itself
Instead of using loops (for, while), the function repeats itself.

A recursive function must have:

Base condition (stop condition)
Recursive call (call itself)

function count(x) {
  if (x >= 5) return;   // stop condition
  console.log(x);
  count(x + 1);         // function calls itself
}

count(0);

Output
0
1
2
3
4

Recursion vs Loop
Loop:

let x = 0;
while (x < 5) {
  console.log(x);
  x++;
}

Recursion:

function loop(x) {
  if (x >= 5) return;
  console.log(x);
  loop(x + 1);
}

loop(0);

Both do the same thing!

Named Function Expression

const foo = function bar() {
  console.log("Hello");
  bar(); // or foo()
};

Inside the function:
You can use bar() or foo() to call itself

Used for:
DOM traversal
File systems
Graphs

In recursion:
Because of stack (LIFO – Last In First Out)

Summary
Function calls itself → recursion
Must have base condition (otherwise infinite loop )
Uses call stack internally
Useful for trees, graphs, nested data
Recursion = repeat using function
Needs:
Stop condition
Self call

What is IIFE(Immediately Invoked Function Expressions )?
IIFE = a function that runs immediately after it is created

Syntax

(function () {
  // code runs immediately
})();

Example
(function () {
console.log("Hello");
})();

Output:
Hello

No need to call it separately — it runs instantly

With Return Value

const value = (function () {
  return 10 * 2;
})();

console.log(value); // 20

Function runs immediately and stores result in value

Why use IIFE?
1. Avoid variable pollution

(function () {
  let x = 10;
  console.log(x);
})();

// console.log(x); # Error

x is not accessible outside
Keeps variables private

2.Creates its own scope
Variables inside IIFE don’t affect outside code

3.Useful for initialization

const result = (function () {
  let a = 5;
  let b = 10;
  return a + b;
})();

Comparison
Normal Function:

function test() {
  console.log("Hi");
}
test();

IIFE:

(function () {
  console.log("Hi");
})();

No name, no separate call

IIFE is:
A function expression
Wrapped in ()
Called using ()

Summary
IIFE = function that runs immediately
No need to call it later
Creates private scope
Useful for one-time execution

What is Scope?
Scope = where a variable can be used

Function Scope
Variables inside a function are private

function test() {
  let x = 10;
  console.log(x); // works
}

test();
// console.log(x);  Error (not accessible outside)

x exists only inside the function

Global Scope
Variables outside functions are global

let a = 5;

function show() {
  console.log(a); // can access
}

show();

Functions can use global variables

Nested Functions

const name = "Chamakh";

function getScore() {

  let num1 = 2;
  let num2 = 3;

  function add() {
    return name + " scored " + (num1 + num2);
  }

  return add();
}

console.log(getScore()); // Chamakh scored 5

Who can access what?
Inner function can access:

Its own variables
Parent function variables (num1, num2)
Global variables (name)
But outer function cannot access inner variables

Inside → can see outside
Outside → cannot see inside

What is Closure?
Closure = when a function remembers variables from its outer scope
Even after the outer function is finished!

Example of Closure

function outer() {
  let count = 0;

  function inner() {
    count++;
    console.log(count);
  }

  return inner;
}

const result = outer();

result(); // 1
result(); // 2
result(); // 3

Why this works?
inner() remembers count
Even though outer() is already finished
This memory = closure

Why closures are useful?
Data privacy (like private variables)
Maintain state (remember values)
Used in real apps (timers, counters, event handlers)

Summary
Scope = where variables are accessible
Function scope = variables are private
Inner function can access outer variables
Closure = function remembers outer variables

Parameters
are placeholders defined in function definitions
Parameters are inputs to a function.
They act like variables inside the function.

Arguments
Pass the actual values when calling the function.

Example of Parameters

function greet(name){
   console.log("Hello",+ name);
}
greet("Alice");

Explanation
name => is the parameter
Alice => is the argument

Default Parameters
No arguments is passed during the function call
if no value is passed,the function uses the 'default' value
Example

function greet(name = "Priya"){
    console.log("Hello",+ name);
}
greet();
greet(name);

Return Statement
value can be stored in variable or used directly
when return executes,the function stops execution
Is used to send a result back from a function.

function add(a, b) {
  return a + b; // returns the sum
}

let result = add(5, 10);
console.log(result);

Multiply-nested functions
You have functions inside functions:
A → contains B

B → contains C

Who can access what?
Child can see parent’s things
Parent cannot see child’s things

function A(x) {
  function B(y) {
    function C(z) {
      console.log(x + y + z);
    }
    C(3);
  }
  B(2);
}
A(1);

Step-by-step
A(1) → x = 1
B(2) → y = 2
C(3) → z = 3

Inside C:
x = 1 (from A)
y = 2 (from B)
z = 3 (from C)

Output:
1 + 2 + 3 = 6

Why C can access everything?
Because of scope chaining

C can see:
its own variables (z)
parent function variables (y)
grandparent variables (x)

A (grandparent)
└── B (parent)
└── C (child)

C can see:
B’s data
A’s data

But:
A cannot see C
B cannot see inside C

Why?
Because C is inside B, and B is inside A

Name conflicts
Problem: Same variable name
When two arguments or variables in the scopes of a closure have the same name, there is a name conflict. More nested scopes take precedence. So, the innermost scope takes the highest precedence, while the outermost scope takes the lowest. This is the scope chain. The first on the chain is the innermost scope, and the last is the outermost scope.
when You have two variables named x

function outside() {
  const x = 5;        // outer x
  function inside(x) {  // inner x (same name)
    return x * 2;
  }
  return inside;
}
console.log(outside()(10));

outside() runs → creates:

outer x = 5
It returns inside function
call:

inside(10)
so inside:

inner x = 10

Now inside this line:
return x * 2;

Which x is used?
outer x = 5
inner x = 10

Answer
Inner x is used (10)
10 * 2 = 20

Why?
Because of scope priority
Nearest (inner) variable is used first

Rule
If names clash → inner scope wins

Scope Chain
inside → outside → global

JavaScript checks:
inside scope
then outside (not needed)
then global

Using the arguments object
The arguments of a function are maintained in an array-like object.
Inside every function, JavaScript gives you a special object called:
arguments
It stores all values passed to the function

Think like this
Function = box

Arguments = items inside the box

Example

function test() {
  console.log(arguments);
}

test(10, 20, 30);

Output:
[10, 20, 30]

How to use it
First argument → arguments[0]
Second → arguments[1]
Total count → arguments.length

Example

function show() {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments.length);
}

show("A", "B", "C");

Output:

A
B
3

Why is it useful?
When you don’t know how many inputs will come

Example

function myConcat(separator) {
  let result = "";

  for (let i = 1; i < arguments.length; i++) {
    result += arguments[i] + separator;
  }

  return result;
}

Call:

myConcat(", ", "red", "orange", "blue");

What happens

arguments[0] = ", "     (separator)
arguments[1] = "red"
arguments[2] = "orange"
arguments[3] = "blue"

Loop starts from i = 1
Builds:
red + ", "
orange + ", "
blue + ", "

Output:
red, orange, blue,

arguments is NOT a real array
It has:
index (0,1,2…)
length

It does NOT have:

push()
pop()
map()

arguments = all inputs passed to a function

Instead of arguments, use:

function myFunc(...args) {
  console.log(args);
}

args is a real array

Objects in JavaScript

PRIYA K — Sat, 09 May 2026 03:02:37 +0000

Varibles stores values and function

Object
Keys and Values inside curly braces{}
States and Behavior
are containers for Properties and Methods
Methods are functions.
Properties can be added,changed,deleted.

Objects are objects
Maths are objects
Dates are objects
Arrays are objects
Maps are objects
Sets are objects
RegExp are Objects
Errors are Objects

All JavaScript values, except primitives, are objects.

Example

const car = {
  type: "Fiat",
  model: "500",
  color: "white"
};

Expplanation
car => object
Key or Properties =>type,model,color
Value or Properties Value => Fiat,500,white

Create an empty object,add the properties later
Example

// Create an Object
const person = {};

// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

-Using the Object Literal
Example

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
console.log(person.age)

-Using the new keyword
Example

const person = new Object({
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
console.log(person.age)

Explanation
No need to use New Object()
for simplicity and execution speed ,use only object literal

Object.create()
creates an object from the existing objects
Example

const person = {
  firstName: "John",
  lastName: "Doe"
};

// Create new Object
const man = Object.create(person);
man.firstName = "Peter";
console.log(person.firstName + "and" + man.firstName)

Object FromEntries()
Create an object from key/value pairs

Example

const fruits =[
    ["apples",200],
    ["mango",180],
    ];
const myobj = Object.fromEntries(fruits);
console.log(myobj.mango)

Object Properties
Access object Properties in two ways

Dot Notation
Bracket Notation
Expression

Dot Notation
objectName.propertyName

person.firstname

Bracket Notation
objectName["PropertyName"]

person["firstName"]

Expression

let age = person[x];

Object Methods
Object Methods are actions performed on objects

const person = {
  firstName: "John",
  lastName : "Doe",
  age      : 50,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Explanation
'this' refers to object.
'this' refers to person object.

Changing Properties
Change the value of Property

const person = {
  firstName: "John",
  lastName : "Doe",
  age      :  50
};
person.age = 10;

console.log(person.age)

Adding new Properties

const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
};

person.nationality = "English";
console.log(person.nationality)

Deleting Properties

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
};

delete person.age;
console.log(person.age)

Output
Undefined

(or)

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
};

delete person["age"];

Explanation
The delete keyword deletes both the value and the property.
After deleting, the property is removed. Accessing it will return undefined.

Check if a property exists

const person = {
  firstName: "John",
  lastName : "Doe",
  age      :  50
};

let result = ("firstName" in person);
console.log(result)

Nested Objects

const myObj = {
  name: "John",
  age: 30,
  myCars: {
    car1: "Ford",
    car2: "BMW",
    car3: "Fiat"
  }
}
console.log(myObj.myCars.car2)

useEffect in React Hooks

PRIYA K — Sat, 09 May 2026 03:02:13 +0000

Is a React Hook
Allows you to synchronise a component with an external system.
Used for Tasks that happen outside the normal rendering system,such as fetching data,setting up subscriptions,manually manipulate the DOM
Allows you to perform side effects in your components.
useEffect accepts two arguments. The second argument is optional.
useEffect(, )
We should always include the second parameter which accepts an array. We can optionally pass dependencies to useEffect in this array
In React, useEffect runs after every render by default, so your (settimer)timer keeps repeating.
To control it, use a dependency array: [] → run only once, [count] → run when count changes.
Without dependencies, it keeps re-running and causes continuous updates.
Always add dependencies properly to make your Effect run only when needed.
It replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
The first argument to useEffect is a function that contains the side effect code in functional components.
The second argument is an optional array of dependencies. If provided, the effect will only re-run if any of the dependencies change.
Manipulating the DOM directly (although React generally handles DOM manipulation for you).
Cleaning up resources when a component unmounts.

Syntax:

useEffect(() => {
    // Code to run on each render
    return () => {
        // Cleanup function (optional)
    };
}, [dependencies]);

Effect function: side effect code runs.
Cleanup function: This optional return function cleans up side effects like subscriptions or timers when the component unmounts.
Dependencies array: React re-runs the effect if any of the values in this array change.

Official Use Cases & Recommendations
External Synchronization: Use it to connect to a chat server, control a non-React widget, or listen to browser events.
Data Fetching: While common, the Official React Documentation recommends using framework-specific tools or client-side caches (like TanStack Query) instead of manual Effects to avoid "waterfalls" and race conditions.
Avoid Overuse: Do not use Effects for logic that can be handled during rendering, such as transforming data or handling user events (which should remain in event handlers

Working of useEffect
In React, useEffect runs after the component renders on screen.
It runs every time, once, or only on changes depending on the dependency array.
Before running again (or removing the component), it runs a cleanup function.
It helps handle tasks like API calls, timers, or events using state and props easily.

Ways to mimic lifecycle methods using useEffect hook
The useEffect() hook is not only used for handling side effects, but it also allows functional components to replicate the behavior of class-based lifecycle methods like

Mimicking componentDidMount: To run code once when the component mounts, pass an empty dependency array ([]) to useEffect. This ensures the effect runs only once, similar to componentDidMount.

useEffect(() => {
    console.log("Component mounted (Functional)");
}, []);

Mimicking componentDidUpdate: To run code every time a specific state or prop changes, include those variables in the dependency array. This simulates componentDidUpdate.

useEffect(() => {
    console.log("Component updated (Functional)");
}, [value1, value2]);

Mimicking componentWillUnmount: To run cleanup logic when the component unmounts, return a cleanup function from useEffect. This simulates componentWillUnmount.

useEffect(() => {
    return () => {
        console.log("Component unmounted (Functional)");
    };
}, []);

Effect Cleanup
Some effects require cleanup to reduce memory leaks.
Timeouts, subscriptions, event listeners, and other effects that are no longer needed should be disposed.
We do this by including a return function at the end of the useEffect Hook.

Cleaning Up Side Effects
useEffect allows you to clean up after your effects by returning a cleanup function. This is particularly useful for:

Removing event listeners.
Canceling network requests.
Clearing timers or intervals.

Example:
Clean up the timer at the end of the useEffect Hook:

import { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
function Timer() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    let timer = setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
    return () => clearTimeout(timer)
  }, []);
  return <h1>I've rendered {count} times!</h1>;
}
createRoot(document.getElementById('root')).render(
  <Timer />
);

SYNTAX

useEffect(setup,dependencies?)

1. No dependency passed:

useEffect(() => {
  //Runs on every render
});

2. An empty array:

useEffect(() => {
  //Runs only on the first render
}, []);

3. Props or state values:

useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes
}, [prop, state]);

setup:
A function containing effect logic.
optionally it can return a Cleanup function to undo the effect(eg..closing the connection)
When component commits,React will run your Setup function
After every commit with changed dependencies,React will first run the cleanup function with the old values ,Run setup function with new values
After the component is removed from the DOM,React will run the cleanup Function.

dependencies:
An optionl array of reactive values(props,state,variable,functions declared directly inside the component body) inside the setup code , tiggers the effect when changed.
A list of dependencies[dep1,dep2] must have constant number of items.
React will compare each dependency with its previous value using the object.is comparison.
If you omit this argument ,Effect will re-run after every commit of component

import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
  // ...
}

Returns
useEffect returns undefined

Timing and Execution
React runs the effect after the component has rendered and it updates the screen.
No dependency Array:Runs after every render
Empty dependency Array[]:Runs only once,after the initial mount.
With dependencies[dep1,dep2]: Runs on initial mount,any list value changes.

Caveats
Call useEffect at the top of your component to declare an effect
Can't call inside loops or conditions.
Exact the new components and move the state into it.
you may not trying to synchronise a component with an external system,don't need an effect.

Strict Mode: React will run setup and cleanup one extra time to help find bugs.
1.Strict Mode is on,React runs your code twice in development to test it.
It checks if your setup and cleanup are working properly.
Cleanup should undo everything your setup did(like removing timers or events)
If errors happen,fix your cleanup function.

2.if you put objects or functions inside the component,change every time it renders.
This makes your Effect run again and again,even when it's not needed.
To avoid this ,Don't include unnecessary objects or functions as dependencies.
Move extra logic or state updates outside the effect,so it runs only when needed

3.In React, useEffect runs after the screen updates and shows to the user.
So if your effect changes something visual, users might briefly see a wrong position (like flicker).
useLayoutEffect runs before the screen is shown, so changes happen instantly.
Use useLayoutEffect only when you need smooth visual updates (like positioning elements).

4.In React, if an Effect is triggered by a user action (like a click), it may run before the screen updates.
This helps React handle events properly and show correct results.
Most of the time, this behavior is fine and works as expected.
If you want to delay it until after the screen updates (like showing alert()), use setTimeout.

5.In React, even after a click, useEffect might run after the screen updates.
This is usually fine and users won’t notice any issue.
If you need to stop the screen from updating until your code runs, use useLayoutEffect.
Effects run only in the browser, not during server-side rendering.

Infinite Loop: updating a state variable,also listed as dependency can cause a loop re-renders.
Client-Only: Effect only run in the browser and do not execute during server rendering.

import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
  // ...
}

Usage
Connecting to an external system
In React, useEffect is used to connect your component to things outside React (like APIs, timers, or events).These systems are not connected to React ,so they are called external.

To connect your component to some external system, call useEffect at the top level of your component:
You write setup code (start connection) and a cleanup function (stop/disconnect).
React runs setup when the component starts, and runs cleanup(with the old props and state) + setup(with the new props and state) again when values change.
When the component is removed, cleanup runs one last time (to avoid memory leaks),after your component is removed from the page (unmounts).
If you’re not using anything external (like API, timer, event), you usually don’t need useEffect.
A list of dependencies including every value from your component used inside of those functions.
Try to write Every Effect as an independent process and single setup/cleanup cycle at a time.
component is mounting, updating, or unmounting.

In React, when the component loads, it connects (setup). When values change, it disconnects old + connects new. When it’s removed, it disconnects finally.
In development, React runs setup → cleanup → setup once extra to check for bugs.
Your cleanup should undo everything setup did, so users don’t notice any difference.
Examples of external systems: API/chat connection, timers (setInterval), events (addEventListener), animations.

A timer managed with setInterval() and clearInterval().
An event subscription using window.addEventListener() and window.removeEventListener().
A third-party animation library with an API like animation.start() and animation.reset().

In React, Effects are used when you need to do things outside React.
If you write the same useEffect logic again and again, you should create a custom Hook.
A custom Hook reuses and hides complex logic, making your code cleaner.
Example: useChatRoom handles connection logic so your component stays simple.

Controlling a non-React widget
In React, you can use useEffect to control things not built with React (like maps or video players).
When your React state (like zoom level) changes, the Effect updates the external widget.
This keeps both React and the external system in sync.
Sometimes cleanup isn’t needed if the browser automatically removes everything.

Fetching data with Effects
In React, you can use useEffect to fetch data from an API.
The ignore flag helps avoid bugs when responses come in the wrong order (race condition).
You can use async/await, but still need cleanup to handle updates safely.
Writing fetch logic in Effects again and again is messy—better use a custom Hook or framework method.

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  };

  fetchData();
}, [props.someProp]);

Specifying reactive dependencies
In React, you must include all reactive values(like props or state) used inside useEffect as dependencies .
If those values change, the Effect will run again automatically.
If a value never changes (not reactive), you can remove it from dependencies. = empty dependencies
An Effect with empty dependencies doesn’t re-run when any of your component’s props or state change.
Don’t ignore the linter—missing dependencies can cause bugs and wrong behavior.
If you specify the dependencies, your Effect runs after the initial commit and after commits with changed dependencies.
If your Effect truly doesn’t use any reactive values, it will only run after the initial commit.
If you pass no dependency array at all, your Effect runs after every single commit of your component.

Updating state based on previous state from an Effect
In React, count is a reactive value, so normally it must be in list of dependencies.
That makes the Effect setup and cleanup every time count changes.
Using c => c + 1 updates state based on the previous value instead of count + 1, so it doesn’t depend on count anymore.
This avoids unnecessary re-running, making your Effect more efficient

Removing unnecessary object dependencies
In React, objects or functions created inside a component are new on every render.
If you use them as dependencies, useEffect will run again and again unnecessarily.
To fix this, create that object inside the Effect instead of outside.
Then the Effect depends only on real values (like roomId), so it runs only when needed.

Reading the latest props and state from an Effect
In React, normally you must add all reactive values as dependencies so the Effect updates correctly.
sometimes you’ll want to read the latest props and state from an Effect without “reacting” to them.
But sometimes you want to use a value without re-running the Effect when it changes.
For that, use useEffectEvent and move that code inside it.
This way, your Effect runs only when needed (like url), but still reads the latest data (like shoppingCart).

Displaying different content on the server and the client
In React, apps can render on both server and client, and the first output should be the same.
Some things (like localStorage) work only on the client, not on the server.
So you use useEffect to update after loading, which causes a re-render on the client.
Use this carefully, because users may briefly see different content before it updates.

Subscribing to Events:
Subscribe to events such as scrolling, resizing, or keyboard events.

useEffect(() => {
  const handleScroll = () => {
    // Handle scroll event
  };
  window.addEventListener('scroll', handleScroll);
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []);

Cleaning Up:
Perform cleanup tasks like unsubscribing from events or canceling async tasks.

useEffect(() => {
  const subscription = someObservable.subscribe();

  return () => {
    subscription.unsubscribe();
  };
}, []);

Questions
1.A useEffect hook depends on [count, userId]. In which situation will the effect re-execute?
Answer
When either count or userId changes
2.Why is the cleanup function executed before an effect runs again after dependency changes?
Answer
To remove previously created side effects like subscriptions or timers

3.A developer wants to simulate the behavior of componentWillUnmount in a functional component. Which useEffect pattern correctly achieves this?
Answer:
useEffect(() => { return () => console.log("Cleanup"); }, []);

4.A component uses:
useEffect(() => {
console.log("Effect executed");
});
How will this effect behave during the component lifecycle?
Answer:
It runs after every render

5.Which situation will NOT trigger the cleanup function of a useEffect hook?
Answer:
During the initial render

6.In React, what is the purpose of the cleanup function in the useEffect hook?
Answer:
To clean up any subscriptions or side effects