Objekte und Arrays

Object literals

Ein Object Literal ist die einfachste Art, ein Objekt in JavaScript zu erstellen, indem Eigenschaften und Methoden direkt in geschweiften Klammern definiert werden.

const student = {
    name: 'Peter',
    age: '32',
    sayHello: function() {
        console.log("Hi, I am Peter");
    }
};

Zugriff auf Eigenschaften und Methoden

student.name // <- 'Peter'
student.sayHello(); // <- 'Hi, I am Peter'

Property und Method Shorthand

Seit ES6 gibt es praktische Kurzschreibweisen für Object Literals, wie Property Shorthand und Method Shorthand.

const name = 'Peter';

const student = {
    // Property Shorthand:
    // Setze die Property 'name' mit dem Wert der gleichnamigen Variable
    name,

    // Method Shorthand:
    sayHello() {
        // ...
    }
}

Arrays

Arrays erstellen

Arrays können in JavaScript auf verschiedene Weisen erstellt werden, wobei die Array Literal Notation mit eckigen Klammern die häufigste und einfachste Methode ist.

const fruits = ["Apfel", "Banane", "Orange"];

const mixed = [1, "text", true, { key: "value" }, [1, 2]];

tipp

Arrays in Javascript:

• sind mutable und können jeder Zeit angepasst werden
• können gemischten Inhalt haben (verschiedene Datentypen)
• können beliebig verschachtelt sein

Array-Methoden

Javascript bietet eine große Menge nützlicher Array-Methoden.

Die wichtigsten Array-Methoden in JavaScript lassen sich in verschiedene Kategorien einteilen:

• Transformationsmethoden (wie map, filter),
• Suchmethoden (wie find, indexOf),
• Iterationsmethoden (wie forEach)
• und Aggregationsmethoden (wie reduce)

Transformation

array.map(func) führt die Funktion 'func' führ jedes Element im Array aus.
Es wird dann ein neues Array erstellt mit den Rückgabewerten.

array.filter(func) führt für jedes Element die Filter-Funktion 'func' aus. Es wird ein neues Array estellt: jedes Element, dessen filter true zurück gibt wird Teil des neuen Arrays.

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);  // -> [2, 4, 6, 8, 10]
const evenNums = numbers.filter(n => n % 2 === 0); // -> [2, 4]

Suchen

const numbers = [1, 2, 3, 4, 5];
const fruits = ["Apfel", "Banane", "Orange"];

const found = numbers.find(n => n > 3);       // -> 4
const orangeIndex = fruits.indexOf("Orange"); // -> 2
const hasApple = fruits.includes("Apfel");    // -> true

Iteration

numbers.forEach(n => console.log(n));           // Gibt jeden Wert aus
const allBigEnough = numbers.every(n => n > 0); // true
const someBig = numbers.some(n => n > 4);       // true

Modifikation

array.push(elem) fügt das Element 'elem' am Ende hinzu

array.pop() entfern das Element am Ende und gibt es aus

array.unshift(elem) fügt das Element 'elem' am Anfang hinzu

array.shift() entfern das Element am Anfang und gibt es aus

fruits.push("Mango"); 
const lastFruit = fruits.pop();                 // Entfernt letztes Element
fruits.unshift("Kiwi");                         // Fügt am Anfang hinzu
const firstFruit = fruits.shift();              // Entfernt erstes Element

Destructuring

Destructuring ist eine elegante JavaScript-Syntax (seit ES6), die es ermöglicht, Werte aus Arrays oder Properties aus Objekten in separate Variablen zu extrahieren.

Array Desctructuring

const coordinates = [10, 20, 30];
const [x, y, z] = coordinates;

Object Destructuring

const person = {
    name: 'Max',
    age: 30,
    city: 'Berlin'
};
const { name, age } = person;
console.log(name); // 'Max'

Spread/rest operators

Spread und Rest benutzen beide die gleiche Syntax "...".

Spread

Der Spread-Operator "verteilt" die Elemente aus einem Array oder Objekt.
Dadurch kann man alle Werte aus einem Array oder Objekt als einzelne Elemente in einen Ausdruck geben.
| ...array == elem1, elem2, ..., elemN
| ...obj == key1: value1, key2: value2, ..., keyN: valueN

// Beispiel: Arrays kombinieren
const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];  // [1, 2, 3, 4, 5]

// Beispiel: Objekt Erweitern, bzw. neues Objekt erstellen
const person = { name: 'Max', age: 30 };
const extendedPerson = {
    ...person,
    city: 'Berlin'
};  // { name: 'Max', age: 30, city: 'Berlin' }

Rest

Der Rest Operator kann beim Destructuring oder in der Parameter Definition einer Funktion verwendet werden.
Dadurch werden die übrigen Werte eingesammelt und in einem Array zusammen gefasst:

// Rest Parameter
function printAllParameters(...params) {
    params.forEach( p => console.log(p) );
}

// Array Destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(rest);  // [3, 4, 5]

// Object Destructuring
const { name, ...remaining } = {
    name: 'Max',
    age: 30,
    city: 'Berlin'
};
console.log(remaining);  // { age: 30, city: 'Berlin' }

Object methods

Für Objekte gibt es weniger Methoden als für Arrays, hier nur die wichtigsten für den Anfang:
Achtung: die Objekt-Methoden sind nicht Teil jedes Objects, sondernd werden als statische Methoden der Object-Klasse aufgerufen.

// Object literal
const person = {
    name: 'Max',
    age: 30
};

// Array allert Keys
const keys = Object.keys(person);     // ['name', 'age']

// Array aller Werte
const values = Object.values(person); // ['Max', 30]

// Nested Array mit Key-Value Paaren
Object.entries(person) // -> [['name', 'Max'], ['age', 30]]

Object.entries ist die Geheimwaffe zum Iterieren über Objekte:

for (const [key, value] of Object.entries(person)) {
    console.log(`${key}: ${value}`);
}