In this blog, we’ll cover:

• What prototype means (with real-life analogy)

• prototype vs __proto__

• What new does behind the scenes

• Inheritance without using extends

• JavaScript events explained using real-world examples

• Simple diagrams to visualize everything

First, a Simple Analogy 🏗️ (Blueprint & Genetics)

Imagine this:

• A blueprint is used to create many houses

• All houses share common features

• Each house can have its own custom changes

👉 In JavaScript:

• Prototype = blueprint

• Objects = houses

• Inheritance = sharing features

What Is a Prototype in JavaScript?

In JavaScript, every object has a hidden link to another object.
This link is called a prototype.

When you try to access a property:

1. JavaScript checks the object itself

2. If not found, it looks in its prototype

3. This continues until null

This process is called the prototype chain.

Simple Example

const human = {
  canTalk: true
};

const arjun = {
  name: "Arjun"
};

arjun.__proto__ = human;

console.log(arjun.canTalk); // true

👉 arjun doesn’t have canTalk,
👉 JavaScript looks at human (its prototype)

Prototype Chain Visualization 🧠

arjun
 ↓
human
 ↓
Object.prototype
 ↓
null

prototype vs __proto__

This confuses almost everyone at first 😅

Simple Rule to Remember ✅

• prototype → belongs to constructor functions

• __proto__ → belongs to objects

Example to Understand Clearly

function Person(name) {
  this.name = name;
}

const p1 = new Person("Arjun");

What happens internally?

p1.__proto__ === Person.prototype  // true

Comparison Table 📊

What Does new Keyword Do?

When you write:

const p1 = new Person("Arjun");

JavaScript does 4 things automatically:

1️⃣ Creates a new empty object
2️⃣ Sets p1.__proto__ = Person.prototype
3️⃣ Calls Person() with this = p1
4️⃣ Returns the object

👉 That’s how inheritance starts ✨

Adding Methods Using Prototype (Best Practice)

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log("Hello, my name is " + this.name);
};

const p1 = new Person("Arjun");
p1.sayHello();

✔️ Memory efficient
✔️ Shared across all objects

Achieving Inheritance WITHOUT extends 🚫

Let’s say we want:

• Student to inherit from Person

Step 1: Parent Constructor

function Person(name) {
  this.name = name;
}

Step 2: Child Constructor

function Student(name, rollNo) {
  Person.call(this, name);
  this.rollNo = rollNo;
}

Step 3: Link Prototypes

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Step 4: Add Methods

Student.prototype.study = function () {
  console.log(this.name + " is studying");
};

Use It

const s1 = new Student("Arjun", 101);
s1.study();

Inheritance achieved without extends

Prototype Inheritance Analogy 🧬

Think of genetic traits:

• Parents pass traits to children

• Children can add their own traits

Same with prototypes:

• Parent prototype → shared features

• Child object → custom features

Analogy-Based “Events” in JavaScript 🎯

Think of a doorbell 🔔

• Press button → event happens

• Bell rings → listener reacts

JavaScript Version

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

👉 Event = button press
👉 Listener = bell ringing logic

Event Propagation (Real-Life Analogy)

Imagine shouting in a building:

• Your voice goes to the room

• Then hallway

• Then entire building

That’s event bubbling.

That magic happens because of JavaScript Events.

In this blog, we’ll learn:

• What events are

• Why events are important

• What event listeners are

• Event bubbling and capturing

• How to stop event propagation
  All with easy examples 👇

What Are Events in JavaScript?

An event is something that happens on a webpage.

Common Events

• Clicking a button

• Hovering over an element

• Typing in an input box

• Submitting a form

• Page loading

👉 JavaScript listens for these events and responds to them.

Why Are Events Important?

Without events ❌
A webpage is just static content.

With events ✅
A webpage becomes interactive and dynamic.

Examples:

• Clicking “Login” button

• Changing theme (dark/light)

• Showing error messages

• Animations and popups

Simple Example: Button Click Event

HTML

<button id="btn">Click Me</button>
<p id="text">Hello!</p>

JavaScript

const button = document.getElementById("btn");
const text = document.getElementById("text");

button.addEventListener("click", () => {
  text.textContent = "You clicked the button!";
});

What Happens?

1. User clicks the button

2. click event fires

3. Text changes instantly 🎉

What Is an Event Listener?

An event listener tells JavaScript:

“Hey, when this event happens, run this code.”

Syntax

element.addEventListener("event", function);

Example

button.addEventListener("click", sayHello);

function sayHello() {
  alert("Hello!");
}

Common Event Types

Multiple Event Listeners

You can attach multiple listeners to the same element.

button.addEventListener("click", () => {
  console.log("Clicked!");
});

button.addEventListener("click", () => {
  console.log("Button pressed!");
});

Both will run ✔️

Event Propagation (Very Important Concept)

When an event happens, it doesn’t stop at one element.
It travels through the DOM.

This is called event propagation.

There are two phases:

1. Capturing phase

2. Bubbling phase

Event Bubbling (Default Behavior)

Event starts from the target element and moves upward.

Example

<div id="parent">
  <button id="child">Click Me</button>
</div>

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", () => {
  console.log("Button clicked");
});

Output When Button Is Clicked

Button clicked
Parent clicked

👉 Event bubbles up from child → parent

Event Capturing (Opposite of Bubbling)

Event starts from the top and goes downward.

