Think of the new keyword as the "on switch" for building custom objects from a blueprint. Without it, you're just calling a regular function; with it, you're initiating a powerful, step by step object creation process.

Here is what we’ll cover in this guide:

• Exactly what the new keyword does

• What constructor functions are and how to write them

• A step-by-step breakdown of the object creation process

• The magic of how new automatically links prototypes

• Understanding instances created from constructor functions

The Problems with Manually Creating Objects

Before we dive into new, let's quickly understand the issue it solves. Imagine creating multiple user objects manually:

// Manual User Creation (Tedious & Repetitive)
const user1 = {
  name: 'Abhinav',
  role: 'Developer',
  greet: function() {
    console.log(`Hi, I'm \({this.name}, a \){this.role}.`);
  }
};

const user2 = {
  name: 'Guest',
  role: 'Moderator',
  greet: function() {
    console.log(`Hi, I'm \({this.name}, a \){this.role}.`);
  }
};

// ... Imagine doing this for hundreds of users!
// Problems: Code Duplication, Hard to Maintain, Inefficient Memory (duplicated methods)

As you can see, you're redefining properties (name, role) and methods (greet) repeatedly. It's inefficient, error prone, and a total headache if you ever need to change how users work.

Constructor Functions: The Blueprint

A constructor function is your object blueprint. It's essentially a regular function that you intend to use with the newkeyword to create objects. By convention, their names start with a capital letter (like User instead of user) to remind everyone to use new.

Simple Constructor Example:

// Constructor Function for Users
function User(name, role) {
  // 1. (Implicitly) a new, empty object is created (this = {})
  
  // 2. We add properties to this new object using `this`
  this.name = name;
  this.role = role;
  
  // 3. We *could* add methods here, but prototypes are better (we'll see later!)
  this.greet = function() {
    console.log(`Hi, I'm \({this.name}, a \){this.role}.`);
  };
  
  // 4. (Implicitly) the function returns the newly created object (unless it explicitly returns a different object)
} 

Now, instead of writing out { ... } manually, we can just call our blueprint function:

// Using the Constructor Function (Wait, what did we forget?)
const abhinav = User('Abhinav', 'Developer'); // This is a problem!
console.log(abhinav); // undefined! And we've polluted the global object with name/role!

Wait, it didn't work as expected! Calling User like a regular function (without new) doesn't create and return a new object. In fact, this inside the function will refer to the global object (window in browsers), setting name and role on the window itself definitely not what we wanted!

The new Keyword: Activating the Blueprint

This is where the magic of the new keyword comes into play. When you put new before a function call, everything changes:

// Creating Objects correctly with `new`
const abhinav = new User('Abhinav', 'Developer');
const guest = new User('Guest', 'Moderator');

console.log(abhinav.name); // Abhinav
console.log(guest.name);   // Guest
abhinav.greet(); // Hi, I'm Abhinav, a Developer.
guest.greet();   // Hi, I'm Guest, a Moderator.

Success! We have clean, distinguishable objects (abhinav, guest) with the correct properties, all stamped out efficiently from our single User blueprint. These objects are called instances of the User constructor.

What Does new Actually Do? (Step-by-Step)

So, what exactly happens behind the scenes when you use new? It’s not magic; it’s a specific, four-step process initiated by JavaScript:

1. Creates a blank, plain JavaScript object: It implicitly creates a new, empty object (think {}). Inside the constructor function, this now refers to this specific new object.

2. Links (sets the prototype of) this new object to the constructor function's prototype property: This is key for shared methods and property inheritance (more on this visual later!). Basically, it connects the new instance to the broader "family tree" defined by the constructor.

3. Executes the constructor function body with the given arguments: The code inside your constructor function (this.name = name; this.role = role;) now runs. Since this is our new object, it's populated with these specific values.

4. Returns this (the newly created object) automatically: After running the function body, new implicitly ensures that the newly created and populated object is returned as the result of the new ConstructorCall(...) expression. (Unless the constructor function explicitly returns its own object, in which case that object is returned instead, but that's advanced and usually best avoided for simplicity!)

new and Prototypes: Shared Methods, Not Duplicated

Remember when I said adding methods directly in the constructor wasn't ideal? That's because every single instance (user1, user2, user3, etc.) would get its own separate copy of the exact same greet function, wasting memory.

The solution? Add methods to the constructor function's prototype property. This is a special object that all instances created with new will automatically share and inherit from all thanks to Step 2 of the new process!

// Constructor Function
function User(name, role) {
  this.name = name;
  this.role = role;
  // greet is gone from here!
}

// Adding Shared Method to the Prototype
User.prototype.greet = function() {
  console.log(`Hi, I'm \({this.name}, a \){this.role}.`);
};

const abhinav = new User('Abhinav', 'Developer');
const guest = new User('Guest', 'Moderator');

abhinav.greet(); // Works! Uses inherited greet from User.prototype
guest.greet();   // Also works! Uses the *same* inherited greet function

Now, User.prototype holds the greet method. When we call abhinav.greet(), JavaScript first looks for greet directly on the abhinav object. It's not there. But because new created the prototype link, JavaScript automatically looks on abhinav's prototype which is User.prototype finds greet, and executes it. Every user instance now shares this one single greet function, significantly saving memory.

Conclusion

The new keyword is a fundamental concept in JavaScript for efficiently creating and organizing custom objects. It unlocks the power of constructor functions and automatically handles the intricate details of object initialization, including the critical linking of prototypes for shared behaviors. While understanding prototypes can get deep, mastering new gives you the tools to write cleaner, more reusable, and better-structured code, moving you away from manual object duplication and towards scalable, robust applications. Next time you need multiple users, products, or cars, remember your constructor blueprint and the new keyword!

In this post, we’re going to peel back the layers of why we do this and why it’s the foundation of how the web works.

Here is what we’ll cover in this guide:

• What exactly a callback function is

• The power of passing functions as arguments

• Why they are the "secret sauce" of asynchronous programming

• Common everyday scenarios where you’re already using them

• The "Pyramid of Doom" (Callback Nesting)

What is a Callback Function?

A callback is simply a function that you pass into another function as an argument, with the expectation that it will be executed (or "called back") later.

Think of it like leaving your number at a busy restaurant. You don't stand at the host stand staring at them (that's blocking). Instead, you give them your number (the callback) and go for a walk. When a table is ready, they "call you back."

