Understanding Objects in JavaScript
We have all filled out a form at some point. A school admission form, a job application, a signup page. What does it ask for? Your name, your age, your city, your course. Multiple pieces of information, all describing one single person.
Now imagine trying to store all of that in JavaScript using what we know so far. We could use separate variables:
let name = "Gurjeet";
let age = 22;
let course = "Web Development";
let city = "Amritsar";
This works for one person. But the moment we need to handle ten students, or a hundred, this approach falls apart completely. There is no connection between these variables. Nothing groups them together and says "these four things all belong to the same person."
That is exactly the problem objects solve.
What is an Object?
An object in JavaScript is a way to group related data together under one name. Instead of storing values by position, objects store values by name. Each value gets a label, and that label tells us exactly what the value means.
That label is called a key, and the data it points to is called a value. Together, they form a key-value pair. An object is just a collection of these key-value pairs.
let student = {
name: "Gurjeet",
age: 22,
course: "Web Development",
city: "Amritsar"
};
Now every piece of data has a name attached to it. name, age, course, and city are the keys. "Gurjeet", 22, "Web Development", and "Amritsar" are the values. Each key-value pair is called a property of the object.
Anyone reading this code immediately understands what each value represents. That clarity is what makes objects so useful.
Accessing Properties
There are two ways to access the properties of an object: dot notation and bracket notation.
Dot notation is the one we will use most of the time. We write the object name, followed by a dot, followed by the key.
let student = {
name: "Gurjeet",
age: 22,
course: "Web Development"
};
console.log(student.name); // Gurjeet
console.log(student.age); // 22
console.log(student.course); // Web Development
Bracket notation works the same way, but we pass the key as a string inside square brackets.
console.log(student["name"]); // Gurjeet
console.log(student["course"]); // Web Development
Both give the same result. Dot notation is cleaner and more commonly used. Bracket notation becomes useful when the key is stored in a variable or when the key has spaces in it.
let key = "age";
console.log(student[key]); // 22
Here we stored the key name in a variable and used bracket notation to access the property dynamically. This is something we cannot do with dot notation.
Updating Object Properties
Updating a property works exactly like creating one. We just assign a new value to an existing key.
let student = {
name: "Gurjeet",
age: 22,
course: "Web Development"
};
student.age = 23;
student.course = "Full Stack Development";
console.log(student.age); // 23
console.log(student.course); // Full Stack Development
We targeted the key using dot notation and assigned a new value. The rest of the object stays exactly as it was.
Adding and Deleting Properties
We are not limited to the properties we define when we first create an object. We can add new ones at any time.
let student = {
name: "Gurjeet",
age: 22
};
student.city = "Amritsar";
student.isEnrolled = true;
console.log(student);
// { name: "Gurjeet", age: 22, city: "Amritsar", isEnrolled: true }
We simply assigned a value to a key that did not exist before, and JavaScript added it to the object automatically.
To remove a property, we use the delete keyword.
delete student.isEnrolled;
console.log(student);
// { name: "Gurjeet", age: 22, city: "Amritsar" }
The isEnrolled property is gone. The rest of the object remains untouched.
Arrays vs Objects
A question that comes up naturally at this stage is: when do we use an object and when do we use something else to store data?
The clearest way to think about it is this. When we have a list of similar items where order matters, we use an array. When we are describing a single thing with multiple different characteristics, we use an object.
A list of city names is a collection of similar items. A single person with a name, age, and city is one thing with multiple characteristics.
// A list of cities — order matters, items are similar
let cities = ["Amritsar", "Delhi", "Mumbai", "Bangalore"];
// A single person — multiple characteristics describing one thing
let person = {
name: "Gurjeet",
age: 22,
city: "Amritsar"
};
In real programs, these two are often combined. An array of objects is one of the most common patterns in JavaScript.
let students = [
{ name: "Gurjeet", age: 22 },
{ name: "Priya", age: 21 },
{ name: "Rahul", age: 23 }
];
console.log(students[0].name); // Gurjeet
console.log(students[1].age); // 21
We access the array element using its index, then access the object property using dot notation. This pattern shows up constantly in real JavaScript projects, especially when working with data coming from a server or an API.
Looping Through Object Keys
Sometimes we want to go through all the properties of an object and do something with each one. The for...in loop is built exactly for this purpose.
let student = {
name: "Gurjeet",
age: 22,
course: "Web Development",
city: "Amritsar"
};
for (let key in student) {
console.log(key + ": " + student[key]);
}
// Output:
// name: Gurjeet
// age: 22
// course: Web Development
// city: Amritsar
On each iteration, key holds the name of the current property. We use bracket notation with student[key] to get its value because the key is stored in a variable, and dot notation does not work with variables.
This becomes very practical whenever we want to display all the details of an object, check what properties exist, or process each value one by one without hardcoding every key manually.