To enable capturing, pass true as the third parameter.

parent.addEventListener("click", () => {
  console.log("Parent clicked");
}, true);

child.addEventListener("click", () => {
  console.log("Button clicked");
}, true);

Output

Parent clicked
Button clicked

Bubbling vs Capturing (Comparison Table)

Stopping Event Propagation 🛑

Sometimes, you don’t want the event to go further.

Use:

event.stopPropagation();

Example

child.addEventListener("click", (event) => {
  event.stopPropagation();
  console.log("Button clicked");
});

Result

Only button event runs.
Parent event is stopped 🚫

Real-World Use Case

• Clicking a modal button but not closing the modal

• Preventing parent clicks in dropdown menus

• Complex UI components

Think of HTML as the blueprint of a building 🏠
Before painting walls or adding furniture, you first need a strong structure.
That structure on the web is HTML (HyperText Markup Language).

What is HTML?

HTML is not a programming language.
It is a markup language used to structure content on a webpage.

HTML tells the browser:

• What is a heading

• What is a paragraph

• What is an image

• What is a link

HTML = Blueprint of a Building 🧱 (Simple Analogy)

Without a blueprint, a building collapses.
Without HTML, a website has no structure.

Basic HTML Document Structure

Every HTML page follows a fixed structure.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>

  <body>
    <h1>Hello World</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

Understanding Each Part (Very Easy)

<!DOCTYPE html>

• Tells the browser: This is an HTML5 document

<html>

• Root of the document

• Everything goes inside it

<head>

• Contains meta information

• Title, styles, SEO data

• Not visible on the page

<body>

• Visible content

• Text, images, buttons, links

HTML Tags and Elements

What is a Tag?

A tag is used to define content.

<p>Hello World</p>

• <p> → Opening tag

• </p> → Closing tag

What is an Element?

An element = opening tag + content + closing tag

Common HTML Tags

Example

<h1>Welcome</h1>
<p>This is a paragraph.</p>
<a href="https://google.com">Go to Google</a>

Good HTML Practices ✅

1. Properly Nest Tags

❌ Wrong

<p><b>Hello</p></b>

✅ Correct

<p><b>Hello</b></p>

2. Use Meaningful Tag Names

❌ Bad

<div>Article Title</div>

✅ Good

<h1>Article Title</h1>

Meaningful tags improve:

• Readability

• SEO

• Accessibility

Semantic vs Non-Semantic Tags

Non-Semantic Tags ❌

They don’t describe content meaning.

<div>
  <span>Text</span>
</div>

Semantic Tags ✅

They clearly describe what the content is.

<header>
  <h1>My Blog</h1>
</header>

<article>
  <p>This is an article.</p>
</article>

Comparison Table 📊

Why Semantic HTML Matters?

• ✅ Better SEO

• ✅ Screen reader friendly

• ✅ Clean & readable code

• ✅ Professional websites

Google understands your content better when you use semantic tags.

Simple Real-World Example

<!DOCTYPE html>
<html>
  <head>
    <title>My Blog</title>
  </head>

  <body>
    <header>
      <h1>Welcome to My Blog</h1>
    </header>

    <article>
      <p>This blog is about web development.</p>
    </article>

    <footer>
      <p>© 2025 My Blog</p>
    </footer>
  </body>
</html>

In this article, we’ll cover:

• Why functions are important

• Function Declaration vs Function Expression

• Arrow Functions (simple & modern syntax)

• Real-world use cases of closures

• Easy diagrams & tables to understand everything

Why Do We Need Functions?

Imagine writing the same code again and again. That’s bad practice.

Without a function ❌

let a = 10;
let b = 20;
console.log(a + b);

let x = 5;
let y = 15;
console.log(x + y);

With a function ✅

function add(num1, num2) {
  return num1 + num2;
}

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

Benefits of Functions

• ✅ Code reusability

• ✅ Better readability

• ✅ Easy maintenance

• ✅ Modular code structure

Function Declaration

A function declaration defines a function using the function keyword.

Example

function greet(name) {
  return `Hello, ${name}`;
}

console.log(greet("Arjun"));

Key Points

• Can be used before it is defined

• Hoisted by JavaScript

sayHello(); // Works

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

Function Expression

A function expression stores a function inside a variable.

Example

const greet = function(name) {
  return `Hello, ${name}`;
};

console.log(greet("Arjun"));

Important Note ⚠️

Function expressions are NOT hoisted.

sayHi(); // ❌ Error

const sayHi = function() {
  console.log("Hi!");
};

Comparison Table 📊

Arrow Functions (ES6)

Arrow functions provide a shorter and cleaner syntax.

Normal Function

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

Arrow Function

const multiply = (a, b) => a * b;

Single Parameter

const square = x => x * x;

Multiple Lines

const calculate = (a, b) => {
  const sum = a + b;
  return sum;
};

Arrow Functions vs Normal Functions

Real-World Use Case: Closures 🔐

A closure is created when a function remembers variables from its outer scope.

Example: Private Counter

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

  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Why This Is Useful?

• count cannot be accessed directly

• Used in:

  • Authentication logic

  • Data privacy

  • State management

Real-World Example: Login Attempts

function loginTracker() {
  let attempts = 0;

  return function () {
    attempts++;
    return `Login attempt: ${attempts}`;
  };
}

const trackLogin = loginTracker();

console.log(trackLogin());
console.log(trackLogin());