Objects in JS
In JavaScript, objects are one of the most important data structures. They allow you to store data in key–value pairs and represent real-world entities — like users, products, or configurations — in a structured way.
Objects are everywhere in JavaScript — from browser APIs to JSON data, and even built-in features like Math and Date. Let’s explore them step by step.
What Is an Object?
An object in JavaScript is a collection of properties, where each property has a key (name) and a value.
Syntax
let objectName = { key1: value1, key2: value2, key3: value3};Each key is a string (or symbol), and each value can be any data type — a number, string, boolean, array, another object, or even a function!
Example
Let’s create a simple person object:
let person = { name: "Harry", age: 22, isStudent: true};Here:
"name"is a key with the value"Harry"."age"is a key with the value22."isStudent"is a key with the valuetrue.
Accessing Object Properties
There are two ways to access properties of an object:
1. Dot Notation
console.log(person.name); // Output: Harry2. Bracket Notation
console.log(person["age"]); // Output: 22Use dot notation when you know the property name beforehand. Use bracket notation when the property name is dynamic or stored in a variable.
Example with Dynamic Property
let key = "isStudent";console.log(person[key]); // Output: trueHere, since the key is stored in a variable, we must use bracket notation.
Modifying and Adding Properties
You can modify existing properties or add new ones anytime — objects in JavaScript are mutable.
Modify a Property
person.age = 23;console.log(person.age); // Output: 23Add a New Property
person.city = "Delhi";console.log(person.city); // Output: DelhiDeleting Properties
To remove a property from an object, use the delete operator:
delete person.isStudent;console.log(person);// Output: { name: "Abhinav", age: 23, city: "Delhi" }Nested Objects
Objects can contain other objects — allowing you to represent complex data structures.
let user = { name: "Riya", address: { city: "Mumbai", zip: 400001 }}; console.log(user.address.city); // Output: MumbaiYou can nest objects as deeply as needed.
Objects and Functions
Functions can be stored inside objects — these are called methods.
let calculator = { add: function(a, b) { return a + b; }, subtract(a, b) { return a - b; // shorthand syntax }}; console.log(calculator.add(5, 3)); // 8console.log(calculator.subtract(10, 4)); // 6This is one of the key features that makes objects so versatile in JavaScript.
Looping Through an Object
You can iterate through an object’s properties using a for...in loop.
let car = { brand: "Tesla", model: "Model 3", year: 2023}; for (let key in car) { console.log(key + ": " + car[key]);}Output:
brand: Tesla
model: Model 3
year: 2023
Useful Object Methods
JavaScript provides several built-in methods to work with objects:
| Method | Description |
|---|---|
Object.keys(obj) | Returns an array of all keys in the object. |
Object.values(obj) | Returns an array of all values in the object. |
Object.entries(obj) | Returns an array of key–value pairs. |
Object.assign(target, source) | Copies properties from one object to another. |
Object.freeze(obj) | Prevents changes to the object. |
Example
let car = { brand: "Toyota", year: 2020 }; console.log(Object.keys(car)); // ["brand", "year"]console.log(Object.values(car)); // ["Toyota", 2020]console.log(Object.entries(car)); // [["brand", "Toyota"], ["year", 2020]]Objects vs Arrays
| Feature | Object | Array |
|---|---|---|
| Structure | Key–value pairs | Indexed list |
| Order | Unordered | Ordered |
| Access | By key name | By numeric index |
| Ideal for | Representing entities (like a user, car, etc.) | Representing lists or sequences |
Sometimes, you’ll even combine them — like an array of objects:
let users = [ { name: "Abhinav", age: 22 }, { name: "Priya", age: 25 }, { name: "Rahul", age: 28 }]; console.log(users[0].name); // Output: Abhinav