DEV Community

Nilesh Kumar
Nilesh Kumar

Posted on

Mastering JavaScript Objects: Comparison, Manipulation, and Control Techniques

JavaScript Object methods diagram

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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]]
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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" }
Enter fullscreen mode Exit fullscreen mode

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" }
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay