Forem: subash

what is react

subash — Fri, 15 May 2026 08:53:39 +0000

React

React is used to make single and responsive html web pages,
it's kind of replacement of dom framework.

JSX(Java Script Xml)

It is used to write html code in javascirpt

this is for to change old version node and curl install

subash — Wed, 13 May 2026 10:20:20 +0000

The problem is curl is not installed, so the NVM installation never happened.
That is why:
nvm: command not found
appears.

Fix Step-by-Step
Step 1 — Install curl
Run:
sudo apt update
Then:
sudo apt install curl
Type your password if asked.

Step 2 — Install NVM Again
Now run:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Step 3 — Reload Bash
Run:
source ~/.bashrc

Step 4 — Check NVM
Run:
nvm --version
If installed correctly, it shows something like:
0.39.7

Step 5 — Install Latest Node.js
Run:
nvm install node

Step 6 — Verify
node -v
You should see:
v20.x.x
or newer.

Step 7 — Create Vite App
Now finally:
npm create vite@latest
This should work correctly now.

#PROMISE

subash — Fri, 08 May 2026 06:18:37 +0000

  const promise = new Promise((res,rej) =>{
            rej()
        });

        promise
          .then(()=>{
            console.log("done")
          })
          .catch(()=>{

            console.log("error")
          })

In this case we have promise in promise variable, new is key word, default promise have two aruguments which is resolve and reject. this case we call res() so then it will go to then , if we call rej() then it will go catch.



        function Analysis(){
            const analysisPromise = new Promise((res,rej)=>{
                setTimeout(()=>{
                    console.log("analysis completed")
                    res()
                },4000)
            })
            return analysisPromise;
        }
        function Design(){
            const designPromise = new Promise((res,rej)=>{
                setTimeout(()=>{
                    console.log("design completed")
                     res()
                },9000)
            })
            return designPromise;
        }
        function Development(){
            const developmentPromise = new Promise((res,rej)=>{
                setTimeout(()=>{
                    console.log("Development completed")
                     res()
                },4000)
            })
            return developmentPromise;
        }
        function Testing(){
            const testingPromise = new Promise((res,rej)=>{
                setTimeout(()=>{
                    console.log("Testing completed")
                     res()
                },4000)
            })
            return testingPromise;
        }
        function Deployment(){
            const deploymentPromise = new Promise((res,rej)=>{
                setTimeout(()=>{
                    console.log("Deployment completed")
                     rej()
                },4000)
            })
            return deploymentPromise;
        }



        Analysis()

             .then(() => Design())
             .then(() => Development())
             .then(() => Testing())
             .then(() => Deployment())
             .catch(() => console.log("error"))

First we created function, inside that function have promise, inside that promise have setTimout, inside that setTimeout we gave console.log and res(). this function is return that promise.
we have diff function with diff names.each settimout have 4sec gap..

after we callback first functions first one is Analysis() , this function return analysisPromise; setTimout have 4second waiting time and also print analysis completed the gave res(). we use res() then it will going to "then" after that work what inside that then , so we should create then catch syntax.in analysis res() will go to first then that have Design callback , that will return designpromise , it will go like this series upto deployment. if anything rej in between them , after that catch will work.

What is closure

subash — Thu, 07 May 2026 05:32:52 +0000

Closure is used to preserve data and create private memory for functions.
“Variables-ஐ பாதுகாப்பாக வைத்துக்கொண்டு, function முடிந்த பிறகும் அவற்றை நினைவில் வைத்திருப்பது.”

example

function bank(){
            let min_bal = 500;


          return   (amt) => {
             min_bal += amt;
               console.log(`current bal is ${min_bal}`)
            }

        }

        const account = bank();
        const sdf = bank();



        sdf(200);
         sdf(200);
        account(300)

OUTPUT:

In this case bank() is outer function and inner function is in return, which is inside the outer function and min_bal variable also inside the outer function , so outer function return the arrow function , then we put bank() function in account variable then,
we should call account as a function , like account(300) also we can able to pass aruguments.

