DEV Community: Annapoorani Kadhiravan

Types of loops in JS

Annapoorani Kadhiravan — Sat, 13 Jun 2026 18:56:47 +0000

Programming is all about solving problems efficiently. Two concepts that play a major role in writing reusable and efficient programs are loops and functions.

Loops help us perform repetitive tasks without writing the same code again and again, whereas functions help us organize code into reusable blocks.

Let's understand these concepts in detail.

Why Do We Need Loops?

Suppose we want to print "Hello" five times.

Without loops, we would write:

console.log("Hello");
console.log("Hello");
console.log("Hello");
console.log("Hello");
console.log("Hello");

Although this works, it violates one of the fundamental principles of programming:

Don't Repeat Yourself (DRY)

Repeating code:

Increases the number of lines.
Makes maintenance difficult.
Introduces more chances for errors.

Loops solve this problem by allowing us to execute the same block of code multiple times.

Types of Loops in JavaScript

JavaScript provides three looping statements:

Loop Type	Category
while	Entry-Check Loop
for	Entry-Check Loop
do...while	Exit-Check Loop

Entry-Check Loop / Entry-Controlled Loop

In entry-Check loops, the condition is checked before executing the loop body.

If the condition is false initially, the loop body never executes.

Examples:

while loop
for loop

Exit-Check Loop / Exit-Controlled Loop

In an exit-Check loop, the loop body executes first and then checks the condition.

Therefore, the body executes at least once.

Example:

do...while loop

Components of Every Loop

Every loop generally consists of three parts:

1. Initialization

Determines where the loop starts.

let i = 1;

2. Condition

Determines whether the loop should continue executing.

i <= 5

3. Increment or Decrement

Updates the loop variable after each iteration.

i++;

i--;

1. while Loop

The while loop repeatedly executes a block of code as long as the condition remains true.

Syntax

while(condition)
{
    // statements
}

Example: Print Numbers from 1 to 5

let i = 1;

while(i <= 5)
{
    console.log(i);
    i++;
}

Output

Working of while Loop

Iteration 1:

i = 1
1 <= 5 → true
Print 1
i becomes 2

Iteration 2:

i = 2
2 <= 5 → true
Print 2

This process continues until:

i = 6
6 <= 5 → false

At that point, the loop terminates.

Infinite Loop

An infinite loop occurs when the condition never becomes false.

Example:

let i = 1;

while(i <= 5)
{
    console.log(i);
}

Output:

1
2
3
4
5
...

The loop never stops because i++ is missing.

Infinite loops consume CPU and memory resources and may eventually crash the program.

2. for Loop

The for loop is considered the compact form of the while loop because initialization, condition, and increment are written in a single line.

Syntax

for(initialization; condition; increment)
{
    // statements
}

Example

for(let i = 1; i <= 5; i++)
{
    console.log(i);
}

Output

while Loop vs for Loop

while Loop

let i = 1;

while(i <= 5)
{
    console.log(i);
    i++;
}

for Loop

for(let i = 1; i <= 5; i++)
{
    console.log(i);
}

Both produce the same output.

The difference lies mainly in readability.

Special Forms of for Loop

Infinite Loop

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

Output:

Hi
Hi
Hi
...

Since no condition is provided, JavaScript assumes it is always true.

Explicit Infinite Loop

for(;true;)
{
    console.log("Hi");
}

Output:

Hi
Hi
Hi
...

No Iteration

for(;false;)
{
    console.log("Hi");
}

Output:

No output.

Because the condition is false initially.

When Should We Use while and for?

Use while Loop

When the number of iterations is unknown.

Examples:

Reading data until a valid input is entered.
Waiting for a user action.
Processing files until end-of-file is reached.

while(password !== correctPassword)
{
    // ask again
}

Use for Loop

When the number of iterations is known.

Examples:

Print numbers from 1 to 100.
Traverse arrays.
Display table values.

for(let i=1;i<=100;i++)
{
    console.log(i);
}

do...while Loop

The do...while loop executes the body first and checks the condition later.

Syntax

do
{
    // statements
}
while(condition);

Example

let i = 1;

do{
    console.log(i);
    i++;
}
while(i <= 5);

Output

Why Is It Called Exit-Controlled / Exit-check?

Because the condition is checked after executing the loop body.

Therefore, the body executes at least once.

Curly Braces in JavaScript

Curly braces define a block of statements.

Without braces, only the first statement belongs to the loop or if statement.

Example:

let i = 5;

if(i == 4)
    console.log("Hello");

console.log("Bye");

Output:

Bye

Because:

if(i == 4)
{
    console.log("Hello");
}

console.log("Bye");

Multiple Statements Using Curly Braces

if(i == 4)
{
    console.log("Hello");
    console.log("Bye");
}

Now both statements belong to the if block.

Infinite Loop Due to Missing Braces

let i = 5;

while(i >= 1)
    console.log("Hello");

console.log("Bye");

Output:

Hello
Hello
Hello
...

Notice that:

console.log("Bye");

is outside the loop.

Also, i never changes, causing an infinite loop.

Functions in JavaScript

Functions are reusable blocks of code.

They are considered the building blocks of programs.

Functions help:

Reduce code duplication.
Improve readability.
Increase maintainability.
Promote modular programming.
Reuse code multiple times.

Creating a Function

function add(i, j)
{
    let result = i + j;
    console.log(result);
}

add(10,10);

Output:

Parameters and Arguments

Parameters

Variables declared in the function definition.

function add(i, j)

i and j are parameters.

Arguments

Values passed while calling the function.

add(10,10);

Here:

10 and 10 are arguments.

Real-Life Analogy: Biriyani Function

Think of a function like a recipe.

function biriyani(riceContainer, masalaContainer, container)
{
    console.log("Biriyani ready");
}

Calling:

biriyani("rice", "masala", "chicken");

supplies the ingredients.

Calling Without Arguments

biriyani();

Internally:

riceContainer = undefined
masalaContainer = undefined
container = undefined

If printed:

function biriyani(riceContainer, masalaContainer, container)
{
    console.log(riceContainer);
    console.log(masalaContainer);
    console.log(container);
}

biriyani();

Output:

undefined
undefined
undefined

Passing Actual Values

biriyani("BasmatiRice", "Masala", "Mutton");

Output:

BasmatiRice
Masala
Mutton

Summary

Loops

while → Entry-controlled loop / Entry-Check loop.
for → Entry-controlled loop / Entry-check loop.
do...while → Exit-controlled loop / Exit-check loop.
Infinite loops occur when conditions never become false.
Curly braces group multiple statements.

Functions

Functions are reusable blocks of code.
Parameters receive values from arguments.
Missing arguments become undefined.
Functions improve readability and modularity.

References
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration?utm_source=chatgpt.com
https://javascript.info/while-for?utm_source=chatgpt.com
https://javascript.info/function-basics?utm_source=chatgpt.com
https://www.w3schools.com/js/js_loop_for.asp?utm_source=chatgpt.com
https://www.w3schools.com/js/js_functions.asp?utm_source=chatgpt.com

Understanding Looping in JavaScript

Annapoorani Kadhiravan — Tue, 09 Jun 2026 17:23:04 +0000

Programming often requires performing the same task multiple times. Writing the same code repeatedly is inefficient and difficult to maintain. This is where loops come into the picture.

Loops allow us to execute a block of code repeatedly until a specified condition becomes false.

Why Do We Need Loops?

Suppose we want to print 1 five times.

Without loops, we would need to write:

let count = 0;

if (count < 5) {
    console.log(1);
    count++;
}

// Repeat the same block 4 more times

Repeating the same block several times increases the number of lines and makes the program difficult to manage.

To avoid this repetition, JavaScript provides loops.

The while Loop

A while loop is a shorter and more efficient way to execute the same block of code multiple times.

Syntax

while(condition) {
    // code to execute
}

