JavaScript Classes: Comprehensive Guide
JavaScript Classes: Comprehensive Guide 1
What are Classes in JavaScript? 2
Basic Syntax 2
Example: Define and Instantiate a Class 3
Class Methods and Properties 3
Example: Static Methods 3
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
1
Inheritance with Classes 3
Example: Class Inheritance 3
Private and Public Fields 4
Example: Private Fields 4
Getters and Setters 4
Example: Using Getters and Setters 5
Exercises 5
Exercise 1: Create a Vehicle Class 5
Exercise 2: Implement a Calculator Class 6
Exercise 3: Inheritance 6
Multiple-Choice Questions 7
Question 1: 7
Question 2: 7
Question 3: 7
Best Practices for Using Classes 8
JavaScript Classes provide a way to create reusable object templates using a modern syntax.
This guide covers the basics, advanced features, practical examples, exercises, and
multiple-choice questions to help you master JavaScript classes.
What are Classes in JavaScript?
Classes are syntactic sugar over JavaScript’s prototype-based inheritance model. They allow
you to define object templates with properties and methods.
Basic Syntax
class ClassName {
constructor(param1, param2) {
this.property1 = param1;
this.property2 = param2;
}
method1() {
console.log(this.property1);
}
}
● constructor: A special method for initializing object properties.
● this: Refers to the instance of the class.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
2
Example: Define and Instantiate a Class
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hi, my name is ${this.name} and I'm ${this.age} years
old.`);
}
}
const person1 = new Person("Alice", 30);
person1.greet(); // Output: Hi, my name is Alice and I'm 30 years old.
Class Methods and Properties
1. Instance Methods: Methods available on instances of the class.
2. Static Methods: Methods that belong to the class itself, not the instances.
Example: Static Methods
class MathHelper {
static add(a, b) {
return a + b;
}
}
console.log(MathHelper.add(5, 3)); // Output: 8
Inheritance with Classes
Classes support inheritance through the extends keyword. The super keyword calls the
parent class's constructor or methods.
Example: Class Inheritance
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
3
}
}
class Dog extends Animal {
speak() {
super.speak();
console.log(`${this.name} barks.`);
}
}
const dog = new Dog("Rex");
dog.speak();
// Output:
// Rex makes a noise.
// Rex barks.
Private and Public Fields
JavaScript classes can define private and public fields.
Example: Private Fields
class BankAccount {
#balance = 0;
deposit(amount) {
this.#balance += amount;
}
getBalance() {
return this.#balance;
}
}
const account = new BankAccount();
account.deposit(100);
console.log(account.getBalance()); // Output: 100
// console.log(account.#balance); // Error: Private field '#balance'
must be declared in an enclosing class
● #balance: Denotes a private field accessible only within the class.
Getters and Setters
Getters and setters are used to define accessors for properties.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
4
Example: Using Getters and Setters
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
get area() {
return this.width * this.height;
}
set dimensions({ width, height }) {
this.width = width;
this.height = height;
}
}
const rect = new Rectangle(10, 20);
console.log(rect.area); // Output: 200
rect.dimensions = { width: 5, height: 15 };
console.log(rect.area); // Output: 75
Exercises
Exercise 1: Create a Vehicle Class
1. Create a class Vehicle with properties make and model.
2. Add a method getDetails that prints make and model.
Solution:
class Vehicle {
constructor(make, model) {
this.make = make;
this.model = model;
}
getDetails() {
console.log(`Make: ${this.make}, Model: ${this.model}`);
}
}
const car = new Vehicle("Toyota", "Corolla");
car.getDetails(); // Output: Make: Toyota, Model: Corolla
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
5
Exercise 2: Implement a Calculator Class
1. Create a class Calculator with static methods add, subtract, multiply, and
divide.
2. Test the methods with sample inputs.
Solution:
class Calculator {
static add(a, b) {
return a + b;
}
static subtract(a, b) {
return a - b;
}
static multiply(a, b) {
return a * b;
}
static divide(a, b) {
return b !== 0 ? a / b : "Cannot divide by zero";
}
}
console.log(Calculator.add(5, 3)); // Output: 8
console.log(Calculator.divide(10, 2)); // Output: 5
Exercise 3: Inheritance
1. Create a parent class Employee with properties name and position.
2. Create a child class Manager that inherits from Employee and adds a method
announce.
Solution:
class Employee {
constructor(name, position) {
this.name = name;
this.position = position;
}
details() {
console.log(`${this.name} works as a ${this.position}`);
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
6
}
}
class Manager extends Employee {
announce() {
console.log(`${this.name} is a manager!`);
}
}
const manager = new Manager("John", "Manager");
manager.details(); // Output: John works as a Manager
manager.announce(); // Output: John is a manager!
Multiple-Choice Questions
Question 1:
What is the purpose of the constructor in a class?
1. To define class methods.
2. To initialize properties of the class.
3. To extend another class.
4. To create static methods.
Answer: 2. To initialize properties of the class.
Question 2:
Which keyword is used to inherit from another class in JavaScript?
1. implements
2. extends
3. inherits
4. prototype
Answer: 2. extends
Question 3:
How do you define a private field in a JavaScript class?
1. Use the private keyword.
2. Use the # symbol before the field name.
3. Prefix the field name with _.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
7
4. Declare the field inside a method.
Answer: 2. Use the # symbol before the field name.
Best Practices for Using Classes
1. Encapsulation: Use private fields and methods to hide implementation details.
2. DRY Principle: Use inheritance to avoid duplicate code.
3. Static Methods: Use static methods for utility functions that don't depend on instance
data.
4. Meaningful Names: Use meaningful class and method names for readability.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
