The best way one can learn about JavaScript objects is by comparing them with real life objects. Objects in real life have different properties and can do different tasks, e.g., a Bicycle is an object; it has properties like colour, model, name, and methods like start, break, stop.
Now all the Bicycles have these properties; every Bicycle has a colour, model, and name but the value of each of these properties may differ for every Bicycle. Similarly, all the Bicycles perform these methods but at different times.
Difference between objects and dictionaries:
The data stored in the form of key-value pairs is called an Object or a Dictionary. Objects and dictionaries are similar; the difference lies in semantics. In JavaScript, dictionaries are called objects, whereas, in languages like Python or C#, they are called dictionaries.
How to use Objects in JavaScript?
Now we will create an object named user with different properties using JavaScript as an example:
The user object given above has four different properties, i.e., fName, lName, age, and id. These properties have Marry, Jane, 23, and 01 as values, respectively. JavaScript is syntactically a dynamic language, so we can also declare the object in the following way for better readability:
fName: "Mary" ,
lName: "Jane" ,
age: 23 ,
id: 01
};
Generally, objects are declared using the const keyword, and their definitions can consist of multiple lines.
How to access a property present inside an object?
Two different methods can be used to access and assign properties to an object in JavaScript:
- By using the dot “.” operator
- By using the square brackets syntax
Following is the syntax used in the dot operator method:
The syntax for square bracket method is given below:
For example, if we want to access the property age in our object user, we can do it in two different ways:
fName: "Mary" ,
lName: "Jane" ,
age: 23 ,
id: 01
};
console.log(user.age);
console.log(user['age']);
We can also modify the value of the property by using the object_name.property_name and the object_name[‘property_name’] syntax:
fName: "Mary" ,
lName: "Jane" ,
age: 23 ,
id: 01
};
user.age = 24;
console.log(user.age);
user['age'] = 25;
console.log(user['age']);
Similarly, methods can also be accessed in the same way by using the dot operator.
Now we are going to add a method to our user object.
fName: "Mary" ,
lName: "Jane" ,
age: 23 ,
id: 01 ,
birthYear() {
const date = newDate();
Year = date.getFullYear() - this.age;
return Year;
}
};
console.log(user.birthYear());
In the example given above, we have declared a method inside of the object user. This method subtracts the user’s age from the current year to return the user’s birth year.
The ‘this’ keyword in the example refers to the object that owns the age property. This keyword is used to access the value of a property within an object.
Objects in JavaScript can also be declared using the Object constructor along with the new keyword:
// Assigning Properties and Property Values
user.fName = "Marry";
user.lName = "Jane";
user.age = 23;
user.id = 01;
Conclusion
Apart from the primitive data types, almost everything else in JavaScript is an object. The new keyword can convert primitive data types such as Booleans, numbers, and strings into objects (not recommended).
JavaScript has some built-in objects such as Date and Math. We also have the option to create our own custom objects. This guide taught us to create an object and assign it to different properties, property values, and methods. We also learned to access and manipulate/modify the properties and methods present in an object.
