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
You can also rename variables:
const { country: location } = user;
console.log(location); // USA
🔁 2. Computed Property Names
Dynamic keys can be created using square brackets:
const key = "score";
const obj = {
[key]: 42
};
console.log(obj.score); // 42
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 }
🛠️ 4. Object Methods
You can define functions inside objects:
const calculator = {
add(a, b) {
return a + b;
},
};
console.log(calculator.add(2, 3)); // 5
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
⚠️ 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!
🏗️ 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
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
🚀 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!
nice article bro 🔥