DEV Community: Ezhil Abinaya K

Exploring JavaScript Control Flow and Functions

Ezhil Abinaya K — Wed, 10 Jun 2026 09:25:24 +0000

JavaScript For Loop
for loop is a control flow statement that allows code to be executed repeatedly based on a condition. It consists of three parts: initialization, condition, and increment/decrement.

Initialization: Runs once before the loop starts to set up a counter variable.
Condition: Evaluated before every iteration; if true, the loop continues.
Afterthought: Runs at the end of each iteration, usually to increment or decrement the counter.

Syntax

for (initialization; condition; afterthought) {
  // Code to execute during each iteration
}

Flowchart

Example 1:Counting up to 5

for (let i = 1; i <= 5; i++) {
  console.log(i); // 1, 2, 3, 4, 5
}

Example 2: For loop to print table of a number

let x = 5
for (let i = 1; i <= 10; i++) {
  console.log(x * i); // 5 10 15 20 25 30 35 40 45 50
}

do...while loop
A do...while loop in JavaScript is an exit-controlled control flow statement that executes a block of code at least once before checking if a specified condition is true. If the condition evaluates to true, the loop repeats; if false, the loop terminates.
Syntax
The syntax requires the do keyword followed by a code block, and finishes with the while keyword and a boolean condition.

do {
  // Code block to be executed
} while (condition);

Example

let status = false;

do {
  console.log("This message prints exactly once!");
} while (status === true);// This message prints exactly once!

Function
A JavaScript function is a reusable block of code designed to perform a specific task. It executes only when it is called.They allow you to organize, reuse, and modularize code. It can take inputs, perform actions, and return outputs.
Arguments
In JavaScript, arguments are the actual values you pass into a function when you called.

function greet(name) {   // name = parameter
    console.log("Hello " + name);
}

greet("Ezhil");          // "Ezhil" = argument

Parameters
Parameters are the variables declared in the function definition that receive values from arguments when the function is called.
"Declared in the function definition" means the variables written inside the function's parentheses when creating the function.
Example

function add(a, b) {
    console.log(a + b);//30
}

add(10, 20);

a and b → Parameters
10 and 20 → Arguments
Tricky Interview Questions
1.What happens if arguments are missing?

function add(a, b) {
    console.log(a + b);
}

add(10);//Nan (because b is undefined)

2.Why is do...while different from while?
do...while executes at least once.

let x = 10;

do {
    console.log("Hello");
} while (x < 5);//Hello

References
https://www.geeksforgeeks.org/javascript/javascript-for-loop/

Understanding While Loops in JavaScript

Ezhil Abinaya K — Tue, 09 Jun 2026 12:51:37 +0000

JavaScript Loops
Loops in JavaScript allow a block of code to run multiple times as long as a given condition is satisfied. They help reduce repetition and make programs more efficient and organized.

Loops continue running until the condition becomes false.
They are useful for iterating over arrays, strings, and ranges of values.In JavaScript, there are three types of Loops :

1.for loop
2.while loop
3.do-while loop
In this section we see while loop.

while loop
A while loop in JavaScript executes a block of code repeatedly as long as a specified condition evaluates to true. It is an entry-controlled loop, meaning the browser evaluates the condition before running any code inside the loop body.

Syntax

while (condition) {
  // Code block to be executed
}

Examples

let count = 1;
while (count <= 5) {
  console.log(count);
  count++;//1 2 3 4 5
}

let i = 1;

while (i < 4) {
  console.log(i); 
  i++; // Increments i so the condition eventually becomes false
}

// Output:
// 1
// 2
// 3

let total = 0;
let i = 1;

while (i <= 5) {
    total = total + i; // Very simple math
    i = i + 1;         // Moves to the next number
}

console.log(total); // Prints: 15

Avoiding Infinite Loops
If your condition never turns false, your code will enter an infinite loop, freezing your browser or application.

// ⚠️ INFINITE LOOP WARNING
let count = 1;
while (count <= 5) {
  console.log(count);
  // Missing count++ means count stays 1 forever!
}

References
https://www.geeksforgeeks.org/javascript/loops-in-javascript/

My Mock Interview Experience-Learning through Practice

Ezhil Abinaya K — Mon, 08 Jun 2026 13:33:52 +0000

Today, I attended a mock interview session. It was a useful experience that helped me understand my strengths and identify the areas where I need more practice.The interview started with a "Tell me about yourself" question. I was able to answer confidently.This gave me a positive start and increased my confidence throughout the interview.Most of the questions were focused on JavaScript fundamentals and CSS concepts. Some of the topics covered were:

