JavaScript Objects

JavaScript objects are what makes the JavaScript programming language so versatile. Before diving into data structures and algorithms, let’s review how JavaScript objects work. This chapter will focus on what JavaScript objects are, how they are declared, and how their properties can be changed. In addition, this chapter will cover how JavaScript classes are implemented using prototypal inheritance.

JavaScript Object Property

JavaScript objects can be created via the object literal {} or via the syntax newObject();. Additional properties can be added or accessed in one of two ways: object.propertyName or object['propertyName'].

1 var javaScriptObject = {};

2 var testArray = [1,2,3,4];

4 javaScriptObject.array = testArray;

5 console.log(javaScriptObject); // {array: [1,2,3,4]}

7 javaScriptObject.title = 'Algorithms';

8 console.log(javaScriptObject); // {array: [1,2,3,4], title:'Algorithms'}

As shown in the previous code, the title property was dynamically added in line 7 to the JavaScript object. Similarly, functions in JavaScript classes are added this way by dynamically adding them to the object.

Prototypal Inheritance

In most strongly typed languages such as Java, the methods of a class are defined at the same time as the class. However, in JavaScript, the function has to be added as a JavaScript Object property of that class.

Here is an example of a class in JavaScript using this.functionName = function(){}:

1 function ExampleClass(){

2 this.name = "JavaScript";

3 this.sayName = function(){

4 console.log(this.name);

5 }

6 }

8 //new object

9 var example1 = new ExampleClass();

10 example1.sayName(); //"JavaScript"

This class dynamically adds the sayName function in the constructor. This pattern is known as prototypal inheritance .

Prototypal inheritance is the only method of inheritance in JavaScript. To add functions of a class, simply use the .prototype property and specify the name of function.

When you use the .prototype property, you are essentially dynamically extending the JavaScript Object property of the object. This is the standard because JavaScript is dynamic and classes can add new function members as needed later. This isn’t possible for compiled languages such as Java because they will throw an error on compilation. This unique property of JavaScript lets developers take advantage of the prototypical inheritance.

Here’s an example of using .prototype:

1 function ExampleClass(){

2 this.array = [1,2,3,4,5];

3 this.name = "JavaScript";

4 }

6 //new object

7 var example1 = new ExampleClass();

9 ExampleClass.prototype.sayName = function() {

10 console.log(this.name);

11 }

13 example1.sayName(); //"JavaScript"

To reiterate, adding functions to a class dynamically is how JavaScript implements prototypical inheritance. Functions of a class are added either in the constructor or via .prototype.

Constructor and Variables

Because variables of a class in JavaScript are properties of that class object, any properties declared with this.propertyName will be available publicly. This means that the object’s properties can be directly accessed in other scopes.

1 function ExampleClass(name, size){

2 this.name = name;

3 this.size = size;

4 }

6 var example = new ExampleClass("Public",5);

7 console.log(example); // {name:"Public", size: 5}

9 // accessing public variables

10 console.log(example.name); // "Public"

11 console.log(example.size); // 5

To mimic a private variable, instead of using this.propertyName, you can declare a local variable and have getter/setters that allow access to that variable. This way, the variable is available only to the constructor’s scope. Notably, however, these mimicked private variables are now accessible only through the defined interfacing functions (getter getName and setter setName). These getters and setters cannot be added outside of the constructor.

1 function ExampleClass(name, size) {

2 var privateName = name;

3 var privateSize = size;

5 this.getName = function() {return privateName;}

6 this.setName = function(name) {privateName = name;}

8 this.getSize = function() {return privateSize;}

9 this.setSize = function(size) {privateSize = size;}

10 }

12 var example = new ExampleClass("Sammie",3);

13 example.setSize(12);

14 console.log(example.privateName); // undefined

15 console.log(example.getName()); // "Sammie"

16 console.log(example.size); // undefined

17 console.log(example.getSize()); // 3

Summary

In JavaScript, unlike other object-oriented programming languages, prototypical inheritance is the preferred method of inheritance. Prototypical inheritance works by adding new functions to a JavaScript class via .prototype. Private variables are explicitly declared in Java and C++. However, a private variable is not supported in JavaScript, and to mimic the functionality of a private variable, you need to create a variable that is scoped to the constructor function. Declaring a variable as part of that object in the constructor via this.variableName automatically makes that property public.

Exercises

Adding a Property to an Object

Add an exampleKey property to an empty JavaScript object in two different ways and set it to exampleValue.

As discussed earlier in this chapter, a property can be added to an object in two ways. There is no performance advantage or disadvantage of using one way over the other; the choice comes down to style.

1 var emptyJSObj = {};

2 emptyJSObj['exampleKey'] = 'exampleValue';

3 emptyJSObj.exampleKey = 'exampleValue';

Defining Classes

Create two classes: Animal and Dog. The Animal class should take two parameters in the constructor (name and animalType). Set them as its public properties.

In addition, the Animal class should have two functions: sayName and sayAnimalType. sayName prints name, and sayAnimalType prints animalType initialized in the constructor.

Finally, the Dog class inherits from the Animal class.

1.
Let’s first define the Animal class and the specified required functions.

1 function Animal(name, animalType) {

2 this.name = name;

3 this.animalType = animalType;

4 }

5 Animal.prototype.sayName = function () {

6 console.log(this.name);

7 }

8 Animal.prototype.sayAnimalType = function () {

9 console.log(this.animalType);

10 }

2.
For the Dog class to inherit this, define the Dog class and then copy its prototype, as shown in the following code block:

1 function Dog(name) {

2 Animal.call(this, name, "Dog");

3 }

4 // copy over the methods

5 Dog.prototype = Object.create(Animal.prototype);

6 var myAnimal = new Animal("ditto", "pokemon");

7 myAnimal.sayName(); // "ditto"

8 myAnimal.sayAnimalType(); // "pokemon"

9 var myDog = new Dog("candy", "dog");

10 myDog.sayName(); // "candy"

11 myDog.sayAnimalType(); // "dog"