Introductions
JavaScript classes provide a clear way to create objects with shared properties and methods. They are commonly used in object-oriented programming (OOP) to organize larger JavaScript applications.
In this chapter, you will practice creating classes, constructors, objects, methods, getters, setters, inheritance, super, static methods, and other important OOP concepts with easy step-by-step examples. JavaScript Classes and OOP practice questions with solutions help to build concepts.
Question 1: Create a Basic JavaScript Class
Problem
Create a Student class with a name property. Create an object from the class and display the student’s name.
Solution
class Student {
constructor(name) {
this.name = name;
}
}
const student1 = new Student("Rahul");
console.log(student1.name);
Output
Rahul
Step-by-step Explanation
class Studentcreates a class namedStudent.constructor()runs automatically when an object is created.nameis received as a parameter.this.namestores the name inside the object.new Student("Rahul")creates a new Student object.student1.nameaccesses the stored name.
The basic structure is:
class ClassName {
constructor(value) {
this.property = value;
}
}
Question 2: Create Multiple Objects from a Class
Problem
Create a Car class with brand and model properties. Create two different car objects.
Solution
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
}
const car1 = new Car("Toyota", "Camry");
const car2 = new Car("Honda", "Civic");
console.log(car1.brand, car1.model);
console.log(car2.brand, car2.model);
Output
Toyota Camry
Honda Civic
Step-by-step Explanation
The class defines the structure:
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
}
Now we can create many objects from the same class:
const car1 = new Car("Toyota", "Camry");
const car2 = new Car("Honda", "Civic");
Each object has its own property values.
Question 3: Add a Method to a Class
Problem
Create a Person class with a name property and a greet() method.
Solution
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log("Hello, my name is " + this.name);
}
}
const person1 = new Person("Aman");
person1.greet();
Output
Hello, my name is Aman
Step-by-step Explanation
The greet() method belongs to the class:
greet() {
console.log("Hello, my name is " + this.name);
}
The object can call this method:
person1.greet();
Methods are useful because the same behavior can be shared by all objects created from the class.
Question 4: Create a Class with Multiple Methods
Problem
Create a Calculator class with methods for addition and multiplication.
Solution
class Calculator {
add(a, b) {
return a + b;
}
multiply(a, b) {
return a * b;
}
}
const calculator = new Calculator();
console.log(calculator.add(10, 5));
console.log(calculator.multiply(10, 5));
Output
15
50
Step-by-step Explanation
The class contains two methods:
add(a, b) {
return a + b;
}
and:
multiply(a, b) {
return a * b;
}
The object can call both methods:
calculator.add(10, 5);
calculator.multiply(10, 5);
This is a simple example of grouping related behavior inside a class.
Question 5: Use Private Class Fields
Problem
Create a BankAccount class with a private balance field. Add methods to deposit money and check the balance.
Solution
class BankAccount {
#balance = 0;
deposit(amount) {
this.#balance += amount;
}
getBalance() {
return this.#balance;
}
}
const account = new BankAccount();
account.deposit(500);
console.log(account.getBalance());
Output
500
Step-by-step Explanation
The # symbol creates a private class field:
#balance = 0;
It cannot be accessed directly from outside the class.
Instead, the class provides a method:
getBalance() {
return this.#balance;
}
The balance can be changed through:
account.deposit(500);
Private fields are useful when you want to control direct access to internal object data.
Question 6: Use Getters and Setters
Problem
Create a Student class with a private name field. Use a getter to read the name and a setter to update it.
Solution
class Student {
#name;
constructor(name) {
this.#name = name;
}
get name() {
return this.#name;
}
set name(newName) {
this.#name = newName;
}
}
const student = new Student("Riya");
console.log(student.name);
student.name = "Priya";
console.log(student.name);
Output
Riya
Priya
Step-by-step Explanation
The private field is:
#name;
The getter:
get name() {
return this.#name;
}
allows us to read it like a normal property:
student.name;
The setter:
set name(newName) {
this.#name = newName;
}
allows us to update it:
student.name = "Priya";
Getters and setters are useful when you want controlled access to object properties.
Question 7: Create Inheritance with extends
Problem
Create a Person class and a Student class that inherits from Person.
Solution
class Person {
constructor(name) {
this.name = name;
}
introduce() {
console.log("My name is " + this.name);
}
}
class Student extends Person {
study() {
console.log(this.name + " is studying JavaScript.");
}
}
const student = new Student("Aman");
student.introduce();
student.study();
Output
My name is Aman
Aman is studying JavaScript.
Step-by-step Explanation
Student inherits from Person:
class Student extends Person
Therefore, a Student object can use the introduce() method defined in Person.
It can also have its own method:
study() {
console.log(this.name + " is studying JavaScript.");
}
Inheritance allows one class to reuse functionality from another class.
Question 8: Use super() in a Child Class
Problem
Create a Person class with a name. Create an Employee class that inherits from it and adds a job title.
Solution
class Person {
constructor(name) {
this.name = name;
}
}
class Employee extends Person {
constructor(name, job) {
super(name);
this.job = job;
}
showDetails() {
console.log(this.name + " works as a " + this.job);
}
}
const employee = new Employee("Rahul", "Developer");
employee.showDetails();
Output
Rahul works as a Developer
Step-by-step Explanation
The child class has its own constructor:
constructor(name, job)
The parent class needs to initialize name.
That is done with:
super(name);
super() calls the parent class constructor.
Then the child class adds its own property:
this.job = job;
So the object contains both:
name → Rahul
job → Developer
Question 9: Override a Parent Method
Problem
Create a Animal class with a sound() method. Create a Dog class that overrides the method.
Solution
class Animal {
sound() {
console.log("Animal makes a sound.");
}
}
class Dog extends Animal {
sound() {
console.log("Dog barks.");
}
}
const dog = new Dog();
dog.sound();
Output
Dog barks.
Step-by-step Explanation
The parent class contains:
sound() {
console.log("Animal makes a sound.");
}
The child class defines its own version:
sound() {
console.log("Dog barks.");
}
When:
dog.sound();
is called, the child class’s method is used.
This is called method overriding.
Question 10: Create a Static Method
Problem
Create a MathHelper class with a static method called square() that returns the square of a number.
Solution
class MathHelper {
static square(number) {
return number * number;
}
}
console.log(MathHelper.square(7));
Output
49
Step-by-step Explanation
The method is declared with static:
static square(number) {
return number * number;
}
A static method belongs to the class itself rather than an individual object.
Therefore, we call it using:
MathHelper.square(7);
We do not need:
const helper = new MathHelper();
Static methods are useful for utility functionality that does not need data from a particular object.
Key Takeaways
- A JavaScript
classis a template for creating objects. constructor()initializes an object’s properties.newcreates an object from a class.thisrefers to the current object in typical class method usage.- Classes can contain methods.
- Multiple objects can be created from the same class.
extendscreates a child class from a parent class.super()is used to call the parent constructor or parent methods.- A child class can override a parent method.
- Private fields use the
#syntax. - Getters allow controlled property access.
- Setters allow controlled property updates.
staticmethods belong to the class rather than individual instances.- Classes are one way to implement object-oriented programming in JavaScript.
- JavaScript’s class syntax is built on top of JavaScript’s prototype-based object model.
FAQs
1. What is a class in JavaScript?
A class is a syntax for defining a structure and behavior that can be used to create objects.
class Student {
constructor(name) {
this.name = name;
}
}
Objects can then be created with:
const student = new Student("Rahul");
2. What is a constructor in JavaScript?
A constructor() is a special method inside a class that runs automatically when a new object is created.
class Student {
constructor(name) {
this.name = name;
}
}
When you write:
const student = new Student("Aman");
the constructor receives "Aman".
3. What does this mean inside a JavaScript class?
Inside an instance method, this normally refers to the object on which the method was called.
class Person {
constructor(name) {
this.name = name;
}
}
For:
const person = new Person("Riya");
this.name refers to the name property of that particular object.
4. What is inheritance in JavaScript?
Inheritance allows one class to use functionality from another class.
class Animal {
eat() {
console.log("Eating");
}
}
class Dog extends Animal {
}
A Dog object can use the inherited eat() method.
5. What is the purpose of super()?
super() is used in a child class to call the parent class constructor.
class Employee extends Person {
constructor(name, job) {
super(name);
this.job = job;
}
}
The super(name) call initializes the part inherited from Person.
6. What is a static method?
A static method belongs to the class itself rather than an individual object.
class Calculator {
static add(a, b) {
return a + b;
}
}
Call it like this:
Calculator.add(10, 20);
7. What are private fields in JavaScript classes?
Private fields are class fields declared with #.
class User {
#password;
constructor(password) {
this.#password = password;
}
}
A private field cannot be directly accessed from outside the class.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
