Data Objects

in JavaScript

This is an entry in Marek's JavaScript Compendium. Last updated 2020-01-21.

A plain data object (or just data object) is a JavaScript pattern where a plain object is used to store data.

We call it a plain object because it typically doesn't have any methods and it's not associated with a prototype or class.

In JavaScript, plain objects are used very commonly because the syntax to create objects is very short and simple (just a pair of curly brackets).

Modern JavaScript (since ES6) also has a Map class which is similar (but not the same) as the data object pattern. It hasn't replaced the used of plain data objects in most code, but it has advantages in some situations.

Creating plain data objects

Data objects in JavaScript are created with Object Expressions, which are written with a pair of curly brackets.

Because we create these data objects with curly brackets, typically they don't contain any methods. They also typically don't use a prototype.

Creating an empty data object

{
}

// Start by creating an empty object
const countryCapitals = {};

// Then, assign property values, one by one
countryCapitals["Canada"] = "Ottawa";
countryCapitals["Mexico"] = "Mexico City";

Creating a data object with initial properties

const countryCapitals = {
    'Canada': 'Ottawa',
    'Mexico': 'Mexico City';
};

Calling a function with options given by a data object

Instead of having a function that takes many arguments for specifying different options, you can decide to use a data object to contain all the options in a single argument.

Here's an example where we call a findRentalListings function that uses a data object to specify some search options.

findRentalListings({ minPrice: 800, city: "Vancouver" });

This is useful when some of the options are optional, and so you can skip them from the data object. If you were using individual function arguments for each option, the function would be less flexible.

Adding and removing properties from data objects

You can add and remove properties if you have a reference to a data object.

It's possible to freeze an object. A frozen object doesn't allow the values of its properties to be changed, and it doesn't allow new properties to be added or properties to be removed.

Reasons to use data objects

Containers for multiple values TODO

As a "record" data structure

A record is a name for a data structure where you have. Typically, records are stored in an array. An array of records is a data structure that has a similar structure to a table of data. Each row in the table is represented by a record. In other words, each row in the table is an item in the array of records.

As a mapping of strings to values

A mapping is a structure where we're treating the object more like a list than a record.

The Map class, introduced in ES6, is designed specifically for this kind of use case, and it's more powerful than a data object because it allows the properties to be any type of value. Data objects are