Skip to main content

Properties Object in JavaScript – Explained with Examples

A properties object is an element you can use to bundle multiple named values into a single item.

A pair of braces ({...}) define JavaScript's properties object.

Here's an illustration:

A JavaScript properties object anatomy

Anatomy of JavaScript's properties object

The properties object in the image above contains only one property: bestColor: "pink".

note
  • JavaScript's properties objects are typically called objects.
  • A property is sometimes called a named value.
  • A property's name is sometimes called key.

Examples of a JavaScript Properties Object

Let's discuss some examples of a properties object.

Example 1: An object with two properties

{ month: "June", year: 2022 }

Above is a properties object containing two properties named month and year.

We initialized the month property with a string value while year got assigned a number.

Example 2: An object with four properties

let number = "Seventy";
let name = "Peter";
let state = true;

{
doorNo: number,
tenant: name,
rentPaid: state,
amount: undefined,
}

In the snippet above is a properties object containing four properties.

We initialized the doorNo, tenant, and rentPaid properties with the number, name, and state variables.

Then, we assigned a value of undefined to the amount property.

There are instances when JavaScript allows you to use a shorthand syntax to define properties. Let's talk more about this below.

JavaScript Properties Shorthand Syntax

Suppose a property's key and its assigned variable have the same name. In that case, you can use JavaScript's shorthand notation to define the property.

For instance, consider this snippet:

let tenant = "Peter";
let rentPaid = true;
let year = 2022;

{ tenant: tenant, rentPaid: rentPaid, year: year }

You can see that the property's key and its assigned variable have exactly the same name, which makes the object difficult to read.

JavaScript provides a shorthand alternative to the snippet above. Let's see it below.

let tenant = "Peter";
let rentPaid = true;
let year = 2022;

{ tenant, rentPaid, year }

You can see that the shorthand notation makes the properties object neater and easier to read.

Let's now discuss how to access the content of a properties object.

How to Access a Properties Object's Value

You cannot access the content of a properties object unless you put it in a variable and invoke it through the variable's name.

Once you've kept your object in a variable, JavaScript provides two ways to invoke it:

  • The dot notation
  • The bracket notation

Let's discuss the two techniques below.

How to use the dot notation to access a properties object's value

One way to access a properties object's value is to place a dot between the object's variable name and its property's key.

Here's the syntax:

variableName.propertyKey

In the snippet above, variableName references the name of the variable containing your object.

On the other hand, propertyKey refers to the name of the property whose value you wish to get.

Here's an example:

// Define a properties object and assign it to a variable:
const profile = { name: "Sarah", age: 25, gender: "Female" };

// Invoke the profile object's gender property:
profile.gender;

// The invocation above will return:
"Female"

Try it on StackBlitz

The profile.gender code in the snippet above instructs the computer to get the value of the profile object's gender property.

Now, let's discuss the second way to access a properties object's value.

How to use the square bracket notation to access a properties object's value

An alternate way to access a properties object's value is to use a square bracket like this:

variableName[propertyKey]

In the snippet above, variableName references the name of the variable containing your object.

On the other hand, propertyKey refers to the name of the property whose value you wish to get.

Here's an example:

// Define a properties object and assign it to a variable:
const profile = { name: "Sarah", age: 25, gender: "Female" };

// Invoke the profile object's gender property:
profile["gender"];

// The invocation above will return:
"Female"

Try it on StackBlitz

The profile["gender"] code in the snippet above instructs the computer to get the value of the profile object's gender property.

note

Whenever you use the square bracket notation, ensure to put the property's name in quotes—for instance, ["gender"]. Otherwise, JavaScript will read gender as a variable.

But what exactly is the difference between the dot syntax and the square bracket notation? Let's find out.

Dot vs. square brackets notation – What's the difference?

Here are the differences between the dot and square bracket syntax.

Difference 1: The dot syntax is easier to read

The dot syntax is cleaner and easier to read than the bracket notation. Therefore, most people prefer to use the dot syntax. However, the square bracket is more powerful.

Difference 2: Only the square notation can access properties with a number or multiword name

Suppose you used a number or multiword—e.g., "best colors"—as your property's name. In that case, you can use only the square bracket notation to access the property's value.

tip

Always quote multiword keys.

Here's an example:

// Define a properties object:
const bookmark = { 100: "Century", day: 25, "12thMonth": "December" };

// Use the dot notation to access the property named 100:
bookmark.100;

// The invocation above will return:
SyntaxError

Try it on CodeSandbox

The bookmark.100's invocation in the snippet above returned an error because you cannot use the dot syntax to access a property with a number or multiword name.

note

We had to quote the "12thMonth" property key because it is a multiword containing numbers and letters.

The quote helps to join different character types together as one string identifier.

