Arrays

Bei den primitiven Datentypen kann nur ein Wert zugewiesen werden. In einem Array hat man die Möglichkeit mehrere Werte zu definieren. Will man beispielsweise die Waren einer Einkaufsliste hinterlegen ist ein Array die ideale Wahl. In einem Kartenspiel könnte man die einzelnen Karten in einem Array hinterlegen. Die einzelnen Werte können dann über einen Index aufgerufen werden.

Ein Array ist quasi eine Liste von Werten, die über einen Indexwert identifiziert oder definiert werden. Es gibt einige Arrayfunktionen. Damit kann man Werte löschen, hinzufügen oder sortieren.

Der Index beginnt bei 0;

Man kann ein Array auf verschiedenen Arten initialisieren. Die gängiste Art ist die Array-Literal-Schreibweise.

var karte = [];

Die einzelnen Werte werden mit Komma getrennt aufgeführt. Das wäre auch in einer Zeile möglich.

var karte = [
        "Bube",
        "Dame",
        "König",
        "As"
        ];

Eine weitere Möglichkeit ein Array zu definieren ist mit dem Schlüsselwort new und dem Aufruf der Konstruktorfunktion. Achtung kein Leerzeichen zwischen Array und Klammer.

var karte = new Array();

Auch hier werden Die einzelnen Werte mit Komma getrennt aufgeführt.

var karte = new Array(
        "Bube",
        "Dame",
        "König",
        "As"
        );
      

Indexbasierter Aufbau

Arrays haben einen Indexbasierten Aufbau, anders ausgedrückt: jeder Wert wird an einer bestimmten Position gespeichert, die man über einen Index aufrufen kann. Der erste Index ist 0.

karte[0] // "Bube"
karte[1] //"Dame"

Man kann über den Index auch Werte zuweisen.

karte[4] = "Herz";
karte[5] = "Karo";

Der höchste Index bestimmt die Länge des Arrays oder anders ausgedrückt die Anzahl der Elemente entspricht dem höchsten Index +1.
Über die Array Eigenschaft length kann man die Anzahl eines Arrays abfragen.

karte.length // Ausgabe 4

Hat man im Nachhinein einen Index zugewiesen der höher ist als der letzte Index plus 1, werden dazwischen Elemente erzeugt, jeweils mit dem Wert undefined.

let mitglieder = [
"Jimi Hendrix",
"Theo Lingen",
"Willi Brandt"
]

mitglieder[6] = "Uwe Seeler";

Ergebnis

mitglieder[0] ="Jimi Hendrix";
mitglieder[1] ="Theo Lingen";
mitglieder[2] ="Willi Brandt";
mitglieder[3] =undefined;
mitglieder[4] =undefined;
mitglieder[5] =undefined;
mitglieder[6] ="Uwe Seeler";
      

Die Werte in einem Array können von unterschiedlichem Datentyp sein. So können Strings, Number und Boolsche Werte in einem Array enthalten sein.

let mitglied1 = ["Walter", "Weller", 1948, true];
      

Mehrdimensionales Array

Der Wert eines Arrays kann ein weiteres Array sein. Auf die Artkann man ein mehrdimensionales Array erstellen. Mit einem mehrdimensionalen Array kann man datenbankähnliche Strukturen erzeugen.

let jaeger = [
    ['Walter','Hirsch'],
    ['Friedel','Dachs']
];

jaeger[0][0] == 'Walter';
jaeger[0][1] == 'Hirsch';
jaeger[1][0] == 'Friedel';
jaeger[1][1] == 'Dachs';
      

Eine andere Möglichkeit ein mehrdimensionales Array zu erzeugen:

let team = new Array();
team[0] = ["Walter", "Berg", "Waldheim" ];
team[1] = ["Gisela", "Gans", "Bauerndorf"];
team[2] = ["Frieda", "Frieden", "Friedrichsruh"];

team[0][2]; //Waldheim
team[1][0]; //Gisela
team[2][1]; //Frieden
      

In den obigen Beispielen wurden zweidimensionale Arrays erzeugt. Es ist natürlich auch möglich das Prinzip weiter zu verschachteln.

Mit der Methode flat() kann man die Elemente von verschatelten Arrays in ein Array zusammenlegen.

Eigenschaften & Methoden des Arrays

length

Wenn man ein Array instanziiert kann man auch die Anzahl der Elemente angeben.

var tage = new Array();
var tage = new Array(7); 

