Forem: Suvankarr Dash

JavaScript IIFE (Immediately Invoked Function Expression)

Suvankarr Dash — Fri, 30 Jan 2026 07:31:32 +0000

What Is an IIFE in JavaScript?

An Immediately Invoked Function Expression (IIFE) is a function expression that executes immediately after it’s created. Its primary purpose is to create a private scope so variables don’t leak into the global environment.
Before ES modules and block scope (let / const), IIFEs were one of the most reliable ways to write safe JavaScript.

Basic IIFE Syntax:

Classic IIFE:

code:
(function () {
const secret = 'hidden';
console.log('IIFE ran');
})();

The function is wrapped in parentheses → making it an expression
() immediately invokes it
Variables inside stay private

Alternative IIFE Syntax:

(function () { /.../ }());
!function () { /.../ }();
+function () { /.../ }();

All of these force JavaScript to treat the function as an expression.

IIFE That Returns a Value:

code:
const result = (function (a, b) {
return a + b;
})(2, 3);

console.log(result); // 5

Useful when you need a computed value without polluting scope.

Arrow Function IIFE:

code:
(() => {
console.log('Arrow IIFE');
})();

Shorter and cleaner for simple logic.

Async IIFE (Top-Level Await Alternative):

code:
(async function () {
const data = await fetch('/api/data').then(r => r.json());
console.log(data);
})();

✅ Ideal for environments without native top-level await.

Practical Use Cases:
1️⃣ Encapsulation:

Keep helper variables private. 2️⃣ One-Time Initialization:
Feature detection, polyfills, event listeners. 3️⃣ Module Pattern:

code:
const Counter = (function () {
let count = 0;
return {
inc() { return ++count; },
get() { return count; }
};
})();

Creates private state with a public API.

Pitfalls & Best Practices:

❌ Overusing IIFEs hurts readability
⚠️ Can confuse beginners if undocumented
✅ Prefer ES modules for modern apps
✅ Use IIFEs mainly for: - Legacy scripts - One-off isolated logic - Immediate async setup

Quick Decision Guide:

Situation	Recommendation
Legacy or single-file script	Use IIFE
Need private scope quickly	Use IIFE
Modern app / bundler	Use ES modules

Understanding JavaScript Scope (With Examples)

Suvankarr Dash — Fri, 30 Jan 2026 07:17:56 +0000

What Is Scope in JavaScript?

Scope defines where variables and functions are visible and accessible in your code.
JavaScript scope rules directly affect safety, memory usage, and bug prevention.
Modern JavaScript has five key scope concepts you must understand.

1️⃣ Global Scope:

Definition:

Variables declared outside any function or block.

code:
var g = 1; // becomes window.g (browser)
let h = 2; // global but not a window property

⚠️ Overusing global scope leads to name collisions and hard-to-debug issues.
✅ Prefer modules for app-wide values.

2️⃣ Block Scope:

Definition:

Variables declared with let or const exist only inside { }.

code:
if (true) {
let x = 10;
}
console.log(x); // ReferenceError

✅ Best for loops, conditionals, and temporary values.

3️⃣ Lexical Scope (Closures):

Definition:

Scope is determined by where variables/functions are written in the source code.

code:
function makeCounter() {
let count = 0;
return () => ++count;
}

const counter = makeCounter();
counter(); // 1

✅ Enables private state, encapsulation, and functional patterns.

4️⃣ Window Scope (Browser):

Definition:

In browsers, window is the global object.

code:
var a = 1;
console.log(window.a); // 1

let b = 2;
console.log(window.b); // undefined

⚠️ Mostly legacy behavior — avoid in modern apps .

5️⃣ Hoisting:

Definition:

Declarations are processed before execution.

code:
console.log(a); // undefined
var a = 5;

console.log(b); // ReferenceError
let b = 6;

var → hoisted + initialized
let/const → hoisted but blocked by Temporal Dead Zone

✅ Best Practices:

Prefer const → let → avoid var
Never rely on implicit globals
Use ES modules to isolate scope
Read legacy code carefully due to hoisting

How to Send JSON from JavaScript: Fetch, Axios, and Best Practices

Suvankarr Dash — Fri, 30 Jan 2026 07:02:42 +0000

Sending JSON data from JavaScript to an API is one of the most common tasks in modern web development. Whether you’re submitting a form, creating a user, or saving data, the pattern is largely the same.
This guide explains how to send JSON correctly, with examples using fetch, axios, and legacy APIs.

