DEV Community: Megalraja

JavaScript Truthy and Falsy Values

Megalraja — Tue, 13 Oct 2026 06:08:27 +0000

Ever wondered why some values behave like true and others behave like false in JavaScript, even when they aren't actually booleans?

Let's make it simple!

What are Truthy and Falsy Values?

JavaScript evaluates values as either truthy or falsy when they are used in a Boolean context, such as an if condition.

if ("Hello") {
    console.log("This is truthy!");
}

Output:

This is truthy!

Wait, "Hello" isn't true. So why does the condition execute?

Because non-empty strings are truthy in JavaScript!

Truthy Values

These values behave like true in a condition:

if ("JavaScript") console.log("String is truthy");
if (100) console.log("Number is truthy");
if ([]) console.log("Empty array is truthy");
if ({}) console.log("Empty object is truthy");

Yep! Even an empty array [] and an empty object {} are truthy.

Falsy Values

JavaScript has only a few falsy values:

if (false) console.log("Hello");
if (0) console.log("Hello");
if ("") console.log("Hello");
if (null) console.log("Hello");
if (undefined) console.log("Hello");
if (NaN) console.log("Hello");

Nothing gets printed because every condition is falsy.

Other falsy values include -0 and 0n (BigInt zero).

Let's Test Your Understanding!

What do you think this code prints?

let cart = [];

if (cart) {
    console.log("Cart has items!");
} else {
    console.log("Cart is empty!");
}

Answer: Cart has items!

Why? Because an empty array is truthy, even though it contains no elements.

If you want to check whether the cart actually has items, use:

if (cart.length > 0) {
    console.log("Cart has items!");
} else {
    console.log("Cart is empty!");
}

Remember This

Truthy → Behaves like true in a condition.
[] and {} → Truthy!

Falsy → Behaves like false in a condition.
0, "", null, undefined, false, and NaN → Falsy!

Understanding truthy and falsy values helps us write cleaner conditions and avoid unexpected bugs.

Your turn!

What will this print?

console.log(Boolean("0"));
console.log(Boolean("false"));
console.log(Boolean(0));

Drop your answer in the comments before checking it in the console!

Understanding Fetch API and Promises in JavaScript.

Megalraja — Wed, 07 Oct 2026 15:12:26 +0000

Fetch API & Promises — Imagine Ordering Food

Learning fetch() and Promises can feel confusing at first.

So let's forget code for a minute and imagine you're ordering pizza.

You place an order:

fetch("pizza-api.com/order");

You don't get the pizza immediately.

The restaurant says:

"Don't worry, your order is being prepared. I'll let you know when it's ready."

That's basically a Promise.

Promise

A Promise represents something that will have a result in the future.

It can be:

Pending     → Pizza is being prepared
Fulfilled  → Pizza is ready
Rejected   → Sorry, we're out of pizza

`.then()`

When the pizza arrives, you can do something with it:

fetch("pizza-api.com/order")
    .then(response => response.json())
    .then(data => {
        console.log("Pizza arrived!", data);
    });

Think of .then() as:

"When you get the result, do this."

`.catch()`

But what if the restaurant says:

"Sorry, something went wrong with your order."

That's where .catch() comes in:

fetch("pizza-api.com/order")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log("Order failed!", error));

So what's actually happening?

You
 ↓
fetch() 
 ↓
Promise 
 ↓
.then() → "Pizza arrived!" 
 ↓
.catch() → "Something went wrong!"

And there's one more interesting thing:

response.json()

also returns a Promise.

Promise → "Wait, I'll get back to you."

That's why we use another .then() after it.

The easiest way I remember it:

fetch() → Place the order
.then() → "Great! Here's what to do with the result."

.catch() → "Oops, something went wrong."

Once I started thinking about Promises this way, fetch() and asynchronous JavaScript became much less confusing.

Sometimes the best way to learn programming isn't more code — it's finding the right analogy.

Understanding Callback Function in JavaScript

Megalraja — Tue, 06 Oct 2026 05:38:39 +0000

while learning javascript, I came across a concept called a callback funtion.

At first, the name sounds complicated. But the idea is actually pretty simple.

What is a callback function?

A callback function is a function passed into another function as an argument, which can be called later.

for example:

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

function processUser(callback) {
    callback("Alex");
}

processUser(greet);

Here, greet is passed to processUser as an argument.

Inside processUser, we call:

callback("Alex");

So greet() gets executed.

Why do we use Callbacks?

Callbacks are useful when we want one function to run another function after something happens.

or example:

function calculate(a, b, callback) {
    let result = a + b;
    callback(result);
}

calculate(10, 20, function(result) {
    console.log(result);
});

Output:

30

The callback receives the result after the calculation is completed.

Callbacks are especially important in JavaScript because they are commonly used with events, timers, and asynchronous operations.

Simple way to remember
Function → Does the work
Callback → Function passed to another function
callback() → Executes the passed function

JavaScript Arrays — More Than Just a List

Megalraja — Mon, 05 Oct 2026 05:47:13 +0000

When I started learning JavaScript, one thing I kept seeing everywhere was arrays.

But the simple question is: Why do we even need them?

Imagine storing the names of three students:

let student1 = "Arun";
let student2 = "Bala";
let student3 = "Kiran";

This works, but imagine having 100 students.

That's where an array becomes useful:

let students = ["Arun", "Bala", "Kiran"];

Now all the names are stored together, and we can access them using their index:

console.log(students[0]); // Arun
console.log(students[2]); // Kiran

Arrays are Objects in JavaScript

Here's an interesting part:

let numbers = [10, 20, 30];

console.log(typeof numbers);
// "object"

That's because an array is a special type of object in JavaScript.

But arrays are designed specifically for ordered data, which is why we get features like indexes and methods such as push() and pop().

Heterogeneous Data

Another interesting thing about JavaScript arrays is that they can hold different types of values:

let data = [10, "Hello", true, 25.5, null];

This is called a heterogeneous array because different data types can exist in the same array.

We can also easily add or remove elements:

students.push("David"); // Add
students.pop();         // Remove

So, the basic idea is:

Array → Special type of object

Purpose → Store ordered collections of values

Index → Access a particular value

Heterogeneous → Different data types can exist together

push() → Add an element

pop() → Remove an element

Arrays look simple at first, but understanding why they're objects and how they're different from normal objects makes the JavaScript data-type concept much clearer.

What surprised you most about JavaScript arrays?

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