Mit der Eigenschaft length kann man die Anzahl der Arrayelemente erfahren. Die Anzahl ist um 1 höher als der Indexwert des letzten Elementes. Es kann auch Arrayelemente mit undefinierten Inhalt geben, auch die werden gezählt. var tage = new Array(7); hat 7 Elemente mit undefinierten Inhalt.

tage.length; 

push()

Mit push() werden Elemente am Ende des Arrays angefügt. Der Rückgabewert ist die geänderte Länge des Arrays.

tage.push("Wolkentag", "Regentag");

unshift()

Mit unshift() werden Elemente am Anfang des Arrays angefügt. Der Rückgabewert ist die geänderte Länge des Arrays.

tage.unshift("Wolkentag", "Regentag"); 

shift()

Mit shift() wird das erste Element gelöscht. Der Rückgabewert ist der Wert des gelöschen Elements.

tage.shift(); 

pop()

Mit pop() wird das letzte Element gelöscht. Der Rückgabewert ist der Wert des gelöschen Elements.

tage.pop(); 

splice()

Mit splice(startnummer, anzahl) kann man gezielt Elemente innerhalb des Arrays löschen. Die beiden Parameter sind Startindex und Anzahl der zu löschenden Elemente. Im folgenden Beispiel werden die Wochentage Dienstag und Mittwoch gelöscht. Die anderen Elemente rücken dann nach. Das bedeutet, Donnerstag liegt auf index 1, Freitag auf 2 etc. Rückgabewerte sind die gelöschten Elemente.

tage.splice(1,2); 

Man kann mit splice() auch Elemente löschen und durch andere Elemente ersetzen. Indem man die Werte der neuen Elemente als Parameter hinter den beiden ersten Parametern aufführt. So werden im folgenden Beispiel die Wochentage Mittwoch, Donnerstag, Freitag durch die englischen Wochentage ersetzt.

tage.splice(2,3, "Wednesday", "Thursday", "Friday"); 

Man kann mit Splice auch Elemente dazwischen einfügen ohne Elemente zu löschen. Hier werden ab Index 3 (nach Mittwoch) die drei weiteren Elemente eingefügt. Kein Element wird gelöscht die nachfolgenden werden nach hinten verschoben.

tage.splice(3,0, "Mittwoch Morgens", "Mittwoch Mittag", "Mittwoch Abend"); 

slice()

Mit slice kann man aus einem Array ein neues Array erstellen, welches eine Teilmenge des ursprünglichen Arrays enhält.

Der erste Parameter bestimmt den Startindex. Der zweite Parameter bestimmt das Ende. Der Index liegt einen höher, als der letzte Index, der angezeigt wird. Lässt man den zweiten Parameter weg, wird bis zum Ende angezeigt.

let tiere=["Löwe","Affe","Giraffe","Elefant"] ;
let zooTiere = tiere.slice(1,3);
console.log(zooTiere);//Affe, Giraffe

Man kann auch einen negativen Startindex eingeben, dann wird von hinten gezählt.

let tiere=["Löwe","Affe","Giraffe","Elefant"] ;
let zooTiere = tiere.slice(-3,3);
console.log(zooTiere);//Affe, Giraffe

reverse()

Mit reverse() wird die Reihenfolge der Elemente umgekehrt.

tage.reverse(); 

flat()

Die Methode flat() erstellt ein neues Array, in dem alle Elemtente aus verschachtelten Unterarrays rekursiv bis zur angegebenen Tiefe verkettet werden.

    let kontTiere = [
        ["Giraffe", "Nashorn", "Löwe"],
        ["Känguru", "Koala", "Wombat"]
    ];
    let tiere = kontTiere.flat();
    console.log(tiere); //'Giraffe', 'Nashorn', 'Löwe', 'Känguru', 'Koala', 'Wombat'
    

array.flat(depth)

Über den depth Parameter kann man die Tiefe angeben, bis zu welcher verschachtelten Ebene abgeflacht werden soll. Standarmäßig 1

  const arr = [1, 2, [3, 4, [5, 6]]];
  console.log(arr.flat()); //1,2,3,4,[5,6]
  console.log(arr.flat(1)); //1,2,3,4,[5,6]
  console.log(arr.flat(2)); //1,2,3,4,5,6
    

concat()

Mit concat() werden die Elemente von 2 Arrays zu einem neuen Array zusammengefügt:

