Türchen 23: Nützliche Javascript Kniffe

Wir haben im Adventskalender schon einmal über nützliche Array-Funktionen in Javascript gesprochen. Neben diesen Funktionen gibt es aber noch viel mehr coole Kniffe, die man selber nicht so oft benutzt und ihr vielleicht auch noch nicht kennt. Vielleicht ist in diesem Türchen ja genau so ein Beispiel für euch dabei!

console.table()

Das normale „console.log()“ kennt sicherlich jeder. Aber wenn man große Objekte einmal schön und übersichtlich in der Browserkonsole darstellen lassen will, nutzt man einfach „console.table()“.

let users = [{ name: 'Anja' }, { name: 'Heinz' }];

// Gibt das Objekt als Tabelle in der Konsole aus
console.table(users);

console.groupCollapsed()

Zwanzig „console.log()“-Statements hintereinander ausgeben kennt ebenfalls jeder. Wird aber irgendwann super unübersichtlich. Gerade wenn man auf lange Zeit etwas tiefergehend debuggen muss. Hierfür haben wir „console.groupCollapsed()“, welches die Ausgaben in einklappbare Gruppen sortieren kann.

// Gibt eine zusammengeklappte Gruppe
// in der Konsole aus
console.groupCollapsed('Gruppenname');
console.log('Name: Anja');
console.log('Test: 123');
console.groupEnd();

Der zweite Parameter von JSON.parse()

Eben schnell ein JSON parsen und danach direkt wieder, mittels forEach-Schleife, durch iterieren und Daten anpassen. Funktioniert! Es gibt aber eine viel kompaktere Lösung. „JSON.parse()“ hat nämlich einen zweiten Parameter, wo man eine Funktion reinreichen kann. In dieser Funktion hat man direkt die Möglichkeit die Daten anzupassen, welche am Ende rauskommen sollen.

let data = '{"name": "Alice", "age": "30"}';

// Wenn der Key = "age" ist, dann wird der
// Wert automatisch in eine Nummer konvertiert
let parsed = JSON.parse(data, (key, value) => {
  if (key === 'age') return Number(value);
  return value;
});

// ==> parsed: 30

Mehrere Promisses

Auf mehrere Promisses warten ist mit z.B. „.then()“ kein Hexenwerk. Es kann aber je nach Anzahl ein bisschen durcheinander werden. Gerade wenn man dadurch vier oder fünf Mal ein „.then()“ geschachtelt hat. Darf ich vorstellen: „Promise.all()“:

let externalCall = fetch('externalUrl');
let internalCall = fetch('internalUrl');

Promise.all([externalCall, internalCall])
  .then(responses => console.log(responses))
  .catch(error => console.error(error));

// Das ".then" wird erst aufgerufen, wenn
// beide Promisses erfolgreich waren

Klonen & Mergen

Ein Array zu Klonen kann hier und da mal notwendig sein. Auch hier haben wir den kurzen Einzeiler für euch parat:

let origData = [1, 2, 3];
let clonedData = [...origData];

// ==> clonedData: [1, 2, 3]

Objekte zu Mergen war auch schonmal komplizierter. Vor allem bevor ihr diesen coolen Einzeiler kanntet:

let simpleData = { a: 1, b: 2 };
let specialData = { b: 3, c: 4 };
let merged = { ...simpleData, ...specialData };

// ==> merged: { a: 1, b: 3, c: 4 }
// Der Key "b" wurde vom zweiten Objekt überschrieben

Wir hoffen, dass hier ein paar Kniffe dabei waren, die ihr noch nicht kanntet. Integriert sie gerne in euer tägliches Coding. Wir lieben kurzen, sauberen Code!