Types of variables
Primitive and non-primitive data types
Mutable vs Immutable data
Ternary operator
Default case in switch statements
display: none & Visibility(display) hidden
Wt is Javascript
CSS Grid and Flexbox
types of operator
Type casting

I appreciated about this mock interview was the feedback provided after each answer. Instead of focusing only on marks, I was able to understand where I made mistakes and how I can improve. These corrections are valuable because they help me avoid repeating the same errors in future interviews.
Every mock interview teaches me something new. Sometimes it highlights what I know well, and other times it reveals areas that need improvement. Both are equally important for growth.

JavaScript Essentials: Switch Statements and Scope Explained

Ezhil Abinaya K — Fri, 05 Jun 2026 07:52:42 +0000

Switch Statements in Javascript
The switch statement evaluates an expression and executes code based on matching cases. It’s an efficient alternative to multiple if-else statements, improving readability when handling many conditions.
Basic Syntax

switch (expression) {
  case value1:
    // Code to run if expression === value1
    break;
  case value2:
    // Code to run if expression === value2
    break;
  default:
    // Code to run if no cases match
}

The break keyword written inside every case stops the remaining checks. Without the break keyword, the code will continue running the next cases, even if they don’t match with expression.

Example

let day = 3;
let dayName;
switch (day) {
    case 1:
        dayName = "Monday";
        break;
    case 2:
        dayName = "Tuesday";
        break;
    case 3:
        dayName = "Wednesday";
        break;
    case 4:
        dayName = "Thursday";
        break;
    case 5:
        dayName = "Friday";
        break;
    case 6:
        dayName = "Saturday";
        break;
    case 7:
        dayName = "Sunday";
        break;
    default:
        dayName = "Invalid day";
}

console.log(dayName);//Wednesday

default keyword
The default keyword in a JavaScript switch statement specifies a block of code to run if no case matches the evaluated expression. It behaves identically to the final else block in an if / else if / else conditional chain.

const fruit = "Papaya";

switch (fruit) {
  case "Banana":
    console.log("Bananas are $0.48 a pound.");
    break;
  case "Apple":
    console.log("Apples are $0.32 a pound.");
    break;
  default:
    console.log('Sorry, we do not have prices for ${fruit}'.);
}

// Output: 'Sorry, we do not have prices for Papaya'.

Difference Between Global scope, function scope, and block scope

Global scope means variables are accessible from anywhere in the code. Function scope means variables are accessible only within the function they are declared in. Block scope means variables are accessible only within the block (e.g., within {}) they are declared in.Variables declared with let or const within a block (e.g., within {}) are only accessible within that block. This is not true for var, which is function-scoped.

// 1. GLOBAL SCOPE
// This variable is declared at the top level. It can be accessed anywhere.
const globalUsername = "Alice"; 

function userProfile() {
    console.log("Global inside function:", globalUsername); // Works! ✅
}
userProfile();

console.log("Global outside function:", globalUsername); // Works! ✅


// 2. BLOCK SCOPE
// Curly braces define the boundaries of a block.
if (true) {
    // These variables only live inside this 'if' block
    let blockBonus = 500;
    const blockCode = "SAVE20";

    console.log("Inside block:", blockBonus); // Works! ✅
}

// Trying to access block-scoped variables outside their block will fail
console.log(blockBonus); // ❌ Throws ReferenceError: blockBonus is not defined

References
https://www.geeksforgeeks.org/javascript/switch-case-in-javascript/
https://intellipaat.com/blog/switch-statement-javascript/
https://www.greatfrontend.com/questions/quiz/explain-the-difference-between-global-scope-function-scope-and-block-scope

JavaScript Conditional Statements: Examples, Flowcharts, Truthy & Falsy Values, and Interview Questions

Ezhil Abinaya K — Thu, 04 Jun 2026 06:26:41 +0000

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.

Flowchart for below program

let x = 20;

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

if (x % 2 !== 0) {
    console.log("Odd");
};
//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. Flowchar for below program

let age = 25;

if (age >= 18) {
    console.log("Adult")
} else {
    console.log("Not an Adult")
};
//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. Flowchart for below program

const x = 0;

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

Truthy & Falsy Values in JavaScript
In JavaScript, truthy and falsy values determine how non-boolean data types are evaluated inside conditional contexts like if statements or loops. JavaScript converts these values into standard booleans behind the scenes through type coercion.