Passing Functions as Arguments

Because functions are values in JS, we can send a function into another function just like we send a string or a number.

Simple Example (The "Manual" Way):

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback(); // Executing the "gift" function
}

function sayGoodbye() {
  console.log("Goodbye for now!");
}

greet("Abhinav", sayGoodbye);

Here, sayGoodbye is the callback. greet finishes its job first, then triggers the callback we gave it.

Why Callbacks Rule Asynchronous JS

JavaScript is single-threaded, meaning it can only do one thing at a time. If we had to wait for a 5-second database timer to finish before the rest of the page could load, the user experience would be terrible.

Callbacks allow us to say: "Hey JS, start this slow task, and here is a function to run whenever you're finished. In the meantime, I'm going to keep running the rest of the code."

Common Scenarios

You encounter callbacks every day in modern development:

• Event Listeners: button.addEventListener('click', () => { ... }) — The function only runs when the click happens.

• Timers: setTimeout(() => { ... }, 2000) — The function runs after the delay.

• Array Methods: .map(), .filter(), and .forEach() all take callbacks to decide what to do with each item in the list.

The Basic Problem: Nesting (The Pyramid of Doom)

The biggest downside to callbacks appears when you have to do multiple things in order. If step 2 depends on step 1, and step 3 depends on step 2, you end up nesting them.

getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      console.log("Finally got: " + c);
    });
  });
});

This is called Callback Hell. The code starts moving further and further to the right, making it hard to read and even harder to handle errors properly. (This is exactly why Promises and Async/Await were eventually invented!)

Conclusion

Callbacks are the DNA of JavaScript. They allow our code to be flexible, reactive, and non-blocking. While nesting them too deeply can lead to messy "spaghetti code," understanding how they work is the first step to mastering the more advanced tools like Promises.

Template Literals changed the game, making string manipulation feel less like a chore and more like writing a simple message.

Here is what we’ll cover in this guide:

• The "Headache" of traditional string concatenation

• The Backtick (`) syntax

• Embedding variables (Interpolation)

• Writing multi-line strings without the mess

• Real-world use cases

The Problems with Traditional Concatenation

Before Template Literals (ES6), we used single (') or double (") quotes and the plus (+) operator to join strings and variables.

The Pain Points:

• Quote Confusion: Mixing single and double quotes often led to syntax errors.

• Spacing Issues: It was incredibly easy to forget a space between a word and a variable, resulting in HelloAbhinavinstead of Hello Abhinav.

• Readability: As soon as you had more than two variables, the code became a wall of quotes and plus signs.

Template Literal Syntax

The biggest change is the character used to wrap the string. Instead of quotes, we use backticks (`), usually found right below the Esc key on your keyboard.

// The old way
const message = "Hello, world!";

// The new way
const message = `Hello, world!`;

On its own, it looks the same. The magic happens when we start adding dynamic data.

Embedding Variables (Interpolation)

In the old days, adding a variable looked like this: "Hello " + name + ", welcome back!"

With Template Literals, we use Interpolation. You simply wrap your variable or expression in ${ } inside the backticks. JavaScript will "calculate" whatever is inside those braces and turn it into a string.

Comparision:

const name = "Abhinav";
const items = 5;

// Old Way (Messy)
console.log("User " + name + " has " + items + " items in their cart.");

// New Way (Clean)
console.log(`User \({name} has \){items} items in their cart.`);

It reads like a normal sentence, making it much harder to make mistakes.

Multi-line Strings

If you wanted to start a new line in a traditional string, you had to use the special \n character. If you actually pressed "Enter" in your code editor, the code would break.

Template Literals are whitespace sensitive. This means if you hit Enter inside the backticks, that new line is preserved in the output.

Example:

// The Old way (Ugly)
const emailBody = "Hello,\n\n" + 
                  "Your order is ready.\n" + 
                  "Thanks!";

// The New way (Beautiful)
const emailBody = `Hello,

Your order is ready.
Thanks!`;

Use Cases in Modern JavaScript

Why should you use these every day?

• HTML Templates: If you are injecting HTML into a webpage using JS, template literals allow you to write the HTML exactly as it looks.

• Dynamic Logging: Creating descriptive console logs or error messages becomes a breeze.

• Mathematical Expressions: You can actually do math inside the braces: Total: ${price * tax}.

Conclusion

emplate Literals are a perfect example of how JavaScript has evolved to be more "human-friendly." They remove the clutter of concatenation and let you focus on the logic of your code. If you aren't using them yet, try replacing one + joined string in your current project with backticks you’ll notice the difference in readability instantly.

Instead, they take your order, give you a buzzer, and immediately help the next person. That is exactly how Node.js handles tasks. It doesn’t like waiting around.

Here is what we are going to explore today:

• Why asynchronous code is the heart of Node.js

• How callbacks work (The "Buzzer" system)

• The nightmare of "Callback Hell"

• Promises: A cleaner way to handle the future

• Why Promises are a major upgrade for your code

Why Async Code Exists in Node.js

Node.js is built to be non-blocking. Most computer tasks, like reading a large file from a hard drive or fetching data from a database, are slow compared to the speed of the CPU.

If Node.js ran "synchronously," the entire server would freeze while waiting for a file to load. No other users could connect. Asynchronous code allows Node.js to start a task, move on to something else, and come back when the task is finished.

Callback-Based Execution

