JavaScript Property Getters and Setters

JavaScript Property Getters & Setters

JavaScript getters and setters allow you to define custom behavior when accessing or modifying object properties. They make it possible to control how a property is retrieved or updated.

🔹 Getters (get)

A getter is a method that acts as a computed property. It is called when a property is accessed.

✅ Example:

let user = {
    firstName: "Alice",
    lastName: "Smith",

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
};

console.log(user.fullName); // ✅ Output: Alice Smith

✔ No function call needed (user.fullName instead of user.fullName()).

🔹 Setters (set)

A setter allows custom logic when setting a property value.

✅ Example:

let user = {
    firstName: "Alice",
    lastName: "Smith",

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },

    set fullName(value) {
        [this.firstName, this.lastName] = value.split(" ");
    }
};

// ✅ Using the setter
user.fullName = "Bob Brown";

console.log(user.firstName); // ✅ Output: Bob
console.log(user.lastName);  // ✅ Output: Brown

✔ When we assign a value to fullName, the setter splits the string and updates firstName and lastName.

🔹 Using Getters & Setters with Object.defineProperty()

We can also define getters and setters using Object.defineProperty().

let person = { firstName: "Alice", lastName: "Smith" };

Object.defineProperty(person, "fullName", {
    get() {
        return `${this.firstName} ${this.lastName}`;
    },
    set(value) {
        [this.firstName, this.lastName] = value.split(" ");
    }
});

console.log(person.fullName); // ✅ Output: Alice Smith
person.fullName = "Charlie Brown";
console.log(person.firstName); // ✅ Output: Charlie
console.log(person.lastName);  // ✅ Output: Brown

🔹 Getters & Setters with Classes

Getters and setters work seamlessly in classes.

class User {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }

    set fullName(value) {
        [this.firstName, this.lastName] = value.split(" ");
    }
}

let user = new User("Alice", "Smith");
console.log(user.fullName); // ✅ Output: Alice Smith

user.fullName = "Bob Brown";
console.log(user.firstName); // ✅ Output: Bob
console.log(user.lastName);  // ✅ Output: Brown

🔹 Protecting Properties with Getters

Getters can be used to create read-only properties.

let product = {
    name: "Laptop",
    price: 1000,

    get discountedPrice() {
        return this.price * 0.9; // 10% discount
    }
};

console.log(product.discountedPrice); // ✅ Output: 900
product.discountedPrice = 500; // ❌ No effect (read-only)
console.log(product.discountedPrice); // ✅ Output: 900

✔ No setter → The property cannot be modified.

🎯 Summary

✔ get → Allows computed property access.
✔ set → Allows custom logic when setting a property.
✔ Works with objects, Object.defineProperty(), and classes.
✔ Use getters for read-only properties.

🚀 Mastering getters and setters improves data control in JavaScript! Let me know if you need more examples. 😊