Here i put bank() function in two diff variable, also we can create so many variable , each variable have separated.
min_bal is 500 in sdf add 200 and then again 200 now total amount is 900
min_bal is 500 in account add now total amount is 900 .

two variable keep separate value but function is same .

TO DO LIST

subash — Wed, 06 May 2026 07:22:05 +0000

What is DOM

subash — Tue, 28 Apr 2026 04:28:46 +0000

DOM stands for Document Object Model, which is used to control and modify the content of elements within an HTML document. The DOM allows JavaScript to interact with web pages.

First in the script, we make one variable, that variable have which element we are going to change, for example:

Hello

const heading = document.getElementById("title");

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

In this case, we did change the Hello into Hi. " Now, we show only Hi,

and then, these all are diff to select

** const items = document.getElementsByClassName("box"); -- this is for to select class

**const paras = document.getElementsByTagName("p"); -- this to select element

**document.querySelector(".box");

document.querySelector("#title");
document.querySelector("p");-- these document.querySelector only return first matching element
document.querySelector(".box.active");--Multiple Classes
document.querySelector("div > p"); -- Child Selector this will select only first p which is direct child of div.
document.querySelector("div p"); this is same as "div > p" but it will consider indirect child also ,like nested child.
document.querySelector("[type='text']");-- attribut selectors
document.querySelector("input[name='username']"); -- Specific Attribute

**const allBoxes = document.querySelectorAll(".box"); -- this will select all matching elements

**
document.querySelector("[class$='box']"); TBD
document.querySelector("[class^='box']"); TBD
document.querySelector("[class*='box']"); TBD
document.querySelector("div:not(.active)"); TBD
document.querySelector("li:first-child"); TBD
document.querySelector("li:last-child"); TBD
document.querySelector("p:nth-of-type(1)"); TBD
document.querySelector("li:nth-child(2)"); TBD

** This is how to control css
document.querySelector("h1").style.color = "red";

const el = document.querySelector("#title");

el.classList.add("active"); // add class
el.classList.remove("active"); // remove class
el.classList.toggle("active"); // toggle class

JavaScript Array Iteration Methods Explained (forEach, map, filter, reduce)

subash — Thu, 16 Apr 2026 08:46:58 +0000

forEach LOOP

This loop will repeat how long the array length.

In this case what was happened is forEach have the argument of 'display' which is function , this will call that display function , that display function have three parameter like display(val,d,s).

First forEach is one of the inbuilt function that return array val , index number and then entire array , already we gave three parameter(val,d,s). these first parameter is contain the array value , and second parameter is contain array index number then final parameter have the entire array,

forEach(display);
function forEach (arg){
    arg(10,0,1)
}

here what was happened is display is the argument this will stored in arg parameter , and then in this function have arg(10,0,10) arg will consider as display so display(10,0,10) .
so in this page already display have array value, index number, and then entire array right , in this case we add one more aruguments which is display(10,0,10) so this arugument will add onces array length will complete.

map()

It is same like forEach but what the diff is we can return the value in function forEach not return like this
for example;
const mark = [2,3,3,3];
const output= mark.map (display);
function display(val,d,s){
return val+d
}

console.log(output)

this work in map , but not in forEach,

mapFlat()

References;

1.https://dev.to/sivakumar_mathiyalagan_/array-iteration-methods-ko4
2.https://www.w3schools.com/js/js_array_iteration.asp#mark_map

WHAT IS JAVASCRIPT

subash — Sun, 12 Apr 2026 12:42:59 +0000

JavaScript is an essential language for web development. It transforms static web pages into dynamic and interactive experiences. With its simplicity and powerful features, it remains one of the most widely used programming languages today.

1.JavaScript is a high-level programming language for the Web.

Used to make webpages dynamic 3.It is a scripting language 4.It is Single threaded 5.It follows OOPs concept (Object-Oriented Programming)

What the diff between interpreter and compiler