Now, consider this example:

// Define a properties object:
const bookmark = { 100: "Century", day: 25, "Last Month": "December" };

// Use the square bracket notation to access the "Last Month" property:
bookmark["Last Month"];

// The invocation above will return:
"December"

Try it on CodeSandbox

The bookmark["Last Month"]'s invocation correctly returned "December" because we used a square bracket to access the multiword named property.

note

We had to quote the "Last Month" property key because it is a multiword containing some letters and a whitespace character.

The quote helps to join different character types together as one string identifier.

Now, let's discuss the third difference between the dot and square bracket notations.

Difference 3: Only the square syntax can access properties through a variable's value

You can use only the square bracket notation to access a property through a variable's value.

For instance, consider this snippet:

profile["gender"]

By wrapping "gender" in quotes, the computer will interpret the "gender" string as a property's name. Therefore, JavaScript will search the profile object for a property named gender.

Let's now consider this other snippet:

profile[gender]

By writing gender without quoting it, the computer will interpret the word as a variable—not a property's name. Therefore, JavaScript will search—locally or globally—for a gender variable and invoke it.

Afterward, JavaScript will use the variable's returned value as the property name to search for in the profile object.

Here's an example:

// Define a properties object:
const manager = { firstName: "Jonny", son: "Paul", wife: "Beauty" };

// Define a variable:
const wife = "son" ;

// Invoke the manager object's wife property:
manager["wife"];

// The invocation above will return:
"Beauty"

Try it on StackBlitz

The snippet above returned "Beauty" because we used manager["wife"] to tell the computer to get the manager object's wife property's value.

note

Wrapping "wife" in quotes makes the computer interpret it as a property of the manager object.

Now, consider this other example:

// Define a properties object:
const manager = { firstName: "Jonny", son: "Paul", wife: "Beauty" };

// Define a variable:
const wife = "son" ;

// Invoke the wife variable's value inside the manager object:
manager[wife];

// The invocation above will return:
"Paul"

Try it on StackBlitz

The snippet above returned "Paul" because JavaScript interpreted the unquoted wife word as a variable. Therefore, the computer used the wife variable's value as the property to search for in the manager object.

In other words, we used manager[wife] to tell JavaScript to get the manager object's son property's value.

So, now that we know how to access a properties object's value, we can discuss how to compute a property's name.

Computed Property Names in JavaScript

JavaScript allows you to compute (evaluate) a property's name.

In other words, suppose you put an expression in a square bracket. In that case, the computer will calculate and use the result as the property's name.

Here an example:

// Initialize a num variable with a number:
let num = 0;

// Assign a string value to an enSuites variable:
const enSuites = "East";

// Define a doorNo object and compute each of its properties' names:
const doorNo = {
[enSuites + ++num]: num,
[enSuites + ++num]: num,
[enSuites + ++num]: num,
};

// Check the doorNo's content:
console.log(doorNo);

// The invocation above will return:
{East1: 1, East2: 2, East3: 3}

Try it on StackBlitz

You can see that JavaScript derived each of the doorNo's property names by concatenating the enSuites and num variables.

Let's now see how to delete a property from a properties object.

How to Delete a Property from a Properties Object

You can use JavaScript's delete operator to delete a property from a properties object.

Here's an example:

// Define a properties object:
const bookmark = { 100: "Century", day: 25, "Last Month": "December" };

// Delete the bookmark's day property:
delete bookmark.day;

// Check bookmark's current content:
console.log(bookmark);

// The invocation above will return:
{ 100: "Century", "Last Month": "December" }

Try it on StackBlitz

The square bracket alternative of the snippet above is like so:

// Define a properties object:
const bookmark = { 100: "Century", day: 25, "Last Month": "December" };

// Delete the bookmark's day property:
delete bookmark["day"];

// Check bookmark's current content:
console.log(bookmark);

// The invocation above will return:
{ 100: "Century", "Last Month": "December" }

Try it on StackBlitz

Important Stuff to Know about JavaScript's delete Operator

Keep these five essential pieces of info in mind whenever you choose to use the delete operator.

  1. The delete operator always returns true—except you use it for an own non-configurable property.
  2. Suppose the property you intend to delete does not exist. In such a case, the delete operator will not delete anything but will still return true.
  3. The delete operator can only delete own properties. It has no effect on properties in an object's prototype chain. Therefore, after the deletion of an own property, the prototype chain's property—with the same name as the deleted own property—will still be callable.
  4. Avoid using the delete operator on Array objects because delete does not change an array's length. The splice() method is a better way to remove array items.
  5. delete is one of JavaScript's unary operators.

Overview

This article discussed what a JavaScript properties object is. We also used examples to understand how to define and use it.

If you like this article, please Tweet it.

Thanks for reading!