Properties with get and set in Javascript

Learn about getters and setters in Javascript, called accessors, which allow you to create what are known as computed properties whose value is extracted from methods declared with get and set.

In this article we are going to learn about Javascript getters and setters, a tool available in Javascript objects, which has existed in the language for quite some time and which many are unaware of. They are the getters and setters that you produce with get and set on Javascript objects or classes.

In principle, this utility is available in very old browsers, as it is part of ES5, so you can use it with peace of mind. If you know object-oriented programming, and concepts like encapsulation, it will make more sense to you, but if you don’t, it doesn’t hurt to take a look at it, so when you find code that makes use of this language construct, you know what it’s about. about.

What is a getter or a setter

For those of you who haven’t heard of them, getters and setters are common object constructs that allow you to access values ​​or properties, without revealing how the classes are implemented. In short, they allow you to encapsulate objects and avoid application maintenance when the way of implementing those objects changes.

Utility aside, in practice they are simply methods that allow you to access data from objects, to read them or assign new values. What the setter does is assign a value and the getter is in charge of receiving a value.

However, the getters and setters that we are going to talk about in Javascript are a bit different from the traditional ones.

Also called accessories

Javascript get and set are technically called accessors or also “Object Accessors”. You’ll probably find this terminology in various Javascript documentation, so you should be familiar with the term.

Another way to name this type of object members is with the name of computed properties or “computed properties” in English.

Computed properties of Javascript objects

The get and set that we deal with in this article are basically useful for accessing properties of objects that are the result of computing other existing properties.

The clearest example of setters and getters in Javascript is with the person object. This object could have a couple of properties like “firstname” and “lastname”. In addition, we might want to know the full name, but this would not really be a new property of the object, but rather the result of a concatenation computation between the first name and the last name that we have in the two previous properties.

That is, “fullName” could be a computed property. In traditional languages, even Javascript if we wanted to, we could implement that computed value with a method, like this:

var person = { name: ‘Miguel Angel’, last name: ‘Alvarez Sánchez’, getFullName: function() { return this.name + ‘ ‘ + this.last name; } } Note: The code above, and the code you’ll see in the rest of this article, is based on . Normally you would use classes, but we will keep this coding style since the classes were added into the language in the release and in this manual we are dealing with the traditional version of Javascript (ES5).

We could access the full name with this code:

var personFullName = person.getFullName();

However, with Javascript’s get and set constructs the way of defining this code changes a bit. Using the reserved word “get” I can define a function that is responsible for performing the computation. What the function returns will be the value of the computed property. The code wanted us more or less like this:

var person = { name: ‘Miguel Angel’, last name: ‘Alvarez Sánchez’, get fullName() { return this.name + ‘ ‘ + this.last name; } }

The novelty is the use of the “get” construct in the previous code, which helps us to define a kind of method. However, it is not a traditional method, but rather a computed property, that is, a property of an object that has to execute a function to resolve its value. This point should be made clear to us by the following code, where we use that computed property “fullName”.

var fullNameperson = person.fullName;

Now in the variable “NombreCompletoPerson” we have the value of the concatenated name and surname. Note that to access this “getter” we use “person.fullName”, which is as if we were accessing a conventional property, although internally in our object there is no such property, but a computation is performed to be able to evaluate it.

Full example with get and set

In the following example we are going to delve a little into Javascript getters and setters, implementing a new use case that will surely clear up any doubts. We will also see how set works, to assign a “computed” value.

In our example we have an interval object that for its implementation defines a maximum value and a minimum value. But we want to have a mechanism that offers us the values, integers, included in that interval. To practice with get and set we are going to do it through a computed property.

Although first we are going to see how it would be solved in a traditional way, with a method of a lifetime.

var range = { minValue: 3, maxValue: 4, containedValues: function() { var contents = ; for(var i=this.minimumValue; i<=this.maximumValue; i++) { contents.push(i); } return contents; } }

As you can see, to access the contained values ​​we would have to execute the corresponding method:

var values ​​= interval.containedValues();

Now we are going to see how to do the same but with a “get” property, computed.

var range = { minValue: 3, maxValue: 7, get contentValues() { var contents = ; for(var i=this.minimumValue; i<=this.maximumValue; i++) { contents.push(i); } return contents; }, }

Note: We haven’t mentioned it yet, but properties generated with get are implemented with functions and cannot receive any parameters.

Now we would call the method like this.

var values ​​= interval.containedValues;

We still have to see an example with the “set” construction. In this case, what we are going to do is receive a parameter with what has to be assigned and make the changes in the properties of the objects that are relevant.

var range = { minValue: 3, maxValue: 7, get contentValues() { var contents = ; for(var i=this.minimumValue; i<=this.maximumValue; i++) { contents.push(i); } return contents; }, set containedValues(arrayValues) { arrayValues.sort(); this.minimumValue = arrayValues; this.maxValue = arrayValues; } }

The setter is defined in a similar way to the getter. In this case, as we have said, a function will be used that receives data that must be set. The fun is in the use mode of a setter, which is not a traditional method in which parameters would be sent, but is called by an assignment.

interval.containedValues ​​= ;

The value that we assign to the property defined as a setter is the one that is received as the value of the parameter.

That’s all, I hope you can take advantage of Javascript getters and setters, an interesting feature of the language, which is increasingly used in different areas of applications.