ECMAScript 2015 (ES6) introduced JavaScript classes, which provide a cleaner and more structured way to create objects. Before ES6, JavaScript used constructor functions and prototypes to simulate object-oriented programming. While that approach was powerful, it was harder for beginners to understand. ES6 classes make object creation more readable and closer to how classes work in other programming languages.
It is important to note that JavaScript classes are syntactic sugar over prototypal inheritance. This means classes do not change how JavaScript works internally, they simply provide a clearer syntax for developers. Using ES6 classes, we can easily organize code using object-oriented concepts such as encapsulation, abstraction, and reuse.
A class is a blueprint used to create objects. It defines what properties (data) and methods (functions) objects created from it will have. When we define a class, we are not creating an object yet, we are only defining the structure that future objects will follow.
There are two ways to create a class in JavaScript: class declaration and class expression.
A class declaration uses the class keyword followed by the class name. By convention, class names start with a capital letter and follow the CamelCase format.
class Person {
constructor(name) {
this.name = name;
}
}
A class expression assigns a class to a variable.
const Person = class {
constructor(name) {
this.name = name;
}
};
Both approaches work the same way, the difference is only in how the class is defined.
<aside>
Practice: Create a class called Car that stores brand.
</aside>
An instance is an actual object created from a class. While a class is just a blueprint, an instance is the real object that holds data. We create an instance using the new keyword. Each instance has its own copy of properties, but all instances share the class methods.
Another important point is that class declarations are not hoisted. This means we must define the class before creating instances from it.
class Person {
constructor(name) {
this.name = name;
}
}
let person1 = new Person("John");
console.log(person1.name);
Here, person1 is an instance of the Person class.
<aside>
Practice : Create two instances of Person with different names and print them.
</aside>
The constructor is a special method inside a class that runs automatically when a new instance is created. Its main purpose is to initialize properties and set up the initial state of the object. A class can only have one constructor. If no constructor is defined, JavaScript automatically creates an empty constructor.
class Student {
constructor(name, grade) {
this.name = name;
this.grade = grade;
}
}
When we create new Student("Ali", 10), the constructor assigns those values to the instance.
<aside>
Practice : Create a class Laptop with properties brand and price.
</aside>
Properties are variables that store data related to an object, while methods are functions that define the behavior of the object. Properties describe the state of the object, and methods allow the object to perform actions or modify its state.
class Counter {
count = 0;
increment() {
this.count++;
}
show() {
console.log(this.count);
}
}
In this example, count is a property, and increment() and show() are methods.
<aside>
Practice : Create a class Car with a method drive() that prints "Car is driving".
</aside>
this KeywordThe this keyword refers to the current instance of the class. It allows us to access properties and methods that belong to the object. Without this, JavaScript would not know which object’s data we are referring to.
class Dog {
constructor(name) {
this.name = name;
}
bark() {
console.log(this.name + " is barking");
}
}
When dog1.bark() is called, this refers to dog1.
By default, properties in JavaScript are public, meaning they can be accessed and modified outside the class. Public properties are easy to use but can sometimes lead to unsafe changes.
class User {
constructor(username) {
this.username = username;
}
}
Private variables were introduced in ES2022. They are declared using the # symbol and can only be accessed inside the class. This helps protect sensitive data and supports encapsulation.
class BankAccount {
#balance;
constructor(balance) {
this.#balance = balance;
}
getBalance() {
returnthis.#balance;
}
}
<aside>
Practice : Create a class Secret with a private variable #code and a method showCode().
</aside>
Getters and setters allow controlled access to properties. A getter is used to retrieve a value, and a setter is used to update a value. They help validate data and protect internal state.
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
get area() {
returnthis.width * this.height;
}
}
Here, area is accessed like a property but runs a function internally.
A setter allows us to control how values are updated:
class User {
constructor(name) {
this.#name = name;
}
set name(value) {
if (value.length > 2) {
this.#name = value;
} else {
throw new Error("Name must be more than 2 characters.");
}
}
get name() {
return this.#name;
}
}
let user1 = new User("Sam");
// Using getter
console.log(user1.name);
// Output: Sam
// Using setter (valid value)
user1.name = "Alexander";
console.log(user1.name);
// Output: Alexander
// Using setter (invalid value)
user1.name = "Al";
// Output: Name must be more than 2 characters.
console.log(user1.name);
// Output: Alexander (unchanged)
<aside>
Practice : Create a class Temperature with
property `#celsius`
getter `fahrenheit`
setter `celsius` that prevents negative values
</aside>
ES6 classes provide a clean way to implement object-oriented programming in JavaScript. A class defines a blueprint, and instances are created using the new keyword. The constructor initializes properties, while properties store data and methods define behavior. The this keyword refers to the current instance. Public variables are accessible everywhere, while private variables protect internal data. Getters and setters allow controlled access to properties and help enforce validation.
The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0
Found a mistake or have a suggestion? Let us know in the feedback form.