5.1 Class Declaration
With the introduction of ECMAScript 6 (ES6), JavaScript got a new structure for creating objects and managing inheritance—
the class keyword. Classes provide a more convenient and understandable syntax for creating
objects and working with prototypes.
Classes in JavaScript are syntactic sugar over the existing prototype-based inheritance system. They make creating and managing objects more clear and structured.
Class Declaration
A class in JavaScript is declared using the class keyword, followed by the class name.
The class body is enclosed in curly braces {}.
Example:
class Person {
// Class method
greet() {
console.log('Hello!');
}
}
// Creating an instance of the class
const person = new Person();
person.greet(); // Outputs: Hello!
Class Expression
Classes can be defined both via declaration and expression. Class expressions can be named or unnamed.
Example of a named class:
const Person = class PersonClass {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // Outputs: Hello!
Example of an unnamed class:
const Person = class {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // Outputs: Hello!
5.2 Class Fields and Methods
Class Properties
Class properties in ES6 can only be declared inside the constructor. However, in newer versions of JavaScript (ES2022), class fields have been introduced, allowing properties to be declared outside of the constructor.
Example of using properties in a constructor:
class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
Example of using class fields (ES2022):
class User {
username = 'default_username';
email = 'default@example.com';
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
Explanation:
- In the first example, the
usernameandemailproperties are declared and initialized inside the constructor - In the second example, the
usernameandemailproperties are declared outside the constructor as class fields
Class Methods
A class can contain methods which are defined inside the body of the class. These methods are automatically added to the prototype of created objects.
Example of class methods:
class Animal {
speak() {
console.log('Animal speaks');
}
eat() {
console.log('Animal eats');
}
}
const animal = new Animal();
animal.speak(); // Outputs: Animal speaks
animal.eat(); // Outputs: Animal eats
3.3 Examples of Using Classes
Creating Complex Objects
Classes allow you to create complex objects with various methods and properties.
Example:
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
startEngine() {
console.log(`${this.brand} ${this.model} engine started.`);
}
stopEngine() {
console.log(`${this.brand} ${this.model} engine stopped.`);
}
}
const myCar = new Car('Toyota', 'Camry');
myCar.startEngine(); // Outputs: Toyota Camry engine started.
myCar.stopEngine(); // Outputs: Toyota Camry engine stopped.
GO TO FULL VERSION