6.3 Getters & Setters¶

The Underscore Prefix¶

Task 1: Study the following example.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this.width = width;
    this.height = height;
    this.thickness = thickness;
    this.material = material;
  }

  /*Getters*/
  get width(){
    return this.width;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.width);

The result is: Uncaught TypeError: Cannot set property width of # < Door > which has only a getter at new Door

Task 2: Study the following example.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this.height = height;
    this.thickness = thickness;
    this.material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.width);

The result is: 0.9

Task 3: Study the following example.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this.$width = width;
    this.height = height;
    this.thickness = thickness;
    this.material = material;
  }

  /*Getters*/
  get width(){
    return this.$width;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.width);

The result is: 0.9

Task 4: Study the following example.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this.Owidth = width;
    this.height = height;
    this.thickness = thickness;
    this.material = material;
  }

  /*Getters*/
  get width(){
    return this.Owidth;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.width);

The result is: 0.9

Info

When we add a getter method that has the same name as a class property, we get an error.

To solve this, we precede the original class properties by a character. Therefore, we can distinguish the original properties from the getter methods.

The original prefix can be anything. By convention, we use _ as a prefix.

Getters¶

Task 5: Study the following example.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.height);

The result is: 2.1

Task 6: Refer to task 5; Add a getter for the thickness property in the following class.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get thickness(){
    return this._thickness;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.thickness);

The result is: 0.24

Task 7: Refer to task 6; Add a getter for the material property in the following class.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get thickness(){
    return this._thickness;
  }
  get material(){
    return this._material;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.material);

The result is: Wood

Setters¶

Task 8: Study the following example.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get thickness(){
    return this._thickness;
  }
  get material(){
    return this._material;
  }

  /*Setters*/
  set width(w){
    this._width = w;
  }
}

let door1 = new Door();
door1.width = 1.1;
console.log(door1.width);

The result is: 1.1

Task 9: Study the following example.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get thickness(){
    return this._thickness;
  }
  get material(){
    return this._material;
  }

  /*Setters*/
  set width(w){
    this._width = w;
  }
  set height(h){
    this._height = h;
  }
}

let door1 = new Door();
door1.height = 1.5;
console.log(door1.height);

The result is: 1.5

Task 10: Add a setter method for the thickness property in the following class.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get thickness(){
    return this._thickness;
  }
  get material(){
    return this._material;
  }

  /*Setters*/
  set width(w){
    this._width = w;
  }
  set height(h){
    this._height = h;
  }
  set thickness(t){
    this._thickness = t;
  }
}

let door1 = new Door();
door1.thickness = 0.2;
console.log(door1.thickness);

The result is: 0.2

Task 11: Add a setter method for the material property in the following class.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get thickness(){
    return this._thickness;
  }
  get material(){
    return this._material;
  }

  /*Setters*/
  set width(w){
    this._width = w;
  }
  set height(h){
    this._height = h;
  }
  set thickness(t){
    this._thickness = t;
  }
  set material(m){
    this._material = m;
  }
}

let door1 = new Door();
door1.material = "Iron";
console.log(door1.material);

The result is: Iron

Convention

By convention, the set and get methods have the same name as the original property.

Basic Usage¶

Task 12: Study the following example.

class User{

  /*constructor*/
  constructor(name, password){
    this._name = name;
    this._password = password;
  }

  /*Methods*/
  validatePassword(password){
    return password.toString().length > 12 ? true : false;
  }

  /*Setters*/
  set password(p){
    if(this.validatePassword(p)){
      this._password = p;
    }
  }

  /*Getters*/
  get password(){
    return this._password;
  }
}

let user1 = new User("Nawras", "sjdkspabhfsd");
user1.password = "123";

console.log(user1.password);

The result is: sjdkspabhfsd

Task 13: Study the following example.

class User{

  /*constructor*/
  constructor(name, password){
    this._name = name;
    this._password = password;
  }

  /*Methods*/
  validatePassword(password){
    return password.toString().length > 12 ? true : false;
  }

  /*Setters*/
  set password(p){
    if(this.validatePassword(p)){
      this._password = p;
    }
  }

  /*Getters*/
  get password(){
    return this._password;
  }
}

let user1 = new User("Nawras", "sjdkspabhfsd");
user1.password = "imverystrongpassword";