The loop continues executing as long as the condition evaluates to true.

Example 1: Print 1 Five Times

let count = 0;

while (count < 5) {
    console.log(1);
    count++;
}

Output

How It Works

count starts at 0.
The condition count < 5 is checked.
Since the condition is true, 1 is printed.
count++ increases the value by 1.
The process repeats until count becomes 5.
At that point, the condition becomes false and the loop stops.

Infinite Loop

Consider the following code:

let count = 0;

while (count < 5) {
    console.log(1);
}

Since count is never incremented, the condition always remains true.

As a result, the loop keeps running forever, creating an infinite loop.

Therefore, always ensure that the loop variable is updated properly.

Example 2: Print Numbers from 1 to 5

let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}

Output

Explanation

Initial value = 1
Ending value = 5
Interval = +1

The variable increases by one after each iteration.

Example 3: Print Numbers from 5 to 1

let i = 5;

while (i >= 1) {
    console.log(i);
    i--;
}

Output

Explanation

Initial value = 5
Ending value = 1
Interval = -1

The variable decreases after each iteration.

Example 4: Find the Sum of the First Five Numbers

let i = 1;
let sum = 0;

while (i <= 5) {
    sum += i;
    i++;
}

console.log(sum);

Output

Step-by-Step

Iteration	Value of i	Sum
1	1	1
2	2	3
3	3	6
4	4	10
5	5	15

Example 5: Print Odd Numbers

Odd numbers can be generated by increasing the value by 2 in each iteration.

let i = 1;

while (i <= 9) {
    console.log(i);
    i += 2;
}

Output

Explanation

Initial value = 1
Ending value = 9
Interval = 2

Components of a Loop

Every loop generally contains three important parts:

1. Initial Value

let i = 1;

Determines where the loop starts.

2. Condition

i <= 5

Determines when the loop should continue executing.

3. Increment or Decrement

i++;

i--;

Changes the loop variable after each iteration.

Short Summary

Loops help avoid writing repetitive code.
A while loop executes repeatedly as long as its condition is true.
Every loop requires:
- Initial value
- Condition
- Increment or decrement
Forgetting to update the loop variable results in an infinite loop.
Loops can be used to print numbers, calculate sums, and generate patterns efficiently.

References
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while?utm_source=chatgpt.com
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration?utm_source=chatgpt.com
https://www.w3schools.com/js/js_loop_while.asp?utm_source=chatgpt.com
https://javascript.info/while-for?utm_source=chatgpt.com

Learning about Truthy and Falsy Values in JavaScript

Annapoorani Kadhiravan — Mon, 08 Jun 2026 18:46:21 +0000

In JavaScript, truthy and falsy values are concepts related to boolean evaluation. Every value in JavaScript has an inherent boolean "truthiness" or "falsiness," which means they can be implicitly evaluated to true or false in boolean contexts, such as in conditional statements or logical operations.

What Are Truthy Values?

Truthy values are values that are evaluated to be true when used in a Boolean context. Simply put, any value that is not explicitly falsy is considered truthy.

These are some truthy values

Non-zero numbers: 42, -1, 3.14
Non-empty strings: "hello", "0", " "
Objects and arrays: {}, []
Functions: function() {}
Dates: new Date()
Symbols: Symbol()
BigInt values other than 0n: 10n

if (42) console.log("This is truthy!");
if ("hello") console.log("Non-empty strings are truthy!");
if ({}) console.log("Objects are truthy!");

Output
This is truthy!
Non-empty strings are truthy!
Objects are truthy!

What Are Falsy Values?

Falsy values are values that evaluate to false when used in a Boolean. JavaScript has a fixed list of falsy values

false
0 (and -0)
0n (BigInt zero)
"" (empty string)
null
undefined
NaN
document.all (used for backward compatibility)

if (0) console.log("This won't run because 0 is falsy.");
if ("") console.log("This won't run because an empty string is falsy.");
if (null) console.log("This won't run because null is falsy.");

Truthy vs. Falsy Evaluation in JavaScript

Whenever JavaScript evaluates an expression in a Boolean (e.g., in an if statement, a logical operator, or a loop condition), it implicitly converts the value into true or false based on whether it is truthy or falsy.

With if Statement

let s = "JavaScript";

if (s) {
    console.log("Truthy!");
} else {
    console.log("Falsy!");
}

Output
Truthy!

Logical Operators with Truthy and Falsy
Logical operators like && (AND) and || (OR) work with truthy and falsy values

&& (AND): Returns the first falsy operand or the last operand if all are truthy.
|| (OR): Returns the first truthy operand or the last operand if all are falsy.

console.log(true && "JavaScript");
console.log(false || "Hello!");  
console.log(0 || null);

Output
JavaScript
Hello!
null

Explicit Boolean Conversion
You can explicitly check whether a value is truthy or falsy using the Boolean() function or the double negation operator (!!).

console.log(Boolean(42));       
console.log(Boolean(0));       
console.log(Boolean("hello"));
console.log(Boolean(""));      

// Using !!
console.log(!!"world");        
console.log(!!undefined);

Output
true
false
true
false
true
false

Common Pitfalls and Misunderstandings

Empty Strings vs. Non-Empty Strings

"" (empty string) is falsy.
" " (string with a space) is truthy.

if ("") console.log("Falsy"); // Won't run
if (" ") console.log("Truthy"); // Will run

Output
Truthy

Zero (0) vs. Non-Zero Numbers
0 is falsy, but -1, 3.14, and other numbers are truthy.

if (0) console.log("Falsy"); // Won't run
if (-1) console.log("Truthy"); // Will run

Output
Truthy

Empty Objects and Arrays Are Truthy

Unlike Python, where empty containers are falsy, empty objects {} and arrays [] are truthy in JavaScript.

if ([]) console.log("Empty arrays are truthy!");
if ({}) console.log("Empty objects are truthy!");

Output
Empty arrays are truthy!
Empty objects are truthy!

Default Values Using Logical OR (||)

The || operator is commonly used to assign default values when a variable is falsy.

let username = "";
let displayName = username || "Guest";
console.log(displayName);

Output
Guest

Conditional Property Access

Truthy and falsy checks can be used to avoid errors when accessing object properties:

let user = null;
if (user && user.name) {
    console.log(user.name); // Safely checks if user and user.name exist
}

Avoiding Explicit Comparisons

Truthy and falsy values allow concise conditions without explicit equality checks:

if (!value) {
    console.log("Value is falsy.");
}

References

https://www.geeksforgeeks.org/javascript/explain-the-concept-of-truthy-falsy-values-in-javascript/

Conditional Statements in JavaScript

Annapoorani Kadhiravan — Mon, 08 Jun 2026 18:36:39 +0000

JAVASCRIPT CONDITIONAL STATEMENTS

JavaScript conditional statements are used to make decisions in a program based on given conditions. They control the flow of execution by running different code blocks depending on whether a condition is true or false.

Conditions are evaluated using comparison and logical operators.
They help in building dynamic and interactive applications by responding to different inputs.

Types of Conditional Statements

1. if Statement

The if statement checks a condition written inside parentheses. If the condition evaluates to true, the code inside {} is executed; otherwise, it is skipped.

Executes code only when a specified condition is true.
Useful for making simple decisions in a program.

Syntax:

if (condition) {
  // code runs if condition is true
}

let x = 20;

if (x % 2 === 0) {
    console.log("Even");
}

if (x % 2 !== 0) {
    console.log("Odd");
};

Output
Even

2. if-else Statement

The if-else statement executes one block of code if a condition is true and another block if it is false. It ensures that exactly one of the two code blocks runs.

Used when there are two possible outcomes.
The else block runs when the if condition is not satisfied.

let age = 25;

if (age >= 18) {
    console.log("Adult")
} else {
    console.log("Not an Adult")
};

Output
Adult

3. else if Statement

