DEV Community: Megalraja

JavaScript Loops: why we use them - the first 3 types

Megalraja — Fri, 02 Oct 2026 06:16:47 +0000

while learning javascript I came across loops

but before learning different types of loops, I want understand one question - why do we use loops?

Why do we use loops?

Loops allow us to repeat a block of code without rewrite same code again and again.

For example , without loop:

 console.log(1);
 console.log(2);
 console.log(3);
 console.log(4);
 console.log(5);

with loop:

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

The loop becomes especially useful when working with large amounts of data, such as arrays.

Types of loop:

1.for loop:
A for loop is useful when you know how many times you want to repeat something.

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

2.while loop:

A while loop checks the condition before executing the code.

let i = 1;

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

If the condition is false from the beginning, the loop won't execute.

3. do...while Loop

A do...while loop executes the code first and checks the condition afterward.

let i = 1;

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

This means it will execute at least once.

Quick way to remember

for - repeat with initialization, condition & update
while - check → execute
do...while - execute → check

The key difference:

while can execute zero times, but do...while executes at least once.

CRUD Operations with JavaScript Objects

Megalraja — Wed, 30 Sep 2026 14:57:57 +0000

While learning JavaScript objects, I practiced a simple concept that appears everywhere in software development: CRUD.

CRUD stands for:

Create → Add data
Read → Access data
Update → Change data
Delete → Remove data

Let's use a vehicle object as an example.

const vehicle = {
    model: "KTM 350",
    price: 200000,
    fuelType: "Fuel",
    cc: 350,
    drive: function() { 
    console.log("Speed: 150 km/h"); 
    } 
};

1.Create

Add a new property:

vehicle.gear = 6;

2.Read

Access existing data:

console.log(vehicle.model);
console.log(vehicle.price);

We can also call a method:

vehicle.drive();

3.Update

Change an existing value:

vehicle.price = 210000;

4.Delete

Remove a property:Use delete key word

delete vehicle.cc;

Now the cc property no longer exists.

The basic idea

Create → vehicle.gear = 6
Read → vehicle.model
Update → vehicle.price = 210000
Delete → delete vehicle.cc

This simple example helped me understand that CRUD isn't only related to databases or APIs.

The same four operations can be practiced directly with JavaScript objects.

I'm building my JavaScript fundamentals one concept at a time.

JavaScript: Object Creation & Constructor Functions

Megalraja — Tue, 29 Sep 2026 14:56:05 +0000

While learning JavaScript, I explored how objects can be created and reused.

The simplest way is an object literal:

const laptop = {
    brand: "HP",
    model: "H15",
    price: 45000
};

But when we need multiple objects with the same structure, a constructor function is useful:

function Laptop(brand, model, price) {
    this.brand = brand;
    this.model = model;
    this.price = price;
}

const laptop1 = new Laptop("HP", "H15", 45000);
const laptop2 = new Laptop("MSI", "MSI15", 55000);

Here, new creates a new object, and this refers to that newly created object.

Simple idea:

Constructor → Structure
new → Creates object
this → Sets object properties

A small concept, but an important foundation for understanding JavaScript objects.

JavaScript Parameters, Arguments, Default & Rest Parameters

Megalraja — Sun, 27 Sep 2026 16:01:11 +0000

When I started learning JavaScript functions, I kept mixing up parameters and arguments. Then I came across default and rest parameters.

Here’s how I understand them now.

1. Parameters

Parameters are the variables we define when creating a function.

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

Here, name is a parameter.

2. Arguments

Arguments are the actual values we pass when calling the function.

plaintext

greet("John");

Here, "John" is the argument.

Parameter → placeholder
Argument → actual value

3. Default Parameters

We can give a parameter a default value.


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

greet();

Output:

Hello John

If we provide a value, the default value isn't used:

greet("David");

Output:

Hello David

4. Rest Parameters

What if we don't know how many arguments will be passed?

We can use ... to collect them.

function add(...numbers) {
    return numbers.reduce((sum, num) => sum + num, 0);
}

console.log(add(10, 20, 30));

Output:

60

The ...numbers collects the arguments into an array.

Quick way to remember

Parameter → variable in the function
Argument → value passed to the function
Default → fallback value
Rest → collects multiple arguments

Understanding these four concepts made JavaScript functions much clearer for me.

At first, parameters, arguments, default parameters, and rest parameters looked like separate confusing topics. But once I understood how they work together, functions started making much more sense.

Still learning, still practicing, and slowly building my JavaScript fundamentals one concept at a time.

What JavaScript concept confused you when you first started?

JavaScript Arrow Functions

Megalraja — Sat, 26 Sep 2026 14:30:17 +0000