A callback is simply a function passed as an argument to another function. It’s like saying: "Go read this file, and once you're done, run this specific piece of code."

Example: Reading a file

const fs = require('fs');

console.log("Starting file read...");

fs.readFile('message.txt', 'utf8', (err, data) => {
    if (err) {
        console.error("Oops! Something went wrong.");
        return;
    }
    console.log("File content:", data);
});

console.log("Doing other things while we wait...");

In this scenario, "Doing other things" will print before the file content because Node.js doesn't wait for the file to finish loading.

The Problem: Callback Hell

Callbacks work great for one task. But what if you need to read a file, then use that data to query a database, then save that result to another file? You end up with code that looks like a sideways pyramid:

fs.readFile('user.json', (err, user) => {
    getDatabase(user.id, (err, db) => {
        updateRecord(db, (err, result) => {
            saveLog(result, (err) => {
                // It just keeps going...
            });
        });
    });
});

This is Callback Hell. It’s hard to read, nearly impossible to debug, and handles errors very poorly.

Promise-Based Handling

A Promise is an object representing the eventual completion (or failure) of an asynchronous operation. Think of it as a literal promise: "I don't have the data yet, but I promise to give it to you soon, or tell you if I failed."

A Promise is always in one of three states:

1. Pending: Still working on it.

2. Resolved (Fulfilled): Task finished successfully.

3. Rejected: Something went wrong.

Benefits of Promises: Readability vs. Callbacks

Promises allow us to "chain" operations using .then() and handle all errors in one place with .catch().

The same nested code from earlier, but with Promises:

readFilePromise('user.json')
    .then(user => getDatabase(user.id))
    .then(db => updateRecord(db))
    .then(result => saveLog(result))
    .catch(err => console.log("An error happened somewhere!"));

Conclusion

Asynchronous programming is what makes Node.js so fast and efficient. While callbacks were the original way to handle this, they quickly became messy as apps grew. Promises brought order to the chaos, giving us a cleaner, more reliable way to manage time-consuming tasks.

Today, we’re going to learn how to break those boxes open and get straight to the data.

Here is what we’ll cover:

• What nested arrays actually look like

• Why we bother flattening them in the first place

• The core concept of "flattening"

• Different coding approaches (from easy to "interview-level")

• Common interview scenarios you might face

What are Nested Arrays?

A nested array (often called a multi-dimensional array) is simply an array that contains other arrays as its elements.

Think of a regular array as a single-row egg carton. A nested array is like a crate containing multiple cartons.

// A simple nested array
const nested = [1, [2, 3], [4, [5, 6]]];

In this example, 5 and 6 are "two levels deep." This structure is common when dealing with complex data like folder hierarchies or organizational charts.

Why Flattening is Useful

You might be wondering: "If the data is already there, why change it?"

Flattening makes your life easier because:

• Easier Searching: It’s much simpler to find if a value exists in a single list than to write loops within loops to check every "inner" array.

• Data Processing: Most UI components (like a simple list or a table) expect a flat list of items to display.

• API Consistency: Sometimes APIs send back data in strange, nested formats that you need to "clean up" before using in your frontend.

The Concept of Flattening

Flattening is the process of reducing the "depth" of an array.

• Shallow Flatten: Reducing the depth by just one level.

• Deep Flatten: Reducing the depth until every single element is on the top level, no matter how many boxes they were wrapped in.

Different Approaches to Flatten Arrays

The Modern Way: flat()

If you are working in a modern environment, JavaScript has a built-in method called .flat(). By default, it flattens one level deep, but you can tell it how deep to go.

const arr = [1, [2, [3, 4]]];

console.log(arr.flat());    // [1, 2, [3, 4]] (1 level)
console.log(arr.flat(2));   // [1, 2, 3, 4]    (2 levels)
console.log(arr.flat(Infinity)); // Flattens everything!

The Interview Way: Recursion

In interviews, you might be asked to write your own flattening function without using the built-in method. This is where recursion comes in. The logic is: "Look at each item. If it's an array, flatten it. If it's not, keep it."

function deepFlatten(arr) {
  let result = [];
  
  arr.forEach(item => {
    if (Array.isArray(item)) {
      // If it's an array, we "dig deeper"
      result = result.concat(deepFlatten(item));
    } else {
      // If it's a value, just add it to our list
      result.push(item);
    }
  });
  
  return result;
}

Common Interview Scenarios

If you're heading into a technical interview, be ready for these variations:

1. "Manual" Flattening: They want to see if you understand recursion or how to use reduce and concat.

2. Depth Control: They might ask you to flatten an array exactly n times.

3. Performance: For massive arrays, recursion can sometimes cause a "stack overflow." Interviewers love it when you mention that an iterative approach (using a while loop and a stack) might be safer for huge datasets.

Conclusion

Flattening arrays is a fundamental skill that moves you from "just writing code" to "organizing data efficiently." Whether you use the quick .flat() method for your daily projects or master the recursive approach for your next big interview, understanding how to manipulate data structures is what sets a great developer apart.

JavaScript Modules changed everything. They gave us a way to build "private kitchens" isolated files where code stays safe until we explicitly decide to share it.

Here is what we’ll cover in this guide:

• Why modules are actually necessary

• How to share code using Exports

• How to pull code into files using Imports

• The difference between Default and Named exports

• The long-term benefits of modular code

Why Modules are Needed

Before modules (ES6), every variable you created lived in the Global Scope. If you had two different script files that both used a variable named user, they would overwrite each other, causing the app to crash or behave weirdly.

Modules solve this by providing encapsulation. A variable created inside a module stays inside that module. It doesn't leak out and mess with other parts of your project unless you tell it to.

Exporting: "Sharing the Goods"

To make a function or a variable available to other files, you use the export keyword. Think of this as putting an item in a "public window" so others can see and take it.

You can export things as you define them:

// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

Importing: "Requesting the Goods"

