DEV Community: subash

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 the high level Programming Language for the Web.
2.Used to make webpages dynamic
3.It is a scripting language
4.It is Single threaded
5.It follows OOPs concept (Object-Oriented Programming)

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 together.

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

Types of Functions Made Easy – Full Guide for Beginners

subash — Sat, 04 Apr 2026 12:55:43 +0000

there are 14 types of functions

Function Declaration
Function Expression
Arrow Function
Anonymous Function
Named Function Expression
IIFE
Generator Function
Async Function
Async Arrow Function
Method
Constructor Function
Class Method
Getter
Setter

1.Function Declaration

example;
function greet() {
console.log("Hello, World!");
}

greet();

In this case normal function this have function key word and
greet() is the function name or function identifier braces and curly braces also avail in this funtions .

2.Function Expression

example;

const greet = function() {
console.log("Hello!");
};

greet();

Function Expression means we should not put function name or identifier with function key word, we create variable then we put that function into that variable. that variable will consider that function name or identifier.

3.Arrow Function

const greet = () => {
console.log("Hello!");
};

greet();

This is arrow function have not function keyword and function name only start with braces like () , we can able to put this function in variable

common things in function expression and arrow function
*Are stored in variables
*Can be passed as arguments (callbacks)
*Are not hoisted like declarations

what is big diff between function expression and arrow function

TBD

In function declaration we can able to call the function name before enter function , but in function expression and arrow function is not working while use hoisted;
example:
console.log(subash(1,5));

function subash(c,s){
return c+s;
};
This program is only for declaration not suitable for arrow function and function expression.

Lambda Expression

let subash = (n1,n3) => n1%n3;

console.log(subash(3,3));

In this case function have not any name but return the n1%n3, we put that in one variable , we call the nameless function through the variable subash(3,3) , in this case we gave arguments successfully,
it will print in console as 1.

If we put curly braces{} then we have to mention the word return to return the n1%n3 , else no need to mention.

There is no term like lambda expression in javascript , it is only the concept used to create short line of program. this concept is applied in
Arrow and Anonymous function.

Arrow Function;
const add = (a, b) => a + b;

Anonymous function;
setTimeout(function() {
console.log("Hi");
}, 1000); #TBD

4.Anonymous function

reference website

https://www.geeksforgeeks.org/javascript/functions-in-javascript/ 2.

What is a Function? Simple Explanation with Examples

subash — Sat, 04 Apr 2026 06:32:43 +0000

what is function ?

1.function is a block of code that perform specific task.
*block of code is a group of instruction to perform specific task.
2.Instead of writing the same code again and again, you can write it once inside a function and reuse it whenever needed.

EXAMPLES;

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

*In this case function is keyword, square is the function name what we named, inside the parentheses have parameters if we want to use so many parameters inside the parentheses then we must separate each of them with commas.

*if we want to execute this function, then we should call this name of function, this function name is square so we call this like square() or if we want to put arguments then we should call this like square(23) in this case what was happened is you imagine number(parameter) is the variable and arguments is variable value , what the value(arguments) we give while callback that value will store in variable(parameters)

for example:
let calculation = square(2) --- => this returned number * number
console.log (calculation)
Then final output is --- 4 (2*2 --- => number*number)

Inside calculation have function that entire function returned (number * number), then we print the variable calculation then output is 4 because my arguments is 2, that 2 will be the value of number so the function return number * number that means 2*2 =>4

REFERENCE WEBSITE;
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

JAVA SCRIPT HISTORY

subash — Fri, 03 Apr 2026 06:38:13 +0000

HOW JAVASCRIPT START

=>JavaScript was invented by Brendan Eich in 1995,he was make that Java Script in just 10days
=>Netscape Communication is company name,Javascript was created at Netscape communication.
=>Firstly JavaScript was created for Netscape Navigator Browser.
=>and then Netscape was handed over to ECMA and became the ECMA-262 standard in 1997.
=> Netscape Communications was a software company, it was started to fall around 1997 to 1998, because of compition of microsoft internet explorer the reason is microsoft gave free browser with integrated in windows so then no one have need to install separately with cost.then AOL(American Online) was taken that netscape, finally netscape officially closed in 2008, but it was number one browser in 1995.

what is ECMA?

*It is stands for the European Computer Manufacturers Association.
*It was founded in 1961 as a non-profit industry association to develop standards for information technology, electronics, and programming languages.
*ECMA is now officially known as Ecma International to reflect its global reach.
*Ecma International is a standards organization.

How Netscape became MDN (Mozilla Developer Network);

*Netscape released its code in 1998, this created mozilla project.
*mozilla organisation started from that code later became mozilla foundation in 2003.
*mozilla foundation is not for profit and it also created mdn to learn html, css and javascript. their goal main goal is internet should be free for all peoples.
*mozilla corporation is company for profit, it was created firefox as a free source.

javaScript before names;

1.Mocha first name of js
2.Livescript second name
3.Final name is javascript, at the time java was very popular so name was changed based on the java.

EXPLANATION FOR BETTER LEARNING

To develop a standard means: Creating a set of rules or guidelines so everyone follows the same way.

2.It was founded → இது நிறுவப்பட்டது or தொடங்கப்பட்டது (Started)
in 1961 → 1961-ஆம் ஆண்டு
non-profit → லாப நோக்கமற்ற
industry association → தொழில் சங்கம்

