JavaScript Objects
Create, Access, Modify & Master Object Operations
Introduction to JavaScript Objects
In JavaScript, objects are everywhere. From storing user data to building APIs or handling events—objects hold key-value pairs that power the language. If you're aiming to build interactive websites or master frameworks like React or Node.js, understanding objects is non-negotiable.
What is a JavaScript Object?
A JavaScript object is a collection of properties, where each property is a key-value pair. Think of it as a dictionary or real-world entity, like a car or a person.
const car = {
brand: "Toyota",
model: "Corolla",
year: 2021
};
{ brand: "Toyota", model: "Corolla", year: 2021 }
Creating Objects
1. Using Object Literals
const user = {
name: "Alice",
age: 25,
isMember: true
};
2. Using the Object Constructor
const user = new Object();
user.name = "Bob";
user.age = 30;
3. Using a Function Constructor
function User(name, age) {
this.name = name;
this.age = age;
}
const user1 = new User("Charlie", 28);
Accessing Object Properties
You can access object properties in two ways:
console.log(user.name); // Dot notation
console.log(user["age"]); // Bracket notation
Modifying and Adding Properties
user.age = 26; // Modify
user.city = "Paris"; // Add
{ name: "Alice", age: 26, isMember: true, city: "Paris" }
Deleting Properties
delete user.city;
Nested Objects
const person = {
name: "David",
contact: {
email: "david@example.com",
phone: "1234567890"
}
};
console.log(person.contact.email);
"david@example.com"
Object Methods
Objects can contain functions as values called methods.
const calculator = {
add: function(x, y) {
return x + y;
}
};
console.log(calculator.add(5, 3));
8
this Keyword
The this keyword refers to the object from which the method was called.
const profile = {
username: "techie",
showUsername: function() {
return this.username;
}
};
console.log(profile.showUsername());
"techie"
Looping Through Objects
Using for...in loop
for (let key in user) {
console.log(key + ": " + user[key]);
}
Built-in Object Methods
Object.keys(obj)– returns all property namesObject.values(obj)– returns all valuesObject.entries(obj)– returns an array of [key, value] pairs
console.log(Object.keys(user));
console.log(Object.values(user));
console.log(Object.entries(user));
Checking for Property Existence
"userId" in user; // false
user.hasOwnProperty("age"); // true
Object Destructuring
const { name, age } = user;
console.log(name, age);
"Alice", 26
Cloning and Merging Objects
1. Using Object.assign()
const original = { a: 1 };
const clone = Object.assign({}, original);
2. Using Spread Operator
const newClone = { ...original };
Freezing and Sealing Objects
Object.freeze(obj)– Prevents adding/removing/modifying propertiesObject.seal(obj)– Prevents adding/removing but allows modifying existing
Object.freeze(user);
user.name = "Eve"; // Won’t work
console.log(user.name);
"Alice"
Summary
JavaScript objects are powerful and versatile. They serve as the foundation for JSON, API calls, configurations, and complex data models. Mastering object manipulation is key to advancing in any JS-based role or framework.
What's Next?
In the upcoming modules, you’ll dive into arrays, which are object-like structures perfect for ordered data. Once you pair them with objects, your JavaScript fluency takes a huge leap forward.
Next Topic ⮕JavaScript Arrays – Basics to Advanced with Examples
Sign in with Google
Comments
Loading comments...