How to Create Read-Only Properties in JavaScript Objects?

If you enjoy this story, feel free to like or share it with others who might appreciate a fresh perspective on JavaScript!

---

I am the proud owner of a bookshop, where each book is a unique and precious artifact. In this shop, certain books are so rare and valuable that I decide they must never leave their special glass cases. These books are like the read-only properties in an object. Just as these books can be viewed but not taken off the shelf, read-only properties in JavaScript can be accessed but not changed.

To ensure these books remain untouched, I call upon a trusted guardian spell, akin to JavaScript’s Object.defineProperty(). This incantation allows me to set rules for how each book can be interacted with. By whispering the right words, I declare that the cover of each book can be admired and its stories read, but no one can alter the pages or scribble in the margins. Similarly, when defining a property in JavaScript, I can set it as non-writable, ensuring its value remains constant.

I remember the time when a curious visitor, much like a mischievous script, tried to swap one book for another. Thanks to the spell, the book stayed firmly in its case, unchanged and unperturbed. In JavaScript, this would be like attempting to reassign a read-only property and watching the attempt fail silently or throw an error, depending on the strictness of my shop’s rules.

In my bookshop, each book tells a story, unchanged and eternal, just as a read-only property holds its value steadfastly. Through this analogy, I ensure that the treasures of my shop, much like the properties of an object, remain pure and untouched, preserving their magic for all who visit. If this tale helped demystify the concept, consider sharing it with those who might enjoy a story woven with code!

---

Continuing with my bookshop analogy, let’s see how I can actually implement this guardian spell, or rather, how I can ensure certain properties in a JavaScript object remain read-only. In my shop, just as I use a spell to protect my books, in JavaScript, I use Object.defineProperty() to protect my object’s properties.

Here’s how I cast this spell in code:

const Bookshop = {};

Object.defineProperty(Bookshop, 'rareBook', {
  value: 'The Enchanted Tome',
  writable: false,  // This is the key to making it read-only
  configurable: false,
  enumerable: true
});

console.log(Bookshop.rareBook); // Output: The Enchanted Tome

// Attempt to change the rareBook
Bookshop.rareBook = 'The Common Book';
console.log(Bookshop.rareBook); // Output: The Enchanted Tome (unchanged)

In this code, Object.defineProperty() is like the guardian spell that I use to ensure ‘The Enchanted Tome’ remains safely in its place. By setting writable: false, I ensure that no mischievous visitor (or line of code) can alter the precious title of this book.

Now, imagine I want visitors to see the book but not rearrange its position in the shop. That’s where configurable: false comes into play. This prevents any further changes to the property’s definition, much like ensuring the book stays in its rightful place without being moved or removed.

Finally, enumerable: true allows the book to be listed among the treasures of the shop during a guided tour, much like how properties can be included in loops over an object.

Key Takeaways:

1. Read-Only Properties: In JavaScript, use Object.defineProperty() with writable: false to create read-only properties.
2. Immutable Definitions: Setting configurable: false ensures that the property’s definition cannot be altered or deleted, much like securing a book in its case.
3. Visibility: Enumerable: true allows the property to be visible during object enumeration, akin to displaying the book during a tour.