Objects in JavaScript – Notes (This One Actually Changed How I Think About Data)
Okay so we've done variables, data types, operators, control flow. Things have been building up slowly and honestly it's starting to feel like pieces of a puzzle coming together. Today's topic is objects and I'll be honest – when I first heard the word "object" in a programming context I thought it was going to be weird and abstract. It's actually one of the most natural things in JavaScript once it clicks. Let me try to explain it the way it clicked for me.
What Is an Object and Why Do We Need One?
So remember how we learned that variables store one piece of information? Like let name = "Aryan" stores a name. Let age = 17 stores an age. That works fine for individual values.
But now imagine you're building a student profile. You'd need to store a name, an age, a city, a course, a roll number, maybe whether they're present or not. If you used separate variables for all of that it would look like this:
let studentName = "Aryan"; let studentAge = 17; let studentCity = "Delhi"; let studentCourse = "Computer Science";
That's already four variables and they're all floating around separately with no connection to each other. Now imagine doing this for 30 students. It becomes a complete mess very fast.
Objects solve this by letting you group related information together under one name. Instead of four separate boxes you have one big box with labeled compartments inside it. The box is the object. The compartments are called properties. Each property has a name (called a key) and something stored in it (called a value).
This key-value structure is the core idea of objects. Everything about objects comes back to that.
Creating an Object
Here's how you write a basic object in JavaScript:
let student = { name: "Aryan", age: 17, city: "Delhi", course: "Computer Science", isPresent: true };
The curly braces mark the start and end of the object. Inside you have pairs separated by commas. Each pair has a key on the left, a colon in the middle, and a value on the right. The values can be any data type – strings, numbers, booleans, whatever fits.
That whole thing is now stored in one variable called student. One variable, five pieces of related information, all organized and labeled. Much cleaner than five separate variables.
Accessing Properties – Dot Notation and Bracket Notation
Okay so you've got the object. Now how do you actually get stuff out of it?
There are two ways.
Dot Notation
This is the one you'll use most of the time. You write the object name, then a dot, then the key name.
console.log(student.name); // Aryan console.log(student.age); // 17 console.log(student.city); // Delhi
Simple, readable, clean. This is the go-to method.
Bracket Notation
This one uses square brackets with the key name as a string inside.
console.log(student["name"]); // Aryan console.log(student["age"]); // 17
Looks a bit more awkward right. So why does it exist?
Because sometimes you don't know the key name ahead of time. Like if the key is stored in a variable, dot notation won't work but bracket notation will.
let key = "city"; console.log(student[key]); // Delhi
You can't do student.key here because JavaScript would literally look for a property called "key" on the object, not the value of the variable key. Bracket notation is smarter about this. So dot notation for normal everyday use, bracket notation when the key name is dynamic or stored in a variable.
Updating Object Properties
Changing a property value is straightforward. You just reassign it the same way you'd reassign a regular variable.
student.age = 18; console.log(student.age); // 18
student.city = "Mumbai"; console.log(student.city); // Mumbai
Even though the object was declared with let, updating individual properties works fine. You're not replacing the whole object, just updating what's inside one of its compartments.
Adding and Deleting Properties
Here's something cool about JavaScript objects – they're flexible. You can add new properties even after the object is already created.
student.rollNumber = 42; student.grade = "A";
console.log(student.rollNumber); // 42 console.log(student.grade); // A
These properties didn't exist when we first wrote the object but JavaScript is perfectly happy to add them in later. Just assign them and they appear.
Deleting a property is also a one liner. Use the delete keyword:
delete student.isPresent; console.log(student.isPresent); // undefined
Once you delete a property it's gone. Accessing it now returns undefined because that key no longer exists in the object.
Quick Detour – Objects vs Arrays
This is something that confused me for a bit so I want to address it properly.
Arrays and objects are both ways of storing multiple values. But they're used for different situations.
An array is an ordered list. The items are accessed by their position (index). It's good for storing a collection of similar things like a list of names or a list of scores.
let scores = [85, 92, 78, 95]; console.log(scores[0]); // 85
An object is an unordered collection of labeled values. Items are accessed by their key name. It's good for storing different attributes that describe one thing.
let student = { name: "Aryan", age: 17, score: 85 }; console.log(student.name); // Aryan
So if you're thinking about a list of similar things – use an array. If you're thinking about one thing with multiple different properties describing it – use an object. A list of students would be an array. One student's details would be an object. And in real code you'll often have both – an array full of objects. But that's for later.
Looping Through Object Keys
What if you want to go through all the properties of an object without writing them out one by one? There's a special loop for that called for...in.
for (let key in student) { console.log(key + ": " + student[key]); }
What this does is go through each key in the object one at a time and run the code inside the block for each one. The variable key holds the current key name on each loop. And student[key] uses bracket notation to get the value for that key.
For our student object the output would look like:
name: Aryan age: 18 city: Mumbai course: Computer Science rollNumber: 42 grade: A
This is super useful when you don't know how many properties an object has or when you want to display everything without writing a separate console.log for each property.
Assignment
Create a Student Object, Add Properties, Update One, Then Loop Through It
// Step 1 – Create the object let student = { name: "Priya", age: 19, course: "Data Science" };
// Step 2 – Add a new property student.rollNumber = 101;
// Step 3 – Update an existing property student.age = 20;
// Step 4 – Print all keys and values using a loop for (let key in student) { console.log(key + " → " + student[key]); }
Output: name → Priya age → 20 course → Data Science rollNumber → 101
I added rollNumber after the object was already created just to show that it works. And the age update from 19 to 20 reflects correctly in the loop output. The for...in loop handled printing everything cleanly without me having to write four separate console.log lines.
Quick Recap
An object groups related data together using key-value pairs
Use curly braces to create an object, colons to separate keys from values, commas between pairs
Dot notation is the standard way to access properties – student.name
Bracket notation is used when the key is dynamic or stored in a variable – student["name"] or student[key]
You can update properties by reassigning them, add new ones the same way, and remove them using delete
Use for...in to loop through all keys in an object
Arrays are ordered lists accessed by index, objects are labeled collections accessed by key name