JavaScript Object Properties

In this tutorial. we will learn more about the Properties of Javascript objects. We will how to create a Property, how to add a Property, how to access it and how to delete it.

What is a Property

Object in JavaScript is an unordered collection of Key-Value pairs. Each key-value pair is known as Property. Where key is the name of the Property. JavaScript uses it to search for the Property in the collection.

You can also think of property as a variable attached to the JavaScript object. They are similar to a regular variable but attached to the Object.

The Javascript objects can have any number of properties. You can also create an empty object without any properties.

The key or name of the property must be unique. The property name must be a string.  (But can also be a symbol type). No two properties can have the same name.

We can assign value to the Property, just like we assign value to a regular variable. The value of the Property can be a primitive value, object, function, or special getters and setters methods.

There are two kinds of Properties. Data Property & Accessor Property

Data Property

If the value of the property is a primitive value, object, or function then the property is Data Property.

Note that when the value of a property is a function, then we call the property a method.

Accessor Property

If the property consists of getter and setter methods, then we call the property accessor property.

The JavaScript also maintains several properties for internal purposes only. Hence they are not directly accessible. For Example, internal property [[Prototype]] points to the prototype of an object. We cannot directly access it, But indirectly we can read it using the method Object.getPrototypeOf().

Creating Object Property

We usually create a Property when we create a Javascript object. JavaScript also allows us to add or delete properties even after the creation of the object.

There are many ways in which you can create a Javascript object. For Example, the following code creates the person object consist of three properties firstName, lastName & age using the object literal syntax

Adding a new Property

You can add a new property just by assigning a value. In the following example, we assign value to the mobile property. Since the mobile property does not exist in the person object, JavaScript creates it and attaches it to the object.

If the Property already exists the second property overwrites the first. In the example, we declare firstName again and it overwrites the previous value of the firstName.

defineProperty

You can also add a new Property using the defineProperty method.

The Syntax for creating a new Property is as shown below.

Where
obj: The object on which to define the property.
prop: The name or Symbol of the property to be defined or modified.
descriptor: The descriptor for the property being defined or modified

The following example creates a new empty object person. We then add a new property firstName to it using the defineProperty method.

The third parameter of defineProperty method is the property descriptor object. We can use it to give a value to the property and also configure the property by setting its writable & enumerable & configurable flags.

Accessing the Javascript Property

There are two ways to access a property in JavaScript

  1. Dot notation
  2. Bracket notation

Dot Property Accessor

This is the most common way to access the Property. The syntax for accessing the property using the dot notation is as follows

Where

expression is the object or and expression that should evaluate to object.

identifier is the name of the property that you want to access. It must be a valid JavaScript identifier

For Example

You can use dot notation only if the property name follows the rules of JavaScript identifiers

  1. Can contain only letters, $_, and digits (0-9)
  2. Should not start with a digit.
  3. No Spaces

Square Bracket Property Accessor

Square Brackets are another way to access the Property of a JavaScript Object. And It is the only way if the property name does not follow the rules of JavaScript identifiers. The Syntax is as shown below.

In the following example, full name property contains space. Space is not allowed as an identifier in JavaScript. But you can use it as the property name. But cannot access it using the dot notation. The only way to access it is using the Square Bracket

Setting Properties

You can use the assignment operator (=) to set the value of a property referred to via the dot notation or bracket notation. For example:

When the property doesn’t exist, JavaScript will create it. Hence you need to be careful.

In the following example, we mistype full name as ful name. The JavaScript just creates a new property with that name and does not give any warning.

Property Names

You can use any valid string literal or Symbol as a Property Name.

We can even use the Reserved words as the property name. For Example, words like var & function etc are perfectly ok as Property Name (but not recommended)

The following example shows

You can also use any arbitrary string as Property Name. But we must use quotes around them. Also, you can access them only using bracket notation.

Computed Property Names

From ES6, you can use the expression inside the square brackets( []) to create computed property name. The JavaScript evaluates the expression and uses the return value as Property Name

You can refer to the Computed Property Names in JavaScript

Deleting the Javascript Property

The delete operator allows us to remove property from the object. It will remove the key-value pair from the object.

Trying to access and property that does not exist returns undefined. Hence deleted Property returns undefined. But note that you can also set a property to undefined, the Property still exists but has the value undefined. Hence merely checking for undefined does not tell you whether the property does exist or not.

You can only delete the property owned by the object. You cannot delete the inherited properties (i.e. Prototype Properties).

You can read more about Deleting a Property in JavaScript

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top