Türchen 04

Spread und Rest Operatoren – Mehr Flexibilität mit ’…’

Die drei Punkte ... haben in JavaScript seit ES6 eine besondere Bedeutung erlangt. Mit dem Spread und Rest Operator lassen sich Arrays und Objekte auf elegante Weise manipulieren, was zu flexiblerem und lesbarerem Code führt. In diesem Artikel erfährst du, wie du diese Operatoren effektiv einsetzen kannst.

Spread Operator (`...`)

Der Spread Operator ermöglicht es, Iterables wie Arrays oder Strings zu expandieren, d.h. ihre Elemente einzeln zu entpacken und damit Code einfacher und besser lesbar zu gestalten.

Hier ein paar praktische Anwendungsbeispiele für die drei magischen Pünktchen.

Anwendungsfälle:

Arrays zusammenführen:

Vor ES6 musste man Arrays mittels concat zusammenführen:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const combined = array1.concat(array2);
console.log(combined); // [1, 2, 3, 4, 5, 6]

Mit dem Spread Operator wird das Zusammenführen einfacher und übersichtlicher:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const combined = [...array1, ...array2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

Kopieren von Arrays:

Um eine flache Kopie eines Arrays zu erstellen, kann der Spread Operator genutzt werden:

const original = [1, 2, 3];
const copy = [...original];

copy.push(4);

console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

Funktionen mit mehreren Argumenten aufrufen:

Wenn eine Funktion mehrere Parameter erwartet, kann ein Array mit dem Spread Operator übergeben werden:
```
function add(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];

console.log(add(...numbers)); // 6
```

Strings in Arrays umwandeln:

const word = 'Hallo';
const letters = [...word];

console.log(letters); // ['H', 'a', 'l', 'l', 'o']

Objekte zusammenführen (seit ES2018):

Auch Objekte können mit dem Spread Operator zusammengeführt werden:
```
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedArrays = { ...obj1, ...obj2 };

console.log(mergedArrays); // { a: 1, b: 3, c: 4 }
```
Beachte, dass bei gleichen Schlüsseln der Wert des letzten Objekts verwendet wird (b: 3 überschreibt b: 2).

Rest Operator (`...`)

Der Rest Operator sammelt mehrere Elemente und packt sie in ein Array oder Objekt. Er wird oft in Funktionsparametern oder beim Destructuring verwendet.

Anwendungsfälle:

Variable Anzahl von Funktionsargumenten:

Früher wurde arguments genutzt, um auf alle Funktionsargumente zuzugreifen:

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 6

Mit dem Rest Operator wird der Code klarer:

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 6

Destructuring von Arrays:

const [first, second, ...rest] = [10, 20, 30, 40, 50];

console.log(first);  // 10
console.log(second); // 20
console.log(rest);   // [30, 40, 50]

Destructuring von Objekten:

const person = {
  name: 'Laura',
  age: 25,
  city: 'Hamburg',
  country: 'Deutschland'
};

const { name, ...details } = person;

console.log(name);    // 'Laura'
console.log(details); // { age: 25, city: 'Hamburg', country: 'Deutschland' }

Wichtige Unterschiede und Hinweise

Positionierung: Beim Spread Operator werden die Elemente expandiert, daher muss er dort verwendet werden, wo mehrere Werte erwartet werden (z.B. in Funktionsaufrufen oder Array-Literalen). Der Rest Operator sammelt Werte und muss daher in Funktionsparametern oder Destructuring-Zuweisungen am Ende stehen.
```
// Spread beim Funktionsaufruf
func(...args);

// Rest in der Funktionsdefinition
function func(...args) { }
```
Einmalige Verwendung des Rest Operators: In einer Funktionsparameterliste oder Destructuring-Zuweisung kann der Rest Operator nur einmal verwendet werden und muss die letzte Position einnehmen.
```
function incorrect(...args, lastArg) { } // Fehler
function correct(firstArg, ...args) { } // OK
```

Praktische Beispiele

Klone und Modifikationen von Arrays und Objekten erstellen:

const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4, 5];

console.log(newArray); // [1, 2, 3, 4, 5]

const originalObject = { a: 1, b: 2 };
const newObject = { ...originalObject, b: 3, c: 4 };

console.log(newObject); // { a: 1, b: 3, c: 4 }

Optionale Parameter handhaben:

function createUser(name, age, ...options) {
  return {
    name,
    age,
    options
  };
}

console.log(createUser('Max', 30, 'Admin', true));
// { name: 'Max', age: 30, options: ['Admin', true] }

Arbeiten mit DOM-Elementen (Browser):

const divs = document.querySelectorAll('div');
const nodesArray = [...divs]; // NodeList in Array umwandeln

nodesArray.forEach(div => {
  // Manipulation der Div-Elemente
});

Fazit

Der Spread und Rest Operator bieten eine mächtige und flexible Möglichkeit, mit Arrays, Objekten und Funktionsparametern zu arbeiten. Sie machen den Code nicht nur kürzer, sondern auch lesbarer und leichter zu warten.

Experimentiere mit den drei Punkten ... in deinem nächsten Projekt und entdecke, wie sie deine JavaScript-Entwicklung vereinfachen können!