Forem: Hasan Rifat

Mastering JavaScript Prototypes: Why They Make JS Awesome

Hasan Rifat — Sat, 19 Apr 2025 12:42:56 +0000

Hey JavaScript enthusiasts!👋 Ever wondered how JavaScript handles inheritance or why you can call methods like .toString() on any object? The secrete is prototypes, a core feature that makes JavaScript super flexible and powerful. In this blog, i will deep dive into prototypes—what they are, why they exist, and how they help JavaScript shine. With step-by-step examples, we’ll unravel this concept and show you why it’s a game-changer.

What Are Prototypes?
In simple words Prototype is a property of javascript any function (or method) which points to an object.
In JavaScript, every object has a prototype, a special object that acts like a blueprint. Prototypes allow objects to inherit properties and methods from other objects, creating a chain of shared behavior. This is JavaScript’s way of handling inheritance also, and which is called prototype-based inheritance. Think of a prototype as a family tree: if you don’t have a certain trait(property or method), JavaScript looks up the tree to your “parent” (prototype) to find it. This makes code reusable and efficient.
Here’s the key: every object is linked to a prototype via its prototype chain, and this chain goes all the way up to Object.prototype, the grandparent of all objects.

Why Do Prototypes Exist in JavaScript?
JavaScript was created in 1995 by Brendan Eich to add interactivity to web pages. Unlike languages like Java, which use class-based inheritance, JavaScript went with prototype-based inheritance for simplicity and flexibility. Why? Because:
Dynamic Behavior: You can add or modify properties/methods at runtime, making JavaScript adaptable.

Memory Efficiency: Prototypes allow shared methods across objects, saving memory compared to duplicating them.

How Prototypes Work: The Basics

👉Let’s break down the core concepts step by step.

Every Object Has a Prototype

When you create an object, it’s automatically linked to a prototype. For plain objects, that’s Object.prototype. For arrays, it’s Array.prototype, and so on.

Example:

const myObj = {};
console.log(Object.getPrototypeOf(myObj) === Object.prototype); // true

myObj is a plain object. Its prototype is Object.prototype, which gives it methods like .toString() and .hasOwnProperty().

2. The Prototype Chain
If you try to access a property or method that doesn’t exist on an object, JavaScript looks up the prototype chain to find it.

Example:

const person = { name: "Alice" };
console.log(person.toString()); // "[object Object]"

person doesn’t have a toString method. JavaScript checks person’s prototype (Object.prototype), finds toString, and calls it.

This chain ensures objects inherit shared behavior without duplicating code.

3. Constructor Functions and Prototypes
Constructor functions create objects with shared behavior. Each constructor has a prototype property, and objects created by it inherit from that prototype.

Example:

function Dog(name) {
  this.name = name;
}
Dog.prototype.bark = function() {
  console.log(`${this.name} says Woof!`);
};

const dog1 = new Dog("Max");
const dog2 = new Dog("Bella");
dog1.bark(); // "Max says Woof!"
dog2.bark(); // "Bella says Woof!"

Demonstration✍️:
Dog is a constructor function. Dog.prototype holds shared methods like bark. dog1 and dog2 inherit bark via their prototype, saving memory.
The new keyword links each instance to Dog.prototype.
Why Prototypes Make JavaScript Great
Prototypes are a big reason JavaScript is so powerful. Here’s how they shine:

1. Code Reusability
Prototypes let you define methods once and share them across all instances, making your code DRY (Don’t Repeat Yourself).

Example:

function Car(model) {
  this.model = model;
}
Car.prototype.drive = function() {
  console.log(`${this.model} is driving!`);
};

const car1 = new Car("Toyota");
const car2 = new Car("Honda");
car1.drive(); // "Toyota is driving!"
car2.drive(); // "Honda is driving!"

**** The drive method lives on Car.prototype, not on each car, saving memory and keeping code clean.

2. Dynamic Modifications
You can add or change prototype properties at runtime, and all objects inheriting from that prototype get the update.

Example:

function Student(name) {
  this.name = name;
}
const student = new Student("Alice");

Student.prototype.sayHello = function() {
  console.log(`Hi, I’m ${this.name}!`);
};

student.sayHello(); // "Hi, I’m Alice!"

Why It’s Great: This flexibility lets you extend functionality without rewriting code, perfect for dynamic apps.

3. Foundation for Modern JavaScript
Prototypes power ES6 classes, which are syntactic sugar over constructor functions. Understanding prototypes unlocks deeper insights into classes.

Example:

class Cat {
  constructor(name) {
    this.name = name;
  }
  meow() {
    console.log(`${this.name} says Meow!`);
  }
}

const kitty = new Cat("Whiskers");
kitty.meow(); // "Whiskers says Meow!"

Why It’s Great: Under the hood, Cat uses prototypes (Cat.prototype.meow), so knowing prototypes helps you master modern JavaScript.
Common Gotchas and How to Avoid Them

Prototypes are awesome but can trip you up. Here are two common pitfalls:

Gotcha 1: Modifying Shared Prototypes
Since prototypes are shared, changing a prototype property affects all instances.

Example:

function Person(name) {
  this.name = name;
}
Person.prototype.skills = ["coding"];

const p1 = new Person("Alice");
const p2 = new Person("Bob");
p1.skills.push("design");

console.log(p1.skills); // ["coding", "design"]
console.log(p2.skills); // ["coding", "design"] (Unexpected!)

Fix: Avoid mutating shared objects on prototypes. Use instance-specific properties instead:

function Person(name) {
  this.name = name;
  this.skills = ["coding"];
}

*Gotcha 2: Overriding Prototype Methods *
If an instance defines a property that matches a prototype method, the instance’s property takes precedence.

