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.
Top comments (0)