Comprehensive Guide to JavaScript Objects: Creation, Manipulation, and Usage

Prepared By: Kale J. N.
JavaScript Objects
1. Introduction to Objects
An object in JavaScript is a collection of key–value pairs.
• Keys → called properties
• Values → can be any data type (string, number, array, function, another object, etc.)
Objects are used to represent real-world entities.
Example:
const person = {
name: "abc",
age: 25,
isStudent: true
};
Here:
• name, age, isStudent → properties
• "abc", 25, true → values
2. Creating Objects
2.1 Object Literal (Most Common Method)
const car = {
brand: "Toyota",
model: "Innova",
year: 2023
};
2.2 Using new Object()
const car = new Object();
car.brand = "Toyota";
car.model = "Innova";
car.year = 2023;

2.3 Using Constructor Function
function Person(name, age) {
this.name = name;
this.age = age;
}
const p1 = new Person("Alice", 30);
2.4 Using Class (Modern Method – ES6)
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const p1 = new Person("Alice", 30);
3️. Accessing Object Properties
3.1 Dot Notation
console.log(person.name);
//prints the value of the name property of the person object to the console.
3.2 Bracket Notation
console.log(person["age"]);
Bracket notation is useful when:
 Property name is dynamic
 Property name has spaces
Example:
const user = {
"first name": "Rahul"
};
console.log(user["first name"]);

4️. Adding, Updating & Deleting Properties
4.1 Add Property
person.city = "Mumbai";
//adds a new property city to the person object (or updates it) with the value "Mumbai".
4.2 Update Property
person.age = 26;
4.3 Delete Property
delete person.isStudent;
//removes the isStudent property from the person object.
5️. Object Methods
When a function is stored inside an object, it is called a method.
const person = {
name: "John",
greet: function() {
console.log("Hello!");
}
};
person.greet();
6️. Looping Through Objects
6.1 for...in Loop
const person = {
name: "John",
age: 25
};
for (let key in person) {
console.log(key + ": " + person[key]);

}
6.2 Object Methods
Object.keys()
console.log(Object.keys(person));
//prints an array of all property names (keys) of the person object.
Object.values()
console.log(Object.values(person));
//prints an array of all property values of the person object.
Object.entries()
console.log(Object.entries(person));
//prints an array of [key, value] pairs for each property in the person object.
7️. Nested Objects
Objects inside another object.
const student = {
name: "Amit",
marks: {
math: 90,
science: 85
}
};
console.log(student.marks.math);
8️. Object Destructuring (ES6)
Extract properties into variables.
const person = {
name: "John",
age: 25
};
const { name, age } = person;
console.log(name);

9️. Spread Operator in Objects
Used to copy or merge objects.
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { ...obj1, ...obj2 };
10. JSON and Objects
Convert Object to JSON
const jsonString = JSON.stringify(person);
//converts the person object into a JSON string.
Convert JSON to Object
const obj = JSON.parse(jsonString);
//converts the JSON string jsonString back into a JavaScript object.

Comprehensive Guide to JavaScript Objects: Creation, Manipulation, and Usage

Comprehensive Guide to JavaScript Objects: Creation, Manipulation, and Usage

More Related Content

What's hot

Similar to Comprehensive Guide to JavaScript Objects: Creation, Manipulation, and Usage

More from Jaydeep Kale

Recently uploaded

Comprehensive Guide to JavaScript Objects: Creation, Manipulation, and Usage