The else if statement is used to test multiple conditions in sequence. It executes the first block whose condition evaluates to true.

Allows checking more than two conditions.
Evaluated from top to bottom until a true condition is found.

const x = 0;

if (x > 0) {
    console.log("Positive.");
} else if (x < 0) {
    console.log("Negative.");
} else {
    console.log("Zero.");
};

Output
Zero.

4. Using Switch Statement (JavaScript Switch Case)

The switch statement evaluates an expression and executes the matching case block based on its value. It provides a clean and readable way to handle multiple conditions for a single variable.

Used when one variable needs to be compared against multiple fixed values.
Improves readability compared to long if...else if chains.

const marks = 85;

let Branch;

switch (true) {
    case marks >= 90:
        Branch = "Computer science engineering";
        break;
    case marks >= 80:
        Branch = "Mechanical engineering";
        break;
    case marks >= 70:
        Branch = "Chemical engineering";
        break;
    case marks >= 60:
        Branch = "Electronics and communication";
        break;
    case marks >= 50:
        Branch = "Civil engineering";
        break;
    default:
        Branch = "Bio technology";
        break;
}

console.log(`Student Branch name is : ${Branch}`);

Output
Student Branch name is : Mechanical engineering

5. Using Ternary Operator ( ?: )

The ternary operator is a compact shorthand for an if...else statement. It is called “ternary” because it takes three operands:

A condition to test.
An expression to evaluate if the condition is true.
An expression to evaluate if the condition is false.

Syntax

condition ? expressionIfTrue : expressionIfFalse

let age = 21;

const result =
    (age >= 18) ? "You are eligible to vote."
        : "You are not eligible to vote.";

console.log(result);

Output
You are eligible to vote.

6. Nested if...else

A nested if...else statement is an if...else block written inside another if or else. It is used to evaluate multiple related conditions in a hierarchical manner.

Useful for handling complex decision-making logic.
Deep nesting should be avoided to maintain code readability.

let weather = "sunny";
let temp = 25;

if (weather === "sunny") {
    if (temp > 30) {
        console.log("It's a hot day!");
    } else if (temp > 20) {
        console.log("It's a warm day.");
    } else {
        console.log("It's a bit cool today.");
    }
} else if (weather === "rainy") {
    console.log("Don't forget your umbrella!");
} else {
    console.log("Check the weather forecast!");
};

Output
It's a warm day.

Summary

Reasons to Use Conditional Statements

Control Program Flow: Decide which code to execute based on different situations.
Make Decisions: React differently to user input, data values, or system states.
Enhance Interactivity: Enable dynamic behavior in apps and websites.
Handle Multiple Scenarios: Manage different outcomes or error handling paths.
Improve Code Flexibility: Write adaptable, reusable code that can respond to change.

References

https://www.geeksforgeeks.org/javascript/conditional-statements-in-javascript/

Mock Interview Experience - Part 2

Annapoorani Kadhiravan — Mon, 08 Jun 2026 18:00:19 +0000

Here is my second mock interview experience, where I got an idea of how to learn each concepts and how to understand in different perspective. It was so helpful for me to learn more and grow more. Questions I was being asked in my mock interview are as follows :

1. Self Intro

2. What is Salesforce?

Salesforce is a cloud-based Customer Relationship Management (CRM) platform used by businesses to manage customers, sales, marketing, support, and business processes.

Key Features

Customer data management
Sales tracking
Marketing automation
Customer support management
Reports and dashboards
Cloud-based (accessible from anywhere)

Example

A company can use Salesforce to:

Store customer details
Track sales opportunities
Send marketing emails
Handle customer complaints

Benefits

No need to install software locally
Centralized customer information
Automation of business processes
Better customer engagement

3. What is JavaScript (JS)?

JavaScript is a programming language used to make web pages interactive and dynamic.

Uses

Form validation
Image sliders
Dropdown menus
Animations
Fetching data from servers
Building web and mobile applications

Example

alert("Welcome!");

When the page loads, a popup message appears.

Why JS?

HTML creates structure, CSS adds design, and JavaScript adds behavior.

4. Alternate for JavaScript?

Several languages can be used instead of JavaScript in certain scenarios.

Language	Purpose
TypeScript	Superset of JS with type checking
Dart	Used with Flutter
CoffeeScript	Compiles into JS
Elm	Functional front-end language
WebAssembly (WASM)	High-performance browser applications

Most Popular Alternative

TypeScript

Example:

let age: number = 25;

It helps catch errors during development.

5. What is a Dynamic Language?

A dynamic language is a language where variable types are determined during execution (runtime), not before execution.

JavaScript Example

let data = 10;      // Number
data = "Hello";     // String
data = true;        // Boolean

The same variable can hold different types of data.

Advantages

Flexible
Faster development
Less code

Disadvantages

Type-related bugs may appear at runtime
Harder to maintain large applications

JavaScript is a dynamically typed language.

6. Types of Variables in JavaScript

JavaScript provides three ways to declare variables.

1. var

var name = "John";

Characteristics

Function scoped
Can be redeclared
Can be updated

var x = 10;
var x = 20;

2. let

let age = 25;

Characteristics

Block scoped
Cannot be redeclared
Can be updated

let age = 25;
age = 30;

3. const

const PI = 3.14;

Characteristics

Block scoped
Cannot be redeclared
Cannot be reassigned

const PI = 3.14;
// PI = 3.15 ❌ Error

Quick Comparison

Feature	var	let	const
Scope	Function	Block	Block
Redeclare	Yes	No	No
Update	Yes	Yes	No

7. Difference Between Programming and Coding

Coding	Programming
Writing instructions in a language	Complete software development process
Converts logic into code	Includes planning, design, coding, testing
Smaller activity	Broader activity
Focus on syntax	Focus on problem solving

Coding Example

console.log("Hello");

Programming Example

Building a Student Management System:

Analyze requirements
Design database
Write code
Test application
Deploy system

Programming includes coding, but coding alone is not programming.

8. HTML vs HTML5

HTML	HTML5
Older version	Latest version
Limited multimedia support	Built-in audio and video support
Uses plugins for media	No plugins needed
Fewer semantic tags	More semantic tags
No local storage	Supports local storage

HTML Example

<div>Header</div>

HTML5 Semantic Tags

<header>Header</header>
<nav>Navigation</nav>
<section>Content</section>
<footer>Footer</footer>

New HTML5 Features

<audio>
<video>
<canvas>
Local Storage
Geolocation
Semantic tags

9. What is Ternary Operator?

A ternary operator is a shortcut for a simple if...else statement.

Syntax

condition ? value1 : value2;

Example

Using if-else:

let age = 20;

if(age >= 18){
    status = "Adult";
}else{
    status = "Minor";
}

Using ternary:

let status = age >= 18 ? "Adult" : "Minor";

When to Use

✅ Simple conditions

let result = marks >= 35 ? "Pass" : "Fail";

When Not to Use

❌ Multiple complex conditions

Use if...else if...else instead.

10. What is `default` in Switch Case?

The default case executes when none of the cases match.

Example

let day = 8;

switch(day){
    case 1:
        console.log("Monday");
        break;

    case 2:
        console.log("Tuesday");
        break;

    default:
        console.log("Invalid Day");
}

Output

Invalid Day

Can `default` Be Used Between Cases?

✅ Yes, JavaScript allows default anywhere inside a switch.

Example:

switch(day){
    case 1:
        console.log("Monday");
        break;

    default:
        console.log("Invalid Day");
        break;

    case 2:
        console.log("Tuesday");
        break;
}

Best Practice

Place default at the end because:

Easier to read
Common industry standard
Improves code maintainability

11. What is used to find the type of data used in a program?

typeOf();

Example :

typeOf(123);

Output:
Number

Summary

Salesforce: Cloud-based CRM platform used to manage customers, sales, and support.

JavaScript: Programming language used to add interactivity and dynamic behavior to web pages.