Once a file has exported something, another file can "ask" for it using the import keyword. You have to tell JavaScript exactly what you want and which file it’s coming from.

// main.js
import { add, multiply } from './math.js';

console.log(add(2, 3)); // 5

Default vs. Named Exports

This is often the most confusing part for beginners, but it's simpler than it looks:

• Named Exports: You can have many per file. When importing them, you must use the exact name inside curly braces { }.

• Default Exports: You can only have one per file. It represents the "main" thing that file does. When importing a default, you don't use curly braces, and you can even rename it to whatever you want.

Example of Default export:

// User.js
export default class User { ... }

// App.js
import MyUserClass from './User.js'; // Notice: No curly braces!

Benefits of Modular Code

Why go through the trouble of splitting files?

• Maintainability: If there’s a bug in your "Login" logic, you know exactly which file to open. You don't have to scroll through 3,000 lines of code.

• Reusability: You can write a perfect formatDate function once and import it into ten different projects.

• Readability: Small files are easier for humans to understand. It makes the "flow" of the application clear just by looking at the import statements at the top of a file.

Conclusion

JavaScript Modules are the backbone of modern web development. They turned the "giant pile of code" into an organized library of Lego bricks that we can snap together as needed. By mastering import and export, you aren't just writing code you’re designing a system that is easy to scale, test, and share.

Topics we are going to explore in this blog are mentioned below.

• How '/etc' controls system behavior

• Where DNS configuration lives and how it works

• Routing table inspection through system files

• Network interface configuration locations

• System logs and what insights they provide

• User management files

• Permission structures and security implications

• Process-related filesystem entries inside '/proc'

• Device handling inside '/dev'

• Boot-related configs inside '/boot'

• Service configs inside '/systemd' or '/etc' '/systemd'

• Environment configuration behavior

Linux

Most newcomers to Linux treat the terminal like a magic wand type a command, get a result. But as a system investigator, the real magic isn't in the command itself; it's in the files that make those commands possible. In Linux, we live by one golden rule: Everything is a file.

Whether it’s your hard drive, your keyboard, or even your RAM it is all represented as a file within a unified tree structure starting at the Root (/). Unlike Windows, which partitions its world into drive letters (C:, D:), Linux creates a single, seamless hierarchy.

The Root (/) vs. /root: The Starting Point

• What it does: / is the trunk of the entire system tree. /root is a specific subdirectory inside that tree.

• Why it exists: / provides the structure for the whole OS. /root exists as the private home folder for the Root User (the system administrator).

• What problem it solves: It isolates administrative files from regular users. While regular users live in /home, the administrator stays in /root to ensure that even if the /home partition fails or is unmounted, the admin can still log in and fix the system.

• The Insight: I learned that while / is the "Global Start," /root is the "Admin’s Bunker." They are separated for security and stability.

• Investigator Cmd: ls -F / — The -F flag adds a trailing slash to directories, helping you distinguish the "trunk" from its branches immediately.

/bin & /sbin: The Essential Binaries

• What it does: These folders store compiled programs (binaries). /bin contains tools for everyone (like ls, cat), while /sbincontains "System Binaries" (like fdisk, reboot).

• Why it exists: To separate everyday utilities from powerful system-altering tools.

• What problem it solves: It creates a "recovery" layer. These folders are designed to be available even if the system is in "Single User Mode" or if other parts of the disk are corrupted.

• The Insight: Use the command which ls to find its path. You’ll see it lives in /bin. If you delete the ls file, the command literally ceases to exist. Programs aren't magic; they are just files you execute.

• Investigator Cmd: which ls and file /bin/ls. The first tells you where the command lives; the second proves it’s a "shared object" or executable file, not magic code.

/etc: The Editable Text Configuration

• What it does: The "Registry" of Linux. It contains plain text configuration files that control system-wide behavior.

• Why it exists: Linux values human readability. Instead of a binary database, it uses text files like /etc/passwd (user info) or /etc/fstab (disk mounting).

• What problem it solves: Extreme portability and transparency. You can configure an entire server just by editing a text file, making it easy to backup and migrate.

• The Insight: The name originally meant "et cetera," but "Editable Text Configuration" is a much better way to remember it. It is the first place an investigator looks when a service is misbehaving.

• Investigator Cmd: cat /etc/os-release. This tells you exactly what distribution and version of Linux you are running by reading a simple text file.

/dev: The Hardware Interface

• What it does: Contains "Device Files" that represent your hardware.

• Why it exists: Because "everything is a file," the kernel needs a way to let software "talk" to hardware using standard file operations.

• What problem it solves: It abstracts hardware. A developer doesn't need to know the physics of a hard drive; they just write data to /dev/sda, and the kernel handles the rest.

• The Insight: Hardware is dynamic. When you plug in a USB, a new file magically appears here. /dev/null is a "black hole" device anything you send there disappears forever.

• Investigator Cmd: lsblk. This command maps the physical blocks of your drive to the files in /dev/sdX or /dev/nvmeX, showing you the bridge between physical gear and the filesystem.

/proc: The Virtual Mirror

• What it does: A Pseudo Filesystem that acts as a real-time window into the Linux Kernel and running processes.

• Why it exists: It provides a way for users to "interrogate" the kernel using standard tools like cat.

• What problem it solves: It allows for real time monitoring without needing complex debugging tools. Want to see your RAM usage? Read /proc/meminfo.

• The Insight: These files have a size of 0 bytes on the disk because they don't actually exist. They are generated "on the fly" by the kernel when you try to read them.

• Investigator Cmd: cat /proc/meminfo. This isn't reading a file on your disk; it's reading the Kernel's current data regarding your RAM usage in real time.

/lib: The Shared Knowledge Base

• What it does: Stores shared libraries (similar to .dll files in Windows) that programs in /bin and /sbin need to run.

