Configurable Objects in JS?

#webdev #javascript #beginners

Have you ever felt like your objects in JavaScript just aren't configurable enough? I mean, sure, you can give them properties and methods and all that jazz, but sometimes you just want a little more control over how those properties behave. That's where configurable object properties come in.

Let's say you have an object called "dog" that represents, well, a dog. You might have properties like "name", "breed", and "age". But what if you want to make sure that no one can change the value of the "breed" property once it's been set? That's where configurable object properties come in handy.

Here's an example of how you can use the Object.defineProperty() method to create a configurable object property:

const dog = {
  name: "Buddy",
  breed: "Golden Retriever",
  age: 5,
};

Object.defineProperty(dog, "breed", {
  configurable: false,
});

Now, if anyone tries to change the value of the breed property, they'll get an error saying that the property is not configurable.

But wait, there's more! You can also use the writable property to make a property not only non-configurable, but also non-writable. This means that the value of the property cannot be changed at all, even if you try to do so with assignment like dog.breed = "Labrador".

Here's how you would do that:

const dog = {
  name: "Buddy",
  breed: "Golden Retriever",
  age: 5,
};

Object.defineProperty(dog, "breed", {
  configurable: false,
  writable: false,
});

Now, if anyone tries to change the value of the breed property, they'll get an error saying that the property is not writable.

But wait, there's even more! You can also use the get and set properties to define custom getters and setters for a property. This can be useful if you want to do some extra processing every time the property is accessed or modified.

Here's an example of how you can use getters and setters:

const dog = {
  name: "Buddy",
  breed: "Golden Retriever",
  age: 5,
  get description() {
    return `${this.name} is a ${this.age} year old ${this.breed}.`;
  },
  set birthday(age) {
    this.age = age;
  },
};

console.log(dog.description); // "Buddy is a 5 year old Golden Retriever."
dog.birthday = 6;
console.log(dog.description); // "Buddy is a 6 year old Golden Retriever."

So there you have it! Configurable object properties are a great way to give your objects a little extra oomph and make sure that they behave exactly the way you want them to. Just don't get too carried away with all the configurability, or you might end up with an object that's more rigid than a Popsicle stick.