Dynamic Language: A language where variable types are determined at runtime.

Variables in JS: var, let, const.

Programming vs Coding: Coding is writing code; programming includes design, coding, testing, and deployment.

HTML vs HTML5: HTML5 is the latest version with semantic tags, audio, video, canvas, and local storage.

Ternary Operator: Short form of if...else using condition ? value1 : value2.

Default in Switch: Executes when no case matches; can be placed anywhere but is usually kept at the end.

How does Increment and decrement work in JS?

Annapoorani Kadhiravan — Wed, 03 Jun 2026 17:28:27 +0000

JavaScript Operators

Introduction

Operators are special symbols in JavaScript that perform operations on values and variables.

For example:

let a = 10;
let b = 5;

console.log(a + b);

Output:

Here, + is an operator used to add two values.

JavaScript provides several types of operators that help us perform arithmetic calculations, comparisons, logical operations, assignments, and much more.

1. Arithmetic Operators

Arithmetic operators are used to perform mathematical calculations.

Operator	Description	Example
+	Addition	10 + 5
-	Subtraction	10 - 5
*	Multiplication	10 * 5
/	Division	10 / 5
%	Modulus (Remainder)	10 % 3
**	Exponentiation	2 ** 3

Example

let a = 10;
let b = 5;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
console.log(a ** b);

Output:

Special Behavior of +

The + operator performs both addition and string concatenation.

console.log("Bahubali" + 2);

Output:

Bahubali2

Type Coercion in Arithmetic Operations

console.log("15" - 5);

Output:

JavaScript automatically converts "15" into the number 15.

"15" → 15
15 - 5 = 10

2. Assignment Operators

Used to assign values to variables.

Operator	Example	Equivalent
=	a = 10	Assign value
+=	a += 5	a = a + 5
-=	a -= 5	a = a - 5
*=	a *= 5	a = a * 5
/=	a /= 5	a = a / 5

Example

let a = 10;

a += 5;

console.log(a);

Output:

3. Comparison Operators

Comparison operators compare two values and return either true or false.

Operator	Description
==	Equal to
===	Strict equal to
!=	Not equal
!==	Strict not equal
>	Greater than
<	Less than
>=	Greater than or equal
<=	Less than or equal

Double Equals (==)

Checks only values.

console.log(5 == "5");

Output:

true

Reason:

"5" → 5
5 == 5

Triple Equals (===)

Checks both value and datatype.

console.log(5 === "5");

Output:

false

Reason:

Number !== String

4. Logical Operators

Logical operators are commonly used in conditions.

Operator	Meaning
&&	AND

!	NOT

AND (&&)

Returns true only if all conditions are true.

let age = 25;

console.log(age > 18 && age < 60);

Output:

true

OR (||)

Returns true if at least one condition is true.

console.log(false || true);

Output:

true

NOT (!)

Reverses the boolean value.

console.log(!true);

Output:

false

5. Increment and Decrement Operators

Increment (++)

Adds 1.

let a = 5;
a++;

console.log(a);

Output:

Decrement (--)

Subtracts 1.

let a = 5;
a--;

console.log(a);

Output:

Pre-Increment vs Post-Increment

Post Increment

let a = 5;

console.log(a++);
console.log(a);

Output:

5
6

Pre Increment

let a = 5;

console.log(++a);

Output:

Interview Tricky Questions

Question 1

console.log("5" + 5);

Output:

Reason: String concatenation.

Question 2

console.log("5" - 5);

Output:

Reason: String converted to number.

Question 3

console.log(true + true);

Output:

Because:

true = 1
1 + 1 = 2

Question 4

console.log(false + 10);

Output:

Because:

false = 0
0 + 10 = 10

Question 5

console.log(10 + "5");

Output:

Question 6

console.log(10 - "5");

Output:

Question 7

console.log([] + []);

Output:

""

Empty string.

Question 8

console.log([] + {});

Output:

"[object Object]"

Question 9

console.log(null == undefined);

Output:

true

Question 10

console.log(null === undefined);

Output:

false

Because strict equality checks datatype as well.

Frequently Asked Interview Question

Difference Between == and ===

==	===
Checks value only	Checks value and datatype
Performs type conversion	No type conversion
Less strict	More strict
`5 == "5"` → true	`5 === "5"` → false

Interview Answer

== compares only values after type conversion, whereas === compares both values and datatypes without performing type conversion. Therefore, === is generally preferred in JavaScript applications.

References :
https://www.geeksforgeeks.org/javascript/javascript-operators/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators#arithmetic_operators

From Hello World to Type Casting: Learning JavaScript Step by Step

Annapoorani Kadhiravan — Tue, 02 Jun 2026 16:59:12 +0000

Client and Server Side in JavaScript

There are 3 major types of JavaScript namely:

Client-Side JavaScript (CSJS) -- an extended version of JavaScript that enables the enhancement and manipulation of web pages and client browsers

Server-Side JavaScript (SSJS) -- an extended version of JavaScript that enables back-end access to databases, file systems, and servers

Core JavaScript -- the base JavaScript language

Client-Side JavaScript (CSJS) and Server-Side JavaScript (SSJS) are dependent on the core JavaScript and cannot work without it.

In Simple term, from Client side requests is sent to the servers for webpages or applications, and the servers serve up responses.

Client-side JavaScript is the version of the language that runs in the user's browser. It’s responsible for making web pages dynamic and interactive without requiring page reloads or server requests.

Server-side JavaScript runs on a web server instead of in the browser. This became possible with the rise of Node.js, a powerful JavaScript runtime built on Chrome’s V8 engine, introduced in 2009.

When to Use What?

Use client-side JavaScript when:

You need quick, responsive UI interactions
You want to reduce unnecessary server calls

Use server-side JavaScript when:

You need to store or retrieve data from a database
You’re building backend logic or APIs
You’re performing operations that require security and control

Tip: For modern web applications, the best approach is often to use both, known as full-stack JavaScript development.

Primitive and non primitive data type

1. Primitive Data Types
Primitive data types are the built-in data types provided by JavaScript. They represent single values and are immutable, meaning their values cannot be changed directly after creation.

1.1 Number:
Number data type in JavaScript can be used to hold decimal values as well as values without decimals.

Example: Below is an example.

let x = 250;
    let y = 40.5;
    console.log("Value of x=" + x);
    console.log("Value of y=" + y);

Output Value of x=250 Value of y=40.5

1.2 String:

The string data type in JavaScript represents a sequence of characters that are surrounded by single or double quotes.

Example: Below is an example.

let str = 'Hello All';
let str1 = "Welcome to my new house";
console.log("Value of str=" + str);
console.log("Value of str1=" + str1);

Output Value of str=Hello All Value of str1=Welcome to my new house

1.3 Undefined:
This means that a variable has been declared but has not been assigned a value, or it has been explicitly set to the value undefined.

Example: Below is an example.

let x;
console.log(x); // Outputs: undefined
Output:

1.4 Boolean:

The Boolean data type can accept only two values i.e. true or false.

Example: Below is an example.

let isActive = true;
let isComplete = false;

console.log(isActive);
console.log(isComplete);

Output: true false

1.5 Null:

This data type can hold only one possible value that is null.

Example: Below is an example.

let x = null;
    console.log("Value of x=" + x);

Output Value of x=null

1.6 BigInt:

BigInt data type can represent numbers greater than 253-1 which helps to perform operations on large numbers. The number is specified by writing 'n' at the end of the value

Example: Below is an example.

let bigNum = 123422222222222222222222222222222222222n
console.log(bigNum)

Output 123422222222222222222222222222222222222n

1.7 Symbol:
Symbol data type is used to create unique identifiers. Each Symbol value is unique, even if created with the same description.

Example: Below is an example.

let sym = Symbol("Hello")
console.log(typeof(sym));
console.log(sym);