An interpreter means to convert the code line by line into machine code, but compile is convert the entire code into machine code before execution.

What is “Compile”?

Convert entire code → machine code (before running)

High-Level Programming Language

JavaScript is a high-level language, in order to easy to read and write. Developers don’t need to worry about low-level details like memory management.
Low-level details = the basic internal operations of a computer (like memory, CPU, and binary processing).

JavaScript is used to make web pages dynamic.

It allows you to:
Update content without reloading the page
Handle user inputs
Create animations and effects

Example: Form validation, dropdown menus, live updates

Scripting Language

JavaScript is a scripting language, meaning it is executed directly in the browser without needing compilation. It automates tasks and enhances user experience.
JavaScript uses both an interpreter and a JIT compiler.

Scripting language என்பது compile செய்யாமல் direct ஆக run ஆகும் language. இது automation மற்றும் web interaction க்கு பயன்படுத்தப்படும்.

Step 1: The interpreter starts executing the code quickly.
Step 2: The JIT compiler observes which parts of the code are executed frequently.
Step 3: Those parts are compiled into machine code.
Step 4: The program runs faster after optimization.

This combination provides both quick startup and high performance.

JavaScript is neither purely interpreted nor purely compiled.

It uses an interpreter to start execution quickly and a JIT compiler to optimize performance during runtime.

JIT = Just-In-Time Compiler

Single-Threaded

JavaScript can do only ONE task at a time.
But uses event loop to manage multiple tasks

Event loop only manages tasks
It does NOT run multiple tasks at the same time

Supports Object-Oriented Programming (OOP)

JavaScript follows object-oriented programming concepts. It allows developers to organize code using:

Objects
Classes--(TBD)
Inheritance--(TBD)

This helps in writing clean and reusable code.

What are DataTypes?

Two types
Primitive and Non-Primitive

Primitive DataTypes

1.String
2.Number
3.Boolean
4.BigInt
5.Symbol
6.Null
7.Undefined

Non-Primitive

1.Object
2.Array
3.Functions
4.Date(TBD)
5.RegExp(TBD)

#What is Stack?

FILO = First In Last Out

A simple memory area
Stores:
Primitive values (number, string, boolean)
Function calls
Stack = stores primitive values and function calls (fast, fixed)

What is Heap?

A large memory area
Stores:

Objects
Arrays
Functions (reference)

Heap = stores objects and complex data (flexible, slower)

REFERENCES

https://dev.to/sivakumar_mathiyalagan_/basic-javascript-questionnaires-e6l

ROUGH WORK

subash — Fri, 10 Apr 2026 06:39:02 +0000

Invoke = அழைத்து run செய்யுதல் or executed

Programming Language → Code → Interpreter → (Program running at Runtime) → Output

✅ Final Clarity

👉 Interpreter = executes
👉 Runtime = when it executes
👉 Program = code being executed

what is independent-platform

“மழை வந்தால் குடை எடுத்துக்கொள்வது exception handling மாதிரி.”

👉 English: There are some exceptions in this rule.
👉 Tamil: இந்த விதியில் சில விதிவிலக்குகள் உள்ளன.

🔑 Simple Understanding

👉 Exception = விதிவிலக்கு (rule-க்கு மாறான ஒன்று)

JavaScript Basic Array Methods Explained for Beginners (Complete Guide)

subash — Thu, 09 Apr 2026 09:20:49 +0000

What are the Array Methods?

Array methods are built-in functions in JavaScript used to perform operations on arrays.

Array length
Array toString()
Array at()
Array join()
Array pop()
Array push()
Array shift()
Array unshift()
Array isArray() 10.Array delete() 11.Array concat() 12.Array copyWithin() 13.Array flat() 14.Array slice() 15.Array splice() 16.Array toSpliced()

1.Array length;

length is mention the count of element in array

EXAMPLE:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length = 2;
document.getElementById("demo").innerHTML = fruits;

OUTPUT : Banana,Orange

EXPLANATION;
In this case fruits.length = 2 is determine how many element will show in output from the first element.