** Truthy Values**
Truthy values are values that are evaluated to be true when used in a Boolean context.Javascript has a fixed list of truthy values.

Non-zero numbers: 42, -1, 3.14
Non-empty strings: "hello", "0", " "(a string containing a space is non-empty)
Objects and arrays: {},
Functions: function() {}(TBD)
Dates: new Date()(TBD)
Symbols: Symbol()(TBD)
BigInt values other than 0n: 10n

Example

        let currentStatus = "active"; 

        if (currentStatus) {
            console.log("System is running!"); 
        } else {
            console.log("System is offline."); 
        }
//System is running

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 without space)
null(TBD)
undefined
NaN
document.all (used for backward compatibility)(TBD)

Example

        let username = ""; 

        if (username) {
            console.log("Welcome back!"); 
        } else {
            console.log("Please log in."); 
        }
//Please log in.

Interview Questions
1. What is the main difference between an if statement and an if-else statement?
An if statement only executes a code block if the condition is true and does nothing if it is false. An if-else statement provides an alternative code block that runs specifically when the condition is false.

2. How many built-in falsy values exist in JavaScript? Can you name at least four?
There are 8 core falsy values: false, 0 (including -0), 0n, "" (empty string), null, undefined, NaN, and document.all.

3.Predict the output of this code block?

let score = "0";
if (score) {
    console.log("Goal!");
} else {
    console.log("No Goal!");
}

Answer: It will output "Goal!". Even though the character inside is zero, "0" is a non-empty string, making it a truthy value.

4.What is type coercion in the context of conditional statements?
Type coercion is the automatic conversion of values from one data type to another by JavaScript. In an if statement, JavaScript coerces non-boolean values (like strings or numbers) into booleans (true or false) behind the scenes.
5.

let x = 10;

if (x = 5) {
    console.log("Executed");
}

Output:Executed
References
https://www.geeksforgeeks.org/javascript/conditional-statements-in-javascript/
https://www.geeksforgeeks.org/javascript/explain-the-concept-of-truthy-falsy-values-in-javascript/

JavaScript Operators Explained: Arithmetic, Assignment, Comparison & Logical Operators with Examples

Ezhil Abinaya K — Wed, 03 Jun 2026 13:05:53 +0000

Multiplication Operator
The multiplication operator gives the product of operands where one operand is a multiplicand and another is multiplier.An operand is the data or value that an operator acts upon to perform a calculation or evaluation.
For example, in the expression 5 + 3, the plus sign (+) is the operator, while 5 and 3 are the operands.

        let a = Infinity * 0;
        let b = Infinity * Infinity;
        console.log(a);//NAN
        console.log(b);//Infinity
        let x = 3 * 3;
        let y = -4 * 4;
        console.log(x);//12
        console.log(y);//-16
        let z = 'hi' * 2;
        console.log(z);//NAN

Division (/) Operator
The division operator provides the quotient of its operands where the right operand is the divisor and the left operand is the dividend.
Dividend(left).

console.log(10 / 2); // 5
console.log(9 / 4);  // 2.25

Modulus (%) Operator
The modulus operator returns the remainder left over when a dividend is divided by a divisor. The modulus operator is also known as the remainder operator. It takes the sign of the dividend.

        let d = 9 % 5;
        let e = -12 % 5;
        let f = 1 % -2;
        let g = 5.5 % 2;
        let h = -4 % 2;
        let l = NaN % 2;

        console.log(d);//4
        console.log(e);//-2
        console.log(f);//1
        console.log(g);//1.5
        console.log(h);//0
        console.log(l);//NAN

Exponentiation ** Operator
The exponentiation operator gives the result of raising the first operand to the power of the second operand.

let x = 5;
let z = x ** 2;//25

Increment (++) Operator
The increment operator increments (adds one to) its operand and returns a value.

If used postfix with the operator after the operand (for example, x++), then it increments and returns the value before incrementing.
If used prefix with the operator before the operand (for example, ++x), then it increments and returns the value after incrementing.

// Postfix 
let a = 2;
b = a++; // b = 2, a = 3
// Prefix
let x = 5;
y = ++x; // x = 6, y = 6

Decrement (- -) Operator
The decrement operator decrements (subtracts one from) its operand and returns a value.

If used postfix, with operator after operand (for example, x--), then it decrements and returns the value before decrementing.
If used prefix, with the operator before the operand (for example, --x), then it decrements and returns the value after decrementing.

        let i = 5;
        let j = 7;
        let result = i++ - --j + ++j - i++;
        console.log(i, j, result);//7 7 0

Assignment Operator
Assignment operators assign values to variables in javascript.Assignment operators in JavaScript are used to set or update the value of a variable. The basic assignment operator is =, which sets the value of the right-hand operand to the variable on its left.

The = Operator
The Simple Assignment Operator assigns a simple value to a variable.

let x = 10;//10
let y = 50
let x = 10 + y;//60

The += Operator
The Addition Assignment Operator adds a value to a variable.

let x = 10;
x += 5;//15

The -= Operator
The Subtraction Assignment Operator subtracts a value from a variable.

let x = 10;
x -= 5;//5

The *= Operator
The Multiplication Assignment Operator multiplies a variable.

let x = 10;
x *= 5;//50

The **= Operator
The Exponentiation Assignment Operator raises a variable to the power of the operand.

let x = 10;
x **= 5;//100000

The /= Operator
The Division Assignment Operator divides a variable.

let x = 10;
x /= 5;//2

The %= Operator
The Remainder Assignment Operator assigns a remainder to a variable.

let x = 10;
x %= 5;//0

Comparison Operator/Relational Operator
Comparison operators and relational operators in JavaScript are closely related terms used to evaluate conditions and always return a boolean value (true or false).

Equality Operator (==)
The Equality operator is used to compare the equality of two operands.

let x = 5;
let y = '5';

// Checking of operands
console.log(x == 5);//true
console.log(y == 5);// true     
console.log(x == y);//true

Inequality Operator (!=)
The Inequality Operator is used to compare the inequality of two operands.

let x = 5;
let y = '5';

// Checking of operands
console.log(x != 6);//true
console.log(y != '5'); //false      
console.log(x != y);//false

Strict equality Operator (===)
The Strict equality Operator is used to compare the equality of two operands with type.

let x = 5;
let y = '5';

// Checking of operands
console.log(x === 6);//false
console.log(y === '5');//true        
console.log(x === y);//false

Strict inequality Operator (!==)
The Strict inequality Operator is used to compare the inequality of two operands with type.

let x = 5;
let y = '5';

// Checking of operands
console.log(x !== 6);//true
console.log(y !== '5');//false        
console.log(x !== y);//true

Greater than Operator (>)
The Greater than Operator is used to check whether the left-side value is greater than the right-side value.

let x = 5;
let y = "5";

// Checking of operands
console.log(x > 0);//true
console.log(y > "10");//true        
console.log(x > "10");//false
console.log(y > 0);//true

Greater than or equal Operator (>=)
The Greater than or equal Operator is used to check whether the left side operand is greater than or equal to the right side operand.

// Illustration of (>=) operator
let x = 5;
let y = "5";

// Checking of operands
console.log(x >= 5);//true
console.log(y >= "15");//true      
console.log(x >= "5");//true
console.log(y >= 15);//false

Less than Operator (<)
The Less than Operator is used to check whether the left-side value is less than the right-side value.

let x = 5;
let y = "5";

// Checking of operands
console.log(x < 15);//true
console.log(y < "0");//false        
console.log(x < "0");//false
console.log(y < 15);//true

Less than or equal Operator (<=)
The Less than or equal Operator is used to check whether the left side operand value is less than or equal to the right side operand value.

let val1 = 5;
let val2 = "5";

// Checking of operands
console.log(val1 <= 15);//true
console.log(val2 <= "0");// false     
console.log(val1 <= "0");//false
console.log(val2 <= 15);//true

Logical Operators
Logical operators in JavaScript are used to combine or modify boolean values to make decisions. They help control program flow by evaluating whether one or more conditions are true or false.

They are widely used in if statements, loops, and conditions.
Logical operators make it easier to handle multiple conditions at once.

Logical AND
The && operator returns true if both expressions are true, otherwise false.

let x = 6;
let y = 3;
let z = (x < 10 && y > 1)//true

let x = 6;
let y = 3;
(x < 10 && y < 1);//false

Logical OR
The || operator returns true if one or both expressions are true, otherwise false.

let x = 6;
let y = -3;
let z = (x > 0 || y > 0)//true

Logical NOT
The NOT operator (!) returns true for false expressions and false for true expressions.

let x = (5 == 8);//false
let y = !(5 == 8)//true

References
https://www.geeksforgeeks.org/javascript/javascript-arithmetic-operators/
https://www.geeksforgeeks.org/javascript/javascript-comparison-operators/
https://www.w3schools.com/js/js_assignment.asp
https://www.devopsschool.com/blog/wp-content/uploads/2020/07/JavaScript-Logical-Operator.png