Quick Checklist Before Sending JSON:

Serialize the object:

JSON.stringify(obj)

Set the correct header:

Content-Type: application/json

Parse the response:

response.json()

Handle CORS:

Required for cross-origin browser requests

Example 1: Sending JSON with Fetch (Modern Approach):

async function createUser(user) {
const res = await fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(user)
});

if (!res.ok) {
throw new Error(HTTP ${res.status});
}

return await res.json();
}

Usage:
createUser({ name: 'Subhankar', city: 'Bhubaneswar' })
.then(user => console.log('Created user id:', user.id))
.catch(console.error);

Why Fetch?

Built into modern browsers and Node.js
Promise-based
Clean async/await syntax
No external dependency

Example 2: Sending JSON with Axios:

import axios from 'axios';

async function createUser(user) {
const res = await axios.post(
'https://api.example.com/users',
user
);
return res.data;
}

Why Axios?

Automatically sets Content-Type
Automatically parses JSON
Supports interceptors and retries
Easier testing and error handling

Example 3: XMLHttpRequest (Legacy Support):

const xhr = new XMLHttpRequest();
xhr.open('POST', '/users');
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
const data = JSON.parse(xhr.responseText);
console.log(data);
}
};

xhr.send(JSON.stringify({ name: 'A' }));

⚠️ Use this only for very old browser support.

What the Server Receives:

Headers:

Content-Type: application/json

Request Body:
{
"name": "Subhankar",
"city": "Bhubaneswar"
}

In Node.js + Express, this is parsed using:

app.use(express.json());

Pitfalls & Best Practices:

JSON.stringify Caveats:

❌ Functions are removed
❌ undefined is ignored
❌ Circular references throw errors Use try/catch or custom serializers for complex objects.

CORS:

Browser requests to another origin require server headers: code: Access-Control-Allow-Origin

Error Handling:

Always check response.ok
Handle network failures separately

Security:

Never expose secrets in frontend code
Always use HTTPS
Validate data server-side

Short Decision Guide:
| Tool | When to Use |
| -------------- | -------------------------------- |
| fetch | Native, modern, lightweight |
| axios | Cleaner code, auto JSON handling |
| XMLHttpRequest | Legacy browser support |

Final Thoughts:

Sending JSON correctly is less about syntax and more about discipline:

headers, serialization, error handling, and security.
Master this pattern once—and you’ll use it everywhere.

API and JSON Explained: How Data Moves Across the Web

Suvankarr Dash — Fri, 30 Jan 2026 06:49:24 +0000

Modern web applications constantly exchange data—user profiles, weather updates, orders, analytics. Two core concepts make this possible: APIs and JSON.
This article explains what they are, how they work together, and how to use them correctly in JavaScript.

What Is an API?

API stands for Application Programming Interface.
It is a contract that defines how one program can request data or functionality from another.

An API specifies:

Endpoints (URLs)
HTTP methods (GET, POST, PUT, DELETE)
Parameters
Response format

Common API Use Cases:

Fetching remote data
Submitting forms
Authenticating users
Integrating third-party services (payments, maps)
Connecting frontend apps to backend services

What Is JSON?

JSON (JavaScript Object Notation) is a text-based, language-independent data format used to represent structured data.

It supports:

Objects
Arrays
Strings
Numbers
Booleans
null

Why JSON Is So Popular:

Lightweight and compact
Human-readable
Easy to parse
Supported by nearly all programming languages This makes JSON the default data format for web APIs.

How APIs and JSON Work Together:

At a high level:

A client (browser or Node.js) calls an API endpoint
GET /users/123
The server responds with JSON
{"id":123,"name":"Subhankar"}
The client converts JSON into native objects and uses the data

JavaScript Examples:

1️⃣ Fetching JSON from an API:

async function getUser(id) {
const res = await fetch(https://api.example.com/users/${id});
if (!res.ok) throw new Error('Network error');
return await res.json(); // JSON → JS object
}

getUser(123)
.then(user => console.log(user.name))
.catch(console.error);

2️⃣ Sending JSON to an API:

const newUser = { name: 'Subhankar', city: 'Bhubaneshwar' };

fetch('https://api.example.com/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newUser) // JS object → JSON text
})
.then(res => res.json())
.then(data => console.log('Created user ID:', data.id));

