DEV Community

Cover image for JAVASCRIPT GETTERS AND SETTERS
Maame Afia Fordjour
Maame Afia Fordjour

Posted on

JAVASCRIPT GETTERS AND SETTERS

INTRODUCTION

Special methods in JavaScript that provide you access to object properties are called getters and setters. It is the purpose of getters to read values from properties and setters to write values to them. You will learn how to use getters and setters in JavaScript by following this tutorial.

WHY DO WE NEED TO USE GETTERS AND SETTERS?

📌You can manage who can access and change the properties of your object by using getters and setters.

📌 Before data is set to an object, it can be verified using getters and setters.

📌 It is possible to create attributes that are dynamically calculated by using getters and setters.

GETTER

Getters are functions that provide access to an object's properties. Though they are not invoked on an instance of an object, they are comparable to methods. They are called on the actual item instead. Getters are frequently used to retrieve values—like nested properties—from an object that are not readily available.

The get keyword is used to define getters, followed by a function. This function returns a value and accepts no arguments. Any valid JavaScript value, including objects and arrays, may be the value that is returned.

Lets take an example of a getter defined on an object named person is provided below. The value of the object's name property is returned by the getter, name:

const user = {
  firstName: 'John',
  lastName: 'Doe',
  get fullName(firstName, lastName) {
    return `${firstName} ${lastName}`;
  }
};

Enter fullscreen mode Exit fullscreen mode

An object named "user" with a getter named "fullName" is used in this example. The getter delivers the user's entire name after receiving two arguments: firstName and lastName. The user's whole name may then be retrieved using the getter: user.fullName('John', 'Doe') // returns 'John Doe'

SETTERS

You will master the fundamentals of utilizing the JavaScript Setter in this course. We'll go over how to make and use a setter as well as how to use it to organize and streamline your codebase. You will know more about using the JavaScript Setter to improve the codebase by the end of this session.

WHY SHOULD WE USE SETTERS?

📌 Divide up your code into distinct functions to help you organize your codebase.

📌 The Setter makes it simple to access and edit particular sections of your code.

📌 Having a centralized location to debug your code will streamline the debugging process.

A function that modifies an object's property value is called a setter. Usually, setters are used when you wish to regulate the setting of a property. For instance, you could wish to guarantee that a property's value is always valid when it is set. The set keyword, the property name, and the function declaration are used to define setters.

Lets take an example;

let myObject = {
  myProperty: 'value',
  set myProperty(value) {
    if (value === 'valid value') {
      this.myProperty = value;
    }
  }
};
Enter fullscreen mode Exit fullscreen mode

set myProperty(value) { ... } To use a setter, you can assign a value to the property like you would any other property.

let myObject = {
  myProperty: 'value',
  set myProperty(value) {
    if (value === 'valid value') {
      this.myProperty = value;
    }
  }
};

myObject.myProperty = 'value';
Enter fullscreen mode Exit fullscreen mode

myObject.myProperty = 'value'; When you give a property a value, the setter function is called. The assigned value is supplied as an input to the setter.

let myObject = {
  myProperty: 'value',
  set myProperty(value) {
    if (value === 'valid value') {
      this.myProperty = value;
    }
  }
};

myObject.myProperty = 'value';
Enter fullscreen mode Exit fullscreen mode

myObject.myProperty = 'value'; Before the value is set, you can do any validation or change on it inside the setter.

let myObject = {
  myProperty: 'value',
  set myProperty(value) {
    if (value === 'valid value') {
      this.myProperty = value;
    }
  }
};

myObject.myProperty = 'value';
console.log(myObject.myProperty);
Enter fullscreen mode Exit fullscreen mode

myObject.myProperty = 'value'; myObject.myProperty // 'value' Setters are helpful for making sure values are always valid and for modifying values before setting them if needed.

Top comments (0)