EXAMPLE2;

const fruits = ["Banana", "Orange", "Apple", "Mango"]; let size = fruits.length; document.getElementById("demo").innerHTML = size;

OUTPUT - 4

EXPLANATION;

fruits.length is determine the count of the element in array.

EXAMPLE3;

<!DOCTYPE html>

JavaScript Arrays

Bracket Indexing

Array elements are accessed using their index number:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;

OUTPUT -- Kiwi,Orange,Apple,Mango

EXAMPLE4

<!DOCTYPE html>

JavaScript Arrays

The length Property

The length property provides an easy way to append new elements to an array without using the push() method:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[fruits.length] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;

OUTPUT - Banana,Orange,Apple,Mango,Kiwi

2.Array toString()

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let myList = fruits.toString();
console.log(typeof myList)
console.log(typeof fruits)

OUTPUT - string
object

3.Array at()

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);
console.log(fruit);
console.log(fruits);

OUTPUT - Apple
["Banana", "Orange", "Apple", "Mango"];

This for if want print any one of in array then we use this methods

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

Array join();

const fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.join(" * ");

OUTPUT - Banana*Orange*Apple*Mango

Array pop()

const fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo1").innerHTML = fruits.pop(); document.getElementById("demo2").innerHTML = fruits;

OUTPUT - Mango
Banana,Orange,Apple

6.Array push()

JavaScript Arrays

The push() Method

The push() method returns the new array length:

const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;

OUTPUT - 5
Banana,Orange,Apple,Mango,kiwi

7.Array shift()

<!DOCTYPE html>

JavaScript Arrays

The shift() Method

The shift() method returns the element that was shifted out.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.shift();
document.getElementById("demo2").innerHTML = fruits;

OUTPUT - Banana
Orange,Apple,Mango

8.Array unshift()

<!DOCTYPE html>

JavaScript Arrays

The unshift() Method

The unshift() method returns the length of the new array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;

OUTPUT - 5
Lemon,Banana,Orange,Apple,Mango

9.Array.isArray()

<!DOCTYPE html>

JavaScript Arrays

The isArray() Method

const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);

OUTPUT -- true

10.Array delete()

Warning !

Using delete() leaves undefined holes in the array.

Use pop() or shift() instead.

<!DOCTYPE html>

JavaScript Arrays

The delete Method

Deleting elements leaves undefined holes in an array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];

delete fruits[0];

document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];

OUTPUT -- The first fruit is: Banana
The first fruit is: undefined

11.JavaScript Array concat()

<!DOCTYPE html>

JavaScript Arrays

The concat() Method

The concat() method merges (concatenates) arrays:

const array1 = ["Cecilie", "Lone"];
const array2 = ["Emil", "Tobias", "Linus"];
const array3 = ["Robin", "Morgan"];

const myChildren = array1.concat(array2, array3);

document.getElementById("demo").innerHTML = myChildren;

OUTPUT -- Cecilie,Lone,Emil,Tobias,Linus,Robin,Morgan

EXAMPLE2;
<!DOCTYPE html>

JavaScript Arrays

The concat() Method

The concat() method can merge string values to arrays:

const myArray = ["Emil", "Tobias", "Linus"];
const myChildren = myArray.concat("Peter");
document.getElementById("demo").innerHTML = myChildren;

OUPUT -- Emil,Tobias,Linus,Peter

12.Array copyWithin()

<!DOCTYPE html>

JavaScript Arrays

The copyWithin() Method

copyWithin() copies array elements to another position in an array, overwriting existing values:

Copy to index 2, all elements from index 0:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.copyWithin(2,0);

OUTPUT - Banana,Orange,Banana,Orange

fruits.copyWithin(2,0)
In this case what was happened is first print first two element, because that only mention then the element start again in 0 index as we mentioned, but the array length is will not change.

EXAMPLE2:

<!DOCTYPE html>

JavaScript Arrays

The copyWithin() Method

