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

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

1. Everything in JavaScript is an object (arrays, functions, dates).

2. Objects allow grouping data & behavior together (properties + methods).

3. Objects are dynamic — you can add or remove properties anytime.

4. Objects power JSON, the most popular data format for APIs.

5. 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");

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)

8. Practice Assignments

1. Create a Student class with introduce() method.

2. Extend it to CollegeStudent with collegeName.

3. Write a constructor function Book with summary() prototype method.

4. Build an object laptop with specs() method.

5. 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.