• Why it exists: To save space. Instead of every program including the code for "how to print text," they all just "borrow" that code from a central library in /lib.

• What problem it solves: Efficient memory usage and easier updates. Update a library once in /lib, and every program using it is instantly patched.

• The Insight: Tampering with this folder is the fastest way to break your system. If the libraries disappear, even basic commands like ls will stop working.

• Investigator Cmd: ldd /bin/ls. This command lists all the libraries in /lib that the ls command depends on to function.

/usr: Unix System Resources

• What it does: Despite looking like "User," it stands for Unix System Resources. It contains the majority of user-space applications, libraries, and docs.

• Why it exists: To separate the "Core OS" (needed for booting) from "User Applications" (browsers, office suites, etc.).

• What problem it solves: It allows the root partition to stay small and focused on booting, while the massive /usr directory can be stored on a separate, larger disk.

• The Insight: It mirrors the root structure (/usr/bin, /usr/lib). It’s like a "System 2.0" for non-essential software.

• Investigator Cmd: du -sh /usr. This shows you the total disk usage of your applications, usually the largest part of a Linux system.

/var & /tmp: The Temporary Workers

• What it does: /var stores "Variable" data that grows (logs, databases). /tmp stores temporary files created by apps during a session.

• Why it exists: To isolate files that are constantly being written to, preventing them from filling up the main system partition.

• What problem it solves: /tmp uses a Sticky Bit permission. This means anyone can write there, but you can only delete files you own. This prevents users from sabotaging each other.

• The Insight: /var/log is a detective's best friend. Every error, login attempt, and system event is recorded here in plain text.

• Investigator Cmd: ls -ld /tmp. Notice the t at the end of the permissions (drwxrwxrwt). This is the "Sticky Bit," ensuring only the owner of a file can delete it from this public folder.

/media & /mnt: The Gateways

• What it does: Directories used to "mount" or connect external filesystems.

• Why it exists: /media is for automatic mounts (USB sticks, CDs) handled by the OS. /mnt is for manual mounts performed by the administrator.

• What problem it solves: It provides a predictable location to find external data. Instead of looking for an "E: Drive," you just go to /media/usb-drive.

• The Insight: If you plug in a drive and it doesn't show up in your file manager, it usually means the hardware is in /dev, but it hasn't been "mounted" to a folder in /media yet.

• Investigator Cmd: mount | column -t. This shows you exactly which physical device files from /dev are currently "plugged into" which folders in /media or /mnt.

/boot: The Ignition Switch

• What it does: Contains the Linux Kernel and the bootloader (GRUB) configurations.

• Why it exists: The computer needs a "starting point" to load the OS into RAM.

• What problem it solves: It keeps the "starter motor" of the OS in one safe place.

• The Insight: One of the most important files here is vmlinuzthe actual compressed Linux kernel. If this file is missing, your computer is just a very expensive paperweight.

• Investigator Cmd: ls -lh /boot. Look for the vmlinuz file. That is the actual compressed Linux kernel the heart of the operating system.

Conclusion

Hunting through the Linux filesystem reveals a system designed for stability and transparency. Every folder has a "why" behind it, and every file tells a story. Understanding this hierarchy is the difference between being a passenger and being the driver of your operating system.

• What problem the Virtual DOM solves

• Difference between Real DOM vs Virtual DOM

• Initial render process in React

• How state or props change triggers re-render

• Creation of a new Virtual DOM tree

• What diffing (reconciliation) means

• How React finds minimal required changes

• Updating only changed nodes in the Real DOM

• Why this approach improves performance

• High-level overview of React render → diff → commit flow

Problem that DOM was facing earlier

As we know the JS DOM manipulation of net picking any tag by using 'window' element and then find element by ID property. See example below

window.document.getElementById('h1')  // this will taget the h1 tag

But the real problem arrises when you try to update something on the existing page for example!

Consider a notification that didn't update because the browser was preoccupied with other tasks, failing to allocate resources to refresh the notification we had already seen. As a result, the notification continued to appear on your web page, leading to what was known as Ghost Notification. Understand with the diagram below!

This problem of page reloading again and again was first tackled by stackoverflow and various tech like JQuerry comes to solve them. But the scale of this problem was first acheived by facebook where they have 100M+ users. So, facebook tech team come up with the solution of Virtual DOM.

Virtual DOM

Virtual DOM is nothing but a similar like DOM. But the control of the page is out from the browser's hand now we will control the page.

See the difference between DOM and Virtual DOM

So, now we know what React is for! and also the technical terms like Fibre, Reconsiliation are just the fancy names we know what they actually mean.

Initial Render Process in React

React’s rendering has evolved from heavy, class-based, synchronous initialization to a streamlined, hook-based, and concurrent architecture. Older React used large root mounting via ReactDOM.render() and bulky lifecycle methods. Today, React leverages asynchronous roots (createRoot), lazy-loading, and server-side rendering for optimal performance.

The Early Days: Class Components & Synchronous Mounting

In the early days of React, rendering was rigid, synchronous, and heavily reliant on ES6 class components

• The Entry Point: You initialized an application using the global ReactDOM.render() method, targeting a single root DOM element.

• Component Birth (Mounting Phase): The initial render triggered a strict sequence of lifecycle hooks. React would call the constructor(), execute componentWillMount(), render the component, and finally trigger componentDidMount() once the DOM was updated.

• Performance Bottlenecks: Every UI update in the early days caused React to re-evaluate the entire component tree, leading to layout thrashing and slow load times on heavy, data-rich pages.

The Current Status: Functional Components & Concurrent React

• The Modern Entry Point: Initialization uses createRoot() from react-dom/client. This asynchronous root enables Concurrent Features, allowing React to pause, resume, or even abandon rendering work to prioritize user interactions.

• Hooks over Lifecycles: The heavy mounting lifecycle methods have been entirely replaced by hooks like useState and useEffect. Instead of componentDidMount, code runs inside useEffect during the commit phase.

