JavaScript Getters and Setters

In this tutorial, you'll learn about getters and setters in JavaScript, which are special methods used to control access to an object's properties. Understanding how to use these keywords is crucial for encapsulating data and ensuring that your code adheres to best practices.

Introduction

Getters and setters are essential tools in JavaScript for managing the way properties of an object are accessed and modified. They allow you to enforce rules, validate data, and maintain the integrity of your objects. By using getters and setters, you can encapsulate the internal state of an object and provide a controlled interface for interacting with it.

What Are Getters and Setters?

Getters

A getter is a method that allows you to retrieve the value of a property. It is defined using the get keyword followed by the name of the property. When you access the property, the getter method is automatically invoked.

Setters

A setter is a method that allows you to set the value of a property. It is defined using the set keyword followed by the name of the property. When you assign a value to the property, the setter method is automatically invoked.

Syntax

Here's the basic syntax for defining getters and setters in a class:

1class Person {
2constructor(name) {
3  this._name = name;
4}
5 
6get name() {
7  return this._name.toUpperCase();
8}
9 
10set name(newName) {
11  if (newName.length > 2) {
12    this._name = newName;
13  } else {
14    console.log('Name must be at least 3 characters long.');
15  }
16}
17}

Explanation

• Constructor: Initializes the _name property.
• Getter (get name): Returns the name in uppercase when accessed.
• Setter (set name): Sets a new name only if it is longer than 2 characters.

Practical Example

Let's create a practical example to see how getters and setters work. We'll define a Car class with properties for make, model, and year. We'll use getters and setters to control access to these properties.

1// car.js
2class Car {
3constructor(make, model, year) {
4  this._make = make;
5  this._model = model;
6  this._year = year;
7}
8 
9get make() {
10  return this._make;
11}
12 
13set make(newMake) {
14  if (newMake.length > 0) {
15    this._make = newMake;
16  } else {
17    console.log('Make must not be empty.');
18  }
19}
20 
21get model() {
22  return this._model;
23}
24 
25set model(newModel) {
26  if (newModel.length > 0) {
27    this._model = newModel;
28  } else {
29    console.log('Model must not be empty.');
30  }
31}
32 
33get year() {
34  return this._year;
35}
36 
37set year(newYear) {
38  if (newYear >= 1900 && newYear <= new Date().getFullYear()) {
39    this._year = newYear;
40  } else {
41    console.log('Year must be between 1900 and the current year.');
42  }
43}
44}
45 
46// main.js
47const myCar = new Car('Toyota', 'Corolla', 2020);
48 
49console.log(myCar.make); // Output: Toyota
50myCar.make = 'Honda';
51console.log(myCar.make); // Output: Honda
52 
53console.log(myCar.model); // Output: Corolla
54myCar.model = '';
55console.log(myCar.model); // Output: Model must not be empty. Corolla
56 
57console.log(myCar.year); // Output: 2020
58myCar.year = 1899;
59console.log(myCar.year); // Output: Year must be between 1900 and the current year. 2020

Explanation

• Car Class: Defines properties for make, model, and year.
• Getters: Allow access to the properties.
• Setters: Validate and set new values for the properties.

Summary

What's Next?

In the next tutorial, we'll explore JavaScript Sets. A Set is a collection of unique values, which can be particularly useful for managing distinct items in your applications. Understanding how to use sets will enhance your ability to handle data efficiently.

Stay tuned!