let moebel = new Array("Stuhl", "Tisch" , "Schrank");
let geschirr = new Array ("Teller", "Tasse", "Schüssel");
let haushalt = moebel.concat(geschirr); 

split()

string.split() ist keine Array Funktion, aber man kann mit dieser Funktion die Werte eines Strings, die mit einem Trennzeichen voneinander getrennt sind zu einem Array zusammensetzen. Als Parameter wird das Trennzeichen erwartet. Wenn man das Argument nicht zuweist, ist das Komma das Trennzeichen.
Achtung Leerzeichen hinter dem Trennzeichen nur dann einfügen, wenn eins vorhanden ist. Ein Leerzeichen ist auch ein Zeichen.

let moebelString = "Stuhl,Tisch,Schrank";
  let moebel = moebelString.split(","); 

join()

Mit join() werden die Elemente eines Arrays zu einem String zusammengefügt. Als Argument gibt man das Trennzeichen an. Wenn kein Trennzeichen angegeben wird, wird das Komma als Trennzeichen genommen.

var moebel = new Array("Stuhl", "Tisch" , "Schrank");
var moebelString = moebel.join("..."); 

toString()

Auch mit array.toString() werden die Elemente eines Arrays zu einem String zusammengefügt. Als Trennzeichen wird das Komma eingesetzt.

var moebel = new Array("Stuhl", "Tisch" , "Schrank");
        var moebelString = moebel.toString();

indexOf() & endIndexOf()

Mittels indexOf(Element) kann man nach dem Index eines Elements suchen. Wie viele andere Array Methoden kann man diese auch in Strings nutzen. Es wird der Index des ersten gefunden Elements zurück gegeben. Es kann ja sein, dass das Element öfter vorkommt. Mit endIndexOf() wird das zuletzt vorkommende Element zurück gegeben. Findet man nichts wird undefined zurück gegeben.

let tiere =["Pferd", "Huhn", "Ente"];
        console.log(tiere.indexOf("Huhn")); //1

Unter dem Thema DOM werden verschiedene Methoden vorgestellt, mehrere HTML Elemente auszuwählen (getElementsByClassName(), querySelectorAll()) Je nach Methode wird eine arrayähnliche NodeList oder HTML Collection erzeugt. indexOf kann man bei beiden nicht anwenden. Deswegen muss die List oder Collection in ein echtes Array umgewandelt werden.

let themen = Array.from( document.querySelectorAll( "tr:nth-child(odd)"));

ein Beispiel

Das ein- und ausblenden von Tabellenreihen

In folgendem Beispiel wird die jeweils darunterliegende Tabellenreihe angezeigt, wenn eine der ungeraden Tabellenreihen angeklickt wird.

siehe Beispiel

Es gibt 2 Arrays. Ein Array thema für die Tabellenreihen mit ungerader Zahl und ein Array info für die Tabellenreihen mit grader Zahl.

Die Tabellenreihen mit gerader Zahl (Array thema) rufen über einen EventListener eine Funktion auf. Die Tabellenreihe darunter, welche im Array info liegt , hat den gleichen Index. Aber welches ist der Index, des Elements, welches die Eventfunktion aufruft? Das wird mit dieser Zeile ermittelt.

let thema = Array.from( document.querySelectorAll( "tr:nth-child(odd)" ) );
let info = document.querySelectorAll( "tr:nth-child(even)" ); 

Das Ein- und Ausblenden wird über eine toggle Funktion erreicht. Diese weist dem Element eine Klasse zu oder wenn sie schon zugewiesen wurde, wird sie wieder entfernt. Achtung man muss aufpassen, dass die Spezifität des Klassenselektors nicht zu klein ist.

let currentId = thema.indexOf( evt.currentTarget );
info[ currentId ].classList.toggle( 'selected' );
      

Dieses Beispiel über Traverserierung : siehe Beispiel
ein ähnliches Beispiel mit includes()

2 Arrays vergleichen

Siehe auch Vergleichsfunktion compare

Folgende Funktion erwartet 2 Arrays. Wenn beide Arrays identisch sind, gibt die Funktion true zurück.

function checkArray(ar1, ar2){
for (var i = 0; i < ar1.length; i++) {
if (ar1[i] != ar2[i]) {
return false;
}
}
return true;
}

Im folgenden Funktionsaufruf muss es ein aepfel und eine birnen Array geben.

var allesEineSosse = checkArray(aepfel, birnen);

siehe auch diese Erklärung in deutsch auf brain4.de

