Introduction to the JavaScript objects

In JavaScript, an object is an unordered collection of key-value pairs. Each key-value pair is called a property.

The key of a property can be a string and the value of a property can be any valid JavaScript value e.g., a string, a number, an array, and even a function.

When a function is a property of of an object, it’s often called a method.

JavaScript provides you with many ways to create a new object. The most popular one is to use the object literal syntax.

The below example creates an empty object using the the object literal syntax:

let empty = {};

To create an object with properties, you use the key:value within the curly braces. For example, the following creates a new person object:

let person = {
    firstName: 'venkat',
    lastName: 'ravindra'
};

The person object has two properties firstName and lastName with the corresponding values 'venkat' and 'ravindra'.

When an object has multiple properties, you use a comma (,) to separate them like the above example.

Accessing properties

1) The dot notation (.) The following illustrates how to use the dot notation to access a property of an object:

objectName.propertyName

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

person.firstName

This example creates a person object and shows the first name and last name to the console:

let person = {
    firstName: 'venkat',
    lastName: 'ravindra'
};


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

2) Array-like notation ( []) The following illustrates how to access the value of an object’s property via the array-like notation:

objectName['propertyName']

For example:

let person = {
    firstName: 'venkat',
    lastName: 'ravindra'
};

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

When a property name contains spaces, you need to place it inside quotes. For example, the following address object has the 'building no' as a property:

let address = {
    'building no': 11,
    street: ' 1st street',
    state: 'karnataka',
    country: 'india'
};

To access the 'building no' property, you need to use the array-like notation:

address['building no'];

If you use the dot notation, you’ll get an error:

address.'building no';

Error:

SyntaxError: Unexpected string

Note that it’s not a good practice to use spaces in the property names of an object.

Reading from a property that does not exist will result in an undefined. For example:

console.log(address.district);

Output:

undefined

Modifying the value of a property

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

let person = {
    firstName: 'venkat',
    lastName: 'ravindra'
};
person.firstName = 'venkat';

console.log(person);

Output:

{ firstName: 'venkat', lastName: 'ravindra' }

In this example, we changed the value of the firstName property of the person object from 'John' to 'Jane'.

Adding a new property to an object

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

person.age = 25;

Deleting a property of an object

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

delete objectName.propertyName;

The following example removes the age property from the person object:

delete person.age;