Output symbol Symbol(Hello)

2.Non-primitive Data Types [TBD]
Non-primitive data types, also known as reference types, are objects and derived data types. They can store collections of values or more complex entities. The two key non-primitive data types in JavaScript are:

Below is a list of Non-primitive data types.

2.1 Object:
An object in JavaScript is an entity having properties and methods. Everything is an object in javaScript.

2.2 Array:
With the help of an array, we can store more than one element under a single name.

library and framework

JavaScript Libraries
A JavaScript library is a collection of classes, methods, and pre-written functions that developers can use in their web development projects. Libraries make code reusable and simplify the development process. They are also favored for their cross-browser compatibility, saving developers time and effort.

JavaScript Frameworks
JavaScript frameworks are essential tools for creating web applications. They provide built-in components that help in developing robust and interactive web applications. Frameworks simplify the structure of projects by offering blueprints and streamline the development process with powerful and efficient methods for handling events, two-way data binding, and more.

Feature	Library	Framework
Definition	A collection of reusable functions and code that helps perform specific tasks.	A complete structure that provides rules and architecture for building applications.
Control Flow	You control the flow of the application and call the library when needed.	The framework controls the flow and calls your code when needed.
Inversion of Control	No inversion of control. Developer is in charge.	Uses inversion of control. Framework is in charge.
Flexibility	More flexible. You decide how and where to use it.	Less flexible. You must follow its conventions and structure.
Project Structure	No fixed structure.	Provides a predefined structure.
Purpose	Solves specific problems or adds functionality.	Provides a complete solution for application development.
Learning Curve	Usually easier to learn.	Usually steeper because of rules and architecture.
Code Reusability	Reusable functions/modules.	Reusable components within a defined framework structure.
Examples	jQuery, Lodash, Moment.js, Axios	Angular, Next.js, Ember.js, NestJS
Usage	Use only the parts you need.	Build the application according to the framework's guidelines.

Javascript compliers

A compiler is a program that translates code written in one programming language into another language or a lower-level representation. In the context of JavaScript, a compiler translates human-readable JavaScript code into machine code or bytecode that can be executed by the computer’s CPU.
Unlike traditional compiled languages like C++ or Java, JavaScript is typically executed by an interpreter in the browser. However, modern JavaScript engines (like V8, SpiderMonkey, and JavaScriptCore) use a combination of interpretation and compilation to optimize performance. This approach is known as Just-In-Time (JIT) compilation.

How JavaScript Engines Use Compilers

Modern JavaScript engines use a multi-tiered approach to execute JavaScript code efficiently. Here’s a breakdown of the process:

1. Parsing
The first step is parsing, where the JavaScript engine reads the source code and converts it into an Abstract Syntax Tree (AST). The AST is a tree-like representation of the code’s structure, which makes it easier for the engine to analyze and optimize.
2. Bytecode Generation
After parsing, the engine generates bytecode, a low-level, platform-independent representation of the code. Bytecode is easier to…
3. Just-In-Time (JIT) Compilation
The bytecode is then passed to the JIT compiler, which translates it into machine code (native code that the CPU can execute directly). JIT compilation happens “just in time” during the execution of the program, allowing the engine to optimize the code based on runtime information.

Why Javascript is cross platform?

JavaScript is cross-platform because it is an interpreted, standardized scripting language executed by software-based runtime environments (engines) rather than being compiled directly into machine code for a specific operating system. Because these host engines exist for almost every major operating system, JavaScript code can run anywhere an engine is installed.

How Javascript converts high level to intermediate?

