Topic 2: JavaScript Object Creation Functions, Inheritance, Properties, Methods, and Instantiation.

Objects

Objects are a huge part of JavaScript. Object are containers for variables. The names of these variables are called keys, and are used to access the value inside the variable. The variables in an object are called properties. Here is a simple object.

const book1 = new Object(); //create object with new keyword.

Properties

Properties define an object. If the object is a chair, the properties could be color, size, weight, type, etc. We can add properties to the book1 object. We can also add properties when we create an object.

// adding properties to existing object

            book1.title = "Ender's Game"; // property of book1

            book1.pages = 394; // "pages" is the key, "394" is the value

            book1.author = "Orson Scott Card";

            

            // adding properties at the creation of an object
            const book2 = {name: "Cinder", pages: 254, author: "Marissa Meyer"};

Methods

Methods are properties in an object that store functions. These functions can be used to manipulate the object. Here is another object with properties and methods.


            // add method to existing object

            book1.message = function() {return this.author + " is a great author."};

            // add method at creation of object
 
            const book3 = {


              name: "The Hobbit",

              pages: 546,

              author: "JRR Tolkien",

              price: 12.99,

              display: function() {

                return this.name + "by " + this.author;},
 
              sale() { return this.price * .8;},


            };

            

            // call message function in book1 object

            document.getElementById("book1result").innerHTML = "book1.message: " + book1.message();

            // call sale function in book3 object

            document.getElementById("book3result").innerHTML = "book3.sale: " + book3.display();

Creating Objects

There are several ways to create objects. I have demonstrated 2 ways. The object shoe1 was created using the Object constructor, and shoe2 used object initialization.

Keyword New and Object Constructor

One way to create an object is to use the keyword new and an object constructor. This will create an empty object, and you will have to go back and add properties afterward.

const shoe1 = new Object();  // create the object

            shoe1.size = 5;  // add the properties

            shoe1.color = "black";

            shoe1.type = "dress shoes";

            shoe1.display = function() {

              return "This shoe is available in " + this.color + ", this.size;}

            };

Object Literal

Another way to create an object is declare and initialize the object in the same step. Simply declare a new variable and assign a comma separated list of key-value pairs inside curly brackets.

const shoe2 = {

            size: 7,
color: "blue",
quantity: 20};

Constructor Function

Notice that shoe1 and shoe2 are both shoes, but they have different properties and methods. I can only use the display method on shoe1, not on shoe2. In order to have consistency across the same type of object, and to save a lot of typing, I can write a constructor function for a shoe type of object, and then use it to instantiate new shoe objects. The name of the function should be capitalized to differentiate it from normal objects. Notice that in the Shoe prototype has a default value for quantity.

const Shoe = function(size, color, type, quantity = 0){ // create Shoe prototype

              this.size = size;

              this.color = color;

              this.type = type;

              this.quantity = quantity;

              this.display = function() { 

                return "I have " + this.quantity + " " + this.color + " " + this.type + ".";};


            }

Instantiation

With the shoe constructor function, it is now possible to instantiate or create new Shoe objects. To do this, declare a new variable, call the shoe constructor function, and add arguments for the new shoe.


            const shoe3 = new Shoe(10.5, "pink", "ballet slippers", 4);

            const shoe4 = new Shoe(5, "green", "sneakers", 2);

For shoe3, I added arguments for all 4 parameters, but for shoe4, I left the quantity out. Notice what happens when I use the display function for both shoe3 and shoe4. On shoe4, quantity has the default value of 0. Both shoe3 and shoe4 have the display method.

Object.create()

Object.create() is another way to create multiple objects of the same type, but it doesn't involve using a constructor function. Instead, you create a prototype. The prototype is an object with properties and methods. Objects that are created using the prototype will inherit the properties and methods of the prototype. Here I have created a Book prototype.


            const Book = {

            name: "name",

            author: "author",

            pages: 0,

            rating: 3,

            read() {return "Read a book";},

            display() {return this.name + ", by " + this.author + " is " + this.pages + " pages long.";}

    };

Once the Book prototype is created, I can use it to create objects of the Book type. Declare a variable and then use the assignment operator and Object.create(Book); The name of the prototype goes inside the parenthesis. Then assign values to the properties for the new object. If you don't assign a value for one of the properties, the new object will inherit the value from the prototype.

const book5 = Object.create(Book);

              book5.name = "The Hunger Games";

              book5.author = "Suzanne Collins";

              book5.rating = 5;

    document.getElementById("book5").innerHTML = "book5.display(): " + book5.display();

Notice that the value for pages is 0. This value is inherited from the prototype.

Inheritance

Now is a good time to talk aobut inheritance. Javascript is a prototyping language. That means that every object inherits properties from its prototype, kind of like its parent object. Each object has a hidden property that defines where it inherits from, and then that object in turn inherits from another object, and so on until it reaches the top of the chain. The top object inherits from null.

Let's look at book5. book5 inherits from Book, which inherits from Object.prototype, which inherits from null. Arrays inherit from Array.prototype, which inherits from Object.prototype, which inherits from null. Functions inherit from Function.prototype, which inherits from Object.prototype, which inherits from null.

What does that mean? Well, in the case of book5, it inherits all the properties of the Book prototype and the Object.prototype. That doesn't mean it contains those properties, but it can access them. Above, I wrote a call for the book5.display() function. But book5 doesn't have the display function. The Javascript engine will look in book5, and when it doesn't find it, it will look in book5's prototype, Book. It will find it there, and will use it, but the "this" in the method will refer to book5. Similarly, when the engine didn't find a pages property in book5, it used the value of 0 from Book.