Today I learned about arrow functions in JavaScript.

An arrow function is a shorter way to write a function.

Normal function

function add(a, b) {
    return a + b;
}

Arrow function

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

Here:

const add → stores the function
(a, b) → parameters
=> → arrow function syntax
a + b → returned result

Example:

console.log(add(10, 20));

Output:

30

The shorter syntax makes simple functions easier to write and read.

JavaScript Functions Explained: The Basics I Finally Understood

Megalraja — Fri, 25 Sep 2026 05:56:32 +0000

While learning JavaScript, I recently started understanding functions.

A function is a reusable block of code that performs a specific task.

Basic Function

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

greet();

Output:

Hello John!

We can also pass values using parameters:

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

greet("John");

Here, name is the parameter, and "John" is the argument.

Returning a Value

Functions can return a value using return:

function add(a, b) {
    return a + b;
}

let result = add(10, 20);

console.log(result);

Output:

Arrow Function

JavaScript also provides a shorter syntax:

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

The main thing I learned:

Functions help us write reusable, organized, and less repetitive code.

I'm continuing my JavaScript fundamentals step by step.

JavaScript Primitive Data Types Explained for Beginners

Megalraja — Thu, 24 Sep 2026 14:37:56 +0000

While learning JavaScript, one of the first concepts I wanted to understand properly was data types.

JavaScript has several data types, but they can be divided into two main categories:

Primitive data types
Non-primitive data types

In this post, I'm focusing only on primitive data types.

What is a Primitive Data Type?

A primitive data type represents a single, simple value.

JavaScript has 7 primitive data types:

String
Number
BigInt
Boolean
Undefined
Null
Symbol

Let's understand each one.

1. String

A String is used to store text.

let name = "John";
let city = "Chennai";

Strings can use:

"Double quotes"
'Single quotes'
Backticks

Example:

let message = "Hello John";

console.log(message);

Output:

Hello John

Check the type:

console.log(typeof message);

Output:

string
2. Number

The Number type is used for numbers, including integers and decimal values.

let age = 25;
let price = 99.99;
let temperature = -10;

All of these are number.

console.log(typeof age);

Output:

number

JavaScript doesn't have separate int and float types like some other programming languages.

3. BigInt

BigInt is used for very large integers that cannot be safely represented by the normal Number type.

Example:

let bigNumber = 123456789012345678901234567890n;

Notice the n at the end.

console.log(typeof bigNumber);

Output:

bigint

You can think of it as:

Number → normal-sized numbers
BigInt → very large integers

*4. Boolean *

A Boolean can have only two values:

true
false

Example:

`let isLoggedIn = true;
let isAdmin = false;

Booleans are commonly used with conditions.

if (isLoggedIn) {
console.log("Welcome John!");
}

Output:

Welcome John!`

5. Undefined

undefined usually means a variable has been declared but hasn't been given a value.

let username;

console.log(username);

Output:

undefined

Example:

let age;

console.log(typeof age);

Output:

undefined

So a simple way to remember it is:

Declared but no value → undefined

6. Null

null represents an intentional absence of a value.

Example:

let selectedUser = null;

Here, we are intentionally saying that there is currently no selected user.

One interesting JavaScript behavior is:

console.log(typeof null);

Output:

object

This is a well-known historical quirk of JavaScript.

Even though typeof null returns "object", null is considered a primitive value.

7. Symbol

Symbol is used to create unique values.

Example:

let id1 = Symbol("id");
let id2 = Symbol("id");

console.log(id1 === id2);

Output:

false

Even though both symbols have the same description, they are different unique values.

Symbols are mainly useful when unique identifiers are needed.

*Quick Cheat Sheet *
Primitive Type Example
String "John"
Number 25
BigInt 123n
Boolean true
Undefined undefined
Null null
Symbol Symbol("id")
One Important Thing

These 7 types are primitive data types in JavaScript:

String
Number
BigInt
Boolean
Undefined
Null
Symbol

Understanding these basics makes it easier to learn the next JavaScript concepts, such as:

Variables
Operators
Type conversion
Conditions
Functions
Arrays
Objects

I'm learning JavaScript step by step, and understanding the basics properly is helping me build a stronger foundation.

What's the JavaScript data type you found confusing at first?

javascript #webdevelopment #programming #frontend #coding #beginners #learningtocode

CSS Position Explained: Static, Relative, Absolute, Fixed & Sticky.

Megalraja — Wed, 23 Sep 2026 14:15:08 +0000

When I started learning CSS, position was one of those properties that looked simple but was actually confusing.

I knew there were values like relative, absolute, fixed, and sticky, but I wasn't really sure when to use each one.

So I decided to understand them with simple examples.

