Objects in JavaScript
Objects in JavaScript are data structure that can store both values and functions. Values are stored as key:value pairs, where each key is a string/symbol and the value can be anything including other objects, arrays and functions. They are called properties while functions are stored as key:function() and are referred to as methods. Objects are mutable and properties can be added, modified or removed at any time.
Let us see an example of an object,
const about = {
name : "Ansh" ,
age : "100 years" ,
home : "Chandigarh"
};
This method is also called object literal, where we create an object using curly braces.
Need for objects:
Stores information together at one place.
Allows data grouping and encapsulation, making it easier to manage information.
Organise complex data.
Dynamic nature.
Creating Objects
One method would be using object literal that we discussed above, another would be using new Object () constructor.
Eg. let obj = new Object();
obj.name= "ansh";
obj.age = "100";
obj.job= "developer";
console.log(obj);
Objects can also be created by creating an empty object then adding properties later.
let about = {};
about.name= "ansh";
about.age= "100";
about.job= "developer";
console.log(about);
Operations on Objects in JavaScript
Accessing Objects
You can access the properties of an object using dot notation or bracket notation.
Dot notation: objectName.propertyName
Eg. console.log(about.age);
Bracket notation: objectName["propertyName"]
Eg. console.log["age"];
Updating Object Properties
Values can be reassigned in an object.
Eg. let about = {
name : "Ansh" ,
age : "100 years" ,
home : "Chandigarh"
};
about.age = 101;
console.log(about);
Adding Properties
let about = {
name : "Ansh" ,
age : "100 years" ,
home : "Chandigarh"
};
about.job = "developer";
console.log(about);
The console will print, {name : "Ansh", age : "100 years", home : "Chandigarh", job: "developer"};
Deleting Properties
Delete keyword is used to remove a property from the object.
Eg. let about = {
name : "Ansh" ,
age : "100 years" ,
home : "Chandigarh"
};
delete about.home;
console.log(about);
The output will now only contain name and age of the person.
Looping Through Object Keys
We use for...in loop to iterate through keys of an object. Key is a variable that holds the name (key/property name) of the property during each loop.
for...in loop cannot be used for arrays, because the order of looping(iteration) is not guaranteed.
Eg. for (let key in about) {
console.log(key, about[key]); //code to be executed for each property
};
The console prints:
name Ansh
age 100 years
home Chandigarh
Difference Between Array and Object
| Arrays | Objects |
|---|
Uses indexes | Uses keys |
Ordered list | Unordered |
Accessed by indexes | Accessed by keys |
for or forEach loop are used of iteration | for...in loop is used for iteration |
JavaScript arrays should be used when we need numeric indexing and ordered values while we can use objects to store values with their keys.
Assignment
Object representing a student:
let student = {
name: "Ansh",
age: 5,
course :"CS"
};
Updating one property (age):
student.age = 6 ;
Printing all properties using loop:
for (let key in student){
console.log(key + " : " + student[key]);
};
Output:
name : Ansh
age : 6
course : CS