This article will cover Objects in JavaScript. It’s best suited for someone new to JavaScript.

Topic Covered

• Objects & Its Use Case
• Object Properties
• How to Access Object Properties
• Add & Delete Property
• Nested Object
• Object Methods
• How to Execute Object Methods

Objects & Its Use Case

Suppose a use case where we have to receive a Person details from a user. One approach could be to define multiple variables to get each type of detail like firstName, lastName, phoneNumber, streetNo, address, pincode, etc. This list can grow. There will be so many of them that handling and passing it across different execution points will be a headache. Well here comes the Object as a savior.

In Object, we can store multiple variables (called Property) together, and also the methods which work on those variables.

Here is how to declare an Object in JavaScript. This doesn’t have anything its just an empty object.

var person = {  
}

Object Properties

Object properties are kind of variables only that holds some value. They are represented by a label and then a colon, followed by the value of the label. The value can be of any type be it number, string, array, or even another object 😱.

var person = {  
  name: 'your name'  
}

All valid variables can be treated as a label. But if we want something which is not a valid variable, we have to include that label in single quotes.

var person = {  
  name: 'your name',  
  'my address': 'your address'  
}

Note: We use comma to separate multiple properties in an Object.

How to Access Object Properties

Once we have our object we would like to access it right? JavaScript provides two ways to do this. Once by dot notation and another one is to mention property name within single quotes inside square brackets.

Access property using dot notation

var person = {  
  name: 'your name',  
  'my address': 'your address'  
}

console.log(person.name);

Access property using square brackets

var person = {  
  name: 'your name',  
  'my address': 'your address'  
}

console.log(person['name']);

Note: Now one may ask how we will access label which is not valid variable name. We do this by accessing them using a square bracket. A label that is not a valid variable name cannot be accessed using dot notation.

var person = {  
  name: 'your name',  
  'my address': 'your address'  
}

console.log(person['my address']); // correct  
console.log(person.my address // wrong

Note: If the label accessed is not inside Object, undefined will be returned.

Add & Delete Property

Suppose we have the object which is already declared and defined. JavaScript gives us the power to add new property whenever we want 😆.

var person = {  
  name: 'your name',  
  'my address': 'your address'  
}

person.pincode = 'pincode';  
person['country'] = 'country';

We can also delete a property once its use is over so that we are not keeping unnecessary data.

var person = {  
  name: 'your name',  
  'my address': 'your address'  
}

person.pincode = 'pincode';  
person['country'] = 'country';

delete person.country;  
delete person['name'];

Nested Object

As we previously read that object can be nested too. Here is how to declare them and access

var person = {  
  name: 'your name',  
  address: {  
    street: 'street',  
    'road no': 1  
  }  
}

console.log(person.address.street); // will print 'street'  
console.log(person.address['road no']); //will print 1

Note: In the case of nested Object the dot and square bracket notation can be combined.

Object Methods

It’s very good to bind property and the method which works on that property together. Similarly like different data type values, a label can also hold a function definition. For more on function. Here is how we do it in javaScript

var person = {  
  name: 'your name',  
  address: {  
    street: 'street',  
    'road no': 1  
  },  
  printMyName: function(){  
    console.log('your name');  
  }  
}

It’s not similar to what we do in a normal function definition. Here we write first the label, then a colon, then the function definition inside the function() block.

We can also access the other property of the Object inside function definition using this keyword.

var person = {  
  name: 'your name',  
  address: {  
    street: 'street',  
    'road no': 1  
  },  
  printMyName: function(){  
    console.log(this.name);  
  }  
}

Inside function parenthesis, we can any argument like a normal function. For accessing function argument we don’t need this as their scope is local to function definition.

var person = {  
  name: 'your name',  
  address: {  
    street: 'street',  
    'road no': 1  
  },  
  printWhatIPass: function(myVar){  
    console.log(myVar);  
  }  
}

How to Execute Object Methods

We can call object methods by using dot notation. If the function takes some argument we can pass that too.

var person = {  
  name: 'your name',  
  address: {  
    street: 'street',  
    'road no': 1  
  },  
  printMyName: function(){  
    console.log(this.name);  
  },  
  printWhatIPass: function(myVar){  
    console.log(myVar);  
  }  
}

console.log(person.printMyName()); // will print 'your name'

//will print 'my own text'  
console.log(person.printWhatIPass('my own text'));

This ends the discussion about Objects, it’s property and methods.

Reached till here, give me follow up to get the latest stories.

If you enjoyed reading this, don’t forget the like. 👏

Thank you.