Mittels der sort() Methode kann man ein Array sortieren. Standardmäßig wird alphabetisch sortiert. Will man numerisch sortieren benötigt man eine Vergleichsfunktion.

Beispiel

<script>
let tiere = ["Elefant", "Affe", "Tiger", "Löwe", "Zebra", "Hai"];
tiere.sort();
let ausgabe = "";
for(let i= 0; i < tiere.length; i++){
     ausgabe += tiere[i] +" ";
}
document.getElementById("tierShow").innerHTML = ausgabe;
</script>     

Wenn man auf diese Art Zahlenwerte sortiert, erscheint 100 vor 20, weil alphabtisch die 1 vor der 2 steht.

Beispiel

Man kann der sort() Funktion  als Argument eine Referenz auf eine Vergleichsfunktion übergeben. Die Vergleichsfunktion sollte einen von 3 möglichen Werten zurückgeben.

• negativer Wert besagt, dass der erste Wert kleiner ist als der zweite
• 0 besagt beide Wert sind gleich
• positiver Wert besagt, dass der erste Wert größer ist als der zweite

Mit folgender Funktion wird das erreicht.

function compare(a,b){
return a-b;
}

Hier ein paar Beispiele

console.log(compare(30, 10)); //20
console.log(compare(5, 30)); //-25
console.log(compare(5, 5)); //0
      

Diese Vergleichsfunktion wird paarweise für die Werte des Arrays innerhalb der sort() Funktion aufgerufen. Der Rückgabewert von compare bestimmt, welcher der beiden Werte größer ist als der andere.

let zahlen = [20, 2, 11, 6, 4, 14, 10, 9, 15, 7, 21];
function compare(a,b){
return a-b;
}
zahlen.sort(compare);
console.log(zahlen);

Man bedenke dass die Vergleichsfunktion ohne Klammern übergeben wird. Es ist eine Referenz auf eine Funktion. Würde man Sie mit Klammern einfügen, würde die Funktion ausgeführt und der Rückgabewert übergeben. Ohne Klammern ist die Funktion selbst das Argument. Es ist das gleiche wie folgende Schreibweise.

zahlen.sort(function(a,b){return a - b;});

oder die moderenere Notation mit Arrow Funktion

zahlen.sort((a,b) =>  a - b);

Eine absteigende Reihenfolge erreicht man mit.

function compare(a,b){
        return b - a;
        }

Mehrdimensionales Array sortieren

Um ein mehrdimensionales Array zu sortieren, braucht man lediglich die Vergleichsfunktion etwas abzuändern. Dort greift man nicht direkt auf den Wert des Array Elements zu, sondern auf ein verschachteltes Element. In diesem Fall auf das darinliegende erste Element.

function sortFunction(a, b) {
return a[0] - b[0]
}

Beispiel / Script

let sins = [];

sins[0] = [2, 'Plastik'];
sins[1] = [5, 'Überbevölkerung'];
sins[2] = [1, 'Klimakrise'];
sins[3] = [3, 'Artensterben'];
sins[4] = [9, 'Tierquälerei'];
sins[5] = [4, 'Überfischung'];
sins[6] = [7, 'verseuchte Böden'];
sins[7] = [6, 'Gifte'];
sins[8] = [8, 'radioaktiver Müll'];

sins.sort(sortFunction);
function sortFunction(a, b) {
return a[0] - b[0]
}

Alphabetisch mit Sort Funktion

Hier wird ein mehrdimensionales Array nach dem jeweils ersten Element alphabetisch sortiert.

let myArray = [["Bär",1],["Affe", 3],["Chamäleon",4]];

function sortAlphabetical(a, b) {
return a[0] > b[0] ? 1 : -1;
}
myArray.sort(sortAlphabetical);
      

Mit Javascript Version 6 ist die Methode copyWithin() hinzugekommen. Damit kann man Elemente eines Arrays an eine andere Stelle des gleichen Arrays kopieren. Die vorhandenen Elemente werden durch die verschobenen Elemente ersetzt. Die Elemente werden kopiert nicht ausgeschnitten und es werden auch keine Elemente im Array hinzugefügt.

Die Methode hat 3 Parameter

copyWithin(

1. Der Index an den die Elemente eingefügt werden sollen ,
2. Der Index ab dem die Elemente kopiert werden sollen ,
3. Der Index an dem das Kopieren endet. Es bedeutet nicht die Anzahl der Elemente, die kopiert werden. Also muss der dritte Parameter immer höher sein als der zweite. Der Parameter ist optional. Standard ist die Länge des Arrays.

)

