If you’re learning JavaScript, you’ve probably heard terms like functions, objects, classes, constructors, inheritance, and prototypes being thrown around. But what do they really mean? And why are they so important in JavaScript?

In this blog, we’ll break down these concepts step by step, with clear explanations, examples, comparisons, and diagrams. By the end, you’ll have a solid understanding of how these features work together — and why they are the backbone of modern JavaScript.

1. Functions in JavaScript

What is a Function?

A function is a reusable block of code designed to perform a particular task. Instead of writing the same code multiple times, we wrap it inside a function and call it whenever needed.

Syntax

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

Types of Functions

Named Function

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

Anonymous Function (function without a name, often stored in variables)

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

Arrow Function (ES6+)

const greet = () => {
    console.log("Greetings!");
};
greet();

Normal Function vs Arrow Function

Feature	Normal Function	Arrow Function
Syntax	Longer (`function`)	Shorter (`()=>{}`)
`this` binding	Has its own `this` (depends on how function is called)	Inherits `this` from surrounding scope (lexical `this`)
Hoisting	Can be hoisted (declared before usage)	Cannot be hoisted (must be defined before use)
Best Use Case	For methods inside objects & when you need `this` context	For callbacks, array methods (`map`, `filter`, `reduce`)

Use normal functions for object methods and arrow functions for callbacks or short tasks.

Callback Functions

A callback function is a function passed as an argument to another function. They’re essential in asynchronous programming (e.g., setTimeout, API calls).

function processUserInput(callback) {
    const name = "John";
    callback(name);
}

processUserInput((name) => {
    console.log("Hello " + name);
});
// Output: Hello John

Callbacks are often used in event handling, API requests, and functional programming.

2. Objects in JavaScript

What is an Object?

An object is a collection of key-value pairs (properties and methods).

const person = {
    name: "John",
    age: 30,
    greet: function() {
        console.log("Hi, I am " + this.name);
    }
};
person.greet(); // Hi, I am John

Why Objects Are So Powerful

Everything in JavaScript is an object (arrays, functions, dates).
Objects allow grouping data & behavior together (properties + methods).
Objects are dynamic — you can add or remove properties anytime.
Objects power JSON, the most popular data format for APIs.
Objects are the foundation for OOP (Object-Oriented Programming) in JS.

3. Classes in JavaScript

Classes were introduced in ES6 to make OOP more intuitive. They are essentially syntactic sugar over constructor functions.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log(`Hello, I am ${this.name}`);
    }
}
const p1 = new Person("Alice", 25);
p1.greet();

4. Constructor vs Constructor Function

Constructor (inside a class) → A special method in ES6 classes used for initializing objects.
Constructor Function (ES5) → A normal function that creates objects when called with new.

// Constructor Function (ES5)
function Animal(type) {
    this.type = type;
}
const dog = new Animal("Dog");

// Constructor (ES6 Class)
class Car {
    constructor(model) {
        this.model = model;
    }
}
const tesla = new Car("Model 3");

Concept	Definition	Example	Use Case
Class	Blueprint for creating objects (ES6)	`class Person {}`	Structured OOP
Object	Instance containing properties & methods	`const obj = {}`	Store & manipulate data
Constructor (class)	Special method in class to initialize object	`constructor(name){}`	Used in ES6+
Constructor Function (ES5)	Function that acts like a class before ES6	`function Car(){}`	Legacy code, older browsers
Prototype	Shared object from which others inherit	`Dog.prototype.speak`	Enables inheritance
Instance	Actual object created from a class/constructor	`new Car()`	Real usable entity

5. Inheritance

Inheritance allows a child class to reuse properties and methods of a parent class.

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}
class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}
const d = new Dog("Buddy");
d.speak();

6. Prototypes in JavaScript

All JavaScript objects have a prototype, which is another object they inherit from.

const arr = [1, 2, 3];
console.log(arr.__proto__ === Array.prototype); // true

Prototype Chain Diagram

arr
 |
 └── __proto__ → Array.prototype
                      |
                      └── __proto__ → Object.prototype
                                              |
                                              └── null

7. Summary Table (ES5 vs ES6)

Concept	ES5	ES6+
Function	`function(){}`	Arrow `()=>{}`
Object	`var obj={}`	Same
Class	Constructor function	`class {}`
Constructor	Normal function	`constructor()`
Inheritance	Prototype chain	`extends` & `super()`

8. Practice Assignments

Create a Student class with introduce() method.
Extend it to CollegeStudent with collegeName.
Write a constructor function Book with summary() prototype method.
Build an object laptop with specs() method.
Create a callback-based function fetchData(cb) that logs fetched data.

9. Mini Project Idea for you – Zoo Management System

Use classes + inheritance to model animals (Mammals, Birds, Reptiles) with unique behaviors.

Summary

JavaScript’s functions, objects, classes, constructors, and prototypes are not separate pieces but parts of one ecosystem. Functions allow logic reusability, objects provide data structure, classes give blueprints, and prototypes ensure inheritance.

If you master these, you’ll unlock the real power of JavaScript and be ready to build complex, scalable applications.