JavaScript Objects: Create, Access, Object Constructor, Properties & Methods

JavaScript object; Through this tutorial, i am going to show you JavaScript objects with the help of examples.

JavaScript Objects

• About JavaScript Object
• Create an object
• Accessing objects properties
• Change the property’s value
• Add a new property to an object
• Delete a property of an object
• Check if a property exists
• Iterate over properties of an object using for...in loop

About JavaScript Object

In JavaScript object is a collection of properties where each property has a value associate with the key.

Create an object

Using the curly brackets {…}, you can create an object; as shown below example:

let empty = {};

To create an object with properties, using the key : value pair. Use the following example for that:

let mobile = {
    name: 'apple',
    model: 's7',
    price: '$ 10000'
};

The mobile object has three properties name, model, and pricewith the corresponding values 'apple', 's7'   and '$10000'.

Accessing objects properties

There are two ways to access the property of an object, see the following: the dot notation and array-like notation.

1) The dot notation (.)

The following syntax shows how to use the dot notation to access a property of an object:

objectName.propertyName

i.e, to access the name property of the mobile object, you use the following expression:

mobile.name

The following snippet creates a mobile object and console name and model of mobile objects:

let mobile = {
    name: 'apple',
    model: 's7',
    price: '$ 10000'
};
console.log(mobile.name);
console.log(mobile.model);

2) Array-like notation ( [])

The following syntax shows how to access the value of an object’s property via the array-like notation:

objectName['propertyName'];

For example:

let mobile = {
    name: 'apple',
    model: 's7',
    price: '$ 10000'
};
console.log(mobile['name']);
console.log(mobile['price']);

Suppose, you have property with contains spaces, you need to place it inside quotes.

See the following:

let homeAddress = {
   'house no': 3960,
    street: 'North 1st street',
    state: 'CA',
    country: 'USA'
};

To access the 'house no', you must use the array-like notation:

homeAddress['house no'];

If you use the dot notation, you will get an error:

homeAddress.'house no';

Error:

SyntaxError: Unexpected string

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

console.log(homeAddress.district);

Output:

undefined

Change the property’s value

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

let mobile = {
    name: 'apple',
    model: 's7',
    price: '$ 10000'
};
mobile.name = 'Samsung';
console.log(mobile);

Output:

{name: "Samsung", model: "s7", price: "$ 10000"}

Add a new property to an object

The following expression adds the weight property to the mobile object and assigns 150g to it:

let mobile = {
    name: 'apple',
    model: 's7',
    price: '$ 10000'
};
mobile.name = 'Samsung';
mobile.weight= '150g';
console.log(mobile); // {name: "Samsung", model: "s7", price: "$ 10000", weight: "150g"}

Delete a property of an object

Using delete operator, To delete a property from an object:

delete objectName.propertyName;

The following example removes the price property from the mobile object:

delete mobile.price;

Check if a property exists

Using the in operator, You can check if a property exists in an object:

propertyName in objectName

The following example creates an mobile object and uses the in operator to check if the modeland weightproperties exist in the object.

let mobile = {
    name: 'apple',
    model: 's7',
    price: '$ 10000'
};
console.log('model' in mobile);
console.log('weight' in mobile);

Output:

true
false

Iterate over properties of an object using for...in loop

To iterate over all properties of an object without knowing property names, you use the for...in loop, see the following syntax:

for(let key in object) { 
    // ...
};

The following shows, to creates a book object and iterates over its properties using the for...in loop:

let book = {
    title: 'JavaScript',
    tags: ['es6', 'javascript', 'node.js'],
    price: '$100'
};
for (const key in book) {
    console.log(book[key]);
}

Conclusion

In this tutorial, you have learned the following:

• An object is a collection of properties where each property has a value associate with the key. An object property key is a string and value can be any valid value.
• Use the dot notation ( .) or array-like notation ([]) to access an object property.
• The delete operator removes a property from an object.
• The in operator check if a property exists in an object.
• The for...in iterates over properties of an object.
• When functions are properties of an object, they are called methods.
• Use the this inside the method to access the object’s properties.

Recommended JavaScript Tutorials