Classes in JavaScript
20 January, 2023
1
1
1
Contributors
What are Classes?
In JavaScript, classes define an object's structure and behaviour using a class syntax similar to the class syntax in other programming languages. Classes were introduced in JavaScript with the release of ECMAScript 6 (ES6) and are considered syntactical sugar on top of the prototype-based inheritance.
Here's an example of a class in JavaScript:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
let person = new Person("John Doe", 30);
person.sayHello(); // "Hello, my name is John Doe and I am 30 years old."In this example, the Person class is defined using the class keyword. The class has a constructor method that is called when a new class instance is created. The constructor method is used to initialize the object's properties, in this case, it initializes the name and age properties. The class also has a sayHello method, which is a method that is shared by all instances of the class.
A class can also have a static method, which is a method that is associated with the class itself rather than its instances.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
static createPerson(name, age) {
return new Person(name, age);
}
}
let person = Person.createPerson("John Doe", 30);
person.sayHello(); // "Hello, my name is John Doe and I am 30 years old."In this example, the createPerson method is a static method called on the Person class. It creates a new instance of the class and returns it.
Private Fields
As of ECMAScript 2020, JavaScript has introduced a new feature called "Private fields" that allows to creation private properties on an object.
A private field is a property whose name is prefixed with a # symbol. The private field can only be accessed within the class and not from outside the class.
Here's an example of private fields in JavaScript:
class Person {
#name;
#age;
constructor(name, age) {
this.#name = name;
this.#age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.#name} and I am ${this.#age} years old.`);
}
}
let person = new Person("John Doe", 30);
console.log(person.#name); // Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class
console.log(person.#age); // Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class
person.sayHello(); // "Hello, my name is John Doe and I am 30 years old."In this example, the name and age fields are private **and** can only be accessed within the class, not from outside.
Private Class
JavaScript does not have built-in support for private classes, however, it's possible to achieve a similar level of encapsulation by using closures and the module pattern.
A closure is a function that has access to variables in its parent scope, even after the parent function has finished executing. This allows for data and functions to be hidden within the closure, and only exposed through a public interface.
The module pattern is a design pattern that uses closures to create a private and public API for a module.
Here's an example of a private class using closures and the module pattern:
const PersonModule = (function() {
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
return {
createPerson: function(name, age) {
return new Person(name, age);
}
}
})();
let person = PersonModule.createPerson("John Doe", 30);
console.log(person.name); //undefined
console.log(person.age); //undefined
person.sayHello(); // "Hello, my name is John Doe and I am 30 years old."In this example, the Person class is defined within the closure of the PersonModule IIFE (Immediately-invoked function expression), which creates a private scope for the class. The class is not accessible from outside the closure, and the only way to create an instance of the class is through the createPerson method, which is the only method exposed by the public API of the module.