REFERENCE WEBSITE;
https://www.w3schools.com/js/js_history.asp

Understanding Arrays: A Beginner-Friendly Explanation (With Examples)

subash — Wed, 01 Apr 2026 13:36:15 +0000

What is an Array?

An array is a collection of items stored in a single variable.

Think about a box of fruits
Instead of storing each fruit in a separate variable, we store all in one array.

Example without Array
let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";

❌ Problem: Too many variables

Example with Array
let fruits = ["Apple", "Banana", "Mango"];

✅ Easy and clean!

Index Concept (Important)

Array starts from index 0.

How does it work?

To keep things organized, an array gives every item a number. This number is called an Index.

The Golden Rule: In the world of computers, we always start counting from 0, not 1.

So, the first item is at position 0, the second is at 1, and the third is at 2.

Homogeneous (The Same Type)

Usually, an array likes to hold the same kind of things. If it’s a list of names, keep it all names. If it’s a list of numbers, keep it all numbers.
Contiguous (All Together)

In the computer's memory, the items in an array sit right next to each other in a perfect row. There are no gaps or empty spaces between them.

Fixed vs. Dynamic Size

Fixed Size: Some languages require you to decide the size of the list at the start. You cannot add more later.

Dynamic Size: Modern languages (like JavaScript) let the list grow as long as you want!

ADDING VALUES;

let fruits = ["Apple", "Banana"];

fruits.push("Mango");

console.log(fruits);

Adds value to end=> let fruits = ["Apple", "Banana","Mango"];

REMOVING VALUES

let fruits = ["Apple", "Banana","Mango"];

fruits.pop();

Removes last value => let fruits = ["Apple", "Banana"];

LOOPING ARRAY

let fruits = ["Apple", "Banana", "Mango"];

for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}

Prints all values

FOR LOOP

=> This is for loop first condition let i = 0 is what the i value while start
=> second condition is i < fruits.length , in this case fruits length is 3, so it will consider that condition as i<3, this condition is for to limit the loop, the loop is run only less than 3, but index start with 0 , so we have space to fit three value in this loop.
=> third condition how the i will increase , i want to increase like 2 4 6 then put i+=2 instead of i++;

Why Arrays are Important?

Array is a powerful and simple way to store multiple values in one place.
Easy to manage data
Used in almost all programs
Arrays can store any type (number, string, object)

HISTORY OF CSS

subash — Wed, 01 Apr 2026 07:14:17 +0000

CSS stands for cascading style sheet

Css is used to style HTML elements

history of css;
1.css is proposed by Håkon Wium Lie in 1994
2.In 1996 Css1 released by World Wide Web Consortium
3.In 1998 css2 released
4.2011 onwards → CSS3 (modular release) this module method is used to make update easily.
2011 onwards என்றால் 2011 முதல் இன்று வரை என்று அர்த்தம். Modular Release என்பது CSS-ஐ மொத்தமாக வெளியிடாமல், சிறு சிறு பகுதிகளாகத் தனித்தனியே பிரித்துத் தொடர்ந்து மேம்படுத்துவதைக் குறிக்கும்.

CSS1 1996 Basic styling

Features:
Colors
Fonts
Text alignment
Background

example;p {
color: red;
font-size: 16px;
}

CSS2 1998 Layout + positioning

CSS3 2011+ Modern design + animations

Is there any alternative to CSS today?

❌ No, there is NO direct replacement for CSS

✅ But there are tools and technologies built on top of CSS

CSS is STILL the Core (Very Important)

Browser understands only:

HTML
CSS
JavaScript

So CSS cannot be replaced

HISTORY OF HTML

subash — Sun, 29 Mar 2026 15:36:22 +0000

History of HTML

1.HTML was invented by - Tim Berners-Lee.
(He was working at CERN (Switzerland))
(1989 → Idea)
(Year: 1991 - HTML was 1991 → Public release)

CERN(European Organization for Nuclear Research)

CERN was officially established on 29 September 1954.

CERN short form is based on only french not based on English

It is an international government research organization

Funded by multiple European countries (governments)

Works for scientific research (not profit)

23 Member Countries (main contributors)

Many countries (including India 🇮🇳) are:Associate Members

Associate Members
They also participate, but not full members

Why CERN is important

While working there,
Tim Berners-Lee created:

HTML
HTTP-HyperText Transfer Protocol
HTTP is a protocol used to connect browser and server
World Wide Web- World Wide Web (WWW) is a system of websites and web pages connected through the internet
In simple terms Collection of websites connected using links (URLs)
Important Timeline
1989 → Idea proposed at CERN
1990 → First website + first browser created
1991 → WWW released to the public

Why WWW was created?

To share information easily between scientists
Using:
HTML (structure)
HTTP (communication)
URL (address)

#How it works
You open a browser (Chrome, etc.)
You type a URL (like google.com)
The browser uses internet
It shows a web page

That system = World Wide Web

Tim Berners-Lee

Founder: It was started by Tim Berners-Lee, who is known as the "Father of the World Wide Web."

Established: The W3C (World Wide Web Consortium) was founded in 1994.

Interview Short Answer

“WWW was invented by Tim Berners-Lee in 1989 and released publicly in 1991.”

WHILE LOOP FLOWCHART FOR BEGINNERS

subash — Fri, 27 Mar 2026 09:14:17 +0000