What is the CSS position property?

The position property controls how an element is positioned on a webpage.

The most commonly used values are:

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

Let's understand them one by one.

1. position: static

static is the default position of an element.


.box {
  position: static;
}

The element stays in the normal document flow.

For example:

Hello

With static, properties like:

top
right
bottom
left

don't move the element.

So this won't have the expected positioning effect:

.box {
  position: static;
  top: 50px;
}

The element remains in its normal position.

Think: static = normal/default positioning.

2. position: relative

relative keeps the element in the normal document flow, but now we can move it using:

top
right
bottom
left

Example:

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

The box moves 20px down and 30px to the right from its original position.

One important thing:

The element's original space is still preserved.

So other elements don't act as if the box completely disappeared from its original position.

Think: relative = normal position + ability to move.

3. position: absolute

This one is a little different.

An absolutely positioned element is removed from the normal document flow.


.box {
  position: absolute;
  top: 20px;
  right: 20px;
}

The element is positioned relative to its nearest positioned ancestor.

Usually, we create a parent with:

.parent {
  position: relative;
}

and then position the child:

.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

For example:

<div class="parent">
  <div class="child">Hello</div>
</div>
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

This pattern is very common.

For example, you might use it for:

Notification badges
Icons inside input boxes
Text over images
Dropdown menus
Buttons positioned inside cards

Think: absolute = remove from normal flow and position precisely.

4. position: fixed

fixed positions an element relative to the viewport.

For example:

.button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

The button stays in the same place even when you scroll.

This is useful for things like:

Floating buttons
Chat buttons
Back-to-top buttons
Fixed navigation bars

Example:


<button class="top-button">↑</button>
.top-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Now the button remains visible while scrolling.

Think: fixed = fixed to the viewport.

5. position: sticky

sticky is probably the most interesting one.

It behaves like a normal element initially, but when you scroll to a specified position, it sticks there.

Example:


header {
  position: sticky;
  top: 0;
}

The header behaves normally until it reaches the top of the viewport.

Then it sticks there while scrolling.

This is commonly used for:

Sticky navigation bars
Table headers
Section headings
Sidebar elements

Think: sticky = normal until scrolling reaches the specified position.

The basic idea is:

static → normal
relative → move from normal position
absolute → precise positioning
fixed → attached to viewport
sticky → sticks while scrolling

CSS Grid Areas — A Simple Way to Build Layouts

Megalraja — Mon, 21 Sep 2026 15:34:06 +0000

When I started learning CSS Grid, I found grid-template-areas really interesting because it lets us name different parts of a layout.

Instead of thinking only in rows and columns, we can give each section a name.

Example

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

The layout looks something like:

┌───────────────┐
│    HEADER     │
├──────┬────────┤
│ SIDE │  MAIN  │
│ BAR  │        │
├──────┴────────┤
│    FOOTER     │
└───────────────┘

Why I like Grid Areas

It makes the CSS easier to read and understand.

For example:

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

You can almost understand the page layout just by looking at it.

As a beginner, I think Grid Areas is one of the easiest ways to understand CSS Grid layouts.

GPT-6 Astra Made Me Think About My Developer Journey

Megalraja — Sun, 13 Sep 2026 14:31:01 +0000

I’m still a beginner in software development.

I’m learning HTML, CSS, JavaScript, Git, and slowly trying to build real projects.

Then I see something like** GPT-6 Astra **being introduced.

And honestly, my first thought was:

“If AI can write code this well, what should I be learning?”

But after thinking about it, I realized something.

I’m not learning to code just to type code faster.
I’m learning to understand how software works.

AI can generate code.
But I still need to know:

Why does this code work?
Why did it fail?
How do I debug it?
Is the solution actually good?
How can I change it when my requirements are different?

As a student, I think that's where the real learning happens.

Maybe AI will change the way we become developers.

But for now, I want to keep doing the simple things:

Learn → Practice → Build → Break → Fix → Repeat.

I don't know where AI will take software development.

But I know one thing:

I want to be ready for it.

devjourney #studentdeveloper #begindeveloper #coding #ai #gpt6 #webdevelopment #learningtocode

What Actually Happens When You Type a URL in Your Browser?

Megalraja — Sat, 12 Sep 2026 11:05:45 +0000

Have you ever wondered what happens after you type something like:

https://dev.to

and press Enter?

It looks instant.

But behind that one click, your browser performs several steps before showing you the webpage.

Let’s break it down.

1. You Enter a URL

You type:

https://dev.to

A URL contains different parts:

https://dev.to/article
│       │      │
│       │      └── Path
│       └───────── Domain
└───────────────── Protocol

The browser first understands what resource you're trying to access.

