
JavaScript Tutorial – Day 10: Objects in JavaScript
Objects in JavaScript are a fundamental concept that every beginner must master. In this JavaScript tutorial, we’ll explain what objects are, why they are used, and how to create, modify, and work with them step by step.
Until now, we have worked with variables, data types, arrays, loops, and constants. Arrays allowed us to store multiple values in a single variable, but they only use indexes (0, 1, 2, …
) to access values. What if we want something more descriptive—like name
, age
, email
—instead of numbers? That’s where objects come in.
Objects help us represent real-world entities in code. For example, a student has a name
, age
, marks
, and a course
. Instead of storing these in different variables, we can put them all inside one object.
What are Objects in JavaScript?
An object in JavaScript is a collection of related data written in key–value pairs.
- The key is the property name (like
name
,age
,email
) - The value is the data stored for that property
👉 Example:
let student = {
name: "Aarav",
age: 21,
isEnrolled: true
};
console.log(student);
Here:
name
is a key,"Aarav"
is its valueage
is a key,21
is its valueisEnrolled
is a key,true
is its value
This is much easier to understand than storing values separately.
Why Use Objects in JavaScript?
- Organized Data – Instead of creating multiple variables, we store related data together.
- Readable Code – Accessing
student.name
is more meaningful thanarr[0]
. - Real-World Representation – Objects represent real things: a car, a user, a product.
- Flexibility – Objects can store different types of values: strings, numbers, arrays, functions, even other objects.
Creating Objects in JavaScript
There are multiple ways to create objects:
1. Using Object Literals (most common)
let car = {
brand: "Tesla",
model: "Model S",
year: 2024
};
2. Using new Object()
let book = new Object();
book.title = "JavaScript Guide";
book.author = "MDN";
3. Using Constructor Functions
function Student(name, age) {
this.name = name;
this.age = age;
}
let student1 = new Student("Ravi", 22);
let student2 = new Student("Ananya", 24);
👉 This method is useful when creating many similar objects.
Accessing Object Properties
We can access values in two ways:
Dot Notation
console.log(car.brand); // Tesla
console.log(car.model); // Model S
Bracket Notation
console.log(car["year"]); // 2024
👉 Use dot notation when keys are normal words.
👉 Use bracket notation when keys have spaces or special characters:
let person = {
"first name": "Rahul",
"last name": "Sharma"
};
console.log(person["first name"]); // Rahul
Updating and Adding Properties
We can change existing values or add new ones easily.
car.year = 2025; // update
car.color = "Red"; // add new property
console.log(car);
Deleting Properties from Objects
delete car.color;
console.log(car);
Nested Objects in JavaScript
Objects can have other objects inside them.
let student = {
name: "Anjali",
marks: {
math: 90,
science: 85,
english: 88
}
};
console.log(student.marks.math); // 90
Objects with Methods
Objects can store functions as values. These are called methods.
let person = {
name: "Kiran",
greet: function() {
return "Hello, my name is " + this.name;
}
};
console.log(person.greet()); // Hello, my name is Kiran
👉 Notice the keyword this
. It refers to the current object.
Looping Through Objects
We can use a for…in loop to go through all properties:
let laptop = {
brand: "HP",
ram: "16GB",
processor: "i7"
};
for (let key in laptop) {
console.log(key + ": " + laptop[key]);
}
Output:
brand: HP
ram: 16GB
processor: i7
Objects vs Arrays in JavaScript
Feature | Arrays | Objects |
---|---|---|
Structure | Ordered list of values | Key–value pairs |
Access | By index (arr[0] ) | By key (obj.name ) |
Example | ["Apple", "Banana"] | {name: "Apple", type: "Fruit"} |
👉 Use arrays when order matters.
👉 Use objects when labels (keys) make more sense.
Why Objects in JavaScript are Important
- Objects are the foundation of JavaScript.
- Almost everything in JS is an object (arrays, dates, even functions).
- APIs and JSON (data from servers) are based on objects.
- They make your code organized and scalable.
Internal & External Links
- Review Day 9: Arrays in JavaScript to see how loops work before applying them to objects.
- Learn more from the official MDN guide on objects.
Conclusion
In this JavaScript tutorial, we explored objects in JavaScript in detail. You learned:
- What objects are and why they’re important
- How to create, access, update, and delete object properties
- Nested objects and methods
- Looping through objects
- Differences between arrays and objects
Objects are the building blocks of real-world applications. From storing user details in a website to handling API responses, you will use objects everywhere in JavaScript.
👉 In Day 11, we’ll dive into DOM in JavaScript and learn how they are backbone of modern web interactivity.