WittCode💻

JavaScript Get and Set

By

Learn how to use JavaScript getters and setters. We will also go over getters and setters in a class versus object and accessor properties vs data properties.

Table of Contents 📖

JavaScript Property Types

JavaScript consists of two property types: data properties and accessor properties. Data properties are properties that associate data with an object.

const person = {
  // Data property
  greeting: '',
}

Accessor properties are methods to get and set the property of an object. These properties are made with the keywords get and set.

const person = {
  // Data property
  greeting: '',
  // Accessor property
  set firstName(value) {
    this.greeting = value + ' is my first name';
  },
  // Accessor property
  get firstName() {
    return this.greeting + ' and don't call me';
  }
};

What are Set and Get?

Both get and set are accessor properties used to access and change the value of a property in an object. The get syntax binds an object property to a function that is called when the property is looked up. The set syntax binds an object property to a function that is called when the property is set. In other words, set is used to execute a function whenever a property's value changes while get is used to execute a function whenever a property's value is looked up.

Object Demonstration

Lets first demonstrate set and get with an object. To use them, place each word before a function.

const person = {
  greeting: '',
  set firstName(value) {
    this.greeting = value + ' is my first name';
  },
  get firstName() {
    return this.greeting + ' and don't call me';
  }
};

person.firstName = 'WittCode';

// WittCode is my first name and don't call me
console.log(person.firstName);

Here, we use the setter to set the greeting property and the getter to get the greeting value. Specifically, setting the firstName property of the person object calls the setter firstName function while getting the firstName property calls the getter firstName function. Lets use another demonstration, this time with an array.

const person = {
  favFoods: [],
  set favFood(food) {
    this.favFoods.push(food);
  },
  get favFood() {
    let message = 'My fav foods are ';
    this.favFoods.forEach(favFood => {
      message += favFood + ', ';
    });
    return message;
  }
};

person.favFood = 'cereal';
person.favFood = 'cheese';
person.favFood = 'pizza';

// My fav foods are cereal, cheese, pizza,
console.log(person.favFood);

Here, we can use the setter to abstract away some underlying logic when working with the person object. However, setters and getters are often better used with classes.

Class Demonstration

Lets create a simple demonstration using a Person class.

class Person {
  #name;

  set name(name) {
    this.#name = name;
  }

  get name() {
    return 'Hello! My name is ' + this.#name;
  }
}

const person = new Person();
person.name = 'WittCode';
console.log(person.name);

Here we use the setter to set the private name property of the person object. We then use the getter to get the value of the name property with some appended text. Lets add another property that uses some logic.

class Person {
  #name;
  #age;

  set name(name) {
    this.#name = name;
  }

  get name() {
    return 'Hello! My name is ' + this.#name;
  }

  set age(age) {
    this.#age = age;
  }

  get age() {
    if (this.#age > 18) {
      return 'I am an adult';
    } else {
      return 'I am not an adult';
    }
  }
}

const person = new Person();
person.name = 'WittCode';
person.age = 28;
// Hello! My name is WittCode
console.log(person.name);
// I am an adult
console.log(person.age);

This code makes it so the actual age property isn't exposed, but rather a string identifying the user as an adult or not.

Why Use Get and Set?

The main reason to use getters and setters is to secure better data quality. This means we know where values of objects are being set and retrieved from. Also, we can abstract away some underlying logic when properties are set, use simpler syntax, and make the syntax for both properties and methods the same.