Understanding Javascript Objects and Their Functionality

JavaScript is generally considered an object-oriented language, though there is some controversy over whether this is true that I will explain below. In essence, objects are a central aspect of the language and key to grasping JavaScript coding. Before analyzing objects and their use, let's define the characteristics of an object-oriented language.

An object-oriented language allows for object-oriented programming (OOP), or writing code based on objects that interact with one another to give the end user desirable functionality within a program. Objects contain data in the form of fields (properties or variables) and code (procedures or methods).

The other two main programming methods are functional programming and procedural programming. Functional programming uses a method of coding that evaluates expressions rather than executing commands or program instructions. Procedural programming, on the other hand, is a coding paradigm that focuses on the concept of a procedure call or a set of commands that must be followed.

There is some controversy over whether JavaScript is a true object-oriented language or not. It is undeniable that JavaScript relies on coding through the use of objects. However, it also shares many aspects of both procedural programming and functional programming.

What makes JavaScript procedural is that it uses prototypes instead of classes for inheritance. It also includes some methods of functional programming, such as its reliance on functions as actual objects containing properties and methods within themselves. With that said, let's take a look at the way javaScript handles objects and what they actually consist of.

Although objects are a very important part of this programming language, they are not the only thing that keeps it together or allows programmers to interact with the code. Primitives are another important part of the JavaScript language. In contrast to objects, they are data that is immutable and cannot be changed. In fact, when looking at the guts of the language, JavaScript can be separated into really only two data types:

• Objects
• Primitives

A simple way of analyzing what an object is within JavaScript code is to compare an object to what we see around us in the real world. Let's take a look at an apple, for example, as it is an object we can see every day around us and probably can find right now in our kitchens. An apple is an object with various properties that describe its characteristics. It has always true properties, like the fact it is round, as well as different properties depending on apple type, such as color (they can be red, green or yellow), with or without a stem on one end, and a slight concave on the other end.

The DOM, or document model object, is an important JavaScript object model sometimes referred to as the most important object within JavaScript. However, it is more of a blueprint than an individual object per se. When a page is loaded, the browser creates a DOM of the page on that particular website. An HTML DOM model is created as a tree of various objects of the page. They include such aspects as Document --> Root Element --> Head and Body Elements.

When using the alert command, or alert(object), the output will typically display [Object Object]. Thus, the content parameters of an object will not show for debugging or print (showing up on console display). However, there are ways around this in accessing an object’s content or elements within it for debugging or printing.

Most, if not all, browsers also have their own built-in debugging tools worth tapping into. For instance, Firefox has the Firefox Developer Tools that replaced Firebug, while Chrome has Chrome DevTools. Below are some general commands that should also work. For simple debugging purposes, this alert function should do in general:

In our example below, let's use fruit as the object we want to examine since it has more variables than the apple example we used above. We can then use apple as a type of fruit, or a property of fruit in general, with other fruits being separate properties. Remember, we can name objects whatever we want and store JavaScript code within its location.

The toSource() method signifies a source code object fetch. Recent browsers also allow for this command to dump object content to a debugging console. You can use a DOM inspection tool as well. Below are two methods of access, with the first going to the directory and second to the debugging mode to access the content:

Besides the use of debuggers, another effective way of accessing elements of an object is to use a foreach loop within a printObject function that will display a text dialog box on the screen called an alert() function, showing the object's properties and values. The alert() function can also print an object on the screen by doing this:

The toSource() method returns a text string representing the source code of the object. For JavaScript object notation (JSON), you can use the alert() method below with fruit, again, as the object example in our case:

Objects are a central aspect of a JavaScript, although you may have noticed the language is much deeper than just this aspect alone. It includes primitives, another data type, variants, and more. Objects, however, are one of the key aspects that define JavaScript programming.