JavaScript objects are incredibly powerful and versatile. They allow us to store complex data and come with a wide range of built-in methods to make data manipulation easier. Let's look at some of the most useful object methods, and how they compare to each other.
1. Object Comparison
Comparing objects directly with === won’t work because JavaScript compares by reference, not by value. For example:
const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2); // false
To compare the contents, use a deep comparison function or a library like Lodash.
2. Object Descriptors
Property descriptors provide metadata about an object's properties. For instance:
value: Property’s value
writable: Can the value be changed?
enumerable: Is it visible in loops?
configurable: Can it be modified?
const obj = { name: "Alice" };
const descriptor = Object.getOwnPropertyDescriptor(obj, "name");
console.log(descriptor);
3. Extracting Keys, Values, and Entries
Object.keys(): Returns an array of an object’s keys.
Object.values(): Returns an array of values.
Object.entries(): Returns an array of key-value pairs.
const person = { name: "Alice", age: 25 };
console.log(Object.keys(person)); // ["name", "age"]
console.log(Object.values(person)); // ["Alice", 25]
console.log(Object.entries(person)); // [["name", "Alice"], ["age", 25]]
4. Merging and Cloning Objects
Object.assign() copies properties from one object to another. It only performs a shallow copy, so it won’t deeply clone nested objects.
const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }
5. Object.create()
This method creates a new object using a specified prototype. Useful for inheritance:
const personPrototype = {
greet() { return `Hello, ${this.name}`; }
};
const person = Object.create(personPrototype);
person.name = "Alice";
console.log(person.greet()); // "Hello, Alice"
6. Object.is()
This method checks if two values are the same, even distinguishing between +0 and -0 or comparing NaN correctly.
console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true
7. Object.getOwnPropertyDescriptors()
Gets descriptors of all properties. Useful for deep copies with non-default descriptors:
const obj = { name: "Alice" };
console.log(Object.getOwnPropertyDescriptors(obj));
8. Object.getOwnPropertyNames()
Returns all property names, including non-enumerable ones.
const obj = { a: 1 };
Object.defineProperty(obj, "b", { value: 2, enumerable: false });
console.log(Object.getOwnPropertyNames(obj)); // ["a", "b"]
9. Object.seal()
Seals an object, allowing changes to existing properties but no additions or deletions.
const obj = { name: "Alice" };
Object.seal(obj);
obj.age = 30; // Fails
console.log(obj); // { name: "Alice" }
10. Object.freeze()
Freezes an object, preventing any modifications.
const obj = { name: "Alice" };
Object.freeze(obj);
obj.name = "Bob"; // Fails
console.log(obj); // { name: "Alice" }
11. Object.assign()
This is used for copying properties from multiple source objects to a target object.
const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }
Conclusion
JavaScript provides an arsenal of methods to work with objects, each serving a specific purpose. By understanding how and when to use these methods, you can control object behaviour, modify their properties, or even lock them from changes.
Top comments (0)