DEV Community: Bharath kumar

Js in loop

Bharath kumar — Fri, 05 Dec 2025 12:17:18 +0000

Loop:
Loops in JavaScript are used to reduce repetitive tasks by repeatedly executing a block of code as long as a specified condition is true.

1. for Loop

The for loop repeats a block of code a specific number of times. It contains initialization, condition, and increment/decrement in one line.

for (let i = 1; i <= 3; i++) {
    console.log("Count:", i);
}

for in loop:

The for-in loop iterates over the enumerable keys of an object.

const person = { name: "Alice", age: 22, city: "Delhi" };

for (let key in person) {
  console.log(key, ":", person[key]);
}

while:
The while loop executes as long as the condition is true. It can be thought of as a repeating if statement.

let i = 0;
while (i < 3) {
    console.log("Number:", i);
    i++;
}

when the condition is false, the code of the block is not executed.
Do While:
The do...while statement repeats until a specified condition evaluates to false.

do
  statement
while (condition);

for...in statement:

The for...in statement iterates a specified variable over all the enumerable properties of an object. For each distinct property, JavaScript executes the specified statements.
While for...in iterates over property names, for...of iterates over property values:

const arr = [3, 5, 7];
arr.foo = "hello";

for (const i in arr) {
  console.log(i);
}
// "0" "1" "2" "foo"

for (const i of arr) {
  console.log(i);
}
// Logs: 3 5 7

Js break and continue statement

Bharath kumar — Wed, 03 Dec 2025 11:02:13 +0000

Break:
In JavaScript, the break statement is a control flow statement used to terminate loops or switch statements prematurely.
Break in Loops:
When break is encountered inside a for, while, or do-while loop, the loop immediately terminates, and program execution continues with the statement following the loop.
JavaScript

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    console.log("Breaking the loop at i = 5");
    break; // Exits the loop
  }
  console.log(i);
}
// Output:
// 0
// 1
// 2
// 3
// 4
// Breaking the loop at i = 5

break in switch Statements:
Within a switch statement, break is used to exit the switch block after a matching case is executed. Without break, execution would "fall through" to subsequent case blocks.
JavaScript

let day = "Monday";
switch (day) {
  case "Monday":
    console.log("It's the start of the week.");
    break; // Exits the switch
  case "Tuesday":
    console.log("Another day of work.");
    break;
  default:
    console.log("Some other day.");
}
// Output:
// It's the start of the week.

break with Labels:
break can also be used with a label to exit a specific labeled statement, particularly useful for breaking out of nested loops.
JavaScript

outerLoop: for (let i = 0; i < 3; i++) {
  innerLoop: for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      console.log("Breaking out of outerLoop");
      break outerLoop; // Exits both innerLoop and outerLoop
    }
    console.log(`i: ${i}, j: ${j}`);
  }
}
// Output:
// i: 0, j: 0
// i: 0, j: 1
// i: 0, j: 2
// i: 1, j: 0
// Breaking out of outerLoop

Continue:
The continue statement skips the current iteration in a loop.

The remaining code in the iteration is skipped and processing moves to the next iteration.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue; // Skip the iteration when i is 3
  }
  console.log(i);
}
// Output:
// 1
// 2
// 4
// 5

break the current iteration if condition is true the output is displayed before you see

conditional Statements in Js

Bharath kumar — Sun, 30 Nov 2025 13:04:07 +0000

Conditional Statements allow us to perform different actions for different conditions.


    if
    if...else
    if...else if...else
    switch
    ternary (? :)

If:
Use if to specify a code block to be executed, if a specified condition is true.

if(conditon)
{
   //executed the code block
}

The else Statement:

Use else to specify a code block to be executed, if the same condition is false.
Syntax

if (condition) {
  // code to execute if the condition is true
} else {
  // code to execute if the condition is false
}

The else if Statement:

Use else if to specify a new condition to test, if the first condition is false.
Syntax:

if (condition1) {
  // code to execute if condition1 is true
} 
else if (condition2) {
  // code to execute if the condition1 is false and condition2 is true
} 
else {
  // code to execute if the condition1 is false and condition2 is false
}

The switch Statement:
switch executes the code blocks that matches an expression.

switch is often used as a more readable alternative to many if...else if...else statements, especially when dealing with multiple possible values.if break is not here in the every case they continue the next case is printed and after the break is executed the block code

Syntax

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

