Getter und Setter sind spezielle Methoden in JavaScript-Objekten. Gehen wir vom folgenden Objekt zunächst aus:

const person = {
  firstName: 'Max',
  lastName: 'Mustermann'
};

Nun kann man mit Template-Strings den Vor- und Nachnamen in der Konsole ausgeben:

console.log(`${person.firstName} ${person.lastName}`);

Damit man bei mehreren Personen, wo man Vor- und Nachname ausgeben möchte, nicht den gleichen Ausgabe-Code mehrmals schreiben muss, ist es besser diese Ausgabe als Methode innerhalb des Objekt zu definieren:

const person = {
  firstName: 'Max',
  lastName: 'Mustermann',
  fullName: function () {
    return `${person.firstName} ${person.lastName}`;
  }
};

Es geht aber auch mit einer kürzeren Syntax:

const person = {
  firstName: 'Max',
  lastName: 'Mustermann',
  fullName () {
    return `${person.firstName} ${person.lastName}`;
  }
};

Wenn wir also jetzt den Vor- und Nachnamen ausgeben möchten, brauchen wir an der notwendigen Stelle nur die Methode aufrufen:

console.log(person.fullName());

Sollte sich mal was an der Methode ändern, dann müssen wir die Änderung nur im Objekt selbst durchführen und alle aufgerufenen Methoden werden mit geändert. Es gibt aber auch einige Nachteile mit unserem Code.

Nachteil 1: Den vollen Namen könnte man jetzt nicht außerhalb des Objekts ändern, z.B.:

person.fullName = 'Martin Muster';

So ist es nicht möglich, dass hier der Name “Martin Muster” in firstName und lastName landet und dann entsprechend über unsere Methode ausgegeben wird. Nachteil 2: Zudem können wir die Methode nicht als Property ausführen, sondern müssen immer die Klammern dahinter setzen:

console.log(person.fullName());

Diese 2 Probleme können mit Getter und Setter umgangen werden:

• Mit Getters kann auf Eigenschaften (Properties) in Objekten zugegriffen werden.
• Mit Setters können Eigenschaften in Objekten verändert werden.

Mit einem Getter könnte man z.B. wie folgt auf die Methode zugreifen:

console.log(person.fullName);

Außerdem könnten wir den vollen Namen wie folgt setzen:

person.fullName = 'Martin Muster';

Wie geht das? Nehmen wir unser Objekt von oben mit der fullName-Methode, dann reicht es aus, wenn wir das Keyword “get” vor der Methode setzen:

const person = {
  firstName: 'Max',
  lastName: 'Mustermann',
  get fullName () {
  return `${person.firstName} ${person.lastName}`;
  }
};

Damit wird fullName zum Getter. Dadurch können wir auf diese Methode wie auf eine Eigenschaft zugreifen (also ohne Klammern). Um von außen einen Vor- und Nachnamen zu vergeben, brauchen wir nun noch einen Setter:

const person = {
  firstName: 'Max',
  lastName: 'Mustermann',
  get fullName () {
    return `${person.firstName} ${person.lastName}`;
  },
  set fullName (value) {
    // Hier kommt Code rein
  }
};

Der Setter wird mit dem Keyword “set” gesetzt und braucht einen Parameter. Der Parameter ist zudem gleich der Wert, der rechts vom folgenden Zuweisungsoperator steht:

person.fullName = 'Martin Muster';

Nun muss der String getrennt werden. Das Leerzeichen wäre der Trenner. Die getrennten Strings Vor- und Nachname müssen dann als firstName- und lastName-Properties gesetzt werden:

const person = {
  firstName: 'Max',
  lastName: 'Mustermann',
  get fullName () {
    return `${person.firstName} ${person.lastName}`;
  },
  set fullName (value) {
    const splitted = value.split(' ');
    this.firstName = splitted[0];
    this.lastName = splitted[1];
  }
};

Hier ist nur das Keyword “this” notwendig, um auf die Eigenschaften firstName und lastName des Objekts person zugreifen zu können. Und hier das Ergebnis:

Nachdem wir das Objekt definiert und aufgerufen haben, wird zunächst der im Objekt enthaltene Vor- und Nachname ausgegeben. Ändern wir jedoch den Namen außerhalb des Objekts, dann wird durch den Setter die Änderung im Objekt selbst auch herbeigeführt.