When beginners hear the word “object” in programming – often in the context of terms like object-oriented programming or Document Object Model – they tend to freeze up. But objects are actually very easy to understand.

While they are part of most modern programming languages, here I’ll be discussing objects in the particular context of JavaScript. If you can understand objects, you can understand the core of JavaScript.

Let’s consider the object concept as a tangible physical thing: a coffee cup. A cup object has properties:

• color
• height
• temperature
• filled

Many of those properties will have values:

• white
• 5 (centimeters)
• 35 (degrees Celcius)
• true

In JavaScript, almost everything you interact with is an object. Let’s make a virtual coffee cup object in your browser’s console. Objects are simply special forms of variables:

var coffeecup = new Object();

Or shorter, and preferably:

var coffeecup = {};

Now let’s describe the properties of the coffee cup, attaching values at the same time:

coffeecup.color = 'white';
coffeecup.radius = 5;
coffeecup.temperature = 35;
coffeecup.filled = true;

Alternatively, you could create the object together with its properties and values in a single statement:

var coffeecup = { 
	color: 'white',
	radius: 4,
	temperature: 35,
	filled: true
}

Note that properties can take different kinds of values: we’ve given color a text string, radius and temperature numeric values, and used a boolean value in filled.

You can think of object properties as characteristics of that object. More abstractly, the coffee cup’s properties and their values might be considered a table of data:

coffeecup object properties

property	color	height	temperature	filled
value	white	5	35	true

To show what we’ve attached to the coffeecup object, use the console:

console.log(coffeecup);

You can address the properties of coffeecup using dot notation:

coffeecup.color

Or with bracket notation: coffeecup['color'];

In bracket notation, objects are treated as associative arrays.

Note that we can both read and write to most properties: we could paint a coffee cup a different color, change its temperature in a microwave, etc, by writing a new value to the appropriate property.

In JavaScript, almost everything is an object: functions, arrays, dates, elements and more.

Of course, working with a virtual coffee cup is rather limited: our virtual construction doesn’t represent anything real. Let’s change that.

Make a simple HTML page: say a <div> element with a brief bit of paragraph text inside it:

<div id="container"><p>Text content</div>

Using the console, we can look at the dozens of properties associated with the div element:

document.getElementById("container").innerText;

Returns: "Text content"

document.getElementById("container").innerHTML

Returns: "<p>Text content</p>"

All of this has been obvious, things we already knew about the element. Let’s try something that’s not so obvious:

document.getElementById("container").offsetLeft;

The result is 8: the number of pixels from the left of the browser’s window to the left edge of the element’s box. In other words, the container object has, among many qualities, a offsetLeft property that has a current value of 8.

There’s much more that we can work with in objects, which I’ll explore in future articles.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.