Object in JavaScript – What Is a JavaScript Properties Object?

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

Note

A JavaScript object is sometimes called a properties object.

Syntax of a JavaScript Object

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

Here’s an illustration:

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

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

Note

• A property is sometimes called a named value.
• A property’s name is sometimes called key.

Examples of a JavaScript Object

Let’s discuss some examples of objects in JavaScript.

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,
  rentPa
  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, rentPa

You can see that the property’s key and assigned variable have the same name, thus, making 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 JavaScript object.

CodeSweetly ads

How to Access an Object’s Value

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

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

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 an object’s value

One way to access an 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.

Example: Use the dot syntax to access a properties object’s value

// 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.

Let’s discuss the second way to access a JavaScript object’s value.

How to use the square bracket notation to access an object’s value

An alternate way to access an 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.

Example: Use the square bracket syntax to access a properties object’s value

// 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 is the difference between the dot syntax and the square bracket notation? Let’s find out.

JavaScript object’s 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.

Example: The dot syntax cannot access properties with a number name

// 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 another example.

Example: Use the square bracket syntax to access a property with a multiword name

// 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.

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’s name to look for in the profile object.

Example: Use a bracketed string to access an object’s value

// 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.

Let’s now consider another example.

Example: Use a bracketed variable to access an object’s value

// 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 look 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.

Example: Compute an object’s property’s name

// 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 discuss adding new properties to an object.

How to Add a New Property to a JavaScript Object

JavaScript provides two ways to add new properties to an object:

• The dot notation
• The bracket notation

Let’s discuss the two techniques below.

How to use the dot notation to add a new property to an object

One way to add new properties to a JavaScript object is to use the dot syntax as follows:

existingObject.newPropertyKey = newPropertyValue;

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

newPropertyKey refers to the name of the new property you wish to add to the existingObject.

newPropertyValue refers to the value you wish to assign to the newPropertyKey.

Example: Use the dot syntax to add a new property to an object

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

// Add a new property to the profile object:
profile.status = "married";

// Log the profile object's content to the console:
console.log(profile);

// The invocation above will return:
{ name: "Sarah", age: 25, gender: "Female", status: "married" };

Try it on StackBlitz

The snippet above added a status property to the profile object with a "married" string value.

Let’s now discuss the second way to add a new property to an object.

How to use the square bracket notation to add a new property to an object

An alternate way to add a new property to a JavaScript object is to use a square bracket like this:

existingObject[newPropertyKey] = newPropertyValue;

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

newPropertyKey refers to the name of the new property you wish to add to the existingObject.

newPropertyValue refers to the value you wish to assign to the newPropertyKey.

Example: Use the square bracket syntax to add a new property to an object

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

// Add a new property to the profile object:
profile["status"] = "married";

// Log the profile object's content to the console:
console.log(profile);

// The invocation above will return:
{ name: "Sarah", age: 25, gender: "Female", status: "married" };

Try it on StackBlitz

Note that JavaScript also allows using the square bracket notation to reference a variable.

Here’s an example:

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

// Define a status variable:
const status = "Contractor";

// Add a new property to the profile object:
profile[status] = "married";

// Log the profile object's content to the console:
console.log(profile);

// The invocation above will return:
{ name: "Sarah", age: 25, gender: "Female", Contractor: "married" };

Try it on StackBlitz

You can see that the computer read the unquoted status word as a variable—not a property’s name.

Let’s now see how to delete an object’s property.

CodeSweetly ads

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.