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

  1. Creating Objects in JavaScript

  2. Adding, Updating, and Deleting Properties

    • Object.assign(), Object.defineProperty(), Object.defineProperties(), delete
  3. Retrieving Object Properties and Keys

    • Object.keys(), Object.values(), Object.entries()
  4. Checking Object Properties

    • hasOwnProperty(), in operator
  5. Merging and Cloning Objects

    • Object.assign(), structuredClone(), JSON.stringify() & JSON.parse()
  6. Freezing and Sealing Objects

    • Object.freeze(), Object.seal()
  7. Comparing Objects

  8. 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!