copyWithin() copies array elements to another position in an array, overwriting existing values.

Copy to index 2, the elements from index 0 to 2:

const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
document.getElementById("demo").innerHTML = fruits.copyWithin(4,0,2);

OUTPUT -- Banana,Orange,Apple,Mango,Banana,Orange

What is a Constructor Function in JavaScript? (Beginner Guide with Examples)

subash — Tue, 07 Apr 2026 13:50:38 +0000

=>Sometimes we need to create many objects of the same type.
=>To create an object type we use an object constructor function.
=>It is considered good practice to name constructor functions with an upper-case first letter(const Person1{}).

*what is object type?
It is a template to create many similar objects.

for example;
const Person1 {
name :John,
age : 25

}

const Person2 {
name :Kumar,
age : 30

}

const Person3 {
name :Ravi,
age : 28

}

These all have the same template, like name, age, so in this case there is no need to create separate object, because all have same structure so we can use constructor function.

for example;

function Person (name,age){
this.name = name ;
this.age = age ;
}

const person1 = new Person("John",25);
const person2 = new Person("Kumar",30);
const person3 = new Person("Ravi",28);

In this case, what the advantage? We added so many Person in just one line, I did only one function that will apply all,
In this program, we have the word ' this ', why we use that, that is what we are going to learn now.

First, we know how to create properties in an object from outside,
example;
const Person3 {
name:Ravi,
}

//this Person3 object have not key of age so that what we are going to create //

Person3.age = 28;

That's it, here what was happened is we mentioned Person3 first then we will mention what is inside Person3 that is we should mention, and we pshould use dot betweeen parent and child, that's why have dot between Person3 and agePerson3.age).

Person3.age = 28; finally i put the value for age, if age key is already present in the Person3 object, the value will change, if not present, that key it will be created as a property.

NOW WE ARE GOING TO RELATE (this & person3.age)

*Person3 is replaced by 'this' simple,
*'this' is the representation of current callback .

const Person1 = new Person("John",25);
const Person2 = new Person("Kumar",30);
const Person3 = new Person("Ravi",28); these are all the callbacks.

First, our goal is to shorten the code, so we use this constructor function

ex;1

function Person (name,age){
this.name = name;
this.age = age;
}

const Person1 = new Person("John",25);
const Person2 = new Person("Kumar",30);
const Person3 = new Person("Ravi",28);

ex2;
Person1 {
name :John,
age : 25

}

Person2 {
name :Kumar,
age : 30

}

Person3 {
name :Ravi,
age : 28

}

example1 and example2 both are same but example1 increase by one line and example2 is increase by three line.
In this case three line may be feel short but when we have more than 10 or so many properties, then we have to write more than 10 or so many number of lines in example 2 ,
but still example1 will solve that in one line.

this.name , Person3.name, Person1.name, and Person2.name all are same.
but one, this.name = Person3.name, Person1.name, and Person2

EXPLANATION OF THIS LINE(this.name = name ;)

this.name is to create variable like Person3.name
=name => this name is parameter what hava function
=>function person (name,age){

“What is an Object in JavaScript? Complete Beginner Guide”

subash — Tue, 07 Apr 2026 07:01:56 +0000

Object is used to store data in key-value pairs and are used in almost every application, in this blog we are going to learn how object work and how to create one.

What is an object in JavaScript?

let person = {
name: "John",
age: 25
};

*Object is a collection of data, stored as a key-value pairs like in this case name is the key and "John" is value of name,
key+value = Properties.

*#How to Access Object Values

let person = {
name: "John",
age: 25
};

delete person.age

console.log(person) =>output is name: "John"

if we want to change that key value then;

person.name = "subash"
console.log(person) => output is name: "subash"

how to add properties;

there no diff b/w change key values and add propertise

person.address = "ariyalur"; this will add address key in object;

How to use nested object

Object inside another object

let person = {
name: "John",
age: 25,
Education:{
ug : "civil"}
}

This is the nested object.

CRUD- Create Read Update Delete this is what we discussed