Syntax — JS: Objects

An object is a data type in JavaScript with which you can represent a linked data set. This allows you to operate data as a whole single unit. For example, you can describe any real-world object using an object in JavaScript. The same applies to mathematical objects, such as figures.

const user = { name: 'John', married: true, age: 25 };

const rectangle = { width: 10, height: 5 };

An object can be described as a sequence of keys and values, separated by commas and held in curly brackets. Key-value pairs in objects are called properties. The keys in an object are unique, i.e., one object cannot have two identical keys with different values.

If there are many properties, the definition may stretch over several lines:

const user = {
  name: 'John',
  married: true,
  age: 25,
};

The comma at the end is optional, but recommended by the linter. This is handy when adding or removing keys. You don't have to change the ending of the last line.

We use dot notation to refer to object properties:

user.name; // 'John'
rectangle.width; // 10

Sometimes, either accidentally or deliberately, they may access properties that are not in the object. In this case, JavaScript returns undefined and continues to work as if nothing had happened. This behavior can lead to hard-to-catch errors, so be careful and always check how properties are written if you get the wrong data or there's no data at all:

user.nme; // undefined
user.name; // 'John'

JavaScript supports an alternative way of accessing object properties, using square brackets, like in arrays:

// property names are stored inside the object as strings
user['name']; // 'John'
rectangle['width']; // 10
user['company']; // undefined

Why is this method of access necessary? In the real world, when it comes to objects, there are often algorithms in which the property name can change during processing. Referring to a property with a dot does not allow you to assign names dynamically, whereas bracket notation does:

const user = { name: 'John', married: true, age: 25 };

let propertyName = 'name';
user[propertyName]; // 'John' 

propertyName = 'married';
user[propertyName]; // true 

We'll talk more about this use in an upcoming lesson.

Do it yourself

1. Run REPL
2. Create an object there, try to access its properties in different ways

Recommended materials

1. Documentation