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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series