DEV Community: Dhanush P

Control Flow Statements in JS

Dhanush P — Thu, 04 Jun 2026 07:22:35 +0000

Control flow statements control the order in which code is executed.
These statements allow you to make decisions, repeat tasks, and jump between parts of a program based on specific conditions.

if Statement

The if statement executes a block of code only if a specified condition is true.

The following flowchart illustrates how the if statement works:

If the condition is a non-boolean value, JavaScript will coerce it to a boolean value by calling the Boolean() function.

If you have more than one statement to execute, you need to wrap them in a block using a pair of curly braces ({}) as follows:

if (condition) {
  // statements to execute
}

It’s a good practice to always use curly braces with the if statement. This makes your code easier to maintain and helps avoid possible mistakes.

if statement example

The following example uses the if statement to check if the age is equal to or greater than 18:

let age = 18;
if (age >= 18) {
  console.log('You eligible for vote');  // You eligible for vote
}

if…else Statement

The if statement executes a block if a condition is true. When the condition is false, it does nothing.

But if you want to execute a statement if the condition is false, you can use an if...else statement.

Here’s the syntax of the if...else statement:

if( condition ) {
  // ...
} else { 
  // ...
}

In this syntax, the condition is a value or an expression that evaluates to true or false. If the condition is true, the if...else statement executes the block that follows the if branch.

If the condition is false, the if...else statement executes the block that follows the else branch.

Typically, the condition evaluates to a boolean value, which is true or false. However, if it evaluates to a non-boolean value, the if...else statement will convert it to the boolean value.

The following flowchart illustrates how the if...else statement works:

if…else statement example

The following example uses the if...else statement to check if the age is greater than or equal to 18:

let age = 18;

if (age >= 18) {
  console.log('You eligible for vote.');
} else {
  console.log('You must be at least 18 to voting.');
}

// Output: You eligible for vote.

In this example, the age is 18. Therefore, the expression age >= 18 is true. Hence, you’ll see the following message in the console:

The following example is the same as above except that the age is 18 instead of 16:

let age = 16;

if (age >= 18) {
  console.log('You eligible for vote.');
} else {
  console.log('You must be at least 18 to voting.');
}

// Output: You must be at least 18 to voting.

In this example, the age is 16. Therefore, the expression age >= 18 evaluates to false. Hence, the statement in the else branch executes that output the message to the console.

if...else...if Statement

The if an if…else statements accepts a single condition and executes the if or else block accordingly based on the condition.

To check multiple conditions and execute the corresponding block if a condition is true, you use the if...else...if statement like this:

if (condition1) {
  // ...
} else if (condition2) {
  // ...
} else if (condition3) {
  //...
} else {
  //...
}

In this syntax, the if...else...if statement has three conditions. In theory, you can have as many conditions as you want to, where each else...if branch has a condition.

The if...else...if statement checks the conditions from top to bottom and executes the corresponding block if the condition is true.

The if...else...if statement stops evaluating the remaining conditions as soon as a condition is true. For example, if the condition2 is true, the if...else...if statement won’t evaluate the condition3.

If all the conditions are false, the if...else...if statement executes the block in the else branch.

The following flowchart illustrates how the if...else...if statement works:

if else if example

The following example uses the if...else...if statement to get the month name from a month number:

let month = 6;
let monthName;

if (month == 1) {
  monthName = 'Jan';
} else if (month == 2) {
  monthName = 'Feb';
} else if (month == 3) {
  monthName = 'Mar';
} else if (month == 4) {
  monthName = 'Apr';
} else if (month == 5) {
  monthName = 'May';
} else if (month == 6) {
  monthName = 'Jun';
} else if (month == 7) {
  monthName = 'Jul';
} else if (month == 8) {
  monthName = 'Aug';
} else if (month == 9) {
  monthName = 'Sep';
} else if (month == 10) {
  monthName = 'Oct';
} else if (month == 11) {
  monthName = 'Nov';
} else if (month == 12) {
  monthName = 'Dec';
} else {
  monthName = 'Invalid month';
}
console.log(monthName);    // Jun

In this example, we compare the month with 12 numbers from 1 to 12 and assign the corresponding month name to the monthName variable.

Since the month is 6, the expression month==6 evaluates to true. Therefore, the if...else...if statement assigns the literal string 'Jun' to the monthName variable. Therefore, you see Jun in the console.

If you change the month to a number that is not between 1 and 12, you’ll see the Invalid Month in the console because the else clause will execute.

https://www.javascripttutorial.net/javascript-if/
https://www.geeksforgeeks.org/javascript/javascript-statements/

Operators in JavaScript

Dhanush P — Wed, 03 Jun 2026 07:01:23 +0000

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.

1. Arithmetic Operator

Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.

Addition operator (+)
The addition operator returns the sum of two values. For example, the following uses the addition operator to calculate the sum of two numbers:

let sum = 10 + 20;
console.log(sum); // 30

You can also use the addition operator with two variables. For example:

let netPrice    = 9.99,
    shippingFee = 1.99;
let grossPrice  = netPrice + shippingFee;

console.log(grossPrice);   // 11.98

If either value is a string, the addition operator uses the following rules:

If both values are strings, it concatenates the second string to the first one.
If one value is a string, it implicitly converts the numeric value into a string and concatenates two strings.

For example, the following uses the addition operator to concatenate two strings:

let x = '10',
    y = '20';
let result = x + y;   // 1020

The following example shows how to use the addition operator to calculate the sum of a number and a string:

let result = 10 + '20';  // 1020

In this example, JavaScript converts the number 10 into a string '10' and concatenates the second string '20' to it.

Subtraction operator (-)

The subtraction operator (-) subtracts one number from another. For example:

let result = 30 - 10;
console.log(result); // 20

If a value is a string, a boolean, null, or undefined, the JavaScript engine will:

First, convert the value to a number using the Number() function.
Second, perform the subtraction.

Multiplication operator (*)

JavaScript uses the asterisk (*) to represent the multiplication operator. The multiplication operator multiplies two numbers and returns a single value. For example:

let result = 2 * 3;
console.log(result);  // 6

If either value is not a number, the JavaScript engine implicitly converts it into a number using the Number() function and perform the multiplication. For example:

let result = '5' * 2;

console.log(result);   // 10

Divide operator (/)

Javascript uses the slash (/) character to represent the divide operator. The divide operator divides the first value by the second one. For example:

let result = 20 / 10;

console.log(result); // 2

If either value is not a number, the JavaScript engine converts it into a number for division. For example:

let result = '20' / 2;
console.log(result); // 10;

Remainder Operator (%)

JavaScript uses the (%) to represent the remainder operator. The remainder operator returns the remainder left over when one value is divided by another value. For example:

The following example shows how to use the remainder operator with a positive dividend:

let remainder = 5 % -2;
console.log(remainder); // 1

remainder = 5 % 2;
console.log(remainder); // 1

The following example uses the remainder operator with a negative dividend:

let remainder = -5 % 3;
console.log(remainder); // -2

remainder = -5 % -3;
console.log(remainder); // -2

2. Assignment Operators

Assignment operators are used to assign values to variables. They can also perform operations like addition or multiplication while assigning the value.

+= operator

The following example uses the += operator to add one to variable x:

let x = 10;
x += 1;
console.log(x); // 11

-= operator

The following example uses the -= operator to minus one from the variable x:

let x = 10;
x -= 1;
console.log(x); // 9

(*=) operator

The following example uses the *= operator to multiply 10 with the variable x:

let x = 10;
x *= 10;
console.log(x); // 100

/= operator

The following example uses the /= operator to divide x by 2 and assign the result back to x:

let x = 10;
x /= 2;
console.log(x); // 5

%= operator

The following example uses the %= operator to get the remainder of x is divided by 2 and assigns the remainder back to x:

let x = 5;
x = x % 2;

console.log(x);  // 1

Chaining JavaScript assignment operator

If you want to assign a single value to multiple variables, you can chain the assignment operators. For example:

let a = 10, b = 20, c = 30;
a = b = c; // all variables are 30

In this example, JavaScript evaluates from right to left. Therefore, it does the following:

let a = 10, b = 20, c = 30;

b = c; // b is 30
a = b; // a is also 30

3. Comparison / Relational operators

Comparison operators compare two values and return a boolean (true or false). They are useful for making decisions in conditional statements.

See the following example:

let r1 = 20 > 10; // true
let r2 = 20 < 10; // false
let r3 = 10 == 10; // true

Compare numbers

If values are numbers, the comparison operators perform a numerical comparison. For example:

let a = 10, 
    b = 20; 

console.log(a >= b);  // false
console.log(a == 10); // true

This example is straightforward. The variable a is 10, b is 20. The expression a >= b expression returns false and the expression a == 10 expression returns true.

Compare strings

If the operands are strings, JavaScript compares the character codes numerically one by one in the string.

let name1 = 'alice',
    name2 = 'bob';    

let result = name1 < name2;
console.log(result); // true
console.log(name1 == 'alice'); // true

Since JavaScript compares the character codes in the strings numerically, you may receive an unexpected result, for example:

let f1 = 'apple',
    f2 = 'Banana';
let result = f2 < f1;
console.log(result); // true

In this example, f2 is less than f1 because the letter B has the character code 66 while the letter a has the character code 97.

To fix this, you need to:

First, convert the strings into a common format, either lowercase or uppercase
Second, compare the converted values

For example:

let f1 = 'apple',
    f2 = 'Banana';

let result = f2.toLowerCase() < f1.toLowerCase();
console.log(result); // false

Note that the toLowerCase() is a method of the String object that converts the string to lowercase.

4. Strict equal (===) and not strict equal (!==)

The strict equal and not strict equal operators behave like the equal and not equal operators except that they don’t convert the operand before comparison.

See the following example:

console.log("10" == 10); // true
console.log("10" === 10); // false

In the first comparison, since we use the equality operator, JavaScript converts the string into a number and performs the comparison.

However, in the second comparison, we use the strict equal operator (===), JavaScript doesn’t convert the string before comparison, therefore the result is false.

https://www.geeksforgeeks.org/javascript/javascript-operators/
https://www.javascripttutorial.net/javascript-unary-operators/

Data Types in JavaScript

Dhanush P — Tue, 02 Jun 2026 13:42:58 +0000

JavaScript Data Types

JavaScript data types define what kind of values a variable can hold and how those values behave in a program.
They determine how data is stored in memory and how operations like comparison, calculation, and conversion work.

Primitive Data Type

Primitive data types in JavaScript represent simple, immutable values stored directly in memory, ensuring efficiency in both memory usage and performance.

1.Number

The Number data type in JavaScript includes both integers and floating-point numbers. Special values like Infinity, -Infinity, and NaN represent infinite values and computational errors, respectively.

let n1 = 2;
console.log(n1)     // 2

let n2 = 1.3;
console.log(n2)      // 1.3

let n3 = -Infinity;   
console.log(n3)     // -Infinity

let n4 = 'something here too' / 2;
console.log(n4)     // NaN

2.String

A String in JavaScript is a series of characters that are surrounded by quotes. There are three types of quotes in JavaScript, which are.

let s1 = "Hello There";
console.log(s1);    // Hello There

let s2 = 'Single quotes work fine';
console.log(s2);     // Single quotes work fine 

let s3 = `can embed ${s1}`;  
console.log(s3);    // can embed Hello There

3.Boolean

The boolean type has only two values i.e. true and false.

let b1 = true;
console.log(b1);  // true

let b2 = false;
console.log(b2);  // false

4.Null

The special null value does not belong to any of the default data types. It forms a separate type of its own which contains only the null value.

let age = null;
console.log(age)  // error
// TypeError: can't access property "stack", exception is null

The 'null' data type defines a special value that represents nothing, or empty value.

5.Undefined

A variable that has been declared but not initialized with a value is automatically assigned the undefined value. It means the variable exists, but it has no value assigned to it.

let a;
console.log(a); 
// TypeError: can't access property "stack", exception is undefined

6.Symbol (Introduced in ES6)

Symbols, introduced in ES6, are unique and immutable primitive values used as identifiers for object properties. They help create unique keys in objects, preventing conflicts with other properties.

let s1 = Symbol("Geeks");
let s2 = Symbol("Geeks");
let s3 = s1;
console.log(s1 == s2);  // false
console.log(s1 == s3);  // true

7. BigInt (Introduced in ES2020)

BigInt is a built-in object that provides a way to represent whole numbers greater than 253. The largest number that JavaScript can reliably represent with the Number primitive is 253, which is represented by the MAX_SAFE_INTEGER constant.

let b = BigInt("123456789345678");
console.log(b);   // 123456789345678

Non-Primitive Data Types

The data types that are derived from primitive data types are known as non-primitive data types. It is also known as derived data types or reference data types.

1.Object

JavaScript objects are key-value pairs used to store data, created with {} or the new keyword. They are fundamental as nearly everything in JavaScript is an object.

let myObj = {
    type: "Zoho",
    location: "Chennai"
}
console.log(myObj.type) // Zoho

2.Arrays

An Array is a special kind of object used to store an ordered collection of values, which can be of any data type.

let a1 = [1, 2, 3, 4, 5];
console.log(a1);

let a2 = [1, "two", { name: "Object" }, [3, 4, 5]];
console.log(a2);

3.Function

A function in JavaScript is a block of reusable code designed to perform a specific task when called.

// Defining a function to greet a user
function greet(name) 
{ 
  return "Hello, " + name + "!"; 
}
// Calling the function
console.log(greet("Ajay"));

4.Date Object

The Date object in JavaScript is used to work with dates and times, allowing for date creation, manipulation, and formatting.


// Creating a current date and time
let currentDate = new Date();

// Displaying the current date and time
console.log(currentDate);  // "2026-06-02T13:25:27.401Z"

https://www.geeksforgeeks.org/javascript/javascript-data-types/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Data_structures

JavaScript Introduction

Dhanush P — Mon, 01 Jun 2026 08:03:45 +0000

Introduction

JavaScript is a programming language used to create dynamic content for websites.
It's an interpreted language that executes code line by line.
JavaScript is a lightweight, cross-platform[TBD], object-oriented scripting language used to make webpages interactive.

History of JavaScript

In May 1995, Brendan Eich created JavaScript, a programming language, in just 10 days.
In 1995 Netscape Communications Corporation needed a way to make web pages more interactive and dynamic.
Brendan Eich was hired by Netscape to develop a new scripting language for this purpose.
The language was initially called Mocha and later changed to LiveScript.
In December 1995, LiveScript was renamed JavaScript, partly to capitalize on the growing popularity of the programming language Java.

Variables in JavaScript

A variable is like a container that holds data that can be reused or updated later in the program.
Variables are used to store and manage data in a program.

Variables: Declared using the keywords var, let, or const.

1. var Keyword

The var keyword is used to declare a variable.
It has a function-scoped[TBD] or globally-scoped behaviour.

Syntax: var variable = value;

Note: It allows it to be re-declared or updated within its scope.

Example:

var num = 5;
console.log(num);

var num = 20; // reassigning is allowed
console.log(num);

2. let Keyword

The let keyword is a modern way to declare variables in JavaScript.
It was introduced in ECMAScript 6 (ES6)[TBD].
Unlike var, let provides block-level scope and cannot be re-declared in the same scope.

Syntax: let variable = value;

Example:

let  age = 22;
age = 29; // Value can be updated
// let age = 15; //can not re-declare
console.log(age)

3. const Keyword

It is used to declare variables as constant.
That const variables cannot be reassigned.

Syntax: let variable = value;

Example:

const pi = 3.14;
// pi = 3.20; This will throw an error
console.log(pi)

Overview of Recent Versions

ECMAScript 2025 (ES16): The current stable standard approved in June 2025. It introduces native set operations like .intersection(), .union(), and .difference().
ECMAScript 2024 (ES15): Released in 2024. It brought data grouping tools like Object.groupBy() and Map.groupBy().
ECMAScript 2023 (ES14): Released in 2023. It introduced new array manipulation capabilities like .findLast() and .toReversed().

Note: ECMAScript (ES) is the official, standardized specification for the JavaScript programming language.

What is a Compiler?

The Compiler is a translator that takes input i.e., High-Level Language, and produces an output of low-level language i.e. machine or assembly language.
The work of a Compiler is to transform the codes written in the programming language into machine code (format of 0s and 1s) so that computers can understand.

What is an Interpreter?

An Interpreter is a program that translates a programming language into a comprehensible[TBD] language.
The interpreter converts high-level language to an intermediate language[TBD].

It translates only one statement of the program at a time.
Interpreters, more often than not are smaller than compilers.

References:

https://www.geeksforgeeks.org/javascript/javascript-tutorial/
https://www.w3schools.com/js/js_intro.asp

CSS Media Query (@media)

Dhanush P — Wed, 27 May 2026 13:35:13 +0000

CSS Media Query

It is used to apply different styles based on the device's characteristics like screen size, orientation, or resolution.
This makes your website responsive, ensuring it looks good on all devices, including desktops, tablets, and smartphones.
It allow you to apply CSS styles depending on a device's media type (such as print vs. screen)

How Do Media Queries Work?

A media query consists of a media type (like screen, print) and conditions (like screen width or orientation).
If the conditions are true, the specified styles will be applied.
You use the @media rule in your CSS to define these conditions.

Syntax

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Common Breakpoints

Device Type       Screen Size Range
Mobile Devices          320px - 480px
Tablets/iPads           480px - 768px
Laptops/Small Screens   768px - 1024px
Desktops/Large Screens  1024px - 1200px
Extra-large Devices    1200px and above

Media Types
all: It is the default media type. It is used for all media type devices.
print: It is used for printer devices.
screen: It is used for computer screens, mobile screens, etc.
speech: It is used for screen readers that read the page.[TBD]

Note : The media-type is optional. However, if you use not, you must also specify a media-type.

Logical Operators

The logical operators not, and, only, and or can be used to compose a complex media query.
You can also combine multiple media queries into a single rule by separating them with commas.

and

It requiring each chained media feature to return true for the query to be true.

@media screen and (min-width: 480px) and (max-width: 768px) {
  body {
    background-color: lightgreen;
  }
}

not

Used to negate a media query, returning true if the query would otherwise return false.

only [TBD]

Applies a style only if an entire query matches.
It is useful for preventing older browsers from applying selected styles.

or
If any of the queries in a list is true, the entire media statement returns true.

,(comma)

Commas are used to combine multiple media queries into a single rule.
Equivalent to the or operator.

@media screen, print {
  body {
    line-height: 1.2;
  }
}

Media Features

There are many media features available to test for specific characteristics.
Some examples.

width | min-width | max-width

It can be used to test the width of the viewport.

/* Exact width */
@media (width: 360px) {
  div {
    color: red;
  }
}

/* Minimum width */
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/* Maximum width */
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}

any-hover

It can be used to test whether any available input mechanism can hover over elements.
Keyword values : none , hover

HTML
<a href="#">Try hovering over me!</a>

CSS
@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

orientation

It can be used to test the orientation of the viewport.
Keyword values : portrait , landscape

HTML
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS
body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