Beispiel

        let spiele = [
        "Schach",
        "Halma",
        "Mühle",
        "Dame",
        "Stratego",
        "Mensch ärger dich nicht"
        ]
        spiele.copyWithin(2,0,2);
      

Ergebnis

        spiele =
        ['Schach',
        'Halma',
        'Schach',
        'Halma',
        'Stratego',
        'Mensch ärger dich nicht'
        ]
      

Die Parameter:

1. 2 ab dem dritten Element "Stratego" wird etwas eingefügt
2. 0 ab dem ersten Element wird etwas kopiert "Schach"
3. 2 es wird bis zum dritten Element kopiert "Schach, Halma"

Also werden "Dame, Stratego" durch "Schach, Halma" ersetzt. Würde man den dritten Parameter weglassen, sähle das Array so aus: SchachHalmaSchachHalmaMühleDame

forEach()

siehe auch for-in Schleife

Die forEach()-Methode ruft für jedes Element eines Arrays eine Funktion auf. Die forEach()-Methode wird für leere Elemente nicht ausgeführt.
siehe Beispiel

        const tiere = ["Affe", "Löwe", "Esel", "Dummvogel"];
        tiere.forEach(myFunction);
      

Syntax

array.forEach(function(currentValue, index, arr), thisValue)

Beispiel

const sliders = document.querySelectorAll( 'input[type="range"]' );
        sliders.forEach( s => s.addEventListener( 'input', updateCMYK ) );

Das Prinzip

Stell dir filter() wie eine Türsteherin vor einem Club vor:

1. Jedes Element des Arrays klopft nacheinander an.

2. Du gibst der Türsteherin eine Regel (eine Funktion).

3. Wenn die Regel true ergibt, darf das Element ins neue Array.

4. Wenn sie false ergibt, wird es aussortiert.

let zahlen = [ 12, 5, 22, 7, 13, 40, 14, 8, 4, 3, 6 ];
let geradeZahlen = zahlen.filter( n => !(n % 2) );
      

Die Syntax

