Objects in JavaScript
In this blog, we will understand object first and then moving towards the depth of Object.
Let's start from the basics.
Why objects?
When learning JavaScript, we often start with variables and arrays to store data. But as programs grow, we need a better way to organize related information together.
This is where objects come in.
Object -
Object is non-primitive datatype in javascript or collection of property and each properties can contain key and value pair called as object.
The key is always either string or symbol and unique.
Everything in javascript is object.
Real World Example
Suppose we want to store information about a person.
The person has:
name
age
city
Instead of creating multiple variables, we can store everything inside one object.
let person = {
name: "Vishal",
age: 20,
city: "Dehradun"
};
// name, age, city -> keys
//"Vishal", 20, "Dehradun" -> values
Difference between array & object
Beginners often get confused between arrays and objects, but if we closly look in term of javascript so array is also an object internally with 0, 1, 2... keys.
Array
Arrays store values using indexes.
Arrays are best when storing lists of items.
let fruits = ["apple", "banana", "mango"];
0 1 2 // index of element
Object
Objects store values using keys.
Objects are best when storing structured data about something.
let person = {
name: "Vishal",
age: 20
};
Creating Objects in JavaScript
The most common way to create an object is using curly braces {} , and seperate each property (key : value) by comma,
let person = {
name: "Vishal", // key : value
age: 20, // key : value
city: "Dehradun" // key : value
};
Accessing Object Properties
We can access object properties in two ways.
Dot Notation
Bracket Notation
Dot Notation
This is the most common and easiest way to access the property of object
console.log(person.name);
"Vishal"
console.log(person.age);
20
Brackets Notation
This is another or second way to access the property of object using square brackets []
console.log(person["name"]);
"Vishal"
console.log(person["city"]);
"Dehradun"
Updating Object Properties
We can easily update existing values inside an object by using their keys.
Objects are mutable, which means their values can be changed.
person.age = 21;
// now person age is 21 from 20
console.log(person.age) // 21
person.city = "Delhi";
// similarly update city like age
console.log(person.city) // "Dehradun"
Adding New Properties
We can also add new properties to an object. and if exist then it update otherwise add to its new property of object.
person.profession = "Student";
console.log(person.profession)
"Student"
Deleting Object Properties
Sometimes we may want to remove a property from an object.
JavaScript provides the delete keyword
delete person.city; // city property goes remove
Looping Through Object Keys
To access all properties of an object, we can use a for...in loop, that return one by one key of object and we can access those property.
let person = {
name: "Aman",
age: 24,
city: "Mumbai",
professional: "Software Developer"
};
for (let key in person) {
console.log(key, person[key]);
}
// Output - key value
"name" "Aman"
"age" 24
"city" "Mumbai"
"professional" "Software Developer"
Objects are one of the most important concepts in JavaScript because they allow us to represent real-world entities in code.
Conclusion
Objects are a powerful way to store and organize related data in JavaScript using key–value pairs. They help to represent real-world entities like a person, product, or student in a clean and structured way. By understanding how to create, access, update, and loop through objects, you build a strong foundation for writing better JavaScript programs. Mastering objects will make it much easier to work with real-world applications and complex data.
