A Beginner's Guide to JavaScript Objects

You must have already learned that JavaScript has eight data types. Of these eight, seven are called ‘primitive’. These are so named because they are the most basic data types in the language. They are the number, string, boolean, undefined, null, symbol and bigInt data types.

This article is focused on the eighth data type known as 'Objects'. Of the eight data types of the language, objects are the only ‘non-primitive’ type.

They are so-called because they are more complex data structures than basic or primitive data types. Objects are mutable (they can be changed or modified after being created), and they are passed by reference. These qualities make objects powerful and versatile tools for storing and manipulating data in a JavaScript program.

What is an Object?

An object is a data structure used to store and organize data in a flexible way. It is a collection of key-value pairs (properties) where the key is a string or a symbol, and the value can be of any data type. An object can also be nested in another object.

How to Create JavaScript Objects

There are several ways to create JavaScript objects. These include the 'object literal' method, the 'object constructor' method, the 'Object.create' method, and the ES6 'class' method. This article focuses on the most common method which is the 'object literal notation'.

The object literal notation involves enclosing the key-value pairs within a pair of curly braces ‘{}’.

Here's an example of an object created with object literal notation:

const person = {
    name: 'Jane Doe',
    age: 25,
    occupation: 'scientist'
};

Here, 'person' is the name of the object and 'name', 'age' and 'occupation' are its properties. Note that there's a comma after each property.

The reason why properties are referred to as key-value pairs can be seen in the above instance. Each property in the 'person' object has a key and a value as shown in the table below:

At the beginning of this article, it was explained that objects can be nested inside other objects. Here's an example of a nested object:

const person = {
    name: 'Jane Doe',
    age: 25,
    occupation: 'scientist',
    address: {
    street: "Boulevard",
    city: "Los Angeles",
    state: "California"
    }
};

In the above example, 'address' is both a property of the 'person' object and an object itself.

Accessing JavaScript Objects

To manipulate/modify data in a JavaScript object, one needs to be able to access the data in the object.

JavaScript objects can be accessed using 'dot notation' or 'bracket notation'. The following example shows how to access the 'occupation' property of the 'person' object above using the 'dot notation':

console.log(person.occupation); // the output on the console will be 'scientist'

Accessing the same property using the 'bracket notation' will look like this:

console.log(person['occupation']); // the output on the console will be 'scientist'

An advantage the bracket notation has over dot notation is that with bracket notation, a variable can be used to access a property dynamically.

Example:

const person = {
    name: 'Jane Doe',
    age: 25,
    occupation: 'scientist'
};

const personFullName = 'name';
console.log(person[personFullName]); // output will be 'Jane Doe'

In the above example, a variable called 'personFullName' was created and dynamically used to access the 'name' property of the 'person' object. This is only successful because the bracket notation was used. Accessing the same variable with the dot notation will result in an undefined value.

Finally, a property that does not exist in the object initially, can be created automatically when a value is assigned to it.

Example:

const person = {
    name: 'Jane Doe',
    age: 25,
    occupation: 'scientist'
};

person.eyeColor = 'brown';
console.log(person.eyeColor); // output will be 'brown'
console.log(person); // output will be:
/*
{
    name: 'Jane Doe',
    age: 25,
    occupation: 'scientist',
    eyeColor: 'brown'
}
*/

Conclusion

JavaScript objects are an essential part of the language and are used to a great extent in a lot of applications. Developers who want to work with JavaScript will need to understand the concept of objects and how to work with them extensively.