2. DNS Finds the Server

Computers communicate using IP addresses, not domain names.

For example:

dev.to

needs to be translated into an IP address.

That's where DNS (Domain Name System) comes in.

You can think of DNS like the internet's phonebook:

dev.to
   ↓
DNS
   ↓
IP address

The browser can now find the server hosting the website.

3. The Browser Connects to the Server

Now the browser needs to communicate with that server.

For an HTTPS website, the connection is secured using TLS.

Simplified:

Browser
   ↓
Secure connection
   ↓
Web Server

This helps protect the data exchanged between your browser and the website.

4. The Browser Sends an HTTP Request

The browser sends a request to the server.

Something like:

GET / HTTP/1.1
Host: dev.to

Basically, it's saying:

“Hey server, give me this webpage.”

5. The Server Sends a Response

The server processes the request and sends data back.

For example:

HTTP/1.1 200 OK
Content-Type: text/html

Then the response contains HTML, CSS, JavaScript, images, and other resources.

6. The Browser Builds the Page

Now the interesting part happens.

The browser takes the HTML and creates the DOM (Document Object Model).

Then it processes CSS to determine how everything should look.

JavaScript can also modify the page and make it interactive.

A simplified flow:

HTML
 ↓
DOM

CSS
 ↓
Styles

JavaScript
 ↓
Interactions

Everything
 ↓
Rendered Page

7. You Finally See the Website

After all of that, your browser displays the webpage.

And all you did was:

Type URL → Press Enter

The Whole Process

Here's the simplified version:

Enter URL
    ↓
Browser understands URL
    ↓
DNS finds IP address
    ↓
Secure connection is established
    ↓
HTTP request
    ↓
Server processes request
    ↓
HTTP response
    ↓
Browser processes HTML/CSS/JS
    ↓
Page appears

Pretty wild when you think about it.

A webpage appearing in a couple of seconds involves DNS, networking, servers, HTTP, security, HTML, CSS, JavaScript, and browser rendering.

Why Should Developers Know This?

You don't need to become a networking expert to build websites.

But understanding this process makes many things easier to understand:

Why websites sometimes load slowly
What DNS errors mean
What HTTP status codes are
How APIs communicate
Why HTTPS matters
How browsers render webpages
Where performance problems can happen

The better you understand what happens under the hood, the easier it becomes to debug problems.

Final Thought

The next time you type a URL and a website magically appears...

Remember:

It wasn't magic.

It was a whole bunch of computers doing their jobs really fast.

webdev #beginners #javascript #html #css #programming

HTML vs CSS vs JavaScript:What Does Each One Do?

Megalraja — Fri, 11 Sep 2026 15:52:14 +0000

When I first started learning web devlopment, I used to see HTML,CSS and javaScript everywhere.

I knew they were all important, but I didn't really understand what each one was resposiple for.
The easiest way to understand them is to think about building a house.

HTML - The structrue
CSS - The apperance
JavaScript - The behavior

Let's break it down

*1. HTML --- The structure *
HTMl (Hypertext Markup Language) defines the structure and content of a webpages.

it tells the browser:
"What element should be on this web page?"

for example:

welcome to my website

This is my first website.

click Me
but it doesn't look particulary fance yet.
HTML is basically the skeleton of the webpage.

2. CSS --- The Appearance
css(cascading Style Sheet) controls how those HTML elements look.

it tells the browser :
"how Should these elements look and where should they be positioned ?"

For example:

h1{
font-size:40px;
}
button{
padding:10px 20px;
border-radius:8px;
}

Now we can change things like:

Colors
Fonts
Sizes
Spacing
Layout
Animations
Responsive design

CSS is basically the clothes and design of the webpage.

3. JavaScript --- The behavior
JavaScript makes Webpage interactive and dynamic

it tells the browser:
"What should happen when the user does something?"

For example:
const button = document.querySelector("button")

button.addEventList("click",() =>{
alert("Hello!");
});

Now something actually happens when user clicks the button.

JavaScript can handle things like:

Button clicks
Form validation
Menus
API requests
Updating webpage content
Animations
Games
Interactive applications

JavaScript is basically the brain of the webpage

One More Important Thing
HTML, CSS, and JavaScript aren't competitors.

They solve different problems.

You don't use JavaScript instead of HTML or CSS.

Instead, they work together:

         WEB PAGE
            │
   ┌────────┼────────┐
   ↓        ↓        ↓
 HTML      CSS    JavaScript

Structure Design Behavior

Once I understood this separation, web development became much easier to understand.

And honestly, you don't need to master everything at once.

Start with HTML → CSS → JavaScript and build small projects along the way.

That's where things start clicking.