3️⃣ Parsing JSON Safely:

const jsonText = '{"a":1}';

try {
const obj = JSON.parse(jsonText);
console.log(obj.a);
} catch (err) {
console.error('Invalid JSON');
}

⚠️ JSON.parse throws an error if the JSON is invalid—always handle safely.

Practical Tips & Pitfalls:

✅ Always use HTTPS for API calls
✅ Set Content-Type: application/json when sending JSON
✅ Validate and sanitize untrusted API responses
⚠️ Large payloads? Use pagination, compression, or streaming
❌ Don’t assume JSON is safe—handle errors properly

Final Thoughts:

APIs define how systems talk.
JSON defines what they say.
Together, they form the backbone of modern web development. If you understand this pair well, everything from frontend apps to backend services becomes much easier to reason about.

Singleton vs Non-Singleton in JavaScript: When and Why to Use Each

Suvankarr Dash — Fri, 30 Jan 2026 06:37:00 +0000

In JavaScript applications, object creation strategy directly affects maintainability, scalability, and testability. One common design decision is whether to use a singleton or a non-singleton object.

This article breaks down the differences, use cases, and best practices with practical JavaScript examples.

What Is a Singleton?

A singleton is an object designed so that only one instance exists across the entire application. Any request for that object returns the same instance.
Singletons are commonly used for shared resources where multiple instances would be wasteful or harmful.

Characteristics:

Single global instance
Shared state across the app
Controlled creation logic
Harder to test if tightly coupled

JavaScript Singleton Example:

In JavaScript, ES modules are singletons by default. Ex:- // config.js const config = { apiUrl: 'https://api.example.com', timeout: 5000 };

export default config;

Every import of config receives the same object instance.

Class-Based Singleton Example:

class Logger {
constructor() {
if (Logger.instance) {
return Logger.instance;
}
this.logs = [];
Logger.instance = this;
}

log(msg) {
this.logs.push(msg);
}
}

export default Logger;

Calling new Logger() multiple times always returns the same instance.

What Is a Non-Singleton?

A non-singleton is a regular object or class that allows multiple independent instances, each with its own state.
This is the default behavior in most object-oriented designs.

Characteristics:

Multiple instances allowed
Instance-specific state
Easy to test and mock
Simple construction logic

Non-Singleton Example:

class User {
constructor(name) {
this.name = name;
}
}

const u1 = new User('A');
const u2 = new User('B');

Each new User() call creates a separate object.

Quick Comparison:

Attribute	Singleton	Non-Singleton
Instance count	One global instance	Multiple instances
Use case	Shared resources	Domain entities
State	Shared	Isolated
Testability	Harder	Easier
Complexity	Higher	Lower

When to Use Each:

Use Singleton When:

Managing shared resources (DB, logger)
Centralizing app configuration
Implementing caches or feature flags

Use Non-Singleton When:

Creating domain entities (users, orders)
Building UI components
Handling request-specific or temporary data

Pitfalls & Best Practices:

❌ Avoid overusing singletons—they introduce hidden global state
❌ Don’t use singletons for domain models
✅ Prefer dependency injection for better testability
✅ In Node.js, rely on module exports for safe singletons

Final Thoughts.

Singletons are powerful—but dangerous when misused.
Non-singletons are boring—but safe and scalable.
The key is intentional design:
Shared resource → Singleton
Multiple entities → Non-Singleton

Shallow Copy vs Deep Copy in JavaScript: A Practical Guide

Suvankarr Dash — Fri, 30 Jan 2026 06:23:06 +0000

When working with arrays and objects in JavaScript, copying data incorrectly can lead to subtle and frustrating bugs. The root cause is often misunderstanding shallow copy versus deep copy.

This guide explains the difference, when to use each, and the pitfalls to avoid.

Understanding the Difference:
Shallow Copy:

A shallow copy creates a new array or object, but nested objects and arrays still reference the original memory.

This means:

Changes to nested values affect both the copy and the original
Only the top-level structure is duplicated

Deep Copy:

A deep copy creates a fully independent duplicate of the original data structure, recursively copying all nested values.

This ensures:

No shared references
Mutations do not affect the original data

When to Use Each:

Use Shallow Copy When:

The array contains only primitives (numbers, strings, booleans)
You don’t plan to mutate nested data
Performance and memory usage matter