Example:

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound`);
};

const dog = new Animal("Rex");
dog.speak = function() {
  console.log(`${this.name} barks!`);
};

dog.speak(); // "Rex barks!"

Fix: Be intentional when overriding. Use unique names or explicitly call the prototype method with Animal.prototype.speak.call(this)..

How Prototypes Help JavaScript Stand Out
Memory Efficiency: Shared methods on prototypes reduce memory usage, critical for large-scale apps.

Inheritance Simplicity: Prototype chains are straightforward compared to class-based systems, making JavaScript accessible yet powerful.

Ecosystem Power: Libraries like Node.js and frameworks like Vue rely on prototypes for extensible, modular code.

Without prototypes, JavaScript wouldn’t be the versatile language powering the web today.
Now let’s tie it all together with a practical example—a mini library system.

Example:

function Book(title, author) {
  this.title = title;
  this.author = author;
}

Book.prototype.getDetails = function() {
  return `${this.title} by ${this.author}`;
};

Book.prototype.borrow = function() {
  console.log(`${this.title} has been borrowed`);
};

const book1 = new Book("1984", "George Orwell");
const book2 = new Book("Pride and Prejudice", "Jane Austen");

console.log(book1.getDetails()); // "1984 by George Orwell"
book2.borrow(); // "Pride and Prejudice has been borrowed"

Explanation:
Book constructor sets instance-specific properties (title, author).

Book.prototype holds shared methods (getDetails, borrow).

book1 and book2 inherit these methods via the prototype chain.

Calling book1.getDetails() looks up the method on Book.prototype.

Why it’s great:
This setup is memory-efficient and scalable, perfect for real-world apps like library management.
Ok so far so good👍
Now, let’s get to the juicy part: inheritance.😎

Inheritance with Prototypes: The Vanilla JS Way
Imagine a superhero family where a child hero inherits powers from their parent, plus adds their own. We’ll use prototypes to make this happen.

Scenario: We have a ParentHero (the parent) with powers like superStrength and a method fightCrime. A ChildHero (the child) inherits these, plus adds their own power, laserEyes, and a method saveTheDay.

Example:

// Parent constructor
function ParentHero(name, strength) {
  this.name = name;
  this.strength = strength;
}
ParentHero.prototype.fightCrime = function() {
  console.log(`${this.name} battles villains with ${this.strength} strength!`);
};

// Child constructor
function ChildHero(name, strength, laserPower) {
  ParentHero.call(this, name, strength); // Inherit parent properties
  this.laserPower = laserPower;
}

// Set up inheritance
ChildHero.prototype = Object.create(ParentHero.prototype);
ChildHero.prototype.constructor = ChildHero; // Fix constructor

// Add child-specific method
ChildHero.prototype.saveTheDay = function() {
  console.log(`${this.name} saves the day with ${this.laserPower} laser power!`);
};

// Create a child instance
const kidHero = new ChildHero("Super Kid", 100, "mega");
kidHero.fightCrime(); // "Super Kid battles villains with 100 strength!"
kidHero.saveTheDay(); // "Super Kid saves the day with mega laser power!"
console.log(kidHero instanceof ChildHero); // true
console.log(kidHero instanceof ParentHero); // true

Explanation✍️:
Parent Setup: ParentHero sets name and strength, with fightCrime on its prototype.

Child Setup: ChildHero calls ParentHero with .call(this, ...) to inherit name and strength, then adds laserPower.

Link Prototypes: ChildHero.prototype = Object.create(ParentHero.prototype) makes ChildHero’s prototype inherit from ParentHero’s, so kidHero can access fightCrime.

Fix Constructor: ChildHero.prototype.constructor = ChildHero ensures kidHero’s constructor points to ChildHero.

Add Child Method: saveTheDay is added to ChildHero.prototype.

Create Instance: kidHero accesses both parent (fightCrime) and child (saveTheDay) methods via the prototype chain.

Why It’s Cool: This setup lets ChildHero inherit powers without duplicating code, like a kid getting their parent’s strength plus their own laser eyes. It’s memory-efficient and flexible.

Inheritance with ES6 Classes: The Modern Way

ES6 (2015) introduced classes, a cleaner syntax for prototypes. The class and extends keywords are syntactic sugar—they still use prototypes under the hood but feel more like traditional OOP. Let’s recreate our superhero family with classes.

Example:

// Parent class
class ParentHero {
  constructor(name, strength) {
    this.name = name;
    this.strength = strength;
  }
  fightCrime() {
    console.log(`${this.name} battles villains with ${this.strength} strength!`);
  }
}

// Child class
class ChildHero extends ParentHero {
  constructor(name, strength, laserPower) {
    super(name, strength); // Call parent constructor
    this.laserPower = laserPower;
  }
  saveTheDay() {
    console.log(`${this.name} saves the day with ${this.laserPower} laser power!`);
  }
}

// Create a child instance
const kidHero = new ChildHero("Super Kid", 100, "mega");
kidHero.fightCrime(); // "Super Kid battles villains with 100 strength!"
kidHero.saveTheDay(); // "Super Kid saves the day with mega laser power!"
console.log(kidHero instanceof ChildHero); // true
console.log(kidHero instanceof ParentHero); // true

Explanation✍️:
Parent Class: ParentHero defines name, strength, and fightCrime (automatically on ParentHero.prototype).

Child Class: ChildHero extends ParentHero sets up inheritance, linking ChildHero.prototype to ParentHero.prototype.

Super Call: super(name, strength) calls the parent’s constructor to set name and strength.

Child Properties/Methods: laserPower and saveTheDay are added to ChildHero.

Create Instance: kidHero accesses parent (fightCrime) and child (saveTheDay) methods via the prototype chain.

Why It’s Cool: The class syntax is cleaner and more readable, but it’s still prototypes at heart. extends and super make inheritance feel intuitive, like a kid hero saying, “Thanks, Mom, for the strength—now check out my lasers!”

Best Practices for Working with Prototypes
To make the most of prototypes:
Use Prototypes for Shared Methods: Put reusable methods on the prototype to save memory.

Avoid Mutating Shared Objects: Keep prototype properties immutable or instance-specific.

Using ES6 Classes: Use classes for cleaner syntax, but understand they rely on prototypes.

15 Must-Know Hoisting Questions to Crush Your Next Interview🚀

Hasan Rifat — Wed, 16 Apr 2025 20:22:04 +0000

(** to Catapult You to Senior JavaScript Developer **)

✅1.What is hoisting in JavaScript, and how does it affect variable and function declarations?

✅2.How does hoisting differ between var, let, and const?

✅3.Why does this code log undefined instead of throwing an error?

➡️Code:
console.log(x);
var x = 42;

✅4.What happens when you try to access a let variable before its declaration?

✅5.Explain why this function call works before the function is defined.

➡️Code:
greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

✅6.Why does this function expression throw an error?

➡️Code:
callMe(); // TypeError
var callMe = function() {
  console.log("Hey!");
};

✅7.What’s the output of this code involving variable shadowing?

➡️Code:
var name = "Alice";
function greet() {
  console.log(name); // undefined
  var name = "Bob";
}
greet();

✅8.Why does this code prioritize the function over the variable?

➡️Code:
console.log(myFunc); // [Function: myFunc]
var myFunc = "I’m a string!";
function myFunc() {
  console.log("I’m a function!");
}

✅9.What happens when you redeclare a variable with var in the same scope?

✅10.Why does this loop with var cause unexpected output?

➡️Code:
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Outputs: 3, 3, 3

✅11.How does hoisting behave in a function’s block scope?

✅12.What’s the output of this code with multiple declarations?

➡️Code:
var x = 1;
function x() {}
console.log(x); // 1

✅13.Why does this IIFE behave unexpectedly with var?

➡️Code:
var x = 10;
(function() {
  console.log(x); // undefined
  var x = 20;
})();

✅14.How does hoisting affect arrow functions?

✅15.How can you avoid hoisting-related bugs in production code?

"Let’s dive into the answers to these 15 hoisting questions, packed with examples to boost your JavaScript mastery! 🚀"

👉1.What is hoisting in JavaScript, and how does it affect variable and function declarations?

Answer✍️:
Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope (global or function) during the compilation phase, before code execution. Only declarations are hoisted, not initializations. For variables, this means they exist but are undefined until assigned. For function declarations, the entire function is hoisted, making it callable anywhere in the scope.

Example:

console.log(x); // undefined
var x = 5;
sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}

Explanation👁️‍🗨️:
The var x declaration is hoisted, setting x to undefined. The sayHello function is fully hoisted, so it’s callable early. This shows hoisting’s dual behavior, a core concept for senior developers to explain clearly.

👉2.How does hoisting differ between var, let, and const?

Answer✍️:
All three are hoisted, but var is initialized as undefined, while let and const are placed in the Temporal Dead Zone (TDZ), making them inaccessible until their declaration. Accessing let/const early throws a ReferenceError.

Example:

console.log(a); // undefined
var a = 10;
console.log(b); // ReferenceError
let b = 20;
console.log(c); // ReferenceError
const c = 30;

Explanation👁️‍🗨️:
var a is hoisted and usable (as undefined). let b and const c are hoisted but in the TDZ, enforcing stricter scoping. Senior developers prefer let/const to avoid hoisting-related bugs, showing modern JavaScript mastery.

👉3.Why does this code log undefined instead of throwing an error?

➡️Code:
console.log(x);
var x = 42;

Answers✍️:
The var x declaration is hoisted to the top of the scope, initializing x as undefined. The assignment x = 42 happens later, so console.log(x) outputs undefined instead of an error.

// Actual code
console.log(x); // undefined
var x = 42;

// How it behaves
var x;
console.log(x); // undefined
x = 42;

Explanation👁️‍🗨️:
This tests your understanding of var hoisting and initialization. A senior developer can explain why no error occurs and advocate for let to avoid such quirks.

👉4.What happens when you try to access a let variable before its declaration?

Answer✍️:
Accessing a let variable before its declaration throws a ReferenceError because it’s in the Temporal Dead Zone (TDZ). Although hoisted, let variables are not initialized until their declaration line.

Example:

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 100;

Explanation👁️‍🗨️:
The TDZ enforces strict scoping, preventing early access. This question tests your grasp of modern JavaScript and why let is safer than var.

👉5.Explain why this function call works before the function is defined.

Code:
greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

Answer✍️:
Function declarations are fully hoisted, including their name and body. The JavaScript engine moves the entire greet function to the top of the scope, making it callable anywhere.

Example:

// Actual code
greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

// How it behaves
function greet() {
  console.log("Hello!");
}
greet();

Explanation👁️‍🗨️:
This highlights hoisting’s power with functions, a key point for senior developers to articulate, especially when discussing code organization.

👉6.Why does this function expression throw an error?

Code:
callMe(); // TypeError
var callMe = function() {
  console.log("Hey!");
};

Answer✍️:
Function expressions are treated as variable declarations. The var callMe is hoisted, initialized as undefined, but the function assignment happens later. Calling undefined() causes a TypeError.

Example:

// Actual code
callMe(); // TypeError
var callMe = function() {
  console.log("Hey!");
};

// How it behaves
var callMe;
callMe(); // TypeError
callMe = function() {
  console.log("Hey!");
};

Explanation👁️‍🗨️:
This tests your ability to differentiate function declarations from expressions, a nuanced skill for senior roles.

👉7.What’s the output of this code involving variable shadowing?

Code:
var name = "Alice";
function greet() {
  console.log(name); // undefined
  var name = "Bob";
}
greet();

Answer✍️:
The var name inside greet is hoisted to the top of the function, shadowing the outer name. It’s undefined until assigned, so console.log(name) outputs undefined.

Example:

// How it behaves
var name = "Alice";
function greet() {
  var name;
  console.log(name); // undefined
  name = "Bob";
}
greet();

Explanation👁️‍🗨️:
This tests scoping and hoisting interactions, a common senior-level topic. Using let avoids shadowing issues, showing modern coding practices.

8.Why does this code prioritize the function over the variable?

Code:
console.log(myFunc); // [Function: myFunc]
var myFunc = "I’m a string!";
function myFunc() {
  console.log("I’m a function!");
}

Answer✍️:
Function declarations are hoisted before variable declarations. The function myFunc is hoisted first, then var myFunc (which doesn’t overwrite it initially). The assignment myFunc = "I’m a string!" happens later.

Example:

// How it behaves
function myFunc() {
  console.log("I’m a function!");
}
var myFunc;
console.log(myFunc); // [Function: myFunc]
myFunc = "I’m a string!";

Explanation👁️‍🗨️:
This tests hoisting precedence, a tricky area where senior developers excel by explaining engine behavior and advocating clear naming.

👉9.What happens when you redeclare a variable with var in the same scope?

Answer✍️:
Redeclaring a var variable in the same scope is allowed and doesn’t throw an error. The declarations are merged, and the last assignment wins.

Example:

var x = 1;
var x;
console.log(x); // 1
var x = 2;
console.log(x); // 2

Explanation👁️‍🗨️:
All var x declarations are hoisted and merged. This flexibility can cause bugs, so senior developers prefer let/const, which throw errors on redeclaration.

👉10.Why does this loop with var cause unexpected output?

Code:
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Outputs: 3, 3, 3

Answer✍️:
var is function-scoped, so i is shared across all setTimeout callbacks. By the time the callbacks run, the loop has finished, and i is 3.

Fix with let:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Outputs: 0, 1, 2

Explanation👁️‍🗨️:
let creates a new i per iteration, fixing the issue. This tests closure and hoisting interactions, a senior-level skill for async code.

👉11.How does hoisting behave in a function’s block scope?

Answer✍️:
var ignores block scope and is hoisted to the function or global scope. let and const respect block scope and are hoisted to the block’s top, staying in the TDZ.

Example:

function test() {
  if (true) {
    var x = 10;
    let y = 20;
  }
  console.log(x); // 10
  console.log(y); // ReferenceError
}
test();

Explanation👁️‍🗨️:
var x is hoisted to the function scope, while let y is block-scoped and inaccessible outside. This shows why let/const are preferred for clarity.

👉12.What’s the output of this code with multiple declarations?

Code:
var x = 1;
function x() {}
console.log(x); // 1

Answer✍️:
Function declarations are hoisted first, then var declarations. The var x = 1 assignment overwrites the function, so console.log(x) outputs 1.

Example:

// How it behaves
function x() {}
var x;
x = 1;
console.log(x); // 1

Explanation👁️‍🗨️:
This tests hoisting precedence and assignment, a nuanced topic for senior developers to navigate.

👉13.Why does this IIFE behave unexpectedly with var?

Code:
var x = 10;
(function() {
  console.log(x); // undefined
  var x = 20;
})();

Answer✍️:
The var x inside the IIFE is hoisted to the top of its function scope, shadowing the outer x. It’s undefined until assigned.

Example:

// How it behaves
var x = 10;
(function() {
  var x;
  console.log(x); // undefined
  x = 20;
})();

Explanation👁️‍🗨️:
This tests IIFE scoping and hoisting, common in modular code. Senior developers use let to avoid such surprises.

👉14.How does hoisting affect arrow functions?

Answer✍️:
Arrow functions are function expressions, so their hoisting depends on the variable declaration (var, let, const). They’re not hoisted like function declarations.

Example:

callArrow(); // ReferenceError
const callArrow = () => console.log("Arrow!");

Explanation👁️‍🗨️:
const callArrow is hoisted but in the TDZ, causing an error. This tests modern JavaScript syntax, critical for senior roles.

👉15.How can you avoid hoisting-related bugs in production code?

Answer✍️:
To prevent hoisting issues:
➡️Use let/const for block scoping and TDZ protection.

➡️Declare variables at the top of their scope.

➡️Define functions before calling them.

➡️Avoid name clashes between variables and functions.

➡️Use strict mode to catch undeclared variables.

Example:

"use strict";
function safeCode() {
  let x = 10; // Declared first
  console.log(x); // 10
}
safeCode();

Explanation👁️‍🗨️:
These practices ensure predictable code, a senior developer’s responsibility in leading teams and building robust systems.

Got a hoisting trick that saved your code or a quirky bug you’ve tackled? Share it in the comments—I’d love to hear your story and swap tips! 🚀

JavaScript Hoisting: 🚀 What’s Going On Behind the Scenes?🤔

Hasan Rifat — Wed, 16 Apr 2025 07:41:33 +0000

Hey👋 JavaScript fans! Ever wondered🙄 why your code behaves in weird ways, like variables working before you declare them? Or why a function runs fine even if you call it before defining it? That’s hoisting at play, and it’s one of JavaScript’s quirkiest features. Don’t worry if it sounds confusing—I’m here to break it down in a fun, easy way with examples that’ll make hoisting crystal clear. By the end, you’ll not only get what hoisting is but also how to avoid its sneaky traps. Let’s dive in!😎

What Is Hoisting, Anyway?
Hoisting is JavaScript’s way of moving variable and function declarations to the top of their scope before the code runs. It’s like the JavaScript engine saying, “Hey👋, I’ll make sure these things exist before you use them!” But here’s the catch: only the declarations get hoisted, not the initializations (the values you assign). This can lead to some head-scratching moments if you’re not careful.

Think of it like setting up a party: JavaScript puts all the chairs🙂 (declarations) in place before the guests arrive, but it doesn’t fill them with people (values) until the code runs. Let’s see how this works with variables and functions.

Hoisting with Variables: var, let, and const

JavaScript has three ways to declare variables—var, let, and const—and hoisting behaves differently for each. Let’s start with the classic: var.

Hoisting with var
When you declare a variable with var, the declaration gets hoisted to the top of its scope (global or function scope). But the value you assign stays where it is. This means the variable exists but is undefined until you assign it.

👉Example 1:

console.log(myVar);//undefined
var myVar = 42;
console.log(myVar); // 42

What’s Happening🤔?
JavaScript hoists the declaration var myVar to the top, so the code behaves like this:

var myVar; // Hoisted: myVar is undefined console.log(myVar); // undefined myVar = 42; // Assignment happens here console.log(myVar); // 42

Since only the declaration is hoisted, myVar is undefined when we first log it. This is why you can access var variables before declaring them, but you get undefined instead of an error.

✍️Tips: Always declare var variables at the top of their scope to avoid confusion. Hoisting can make code tricky to read!

Hoisting with let and const

Unlike var, let and const are also hoisted, but there’s a twist: they’re placed in a Temporal Dead Zone (TDZ). This means you can’t access them before their declaration, or you’ll get a ReferenceError. The TDZ is JavaScript’s way of encouraging better coding practices.

👉Example 2:

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = 100;

What’s Happening?🤔
The declaration let myLet is hoisted, but it’s in the TDZ until the code reaches the actual declaration. Trying to access it early throws an error. The same applies to const:

console.log(myConst); // ReferenceError
const myConst = "Hello";

✅Key Difference:

var: Hoisted and initialized as undefined, so no error but risky.

let/const: Hoisted but in the TDZ, so you get an error if accessed early.

✍️Using let and const helps avoid bugs from hoisting’s surprises, as they enforce stricter rules. Stick with them for modern JavaScript!

👉Hoisting with Functions

Functions are where hoisting really shines. JavaScript hoists function declarations fully—both the name and the body—so you can call them before defining them. But function expressions behave differently. Let’s break it down.

Function Declarations

A function declaration looks like this: function myFunc() {}. It gets hoisted completely, so you can call it anywhere in its scope.

Example 3:

sayHello(); // "Hello, world!"
function sayHello() {
  console.log("Hello, world!");
}

What’s Happening?🤔
JavaScript hoists the entire function to the top, so it’s ready to use before the code runs. It’s like the function was written like this:

function sayHello() {
  console.log("Hello, world!");
}
sayHello(); // "Hello, world!"

This is super handy but can make code less readable if functions are scattered. Best practice? Define functions before calling them for clarity.

Function Expressions

A function expression assigns a function to a variable, like const myFunc = function() {}. Here, hoisting depends on the variable declaration (var, let, or const).

Example 4:

myFunc(); // TypeError: myFunc is not a function
var myFunc = function() {
  console.log("I’m a function!");
};

What’s Happening?🤔
The var myFunc declaration is hoisted, but it’s undefined until the assignment. Calling undefined() causes a TypeError. The code behaves like:

var myFunc; // Hoisted: undefined
myFunc(); // TypeError
myFunc = function() {
  console.log("I’m a function!");
};

If you use let or const, you’d get a ReferenceError due to the TDZ:

myFunc(); // ReferenceError
let myFunc = function() {
  console.log("I’m a function!");
};

👉Takeaway: Function declarations are hoisted fully, but function expressions follow variable hoisting rules. Stick to function declarations for early calls or ensure expressions are defined first.

Real-World Gotchas:

Hoisting in Action
Hoisting can cause bugs if you’re not careful. Let’s look at a couple of common traps and how to avoid them.

✍Gotcha 1: Variable Shadowing
When a variable is redeclared in a different scope, hoisting can lead to confusion.

Example 5:

var name = "Alice";
function greet() {
  console.log(name); // undefined
  var name = "Bob";
}
greet();

What’s Happening?🤔
The var name inside greet is hoisted to the top of the function, shadowing the outer name. The code behaves like:

var name = "Alice";
function greet() {
  var name; // Hoisted: undefined
  console.log(name); // undefined
  name = "Bob";
}
greet();

✅Fix: Avoid redeclaring variables in inner scopes, or use let to limit scope:

let name = "Alice";
function greet() {
  let name = "Bob"; // No shadowing confusion
  console.log(name); // "Bob"
}
greet();
console.log(name); // "Alice"

Gotcha 2: Function vs. Variable Hoisting

Function declarations take precedence over variable declarations with the same name, but assignments can overwrite them.

Example 6:

console.log(myFunc); // [Function: myFunc]
var myFunc = "I’m a string!";
console.log(myFunc); // "I’m a string!"
function myFunc() {
  console.log("I’m a function!");
}

What’s Happening?🤔
JavaScript hoists the function declaration first, then the variable declaration. The code behaves like:

function myFunc() {
  console.log("I’m a function!");
}
var myFunc; // Hoisted, but doesn’t overwrite function
console.log(myFunc); // [Function: myFunc]
myFunc = "I’m a string!"; // Assignment overwrites
console.log(myFunc); // "I’m a string!"

✅Fix: Avoid using the same name for functions and variables. It’s confusing and error-prone.

✍️Best Practices to Tame Hoisting
Hoisting is cool, but it can make your code unpredictable. Here are some tips to keep things under control:

✅Use let and const: They’re stricter than var and help avoid undefined surprises.

✅Declare Variables Up Top: Even with var, put declarations at the start of their scope for clarity.

✅Define Functions First:Call function declarations after defining them to make code readable.

✅Avoid Name Clashes: Don’t reuse names for variables and functions in the same scope.

✅Understand Scope: Know whether you’re in global, function, or block scope to predict hoisting behavior.

Why Hoisting Matters

Understanding hoisting isn’t just about avoiding bugs—it’s about mastering how JavaScript works under the hood. Whether you’re debugging a tricky issue, writing clean code, or acing a technical interview, hoisting knowledge sets you apart. It’s like knowing the secret handshake of the JavaScript engine!

Plus, hoisting questions pop up a lot in interviews. If you can explain why console.log(x); var x = 5; logs undefined, you’re showing you’ve got the chops to handle JavaScript’s quirks.

✍️Hoisting might seem like JavaScript’s way of playing tricks, but once you get it, it’s no big deal. Variables with var are hoisted as undefined, let and const stay in the TDZ, and function declarations are ready to roll from the start. By knowing these rules and avoiding common pitfalls, you’ll write cleaner code and dodge those “Why is this undefined?!” moments.

Try playing with the examples above in your browser’s console.
Got a hoisting horror story or a cool tip? I’d love to hear it—share in the comments and let’s geek out together!

Happy coding! 🚀

20 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗹𝗼𝘀𝘂𝗿𝗲 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 𝘁𝗼 𝗡𝗮𝗶𝗹 𝗬𝗼𝘂𝗿 𝗡𝗲𝘅𝘁 𝗧𝗲𝗰𝗵 𝗥𝗼𝗹𝗲🚀

Hasan Rifat — Sat, 12 Apr 2025 06:54:32 +0000

(** to elevate you from junior to senior role😎**)

✅How does a closure work?

✅Can you write a function that creates a private variable using a closure?

✅Explain why the following code outputs 3 three times, and how would you fix it?
for (var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}

✅How can closures be used to create a memoization function?

✅Write a function that generates unique IDs using a closure.

✅What are the potential downsides of using closures?

✅Can you use a closure to throttle a function?

✅How would you use a closure to create a module pattern?

✅How does a closure interact with event listeners?

✅Explain the difference between a closure and a regular function.

✅How can you use a closure to create a function that only runs once?

✅Write a closure-based function to maintain a history of values.

✅How would you use a closure to create a factory function for generating customized greetings?

✅Can you explain how closures are used in currying, and provide an example?

✅How can closures cause memory leaks, and how would you prevent them?

✅Write a closure to limit the number of times a function can be called.

✅How would you use a closure to create a toggle function?

✅Can you create a closure to simulate a class-like structure without using the class keyword?

✅How do closures interact with asynchronous code, like Promises?

✅Write a closure-based function to debounce user input.

Now let's explain all of the given question one by one👋

👉1.What is a closure in JavaScript, and how does it work?
✍️A closure is a function that remembers the variables in its outer scope, even when executed outside that scope. It’s created due to JavaScript’s lexical scoping, where a function’s scope is defined by where it’s written in the code. When an inner function references outer variables, JavaScript preserves those variables in memory, forming a closure

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

The inner function closes over count, so even after outer finishes, count persists in memory. Each call to counter() increments it, showing how closures maintain state. This is a core concept for interviews, as it tests your grasp of scope and memory.

👉2.Can you write a function that creates a private variable using a closure?
✍️Closures are perfect for encapsulation, letting you create private variables that can’t be accessed directly. By defining a variable in an outer function and exposing methods to interact with it, you ensure data privacy.

function createPerson() {
  let name = "Alice"; // Private variable
  return {
    getName: function() {
      return name;
    },
    setName: function(newName) {
      name = newName;
    }
  };
}

const person = createPerson();
console.log(person.getName()); // "Alice"
person.setName("Bob");
console.log(person.getName()); // "Bob"
console.log(person.name); // undefined

Explanation👀:
name is private because it’s only accessible through getName and setName. This pattern mimics private properties in OOP, a skill senior developers use to write secure, modular code javaScript

👉3.Explain why the following code outputs 3 three times, and how would you fix it?
for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 1000); }
✍️This outputs 3-three times because var is function-scoped, not block-scoped. The setTimeout callbacks all reference the same i, which is 3 by the time the loop finishes and the callbacks run.
Fix using let:

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

// Outputs: 0, 1, 2

Fix using IIFE (if using var):

for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 1000);
  })(i);
}

// Outputs: 0, 1, 2

Explanation👀:
Using let creates a new i for each iteration, so each closure captures the correct value. An IIFE creates a new scope per iteration, passing i as j. This question tests your understanding of scoping and closures in loops—a common interview gotcha.

👉4.How can closures be used to create a memoization function?
✍️Memoization optimizes functions by caching results for repeated inputs. A closure can maintain a private cache, storing computed values for reuse.

function memoize(fn) {
  let cache = {};
  return function(...args) {
    let key = JSON.stringify(args);
    if (key in cache) {
      return cache[key];
    }
    cache[key] = fn(...args);
    return cache[key];
  };
}

function slowFib(n) {
  if (n <= 1) return n;
  return slowFib(n - 1) + slowFib(n - 2);
}

const memoFib = memoize(slowFib);
console.log(memoFib(10)); // 55 (computed)
console.log(memoFib(10)); // 55 (cached)

Explanation👀:
The closure over cache stores results, making subsequent calls faster. Senior developers use memoization to optimize performance, and this question tests that mindset.

👉5.Write a function that generates unique IDs using a closure.
✍️A closure can maintain a private counter to generate unique IDs, ensuring no external interference.

function createIdGenerator() {
  let id = 0;
  return function() {
    return id++;
  };
}

const generateId = createIdGenerator();
console.log(generateId()); // 0
console.log(generateId()); // 1
console.log(generateId()); // 2

Explanation👀:
The closure over id keeps it private and increments it per call. This is useful for generating keys in apps, showing practical closure application.

👉6.What are the potential downsides of using closures?
While powerful, closures have trade-offs:
Memory Usage: Closed-over variables stay in memory until the closure is garbage-collected, potentially causing leaks if mismanaged.
Performance: Creating many closures (e.g., in loops) can increase memory and processing overhead.
Complexity: Overuse can make code harder to debug or maintain.

function leaky() {
  let bigData = new Array(1000000).fill("data");
  return () => console.log(bigData.length);
}

Here, bigData persists unnecessarily, consuming memory.

Explanation👀:
Senior developers balance closures with cleanup (like nullifying references or removing event listeners) to avoid issues, a key interview discussion point.

👉7.Can you use a closure to throttle a function?
✍️Throttling limits how often a function runs, useful for performance. A closure can track the last execution time.

function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    let now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      return fn(...args);
    }
  };
}

const log = () => console.log("Throttled!");
const throttledLog = throttle(log, 1000);
setInterval(throttledLog, 200);
// Logs every ~1000ms

Explanation👀:
The closure over lastCall ensures the function runs only after delay has passed. This is common in UI optimizations, showing senior-level thinking.

👉8.How would you use a closure to create a module pattern?
✍️The module pattern uses a closure to create private and public members, mimicking encapsulation.

const myModule = (function() {
  let privateData = "Secret";
  function privateMethod() {
    return `Accessing ${privateData}`;
  }

  return {
    publicMethod: function() {
      return privateMethod();
    },
    publicData: "Public info"
  };
})();

console.log(myModule.publicMethod()); // "Accessing Secret"
console.log(myModule.privateData); // undefined

Explanation👀:
The IIFE creates a closure, keeping privateData and privateMethod hidden. This pattern is used in libraries, testing your modular design skills.

👉9.How does a closure interact with event listeners?
✍️Closures in event listeners retain outer variables, enabling dynamic behavior in response to events.

function setupButton() {
  let count = 0;
  const button = document.createElement("button");
  button.textContent = "Click me";
  button.addEventListener("click", () => {
    count++;
    console.log(`Clicked ${count} times`);
  });
  document.body.appendChild(button);
}

setupButton();
Explane listener’s closure over count tracks clicks. Senior developers know to remove listeners to prevent leaks, a nuance interviewers may probe.

👉10. Explain the difference between a closure and a regular function.
✍️A regular function accesses its own variables and parameters but loses outer variables after their scope ends. A closure retains access to its outer scope’s variables indefinitely.

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

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

// Closure
function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

const addFive = makeAdder(5);
console.log(addFive(3)); // 8

Explanation👀:
The closure in makeAdder remembers x, unlike add, which doesn’t persist state. This tests your ability to articulate core differences.

👉11.How can you use a closure to create a function that only runs once?
✍️A closure can track execution with a flag, ensuring a function runs only once.

function createOnceRunner() {
  let hasRun = false;
  return function() {
    if (!hasRun) {
      hasRun = true;
      console.log("This runs only once!");
    } else {
      console.log("Already ran!");
    }
  };
}

const runOnce = createOnceRunner();
runOnce(); // "This runs only once!"
runOnce(); // "Already ran!"

Explanation👀:
The closure over hasRun controls execution, useful for initialization tasks in app.

👉12.Write a closure-based function to maintain a history of values.
✍️A closure can store an array to track values over time, keeping it private.

function createHistoryTracker() {
  let history = [];
  return function(value) {
    history.push(value);
    return history;
  };
}

const tracker = createHistoryTracker();
console.log(tracker("Step 1")); // ["Step 1"]
console.log(tracker("Step 2")); // ["Step 1", "Step 2"]

Explanation👀:
The closure over history preserves the state, a pattern for logging or undo features.

👉13.How would you use a closure to create a factory function for generating customized greetings?
✍️A closure can customize functions by retaining configuration parameters.

function createGreeter(greeting) {
  return function(name) {
    return `${greeting}, ${name}!`;
  };
}

const sayHello = createGreeter("Hello");
console.log(sayHello("Alice")); // "Hello, Alice!"

Explanation👀:
Each returned function remembers its greeting, showing how closures enable reusable patterns.

👉14.Can you explain how closures are used in currying, and provide an example?
✍️Currying splits a multi-argument function into single-argument functions, using closures to hold intermediate values.

function curryAdd(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    };
  };
}

console.log(curryAdd(1)(2)(3)); // 6

Explanation👀:
Each inner function closes over outer parameters, enabling functional flexibility—a senior-level skill.

👉15.How can closures cause memory leaks, and how would you prevent them?
✍️Closures keep variables in memory, which can lead to leaks if not cleaned up, especially with large objects or event listeners.

function setupLeak() {
  let heavyData = new Array(1000000).fill("data");
  document.getElementById("btn").addEventListener("click", () => {
    console.log(heavyData.length);
  });
}

Prevention:

Remove listeners: removeEventListener.
Nullify references: heavyData = null.
Use WeakMap for temporary data. Explanation👀: Senior developers proactively manage memory, a key interview topic.

👉16.Write a closure to limit the number of times a function can be called.
✍️A closure can track call counts to enforce a limit.

function limitCalls(fn, maxCalls) {
  let calls = 0;
  return function(...args) {
    if (calls < maxCalls) {
      calls++;
      return fn(...args);
    }
    return "Max calls reached!";
  };
}

const limitedLog = limitCalls(console.log, 2);
limitedLog("First"); // "First"
limitedLog("Second"); // "Second"
limitedLog("Third"); // "Max calls reached!"

Explanation👀:
The closure over calls ensures controlled execution, useful for APIs or trials.

👉17.How would you use a closure to create a toggle function?
✍️A closure can maintain a boolean state for toggling.

function createToggle() {
  let isOn = false;
  return function() {
    isOn = !isOn;
    return isOn ? "On" : "Off";
  };
}

const toggle = createToggle();
console.log(toggle()); // "On"
console.log(toggle()); // "Off"

Explanation👀:
The closure over isOn tracks state privately, ideal for UI controls.

👉18.Can you create a closure to simulate a class-like structure without using the class keyword?
✍️A closure can encapsulate data and methods, mimicking a class.

function createStudent(name) {
  let score = 0;
  return {
    getName: () => name,
    addScore: (points) => {
      score += points;
      return score;
    },
    getScore: () => score
  };
}

const student = createStudent("Alice");
console.log(student.addScore(10)); // 10
console.log(student.getScore()); // 10

Explanation👀:
The closure hides score, offering controlled access—a pre-ES6 class alternative.

👉19.How do closures interact with asynchronous code, like Promises?
✍️Closures let async operations access outer variables after delays.

function fetchWithContext(id) {
  let context = `Request-${id}`;
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`${context}: Done`);
    }, 1000);
  });
}

fetchWithContext(1).then(console.log); // "Request-1: Done"

Explanation👀:
The Promise’s closure over context ensures correct data, common in API calls

👉20.Write a closure-based function to debounce user input.
✍️Debouncing delays function execution until rapid calls stop, using a closure to track timeouts.

function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

const logInput = debounce((value) => console.log(`Input: ${value}`), 500);
logInput("a");
logInput("b");
setTimeout(() => logInput("c"), 200);
// Logs "Input: c" after ~500ms

Explanation👀:
The closure over timeoutId ensures only the last call runs, optimizing search or resize handlers.

Which of these closure questions challenged you the most? Or do you have a closure tip that’s helped you level up? Drop a comment below—I’d love to hear your thoughts and keep the conversation going!

Understanding Closures in JavaScript: A Deep Dive

Hasan Rifat — Wed, 09 Apr 2025 07:37:24 +0000

👉JavaScript is a language full of surprises, and one of its most intriguing features is closures. If you’ve ever wondered how a function can "remember" variables from its outer scope long after that scope has vanished, you’re about to uncover the magic of closures. In this blog, I will explore what closures are, how they work, and why they’re a game-changer in JavaScript programming. With practical examples, you’ll see closures in action and learn how to wield them effectively in your own code.

What Is a Closure?
A closure is a function that retains access to the variables in its outer (enclosing) scope, even after that scope has finished executing. This behavior stems from JavaScript’s lexical scoping, where a function’s scope is defined by where it’s written in the code, not where it’s called.

In simpler terms:
A closure is created when an inner function references variables from an outer function.
The inner function "closes over" these variables, preserving them in memory for as long as the function exists.
This might sound abstract, so let’s jump into an example to make it concrete.

A Simple Closure Example Consider this code:

function greetUser() {
  let name = "Alice";

  function sayHello() {
    console.log(`Hello, ${name}!`);
  }

  return sayHello;
}

const greeting = greetUser(); // greetUser executes and returns sayHello
greeting(); // Output: "Hello, Alice!"

👉Demonstration👀:
greetUser defines a variable name and an inner function sayHello.
sayHello references name from its outer scope.
When greetUser finishes executing, it returns sayHello.
Even though greetUser is done, calling greeting() still logs "Hello, Alice!" because sayHello remembers name through a closure.
This "memory" is what makes closures so powerful—and a little mind-bending at first!

✍️How Closures Work Under the Hood
To understand closures, you need to grasp two key concepts:

Scope Chain: Every function in JavaScript has a scope chain, which includes its own variables and those of its outer scopes.
Garbage Collection: Normally, when a function finishes executing, its variables are cleaned up from memory. But if an inner function references an outer variable, JavaScript keeps that variable alive as part of the closure. In our greetUser example, the sayHello function maintains a reference to name. JavaScript ensures name isn’t garbage-collected, allowing sayHello to use it later.

Practical Use Case: Building a Private Counter
One of the most popular uses of closures is creating private variables—data that can’t be accessed directly from the outside. Let’s build a counter to demonstrate this:

function createCounter() {
  let count = 0; // Private variable

  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
}

const myCounter = createCounter();
console.log(myCounter.increment()); // 1
console.log(myCounter.increment()); // 2
console.log(myCounter.decrement()); // 1
console.log(myCounter.getCount()); // 1frankly
console.log(myCounter.count); // undefined

**What’s happening here?**
count is defined inside createCounter and is inaccessible from the outside.
The returned object contains methods (increment, decrement, getCount) that can manipulate count because they form closures over it.
Trying to access myCounter.count directly yields undefined, proving count is private.
This pattern mimics encapsulation, a principle common in object-oriented programming, and it’s all thanks to closures!

Closures in the Real World: Timers
Closures shine in asynchronous scenarios, like event handlers or timers.
Here’s an example using setTimeout:

function delayedMessage(message) {
  let text = message;

  setTimeout(function() {
    console.log(text);
  }, 2000);
}

delayedMessage("Hello after 2 seconds!"); // Logs after 2 seconds
Even though delayedMessage finishes executing immediately, the anonymous function inside setTimeout retains access to text via a closure. When the timer fires two seconds later, it still knows what text is.

Potential Pitfalls: Watch Your Loops
Closures can trip you up if you’re not careful, especially in loops.
Consider this common gotcha:

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

// Output (after 1 second): 3, 3, 3

Why does this print 3 three times?
Because var is function-scoped, and by the time the setTimeout callbacks run, the loop has already finished, leaving i at 3. Each callback shares the same i via a closure.

To fix this, use let (block-scoped) instead:

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

// Output (after 1 second): 0, 1, 2
With let, each iteration creates a new i, and the closure captures the correct value.

Why Closures Matter
Closures aren’t just a quirky feature—they’re a cornerstone of JavaScript’s flexibility. Here’s why they’re worth mastering:

1. Data Privacy:
Encapsulate logic and protect variables, as seen in the counter example.

2. Callbacks and Events:
Power asynchronous code in event-driven applications.
3. Functional Programming:
Enable advanced techniques like currying and memoization.
Wrapping Up
Closures might feel like a puzzle at first, but once you understand them, they become a superpower in your JavaScript toolkit. They let functions carry their context with them, opening the door to creative and efficient coding patterns. Whether you’re building private APIs, handling async operations, or just exploring JavaScript’s depths, closures are a concept you’ll encounter—and appreciate—time and again.

So, go experiment! Write a closure, break it🤜, fix it👍, and watch your understanding grow.
Have a favorite closure use case? I’d love to hear about it in the comments.

Happy coding!👋

The Big Picture of React Component

Hasan Rifat — Tue, 08 Oct 2024 14:35:53 +0000

In React, a component is like a building block for your user interface(UI). Think of it as a small, reusable chunk of code that defines how a particular part of your page should look and behave. These components allow developers to build complex UI by combining simple, independent, and reusable pieces.
In general, components are essentially self-contained, reusable pieces of UI that can be thought of as functions that render some part of the user interface.
I know there might be some conflict about the words self-contained, reusable pieces, and renders.

There are 3 major concerns behind why use Components.

Reusability
Separation of concern
Modularity

Reusability ensures create a component once and reuse it multiple times across your application.
Separation of concern ensures each component focuses on a specific part of the UI, making it easier to manageand maintainthe code.
Modularity ensures breaking your UI into small, manageable components which makes it easier to test, debug,and develop

Let's prove one by one by defining components. Opps!😊 I forgot you don't know how to define a simple component. Don't worry I am here🦾 to break down all the things. so let's dive-👋
Suppose you are developing an e-commerce application. In the application in multiple places or multiple pages you need to rendera same product card. Rendering means responding to the UI.
Now is your time👍 to think🙄 how you can display the product card in your application in multiple pages.
Traditionally when creating web pages developers marked up their content and added interaction by sprinkling on some javascript. This worked great when the multiple pages the same marked up didn't replace into multiple pages not too much which makes you sometimes bored and at the same time tiresome as well as hard to debug and manage.So, there is a chance to break your code and it's might cumbersome to manage.
Here you will discover the beauty of React component architecture. React let you create component and use as many places as or much as you want.

// === Reminder ===
Components are regular javascript functions that can sprinkled with javascript

function ProductCard(){
  return(
      <div>
        <h1>title of the product</h1>
        <h2>price of the product</h2>
        <p>description of the product</p>
        // rest of info
      </div>
  )
}

let's break it-
step-1: Declare a simple javascript function as ProductCard name
step-2: The component/function returns an <div> tag consisting some other tag.

// === Reminder ===
All tags must return under a parent tag or using a react fragment(<></>)

// === Reminder ===
React component name must start with a capital letter otherwise it won't treated as a component

The ProductCard component returns a div tag with h1,h2,p, or some other necessary tags written like HTML, but it is Javascriptunder the hood. The syntax is called JSX(javascript XML). No worries I will explain it later.

// === Reminder ===
JSX is a syntax extension for javascript that lets you write HTML-like markup inside a javascript file which handles the logic of rendering and markup live together in the same place as components.

Now your component is ready to use. For example, you have a Product page and have to render some products.

//Products.js or jsx file
function ProductCard(){
  return(
      <div>
        <h1>title of the product</h1>
        <h2>price of the product</h2>
        <p>description of the product</p>
        // rest of info
      </div>
  )
}

function ProductPage(){
  return(
      <section>
        <h1>product page</h1>
        <ProductCard/>
        <ProductCard/>
        <ProductCard/>
      </section>
  )
}

Your browser will render 3 times the ProductCard means that 3 product cards have been visible to the browser.

The point is How the browser will react after getting this ProductPage code

<section> is lowercase, so React knows it will refer to as an HTML tag
<ProfileCard/> starts with a capital P, so React knows that it will be treated as a Component.

so far so good👏. successfully we have rendered the products card to the product page.
Now times to organize the code:
You may have one or more components like ProductCard, ProductReviewCard, SimilarProductCard, etc. so, it might be cumbersome to declare and manage all the components in one file. so, let's make it more organized to manage using just file structure.
let's create a reusable folder since the ProductCard may have been used from multiple pages. Inside the reusable folder create ProductCard.js/jsx file.

//reusable/ProductCard.js or jsx file
function ProductCard(){
  return(
      <div>
        <h1>title of the product</h1>
        <h2>price of the product</h2>
        <p>description of the product</p>
        // rest of info
      </div>
  )
}

Now there is a point if you separate the ProductCardcomponent how will use it from the ProductPage file. I know you may have already understood yes, we can export the ProductCardfunction from the ProductCardfile as named or default which you prefer actually.

//reusable/ProductCard.js or jsx file
export default function ProductCard(){
  return(
      <div>
        <h1>title of the product</h1>
        <h2>price of the product</h2>
        <p>description of the product</p>
        // rest of info
      </div>
  )
}

now it is being usable from the ProductPage file. just import the ProductCardfrom the ProductPagefile then use it as much as you want.

//ProductPage.js or jsx file
import ProducrCard from './reusable/ProductCard.js'
function ProductPage(){
  return(
      <section>
        <h1>product page</h1>
        <ProductCard/>
        <ProductCard/>
        <ProductCard/>
      </section>
  )
}

I mentioned earlier why component should use-for reusability, separation of concern, and modularity.

Our ProductCard component is fully reusable now. we can use it from anywhere.
In the ProductPage there may have multiple sections like ProductCard,ProductReviewCard,SimilarProductCard,RecommendedProductCard etc. Making it manage and maintain the code focusing into a separate section as component by component and section by section.
After breaking the UI as small chunk of sections makes it easier to test, debug, and develop. we can find bugs/issues easily from the particular component if bugs arise. I hope it is much clearer now👍

After all of this, you have understood that you can be nesting your component also.

ok let's take a look again-👀
create a Layout folder
create Header folder under the Layout folder then create index.js file inside Header folder

export default function Header(){
  return(
      <section>
        <h1>Header</h1>
      </section>
  )
}

create `Footer` folder under the `Layout` folder then create `index.js` file inside `Footer` folder
export default function Footer(){
  return(
      <section>
        <h1>Footer</h1>
      </section>
  )
}

now create index.js file under Layout folder

import Header from './Header';
import Footer from './Footer';
export default function Layout(){
  return(
      <section>
        <Header/>
          <h1>page content</h1>
        <Footer/>
      </section>
  )
}

I hope you already have discovered the beauty of react component architecture. This is just starting and tried to grow interest inside of your back of mind.
Happy coding🙂🙂