• Server-Side Rendering (SSR) & Streaming: Rendering is no longer strictly client-side. Frameworks like Next.js and Remix use React's built-in streaming SSR to send UI HTML to the client as soon as it's ready, drastically improving First Contentful Paint (FCP).

How state or props change triggers re-render?

State and props changes trigger re-renders through a structured process called the Render and Commit Cycle. While they both lead to UI updates, they function as different types of triggers within the React engine.

The Trigger: State vs. Props

• State Change (The Active Trigger) A re-render always starts with a state change. When you call a state setter (e.g., setCount), React schedules an update for that specific component.

• Props Change (The Reactive Trigger) A component does not technically "trigger" its own re-render when props change; rather, it re-renders because its parent component re-rendered. By default, if a parent component renders, React recursively re-renders all of its children to ensure the UI stays in sync.

The Render Phase (Virtual DOM & Diffing)

Once an update is scheduled, React enters the Render Phase to calculate what needs to change.

• Virtual DOM Generation: React calls the component function again to generate a new tree of React Element (Virtual DOM).

• Reconciliation & Diffing: React compares the new Virtual DOM with the previous snapshot using a diffing algorithm.

• Fiber Architecture: Under the hood,React Fibre manages this work as independent units, allowing it to pause or prioritize certain updates for better responsiveness.

The Commit Phase (Updating the Real DOM)

After identifying the differences, React moves to the Commit Phase:

• DOM Updates: React applies only the necessary changes (additions, deletions, or attribute updates) to the actual Browser DOM in a single synchronous batch.

• Post-Render Effects: Once the DOM is stable, React runs lifecycle methods like componentDidUpdate or hooks like useEffect.

How react finds the minimal required changes?

React finds the minimal required changes to the UI through a process called Reconciliation, which is powered by a Diffing Algorithm.

Because comparing two full trees of elements can be computationally expensive (taking O(n^3) time), React uses a "heuristic" algorithm that reduces this complexity to O(n) (linear time) by making two key assumptions:

• Element Type Comparison

• The Power of "Keys"

Why this approach improves the performance?

React’s approach improves performance by focusing on efficiency in the browser rather than just raw execution speed in JavaScript.

• Minimizing Expensive DOM Operations

• Batching Updates: React doesn't immediately update the screen every time you call setState.

• Smart Heuristics ( O(n) Complexity )

Flow Diagram

Three step process Triggering, Rendering (which includes Diffing), and Committing. You can think of React as a kitchen where the components are chefs, and React itself is the waiter managing the orders.

The Trigger

• Initial Render: When your application first starts up.

• State Updates: When a component’s state changes (e.g., via useState), React schedules a re-render for that component and its children.

The Render Phase (Thinking)

During this phase, React "thinks" about what the UI should look like based on the new data.

• Rendering: React calls your component functions to generate a new Virtual DOM tree—a lightweight JavaScript representation of your UI.

• Diffing (Reconciliation): React compares this new tree with the previous version. It uses a diffing algorithm to identify the minimal set of changes required (e.g., "only the color of this button changed").

• Important: This phase is "pure"—it doesn't touch the real browser DOM and can be paused or restarted by React to prioritize urgent user interactions.

The Commit Phase (Doing)

Once the "thinking" is done, React moves to the commit phase to apply the changes.

• DOM Manipulation: React applies the calculated updates to the Real DOM. If it’s the initial render, it uses appendChild(); for updates, it modifies existing nodes as efficiently as possible.

• Side Effects: After the DOM is updated, React runs lifecycle methods like componentDidUpdate or hooks like useEffect.

• Stability: Unlike the render phase, the commit phase in synchronous and non-interruptible to ensure the user doesn't see a partially updated UI.

Conclusion

By reducing the "work" the browser has to do, React keeps the UI responsive even as application complexity grows.

The Golden Rule: Who is the Caller?

In JavaScript, this is determined by how a function is called, not where it is defined.

• Inside a normal function: In a standalone function, this usually refers to the global object (the window in a browser).

• Inside an object method: When a function is part of an object, this refers to the object itself.

// Example 1: Normal Function
function showThis() {
  console.log(this); 
}
showThis(); // Output: Window object

// Example 2: Object Method
const user = {
  name: "InsideTech",
  greet: function() {
    console.log("Hi, I am " + this.name);
  }
};

user.greet(); // Output: Hi, I am InsideTech (The 'user' called greet)

The Manual Overrides: Call, Apply, and Bind

Sometimes, you want to tell a function exactly what this should be, regardless of who called it. We use three power-tools for this: call(), apply(), and bind().

call() — Borrowing Methods

call() invokes a function immediately and lets you pass arguments one by one. It’s perfect for "borrowing" a method from one object to use on another.

const runner = { name: "Flash" };
user.greet.call(runner); // Output: Hi, I am Flash

apply() — The Array Specialist

apply() is exactly like call(), but instead of passing arguments one by one, you pass them as an array.

bind() — The Long-Term Commitment

Unlike the others, bind() does not run the function immediately. Instead, it creates a new copy of the function with thispermanently "locked" to a specific object. You can save this function and use it later.

const greetFlash = user.greet.bind(runner);
greetFlash(); // Output: Hi, I am Flash (even 10 minutes later!)

Conclusion

The this keyword is JavaScript's way of keeping code flexible. Instead of hardcoding names, we use this so our functions can work across different objects. Once you master call, apply, and bind, you have full control over the "context" of your code—giving you the power to borrow logic and reuse functions like a pro.

Object-Oriented Programming (OOP) is a style of programming that allows us to create a "blueprint" once and use it to build as many objects as we need.

Topics that we are going to cover in this blog are as follows

• What Object-Oriented Programming (OOP) means

• Real-world analogy (blueprint → objects)

• What is a class in JavaScript

• Creating objects using classes

• Constructor method

