Author avatar

Maciej Duraj

Understanding Javascript Objects and Their Functionality

Maciej Duraj

  • Feb 11, 2020
  • 6 Min read
  • 230 Views
  • Feb 11, 2020
  • 6 Min read
  • 230 Views
Languages Frameworks and Tools
JavaScript

Introduction

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.

Object-Oriented Coding Briefly Defined

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.

Is JavaScript Truly an Object-Oriented Language?

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.

JavaScript Objects As One of Two Main Data Types

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
You can read more about primitives [here[(/guides/understanding-javascript-primitives-and-their-functionality], but for now, just know that they can be further broken into seven variants or types as well. These primitives are responsible for letting the programmer know things. For example, they can show a value that is unknown or undefined.

What Exactly Is an Object?

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.

Accessing Properties and More for Debugging or Printing

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:

1
JavaScript Alert(Object.toSouce())

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.

1
JavaScript Alert(fruit.toSouce());

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:

1
JavaScript Console.dir(fruit)
1
JavaScript Console.debug(fruit);

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:

1
Javascript alert(“myObject is “ + fruit.toSource());

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:

1
Javascript alert( JSON.stringify(fruit) );Or:alert(JSON.parse(fruit). );

Conclusion

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.

3