console.log(user1.password);

The result is: imverystrongpassword

Task 14: Study the following example.

class Student{

  /* Constructor */
  constructor(id, name, mark1, mark2, mark3, mark4){
    this.id = id;
    this.name = name;
    this.mark1 = mark1;
    this.mark2 = mark2;
    this.mark3 = mark3;
    this.mark4 = mark4;
  }

  /* Methods */
  studentAverage(){
    return (this.mark1 + this.mark2 + this.mark3 + this.mark4) / 4;
  }
  passed(){
    return this.studentAverage() >= 60 ? "has passed" : "has failed";
  }
  _info(){
    return `The student ${this.name} of the id ${this.id} got an average of ${this.studentAverage()}%. ${this.name} ${this.passed()}.`
  }

  /* Getters */
  get info(){
    return this._info();
  }
}

let student1 = new Student(56, "Ali Ali", 60, 50, 70, 90);
console.log(student1.info);

The result is: The student Ali Ali of the id 56 got an average of 67.5%. Ali Ali has passed.

Task 15: Study the following example.

class diskSpace{

  /* Constructor */
  constructor(id, size){
    this.id = id;
    this.size = size; // in bytes
  }

  /* Methods */
  sizeInKB(){
      return this.size / 1024;
  }
  sizeInMB(){
      return this.size / 1024 / 1024;
  }
  sizeInGB(){
      return this.size / 1024 / 1024 / 1024;
  }

  /* Getters */
  get KB(){
    return this.sizeInKB();
  }
  get MB(){
    return this.sizeInMB();
  }
  get GB(){
    return this.sizeInGB();
  }
}

let space1 = new diskSpace(45, 1024);
let space2 = new diskSpace(55, 2048000);
let space3 = new diskSpace(87, 5000000540);

console.log(space1.KB);
console.log(space2.MB);
console.log(space3.GB);

The result is as follows:

1
1.953125
4.656613375991583

Should we use getters and setters in our class?

Use getters and setters to:

validate the given properties values before setting them.
hide the logic behind setting values.

Extra Practice¶

Task 16: Represent vehicles in JavaScript class.

/*
let vehicle = {
  name: null,
  type: null,
  color: null
}
*/

class Vehicle{

  /* Constructor */
  constructor(name, type, color){
    this.name = name;
    this.type = type;
    this.color = color;
  }
}

let vehicle1 = new Vehicle("Alfa Romeo", "car", "red");
let vehicle2 = new Vehicle("Honda", "truck", "white");

console.log(vehicle1);
console.log(vehicle2);

The result is as follows:

Vehicle {name: "Alfa Romeo", type: "car", color: "red"}
Vehicle {name: "Honda", type: "truck", color: "white"}

Task 17: Refer to task 16; add the info method to the Vehicle class.

/*
let vehicle = {
  name: null,
  type: null,
  color: null,
  info: function(){
    return `The ${this.color} ${this.name} is an amazing ${this.type} vehicle`;
  }
}
*/

class Vehicle{

  /* Constructor */
  constructor(name, type, color){
    this.name = name;
    this.type = type;
    this.color = color;
  }

  /* Methods */
  info(){
    return `The ${this.color} ${this.name} is an amazing ${this.type} vehicle`;
  }
}

let vehicle1 = new Vehicle("Alfa Romeo", "car", "red");
let vehicle2 = new Vehicle("Honda", "truck", "white");

console.log(vehicle1.info());
console.log(vehicle2.info());

The result is as follows:

The red Alfa Romeo is an amazing car vehicle
The white Honda is an amazing truck vehicle

Task 18: Refer to task 17; add a getter to the info method.

class Vehicle{

  /* Constructor */
  constructor(name, type, color){
    this.name = name;
    this.type = type;
    this.color = color;
  }

  /* Methods */
  _info(){
    return `The ${this.color} ${this.name} is an amazing ${this.type} vehicle`;
  }

  /* Getters */
  get info(){
    return this._info();
  }
}

let vehicle1 = new Vehicle("Alfa Romeo", "car", "red");
let vehicle2 = new Vehicle("Honda", "truck", "white");

console.log(vehicle1.info);
console.log(vehicle2.info);

The result is as follows:

The red Alfa Romeo is an amazing car vehicle
The white Honda is an amazing truck vehicle