What is an Object?

As W3Schools puts it, "In JavaScript, objects are king. If you understand objects, you understand JavaScript."

Almost everything including functions, arrays, dates, maths, and regular expressions can be objects. Booleans, numbers, and strings can also be objects as long as they contain the "new" keyword.

Objects are also variables, however an object can contain more than one values by using a name:value pair.

Example

In this example, I will create an object called "cube" that contains its length, width, and height in inches. This example creates an object literal which means that the object's contents are written out.

The object is created by giving it a name, "cube" and placing all of its values inside the curly brackets. Each value has a name (length, width, and height) with its own value. The advantage of creating an object here is that it provides organization, instead of having hard to identify variables. It also makes it easier to create multiple cube objects if needed.

Resources

This is an image of a cube. It is a real life object that can be defined by its properties. Properties are just descriptions of an object. This cube has several properties including:

• Color: blue
• Length: 10cm
• Width: 10cm
• Height: 10cm
• Material: plastic

This could be shown as an object in JavaScript like this:

Each property has a name and a value stored as a string or a number.

Accessing Object Properties

If needed, you can access your property like this:

objectName.propertyName

Or like this:

objectName["propertyName"]

Example

If I wanted to display the cube's color and material, I could do this:

Resources

From W3Schools: "JavaScript methods are actions that can be performed on objects." A function is used to perform this action. To access the object method you would use:

objectName.methodName();

To access the function definition, you would use:

objectName.methodName;

Example

Let's say we wanted to find the volume of the cube, which is also a property of the cube. We would use an object method to get the volume and define it as a property. The formula for the volume of a cube is length * width * height.

Inside of the function, the word "this" is used before accessing the property needed. For example "this.length". The "this" is referring to the object "cube" where the property "length" resides.

Resources

Functions are javaScript objects. They are classified as first-class objects, which just means that they have properties and methods. Functions differ from other objects because they are able to be called elsewhere. This is useful when you need to call a function from a different object.

As shown in the previous example, you can also create functions inside of objects. You can do this by using a name and assigning the value as a function.

Resources

Instantiation is the process of creating an object instance from a class. You can use a constructor function that serves as kind of a framework to use to create instances of new objects.

An example of this is best shown by this diagram from MDN Web Docs that creates a short bio of people. The first rectangle is like a model or template of the object. The following two rectangles take this model and create two unique objects or instances of the class.

Here is how Instantiation looks in JavaScript:

Example

First, you create a model of the object. This is called the constructor. Then you create a new instance of that object. Finally, you call that new object's name, and call the greeting function to display a message. You could continue creating objects for each new person.

Resources

Now that we know how to create a constructor and instances of an object, we can take it a step further and create child classes for those constructors. In the Person example from the previous section, we can further categorize people into two child classes (constructors).

This diagram shows a teacher class and a student class being inherited by the Person class. Both Teachers and Students inherit all of the properties of the "Person", the only difference is the type of greeting and that the Teacher now has a property for the subject that they teach.

Here is how inheritance looks with JavaScript:

Example

Resources

Teaching Video

My teaching presentation starts at 0:00 and ends at 7:30.