JavaScript Objects

In JavaScript, objects are used to store data in key-value pairs. Objects are used to organize information easily. In this blog, we will discuss what JavaScript objects are, how you can create and use them, and some useful methods that will help you work with objects.

Table of Contents:

What is an Object in JavaScript?

An object in JavaScript is a collection of data that is stored in key-value pairs. Keys are also known as properties, and each key has a value. These values can be of any type, like numbers, strings, or even other objects. Objects are used to organize related data.  

Creating JavaScript Objects

There are two common ways to create objects in JavaScript which are using Object Literals and using the new Object() syntax.

1. Using Object Literals

This is the most common and easiest way to create an object. You define an object by placing key-value pairs inside curly braces {}.

Example:

Output:

Here,

• person is an object that has three properties name, age, and city, and each property has a corresponding value.

2. Using the new Object() Syntax

You can also create an object using the new Object() constructor. This is less common than the previous one but still valid.

Example:

Output:

Here,

• An empty object is created using new Object().
• Then, properties are added to the object using dot notation. 

Accessing Object Properties

There are two ways to access the properties of an object in JavaScript which are Dot Notation and Bracket Notation.

1. Dot Notation

Dot notation is the most common and simplest way to access an object’s properties. In this, you use the object’s name followed by a dot (.) and then the property name.

Example:

Output:

2. Bracket Notation

In Bracket notation, you can access object properties using square brackets ([]) and a string that represents the property name. This is useful when the property name is stored in a variable or has special characters.

Example:

Output:

Modifying Object Properties

In JavaScript, you can modify the properties of an object using either dot notation or bracket notation.

1. Using Dot Notation

You can directly change the value of an existing property by using dot notation and assigning a new value.

Example:

Output:

Here,

• We updated the age property to 18 and changed the city property to Delhi.

2. Using Bracket Notation

Bracket notation can also be used to modify object properties, especially when the property name is dynamic or contains special characters.

Example:

Output:

Modifying Non-Existent Properties

If you try to modify a property that doesn’t exist, JavaScript will add it as a new property.

Example:

Output:

Here,

• the city property didn’t exist before, but it was added to the object when we assigned a value to it.

Deleting Object Properties

In JavaScript, you can remove properties from an object using the delete operator. This operator removes the specified property from the object, and the property will no longer exist.

Note: Just like modifying properties, you can use both dot notation and bracket notation to delete properties.

Syntax:

delete object.property;
delete object["property"];

Example: Using both dot notation and bracket notation for deleting properties.

Output:

Key Points:

• The delete operator only removes the property from the object, not the variable that holds the object itself.
• Deleting a property does not affect other properties of the object.

Methods in JavaScript Objects

In JavaScript, methods are functions that are stored as object properties. These methods allow you to perform actions related to the object. A method is simply a function that has an object and can access and manipulate that object’s properties.

Defining Methods in JavaScript Objects

You can define methods in an object in two ways, which are ‘using function expressions’ or ‘using shorthand method syntax’.

1. Using Function Expressions:

This is the traditional way to define a method inside an object, where the property is assigned a function as its value.

Example:

Output:

2. Using Shorthand Method Syntax:

In modern JavaScript (ES6+), you can define methods using shorthand syntax, which is just a shorter version of Function Expression.

Example:

Output:

‘this’ Keyword in Methods

In JavaScript, ‘this’ refers to the object to which it belongs. It is used to access properties and methods of an object. In the examples above, this refers to the person object, so this.name can access the name property of the object.

Common Object Methods

JavaScript objects also have built-in methods that can be useful for interacting with them. Some of the most commonly used object methods are:

1. Object.keys()

This method returns an array of an object’s property names (keys).

Example:

Output:

2. Object.values()

This method returns an array of an object’s property values.

Example:

Output:

3. Object.entries()

This method returns an array of an object’s key-value pairs as arrays.

Example:

Output:

Common Mistakes with JavaScript Objects

Here are some common mistakes that people make when working with JavaScript objects. Let’s see how you can avoid them.

1. Accessing Undefined Properties

If you try to access a property that doesn’t exist, JavaScript returns undefined.

Example:

Output:

Solution: Make sure the property you are searching for exists in the code.

2. Accidentally Overwriting Objects

Objects in JavaScript are references. If you assign one object to another, both variables point to the same object, and when you modify one of them then the other one will also be affected.

Example:

Output:

Solution: Create a copy of the object so the changes will not affect the original object.

let courseCopy = { ...course };

3. Forgetting Parentheses for Methods

When you call an object’s method, sometimes you forget to include parentheses (), which can create problems.

Example:

Solution: Always add parentheses when calling a method.

person.greet();

Conclusion

So far in the blog, we have learned what JavaScript objects are, how to create and use them, and some useful methods. An object in JavaScript is a collection of data that is stored in key-value pairs. Each key also known as a property is associated with a value, and the values can be of any type, like numbers, strings, or even other objects. They help you organize and manage information easily.

JavaScript Objects – FAQs