Our last post looked at object constructors in JavaScript. In this post, we plan to refine our knowledge of object constructors by adding Getter and Setter functions. We will also be looking at JavaScript object prototypes which are a feature that is a consequence of the DOM.

Using Prototypes in JavaScript

Object Prototype flowIt is probably best to take a look at object prototypes first. When you use a constructor to create an object, that object inherits it’s prototype’s properties and methods. An array object in JavaScript will inherit the various properties and methods which are specific to arrays in JavaScript. Objects defined with the new Object() constructor function inherit from a prototype called Object.prototype.

You can think of the Object.prototype in this way; when you create an object constructor with a function you define a set of properties and methods for that specific object. If you want to change one of those properties or methods you can’t directly do so without completely rewriting the constructor function. The Object.prototype allows us to change the shape of the object constructor without us having to rewrite the function. Let us take a look at our person object example from before.

As you can see, we can use the Object.prototype keyword to add both methods and properties to all instances of an object rather than just one. If we try to add a method or property without using the prototype keyword we will consequently not be able to change all of the instances of that object. Now that we are able to change and add methods and properties to objects, let’s look at how you protect and relate them to one another.

Getter and Setter Functions in JavaScript

Object AbstractionFormal Getter and Setter function syntax was finally introduced to JavaScript in ES5. In ES6, this was further iterated upon with the introduction of classes. Classes are a topic we will go over some time later. For now, let’s look at Getter and Setter functions in object literals and the Object.defineProperty syntax.

Remember the metaphor we were using before; variables are like labels and objects are containers. Getter and Setter functions allow the program to reach into the containers to either get or set a value without breaking everything else. Getter and Setter functions also allow us to relate one piece of data with another in a way that is safe. Let’s first look at a simple object literal that features Getters and Setters.

In this example, we used a property called fullName to allow us to set the other two properties of the object, firstName and lastName. This consequently lets us define a relationship between all of the variables but also it lets just change the object much quicker. Note, we used the split() function to convert the fullName string to an array of length two. We could iterate on this setter function further and use a set of conditionals to force it to only take two strings but we will leave that for later.

These two keywords, the get and set keywords allow us to define two accessor functions. When we try to access the variable fullName, the fullName() getter function runs and we get it’s return value. When we want to access and set the fullName variable, the fullname(name) setter function is run with the value we assign passed through it.

The Object.defineProperty Syntax

There is another way to define getters and setter methods in JavaScript that is more formal. This method makes use of the Object.defineProperty method. Let’s look at an example of this.

This example is a little bit advanced but if you look closely, you can see that what is happening here isn’t much different from what we did in our first example. This method of defining Getters and Setters also allows us to declare if the object is configurable or enumerable. We discussed what this was in our original post on objects, but configurable values are mutable values while enumerable values can be looped through. Also, we can define properties without using Getters or Setters with this syntax.

Keep in mind that the attributes added through this method are not writable by default so explicitly stating writable: false was a bit redundant in this example. As you can see, the age attribute is immutable. The color attribute is fully mutable in this example because we explicitly stated for it to be this way. As we start to look at Classes and more advanced object literals, these two definition methods will be explored further. For now, just notice the format that we use to define these Getter and Setter functions and the Object.defineProperty function.

Closing

In this post, we introduced the concept of the Object prototype and we took a look at object Getter and Setter functions. As we continue our journey to learn JavaScript, we will see the pros and cons of encapsulation. Next week, we will start off with anonymous functions and then move towards classes.