JavaScript Objects for Beginners

JavaScript is built on objects. An object is a collection of properties, where each property is a key-value pair.

Think of it like a real-world object: a chair has a color, a weight, and a material. A JavaScript object works the same way – it holds named values that describe it. I use objects constantly, and once you get how they work, most of JavaScript starts to make sense.

An object is one of JavaScript’s data types. Unlike primitives (strings, numbers, booleans), objects are mutable and can hold complex data.

How to Create an Object in JavaScript?

The most common way to create an object is literal notation – curly braces with key-value pairs inside.

An empty object looks like this:

let empty = {};

To create an object with properties, you need to use the key : value pairs inside the curly braces. For example, the following code creates a new object named person:

let person = {
    firstName: 'Roee',
    lastName: 'Yossef'
};

This object has two properties, firstName and lastName, with values ‘Roee‘ and ‘Yossef‘ respectively. If it’s not clear, note that in a JavaScript object with more than one property, you need to separate the properties with a comma ( , ) as seen in the example above.

The property key must be a string (or Symbol), while the value can be anything: a string, number, boolean, array, another object, or a function.

Accessing Objects in JavaScript

You can access object properties in two ways: dot notation and bracket notation.

1. Using Dot Notation ( . )

Dot notation is the cleaner option when the property name is a valid identifier:

objectName.propertyName

For instance, to access the firstName property of the person object, you can use the following expression:

person.firstName

If, for example, you want to print the values of the firstName and lastName properties in the browser’s console, you can do so as follows:

let person = {
    firstName: 'Roee',
    lastName: 'Yossef'
};

console.log(person.firstName);
console.log(person.lastName);

2. Using Bracket Notation ( [] )

Bracket notation works with any string key, including keys with spaces or special characters:

objectName['propertyName']

For example:

let person = {
    firstName: 'Roee',
    lastName: 'Yossef'
};

console.log(person['firstName']);
console.log(person['lastName']);

Please note that if a property key contains spaces, you must enclose it in quotes. For example, for the building no property in the address object:

let address = {
    'building no': 1327,
    street: 'Nehemya 1st street',
    state: 'IL',
    country: 'Israel'
};

console.log(address['building no']);

Modifying and Changing Property Values

To change the value of a property, you use the assignment operator ( = ). For example:

let person = {
    firstName: 'Roee',
    lastName: 'Yossef'
};

person.firstName = 'Yony';

console.log(person);

For a full list of operators, see my post on JavaScript operators.

Adding a New Property to an Object

Unlike programming languages like C# or Java, in JavaScript, you can add properties to objects after those objects are created.

The following statement adds the age property to the person object and assigns it the value 25:

person.age = 25;

Deleting a Property from an Object

To delete a property from an object, you can use the delete operator:

delete objectName.propertyName;

For example, to delete the age property from the person object:

delete person.age;

Checking if a Property Exists in an Object

To check if a property exists in an object, you can use the in operator:

propertyName in objectName

The in operator will return true if the propertyName exists in the objectName.

Here’s an example where we create an object named employee and use the in operator to check if the properties employeeAddress and employeeId exist in this object:

let employee = {
    firstName: 'Roee',
    lastName: 'Yossef',
    employeeId: 1
};

console.log('employeeAddress' in employee);
console.log('employeeId' in employee);

Results:

false
true

FAQs

Common questions about JavaScript objects:

Summary

Objects are one of the most fundamental building blocks in JavaScript. Once you are comfortable creating them, accessing properties with dot and bracket notation, and using the in operator to check for keys, you have the basics covered.

If you want to go deeper, check out my post on object methods and the ‘this’ keyword, or learn how to check property ownership with hasOwnProperty().