• Methods inside a class

• Basic idea of encapsulation

The Real-World Analogy: Blueprint vs. Object

Think of an architect’s blueprint for a house. The blueprint itself isn't a house—you can’t live in it. However, you can use that one blueprint to build 50 identical houses.

• The Class: This is the blueprint. It defines what properties (color, speed) and actions (drive, brake) a car should have.

• The Object (Instance): This is the actual car built from the blueprint.

What is a Class in JavaScript?

A Class is a reserved keyword in JavaScript used to create this blueprint. It groups data (properties) and behavior (methods) together.

The constructor Method

Inside every class, there is a special function called the constructor. It’s the "setup" phase of your object. It runs automatically the moment you create a new object from the class.

class Car {
  constructor(brand, color) {
    this.brand = brand; // "this" refers to the specific car being built
    this.color = color;
  }
}

Creating Objects (Instantiations)

To build an object from our class, we use the new keyword.

const myCar = new Car("Tesla", "Red");
const friendsCar = new Car("BMW", "Blue");

console.log(myCar.brand); // Output: Tesla
console.log(friendsCar.brand); // Output: BMW

Adding Methods

A blueprint doesn't just describe how a car looks; it describes what it does. We add functions inside a class (without the function keyword) called methods.

class Car {
  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  // This is a method
  drive() {
    console.log(this.brand + " is now driving!");
  }
}

const myCar = new Car("Tesla", "Red");
myCar.drive(); // Output: Tesla is now driving!

A Basic Idea of Encapsulation

Encapsulation sounds fancy, but the idea is simple: it’s about bundling data and the methods that use that data into one single unit (the class).

By keeping everything inside the class "capsule," we make our code more organized and prevent other parts of our program from accidentally messing with our car's data.

Why Use OOP?

• Reusability: Build the logic once, create infinite objects.

• Organization: It keeps related data and behavior in one place.

• Scalability: It's much easier to manage 100 "Students" or "Products" when they all follow the same blueprint.

Conclusion

• The Blueprint: A class is just the plan; it doesn't "exist" until you use the new keyword to create an instance.

• The Constructor: This is your setup shop. It’s where you take raw data (arguments) and assign them to the object using this.

• Encapsulation: By keeping data (properties) and actions (methods) inside one class, your code becomes cleaner, safer, and much easier to scale.

Objects solve this by using a Key-Value Pair structure. Instead of just storing data, we give every piece of data a label (a key).

Topics we are going to cover in this blog are as follows

• Creating objects

• Accessing properties (dot notation and bracket notation)

• Updating object properties

• Adding and deleting properties

• Looping through object keys

What is an Object?

An object is a collection of related data and/or functionality. It is the closest thing in code to a real-world entity.

Creating an Object

We use curly braces {} to define an object literal.

const user = {
  name: "InsideTech",
  age: 21,
  city: "Ahmedabad",
  isStudent: true
};

Accessing Properties

There are two ways to get data out of an object:

• Dot Notation (.): This is the most common and readable method.

  • console.log(user.name); // "InsideTech"

• Bracket Notation ([]): Essential if your key name is stored in a variable or has spaces.

  • console.log(user["city"]); // "Ahmedabad"

Updating, Adding, and Deleting

Objects are dynamic. You can modify them even after they are created.

// 1. Updating
user.age = 20;

// 2. Adding a new property
user.hobby = "3D Modeling";

// 3. Deleting a property
delete user.isStudent;

Understand through the below Table diagram

Looping Through Objects

Unlike arrays, you can't use a standard for loop with an index. Instead, we use the for...in loop to iterate through the keys.

for (let key in user) {
  console.log(key + ": " + user[key]);
}
// Output: name: InsideTech, age: 20, city: Ahmedabad, hobby: 3D Modeling

Conclusion

Objects are the "containers" of the JavaScript world. By mastering them, you can now structure complex data efficiently. This is a massive step you've moved from writing simple scripts to managing data structures that modern apps are built on.

Topics which we are going to cover in this blog are as follows

• What arrow functions are

• Basic arrow function syntax

• Arrow functions with one parameter

• Arrow functions with multiple parameters

• Implicit return vs explicit return

• Basic difference between arrow function and normal function

From Normal to Arrow: The Transformation

Let’s see how a standard function expression evolves into an arrow function.

The Traditional Way:

const square = function(n) {
  return n * n;
};

The Arrow Way:

const square = (n) => {
  return n * n;
};

Breaking Down the Syntax

The name comes from the => symbol (the "fat arrow"). Here is how it works depending on your parameters:

• Zero Parameters: You must use empty parentheses.

  • const sayHi = () => console.log("Hi!");

• One Parameter: You can actually skip the parentheses!

  • const double = n => n * 2;

• Multiple Parameters: Parentheses are required.

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

Implicit vs. Explicit Return

This is the "magic" of arrow functions.

• Explicit Return: If you use curly braces { }, you must use the return keyword.

• Implicit Return: If your function is only one line, you can remove the braces and the return keyword. JavaScript simply "knows" to return that value.

// Explicit (needs return)
const add = (a, b) => { 
  return a + b; 
};

// Implicit (clean and short!)
const addSimple = (a, b) => a + b;

Arrow vs. Normal Functions: What’s the Catch?

While arrow functions are great, they aren't a 100% replacement for normal functions.

• No this binding: Arrow functions don't have their own this. They inherit it from the code around them. (This is great for some things, but bad for others like object methods).

• No arguments object: You can't use the arguments keyword inside an arrow function.

• Not for Constructors: You cannot use new with an arrow function to create an object.

Conclusion

Arrow functions are about readability. By removing the function and return keywords, your code starts to look more like a mathematical formula and less like a wall of text. They are especially powerful when used inside other methods like mapand filter.

Topics that we are going to discuss in this blog are as follows.

• Why Do We Need Functions?

• Function Declaration