Ternary Operator (? :)

Use (? :) (ternary) as a shorthand for if...else.
Example

condition ? expression1 : expression2

Operators in Js

Bharath kumar — Sun, 30 Nov 2025 08:25:35 +0000

operations:
An operator is a symbol or keyword in programming that performs a specific mathematical or logical operation on one or more values called operands.
types of operators:
Arithmetic Operators:
Perform mathematical calculations.

+ (Addition)  
- (Subtraction) 
* (Multiplication)
/ (Division)
% (Modulus - returns the remainder of a division)
** (Exponentiation)
++ (Increment - increases value by 1)
-- (Decrement - decreases value by 1)

Assignment Operators:
Assign values to variables.

= (Simple assignment)
+= (Add and assign)
-= (Subtract and assign)
*= (Multiply and assign)
/= (Divide and assign)
%= (Modulus and assign)
**= (Exponentiation and assign)

Comparison Operators:
Compare two values and return a boolean (true or false) result.

== (Loose equality - compares values after type coercion)
=== (Strict equality - compares values and types)
!= (Loose inequality)
!== (Strict inequality)
> (Greater than)
< (Less than)
>= (Greater than or equal to)
<= (Less than or equal to)

Logical Operators:
Combine or manipulate boolean values.

&& (Logical AND)
|| (Logical OR)
! (Logical NOT)

Bitwise Operators:
Perform operations on the binary representation of numbers.

& (Bitwise AND)
| (Bitwise OR)
^ (Bitwise XOR)
~ (Bitwise NOT)
<< (Left shift)
>> (Sign-propagating right shift)
>>> (Zero-fill right shift)

Ternary (Conditional) Operator:
A shorthand for an if-else statement.

condition ? expressionIfTrue : expressionIfFalse

Unary Operators:
Operate on a single operand. Examples include typeof, delete, void, + (unary plus), - (unary negation).
String Operators:
Primarily the + operator for string concatenation.
Type Operators:

typeof: Returns the data type of an operand as a string.
instanceof: Checks if an object is an instance of a particular class or constructor function.

Javascript

Bharath kumar — Sun, 30 Nov 2025 06:54:04 +0000

what is javascipt ?
Javascript is a interpreted scripting dynamically typed object programming language.It is used to behaviour of web pages.It can calculate,manipulate and validate data.supports mutliple paradigm such as imperative,functional and object oriented. the scripting language for Web pages.
object-oriented scripting language used to make webpages interactive (e.g., having complex animations, clickable buttons, popup menus, etc.).

Interperted:
Means translate the source code to machine code.
Dynamical:
It is automatically find the what type of data in run time of execution the program.
scripting:
It is describe the line by line read the program code and execution.
object oriented:
Object-oriented (OO) is
a programming model that structures software around data, or "objects," instead of functions and logic.Objects combine data (properties) and the methods (functions) that operate on that data.

variables declaration:
there are three types:
var,let,const
Variables in JavaScript are named containers for data.
let:
Declares a block-scoped variable that can be reassigned.

let age = 30;
age = 31; // This is allowed

const:
Declares a block-scoped variable whose value cannot be reassigned after it's initialized.

const pi = 3.14;

var:
An older way to declare a variable. It is function-scoped or globally-scoped and can be redeclared and reassigned.

var count = 5;
var count = 10; // This is allowed

Rules for identifiers of varaiables:
Valid characters: Can contain letters, numbers, underscores (_), and dollar signs ($). Numbers are not allowed as the first character.
Case-sensitive: myVariable is different from myvariable.
Cannot be reserved words: You cannot use JavaScript's keywords (like if, for, function) as variable names.

Data types:

1. Number:Represents numeric values (integers and decimals).
let n = 42;
2. String: Represents text enclosed in single or double quotes.
let s = "Hello, World!";
3. Boolean: Represents a logical value (true or false).
let bool= true;
4. Undefined: A variable that has been declared but not assigned a value.
let notAssigned;
console.log(notAssigned);

Output:

undefined

5. Null: Represents an intentional absence of any value.

let empty = null;

6. Symbol: Represents unique and immutable values, often used as object keys.

let sym = Symbol('unique');

7. BigInt: Represents integers larger than Number.MAX_SAFE_INTEGER.

let bigNumber = 123456789012345678901234567890n;

Non-Primitive Datatypes

