🔍 Advanced Objects in JavaScript: A Deep Dive
Shifa

Shifa @shifa_2

About: I'm a Computer Science student passionate about Data Structures & Algorithms and software development. I enjoy solving complex problems, building efficient solutions, and constantly learning new tech

Joined:
Apr 12, 2025

🔍 Advanced Objects in JavaScript: A Deep Dive

Publish Date: May 10
12 6

JavaScript objects are powerful and flexible, and once you're comfortable with the basics, it's time to explore some advanced object features that can make your code cleaner, more dynamic, and easier to maintain. In this article, we'll explore advanced concepts like:

  • Object Destructuring
  • Computed Property Names
  • Object Property Shorthand
  • Object Methods
  • The this keyword
  • Prototypes & Inheritance
  • Object.defineProperty
  • Object.freeze & Object.seal

Let’s dive into each of them with practical examples.


🧩 1. Object Destructuring

Destructuring lets you extract values from an object in a clean way.

const user = { name: "Alice", age: 25, country: "USA" };

const { name, age } = user;
console.log(name); // Alice
console.log(age);  // 25
Enter fullscreen mode Exit fullscreen mode

You can also rename variables:

const { country: location } = user;
console.log(location); // USA
Enter fullscreen mode Exit fullscreen mode

🔁 2. Computed Property Names

Dynamic keys can be created using square brackets:

const key = "score";
const obj = {
  [key]: 42
};

console.log(obj.score); // 42
Enter fullscreen mode Exit fullscreen mode

Useful when building objects from variables.


✍️ 3. Property Shorthand

When the variable name and key are the same, you can write:

const name = "John";
const age = 30;

const person = { name, age };
console.log(person); // { name: 'John', age: 30 }
Enter fullscreen mode Exit fullscreen mode

🛠️ 4. Object Methods

You can define functions inside objects:

const calculator = {
  add(a, b) {
    return a + b;
  },
};

console.log(calculator.add(2, 3)); // 5
Enter fullscreen mode Exit fullscreen mode

Note the method shorthand: no need for function keyword.


🔄 5. The this Keyword

Inside object methods, this refers to the object itself:

const car = {
  brand: "Toyota",
  getBrand() {
    return this.brand;
  },
};

console.log(car.getBrand()); // Toyota
Enter fullscreen mode Exit fullscreen mode

⚠️ Be careful: arrow functions don’t have their own this.


🧬 6. Prototypes & Inheritance

JavaScript objects can inherit properties using prototypes:

const animal = {
  speak() {
    console.log("Animal speaks");
  }
};

const dog = Object.create(animal);
dog.bark = function () {
  console.log("Woof!");
};

dog.speak(); // Animal speaks
dog.bark();  // Woof!
Enter fullscreen mode Exit fullscreen mode

🏗️ 7. Object.defineProperty()

Allows fine control over object properties:

const obj = {};
Object.defineProperty(obj, "secret", {
  value: "Hidden",
  writable: false,
  enumerable: false
});

console.log(obj.secret); // Hidden
obj.secret = "Exposed";
console.log(obj.secret); // Still Hidden
Enter fullscreen mode Exit fullscreen mode

Useful for creating read-only or hidden properties.


🧊 8. Object.freeze() and Object.seal()

  • Object.freeze(obj) → Makes the object completely immutable.
  • Object.seal(obj) → Allows changes to existing properties but disallows adding or deleting.
const config = {
  apiKey: "123"
};

Object.freeze(config);
config.apiKey = "456"; // Won’t change
console.log(config.apiKey); // 123
Enter fullscreen mode Exit fullscreen mode

🚀 Conclusion

Advanced object features in JavaScript can help you write more concise, flexible, and scalable code. Whether you’re working on a small script or a large application, mastering these features can give you a major edge.

Keep experimenting with objects — they’re the backbone of JavaScript programming!


Comments 6 total

  • davinceleecode
    davinceleecodeMay 10, 2025

    nice article bro 🔥

    • Shifa
      ShifaMay 11, 2025

      Thanks a ton, bro!
      Glad you liked it—means a lot

  • Nevo David
    Nevo DavidMay 10, 2025

    wow, gotta admit using stuff like destructuring and property shorthand sorta made life so much easier for me - you think theres ever a point where knowing more features actually slows you down instead of helping?

    • Shifa
      ShifaMay 11, 2025

      Thanks so much for your comment! You bring up a great point. I totally get how advanced features like destructuring or property shorthand can feel like a double-edged sword. Personally sometimes hurt readability, especially for someone newer to JavaScript.

  • Ryan Pham
    Ryan PhamMay 11, 2025

    Very experienced bro!

    • Shifa
      ShifaMay 12, 2025

      Thanks a lot, Still learning every day — really appreciate your kind words!

Add comment