const neuesArray = altesArray.filter(element => {return // Bedingung (muss true oder false   ergeben)}); 

Ein praxisnahes Beispiel

Nehmen wir an, du hast eine Liste mit Zahlen und möchtest nur die finden, die größer als 10 sind:

const zahlen = [5, 12, 8, 130, 44];
const grosseZahlen = zahlen.filter(zahl => zahl > 10);
console.log(grosseZahlen); // Ergebnis: [12, 130, 44] 

Warum ist filter() so gut?

• Original bleibt heil: Das ursprüngliche Array wird nicht verändert (Immutabilität).

• Lesbarkeit: Der Code beschreibt genau, was passiert ("Filtere Zahlen größer als 10"), anstatt in einer for-Schleife mühsam zu erklären, wie es technisch gemacht wird.

• Kettenreaktion: Da filter() ein neues Array zurückgibt, kannst du direkt danach andere Methoden wie .map() oder .sort() dranhängen.

Die 3 goldenen Regeln von filter():

1. Immer ein Boolean: Deine Funktion im Inneren muss true oder false zurückgeben.

2. Immer ein neues Array: Selbst wenn kein Element die Bedingung erfüllt, erhältst du ein leeres Array [], niemals null oder undefined.

3. Keine Veränderung: filter() löscht nichts aus der Quelle, es kopiert nur die "Gewinner".

Wenn filter() der Türsteher ist, dann ist map() die Fließband-Maschine in einer Fabrik. 🏭

Während der Türsteher Dinge aussortiert, nimmt die map()-Maschine jedes einzelne Teil in die Hand und verwandelt es in etwas Neues.

Die map()-Methode erstellt ein neues Array, indem sie jedes Element des ursprünglichen Arrays einmal "anfasst" und nach deinen Anweisungen umformt.

Das Prinzip

Stell dir ein Fließband vor:

1. Vorne kommen die Rohstoffe (dein altes Array) rein.

2. Jedes Teil fährt durch eine Bearbeitungsstation (deine Funktion).

3. Hinten kommt das fertige, veränderte Produkt raus (dein neues Array).

4. Wichtig: Am Ende hast du exakt genauso viele Teile wie am Anfang!

Die Syntax

 const veredeltesArray = rohstoffArray.map(element => {return // Das neue, verwandelte Element}); 

const preise = [5, 10, 25];
const formatiertePreise = preise.map(preis => preis + " €");
console.log(formatiertePreise); // Ergebnis: ["5 €", "10 €", "25 €"] 

  const produkte = [{ id: 1, name: "Äpfel" }, { id: 2, name: "Bananen" } ];
  // Wir verwandeln Objekte in fertige <li>-Strings
  const htmlListe = produkte.map(p => `<li>${p.name}</li>`);
  console.log(htmlListe);
  // Ergebnis: ["<li>Äpfel</li>", "<li>Bananen</li>"]

let tier = ["Fliege", "Wal", "Mensch"];
if (tier.includes("Fliege")){
  console.log("Fliege gibt es.")
}

/* table bekommt EventListener anstatt jeder Tabellenreihe, Performance! */
let table = document.querySelector( "table" );
table.addEventListener( "click", checkRow );

/* thema alle ungeraden tr Element */
let thema = Array.from(document.querySelectorAll( "tr:nth-child(odd" ) );
/* thema alle geraden tr Elemente */
let info = Array.from( document.querySelectorAll( "tr:nth-child(even)" ) );



function checkRow ( evt )
{
/* die nächst gelegene tr vom angeklickten Element
 innerhalb der table ist curRow */
let el = evt.target;
let curRow = evt.target.closest( "tr" );

/* Überprüfing ob gerade oder ungerade tr */

if ( thema.includes( curRow ) )
{
/* bei ungerader tr wird nächste Element aus oder eingeblendt */
curRow.nextElementSibling.classList.toggle( 'selected' );
}
/* bei gerader tr wird Element wieder ausgeblendet */
if ( info.includes( curRow ) )
{
curRow.classList.toggle( 'selected' );
}

}
  

array.reduce((accumulator, currentValue) => {// Logik}, initialValue);  

const zahlen = [5, 10, 15];
const summe = zahlen.reduce((total, zahl) = > {return total + zahl;}, 0);
 // 0 ist unser Startwert
 console.log(summe); // Ergebnis: 30  

  const zahlen = [10, 20, 30];
  
  const ergebnis = zahlen.reduce((text, zahl, index) => {
  // Ein Komma nur hinzufügen, wenn es nicht die erste Zahl ist
  const trenner = index === 0 ? "" : ", ";
  return text + trenner + zahl;
  }, "Werte: ");
  
  console.log(ergebnis); // "Werte: 10, 20, 30"
  

const namen = ['Alice', 'Bob', 'Alice', 'Charlie', 'Bob'];
const gezählt = namen.reduce((obj, name) => {
if (!obj[name]) {
obj[name] = 1;
} else {
obj[name]++;
}
return obj;},{});
// Startwert ist ein leeres Objekt {}
console.log(gezählt); // { Alice: 2, Bob: 2, Charlie: 1 }  

  let team = [
  ["Michael", "Fußball"],
  ["Franz", "Fußball"],
  ["Peter", "Fußball"],
  ["Beate", "Fußball"],
  ["Friedel", "Tennis"],
  ["Martin", "Tennis"],
  ["Monika", "Fahrrad"],
  ["Paul", "Fahrrad"],
  ["Karsten", "Fahrrad"],
  ["Theo", "Fahrrad"],
  ];
  //wir starten mit einem leeren Objekt das ist der Startwert {}
  const sportTeams = team.reduce(sortiere, {});
  
  function sortiere(gruppen, cur){
  let name = cur[0];
  let hobby = cur[1];
  /*Falls das Hobby im Objekt noch nicht existiert, lege ein leeres Array an
  oder ausführlicher ausgedrückt:
  Falls hobby ("Fußball", "Tennis" oder "Fahrrad") noch nicht exisitiert lege für das Objekt gruppen
  einen neuen Schlüssel mit dem Hobbynamen an der Wert ist ein leeres Array
  gruppen["Fußball"] = [];
  */
  if (!gruppen[hobby]) {
  gruppen[hobby] = [];
  console.log(hobby)
  }
  gruppen[hobby].push(name);
  return gruppen;
  }

  console.log(sportTeams)
  //{
  'Fußball': [ 'Michael', 'Franz', 'Peter', 'Beate' ],
  Tennis: [ 'Friedel', 'Martin' ],
  Fahrrad: [ 'Monika', 'Paul', 'Karsten', 'Theo' ]
}