JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)

Chapter 14. Objects

As you have seen, the code window.alert() allowed you to create a popup box in your web page. This code has four parts: window, . (the dot), alert, and () (the parentheses). The “window” part is an object. The dot is a property accessor. The alert is a method. And the parentheses are enclosures for the method’s arguments.

Those are loads of information that might confusion, but do not fret; take it one step at a time.

An object is an element that contains properties and methods. Methods are like commands or actions that the object can do. Properties are like descriptions or attributes that the object has.

A good analogy is a stove and an object. A stove has one common method, and that is to make fire or induce heat on its stovetop. On the other hand, it has properties like stove type, remaining fuel, and material.

In the previous example, the object that was featured was the window object. The window object has the methods alert(), confirm(), close(), stop(), and so forth. Alternatively, it has the properties screenX, screenY, outerHeight, outerWidth, and so forth.

JavaScript can give you access to these methods and properties. You can use the methods at will whenever you want. And change the properties to whatever value possible. For example, you can use window’s alert() method to make a popup box appear. You can check the location or address of a window or web page by accessing the location property of the window object.

JavaScript has predefined objects. A few of them are String, Array, Object, and Math. When dealing with JavaScript and web pages, HTML DOM will also provide you with predefined objects that were created from the HTML page that was rendered.

On the other hand, almost everything in JavaScripts is treated as an object. For example, string values are treated as objects under String. Because of that, string values or variables containing strings can use methods and properties of String. The same goes with arrays, and the list goes on and on.

Assigning Objects to Variables — By Value and By Reference

Yes, you can assign objects to variables. However, please do note that unlike the usual assignment of literals in a variable, variables that get assigned with an object behave differently.

In programming, assigning to a variable can be by value or by reference. By default, assignment of variables containing regular literals such as numbers and strings to another variable is by value. By value assignment means that the value of the variable being assigned will be only copied to the value of the variable on the left side of the assignment operator. For example:

> var x = 2

< undefined

> var y = 3

< undefined

> x = y

< 3

> x

< 3

> _

On the other hand, if you assign an object or an array variable to another variable, the assignment will be automatically by reference. By reference assignment means that instead of copying the value of the variable being assigned, the object or array will be referenced. Referencing in programming is like creating another “identifier” that can serve as another identifier holding the methods, properties, or content of another object. For example:

> var x = 3

< undefined

> var yObject = new Object()

< undefined

> yObject.sampleProperty = 6

< 6

> x = y

< Object {sampleProperty:6}

> x

< Object {sampleProperty:6}

> x.sampleProperty = 90

< 90

> y.sampleProperty

< 90

> _

In this example, object y was created. After that, it was given a property named sampleProperty with a value of 6. When y was assigned to x, you can see that its property was included in the assignment. However, when the example tried to change the property that was inherited, the same property in object y reflected the change, too.

Technically, with referencing, the object that was assigned to the variable will receive all the changes that will be applied to the variable that received the assignment. Usually, programmers take advantage of this by referencing an object with a long name to a short name variable. For example:

> var x = document.getElementById('sampleParagraph')

< undefined

> x.textContent

< "This is a sample paragraph"

> x.textContent = "This has been modified through JavaScript."

< "This has been modified through JavaScript."

> _

Instead of repeatedly accessing the sampleParagraph in the page using the getElementById method, which will make you type a lot, you can just reference it to a short named variable such as x. It is much convenient, and can assure you clean code.

Object Creation Using Object Literal

In JavaScript, multiple methods on how to create an object exist. One of the simplest and easiest ways is to create one using an object literal. Doing it this way is almost too similar in creating an array. For example:

> var exStove = {fuel:100, type:"single burner", state:"off", fuelPerSecond:1}

< undefined

> exStove

< Object {fuel: 100, type: "single burner", state: "off", fuelConsumptionPerSecond: 1}

> exStove.fuel

< 100

> _

The statement created the object named exStove. It was assigned with the properties fuel, burner, state, and fuelConsumptionPerSecond. To access the properties, you can use the dot accessor. For example:

> var exStove = {fuel:100, type:"single burner", state:"off", fuelPerSecond:1}

< undefined

> exStove

< Object {fuel: 100, type: "single burner", state: "off", fuelConsumptionPerSecond: 1}

> exStove.fuel

< 100

When typing the code in a file or within the HTML, you can make your statement much simpler and easier to read by adding line breaks on the object literal as if you are placing a CSS declaration. For example:

var exStove = {

fuel:100,

type:"single burner",

state:"off",

fuelPerSecond:1

}

If you want to add another property in your object, you can easily do that by just assigning a value to the property that you want. For example:

> var exStove = {fuel:100, type:"single burner", state:"off", fuelPerSecond:1}

< undefined

> exStove

< Object {fuel: 100, type: "single burner", state: "off", fuelConsumptionPerSecond: 1}

> exStove.fuelType

< undefined

> exStove.fuelType = "LPG"

< "LPG"

> exStove.fuelType

< "LPG"

> _

You can also change the value of the property this way, too.