Non-primitive types are objects and can store collections of data or more complex entities.

1. Object: Represents key-value pairs.

let obj = {
name: "Amit",
age: 25
};

2. Array: Represents an ordered list of values.

let a = ["red", "green", "blue"];

3. Function: Represents reusable blocks of code.

function fun() {
console.log("GeeksforGeeks");
}

Exploring JavaScript Datatypes and Variables: Understanding Common Expressions

console.log(null === undefined)

Expression: null === undefined
Result: false

React

Bharath kumar — Sat, 29 Nov 2025 12:59:52 +0000

React:
React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable components.
components:
React applications are built from isolated pieces of UI called components. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page.
React Component:

Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup.

useState in React Hook

Bharath kumar — Fri, 28 Nov 2025 14:58:30 +0000

updating the screen:
first you import the useState

import { useState } from 'react';

your component to “remember” some information and display it.
declare a state variable inside your component:

function MyButton() {
  const [count, setCount] = useState(0);

initial state of count is 0 if you change the state use setCount

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

when you click the button the current state is updated using the setCount is increased.
If you render the same component multiple times, each will get its own state.

Hook:
Functions starting with use are called Hooks.useState is a built-in Hook provided by React.

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

the button is clicked upadted the state count together.use the information pass down this is called props.

useState in React Hook

Bharath kumar — Fri, 28 Nov 2025 12:09:34 +0000

updating the screen:
first you import the useState

import { useState } from 'react';

your component to “remember” some information and display it.
declare a state variable inside your component:

function MyButton() {
  const [count, setCount] = useState(0);

initial state of count is 0 if you change the state use setCount

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

when you click the button the current state is updated using the setCount is increased.
If you render the same component multiple times, each will get its own state.

Hook:
Functions starting with use are called Hooks.useState is a built-in Hook provided by React.

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

the button is clicked upadted the state count together.use the information pass down this is called props.

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

count and onclick is a props of parents component
it is pass the button.
The new count value is passed as a prop to each button, so they all show the new value. This is called “lifting state up”

React

Bharath kumar — Fri, 28 Nov 2025 11:42:24 +0000

what is react ?
React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
React components are JavaScript functions that return markup:

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

MyButton, you can nest it into another component:

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

starts with a capital letter.

The export default keywords specify the main component in the file.Its export into another jsx file and then imported to another the component.

JSX is stricter than HTML. You have to close tags like
.You have to wrap them into a shared parent, like a

... or an empty <>...</> wrapper:

Adding styles :

<img className="avatar" />

you can use the same like as css class and adding style same way using .avatar {}.

Displaying data:

  return (
  <h1>
    {user.name}
  </h1>
);

You can also “escape into JavaScript” from JSX attributes, but you have to use curly braces instead of quotes.

How to install react

Bharath kumar — Tue, 18 Nov 2025 15:51:19 +0000

✅ Step 1: Install Node.js & npm

React requires Node + npm.
open terminal in linux
enter the code :


sudo apt install nodejs

after installation complited and next enter the code:


sudo apt install npm

check version node -v and npm -v
✅ Step 2: Install React using Vite (Recommended – Fast & Modern)

Install Vite tool

npm create vite@latest my-react-app

When asked:

Select React

Select JavaScript

Open the project

cd my-react-app

Install dependencies

npm install

Run the project

npm run dev

Now open the browser and go to:

http://localhost:5173

🎉 React app is running!

Header vs head tag

Bharath kumar — Mon, 29 Sep 2025 11:46:15 +0000

Head:
The

<head>

HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets. There can be only one

element in an HTML document.

Header:
The

<header>

HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

Reference:https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header

Html

Bharath kumar — Fri, 19 Sep 2025 15:42:55 +0000

What is html ?

HyperText Markup Language
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.
"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web.
HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as

<head>, <title>, <body>, <header>

and many others.

An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by < and >. The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the
tag can be written as , .
HTML is a markup language consisting of a series of elements used to wrap (or enclose) text content to define its structure and cause it to behave in a certain way.

This simple writing text in text editor

Instructions for life:
Eat
Sleep
Repeat

If we wrap this content with the following HTML elements, we can turn that single line into a paragraph

(<p>)

and three bullet points

 (<li>)

Used this element...

<p>Instructions for life:</p>

<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Repeat</li>
</ul>

Output is :

Instructions for life:

Eat
Sleep
Repeat

Reference:https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content