JavaScript Objects – Pragmatic Intro Part 1

Object-oriented view
How programming see software solutions (Image courtesy of phanlop88 at FreeDigitalPhotos.net)

 

 

 

 

 

 

 

 

 

Why Objects?

Seeing the world as connected objects is how most programmers build software. Major programming languages today, including JavaScript, support this object-oriented approach to creating software. This article is the first in a practical series showing how you can use JavaScript objects to build robust, maintainable software. We shall see how objects hold state (knowledge about themselves through variables) and behaviors (special routines with methods or functions). Also later we shall examine how JavaScript enables the reuse of code through classes.

Sometimes JavaScript programmers want to group common routines and data together. For example, you may use special financial processing. Alternatively, you have some routines startup values and procedures. Single occurrence objects are great for this and add the benefit of avoiding name clashes with other libraries of code. In JavaScript we use Object Literals.

Defining an Object Literal

Lets work though some JavaScript that declares and uses object literals.

Defining an object literal

 

 

 

 

 

 

 

 

 

 

An object literal is defined between curly braces (lines 7 and 25 above). Properties are name/value pairs with names as unquoted strings, followed by colons. Values can be any JavaScript values including function definitions. Commas separate properties.

Notice the use of this to access a property of the object from within the object definition. For example, this.street accesses the street property of the object. Line 26 shows one way of accessing an object property. An alternative way is aHouse[‘suburb’]. Also lines 17 and 26 use back quotes (`) to use template literals, the ability to embed variable references into strings without using concatenation (+).

Modifying An Object Literal

We can also change an object literal during the running of the software.

Modifying an object literal

 

 

 

 

 

 

Lines 29 and 30 show two ways of modifying a property value. In line 33 we add a new property, lastInspection, by referring to property that does not exist. One is automatically created. And, finally, use the key word, delete, to a property (line 36). No error occurs if that property does not in fact exist.

Final Words

Here are some useful examples, including checking if a property actually exists.

Object literal – others

 

 

 

 

You can check for a property using hasOwnProperty as shown in lines 39 and 40. Then there are three examples of accessing object data. Object literals are a great way of organizing code that fulfill similar purposes  and avoiding variable name.

I have included the source file listed below for download. All routines are embedded in a self-executing anonymous function (IIFE) to avoid declaring global variables.

by Alex McCullie source file: oop_object_literal

Leave a Reply

Your email address will not be published. Required fields are marked *