JavaScript Keywords, Arithmetic Operators & Type Conversion

Ezhil Abinaya K — Tue, 02 Jun 2026 10:49:05 +0000

Keywords
JavaScript keywords are predefined, reserved words that have a special meaning within the language syntax. Because the engine treats these tokens as structural components, you cannot use them as identifiers (names for variables, functions, classes, or loops).

JavaScript Operators
JavaScript operators are symbols or keywords used to perform operations on values and variables. They are the building blocks of JavaScript expressions and can manipulate data in various ways.There are various operators supported by JavaScript:

Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators
Ternary Operators
The typeof Operator
Bitwise Operators

In this section, we will explore the arithmetic operators addition (+) and subtraction (-) in JavaScript.

Arithmetic Operators
Arithmetic operators are mathematical symbols used to perform basic calculations (like addition, subtraction, multiplication, and division) on numbers or variables. They are the fundamental building blocks of both daily math and computer programming.

Example

let x = 3;
let y = 8;
console.log(x + y); // 11

Concatenation of Strings in JavaScript
String concatenation is the process of joining two or more strings into a single string. JavaScript provides simple and flexible ways to combine strings for display, logging, or data manipulation.

Using the + operator to join strings.
Combining strings with variables and expressions easily. The most common and straightforward approach combines strings using the plus sign. If you mix strings with numbers, JavaScript automatically converts the numbers into strings.

Example

let i = '10';
let j = 5;
console.log(i + j);//105

Subtraction operator
The subtraction operator is marked by the minus sign − and you can use it to subtract the right operand from the left operand.

let x = 5;
let y = 3;

console.log(x - y); // 2

Type Conversion
Type conversion is the general process of changing a value from one data type to another in JavaScript (such as turning a string into a number).It is split into two categories:

Implicit Type Conversion (automatically done by JavaScript) and
Explicit Type Conversion (manually done by you, which is commonly referred to as Type Casting) Implicit Type Conversion (Type Coercion) In JavaScript, the implicit type conversion or coercion conversion can be defined as the automatic conversion of the data type of the variables from one type to another type. Implicit type conversion mostly occurs when we are performing the arithmetic or the logical operations.

Examples
String with Number (Concatenation)
When we add a string with the number, the JavaScript automatically converts the number into a string and performs string concatenation.

let res = 5 + "5";  
console.log(res);//55

Boolean to Number
When we perform the mathematical operations, then JavaScript automatically converts true to 1 and false to 0.

let res = true + 1;  
console.log(res);//2

Equality Comparison (==)
When we use the equality operator in the JavaScript, it compares them after converting the value into the same data type.

let res = (5 == "5");  
console.log(res);//true

Automatic Conversion in Logical Operations
In JavaScript, these values are automatically converts undefined, null,
"" (empty string), false, NaN, and 0 to false, and all other values to true.

let res = Boolean("");  
let res2 = Boolean("Hello");  
console.log(res)//false
console.log(res2)//true

Explicit Type Conversion
In JavaScript, explicit type conversion can be defined as when we manually change the data type of the variable from one to other using some built-in JavaScript functions. JavaScript provides us the built-in functions for performing the explicit conversion.
Examples

Conversion to Boolean

Boolean(0);          // false
Boolean('');         // false
Boolean(null);       // false
Boolean(undefined);  // false
Boolean(NaN);        // false
Boolean(-0);         // false
Boolean(false);      // false
-------------------------------
Boolean(1);          // true
Boolean(-10);        // true
Boolean('apple');    // true
Boolean([]);         // true
Boolean({ a: 'a' }); // true - every non-primitive value is converted to true
Boolean({});         // true - even the empty object
Boolean(Symbol());   // true
Boolean(Symbol('x'));// true

Conversion to Number

Number(0);            // 0
Number('');           // 0
Number(null);         // 0
Number(NaN);          // NaN
Number(undefined);    // NaN
Number(true);         // 1
Number(false);        // 0
Number(Symbol());     // TypeError
Number('   5    ');   // 5
Number(' ');          // 0
Number('\n');         // 0
Number('-1/2');       // NaN
Number('105.4');      // 105.4

Conversion to String

String(0);            // '0'
String('');           // ''
String(true);         // 'true'
String(NaN);          // 'NaN'
String(undefined);    // 'undefined'
String(null);         // 'null'
String(Symbol());     // 'Symbol()'
String(Symbol('x'));  // 'Symbol(x)'
String(-105.4);       // '-105.4'
String([]);           // ''

