Mastering JavaScript Objects: Comparison, Manipulation, and Control Techniques

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.