Introduction to JavaScript Property Getters and Setters

Introduction to JavaScript Property Getters and Setters

Learn what JavaScript property getters and setters are, how they work and how to use them. Property getters and setters allow you to change the default behavior when accessing or modifying object properties. This tutorial teach you all you need to know about them.

Property getters and setters allow you to change the default behavior when accessing or modifying object properties. This tutorial teach you all you need to know about them. You will learn what JavaScript property getters and setters are, how they work and how to use them.

Properties and property getters and setters

In JavaScript, there are two types of properties. The first type is data properties. These are the properties you usually use when you work with objects. The second type is called “accessor properties”. These are a bit different. Put simply, accessor properties are methods.

These methods are executed every time you work with a property. When you access, or get, a value or when you set or change a value. What about property getters and setters? These two represent this group of properties, the accessor properties. To be more specific, getter is that function that is executed when you access some value.

Setter, on the other hand, is that function that is executed when you set or change a value. Interesting thing is that these methods are executed automatically. Well, this assumes there is some existing getter or setter. You don’t have to call them explicitly. You don’t have to call them at all.

All that is needed is someone trying to access and set a value of some property. If there is a getter or setter for that specific property it will be executed. Now, let’s take a look at each.

Property getters

Property getters, or methods, are used to access properties of objects. When you want to get value of some property, and this property has a getter method, that method will be executed. The getter method looks like a regular object method. The difference is the get keyword.

This get keyword is what tells JavaScript that you don’t want to create regular object method, but a getter method. The way to use this keyword is to put it as first, before the name of the getter method. What follows is the name of the getter, parentheses and function body.

// Syntax
// Create an object
const myObj = {
  // Example of a getter method
  // this getter will be executed
  // when you use myObj.myGetter
  get myGetter() {
    // Return something
    return ''
  }
}

// Execute the getter method
// NOTE: when you use getter method
// don't use parentheses at the end
myObj.myGetter

// Example:
// Create an object
const dog = {
  name: 'Jack',

  // Create getter method
  // this getter will be executed
  // when you use dog.getName
  get getName() {
    // this here refers to the "dog" object
    return `My dog's name is: ${this.name}`
  }
}

// Execute the getter method
console.log(dog.getName)
// Output:
// "My dog's name is: Jack"

One thing to remember. Property getter should always return something, some value. If it doesn’t return anything, you will get undefined when you try to use the getter. So, if you do add getter method, make sure it also contains return statement and returns something.

// Create an object
const dog = {
  name: 'Jack',

  get getName() {}
}

// Execute the getter method "getName"
console.log(dog.getName)
// Output:
// undefined

Property setters

When you set or change value of some property JavaScript will execute existing property setter, or setter method, for that property. The syntax of setter method is almost the same as of getter. One thing that is different is the keyword. When you want to define a setter you have to use set keyword, instead of get.

This keyword tells JavaScript that the method that follows is a setter method. Another thing that is different is that you will probably want to specify at least one parameter. The setter method is used to set value. Method parameter is a way to pass that value to a setter so it can be used.

Lastly, unlike, the getter method, the setter method doesn’t have to return anything. Setter is used to set values and no one probably expects it to return anything. So, omitting return statement is perfectly fine.

// Syntax
// Create an object
const myObj = {
  // Example of a setter method
  // this setter will be executed
  // when you use myObj.mySetter = ...
  get mySetter() {
    // Return something
    return ''
  }
}

// Execute the setter method "mySetter"
// NOTE: when you use setter method
// you use as if you were assigning a value
myObj.mySetter = 'Hello'

// Example:
// Create an object
const user = {
  name: 'Stuart Douglass',
  isAdmin: false,

  // Create setter method
  // this setter will be executed
  // when you use user.setName = ...
  set setName(newName) {
    // Allow only string with more than 0 characters
    if (typeof newName === 'string' && newName.length > 0) {
      this.name = newName
    } else {
      if (typeof newName !== 'string') {
        console.log('Please use only string.')
      } else if (newName.length === 0) {
        console.log('Please use name with more than 0 characters.')
      }
    }
  }
}

// Try to change the value of "name" to an empty string
// This executes the setter method for "name"
user.setName = ''
// 'Please use name with more than 0 characters.'

// Try to change the value of "name" to a number
// This executes the setter method for "name"
user.setName = 55
// 'Please use only string.'

// Check the value of "name" property
// This executes the getter method for "name"
console.log(user.name)
// Output:
// 'Stuart Douglass'

// Try to change the value of "name" to a string
// This executes the setter method for "name"
user.setName = 'Jeremy Guire'

// Check the value of "name" property again
// This executes the getter method for "name"
console.log(user.name)
// Output:
// 'Jeremy Guire'

Getters and setters as property wrappers

As you saw on previous examples, you can use getters and setters to restrict changes to property values. For example, you can reject change of a string value if new value is not a string. Or, you can reject the change if the new string is empty. You saw this in the previous with setName setter method.

In this example, there is an if…else statement that checks the new value before it lets it override the old value. This is one potential use case for getter and setter methods. You can use these methods to dynamically check values before someone can access them and/or change them.

One problem is that you can’t create getter or setter with the same name as existing property. This unfortunately doesn’t work. However, you do something different. You can change the name of those original properties to maybe less user-friendly. Then, you can use user-friendly names for getter and setter methods.

In programming, there is a well-known convention to start property name with an underscore (_) to mark it as internal. Internal means that no one should use it directly from the outside the object. You can use this convention with properties for which you want to add getters and setters.

So, here is what to do. First, prefix all properties that will have getter and setter methods with underscore. Second, create property getters and setters with the same names, but now without the underscore prefix. This will give you properties with friendly names that you have more control over.

const car = {
  // Add properties, prefixed with '_'
  _manufacturer: 'BWM',
  _model: 'i8',
  _year: '2020',

  // Create getter method for "_manufacturer"
  get manufacturer() {
    return this._manufacturer
  },

  // Create setter method for "_manufacturer"
  set manufacturer(newManufacturer) {
    if (typeof newManufacturer === 'string' && newManufacturer.length > 0) {
      this._manufacturer = newManufacturer
    }
  },

  // Create getter method for "_model"
  get model() {
    return this._model
  },

  // Create setter method for "_model"
  set model(newModel) {
    if (typeof newModel === 'string' && newModel.length > 0) {
      this._model = newModel
    }
  },

  // Create getter method for "_year"
  get year() {
    return this._year
  },

  // Create setter method for "_year"
  set year(newYear) {
    if (typeof newYear === 'string' && newYear.length > 0) {
      this._year = newYear
    }
  }
}

// Get current manufacturer
// Execute getter methods
console.log(car.manufacturer)
// Output:
// 'BWM'

// Get current model
console.log(car.model)
// Output:
// 'i8'

// Get current year
console.log(car.year)
// Output:
// '2020'

// Change some values
// Execute setter methods
car.manufacturer = 'Tesla'
car.model = 'Model S'

// Get new manufacturer
// Execute getter methods
console.log(car.manufacturer)
// Output:
// 'Tesla'

// Get new model
console.log(car.model)
// Output:
// 'Model S'

javascript programming web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.