References
https://www.freecodecamp.org/news/javascript-operators/
https://www.geeksforgeeks.org/javascript/javascript-operators/
https://www.w3schools.com/js/js_reserved.asp

Mastering JavaScript Fundamentals

Ezhil Abinaya K — Mon, 01 Jun 2026 10:12:05 +0000

Javascript
JavaScript is a high-level, interpreted programming language that makes websites interactive and dynamic. It 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.

Dynamic means Systems or pages that adjust, react, or are generated in real-time based on user input, rather than staying exactly the same for every visitor.
A versatile language is not trapped in just one job. It can be used across completely different tech industries.JavaScript is the ultimate example of a versatile language:
On Web Browsers: It runs animations, dropdown menus, and pop-ups.
On Servers: Using Node.js, it can manage databases and backend logic.
On Mobile: Using frameworks like React Native, it can build iPhone and Android apps.
On Desktops: Using Electron, it can build desktop apps like VS Code or Discord.**

Latest Version of Javascript
The current JavaScript version is ES2025.JavaScript was invented by Brendan Eich in 1995 and became an ECMA standard in 1997.The first ECMAScript versions were abbreviated by numbers. (ES1, ES2, ES3, ES5, ES6).From 2016, versions are named by year (ECMAScript 2016, 2017, 2018, ..., 2025).ECMA stands for European Computer Manufacturers Association. ECMAScript is the official name of the JavaScript standard.ECMAScript (often referred to as ES) is the official standardized specification for scripting languages like JavaScript. It sets the universal rules, syntax, and core features that a programming language must follow, ensuring consistent behavior across different web browsers and devices.

Compiler and Interpreter
A compiler and an interpreter are both tools that translate human-readable source code into machine-executable binary code. The primary difference is timing: a compiler translates the entire program before execution, while an interpreter translates and executes it line-by-line during runtime.
Data
Data is the Collection of information or values stored in computer memory that your program manipulates. A data type is a classification that tells the interpreter what kind of value a variable holds and how to interact with it.
Types of Data
A JavaScript variable can hold 8 types of data.7 Primitive Data Types and 1 Object Data Type.The Object data type can hold many different object types.

Number --->A number representing a numeric value.
Bigint---->A number representing a large integer.
String---->A text of characters enclosed in quotes.
Boolean--->A data type representing true or false,
Undefined--->A variable with no assigned value.
Null-------->A value representing object absence.
Symbol------->A unique primitive identifier(TBD).
Object------->A collection of key-value pairs of data(TBD).
The JavaScript Number data type has a fixed size of 64 bits (8 bytes).
Datatype Checking
A data type in a programming language refers to a characteristic that defines the nature of the value that a data element has. Some common examples include string, integer, character, and boolean.Every programming language has a system of checking that values have been assigned their correct types, which is known as type checking.There are two categories of type checking implemented in most programming languages, static and dynamic:

Variables
A variable is a named container in memory used to store data. It acts as a label for a value (like a number, text, or list) so the program can reference and manipulate it later.
Four Ways to Declare Varibales in Javascript
Declaration: Naming the container (e.g., score, username).
Assignment: Storing a specific piece of data inside it using an operator like =.

Older JavaScript

Using var (Not Recommended)
Automatically (Not Recommended)

Modern JavaScript

Using let
Using const

Examples using var

var age = 21; 
var age = 22; // Redeclare ✓ 
age = 23; // Reinitialize ✓

Examples using let

let age = 21; 
let age = 22; // Error ✗ 
age = 22; // Reinitialize ✓

Examples using const

const age = 21; 
const age = 22; // Error ✗  
age = 22; // Error ✗

Redeclaration
Creating the same variable again using the same name.

var age = 21; 
var age = 22; // Redeclaration allowed

Reinitialization
Changing the value of an existing variable.

let age = 21; 
age = 22; // Reinitialization allowed

References
https://www.geeksforgeeks.org/javascript/introduction-to-javascript/
https://www.w3schools.com/js/js_versions.asp
https://www.w3schools.com/js/js_datatypes.asp
https://www.w3schools.com/js/js_variables.asp
https://www.baeldung.com/cs/statically-vs-dynamically-typed-languages

Mastering CSS Position and z-index

Ezhil Abinaya K — Fri, 29 May 2026 06:24:21 +0000

