> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Spread und Rest Operator

## Spread Operator

Die Spread (`...`)-Syntax ermöglicht es, ein Iterable, wie z. B. ein Array oder einen String, an Stellen zu erweitern, an denen null oder mehr Argumente (bei Funktionsaufrufen) oder Elemente (bei Array-Literalen) erwartet werden. In einem Objektliteral zählt die Spread-Syntax die Eigenschaften eines Objekts auf und fügt die Schlüssel-Wert-Paare dem zu erstellenden Objekt hinzu.

### Beispiele

#### Funktionsaufrufe

Wir können über die Spread-Syntax einer Funktion die Argumente innerhalb eines Arrays mitgeben.

```javascript theme={null}
const sum = (x, y, z) => {
  return x + y + z;
}

const numbers = [1, 2, 3];

sum(...numbers));
```

#### Array-Literals

Wir können mit der Spread-Syntax Arrays mit Arrays kombinieren und so Elemente hinzufügen.

```javascript theme={null}
const parts = ["shoulders", "knees"];
const lyrics = ["head", ...parts, "and", "toes"];
```

***

Wir können mit dem Spread Operator ausserdem einen Array kopieren.

```javascript theme={null}
const arr2 = [...arr];
```

***

Mit der Spread-Syntax können wir Arrays verketten.

```javascript theme={null}
let arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2];
```

#### Objekt-Literals

Mit dem Spread Operator können wir Objekte ganz einfach zusammenführen.

```javascript theme={null}
const obj1 = { foo: "bar", x: 42 };
const obj2 = { bar: "baz", y: 13 };

const mergedObj = { ...obj1, ...obj2 };
```

***

Wie auch bei Arrays, können wir Objekte mit der Spread-Syntax klonen.

```java theme={null}
const clonedObj = { ...obj1 };
```

***

Mit dem Spread Operator können wir Properties überschreiben.

```javascript theme={null}
const obj1 = { foo: "bar", x: 42 };
const obj2 = { foo: "baz", y: 13 };

const mergedObj = { x: 41, ...obj1, ...obj2, y: 9 };
```

## Rest Operator

Du kannst ein [Destructuring ](/web/javascript/objekte-und-datenstrukturen/destructuring)Pattern mit dem Rest Operator `...rest` beenden. Dieses Pattern speichert alle verbleibenden Eigenschaften des Objekts oder Arrays in einem neuen Objekt oder Array.

```javascript theme={null}
const { a, ...others } = { a: 1, b: 2, c: 3 };
console.log(others); // { b: 2, c: 3 }

const [first, ...others2] = [1, 2, 3];
console.log(others2); // [2, 3]
```