Tutorials Logic, IN info@tutorialslogic.com

Classes Objects in JavaScript ES6 OOP: Tutorial, Examples, FAQs & Interview Tips

Classes in JavaScript

Classes were introduced in ES6 to make object-oriented code easier to read and organize. A class acts like a blueprint for creating objects. It describes what data an object should have and what actions that object can perform. Under the hood, JavaScript still uses prototypes, but the class syntax gives us a cleaner and more familiar way to work with reusable object structures.

A class can contain a constructor() method for initializing values, as well as instance methods that are available on every object created from that class. When we create an object using the new keyword, JavaScript builds a new instance and binds this to that object.

The constructor runs automatically whenever a new object is created from a class. It is commonly used to assign values such as names, prices, status flags, or configuration settings. Instance methods are shared by all objects of that class, which avoids duplicating the same function for every object.

JavaScript classes support inheritance, which means one class can reuse the behavior of another class. A child class uses the extends keyword, and when it has its own constructor, it should call the parent constructor using super() before using this.

Sometimes a method belongs to the class itself rather than to individual objects. In that case, we use the static keyword. Static methods are helpful for utility functions, validation helpers, or factory methods that create instances in a special way.

Getters and setters let us control how values are read or updated. They are useful when you want to validate input or derive a formatted value without exposing all internal details directly.

example

example
class Song {
	constructor(name, artist) {
		this.name = name;
		this.artist = artist;
	}

	play() {
		console.log(this.name + " by " + this.artist + " is playing.");
	}
}

const mySong = new Song("Skyline", "Anaya");
mySong.play();

example

example
class User {
	constructor(name, email) {
		this.name = name;
		this.email = email;
	}

	introduce() {
		return "Hi, I am " + this.name;
	}
}

const user1 = new User("Riya", "riya@example.com");
console.log(user1.introduce());

example

example
class Course {
	constructor(title) {
		this.title = title;
	}

	getDetails() {
		return "Course: " + this.title;
	}
}

class PaidCourse extends Course {
	constructor(title, price) {
		super(title);
		this.price = price;
	}

	getPriceTag() {
		return "Price: Rs. " + this.price;
	}
}

const jsCourse = new PaidCourse("JavaScript Mastery", 999);
console.log(jsCourse.getDetails());
console.log(jsCourse.getPriceTag());

example

example
class Temperature {
	static toFahrenheit(celsius) {
		return (celsius * 9) / 5 + 32;
	}
}

console.log(Temperature.toFahrenheit(25)); // 77

example

example
class Product {
	constructor(name, price) {
		this.name = name;
		this._price = price;
	}

	get price() {
		return "Rs. " + this._price;
	}

	set price(value) {
		if (value > 0) {
			this._price = value;
		}
	}
}

const pen = new Product("Pen", 20);
pen.price = 25;
console.log(pen.price);

Objects in JavaScript

An object is a collection of key-value pairs. It is one of the most important building blocks in JavaScript because it allows us to model real-world entities such as users, products, courses, or settings. Each property describes some data, and methods describe behavior.

Objects can be created using an object literal, which is the most common and readable approach, or by using the new Object() constructor. In modern JavaScript, object literals are preferred for most cases.

Object properties can be accessed using dot notation or bracket notation. Dot notation is simple and readable, while bracket notation is useful when the property name is stored in a variable or contains spaces or special characters.

Objects can contain other objects and arrays. This is how JavaScript stores structured data such as user profiles, API responses, shopping carts, and configuration objects. Methods can also use this to refer to values within the same object.

JavaScript provides helper methods like Object.keys(), Object.values(), and Object.entries() to inspect object data. These are especially useful when we want to loop through all properties or convert object data into a format that is easier to work with.

An object is a single instance containing data and behavior. A class is a blueprint used to create many similar objects. If you only need one standalone structure, an object literal is often enough. If you need multiple similar entities with shared behavior, a class is usually the better choice.

example

example
const student = {
	name: "Aman",
	course: "JavaScript",
	isEnrolled: true,
	greet() {
		console.log("Welcome, " + this.name);
	}
};

student.greet();

example

example
const user = {
	name: "Neha",
	age: 24
};

console.log(user.name);      // Neha
console.log(user["age"]);    // 24

user.city = "Delhi";
user.age = 25;

console.log(user);

example

example
const profile = {
	name: "Rohit",
	skills: ["HTML", "CSS", "JavaScript"],
	address: {
		city: "Pune",
		country: "India"
	},
	introduce() {
		return this.name + " lives in " + this.address.city;
	}
};

console.log(profile.introduce());

example

example
const settings = {
	theme: "light",
	language: "en",
	notifications: true
};

console.log(Object.keys(settings));   // ["theme", "language", "notifications"]
console.log(Object.values(settings)); // ["light", "en", true]
console.log(Object.entries(settings));

Ready to Level Up Your Skills?

Explore 500+ free tutorials across 20+ languages and frameworks.