JavaScript engines (like Google's V8 or SpiderMonkey) convert human-readable code into intermediate language through a multi-stage process. Instead of directly interpreting it, the engine parses the code into an Abstract Syntax Tree (AST)[TBD], which is then translated into low-level Bytecode before Just-In-Time (JIT) compilation to machine code.

JavaScript Basics: Internal JavaScript, Variables, Data Types, and Operators

Introduction

JavaScript is one of the most popular programming languages used to make websites interactive. In this blog, we will learn about Internal JavaScript, variables, data types, type conversion, and operators with simple examples.

Internal JavaScript

Internal JavaScript means writing JavaScript code directly inside an HTML file using the <script> tag.

The <script> tag can be placed inside the <head> section or at the end of the <body> section.

Most developers prefer placing the script at the end of the body after all HTML elements are loaded.

Example

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>

    <h1>Welcome to JavaScript</h1>

    <script>
        console.log("Hello World");
    </script>

</body>
</html>

Viewing JavaScript Output

The most common way to check JavaScript output during development is using:

console.log("Hello World");

Steps to View Output

Open the webpage.
Right-click and select Inspect.
Go to the Console tab.
View the output.

Output:

Hello World

The console is mainly used by developers for debugging and testing code.

JavaScript Errors

If we try to use a variable without declaring it, JavaScript throws an error.

Example

console.log(k);

Output:

ReferenceError: k is not defined

This error occurs because the variable k was never declared.

Variables in JavaScript

JavaScript provides three ways to declare variables:

var
let
const

let Keyword

Variables declared with let can be reassigned but cannot be redeclared within the same scope.

Example

let i = 10;
i = 15;

console.log(i);

Output:

Memory Concept

Initially:

let i = 10;

Variable i points to value 10.

After:

i = 15;

JavaScript creates a new value 15 and i now points to 15.

const Keyword

Variables declared with const cannot be reassigned.

Example

const i = 10;

i = 15;

console.log(i);

Output:

TypeError: Assignment to constant variable.

Since an error occurs, the program stops at that line.

JavaScript as an Interpreter

JavaScript is an interpreted language.

It executes code line by line.

Example

console.log("Hello World");

const i = 10;
i = 15;

console.log("JavaScript");

Output:

Hello World
TypeError: Assignment to constant variable.

Notice that:

First line executes successfully.
Error occurs on the second operation.
Execution stops.
Last line is never executed.

This behavior is different from many compiled languages where the entire program is checked before execution.

Operators in JavaScript

Operators are symbols used to perform operations on values.

Arithmetic Operators

Addition Operator (+)

console.log(5 + 5);

Output:

String Concatenation

console.log("Bahubali" + 2);

Output:

Bahubali2

The + operator joins strings together.

Subtraction Operator (-)

JavaScript automatically converts numeric strings into numbers during subtraction.

Example

console.log("15" - 5);

Step-by-step:

"15" → 15
15 - 5

Output:

This process is called Implicit Type Conversion or Type Coercion.

Manual Type Casting

Sometimes we need to manually convert data from one type to another.

Example

let i = 10;
let j = "5";

console.log(i + Number(j));

Output:

Here, Number(j) converts the string "5" into the number 5.

Boolean Conversion Example

JavaScript converts Boolean values during arithmetic operations.

Example

let i = 10;
let j = true;

console.log(i + j);

Output:

Reason:

true = 1
false = 0

So:

10 + 1 = 11

Another example:

let i = 10;
let j = false;

console.log(i + j);

Output:

Because:

10 + 0 = 10

Type Casting and Type Conversion in JavaScript

Introduction

In JavaScript, data can be converted from one data type to another. This process is known as Type Conversion or Type Casting.

For example:

let num = "10";

Here, "10" is a string. If we want to perform arithmetic operations, we may need to convert it into a number.

What is Type Conversion?

Type Conversion is the process of converting a value from one data type to another.

JavaScript supports two types of conversion:

Implicit Type Conversion (Automatic)
Explicit Type Conversion (Manual Type Casting)

1. Implicit Type Conversion (Automatic)

JavaScript automatically converts one data type into another when required during an operation.

Example 1

console.log("15" - 5);

Output:

How it works

"15" → 15
15 - 5 = 10

JavaScript automatically converts the string "15" into the number 15.

Example 2

console.log("10" * 2);

Output:

JavaScript converts "10" into 10 and performs multiplication.

Example 3

console.log(10 + true);

Output:

Because:

true = 1

So:

10 + 1 = 11

2. Explicit Type Conversion (Manual Type Casting)

When the developer manually converts a value from one type to another, it is called Explicit Type Conversion or Type Casting.

String to Number

Using Number()

let str = "25";

let num = Number(str);

console.log(num);
console.log(typeof num);

Output:

25
number

Using parseInt()

let str = "100";

let num = parseInt(str);

console.log(num);

Output:

Using parseFloat()

let str = "10.5";

let num = parseFloat(str);

console.log(num);

Output:

10.5

Number to String

Using String()

let num = 100;

let str = String(num);

console.log(str);
console.log(typeof str);

Output:

100
string

Boolean to Number

console.log(Number(true));
console.log(Number(false));

Output:

1
0

Number to Boolean

console.log(Boolean(1));
console.log(Boolean(0));

Output:

true
false

Difference Between Type Conversion and Type Casting

Type Conversion	Type Casting
Automatic conversion by JavaScript	Manual conversion by developer
Also called Implicit Conversion	Also called Explicit Conversion
Happens during operations	Happens using functions like Number(), String(), Boolean()
Less control	Full control
Example: `"15" - 5`	Example: `Number("15")`

References:
https://dev.to/wisdomudo/what-is-javascript-client-side-vs-server-side-5bf8
https://stackoverflow.com/a/1404400/32765761
https://www.geeksforgeeks.org/javascript/primitive-and-non-primitive-data-types-in-javascript/
https://www.geeksforgeeks.org/javascript/javascript-libraries-and-frameworks/
https://medium.com/@programmingAi/what-is-a-javascript-compiler-8dcf4ebdc503
https://medium.com/@favourcharles705/javascript-introduction-5b11d9794220
https://stackoverflow.com/questions/39967892/is-javascript-compiled-to-machine-code-when-executed-in-a-web-browser-environmen

Learning about JavaScript/ECMA Script

Annapoorani Kadhiravan — Mon, 01 Jun 2026 17:49:12 +0000

What is JavaScript and current version?

JavaScript (JS) is one of the most widely used programming languages in web development. It is used to create interactive and dynamic web pages.

Examples:

Button click actions
Form validation
Animations
Web applications
Real-time updates

Today, JavaScript is used not only for websites but also for backend development and mobile applications.

JavaScript is a versatile, dynamically typed programming language that brings life to web pages by making them interactive. It is used for building interactive web applications and supports both client-side and server-side development.

Interpreted language: Code is executed line by line.
Dynamically typed: Variable types are determined at runtime.

JavaScript versions are called ECMAScript versions (ES1, ES5, ES6, ES2020, etc.)

HISTORY OF JAVASCRIPT

How JavaScript Started

In May 1995, JavaScript was created by Brendan Eich at Netscape.

Interesting fact: JavaScript was developed in just 10 days.

JavaScript went through multiple names:

Mocha
↓
LiveScript
↓
JavaScript

What makes JavaScript unique

JavaScript is a unique and essential programming language with several key features and capabilities that make it distinguished from the other languages. The following are the reasons why JavaScript is unique.

Client-side dominance
Full-stack development
Asynchronous programming
Event-driven programming
Interpretation
Just-in-time compilation
Frameworks and Libraries
Active Community

ADVANTAGES AND DISADVANTAGES OF JS

The advantages of using JavaScript on your website are that it:

Works with all major browsers and devices
Enables interactive features like menus, sliders, tabs, and forms
Is versatile enough for everything from simple animations to fully dynamic experiences
Easily connects with other marketing tools and platforms (like analytics, chat, or email widgets)

The downsides of using JavaScript on your website are that it:

Can sometimes hide important content (like page titles, descriptions, or links) from search engines if those elements depend on JavaScript to load. This can hurt how your site shows up in search results.
Slows down page speed, especially if scripts are large or poorly optimized
May behave differently across some browsers, particularly older ones
Can create security risks if you use untrusted scripts or plugins—JavaScript runs automatically in the browser

JavaScript Ecosystem

Many technologies are built using JavaScript.

Examples:

React JS → Frontend UI library
Angular → Frontend framework
Node.js → Backend runtime environment

These technologies extend JavaScript for different application development purposes.

How Computers Understand Code

Computers understand only binary language:

0 and 1

Programming languages must be translated into machine language.

Two common translation approaches:

1. Interpreter

Converts code line by line.

Example:

JavaScript → Interpreter → Machine Language

Advantages:

Easier debugging
Executes immediately

2. Compiler

Converts the entire program at once.

Example:

Source Code → Compiler → Machine Code

Advantages:

Faster execution after compilation

Note:
Modern JavaScript engines (like V8) use both interpretation and compilation internally for performance.

Why JS is an Interpreter Language?

JavaScript is primarily considered an interpreted language because it is sent to the browser as raw text and translated into machine code "line-by-line" at runtime, making it highly flexible. However, modern engines use a hybrid approach to improve performance.

What is Programming?

Programming means:

Giving instructions to a computer to perform specific tasks.

Example:

Open browser
Display website
Store user data
Calculate result

Applications help businesses manage and process huge amounts of data efficiently.

JavaScript Data Types

Data types define what type of value is stored.

1. Number

Stores normal numeric values.

Example:

let age = 25;

2. BigInt

Stores extremely large numbers.

Example:

let population = 12345678901234567890n;

Unlike Number, BigInt supports values larger than the safe integer range.

3. Boolean

Stores true or false.

Example:

let isLoggedIn = true;

4. String

Stores text values.

Example:

let name = "Annu";

Understanding Bytes and Bits

1 Byte = 8 Bits

Binary uses only:

0 and 1

Example:

2^8 = 256 possible combinations

Signed values can represent:

-128 to 127

JavaScript Number uses 64-bit floating point representation.

Types of Programming Languages

1. Statically Typed Language

Data type must be declared.

Example (Java):

int age = 10;

Rules:

Data type mandatory
Syntax strict

2. Dynamically Typed Language

Data type is automatically determined.

Example (JavaScript):

let age = 10;

JavaScript decides the type internally.

Variables in JavaScript

Variable:
A named storage location whose value may change.

Example:

let name = "Annu";

Structure:

Variable = Value

Example:

name = "Annu"

name → Variable
= → Assignment Operator
"Annu" → Data

Semicolon (;) is optional in JavaScript but considered a good practice.

Ways to Declare Variables

1. Without Keyword (Not Recommended)

name = "Annu";

Problem:

Can create accidental global variables.

2. Using var

var name = "Annu";

Problem:

var name = "Apple";
var name = "Orange";

Redeclaration is allowed.

Not preferred in modern JavaScript.

3. Using let (ES6)

let age = 16;

Features:

Cannot redeclare in same scope
Value can change

Example:

let age = 15;
age = 20;

Valid.

4. Using const

const price = 99;

Features:

Cannot redeclare
Cannot reassign

Example:

const price = 99;

JavaScript Versions

JavaScript evolves through ECMAScript versions.

Examples:

ES5
ES6
ES7
ES8
ES9

What is ECMA?

ECMA 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.
ECMAScript is the standard specification that defines how JavaScript should work.

ES means:

ECMAScript

It is the official standard specification for JavaScript.

Example:

ES6 (2015) introduced:

let
const
Arrow functions
Classes
Modules

JavaScript follows ECMAScript standards.

References :

https://www.w3schools.com/whatis/whatis_js.asp
https://www.semrush.com/blog/javascript/
https://www.geeksforgeeks.org/javascript/introduction-to-javascript/
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript
https://mvjce.edu.in/blog/evolution-of-javascript/

Sharing my Mock Interview Experience - Part 1

Annapoorani Kadhiravan — Tue, 26 May 2026 12:15:16 +0000

Though I have attended many interviews, but always my heart, beats faster whenever I hear the term "Interview" , I will go complete blank with so much anxiety 😅 I hope many people can feel it. After a long gap, I am preparing myself to compete in the race of developer and had a mock interview experience, starting with self-intro. I realized that, if we learn any topics, should be strong with all "Wh" questions.

Let me share the list of questions asked to me along with answers :

1. Difference Between Div and Span Tag

Div Tag	Span Tag
Block-level element	Inline element
Takes full width	Takes only required width
Starts in new line	Stays in same line
Used for large sections	Used for small text styling

Div Example :

<div>
   <h1>Welcome</h1>
</div>

Span Example

<p>Hello <span style="color:red">World</span></p>

2. What is HTML?

HTML stands for HyperText Markup Language.
It is the standard language used to create webpages and structure content on the internet.

HTML is used to:

Create headings
Add paragraphs
Insert images
Create links
Build forms and tables
Design webpage structure

Example

<h1>Hello World</h1>
<p>This is HTML</p>

3.Latest HTML Version

The latest version is: HTML5

Features of HTML5:

Audio and video support
Semantic tags (header, footer, section)
Local storage
Better forms
Canvas and SVG graphics
Mobile-friendly support

4. HTML Attributes

Attributes provide extra information about HTML elements.

They are written inside the opening tag.

Syntax :
Example :

<img src="image.jpg" alt="Nature">

Here:
src → image path
alt → alternative text

Common HTML Attributes

Attribute	Purpose
id	Unique identification
class	Group elements
href	Link address
src	File/image path
alt	Alternative text
style	Inline CSS
title	Tooltip text

5. IMG Tag ALT Attribute

The alt attribute provides alternative text for an image.

Purpose

Displays text if image fails to load
Helps visually impaired users
Improves SEO

Example

<img src="flower.jpg" alt="Red flower">

If image is missing, "Red flower" text appears.

6. Benefits of Cloud Computing

Cloud Computing allows storing and accessing data through the internet instead of local computers.

Benefits
1. Cost Saving - No need to buy expensive hardware.

2. Scalability - Resources can increase or decrease easily.

3. Accessibility - Access data from anywhere.

4. Data Backup - Cloud providers maintain backups.

5. Security - Provides encryption and protection.

6. Faster Deployment - Applications can be launched quickly.

Examples

Google Drive
AWS
Microsoft Azure

7. Virtual Machine (VM)

A Virtual Machine is a software-based computer running inside another computer.

It behaves like a real computer with:

OS
CPU
Memory
Storage
Uses
Testing software
Running multiple operating systems
Server virtualization

Example

Running Linux inside Windows using VirtualBox.

8. What is Repository in Git?

A repository (repo) is a storage location where project files and version history are maintained.

Git repository contains:

Source code
Project files
Commit history
Branches
Documentation

9. What Stuff is Available Inside Repository?

Inside a Git repository:

Item	Purpose
Source code	Project program files
Commit history	Saved changes
Branches	Multiple development versions
README file	Project explanation
Configuration files	Project settings
Images/Documents	Supporting files

10.What is Version Control System?

A Version Control System (VCS) tracks changes made to files and source code over time.

Advantages

Stores history
Supports teamwork
Allows rollback
Prevents data loss

Types

Centralized VCS
Distributed VCS (Git)

1. Centralized Version Control System (CVCS)

In Centralized VCS, there is:

one central server
all files stored in one location
developers connect to that server

All Developers depend on one central server

Developer 1  ----\
Developer 2  ----- Central Server
Developer 3  ----/

2. Distributed VCS:

every developer has full repository copy
history stored locally
no dependency on single server

Developer 1 <----> Remote Repository
Developer 2 <----> Remote Repository
Developer 3 <----> Remote Repository

Each developer has:

full code
complete history
all branches

11. Git Add, Commit and Push Process

Step 1: git add

git add .

Adds files to staging area.

Step 2: git commit

git commit -m "Initial commit"

Saves snapshot of changes.

Step 3: git push

git push

Uploads code to remote repository like GitLab or GitHub.

12. What is Constructor in Java?

A constructor is a special method used to initialize objects.

Features

Same name as class
No return type
Automatically called when object is created

Example

class Student{
   Student(){
      System.out.println("Constructor called");
   }
}

Uses

Initialize variables
Allocate resources
Set default values

13. What is Method Overloading in Java?

Object-Oriented Programming concept where multiple methods have same name but different parameters.

Example

class Math{
   void add(int a,int b){}
   void add(int a,int b,int c){}
}

Advantages

Improves readability
Reusability
Flexibility

14. What is Inheritance in Java?

Inheritance allows one class to acquire properties and methods of another class.

Parent Class → Superclass
Child Class → Subclass

Example

class Animal{
   void eat(){
      System.out.println("Eating");
   }
}

class Dog extends Animal{
}

Dog inherits eat() method from Animal.

Benefits of Inheritance

Code reusability
Reduces duplication
Supports hierarchy
Easier maintenance

Robust Developer's Community - Stack Overflow & Forums Tamil Linux Community

Annapoorani Kadhiravan — Tue, 26 May 2026 11:36:25 +0000

Never had an idea of Stack Overflow apart from searching answers, but one session changed everything. Yes, Stack Overflow is not only for clarifying our doubts but to build a strong technical knowledge with high-end questions.

As a beginner, I always have silly doubts while learning, when I google it - top options shows up with stack overflow answers for maximum of technical doubts. It is a life saver for many developers. Here, we can post questions or answer questions but with few constraints.

When we hesitate to ask people in person for doubts, this stack overflow is helping millions of introverts, beginners and even experienced people in clearing their doubts and posting questions without any hesitation.

A strong-developer community, which is -
for the developers,
by the developers and
of the developers - as per developers democratic principle. 😄

When you want to stand unique in the rat race, you should do things differently from others. Dev Community can drive you to the destination but its all about how consistent we are.

In Stack Overflow, any kind of programming language questions are being answered.

Users can ask programming-related questions.
Other developers provide answers and solutions.
Best answers can be upvoted by the community.
Covers technologies like Java, Python, HTML, CSS, SQL, AWS, Linux, and more.
Helps developers debug errors and learn new concepts.

Few of the advantages of using Stack Overflow are :

Fast solutions from experienced developers.
Large programming community.
Useful for interview preparation and project development.
Free learning resource for beginners and professionals.

Our questions are not being answered blindly, instead an expert developer team, analyze our questions and check any previous questions matches with it then approve our questions to publish with solutions.

Few of the sample questions are :
Bad: C# Math Confusion
Good: Why does using float instead of int give me different results when all of my inputs are integers?
Bad: [php] session doubt
Good: How can I redirect users to different pages based on session data in PHP?
Bad: android if else problems
Good: Why does str == "value" evaluate to false when str is set to "value"?

STACK OVERFLOW

The best part is that, AI makes the search so easy and effortless, you can just login into the Stack overflow, AI assistance will be available for us to post the question to fetch all related answers/solutions.

Learning from world-wide developer community can be easily made possible by Stack Overflow. So be crazy to ask and develop solutions with the help of Robust Developer Communities.

FORUMS TAMIL LINUX COMMUNITY

In every Universe, learning any new topic in their mother tongue is an ultimate blessing. Similarly, here is the forum for Tamil speaking people, where it gives an opportunity to build our presentation skills, deep knowledge in topics, workshops on various technical topics and so on.

Any volunteer, can register for technical presentation on any topics. This helps many enthusiast to come out of stage fear and present themselves with utmost confidence.

You can register for the events, either by filling the form or by contacting the event organizer. You can also volunteer yourself to organize events and take responsibilities. This build soft skills like people management, leadership and so on.

Here, complex topics are being explained in the native language, so it is easy for beginners to have a strong foundation on it. Sharing about open source software's is also one of the interesting part, for us to understand and explore new applications in the market.

Linux community acts as platform, where people from different places come together to share their knowledge, support beginners and build a strong developer community in Tamil. When people fear to switch OS, here an entire community stands and showcase that Linux is the best choice for developers. To grow more, participate more is what the ultimate goal of every communities.

Exploring the vast developer communities are new to me but boosts my confidence and I feel that every dev communities are the perfect example of the phrase "Ask, you shall receive!". Both Stack Overflow and Linux community forums are valuable platforms for learning, troubleshooting, and improving technical knowledge. Stack Overflow mainly focuses on programming and software development problems, while Linux forums concentrate on Linux operating systems, open-source technologies, and so on.

References :

https://stackoverflow.com/
https://forums.tamillinuxcommunity.org/

Resume Building using HTML & CSS

Annapoorani Kadhiravan — Mon, 25 May 2026 19:54:51 +0000

How Awesome it would be, if we create our own resume using HTML and CSS to apply for jobs?
Yes, First and foremost step of any graduate is resume building, rather than downloading templates from online, you can impress your interviewer by showing up with your own resume build using HTML & CSS.
Well... how to do that? No worries - Let me teach you, how to build it!
Already we have a basic knowledge on HTML & CSS structure and few tags, using that let's build our resume 😎

RESUME

Let me take a sample resume and re-create it
Here is our sample resume :

Before re-creating, we need some base to build our resume, so inside of doing everything at a time, let's break the resume into different parts and start to code one by one to avoid ambiguity.

Here is the image of my break down, To start with construction of building we need to plan and divide plot for different rooms, similarly here container acts as land where you will build different separate rooms, I have divided into left and right with 1:3 ratio as per my requirement.

Now, let's start the building work, but we need so much of materials to make it strong and attractive. As a first step, let's do some purchase of materials to build our resume.

Listing down of materials need to be purchased
1. Divisions - Dividing the page and naming it uniquely to style later. Here overall container is divided into left and right with 1:3 ratio
2. Headings - To show the headers of my resume, I use headings to highlight it.
3. Paragraph - To describe about myself, I use paragraph tags
4. Measurements - To build the resume, I need height, width and coloring measurements to make it attractive.
5. Image - To show the owner of the resume.
6. Table - To display a group of content in rows and columns
7. Display and directions - Display should be flexible for us to make changes and direction should be clear to move forward.

We also use Semantic tags. I can understand that already its little heavy with more new terms, now additionally I have added Semantic 😅

SEMANTIC TAGS
Semantic Tag is nothing but elements that clearly describe their meaning and purpose to both the browser and the developer. To know more, click here

<header>: Defines a header for a document or a section, often containing logos or navigation.
<nav>: Reserved for navigation links.
<footer>: Defines the footer of a document or section, usually containing copyright info or contact details.

Coming back to our resume, I have created a segregation to process one by one, so let me start with the container.

/*Class Selector*/
        .container { 
            /* border: 1px solid red; */
            height: 100vh;
            /* View Port Height - vh*/
            width: 70vw;
            /*View Port Width*/
            margin: auto;
            display: grid;
            grid-template-columns: 1fr 2fr; /*To separate the container*/
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

        }

All the borders which I have commented is used to create divisions and added for my reference (will remove after styling).

To talk with someone, we have to call them first - right?
Its the same here, to talk with container, left or right I need to call it. To call here we use dot along with class name, which is also called as Class Selector.

Step 1 : Set the height and width of the page
Step 2 : To make the resume applicable with different browsers, use margin : auto.
Step 3 : To separate the container in 1:3, I need to make a grid and divide it using grid-template-columns with 1fr 2fr
Step 4 : After removing border, resume may look incomplete so, styling it with box-shadow. Refer : Click here

vh (View Port Height) & vw (View Port Width) : When we zoom in and out web page, the contents should not affect, so we use View port Height and the same for View Port Width.
fr stands for fractional unit. It is a flexible unit used exclusively within CSS Grid Layout to represent a fraction of the available space in a grid container.
You can use fr in properties like grid-template-columns or grid-template-rows.

Code -> 1fr 1fr 1fr
Result -> Three columns of equal width.

Display-flex makes the container/box/class flexible to move.
Always how the flex-direction goes, justified-content will be given in same direction.

For Example :

If I code, flex-direction as column, contents should be aligned using justify-content and rows with align-items.
If flex-direction is row, contents should be aligned using justify-content and columns with align-items.

Code and Explanation

HTML

CSS

MY OUTPUT

Post your experience of creating this resume in comments!!🤗

References :
https://www.w3schools.com/html/html5_semantic_elements.asp
https://getcssscan.com/css-box-shadow-examples

Understanding HTML & CSS with Simple project

Annapoorani Kadhiravan — Sun, 24 May 2026 13:39:09 +0000

Always there is a starting point for anything, here is my starting point where I created my portfolio with deep understanding rather than just copy paste 🫣

Every developer bound to understand why it works, how it works and where it works? Let me elaborate the understanding of my portfolio project with HTML and CSS. Before the exact process, let's understand few new terms here.

MARGIN

If you need to give any space outside the box, we can use margin

PADDING

If you need to give space inside the box, we can use padding

Who is this box?

-In HTML, a box usually refers to the Box Model used in web pages.

Every HTML element behaves like a rectangular box 📦

Examples:

headings,
paragraphs,
images,
buttons,
divs,

all are treated as boxes by the browser.

A box contains:

Step 1 : To create any webpage, plan the webpage, how it should look
Step 2 : Create an HTML file and write the basic structure first
Step 3 : Add your content one by one.
Step 4 : After adding all contents, create a border for each division/section. Bordering helps well in understanding and styling
Step 5 : Start applying styles using CSS as per your requirement

Below is my code and explanation:

Before styling a webpage, one important thing to know is that every browser has its own default margin and padding. Because of this, webpages may look slightly different in different browsers 😄 Here, I have used Internal CSS.

To remove those default spaces, we commonly use:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

Here:

* is called the Global Selector because it selects all elements on the webpage.
box-sizing: border-box helps maintain proper width and height calculations by including padding and border inside the element’s total size.

Selectors are used to target HTML elements for styling.

Examples:

header{}
h1{}

These are called Element Selectors because they directly target HTML elements.

While designing layouts, as a beginner, we often get confused about spacing and element positions 😄
A simple trick is to first add borders to elements:

border: 1px solid black;

This helps clearly visualize the boundaries of each element.

Now let’s understand Parent and Child relationships in HTML.

Example Structure:

Here:

<body> is the parent of <header>
<header> is the parent of <h1> and <a>
<h1> and <a> are children of <header>

HTML elements mainly belong to two categories:

1. Block Level Elements

Block-level elements occupy the entire width available.

Even if the content is small, they block the whole line.

Examples:

<header>
<h1>
<div>
<p>

2. Inline Elements

Inline elements only take the space required by their content.

Examples:

<a>
<span>
<strong>

So, <a> tags sit side by side because they are inline elements 😄

Now let’s meet the <nav> tag!

<nav> stands for Navigation and is used to move from one webpage or section to another.

Example:

The <nav> tag itself is a block-level element, but it usually contains inline elements like anchor (<a>) tags.

To create spacing inside a box, we use Padding.

Example:

header{
padding: 20px;
}

Padding adds space between the content and the border.

To create spacing outside the box, we use Margin.

Example:

h1{
margin: 20px;
}

Margin creates distance between elements.

Margins can also be applied individually:

margin-top
margin-right
margin-bottom
margin-left

If only one value is given, the same margin applies to all four sides.

To underline text, CSS provides the text-decoration property.

Example:

text-decoration: underline;

If you want to remove underlines from links:

a{
text-decoration: none;
}

Hope, building this portfolio website project helped in understanding the basics of web development using HTML and CSS. The project demonstrates how to structure a webpage using HTML elements such as header, section, nav, and footer, while CSS was used to improve the design, layout, spacing, colors, and overall appearance of the website.