JavaScript Getters and Setters - Free Online Courses For Professional Developments

JavaScripts for Beginners

JavaScript Getters and Setters – Explained Simply (No Code)

Getters and setters are like smart assistants for your object’s properties. Instead of letting anyone directly touch a value, they control access — ensuring data stays safe, valid, and consistent.

Think of them as security guards with rules at the door of your data.

What Are Getters and Setters?

Getter → A special function that runs when you read a property.

“You want the value? Let me get it for you — maybe I’ll calculate it first.”
Setter → A special function that runs when you assign a value.

“You’re trying to change this? Let me check and clean it first.”

They look like properties but act like functions behind the scenes.

Real-Life Analogy: A Bank Account

Property	Direct Access (Bad)	With Getter/Setter (Good)
balance	Anyone can set it to -1000	Setter blocks negative values
fullName	Stored as two fields	Getter combines first + last name on the fly

text

person.fullName → Getter runs → Returns "John Doe"
person.fullName = "Jane Smith" → Setter runs → Splits into first/last

Why Use Getters and Setters?

Benefit	What It Prevents
Data Validation	Invalid emails, negative ages, empty names
Computed Values	fullName, age from birthdate, isAdult
Encapsulation	Hide internal details — show only what matters
Backward Compatibility	Change how data is stored — keep old property name
Logging / Debugging	Track when values are read or changed

Practical Use Cases

Scenario	How Getter/Setter Helps
Form Input	Auto-trim spaces, convert to lowercase
User Age	Calculate from birthdate — no need to store it
Temperature	Convert Celsius ↔ Fahrenheit automatically
Shopping Cart	totalPrice updates when items change
Password	Hash it when set — never store plain text

Key Features

Feature	What It Means
Transparent	You use them like normal properties
Reactive	Values can update automatically
Protective	Block bad data before it enters
Flexible	Change logic later without breaking code

Getters vs Setters: Quick Comparison

	Getter	Setter
Triggers When	You read the property	You assign to the property
Purpose	Return a value (real or computed)	Validate or transform incoming value
Can Return	Any value	Nothing (just side effects)
Example Use	person.age, cart.total	user.email = “BAD” → corrected

Common Patterns (No Code)

Pattern	Description
Virtual Property	Doesn’t exist in storage — built on the fly
Input Sanitization	Clean user input automatically
Read-Only Value	Getter exists, no setter → can’t change
Write-Only (Rare)	Setter only → like a “submit” button
Reactive UI	UI updates when getter detects change

Best Practices (Simple Rules)

Do	Don’t
Use setters to validate	Let invalid data slip through
Use getters for computed values	Store values that can be calculated
Keep them fast and simple	Do heavy work (like API calls)
Use descriptive names	Confuse with regular properties
Pair them logically	Have a setter without a getter (usually)

Pro Tip: Think Like a Gatekeeper

Every time you add a property, ask:

“Should this be open access… or guarded?”

If it needs:

Rules
Calculations
Protection
Privacy

→ Use a getter/setter.

Why They Matter in 2025

Modern frameworks (React, Vue, Angular) love getters/setters because:

They enable reactivity
Support two-way data binding
Make state management predictable
Work perfectly with TypeScript and classes

Summary: Getters & Setters in One Sentence

Getters compute values when read. Setters control values when written — keeping your data smart, safe, and reliable.

Master This = Professional JavaScript

Once you use getters and setters, your objects become:

Smarter
Safer
More maintainable
Future-proof

Summary of JavaScript Getters and Setters

Encapsulation: Getters and setters are used to encapsulate data within an object, providing more control over how that data is accessed and modified.

Getters:

Used to retrieve the value of a property.
Defined using the get keyword before the property name.

Example:

JavaScript

class Person {
  constructor(firstName) {
    this._firstName = firstName; // Private property
  }

  get firstName() {
    return this._firstName;
  }
}

Setters:

Used to set the value of a property.
Defined using the set keyword before the property name.

Example:

JavaScript

class Person {
  constructor(firstName) {
    this._firstName = firstName; // Private property
  }

  get firstName() {
    return this._firstName;
  }

  set firstName(value) {
    if (typeof value !== 'string') {
      throw new Error("First name must be a string");
    }
    this._firstName = value;
  }
}

Benefits:
- Data Validation: Enforce data integrity by performing checks within the setter.
- Data Transformation: Perform transformations on the data before setting the property value.
- Read-Only Properties: Create read-only properties by defining a getter but no setter.
- Improved Maintainability: Encapsulating data makes your code more maintainable and easier to modify.

Example Usage:

JavaScript

const person = new Person("John");
console.log(person.firstName); // Accessing the value using the getter

person.firstName = "Jane"; // Setting the value using the setter

Getters and setters are valuable tools for creating well-structured and maintainable JavaScript objects, promoting data integrity and improving code quality.