Position
The position property determines how an element is placed on a web page. By default, elements stack naturally one after another. Changing the position allows you to move elements anywhere on the screen using top, bottom, left, and right coordinates.
Types of Position
1.Position:static (The Default)
This is the default value for every element. Elements just follow the natural vertical flow of the page. Moving properties (top, left, etc.) have no effect here.

.normal-text {
  position: static; /* Even if you add left: 20px, it will NOT move */
}

2.Position:relative
The element stays in the normal page flow, but you can nudge it away from its original starting position without affecting the elements around it. It also acts as an anchor for absolute children.

.icon {
  position: relative;
  top: -5px; /* Moves the icon 5 pixels UP from where it normally sits */
}

3.Position:absolute
The element is completely removed from the natural page flow. It positions itself relative to its closest parent container that has a position (like relative). If no parent has a position, it goes all the way up to the browser window.

.product-card {
  position: relative; /* Acts as the boundary anchor for the child */
}

.sale-badge {
  position: absolute;
  top: 10px;
  right: 10px; /* Pins the badge 10px from the top and right of the card */
}

4.Position:fixed
The element is removed from the page flow and locked relative to the browser window (viewport). It stays exactly in the same spot on your screen, even when you scroll up and down.

.chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px; /* Stays glued to the bottom-right corner of the screen while scrolling */
}

5.Position:sticky
It behaves like relative at first while scrolling normally, but switches to fixed once it hits a specific spot on the screen (like the very top).

.table-header {
  position: sticky;
  top: 0; /* Scrolls normally, but sticks to the absolute top of the screen when reached */
}

z-index
z-index is a CSS property that controls the 3D stacking order of overlapping elements on a web page. It determines which element sits on top and which one stays hidden underneath.
The Golden Rule of z-index
z-index only works on elements that have their position property set to relative, absolute, fixed, or sticky. It will completely fail on default static elements.
How the Numbers Work?

Higher numbers come to the front.
Lower (or negative) numbers go to the back.
If two elements have the same z-index, the one written later in the HTML code will naturally stack on top.

The Tricky Interview Concept: "Stacking Context"
Why is my element with z-index: 9999 sitting behind an element with
z-index: 2?
Think of stacking contexts like folders. If Parent Folder A has a z-index: 1 and Parent Folder B has a z-index: 2, any child inside Folder A—even with a z-index: 9999—can never look higher than Folder B. It is trapped inside its parent's stacking level.

CSS Animation Secrets and Registration Form Essentials

Ezhil Abinaya K — Thu, 28 May 2026 14:55:18 +0000

Right-to-Left CSS Transformations
To move an element from right to left smoothly, combine the transform property with @keyframes. Using transform: translate() is better for performance than animating left or right properties because it triggers hardware acceleration.
The Axis Rules

translateX(): Moves elements horizontally.
translateY(): Moves elements vertically.
- 100%:Moves the element forward (right or down) by its own width/height.
-100%: Moves the element backward (left or up) by its own width/height.

.banner-container {
  overflow: hidden; /* Hides text when it goes off-screen */
  width: 100%;
  background: light grey;
}

.sliding-text {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: bold;
  /* Starts from right (100%) and moves to left (-100%) */
  animation: entranceSlide 5s linear infinite; 
}

@keyframes entranceSlide {
  0% {
    transform: translateX(100%); /* Completely off-screen to the right */
  }
  100% {
    transform: translateX(-100%); /* Completely off-screen to the left */
  }
}

<div class="banner-container">
  <div class="sliding-text">Special Offer! Register Now!</div>
</div>

Registration Form Essentials
When building a modern, user-friendly registration form in HTML and CSS, here is a breakdown of the essential elements and styles you should use.
<form>:Always wrap your inputs inside a form tag to handle submission.
<label>:Use the for attribute to link the label with the input id. This improves accessibility.
type="email": Automatically validates if the user entered a proper email format.
type="password": Masks the typed characters for security.required: A built-in HTML attribute that prevents form submission if the field is empty.
placeholder: Gives a temporary hint inside the input box (e.g., "Enter your full name").
**autocomplete="on": **Helps users fill out fields faster using saved browser data.

<form class="reg-form">
  <h2>Create an Account</h2>

  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" id="username" placeholder="e.g., dev_runner" required>
  </div>

  <div class="form-group">
    <label for="user-email">Email Address</label>
    <input type="email" id="user-email" placeholder="name@example.com" required>
  </div>

  <button type="submit">Sign Up</button>
</form>

Media Queries, Transitions, Positions, and Units (rem vs em) Explained

Ezhil Abinaya K — Wed, 27 May 2026 11:12:41 +0000