[https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using]
[https://www.geeksforgeeks.org/css/css-media-queries/]

Cascading Style Sheets(CSS)

Dhanush P — Fri, 15 May 2026 17:30:43 +0000

Introduction to CSS

CSS stands for Cascading Style Sheets.
CSS used to describe the presentation of a HTML document.
It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing and positioning.
CSS styles are applied to the HTML element using selectors.

CSS Syntax

CSS syntax consists of a selector and a declaration block.
The selector targets an HTML element, and the declaration block contains property value pairs.

selector {
   property: value;
}

Example:

p {
  color: red;
}

Types of CSS

There are three major ways to apply CSS to web pages: Inline, Internal and External CSS.

1. Inline CSS

It is used to apply CSS styles directly to the HTML tags by using the “style” attribute.
The style attribute is a global attribute that can be used with all HTML tags.
Inline CSS is used to apply a unique style to a single HTML element.

Example: Using Inline Style to Apply CSS
<p style="color: red; font-size: 18px;">This is a red paragraph.</p>

2. Internal CSS

It uses the <style> tag, placed under the <head> section, and all the CSS properties are written under the <style> tag.
It is used to define a style for a single HTML page.
This styles affects all matching elements in that document.

Example: Using Internal Style to Apply CSS

<!DOCTYPE html>
<html>
<head>
    <title>Internal Style</title>
    <style>
        body {
           background-color: lightblue;
        }
        h1 {
           font-size: 40px;
           color: navy;
           text-align: center;
        }
    </style>
</head>
<body>
    <h1>Example for Internal Style Sheet</h1>
</body>
</html>

3. External CSS

External CSS is written in a separate file, which is saved with a .css extension, and linked to the HTML file by using the <link> tag in the <head> section.
CSS file must not contain any HTML code.

Example: Use External Style to Apply CSS
// index.html

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Example for External Style Sheet</h1>
</body>
</html>

// style.css

body {
  background-color: lightcoral;
}
h1 {
  font-size: 50px;
  text-align: center;
}

What is Selectors?

Selectors are used to target the HTML elements on our web pages that we want to style.
Used to select HTML elements based on tag name, class, id, or attributes.
It helps apply styles like color, font, spacing, and layout.

Selector Types(Basic)
1.Element selector h1, p, body
2.Class Selector .class-name
3.Id selector #id-name
4.Global selector * (apply this for entire website)

CSS Properties:

border: 2px solid blue; - Allows you to define an outline around an HTML element.
margin: 5px; - Used to create space outside of element's border.
padding: 5px; - Used to create space inside of element's border.
text-align: center; - Specifies the horizontal alignment of text in an element.
text-decoration: none; - Specifies the decoration added to text.
border-radius: 10px; - Defines the radius of the element's corners.
display: grid; - How an element is displayed on a webpage.
grid-template-columns: 1fr 2fr; - Defines the number and size of columns in a grid layout.
justify-content: space-around; Aligns the flexible container's items

Day 1: HTML Learning

Dhanush P — Tue, 12 May 2026 10:21:38 +0000

HTML

HTML stands for Hypertext Markup Language.
It is used to create structure and layout of web pages.
It defines basic structure of web pages and contains meta-data about the page.
It uses predefined tags such as <body>, <table>, <form> etc.
It consist of a series of elements.
We can save html files using two ways. file extension .html or .htm

<!DOCTYPE html>
<html>
     <head>
        <title>HTML Learning</title>
     </head>
     <body>
        <h1>Heading 1</h1>
        <p>Html stands for hypertext markup language</p>
     </body>
</html>

META-DATA

Metadata means data about data.
It is data that provides information about other data, offering context and meaning to raw information.

Examples: For a photograph, metadata includes camera settings, date/time taken, GPS location, and file format. For a document, it includes author, creation date, and document type.

ELEMENT

Each element requires starting tag and ending tag with content inside it. Example: <h2>This is example for element</h2>

MARKUP LANGUAGE

A markup language is a system of annotating a document to describe its structure and presentation.
Markup languages are used to structure, format, or define relationships between different parts of text documents with the help of tags inserted in the document.
It uses tags or codes to define elements such as headings, paragraphs, lists, images, links, and more.
More readable than usual programming.
Example: HTML, XML, XHTML, SGML

FILE EXTENSION

A file extension is a suffix at the end of a computer filename.
It usually three or four letters preceded by a dot.
That identifies the file type and indicates which application should open it. Example: .pdf, .txt, .jpg, .java, .html, .css