Mastering JavaScript Objects: A Deep Dive into All Important Object Methods
JavaScript objects are fundamental building blocks of the language, allowing developers to store, manipulate, and organize data efficiently. JavaScript provides several built-in methods that help in working with objects, from creating, modifying, and accessing properties to advanced techniques like object cloning and comparison.
In this article, we will cover all the important object methods in JavaScript with their definitions, explanations, and multiple examples.
Table of Contents
Creating Objects in JavaScript
Adding, Updating, and Deleting Properties
Object.assign()
,Object.defineProperty()
,Object.defineProperties()
,delete
Retrieving Object Properties and Keys
Object.keys()
,Object.values()
,Object.entries()
Checking Object Properties
hasOwnProperty()
,in
operator
Merging and Cloning Objects
Object.assign()
,structuredClone()
,JSON.stringify()
&JSON.parse()
Freezing and Sealing Objects
Object.freeze()
,Object.seal()
Comparing Objects
Object.is
()
,JSON.stringify()
Advanced Object Methods
Object.getOwnPropertyDescriptors()
,Object.getPrototypeOf()
,Object.setPrototypeOf()
,Object.create()
1. Creating Objects in JavaScript
Before we dive into methods, let's see how to create objects in JavaScript:
// Object using object literal
let person = {
name: "Alice",
age: 25,
city: "New York"
};
// Object using constructor function
function Person(name, age) {
this.name = name;
this.age = age;
}
let person2 = new Person("Bob", 30);
2. Adding, Updating, and Deleting Properties
Object.assign(target, source)
- Copies properties from one object to another
let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
Object.assign(obj1, obj2);
console.log(obj1); // Output: { a: 1, b: 2, c: 3, d: 4 }
Object.defineProperty(obj, prop, descriptor)
- Defines a new property with detailed control
let car = {};
Object.defineProperty(car, "brand", {
value: "Toyota",
writable: false, // Cannot be modified
enumerable: true
});
console.log(car.brand); // Output: Toyota
car.brand = "Honda"; // No effect
console.log(car.brand); // Output: Toyota
Object.defineProperties(obj, props)
- Defines multiple properties at once
let book = {};
Object.defineProperties(book, {
title: { value: "JavaScript Guide", writable: true },
pages: { value: 500, writable: false }
});
console.log(book); // Output: { title: 'JavaScript Guide', pages: 500 }
delete
obj.property
- Removes a property from an object
let user = { name: "John", age: 30 };
delete user.age;
console.log(user); // Output: { name: "John" }
3. Retrieving Object Properties and Keys
Object.keys(obj)
- Returns an array of keys
let person = { name: "Alice", age: 25 };
console.log(Object.keys(person)); // Output: ["name", "age"]
Object.values(obj)
- Returns an array of values
console.log(Object.values(person)); // Output: ["Alice", 25]
Object.entries(obj)
- Returns an array of key-value pairs
console.log(Object.entries(person)); // Output: [["name", "Alice"], ["age", 25]]
4. Checking Object Properties
hasOwnProperty(prop)
- Checks if an object has a property
console.log(person.hasOwnProperty("name")); // Output: true
console.log(person.hasOwnProperty("address")); // Output: false
in
operator - Checks if a property exists
console.log("age" in person); // Output: true
console.log("address" in person); // Output: false
5. Merging and Cloning Objects
Object.assign()
- Clones an object
let original = { a: 1, b: 2 };
let clone = Object.assign({}, original);
console.log(clone); // Output: { a: 1, b: 2 }
structuredClone(obj)
- Deep clones an object
let deepCopy = structuredClone(original);
console.log(deepCopy); // Output: { a: 1, b: 2 }
JSON.stringify() & JSON.parse()
- Another way to deep clone
let deepClone = JSON.parse(JSON.stringify(original));
console.log(deepClone); // Output: { a: 1, b: 2 }
6. Freezing and Sealing Objects
Object.freeze(obj)
- Prevents adding, deleting, or modifying properties
let frozen = { name: "John" };
Object.freeze(frozen);
frozen.name = "David"; // No effect
console.log(frozen.name); // Output: John
Object.seal(obj)
- Prevents adding or deleting properties but allows modifications
let sealed = { name: "Alice" };
Object.seal(sealed);
sealed.name = "Emma"; // Allowed
delete sealed.name; // Not allowed
console.log(sealed); // Output: { name: "Emma" }
7. Comparing Objects
Object.is
(value1, value2)
- Compares two values
console.log(Object.is(5, 5)); // Output: true
console.log(Object.is({}, {})); // Output: false
Using JSON.stringify()
for object comparison
let objA = { a: 1 };
let objB = { a: 1 };
console.log(JSON.stringify(objA) === JSON.stringify(objB)); // Output: true
8. Advanced Object Methods
Object.getOwnPropertyDescriptors(obj)
- Returns property details
console.log(Object.getOwnPropertyDescriptors(person));
Object.getPrototypeOf(obj)
- Gets an object’s prototype
console.log(Object.getPrototypeOf([])); // Output: Array prototype object
Object.setPrototypeOf(obj, prototype)
- Sets an object's prototype
let proto = { greet: () => "Hello!" };
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(obj.greet()); // Output: Hello!
Object.create(proto)
- Creates a new object with the given prototype
let newObject = Object.create(proto);
console.log(newObject.greet()); // Output: Hello!
Final Thoughts
JavaScript objects are incredibly powerful, and mastering their built-in methods will help you manage data more efficiently. Whether you’re manipulating properties, searching for values, freezing objects, or comparing them, these methods provide everything you need for working with objects in JavaScript.
🚀 Practice these methods in your projects and take your JavaScript skills to the next level!