Ali Cope

Lesson 2 - JavaScript - Object Creation Functions, Inheritance, Properties, Methods, Instantiation

Properties

Objects are basically a collection of properties. A property is made up of a key (name) and a value. If you think of a dictionary as the object, the term would be the key and the definition would be the value. Properties are used to define the characteristics of the object.
We use dot-notation to access the property of an object.

objectName.propertyName
*** Notice that both the objectName and the propertyName are camel case letting us know that they are both case sensitive. ***
Adding new properties to an object is simple. We use the dot-notation structure and assign the property a value.
var disneyMovies = new Object ();
disneyMovies.title = "The Lion King";
disneyMovies.rating = "G";
disneyMovies.year = 1994;
disneyMovies.character;
*** Notice we didn't assign a value to "character" this will be "undefined" in the object, not "null"
All object properties are strings or converted to a string. The "year" was 1994, but it will be stored in the disneyMovies object as a string.

Creation

When we were discussing properties we made an new object using the "new" operator. There are other ways to create an object.

Object Initializers

Object initializers, which are sometimes called Object Literal, use the following syntax to create objects:
var objectName = { property1: value 1,
property2: value2,
propertyN: valueN };
This is the same as writing it this way:
var objectName = { property1: value1, property2: value2, propertyN: valueN };

Methods

Methods are actions or functions that can be performed by an object. They are stored in an object the same way that a property is, but instead of a value, a function is run.

var person = {name: "Susan", gender: "f", age: "40", nameage: "function(){return this.name + this.age}}

Inheritance

All objects in JavaScript have basic properties that are inherited from the the "prototype" object. Objects can inherit all of the properties and behaviors of the parent object. First the prototype object is created, then new instances of the object can be made. That object can then be changed, adding new properties or methods and then have new objects created from it. It allows code to be reused without having to be written again.
There are two places this is especially helpful. This first is to combine two objects so you can access all of the properies from the first and second, from the second object.

var cookies = {one: "Chocolate Chip", two: "Snickerdoodle", three: "Peanutbutter"};
var desserts = {three: "Brownies", four: "Cheesecake", five: "Ice Cream"};
Object.setPrototypeOf(desserts, cookies);
So now desserts has all the properties of desserts and cookies. Value "three" was present in both and remains "Brownies" for desserts. Here are the properties of desserts: Desserts now has all of its own properties and has inherited the properties of its parent.
The second is to create a child object from a parent object. Lets show how this would work with a family.
var bobSmith = {lastname: "Smith", firstname: "Bob"};

var sueSmith = Object.create(bobSmith);
sueSmith.firstname = "Sue";
While this may seem hardly worth the effort with such a small object. It can be very helpful when dealing with large objects with a lot of properties.

Instantiation

Instantiation gives us another way to create objects using a constructor function. This way creates a function that can be used to create new arrays with the same properties. Here is an example using an address.

function Address(name, street, city, state, zip){
this.name = name;
this.street = street;
this.city = city;
this.state = state;
this.zip = zip;
}
Notice that the function name "Address" is capitalized. This is intentional and typical for this type of function. We can create a new object of this type using the keyword new.
var jillBrownAddress = new Address("Jill Brown", "123 main", "Riverside", "CA","93745");
var bobKentAddress = new Address("Bob Kent", "47 Orange Blvd", "Beaver", "UT, "84073");
We can also use objects as values within other objects. For example if we were a business we might need to have the address array as part of a larger object.
function Employee(department, position, address){
this.department = department;
this.position = position;
this.address = address;

var employee1 = new Employee ("sales", "manager", "jillBrownAddress");
var employee2 = new Employee ("finance", "accountant", "bobKentAddress")
}

Examples

Create two objects for latest cell phones
Samsung GalaxyX released in 2018
Apple iphoneX released in 2017


Now lets create a method for the object that will show the make and model together. We can call this display and show it by calling galaxyx.display or iphonex.display


Here are all of the objects that we have created now