Use Deep Copy When:

Data contains nested objects or arrays
You need immutable updates (e.g., React state)
You want full isolation between copies

JavaScript Examples:
Shallow Copy Example:

const a = [{ x: 1 }, { x: 2 }];
const b = a.slice(); // shallow copy

b[0].x = 99;
console.log(a[0].x); // 99 (shared reference)

Deep Copy Examples:

JSON-based Deep Copy (JSON-safe data only)
const deep1 = JSON.parse(JSON.stringify(a));

Limitations:

Loses Date, Map, Set
Drops functions and undefined
Cannot handle circular references

Modern Built-in Deep Copy:
const deep2 = structuredClone(a);

Advantages:

Preserves more data types
Handles circular references
Safer than JSON cloning

Performance Considerations:
Deep cloning large or complex structures is expensive. Instead of cloning everything:

Clone only the part you intend to change
Prefer shallow copy for flat data
Use libraries like lodash.cloneDeep for complex cases

Practical Tips:

Arrays of primitives → Shallow copy is enough
Nested objects → Use deep copy
Avoid JSON cloning when data types matter
Always consider performance when deep cloning

Final Thoughts:

Many state-related bugs in JavaScript happen because of unintended shared references. Knowing when to use shallow or deep copy is a foundational skill—especially in modern frameworks like React.
Mastering this concept will save you time, prevent bugs, and make your code more predictable.

Understanding proto in JavaScript

Suvankarr Dash — Thu, 29 Jan 2026 06:51:00 +0000

proto is a legacy JavaScript accessor that exposes an object’s internal prototype reference ([[Prototype]]). This prototype link defines where JavaScript looks next when a property is not found directly on an object.

Although obj.proto is widely supported, changing it at runtime is not recommended. Modifying the prototype chain dynamically can degrade performance and interfere with JavaScript engine optimizations.

Modern JavaScript provides safer, standard alternatives:

Object.getPrototypeOf(obj) to read an object’s prototype
Object.create(proto) to create objects with a specific prototype
Object.setPrototypeOf(obj, proto) (use sparingly)

Ex: -
const proto = { greet() { return 'hi'; } };
const obj = Object.create(proto);

Object.getPrototypeOf(obj) === proto; // true

Best practice: avoid using proto directly—treat it as a debugging aid, not a design tool.

Stack vs Heap in JavaScript: A Practical Guide

Suvankarr Dash — Thu, 29 Jan 2026 06:44:35 +0000

JavaScript automatically manages memory, but understanding how the stack and heap work can help developers avoid bugs, improve performance, and prevent memory leaks.

Short Answer
Primitives and function call frames are handled on the call stack.
Objects and arrays live on the heap, with references stored on the stack.
Memory allocation and cleanup are handled by garbage collection.
This behavior is the same in browsers and Node.js.

Stack vs Heap Comparison

Aspect: -
Stores

Access speed
Lifetime
Allocation

Stack: -
Call frames, primitives, references
Fast
Short (function execution)
Automatic (LIFO)

Heap: -
Objects, arrays, functions
Slower
Long (until GC)
Dynamic

Understanding the Stack (Call Stack)
The call stack stores:
Function execution frames.
Primitive values such as numbers, booleans, null, undefined, and symbols.
When a function is called, a frame is pushed onto the stack. When it returns, the frame is popped.

Understanding the Heap
The heap stores:
Objects
Arrays
Function objects
When you create {} or [], JavaScript allocates memory on the heap and stores a reference to that object on the stack (or inside another object). The garbage collector frees heap memory when objects are no longer reachable.

Reference vs Value Example
// primitives copied by value
let a = 10;
let b = a;

// objects copied by reference
let obj1 = { x: 1 };
let obj2 = obj1;
obj2.x = 2;

console.log(obj1.x); // 2

Memory Management & Garbage Collection
You cannot manually free memory in JavaScript. Modern engines automatically reclaim heap memory when objects become unreachable.

🚨 Common risk: memory leaks caused by lingering references
✅ Best practice: remove references to large objects when no longer needed

File Access in JavaScript
Browser
No direct file-system access
Uses File API or File System Access API
Always user-mediated and asynchronous

Ex: -

document.querySelector('input').addEventListener('change', e => {
const file = e.target.files[0];
file.text().then(console.log);
});

Node.js
Full file-system access via fs
Same V8 engine with stack/heap semantics

