Navigating JavaScript Classes: Understanding Structure, Methods, and Accessors

Navigating JavaScript Classes: Understanding Structure, Methods, and Accessors | CodeSignal Learn

Introduction to JavaScript Classes

Hello and welcome to our new session on JavaScript classes! Classes in JavaScript resemble blueprints used for creating similar objects. If you're a video game player who regularly creates characters, each character possesses different properties but shares common attributes. In this context, classes act as your templates. In this lesson, we'll explore the structure of classes, their main methods, and examine getters and setters.

Understanding Classes

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Class Structure and Main Methods

The class structure is defined using the class keyword followed by the class's name. Inside, we define a constructor method that initializes object properties and additional methods that define class actions or behaviors. If we want our dogs to bark, we can add a bark method: JavaScript class Dog {constructor(name) {this.name = name;} bark() {// The keyword 'this' represents the instance of the class return `${this.name} says woof!`;}} let myDog = new Dog('Spot'); // 'bark' method being used on 'myDog' instance of Dog class console.log(myDog.bark()); // "Spot says woof!" class Dog {constructor(name) {this.name = name;} bark() {// The keyword 'this' represents the instance of the class return `${this.name} says woof!`;}} let myDog = new Dog('Spot'); // 'bark' method being used on 'myDog' instance of Dog class console.log(myDog.bark()); // "Spot says woof!" With this addition, our Dog class now includes a bark method, meaning Spot can bark.

Getters

Getters in a class are methods that get the value of a specific property. To define a getter, we use the get keyword in front of a function. Let's modify the Dog class to include a getter for the name property: JavaScriptclass Dog { constructor(name) { this._name = name; // the underscore (_) is a common convention for private properties which will be discussed later } // Define a getter for the 'name' property get name() { return this._name; } }class Dog { constructor(name) { this._name = name; // the underscore (_) is a common convention for private properties which will be discussed later } // Define a getter for the 'name' property get name() { return this._name; } } Here, the get keyword before the name function makes it a getter, which means it will be automatically invoked when we access the name property. Now, we can create a Dog instance and use our getter to access its name property: JavaScriptlet myDog = new Dog('Spot'); console.log(myDog.name); // "Spot"let myDog = new Dog('Spot'); console.log(myDog.name); // "Spot" Here, when we use myDog.name, instead of directly returning the value of myDog._name, it invokes the getter method that returns the value of this._name of the myDog object. This allows us to abstract away the underlying data and present a simple interface for getting the name attribute of a Dog, making our code more flexible and easier to maintain.

Setters

Following the getters, we now have setter methods. They allow us to run some code every time a specific property is attempted to be changed, or 'set'. We can create a setter for the name property in the Dog class. We want to make sure that a dog's name is not left blank, so we'll add a check in our setter: JavaScriptclass Dog { constructor(name) { this._name = name; } get name() { return this._name; } // Define a setter for the 'name' property set name(value) { // Only update _name if value is not empty if (value.length > 0) { this._name = value; } else { console.log("Error: Name cannot be empty."); } } }class Dog { constructor(name) { this._name = name; } get name() { return this._name; } // Define a setter for the 'name' property set name(value) { // Only update _name if value is not empty if (value.length > 0) { this._name = value; } else { console.log("Error: Name cannot be empty."); } } } Here, the set keyword before our name method marks it as a setter. It is used to update the value of a property. In this case, the _name property. Now, if we create a Dog instance and use our setter to change its name property, we can ensure that a meaningful value is set: JavaScriptlet myDog = new Dog('Spot'); console.log(myDog.name); // "Spot" myDog.name = ''; // Error: Name cannot be empty. console.log(myDog.name); // "Spot" myDog.name = 'Buddy'; console.log(myDog.name); // "Buddy"let myDog = new Dog('Spot'); console.log(myDog.name); // "Spot" myDog.name = ''; // Error: Name cannot be empty. console.log(myDog.name); // "Spot" myDog.name = 'Buddy'; console.log(myDog.name); // "Buddy" Here, when we tried to set the name property to an empty string, it triggered the setter method. As our setter method contains a condition checking that the name cannot be empty, an error message was displayed to the console and the name property remained unchanged. Setters are very useful to protect your object's properties from being incorrectly set or to automatically change other properties when one is set. For instance, here it ensures that we don't accidentally leave a dog nameless.

Introduction to JavaScript Classes

Understanding Classes

Join the 1M+ learners on CodeSignal

Class Structure and Main Methods

Getters and Setters

Getters

Setters

Summary