• Function Expression

• Key differences between declaration and expression

• Basic idea of hoisting (very high level)

• When to use each type

Why Do We Need Functions?

Imagine you need to multiply two numbers in ten different places in your code. Instead of writing a * b ten times, you write a function once. If you ever need to change how that calculation works (e.g., adding tax), you only change it in one-place.

Function Declaration (The Standard Way)

A Function Declaration is the most common way to define a function. You use the function keyword, give it a name, and define its logic.

// Function Declaration
function multiply(a, b) {
  return a * b;
}

console.log(multiply(5, 4)); // Output: 20

Function Expression (The Variable Way)

A Function Expression is when you create a function and assign it to a variable. In this case, the function is often "anonymous" (it doesn't have its own name) because the variable name is used to call it.

// Function Expression
const multiplyExpr = function(a, b) {
  return a * b;
};

console.log(multiplyExpr(5, 4)); // Output: 20

The "Hoisting" Difference (High Level)

This is where things get interesting. In JavaScript, Hoisting is a behavior where the engine moves declarations to the top of the code before running it.

• Declarations are hoisted: You can call a function before you even define it in your code.

• Expressions are NOT hoisted: If you try to call a function expression before it’s defined, your code will crash.

// This works! (Hoisted)
sayHello(); 
function sayHello() {
  console.log("Hello from the declaration!");
}

// This crashes! (Not hoisted)
sayHi(); 
const sayHi = function() {
  console.log("Hi from the expression!");
};

When to Use Which?

• Use Declarations when you want a function to be available everywhere in your script or for general utility functions.

• Use Expressions when you want to keep your code organized, limit where a function can be accessed, or when you’re passing functions into other methods (like map or filter).

Conclusion

Whether you prefer the traditional declaration or the modern expression, the goal is the same: reusability. By moving your logic into functions, you make your code more organized and much easier to debug. Checkout the cover image to brush up this blog.

Following are the topics that we are going to cover in this blog...

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce() (basic explanation only)

• forEach()

Adding & Removing (The Fast Track)

These methods allow you to quickly change the contents of your array.

• push() / pop(): Work at the end of the array.

• unshift() / shift(): Work at the beginning of the array.

let stack = ["Book1", "Book2"];

stack.push("Book3"); // ["Book1", "Book2", "Book3"] - Add to end
stack.pop();         // ["Book1", "Book2"] - Remove from end

stack.unshift("Newspaper"); // ["Newspaper", "Book1", "Book2"] - Add to start
stack.shift();              // ["Book1", "Book2"] - Remove from start

Transformation Methods: map(), filter(), & forEach(), reduce()

These are the heavy hitters. They allow you to process every item in an array in one go.

forEach() — The Elegant Loop

Instead of writing a complex for loop, forEach simply performs an action for every item. it will return the output on same array that was earlier.

let users = ["Alice", "Bob", "Charlie"];
users.forEach(name => console.log("User: " + name));

map() — The Transformer

map() creates a new array by performing an operation on every element. It doesn’t change the original; it gives you a modified copy.

let prices = [10, 20, 30];
let discountedPrices = prices.map(p => p * 0.9); 

console.log(discountedPrices); // [9, 18, 27]

filter() — The Security Guard

filter() creates a new array containing only the items that pass a specific "test."

let ages = [12, 25, 17, 30];
let adults = ages.filter(age => age >= 18);

console.log(adults); // [25, 30]

reduce() — The Accumulator

reduce() is used when you want to take an entire array and "squash" it into a single value (like a total sum).

Think of it like a snowball rolling down a hill it keeps gathering more until it reaches the bottom.

let bills = [50, 100, 25];
let total = bills.reduce((accumulator, current) => accumulator + current, 0);

console.log(total); // 175

Conclusion

Using methods like map() and filter() is a milestone in your journey. It marks the transition from writing code that simply "works" to writing code that is functional, clean, and professional.

• let item1 = "Milk";

• let item2 = "Eggs";

• let item3 = "Bread";

That works for three items, but what if you have 50? This is where Arrays come to the rescue. An array is a single variable that can hold a collection of values, stored in a specific order.

Topics we are going to cover in this particular blogs are...

• How to create an array

• Accessing elements using index

• Updating elements

• Array length property

• Basic looping over arrays

How to Create an Array?

Creating an array is as simple as using square brackets [] and separating your items with commas.

// An array of strings
let fruits = ["Apple", "Banana", "Mango", "Orange"];

// An array of numbers
let testMarks = [85, 92, 78, 95];

Accessing Elements (The "Index" Rule)

To get an item out of an array, you use its index (its position number).

Crucial Note: JavaScript uses Zero-based Indexing. This means the computer starts counting from 0, not 1.

• The 1st item is at index 0.

• The 2nd item is at index 1.

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits[0]); // Output: Apple
console.log(fruits[1]); // Output: Banana

Updating Elements

Arrays are not set in stone. You can change any value inside them just by referencing its index.

let tasks = ["Clean Room", "Exercise", "Study"];

// Change "Exercise" to "Go for a Run"
tasks[1] = "Go for a Run";

console.log(tasks); // ["Clean Room", "Go for a Run", "Study"]

The .length Property

How do you know how many items are in your list? You use the .length property. This is incredibly useful when you don't know the size of your data beforehand.

let students = ["Alice", "Bob", "Charlie", "David"];
console.log(students.length); // Output: 4

Looping Over Arrays

The real power of arrays comes when you combine them with the loops we learned in the last blog. You can use a for loop to go through every item in an array automatically.

let colors = ["Red", "Green", "Blue", "Yellow"];

for (let i = 0; i < colors.length; i++) {
  console.log("Color " + i + " is " + colors[i]);
}

Conclusion

Arrays are the first real step toward building data-driven applications. Instead of managing a messy room full of individual variables, you’ve now learned how to organize everything into a clean, indexed shelf.