Media Queries: Making Web Pages Responsive
A Media Query is a CSS technique used to apply specific styles only when certain conditions are met, such as a user's screen size, resolution, or orientation. It is the backbone of Responsive Web Design.

/* Default style for mobile screens */
body {
  background-color: white;
  font-size: 14px;
}

/* Style applied ONLY when the screen is 768px wide or larger (Tablets/Desktops) */
@media (min-width: 768px) {
  body {
    background-color: lightblue;
    font-size: 18px;
  }
}

Transitions
A Transition allows you to change property values smoothly over a specified duration, instead of having the change happen instantly. It makes user interactions (like hovering over a button) feel professional and polished.
The 4 Main Properties

transition-property: The name of the CSS property you want to animate (e.g., background-color).
transition-duration: How long the animation takes (e.g., 0.3s).
transition-timing-function: The speed curve of the effect (e.g., ease-in-out).
transition-delay: A pause before the animation starts.

.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: darkblue;
}

Position
The position property defines how an element is positioned on the web page. There are five main positioning types:
The Five Positioning Types

1. Static: The default value. Elements follow the normal page flow. Top/bottom/left/right properties have no effect.
2. Relative: Positioned relative to its original, normal position. Moving it doesn't affect surrounding elements.
3. Absolute: Positioned relative to its nearest positioned ancestor (an ancestor with absolute, relative, or fixed position). It is completely removed from the normal page flow.
4. Fixed: Positioned relative to the browser viewport window. It stays in the exact same place even when you scroll (like a sticky chat widget).
5. Sticky: Toggles between relative and fixed depending on the user's scroll position (perfect for navigation bars).

.parent-box {
  position: relative; /* Acts as an anchor for the absolute child */
  width: 300px;
  height: 300px;
}

.child-badge {
  position: absolute;
  top: 10px;
  right: 10px; /* Sits perfectly in the top-right corner of the parent */
}

rem vs em
Both rem and em are relative units used for sizing fonts, padding, margins, and layouts. They are much better for accessibility than fixed px (pixels).
- rem (Root EM): Relative strictly to the root element's font size (the <html> tag). If the root font size is 16px, then 1rem = 16px, and 2rem = 32px. It remains consistent everywhere.
- em: Relative to the font size of its immediate parent element (or the element itself when used for margins/padding). It cascades and can compound.

html {
  font-size: 16px; /* Root size */
}

.parent {
  font-size: 20px;
}

.child-one {
  font-size: 2rem; /* 2 x 16px = 32px (Ignores parent, looks at root) */
}

.child-two {
  font-size: 2em;  /* 2 x 20px = 40px (Looks at parent font size) */
}

Understanding Selectors, nth-child, Overflow & Playwright Tool in Web Development

Ezhil Abinaya K — Tue, 26 May 2026 12:31:10 +0000

Web development becomes easier when we understand how HTML and CSS work together. Recently, I learned about selectors, the nth-child pseudo-class, CSS overflow, and the Playwright automation tool. These concepts are very useful for designing websites and testing web applications.
Selectors in HTML & CSS
Selectors are used in CSS to target HTML elements and apply styles to them. They help developers style specific elements without affecting the entire webpage.
Types of CSS Selectors

Element Selector Targets HTML tags directly.

p {
  color: blue;
}

P is a element selector. It applies style only to all p tags.
2. Class Selector
Uses . before the class name.

.text {
  font-size: 20px;
}

<p class="text">Hello</p>

3. ID Selector
Uses # before the ID name.

#title {
  color: red;
}

<h1 id="title">Welcome</h1>

4. Universal Selector
Targets all elements.

* {
  margin: 0;
}

nth child in css
nth child is a pseudo-class selector used to select elements based on their position.

li:nth-child(2) {
  color: blue;
}

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Here, the second list item becomes blue.
Uses of nth-child:

Helps style alternate rows.
Useful in tables and lists.
Reduces extra class usage. Overflow Overflow controls what happens when content exceeds the size of its container.

Types of Overflow

Overflow Hidden
Hides extra content.

overflow: hidden;

Overflow Scroll
Adds scrollbars.

overflow: scroll;

Overflow Auto
Adds scrollbar only when needed.

overflow: auto;

Playwright Tool
Playwright is a modern automation testing tool used for testing web applications.It supports multiple browsers like:

Chrome
Firefox
Edge
Safari

Uses of Playwright

Browser automation.
UI testing.
End-to-end testing.
Website functionality testing.