Ex: -
const fs = require('fs');

fs.readFile('./data.txt', 'utf8', (err, data) => {
if (err) throw err;
console.log(data);
});

Practical Tips
Avoid large global variables
Use streams for large files in Node.js
Profile memory using Chrome DevTools or Node Inspector

Understanding Truthy and Falsy Values in JavaScript

Suvankarr Dash — Thu, 29 Jan 2026 06:29:25 +0000

In JavaScript, values are often evaluated in Boolean contexts such as if statements, logical expressions, and loops. Rather than requiring strict true or false, JavaScript converts values into truthy or falsy.

Definition

Truthy values evaluate to true.
Falsy values evaluate to false.
JavaScript defines a limited set of falsy values; every other value is truthy.
Falsy Values.

The following values always evaluate to false:
false
0, -0
0n
"" (empty string)
null
undefined
NaN

Boolean(false); // false
Boolean(0); // false
Boolean(""); // false
Boolean(null); // false

Example in an if statement:
let value = "";
if (value) {
console.log("runs");
} else {
console.log("does not run");
}
Truthy Values

Truthy values include:
Non-zero numbers
Non-empty strings

Arrays, objects, and functions
Boolean(1); // true
Boolean("hello"); // true
Boolean([]); // true
Boolean({}); // true

if ("hello") {
console.log("This runs because non-empty strings are truthy");
}

Logical Operators in Practice
OR (||) returns the first truthy value:
"" || "default"; // "default"
AND (&&) returns the first falsy value or the last value:
"ok" && "done"; // "done"
0 && "no"; // 0

Common Pitfalls and Best Practices
"0" is truthy because it’s a non-empty string
NaN is falsy, but typeof NaN === "number"
Use Number.isNaN() to check for NaN
Use explicit checks when exact behavior matters:
value === ""
value == null (checks both null and undefined)

Mastering JavaScript String Methods

Suvankarr Dash — Thu, 29 Jan 2026 06:15:10 +0000

JavaScript string methods are powerful built-in functions that allow developers to work efficiently with text. They are widely used for input validation, text formatting, parsing content, and building interactive user interfaces.

Popular methods such as length, slice(), indexOf(), includes(), split(), replace() / replaceAll(), trim(), toLowerCase(), and toUpperCase() simplify common text-handling tasks.

One important concept to understand is that strings in JavaScript are immutable. This means string methods do not modify the original value—instead, they return a new string or result.

Practical Example

const title = " Eng Lesson 1: Greetings ";

const clean = title.trim(); // Remove extra spaces
const lower = clean.toLowerCase(); // Convert to lowercase
const hasEng = lower.includes("eng"); // Case-insensitive check
const short = clean.slice(0, 12); // Extract a portion
const safe = clean.replaceAll("Lesson", "Unit");

console.log({ clean, lower, hasEng, short, safe });

Best Practices

Always sanitize user input using trim()

Use toLowerCase() for reliable comparisons

Prefer replaceAll() when updating repeated text

Test with real Unicode data for edge cases

React Function Components: The Future of UI Starts Here

Suvankarr Dash — Fri, 23 Jan 2026 07:07:51 +0000

Lightweight JS functions that return UI. Use hooks for state & effects. Faster, reusable, cleaner structure for building modern React apps.

Edge-Powered Server Actions: The Future of React/Next.js Backends

Suvankarr Dash — Fri, 23 Jan 2026 07:03:01 +0000

Modern JS is server-first and reactive: RSC reduces client JS, Signals boost UI speed, and Next.js 15 improves routing, caching, and performance.

Forem: Suvankarr Dash

JavaScript IIFE (Immediately Invoked Function Expression)

Understanding JavaScript Scope (With Examples)

How to Send JSON from JavaScript: Fetch, Axios, and Best Practices

API and JSON Explained: How Data Moves Across the Web

Singleton vs Non-Singleton in JavaScript: When and Why to Use Each

Shallow Copy vs Deep Copy in JavaScript: A Practical Guide

Understanding __proto__ in JavaScript

Stack vs Heap in JavaScript: A Practical Guide

Understanding Truthy and Falsy Values in JavaScript

Mastering JavaScript String Methods

React Function Components: The Future of UI Starts Here

Edge-Powered Server Actions: The Future of React/Next.js Backends

Understanding proto in JavaScript