Philip Ackermann

Neue Website

Wed, 20 May 2020 08:00:00 GMT

Liebe Leserinnen und Leser,

ab sofort finden Sie die Blogs zum JavaScript-Handbuch, zum JavaScript-Profibuch und in Zukunft auch zum Node.js-Kochbuch vereint auf dieser Website. Auf diese Weise bleiben Sie an einer einzigen zentralen Stelle immer auf dem Laufenden, wenn es um Updates rund um die genannten Bücher oder allgemeine Informationen, Tutorials etc. rund um die Web- und Softwareentwicklung geht.

News und Updates in Microblogging-Kurzform finden Sie darüber hinaus auch bei Twitter:

Viel Spaß damit!
Philip Ackermann

Node.js Kochbuch

Fri, 12 Jul 2019 08:00:00 GMT

Am 23. August 2019 erscheint beim Rheinwerk Verlag mein Node.js Kochbuch mit 105 Rezepten und Lösungen auf über 650 Seiten.

Themen sind unter anderem:

Konfiguration, Logging und Debugging
Events, I/O und Streams
Dateisysteme und Dateiformate
Persistenz: relationale und nicht-relationale Datenbanken
Package und Dependency Management
Sockets, Messaging und Enterprise Integration: AMQP und MQTT
Webanwendungen und Webservices: HTTP, REST und GraphQL
Deployment und Microservices: Docker und Docker Compose
Native Module: V8-API, NAN-API, N-API
Skalierung, Performance und Sicherheit
Entwicklungsprozess und Unit-Testing
TypeScript unter Node.js

👉 Mehr Informationen hier gibt es auf der offiziellen Website zum Buch

Zweite Auflage

Fri, 24 Aug 2018 08:00:00 GMT

Liebe Leserinnen und Leser,

heute ist die zweite, aktualisierte und überarbeitete Auflage des JavaScript-Handbuchs erschienen. Gegenüber der ersten Auflage sind im Wesentlichen folgende Themen hinzugekommen:

✅ neue ECMAScript-Features wie beispielsweise async und await
✅ die Web Speech API, über die Sprachausgabe und Spracherkennung möglich ist
✅ die Web Animation API, über die es möglich ist, Animationen zu erstellen
✅ die Command Line API, die einige nützliche Funktionen für die Ausgabe zur Verfügung stellt
✅ die Internationalization API, die es erlaubt, Anwendungen mehrsprachig zu erstellen
✅ Desktopanwendungen mit NW.js und Electron

Das Buch richtet sich weiterhin an verschiedene Zielgruppen: zum einen an Leser, die generell noch überhaupt keine Programmiererfahrung haben, weder in JavaScript noch in einer anderen Programmiersprache. Diese Leser erwartet in meinem Buch neben der Einführung in JavaScript auch Hintergrundwissen zu Programmierkonzepten und -paradigmen. Unabhängig vom individuellen Hintergrundwissen erhalten Leser mit meinem Buch eine umfangreiche Einführung in die Sprache an sich, in die wichtigsten APIs und Anwendungsgebiete. Das Buch richtet sich dabei auch an Leser, die bereits Erfahrung mit JavaScript haben und diese nun vertiefen oder einfach ein zuverlässiges, umfangreiches Nachschlagewerk zur Hand haben möchten.

Den Quelltext zur zweiten Auflage finden Sie weiterhin im Download-Bereich des Buches. Darüber hinaus stelle ich den Quelltext aber nun auch zusätzlich über ein Repository bei GitHub zur Verfügung. Wenn Sie bereits mit Git arbeiten, bietet es sich also an, das Repository auf Ihren Rechner zu klonen:

$ git clone https://github.com/<GIT_USERNAME>/javascripthandbuch.git

Der Vorteil davon ist, dass Sie Aktualisierungen am Quelltext besser nachvollziehen und wie bei Git gewohnt über git pull entsprechend herunterladen können. Umgekehrt können Sie mir natürlich auch - für den Fall, dass Sie in einem Listing einen Fehler finden - die entsprechenden Anmerkungen als Pull-Request zukommen lassen. Oder Sie schreiben mir Ihre Anmerkungen an die weiterhin hierfür vorgesehene E-Mail-Adresse.

Viel Spaß mit der zweiten Auflage! Philip Ackermann

Quelltext zur zweiten Auflage

Fri, 22 Jun 2018 08:00:00 GMT

Liebe Leserinnen und Leser,

endlich ist es soweit! Heute ist die zweite, komplett aktualisierte und überarbeitete Auflage des JavaScript-Profibuchs erschienen 🎉🎉🎉 Über die Anpassungen und die rund 200 Seiten umfanssenden Neuerungen hatte ich bereits in meinem letzten Blog-Post berichtet.

Den Quelltext zur zweiten Auflage finden Sie weiterhin im Download-Bereich des Buches. Darüber hinaus stelle ich aber nun erstmals zusätzlich auch ein Repository bei GitHub zur Verfügung, welches ebenfalls den Quelltext enthält. Wenn Sie mit Git arbeiten, bietet es sich also an, das Repository auf Ihren Rechner zu klonen:

$ git clone https://github.com/<GIT_USERNAME>/javascriptprofibuch.git

Der Vorteil: bei Aktualisierungen des Quelltextes können Sie diese besser nachvollziehen und wie bei Git gewohnt über git pull entsprechend aktualisieren. Umgekehrt können Sie mir natürlich auch - für den Fall, dass Sie in einem Listing einen Fehler finden - die entsprechenden Anmerkungen als Pull-Request zukommen lassen. Selbstverständlich können Sie mir Anmerkungen auch weiterhin an die hierfür vorgesehene E-Mail-Adresse schicken.

Der Großteil der Dateien ist nach dem Schema “ListingKapitelnummer-Listingnummer.js” benannt (beispielsweise “Listing3-83.js” für das Listing 83 aus Kapitel 3). Fasst eine Datei mehrere Listings zusammen, werden die Listingsnummern entsprechend angehangen, beispielsweise “Listing3-44-46.js” für die Listings 44 bis 46 aus Kapitel 3. Code, der aus bestimmten Gründen nicht diesem Aufbau folgen kann, ist in entsprechend benannte Ordner einsortiert, beispielsweise “Listing3-79-80”.

Noch ein Hinweis: für die Formatierung des Quelltextes verwende ich ESLint in Kombination mit Prettier, wodurch sich eine etwas andere Formatierung als im Buch ergibt (aus Gründen der Lesbarkeit ist die Formatierung im Buch teilweise etwas anders).

In diesem Sinne: Happy Coding und viel Spaß mit der zweiten Auflage! Philip Ackermann

Zweite Auflage

Sun, 03 Jun 2018 18:00:00 GMT

Liebe Leserinnen und Leser,

Ende diesen Monats erscheint die zweite, komplett aktualisierte und überarbeitete Auflage des JavaScript-Profibuchs. Gegenüber der ersten Auflage mit 450 Seiten hat die zweite Auflage mit 648 Seiten fast 45% mehr Inhalt 😊🌟👍

Folgende Themen sind unter anderem hinzugekommen:

✅ funktional reaktive Programmierung
✅ fortgeschrittene objektorientierte Programmierung
✅ aspektorientierte Programmierung
✅ Messaging mit AMQP und MQTT
✅ komponentenbasierte Architektur
✅ Continuous Integration

🇩🇪🇺🇸 Außerdem habe ich in allen Code-Listings deutsche Variablen-, Funktions-, Klassennamen, etc. durch entsprechende englische Namen ersetzt. Die deutschen Namen erschienen mir im Nachhinein etwas holprig, die englischen Namen dafür praxisnäher.

Auch verwenden die Listings jetzt in den meisten Fällen modernen JavaScript-Code. Beispielsweise werden Variablen durch let oder const deklariert statt mit dem weitesgehend veralteten Schlüsselwort var. Ausnahme hierzu bilden natürlich die Code-Beispiele, die explizit Patterns für ältere JavaScript- bzw. ECMAScript-Versionen zeigen.

Das Buch richtet sich weiterhin in erster Linie an Entwickler, die bereits Programmiererfahrung entweder in JavaScript selbst oder in mindestens einer anderen Programmiersprache haben und ihre JavaScript-Kenntnisse vertiefen möchten. Mein Ziel ist es, dass Sie nach dem Lesen des Buches einen guten Überblick über die professionelle Entwicklung mit JavaScript haben, dass Sie die Kernkonzepte der Sprache verstanden haben, Entwurfsmuster erkennen und anwenden können und wissen, welche Möglichkeiten Ihnen für einen professionellen Softwareentwicklungsprozess mit JavaScript zur Verfügung stehen.

Viel Spaß mit der zweiten Auflage! Philip Ackermann

Zugriff auf Objekteigenschaften in Listing 4.3

Tue, 19 Sep 2017 22:40:00 GMT

In Listing 4.3 hat sich ein Fehler eingeschlichen. An den Objekten x und y wird jeweils die Eigenschaft name verwendet, die Konsolenausgaben greifen aber auf die Eigenschaft value zu.

'use strict';
function example(x) {
    console.log(x.value);
    x.name = 5;
    console.log(x.value);
}
let y = {
    name: 4711
};
console.log(y.value);
example(y);
console.log(y.value);

Damit das Listing zum Text passt, muss einheitlich die gleiche Eigenschaft verwendet werden:

'use strict';
function example(x) {
    console.log(x.value);
    x.value = 5;
    console.log(x.value);
}
let y = {
    value: 4711
};
console.log(y.value);
example(y);
console.log(y.value);

Neue Website zum Buch

Tue, 02 May 2017 20:15:00 GMT

Liebe Leserinnen und Leser,

wie schon bei dem umfassenden JavaScript-Handbuch möchte ich Sie ab heute auf der neuen Buchseite zu meinem Buch “Professionell entwickeln mit JavaScript” willkommen heißen.

Ergänzend zu der offiziellen Website beim Rheinwerk-Verlag werde ich auf dieser Website zusätzliche Informationen und Materialien zum Buch und weiterführende Informationen zur Verfügung stellen. Im Gegensatz zu der Website zum umfassende Handbuch werde ich hierbei allerdings - passend zur Ausrichtung des Profibuchs - eher auf fortgeschrittene Themen eingehen.

Gerne können Sie mir über diese Website auch Feedback zum Buch zukommen lassen, entweder über die angegebene E-Mail-Adresse oder über einen der sozialen Kanäle wie etwa Twitter, GitHub, Xing oder LinkedIn.

Herzlichst, Philip Ackermann

Autor und Software-Entwickler, philipackermann.de

Bibliothek-Tipp

Thu, 27 Apr 2017 10:02:53 GMT

Egal, ob man eine Website entwickelt, einen Webservice oder eine Desktopanwendung: immer wieder benötigt man „Dummy-Daten“, sprich Daten, die während der Entwicklung als Platzhalter dienen: sei es, damit die Anwendung sich „echter“ anfühlt oder damit ein Webservice schonmal Daten zurückliefert, auch wenn die Verbindung zur Datenbank noch nicht implementiert wurde.

Eine in diesem Zusammenhang interessante und hilfreiche Bibliothek ist Faker.js. Mit dieser Bibliothek lassen sich nämlich verschiedene Arten von Dummy-Daten zufällig generieren. Von Personennamen, Zahlenwerten und Datumsangaben, über E-Mail-Adressen, Domain-Namen und Passwörtern bis hin zu vollständigen Adressdaten, Produktdaten und IBAN-Nummern.

Installation

Faker.js kann sowohl im Browser als auch unter Node.js verwendet werden. Die Installation erfolgt dabei wahlweise über NPM mit dem Befehl

$ npm install faker

oder über Bower mit dem Befehl

$ bower install facker

Achtung

Bei der Installation über Bower ist allerdings darauf zu achten, facker tatsächlich mit ck zu schreiben. Der Eintrag faker referenziert in der Bower-Registry noch auf eine veraltete Version der Bibliothek, in der viele Funktionalitäten nicht zur Verfügung stehen.

Verwendung

Bei der Verwendung im Browser bindet man Faker.js nun einfach über ein entsprechendes <script>-Tag ein:

<script src="bower_components/faker/build/build/faker.min.js"></script>

Bei der Verwendung unter Node.js dagegen erfolgt das Einbinden wie gewohnt über require():

const faker = require('faker');

Anschließend lässt sich die Bibliothek relativ intuitiv verwenden. Ausgangspunkt bildet das Objekt faker, welches über verschiedene Eigenschaften eine Reihe von Helfermethoden zur Verfügung stellt. Dazu einige Beispiele:

let randomName = faker.name.findName();             // Name
let randomEmail = faker.internet.email();           // E-Mail-Adresse
let randomDomain = faker.internet.domainName();     // Domain-Name

Neben den Eigenschaften name zur Generierung von Namen und internet zur Generierung von beispielsweise E-Mail-Adressen und Domain-Namen gibt es unter anderem die Eigenschaften company zur Generierung von Firmendaten, image zur Generierung von Bilddaten, lorem zur Generierung von lateinischen Platzhaltertexten, system zur Generierung von beispielsweise Dateinamen, Dateiendungen, MIME-Typen und viele, viele mehr. Eine vollständige Auflistung findet man im API-Browser auf der Homepage der Bibliothek.

* tl;dr: Faker.js stellt eine Reihe von Helfermethode zur Verfügung, über die sich Dummy-Daten generieren lassen. Die Bibliothek kann sowohl im Browser als auch unter Node.js verwendet werden. *

Übersicht Web APIs

Fri, 14 Apr 2017 17:50:00 GMT

Im Folgenden eine kurze Auflistung von Web APIs, die für die Webentwicklung interessant und relevant sind.

Hinweis: Weitere Informationen zu Web APIs finden Sie übrigens in meinem JavaScript-Handbuch.

Ambient Light API Ermöglicht den Zugriff auf Informationen bezüglich des Umgebungslichts.
Link: https://www.w3.org/TR/ambient-light/
Battery Status API Ermöglicht den Zugriff auf den Batteriestand (Akkustand) eines Endgeräts.
Link: https://www.w3.org/TR/battery-status/
Canvas API Ermöglicht das Zeichnen per JavaScript.
Link: https://www.w3.org/TR/2dcontext/
Clipboard API Ermöglicht den Zugriff auf die Zwischenablage.
Link: https://www.w3.org/TR/clipboard-apis/
Command Line API Stellt verschiedene Funktionalitäten rund um das Arbeiten mit der Entwicklerkonsole zur Verfügung.
Link: https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference
Device Orientation API Ermöglicht das Auslesen von Informationen bezüglich der Orientierung von Endgeräten.
Link: http://www.w3.org/TR/orientation-event/
Fullscreen API Ermöglicht das Darstellen einer Webseite im Vollbildmodus.
Link: https://fullscreen.spec.whatwg.org/
Gamepad API Ermöglicht den Zugriff auf Gamepads.
Link: https://www.w3.org/TR/gamepad/ status: Working Draft
Geolocation API Ermöglicht den Zugriff auf Standortinformationen.
Link: http://www.w3.org/TR/geolocation-API/
High Resolution Time API Ermöglicht den Zugriff auf den aktuellen Zeitpunkt in einer höheren Auflösung als beispielsweise die, die für die Systemzeit verwendet wird.
Link: http://www.w3.org/TR/hr-time/
Indexed Database API Ermöglicht den Zugriff auf eine clientseitige Browserdatenbank.
Link: http://www.w3.org/TR/IndexedDB
Internationalization API Ermöglicht die Internationalisierung einer Anwendung.
Link: http://www.ecma-international.org/ecma-402/1.0/
Media Capture and Streams API Definiert eine Schnittstelle für den Zugriff auf Mediendaten wie Audiodaten und Videodaten.
Link: http://www.w3.org/TR/mediacapture-streams/
Navigation Timing API Ermöglicht den Zugriff auf verschiedenen zeitliche Informationen bei der Interaktion von Nutzern mit einer Webseite.
Link: http://www.w3.org/TR/navigation-timing/
Network Information API Ermöglicht Zugriff auf Verbindungsinformationen eines Endgeräts.
Link: http://w3c.github.io/netinfo/
Notifications API Ermöglicht es, Hinweismeldungen an den Nutzer zu schicken.
Link: https://www.w3.org/TR/notifications/
Page Visibility API Ermöglicht es, festzustellen, ob eine Webseite aktuell sichtbar ist oder nicht (beispielsweise wenn sie in einem verdeckten Tab geöffnet ist).
Link: http://www.w3.org/TR/page-visibility/
Payment Request API Vereinheitlich Bezahlprozesse auf Webseiten.
Link: https://www.w3.org/TR/payment-request/ status: Working Draft
Performance Timeline API Ermöglicht Zugriff auf Informationen, um die Performance innerhalb einer Webseite zu messen.
Link: http://www.w3.org/TR/performance-timeline
Presentation API Definiert eine Schnittstelle für den Zugriff auf externe Präsentations-Displays wie Beamer oder Fernseher.
Link: https://www.w3.org/TR/presentation-api/
Pointer Events API Definiert eine einheitliche Schnittstelle für Eingabegeräte wie Maus, Stift und Touchscreen.
Link: http://www.w3.org/TR/pointerevents/
Progress Events API Definiert eine Schnittstelle, um auf den Fortschritt von bestimmten Prozessen zugreifen zu können. Wurde in diesem Kapitel beispielsweise verwendet, um den Fortschritt beim Lesen einer Datei zu ermitteln (siehe Unterkapitel Fehler! Verweisquelle konnte nicht gefunden werden.).
Link: http://www.w3.org/TR/progress-events
Proximity API Ermöglicht den Zugriff auf Angaben zu der Lage von physischen Objekten wie Endgeräten oder Nutzern.
Link: http://www.w3.org/TR/proximity/
Resource Timing API Ermöglicht den Zugriff auf zeitliche Informationen bezüglich der in einer Webseite eingebundenen Ressourcen, um beispielsweise zu protokollieren, wie lange das Laden einer Ressource dauert.
Link: http://www.w3.org/TR/resource-timing/
Screen Orientation API Ermöglicht den Zugriff auf Orientierungsinformationen von Endgeräten.
Link: http://www.w3.org/TR/screen-orientation/
Selection API Ermöglicht die Selektion von Inhalten auf einer Webseite.
Link: https://www.w3.org/TR/selection-api/ status: Working Draft
Server-Sent Events API Ermöglicht das Senden von Nachrichten vom Server an den Client.
Link: http://www.w3.org/TR/eventsource
Touch Events API Definiert eine Schnittstelle für den Zugriff auf Touch-Oberflächen.
Link: http://www.w3.org/TR/touch-events
User Timing API Ermöglicht den Zugriff auf verschiedenen zeitliche Informationen bei der Interaktion von Nutzern mit einer Webseite unter Verwendung von hochauflösenden Zeitinformationen.
Link: http://www.w3.org/TR/user-timing/
Vibration API Ermöglicht es, die Vibrationsfunktion von Endgeräten zu nutzen.
Link: http://www.w3.org/TR/vibration/
Web Animations API Ermöglicht das Erstellen von Animationen innerhalb einer Webseite.
Link: https://w3c.github.io/web-animations/
Web Audio API Ermöglicht das Verarbeiten und Erstellen von Audiodaten innerhalb einer Webseite.
Link: https://www.w3.org/TR/webaudio/ status: Working Draft
Web Bluetooth API Ermöglicht den Zugriff auf Bluetooth-Geräte.
Link: https://webbluetoothcg.github.io/web-bluetooth/
Web Cryptography API Ermöglicht kryptographische Operationen mit Hilfe von JavaScript.
Link: https://www.w3.org/TR/WebCryptoAPI/
Web Messaging API Definiert eine Schnittstelle für den Nachrichtenaustausch. Wird beispielsweise bei Server-Sent Events oder Web Sockets verwendet.
Link: https://www.w3.org/TR/webmessaging/
Web Notification API Definiert eine Schnittstelle für Benachrichtigungen an Nutzer.
Link: http://www.w3.org/TR/notifications/
Web Speech API Ermöglicht Sprachausgabe und Spracherkennung.
Link: https://dvcs.w3.org/hg/speech-api/raw-file/tip/webspeechapi.html
Web Storage API Ermöglicht den Zugriff auf einen Browserspeicher.
Link: http://www.w3.org/TR/webstorage
Web Workers API Ermöglicht die parallele Ausführung von JavaScript-Programmen.
Link: http://www.w3.org/TR/workers
WebSocket API Ermöglicht die bidirektionale Kommunikation zwichen Client und Server.
Link: http://www.w3.org/TR/websockets

Drag&Drop-Beispiel in Firefox

Wed, 12 Apr 2017 16:50:00 GMT

Heute wies mich ein Leser darauf hin, dass es bei dem Drag&Drop-Beispiel aus Listing 12.43 (HTML) und Listing 12.44 (JavaScript) in Firefox Probleme gibt bzw. folgender Code so nicht funktioniert:

target.addEventListener('drop', function(event) {
    if(event.target.id === 'target') {
        // Funktioniert nicht in Firefox
        event.srcElement.innerHTML += event.dataTransfer.getData('text/html');
    }
    onLeave(event);
})

Der Grund dafür ist, dass die Eigenschaft srcElement eine proprietäre Eigenschaft des Internet Explorers ist und daher nicht von allen Browsern unterstützt wird. Stattdessen sollte (wie im übrigen Listing auch) die Eigenschaft target aus dem DOM Standard verwendet werden:

target.addEventListener('drop', function(event) {
    if(event.target.id === 'target') {
        // Funktioniert in Firefox und anderen Browsern
        event.target.innerHTML += event.dataTransfer.getData('text/html');
    }
    onLeave(event);
})

Alternativ lässt sich als Fallback für ältere Internet Explorer auch die Schreibweise event.target || event.srcElement verwenden.

target.addEventListener('drop', function(event) {
    let targetElement = event.target || event.srcElement;
    if(targetElement.id === 'target') {
        targetElement.innerHTML += event.dataTransfer.getData('text/html');
    }
    onLeave(event);
})

Konsequenterweise ist es dann sinnvoll, entsprechendes Konstrukt auch in den anderen Event-Listenern zu verwenden:

target.addEventListener('dragenter', function(event) {
    let targetElement = event.target || event.srcElement;
    targetElement.classList.add('dragover');
});
function onLeave(event) {
    let targetElement = event.target || event.srcElement;
    targetElement.classList.remove("dragover");
}

Merke

Die Eigenschaft srcElement ist nicht im DOM Standard definiert und sollte daher nicht bzw. wenn dann nur als Fallback in Produktivsystemen verwendet werden.

Neue Website zum Buch

Tue, 04 Apr 2017 10:02:53 GMT

Liebe Leserinnen und Leser,

Willkommen auf der neuen Website zum umfassenden JavaScript-Handbuch, die ab heute online ist. Ergänzend zu der offiziellen Website beim Rheinwerk-Verlag möchte ich hier zusätzliche Informationen und Materialien zum Buch und zum Thema JavaScript im Allgemeinen zur Verfügung stellen.

Darüber hinaus können Sie mir über diese Website auch gerne Feedback zukommen lassen, entweder über die angegebene E-Mail-Adresse oder über einen der sozialen Kanäle wie etwa Twitter, GitHub, Xing oder LinkedIn.

Herzlichst, Philip Ackermann

Autor und Software-Entwickler, philipackermann.de

Create a generic function for inspecting function calls

Wed, 20 Jul 2016 08:00:00 GMT

Problem

In yesterday’s recipe we saw how to create a function to inspect function calls. For example this code here …

const inspect = fn => function (...args) {
  console.log(fn.name + ' called with args: ' + args.join(', '));
  return fn.apply(this, args);
};

function createPerson(firstName, lastName) {
  return {
    firstName: firstName,
    lastName: lastName
  }
}

const loggingCreatePerson = inspect(createPerson)
loggingCreatePerson('John', 'Doe');

… produced this output:

createPerson called with args: John, Doe

Today we are gonna improve this recipe and create a generic function before() to create functions that execute some code before the original function is called:

...
const log = (fn, ...args) => console.log(
  fn.name + ' called with args: ' + args.join(', ')
);
const inspect = before(log);
const loggingCreatePerson = inspect(createPerson);
loggingCreatePerson('John', 'Doe');

Ingredients

arrow functions
closures
partial application

Directions

Given: the inspect() function from yesterday’s recipe.

const inspect = fn => function (...args) {
  console.log(fn.name + ' called with args: ' + args.join(', '));
  return fn.apply(this, args);
};

We will now change this function step by step to a generic function.

Change the name of the function to before() and change it in a way that it takes a parameter inspect and returns a function (basically you only need to change the part const inspect = fn to const before = inspect => fn) …
```
const before = inspect => fn => function (...args) {
  console.log(fn.name + ' called with args: ' + args.join(', '));
  return fn.apply(this, args);
};
```

… and rename the parameter from inspect to decorator. We will call this function decorator function and this will be the generic way of decorating any function.

const before = decorator => fn => function (...args) {
  console.log(fn.name + ' called with args: ' + args.join(', '));
  return fn.apply(this, args);
};

Inside the returned function now call the decorator function passing the function to decorate and the arguments:

const before = decorator => fn => function (...args) {
  decorator(fn, args);
  return fn.apply(this, args);
};

Voilá, now we have a generic function before() that accepts a decorator function and returns another function that accepts the function to decorate.

For example this code here …

const before = decorator => fn => function (...args) {
  decorator(fn, args);
  return fn.apply(this, args);
};

const log = (fn, ...args) => console.log(
  fn.name + ' called with args: ' + args.join(', ')
);
const inspect = before(log);

function createPerson(firstName, lastName) {
  return {
    firstName: firstName,
    lastName: lastName
  }
}
const loggingCreatePerson = inspect(createPerson);
loggingCreatePerson('John', 'Doe');

… produces the known output:

createPerson called with args: John, Doe

Notes

Instead of creating a function inspect() you can do it like this as well:
```
const loggingCreatePerson = before(log)(createPerson);
```

And with the help of before() you now can easily create different decorator functions:

const before = decorator => fn => function (...args) {
  decorator(fn, args);
  return fn.apply(this, args);
};

const log = (fn, ...args) => console.log(
    fn.name + ' called with args: ' + args.join(', ')
  );
const logTime = (fn, ...args) =>
  console.log(fn.name + ' called at ' + new Date());
const inspect = before(log);
const inspectTime = before(logTime);

function createPerson(firstName, lastName) {
  return {
    firstName: firstName,
    lastName: lastName
  }
}
const loggingCreatePerson = inspect(createPerson);
loggingCreatePerson('John', 'Doe');
// createPerson called with args: John, Doe
const loggingTimeCreatePerson = inspectTime(createPerson);
loggingTimeCreatePerson('John', 'Doe');
// createPerson called at Wed Jul 20 2016 20:00:00 GMT+0200 (CEST)

Alternative recipes

Use class decorators, which will be probably be part of a later version of ECMAScript.

Create a function for inspecting function calls

Tue, 19 Jul 2016 08:00:00 GMT

Problem

You want to create a generic function for inspecting function calls, so that each time the inspected function is called its name and its arguments are printed to the console.

function createPerson(firstName, lastName) {
  return {
    firstName: firstName,
    lastName: lastName
  }
}
const loggingCreatePerson = inspect(createPerson);
loggingCreatePerson('John', 'Doe');

Ingredients

rest parameters
the apply() method
arrow functions

Directions

Create a function inspect() that accepts a function (we call this one inspected function) and returns another function. Note: the returned function will be no arrow function but a “normal” function, because then we have access to the execution context (via the this keyword).
```
const inspect = fn => function (...args) {};
```
Inside the returned function call the inspected function using the apply() method and pass the execution context and the arguments.
```
const inspect = fn => function (...args) {
  return fn.apply(this, args);
};
```

Now before the call of the inspected function add a console output printing the name (fn.name) and the arguments (args) of the inspected function.

const inspect = fn => function (...args) {
  console.log(fn.name + ' called with args: ' + args.join(', '));
  return fn.apply(this, args);
};

Voilá, now we have a function to inspect other functions. For example this code here …

const inspect = fn => function (...args) {
  console.log(fn.name + ' called with args: ' + args.join(', '));
  return fn.apply(this, args);
};

function createPerson(firstName, lastName) {
  return {
    firstName: firstName,
    lastName: lastName
  }
}

const loggingCreatePerson = inspect(createPerson)
loggingCreatePerson('John', 'Doe');

… generates this output:

createPerson called with args: John, Doe

Notes

In tomorrow’s recipe we will see how to improve the inspect() function by using a more generic approach.

If you don’t need access to the execution context, you can also use an arrow function for the returned function:

const inspect = fn => (...args) => {
  console.log(fn.name + ' called with args: ' + args.join(', '));
  return fn.apply(this, args);
};

Alternative recipes

Use the inspect() function of the Command Line API, available for example in Chrome, Safari and Firefox.

Create an HTML list based on an array using template strings - part 2

Mon, 18 Jul 2016 08:00:00 GMT

Problem

In yesterday’s recipe we saw how to use template strings to generate an HTML list based on an array of objects:

let persons = [
  {
    firstName: 'John',
    lastName: 'Doe',
    address: {
      city: 'London'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Doe',
    address: {
      city: 'Birmingham'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Smith',
    address: {
      city: 'Birmingham'
    }
  },
  {
    firstName: 'Dave',
    lastName: 'Smith',
    address: {
     city: 'London'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Carpenter',
    address: {
      city: 'Birmingham'
    }
  }
]
const htmlListItem = object => `\n  <li>${object.firstName + object.lastName}</li>`
const htmlList = array => `<ul>${array.map(htmlListItem).join('')}\n</ul>`
console.log(htmlList(persons))

However our solution had one limitation: it only works for those objects that have firstName and lastName properties but it doesn’t work for other objects. For example the following code …

let cities = [
  {
    name: 'Ney York'
  },
  {
    name: 'Miami'
  },
  {
    name: 'San Francisco'
  },
  {
    name: 'Chicago'
  },
  {
    name: 'Seattle'
  }
]
const htmlListItem = object => `\n  <li>${object.firstName + object.lastName}</li>`
const htmlList = array => `<ul>${array.map(htmlListItem).join('')}\n</ul>`
console.log(htmlList(cities))

… generates this HTML code:

<ul>
  <li>NaN</li>
  <li>NaN</li>
  <li>NaN</li>
  <li>NaN</li>
  <li>NaN</li>
</ul>

So what we really want is a generic function listItem() that works with every type of object. Fortunately this is relatively easy as we see in today’s recipe.

Ingredients

the htmlList() function from yesterday’s recipe
the htmlListItem() function from yesterday’s recipe
closures
partial application

Directions

Given: the two functions htmlList() and htmlListItem() from yesterday’s recipe:
```
const htmlListItem = object => `
  <li>${object.firstName + object.lastName}</li>`
const htmlList = array => `<ul>${array.map(htmlListItem).join('')}
</ul>`
```
The idea now is that we change htmlList() and htmlListItem() to accept a function as parameter which determines the value (based on the particular object) that should be used for the list item (we call this function value function). Both htmlList() and htmlListItem() will then return functions and close in the value function.

Change htmlListItem() to accept a function (the value function) and return another function (this is where the closure comes in) …

const htmlListItem = fn => object => `
  <li>${object.firstName + object.lastName}</li>`
const htmlList = array => `<ul>${array.map(htmlListItem).join('')}
</ul>`

… and inside the returned function call the value function with the particular object as argument.

const htmlListItem = fn => object => `
  <li>${fn(object)}</li>`
const htmlList = array => `<ul>${array.map(htmlListItem).join('')}
</ul>`

Change htmlList() as well so that it accepts a value function and returns another function (again, this creates a closure) …

const htmlListItem = fn => object => `
  <li>${fn(object)}</li>`
const htmlList = fn => array => `<ul>${array.map(htmlListItem).join('')}
</ul>`

… and inside the returned function call htmlListItem() with the value function as argument.

const htmlListItem = fn => object => `
  <li>${fn(object)}</li>`
const htmlList = fn => array => `<ul>${array.map(htmlListItem(fn)).join('')}
</ul>`

Voilá, now you can use the htmlList() to produce the HTML list code for any type of objects by simply passing a value function that determines the value used for the label of the list item:

For example this code here …

console.log(htmlList(object => object.name)(cities))

… produces this HTML code …

<ul>
  <li>Ney York</li>
  <li>Miami</li>
  <li>San Francisco</li>
  <li>Chicago</li>
  <li>Seattle</li>
</ul>

… while this code here …

console.log(htmlList(object => object.firstName + ' ' + object.lastName)(persons))

… produces this HTML code:

<ul>
  <li>John Doe</li>
  <li>Jane Doe</li>
  <li>Jane Smith</li>
  <li>Dave Smith</li>
  <li>Jane Carpenter</li>
</ul>

Notes

You can also use partial application to create partial applied versions of htmlList(), i.e., functions where the value function is closed in.

const htmlListForCities =
  htmlList(object => object.name)
const htmlListForPersons =
  htmlList(object => object.firstName + ' ' + object.lastName)

console.log(htmlListForCities(cities))
console.log(htmlListForPersons(persons))

Alternative recipes

Use a template engine like EJS or Jade.
Another alternative is to use yesterday’s recipe and introduce a common method in all objects, e.g., toString() or getListLabel().

However this approach has two disadvantages: first you cannot use object literal notation for creating the objects without defining the method over and over again in every object. That means you would need to use some sort of inheritance, which is not bad, but it adds complexity to your object model.

The second disadvantage is that the logic of how an object is displayed in the generated list is tightly coupled to the object. If you want to change the value, you always need to change the object model. With the technique shown in today’s recipe we decoupled the logic from the object model (inside the value function).

Finally, an advantage of today’s recipe is that you can easily create different value functions for one and the same object model. For example, you could create two value functions, one just displaying the first name, one just displaying the last name of a person:
```
const htmlListFirstName = htmlList(object => object.firstName)
const htmlListLastName = htmlList(object => object.lastName)
```
With yesterday’s recipe this is not that easy.

Create an HTML list based on an array using template strings - part 1

Sun, 17 Jul 2016 08:00:00 GMT

Problem

You want to create an HTML list based on an array of objects.

Ingredients

template strings
the map() method

Directions

Given: an array of objects …

const persons = [
  {
    firstName: 'John',
    lastName: 'Doe'
  },
  {
    firstName: 'Jane',
    lastName: 'Doe'
  },
  {
    firstName: 'Jane',
    lastName: 'Smith'
  },
  {
    firstName: 'Dave',
    lastName: 'Smith'
  },
  {
    firstName: 'Jane',
    lastName: 'Carpenter'
  }
]

… and you want to create a function htmlList() that takes this array …

let result = htmlList(person);

… and creates the following HTML code:

<ul>
  <li>John Doe</li>
  <li>Jane Doe</li>
  <li>Jane Smith</li>
  <li>Dave Smith</li>
  <li>Jane Carpenter</li>
</ul>

Create a function htmlList() that accepts an array and returns a template string.
```
const htmlList = array => ``
```
Add the HTML code for the list to the template string.
```
const htmlList = array => `<ul></ul>`
```
Add an embedded expression between the <ul> and </ul> tags.
```
const htmlList = array => `<ul>${}</ul>`
```
Now create another function htmlListItem() that accepts an object and returns a template string containing the code for one single list item (using an embedded expression and returning the concatenation of firstName and lastName).
```
const htmlListItem = object => `<li>${object.firstName + object.lastName}</li>`
const htmlList = array => `<ul>${}</ul>`
```

Now inside the embedded expression in the htmlList() function call the map() method on the array and pass the htmlListItem() function.

const htmlListItem = object => `<li>${object.firstName + object.lastName}</li>`
const htmlList = array => `<ul>${array.map(htmlListItem)}</ul>`

Finally join the result of the map() function using the join() method …

const htmlListItem = object => `<li>${object.firstName + object.lastName}</li>`
const htmlList = array => `<ul>${array.map(htmlListItem).join('')}</ul>`

And adjust the formatting of the output:

const htmlListItem = object => `
  <li>${object.firstName + object.lastName}</li>`
const htmlList = array => `<ul>${array.map(htmlListItem).join('')}
</ul>`

Alternatively you use \n and \t to format the output:

const htmlListItem = object => `\n  <li>${object.firstName + object.lastName}</li>`
const htmlList = array => `<ul>${array.map(htmlListItem).join('')}\n</ul>`

Voilá, a delicious function that creates an HTML list based on an object array:

```javascript
console.log(htmlList(persons))
```

And the generated HTML code looks like this:

```html
<ul>
  <li>JohnDoe</li>
  <li>JaneDoe</li>
  <li>JaneSmith</li>
  <li>DaveSmith</li>
  <li>JaneCarpenter</li>
</ul>
```

Notes

One limitation of the code shown is that it only works for arrays of person objects, i.e., for arrays of objects that have the properties firstName and lastName, because htmlListItem() depends on those properties.

In tomorrow’s recipe we will see how to remove this coupling and adjust both the htmlList() and the htmlListItem() function to work with any type of objects.

Alternative recipes

Use a template engine like EJS or Jade.

Group objects by direct property or by nested property

Sat, 16 Jul 2016 08:00:00 GMT

Problem

You have an array of objects and want to group them either by a direct property or by a nested property (i.e., a combination of recipe 21 and recipe 22).

Ingredients

the reduce() method
the groupBy() function from recipe 21
the groupBy() function from recipe 22

Directions

Given: the groupBy() function that takes a property name as parameter (based on recipe 21, but renamed to groupByPropertyName()) …

const groupByPropertyName = (array, property) =>
   array.reduce((grouped, object) => {
     let value = object[property];
     grouped[value] = grouped[value] || [];
     grouped[value].push(object);
     return grouped;
   }, {});

… and the groupBy() function that takes a function as parameter (based on recipe 22, but renamed to groupByFunction()).

const groupByFunction = (array, fn) =>
  array.reduce((grouped, object) => {
    let value = fn(object);
    grouped[value] = grouped[value] || [];
    grouped[value].push(object);
    return grouped;
  }, {});

The second variant (groupByFunction()) is of course more powerful, since you can group objects by any criterion, e.g., a direct property or a nested property:

let persons = [
  {
    firstName: 'John',
    lastName: 'Doe',
    address: {
      city: 'London'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Doe',
    address: {
      city: 'Birmingham'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Smith',
    address: {
      city: 'Birmingham'
    }
  },
  {
    firstName: 'Dave',
    lastName: 'Smith',
    address: {
     city: 'London'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Carpenter',
    address: {
      city: 'Birmingham'
    }
  }
]
let groupedByFirstName = groupByFunction(persons, person => person.firstName);
let groupedByCity = groupByFunction(persons, person => person.address.city);

However it would be nice if in case of a direct property we simply could pass the name of that property instead of a function (so that we again have just one function named groupBy()).
```
let groupedByFirstName = groupBy(array, 'firstName');
let groupedByCity = groupBy(persons, person => person.address.city);
```
For allowing this we simply can combine the two functions groupByPropertyName() and groupByFunction(). The plan: check if the parameter is a string (i.e., a property name) or if it is a function and apply the appropriate logic.
The first thing is to define two functions isString() and isFunction() plus another helper function isOfType(), so that we can check the types.
```
const isOfType = type => x => Object.prototype.toString.call(x) === type
const isString = x => isOfType('[object String]')(x)
const isFunction = x => isOfType('[object Function]')(x)
```
Note: the best and most effective way of checking the type of something is not the typeof operator, but the usage of the Object.prototype.toString method as shown in the listing above. The detailed reason for this will be explained in a later recipe, when we handle type checking in JavaScript, but for the moment you can remember: the typeof-operator is not that precise.

Now we change the groupBy() function to check the parameter with the help of the type-checking functions just created. If the parameter is a string, get the property of the particular object with that name …

const groupBy = (array, x) =>
  array.reduce((grouped, object) => {
    let value = '';
    if(isString(x)) {
      value = object[x];
    }
    ...
    grouped[value] = grouped[value] || [];
    grouped[value].push(object);
    return grouped;
  }, {});

… else if it is a function, call that function passing the particular object …

const groupBy = (array, x) =>
  array.reduce((grouped, object) => {
    let value = '';
    if(isString(x)) {
      value = object[x];
    } else if(isFunction(x)) {
      value = x(object);
    }
    ...
    grouped[value] = grouped[value] || [];
    grouped[value].push(object);
    return grouped;
  }, {});

… and in case nothing of that is true throw a type error.

const groupBy = (array, x) =>
  array.reduce((grouped, object) => {
    let value = '';
    if(isString(x)) {
      value = object[x];
    } else if(isFunction(x)) {
      value = x(object);
    } else {
      throw new TypeError('String or function expected');
    }
    grouped[value] = grouped[value] || [];
    grouped[value].push(object);
    return grouped;
  }, {});

Voilá, now we have a function that is able to group objects either by a property name or by a function.

const isOfType = type => x => Object.prototype.toString.call(x) === type
const isString = x => isOfType('[object String]')(x)
const isFunction = x => isOfType('[object Function]')(x)
const groupBy = (array, x) =>
  array.reduce((grouped, object) => {
    let value = '';
    if(isString(x)) {
      value = object[x];
    } else if(isFunction(x)) {
      value = x(object);
    } else {
      throw new TypeError('String or function expected');
    }
    grouped[value] = grouped[value] || [];
    grouped[value].push(object);
    return grouped;
  }, {});
  let groupedByFirstName = groupBy(persons, 'firstName');
  let groupedByCity = groupBy(persons, person => person.address.city);

Notes

Type checking is a complex topic in JavaScript. We will discuss this in another recipe.

Group objects by a nested property

Fri, 15 Jul 2016 08:00:00 GMT

Problem

You have an array of objects and want to group them by a nested property.

Ingredients

the reduce() method

Directions

Given: an array of objects (e.g., persons) with nested properties (e.g., address.city) …

let persons = [
  {
    firstName: 'John',
    lastName: 'Doe',
    address: {
      city: 'London'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Doe',
    address: {
      city: 'Birmingham'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Smith',
    address: {
      city: 'Birmingham'
    }
  },
  {
    firstName: 'Dave',
    lastName: 'Smith',
    address: {
     city: 'London'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Carpenter',
    address: {
      city: 'Birmingham'
    }
  }
]

… and our implementation of the groupBy() function from yesterday’s recipe.

const groupBy = (array, property) =>
  array.reduce((grouped, object) => {
    let value = object[property];
    grouped[value] = grouped[value] || [];
    grouped[value].push(object);
    return grouped;
  }, {});

Change that function to accept a function (fn) as second parameter instead of a property name …

const groupBy = (array, fn) =>              // This line changed.
  array.reduce((grouped, object) => {
    ...
  }, {});

… and inside the callback of reduce() determine the value for the group by calling this function with the particular object.

const groupBy = (array, fn) =>
  array.reduce((grouped, object) => {
    let value = fn(object);                 // This line changed.
    grouped[value] = grouped[value] || [];
    grouped[value].push(object);
    return grouped;
  }, {});

Voilá, now you can use the groupBy() function to group objects by a nested property. For example to group by the property city of the address property you would simply pass the function person => person.address.city as parameter:

const groupBy = (array, fn) =>
  array.reduce((grouped, object) => {
    let value = fn(object);
    grouped[value] = grouped[value] || [];
    grouped[value].push(object);
    return grouped;
  }, {});
let persons = [
  {
    firstName: 'John',
    lastName: 'Doe',
    address: {
      city: 'London'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Doe',
    address: {
      city: 'Birmingham'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Smith',
    address: {
      city: 'Birmingham'
    }
  },
  {
    firstName: 'Dave',
    lastName: 'Smith',
    address: {
     city: 'London'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Carpenter',
    address: {
      city: 'Birmingham'
    }
  }
]
let groupedByCity = groupBy(persons, person => person.address.city);
console.log(groupedByCity);
/* looks like this:
{
  "London": [
    {
      "firstName": "John",
      "lastName": "Doe",
      "address": {
        "city": "London"
      }
    },
    {
      "firstName": "Dave",
      "lastName": "Smith",
      "address": {
        "city": "London"
      }
    }
  ],
  "Birmingham": [
    {
      "firstName": "Jane",
      "lastName": "Doe",
      "address": {
        "city": "Birmingham"
      }
    },
    {
      "firstName": "Jane",
      "lastName": "Smith",
      "address": {
        "city": "Birmingham"
      }
    },
    {
      "firstName": "Jane",
      "lastName": "Carpenter",
      "address": {
        "city": "Birmingham"
      }
    }
  ]
}
*/

Notes

The groupBy() function shown in this recipe only accepts functions. The groupBy() function from yesterday’s recipe only accepts property names and only works for direct properties, not for nested properties. In tomorrow’s recipe we will see how we can combine the functions from both recipes into one function that can do both.

Group objects by property

Thu, 14 Jul 2016 08:00:00 GMT

Problem

You have an array of objects and want to group them by a certain property.

Ingredients

the reduce() method

Directions

Given: an array of objects (e.g., persons) …

let persons = [
  {
    firstName: 'John',
    lastName: 'Doe'
  },
  {
    firstName: 'Jane',
    lastName: 'Doe'
  },
  {
    firstName: 'Jane',
    lastName: 'Smith'
  },
  {
    firstName: 'Dave',
    lastName: 'Smith'
  },
  {
    firstName: 'Jane',
    lastName: 'Carpenter'
  }
]

… and you want to group those objects by a property (e.g., by firstName).

let groupedByFirstName = groupBy(persons, 'firstName');
console.log(groupedByFirstName);
// should look like this:
/*
{
  "John": [
    {
      "firstName": "John",
      "lastName": "Doe"
    }
  ],
  "Jane": [
    {
      "firstName": "Jane",
      "lastName": "Doe"
    },
    {
      "firstName": "Jane",
      "lastName": "Smith"
    },
    {
      "firstName": "Jane",
      "lastName": "Carpenter"
    }
  ],
  "Dave": [
    {
      "firstName": "Dave",
      "lastName": "Smith"
    }
  ]
}
*/

Create a function named groupBy() that accepts an array and the name of a property (we will use the arrow function style for defining that function).
```
const groupBy = (array, property) => {}
```
Call the reduce() method on the array of objects and pass in an empty object as second parameter ({}). This object will be the result object containing the grouped objects of the array.
```
const groupBy = (array, property) =>
  array.reduce((grouped, object) => {
    ...
  }, {});
```

In the callback function of the reduce() method for every object get the value of the given property.

const groupBy = (array, property) =>
  array.reduce((grouped, object) => {
    let value = object[property];
    ...
  }, {});

Initialize the array for that value in the result object (grouped) if it wasn’t initialized yet …

const groupBy = (array, property) =>
  array.reduce((grouped, object) => {
    let value = object[property];
    if(!grouped[value]) {
      grouped[value] = [];
    }
    ...
  }, {});

… which can also be written like this:

const groupBy = (array, property) =>
  array.reduce((grouped, object) => {
    let value = object[property];
    grouped[value] = grouped[value] || [];
    ...
  }, {});

Push the current object to that array.

const groupBy = (array, property) =>
  array.reduce((grouped, object) => {
    let value = object[property];
    grouped[value] = grouped[value] || [];
    grouped[value].push(object);
    ...
  }, {});

… and return the result object.

const groupBy = (array, property) =>
  array.reduce((grouped, object) => {
    let value = object[property];
    grouped[value] = grouped[value] || [];
    grouped[value].push(object);
    return grouped;
  }, {});

Voilá, a tasteful helper function for grouping objects by property.

const groupBy = (array, property) =>
  array.reduce((grouped, object) => {
    let value = object[property];
    grouped[value] = grouped[value] || [];
    grouped[value].push(object);
    return grouped;
  }, {});
let persons = [
  {
    firstName: 'John',
    lastName: 'Doe'
  },
  {
    firstName: 'Jane',
    lastName: 'Doe'
  },
  {
    firstName: 'Jane',
    lastName: 'Smith'
  },
  {
    firstName: 'Dave',
    lastName: 'Smith'
  },
  {
    firstName: 'Jane',
    lastName: 'Carpenter'
  }
]
let groupedByFirstName = groupBy(persons, 'firstName');
console.log(groupedByFirstName);
/* looks like this:
{
  "John": [
    {
      "firstName": "John",
      "lastName": "Doe"
    }
  ],
  "Jane": [
    {
      "firstName": "Jane",
      "lastName": "Doe"
    },
    {
      "firstName": "Jane",
      "lastName": "Smith"
    },
    {
      "firstName": "Jane",
      "lastName": "Carpenter"
    }
  ],
  "Dave": [
    {
      "firstName": "Dave",
      "lastName": "Smith"
    }
  ]
}
*/

Notes

The groupBy() function shown in this recipe only works for direct properties, not for nested properties. For example in the following code snippet you cannot group the person objects by city using the current implementation of groupBy().

let persons = [
  {
    firstName: 'John',
    lastName: 'Doe',
    address: {
      city: 'London'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Doe',
    address: {
      city: 'Birmingham'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Smith',
    address: {
      city: 'Birmingham'
    }
  },
  {
    firstName: 'Dave',
    lastName: 'Smith',
    address: {
     city: 'London'
    }
  },
  {
    firstName: 'Jane',
    lastName: 'Carpenter',
    address: {
      city: 'Birmingham'
    }
  }
]
// this won't work
let groupedByCity = groupBy(persons, 'address.city');
console.log(groupedByCity);

Alternative recipes

Tomorrow we will see how to further improve the groupBy() function, so that you can group objects by nested properties as well.

Create a generic function to promisify asynchronous functions

Wed, 13 Jul 2016 08:00:00 GMT

Problem

You want to create a generic function to promisify asynchronous functions.

Ingredients

closures
rest parameters
spread operator
promises
arrow functions

Directions

Given: an asynchronous function …

const add = (x, y, z, callback) => {
  setTimeout(() => {
    callback(    // Remember:
      null,      // First argument: the error
      x + y + z  // Second argument: the result
    );
  }, 5000);
}

… that we call like this …

add(2,3,4, (error, result) => {
  if(error) {
    console.error(error);
  } else {
    console.log(result));
  }
}

… but what we really want is this:

const promisifiedAdd = promisify(add);
promisifiedAdd(2,3,4)
  .then(result => console.log(result))
  .catch(error => console.error(error));

So let’s get started! First create a function promisify() that takes a function …
```
function promisify(fn) {
  ...
}
```

… and returns another function (that uses rest parameters).

function promisify(fn) {
  return function (...args) {
    ...
  }
}

Let this function return a Promise object.

function promisify(fn) {
  return function (...args) {
    return new Promise((resolve, reject) => {
      ...
    });
  }
}

And inside the callback of the Promise object, call the original function, passing the rest parameters to it (using the spread operator) and a callback function.

function promisify(fn) {
  return function (...args) {
    return new Promise((resolve, reject) => {
      fn(...args, (error, result) => {
        ...
      });
    });
  }
}

Inside the callback function of the Promise object check if there is an error. If so, then call the method reject() passing the object object as argument.

function promisify(fn) {
  return function (...args) {
    return new Promise((resolve, reject) => {
      fn(...args, (error, result) => {
        if(error) {
          return reject(error);
        }
      });
    });
  }
}

Otherwise call the method resolve() passing the result object as argument.

function promisify(fn) {
  return function (...args) {
    return new Promise((resolve, reject) => {
      fn(...args, (error, result) => {
        if(error) {
          return reject(error);
        } else {
          return resolve(result);
        }
      });
    });
  }
}

Optimization: combine the last two steps.

function promisify(fn) {
  return function (...args) {
    return new Promise((resolve, reject) => {
      fn(...args, (error, result) => {
        return error ? reject(error) : resolve(result);
      });
    });
  }
}

Optimization: replace function-style functions by arrow functions.

const promisify = (fn) => {
  return (...args) => {
    return new Promise((resolve, reject) => {
      fn(...args, (error, result) => {
        return error ? reject(error) : resolve(result);
      });
    });
  }
}

Optimization: replace the return keywords and the brackets where possible.

const promisify = fn =>                         // take the original function
  (...args) =>                                  // return another function
  new Promise((resolve, reject) =>              // that returns a promise
  fn(...args, (error, result) =>                // which calls the original
  error ? reject(error) : resolve(result)));    // and handles the results

Voilá, a perfect generic function for converting asynchronous functions to promises.

const promisify = fn =>
  (...args) =>
  new Promise((resolve, reject) =>
  fn(...args, (error, result) =>
  error ? reject(error) : resolve(result)));

const add = (x, y, z, callback) => {
  setTimeout(() => {
    callback(null, x + y + z);
  }, 5000);
}

const promisifiedAdd = promisify(add);
promisifiedAdd(2,3,4)
  .then(result => console.log(result))
  .catch(error => console.error(error));

Notes

Only works for functions where the last parameter is the callback.
Doesn’t check if the passed argument is a function.
Doesn’t check if the passed argument is a promise.
In the shown variant it only works if the promisified function does not need access to the execution context via this.

Alternative recipes

Use a promisify library.
Directly write all your code using promises.

Create a generic function to convert array-like objects into arrays

Tue, 12 Jul 2016 08:00:00 GMT

Problem

You want to create a generic function to convert array-like objects into arrays (see also recipe 2).

Array-like objects: An array-like object is an object, which behaves like an array, but which isn't one. Array-like objects have a property length and elements can be accessed using indexes, but they typically don't have methods like forEach() etc. Two popular examples for array-like objects are instances of NodeList and the arguments object.

Ingredients

the Array prototype
the slice() method
the call() method
the typeof operator

Directions

Given: an array-like object that should be converted.

function someFunction() {
  var arrayLike = arguments;           // An Array-like object
  var array = toArray(arrayLike);      // Our goal: convert it to an array ...
  array.forEach(function(argument) {   // ... so that we can apply array methods.
    console.log(argument);
  });
}
someFunction(2,3,4,5,6,7);

Create a function toArray() that accepts an object.
```
function toArray(object) {
}
```
Now we need to check if the object is array-like. For that get the length property of the object …
```
function toArray(object) {
  var length = object.length;
}
```

… and check if the value associated with the length property is a number and not less than 0.

function toArray(object) {
  var length = object.length;
  var isArrayLike = typeof length == 'number' && length >= 0;
}

Optionally, but recommended: extract this code into a separate function isArrayLike().

function isArrayLike(object) {
  var length = object.length;
  return typeof length == 'number' && length >= 0;
}
function toArray(object) {
  if(isArrayLike(object)) {
    ...
  }
}

Back in the toArray() method: borrow the slice() method to convert the object into an array.

function isArrayLike(object) {
  var length = object.length;
  return typeof length == 'number' && length >= 0;
}
function toArray(object) {
  if(isArrayLike(object)) {
    return Array.prototype.slice.call(object);
  }
}

Before checking if the object is array-like it makes sense to check if the object is already an array (using Array.isArray()).

function isArrayLike(object) {
  var length = object.length;
  return typeof length == 'number' && length >= 0;
}
function toArray(object) {
  if(Array.isArray(object)) {
    return object;
  } else if(isArrayLike(object)) {
    return Array.prototype.slice.call(object);
  }
}

If the object is neither an array nor array-like: throw an error.

function isArrayLike(object) {
  var length = object.length;
  return typeof length == 'number' && length >= 0;
}
function toArray(object) {
  if(Array.isArray(object)) {
    return object;
  } else if(isArrayLike(object)) {
    return Array.prototype.slice.call(object);
  } else {
    throw new TypeError('Argument could not be converted.');
  }
}

Voilá, a tasteful helper function for converting array-like objects into arrays (and one for testing if an object is array-like).

function isArrayLike(object) {
  var length = object.length;
  return typeof length == 'number' && length >= 0;
}
function toArray(object) {
  if(Array.isArray(object)) {
    return object;
  } else if(isArrayLike(object)) {
    return Array.prototype.slice.call(object);
  } else {
    throw new TypeError('Argument could not be converted.');
  }
}
function someFunction() {
  var arrayLike = arguments;           // Array-like object
  var array = toArray(arrayLike);      // Convert to array
  array.forEach(function(argument) {   // Apply array method
    console.log(argument);
  });
}
someFunction(2,3,4,5,6,7);

Alternative recipes

Instead of using the arguments object use rest parameters (see also recipe 2).

Create a generic function to create functions that can be called at most n times

Mon, 11 Jul 2016 08:00:00 GMT

Problem

You want to create a generic function that converts a function to a function that can be called at most n times.

Ingredients

a closure
the apply method

Directions

Given: a function that executes only once (based on recipe 14) and another function (printSomething()) that should be converted.

const once = (fn) => {
  let called = false;
  return function() {
    return called ? void 0 : ((called = true), fn.apply(this, arguments));
  }
}
function printSomething() {
  console.log('something');
}
const printSomethingMaxFive = max(printSomething, 5);
printSomethingMaxFive();  // Should print "something"
printSomethingMaxFive();  // Should print "something"
printSomethingMaxFive();  // Should print "something"
printSomethingMaxFive();  // Should print "something"
printSomethingMaxFive();  // Should print "something"
printSomethingMaxFive();  // Should do nothing

Add a parameter (max) that contain the maximum number of times the function should be called (and rename the function to max()).

const max = (fn, max) => {
  let called = true;
  return function() {
    return called ? void 0 : ((called = true), fn.apply(this, arguments));
  }
}

Change the called variable to contain a number.

const max = (fn, max) => {
  let called = 0;
  return function() {
    return called ? void 0 : ((called = true), fn.apply(this, arguments));
  }
}

Inside the closure check if called is greater than max.

const max = (fn, max) => {
  let called = 0;
  return function() {
    return called >= max ? void 0 : ((called = true), fn.apply(this, arguments));
  }
}

Inside the closure (i.e., when the function is called) increase the called variable.

const max = (fn, max) => {
  let called = 0;
  return function() {
    return called >= max ? void 0 : ((called++), fn.apply(this, arguments));
  }
}

Voilá, now if printSomethingMaxFive() is called more than 5 times, it simply does nothing.

const max = (fn, max) => {
  let called = 0;
  return function() {
    return called >= max ? void 0 : ((called++), fn.apply(this, arguments));
  }
}
function printSomething() {
  console.log('something');
}
const printSomethingMaxFive = max(printSomething, 5);
printSomethingMaxFive();  // Should print "something"
printSomethingMaxFive();  // Should print "something"
printSomethingMaxFive();  // Should print "something"
printSomethingMaxFive();  // Should print "something"
printSomethingMaxFive();  // Should print "something"
printSomethingMaxFive();  // Should do nothing

Variants

If you don’t need the context when the function is executed, you can also (1) use arrow functions, (2) call the given function directly, (3) use rest parameters and (4) omit the return keyword from the closure.
```
const max = (fn, max) => {
  let called = 0;
  return (...args) => {
    called >= max ? void 0 : ((called++), fn(...args));
  }
}
```

Alternative recipes

Use a self-defining function.

Create a generic function for partial application from the right

Sun, 10 Jul 2016 08:00:00 GMT

Problem

You want to create a generic function, that produces for a given function the partial applied function, applying parameters from the right.

Ingredients

2 functions
the apply method
the slice method

Directions

Given: a generic function for partial application (see recipe 9) …

function partial(fn /*, args...*/) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    return fn.apply(this, args.concat(Array.prototype.slice.call(arguments, 0)));
  };
}

… which could also be written like this:

function partial(fn /*, args...*/) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    var argsInner = Array.prototype.slice.call(arguments, 0);
    var argsAll = args.concat(argsInner);
    return fn.apply(this, argsAll);
  };
}

To apply parameters from the right you only need to change the order how the argsInner and argsAll arrays are concatenated.

function partial(fn /*, args...*/) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    var argsInner = Array.prototype.slice.call(arguments, 0);
    var argsAll = argsInner.concat(args);
    return fn.apply(this, argsAll);
  };
}

Optional: write this again as an one-liner:

function partial(fn /*, args...*/) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    return fn.apply(this, Array.prototype.slice.call(arguments, 0).concat(args));
  };
}

Voilá, a perfect … oh, wait, you might want to rename the function to partialRight().

function partialRight(fn /*, args...*/) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    return fn.apply(this, Array.prototype.slice.call(arguments, 0).concat(args));
  };
}

Voilá, a perfect generic function that creates partial applicable functions starting from the right.

function createPerson(firstName, lastName) {
  return {
   firstName: firstName,
   lastName: lastName
  }
}
var createPersonWithLastNameDoe = partialRight(createPerson, 'Doe');
var johnDoe = createPersonWithLastNameDoe('John');
console.log(johnDoe.firstName);  // "John"
console.log(johnDoe.lastName);   // "Doe"

Alternative recipes

Since ES2015: use rest parameters as shown in recipe 15.

const partial = (fn, ...args) => (...argsInner) => fn(...args, ...argsInner);
const partialRight = (fn, ...args) => (...argsInner) => fn(...argsInner, ...args);

Remove duplicates from arrays

Sat, 09 Jul 2016 08:00:00 GMT

Problem

You want to remove duplicates from arrays.

Ingredients

two for loops
the concat method
the splice method

Directions

Given: an array with duplicate values.

let array = ['John', 'James', 'John', 'Jane', 'John'];
let result = removeDuplicates(array);
console.log(result);
// expected content of array3: ['John', 'James', 'Jane']

Create the removeDuplicates function and inside create a copy of the array parameter (e.g., by using the concat() method).
```
function removeDuplicates(array) {
  let result = array.concat();
  ...
  return result;
}
```

Iterate over each element in the copy.

function removeDuplicates(array) {
  let result = array.concat();
  for(let i=0; i<result.length; ++i) {
    ...
  }
  return result;
}

For each element iterate over all the other elements.

function removeDuplicates(array) {
  let result = array.concat();
  for(let i=0; i<result.length; ++i) {
    for(let j=i+1; j<result.length; ++j) {
      ...
    }
  }
  return result;
}

Compare the element with each other element.

function removeDuplicates(array) {
  let result = array.concat();
  for(let i=0; i<result.length; ++i) {
    for(let j=i+1; j<result.length; ++j) {
      if(result[i] === result[j]) {
        ...
      }
    }
  }
  return result;
}

If both elements are equal (===) then delete the duplicate using the splice() method.

function removeDuplicates(array) {
  let result = array.concat();
  for(let i=0; i<result.length; ++i) {
    for(let j=i+1; j<result.length; ++j) {
      if(result[i] === result[j]) {
        result.splice(j--, 1);
      }
    }
  }
  return result;
}

Voilá, there you got a function which removes duplicates from an array.

let array = ['John', 'James', 'John', 'Jane', 'John'];
let result = removeDuplicates(array);
console.log(result); // ['John', 'James', 'Jane']

Notes

This recipe only works for strict equality (===), not for logical equality (e.g., it doesn’t work for different objects containing the same information).
This recipe has O(n²) runtime.

Alternative recipes

Since ES2015: use the Set datatype which doesn’t allow duplicates by default.

function removeDuplicates(...array) {
  return [...new Set([].concat(...array))];
}

Create a generic function for partial application using arrow functions

Fri, 08 Jul 2016 08:00:00 GMT

Problem

You want to create a generic function (using ES2015 code) that produces for a given function the partial applied function.

Ingredients

1 function
2 fat arrow functions
rest parameters
spread operator

Directions

Given: a generic function for creating partial functions (see recipe 9).

function partial(fn /*, args...*/) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    return fn.apply(this, args.concat(slice.call(arguments, 0)));
  };
}

Use rest parameters to avoid arguments to array conversion.

function partial(fn, ...args) {
  return function(...argsInner) {
    return fn.apply(this, args.concat(argsInner));
  };
}

Replace the inner function with a fat arrow function.

function partial(fn, ...args) {
  return (...argsInner) => {
    return fn.apply(this, args.concat(argsInner));
  };
}

Call the passed function fn directly.

```javascript
function partial(fn, ...args) {
  return (...argsInner) => {
    return fn.apply(this, args.concat(argsInner));
  };
}
```

Use the spread operator in favour of the array concatenation.

```javascript
function partial(fn, ...args) {
  return (...argsInner) => {
    return fn(...args, ...argsInner);
  };
}
```

… and remove the return from the inner function.

```javascript
function partial(fn, ...args) {
  return (...argsInner) => fn(...args, ...argsInner);
}
```

Make the outer function a fat arrow function as well.

const partial = (fn, ...args) => (...argsInner) => fn(...args, ...argsInner);

Voilá, there you got a delicious generic function that creates partial applicable functions.

const partial = (fn, ...args) => (...argsInner) => fn(...args, ...argsInner);
function createPerson(firstName, lastName) {
  return {
   firstName: firstName,
   lastName: lastName
  }
}
let createPersonWithFirstNameJohn = partial(createPerson, 'John');
let johnDoe = createPersonWithFirstNameJohn('Doe');
console.log(johnDoe.firstName);  // "John"
console.log(johnDoe.lastName);   // "Doe"

// And another example:
const sum = (x, y, z) => x + y + z;
const add5 = partial(sum, 5);
const add5and6 = partial(sum, 5, 6);
console.log(add5(6,7));     // 18
console.log(add5and6(7));   // 18

Notes

Of course, if you need the runtime context of the function that is created, you cannot use fat arrow functions.

For example in the following code an object personFactory was created, which now contains the createPerson() function as object method. Inside createPerson() we access the defaultAge member via the keyword this, which at this moment refers to the global object (e.g., the window object in a browser based runtime environment).

Therefore, when setting this.defaultAge as a value to the (new) property age of the object created in createPerson(), it gets the value undefined (or in case the global object has a property defaultValue it gets that value).

Bottom line: in every case where you need to have access to the current context at runtime, don’t use fat arrow functions for partial applications (but anyway: in real functional programming functions should not access the context at all).
```
const partial = (fn, ...args) => (...argsInner) => fn(...args, ...argsInner);
let personFactory = {
  defaultAge: 55,
  createPerson: function(firstName, lastName) {
    return {
     firstName: firstName,
     lastName: lastName,
     age: this.defaultAge
    }
  }
}
let createPersonWithFirstNameJohn = partial(personFactory.createPerson, 'John');
let johnDoe = createPersonWithFirstNameJohn('Doe');
console.log(johnDoe.firstName);  // "John"
console.log(johnDoe.lastName);   // "Doe"
console.log(johnDoe.age);        // undefined
```

Alternative recipes

In ES5: use normal functions, the apply method and the slice method

Create a generic function to create functions that can only be called once

Thu, 07 Jul 2016 08:00:00 GMT

Problem

You want to create a generic function that converts a function to a function that can only be called once.

Ingredients

a closure
the apply method

Directions

Given: a function that executes only once (based on yesterday’s recipe).

function printSomething() {
  let called = false;
  if(called) {
    return undefined;
  } else {
    called = true;
    console.log('something');
    printSomething = function() {};
  }
}
printSomething();        // (1) Ok
printSomething();        // (2) Does nothing

Create a function once() that accepts a function as parameter and returns another function.
```
function once(fn) {
  return function() {
    ...
  }
}
```

Add a variable to memorize if the function has been called.

function once(fn) {
  let called = false;
  return function() {
    ...
  }
}

Inside the returned function check that variable. If it is true, then return undefined …

function once(fn) {
  let called = false;
  return function() {
    if(called) {
      return undefined;
    }
    ...
  }
}

… otherwise set the variable to true and call the passed function.

function once(fn) {
  let called = false;
  return function() {
    if(called) {
      return undefined;
    } else {
      called = true;
      fn.apply(this, arguments);
    }
  }
}

Optimization: use void 0 instead of return undefined, which are less characters.

function once(fn) {
  let called = false;
  return function() {
    if(called) {
      void 0;
    } else {
      called = true;
      fn.apply(this, arguments);
    }
  }
}

Optimization: replace if and else with the ternary operator.

function once(fn) {
  let called = false;
  return function() {
    return called ? void 0 : ((called = true), fn.apply(this, arguments));
  }
}

Optimization: use a fat arrow function for once().

const once = (fn) => {
  let called = false;
  return function() {
    return called ? void 0 : ((called = true), fn.apply(this, arguments));
  }
}

Now remove all the boilerplate logic from printSomething() and use once() to create another function printSomethingOnce().
```
function printSomething() {
  console.log('something');
}
let printSomethingOnce = once(printSomething);
```
Voilá, now if printSomethingOnce() is called a second time, it simply does nothing.

```javascript
function printSomething() {
  console.log('something');
}
let printSomethingOnce = once(printSomething);
printSomethingOnce();        // (1) Ok
printSomethingOnce();        // (2) Does nothing
```

Alternative recipes

Use a self-defining function.

Create a function that only executes once

Wed, 06 Jul 2016 08:00:00 GMT

Problem

You want to be sure that the logic inside a function is executed only once.

Ingredients

a self-defining function

Directions

Given: a function that is called twice, but should not do anything the second time it is called.

function printSomething() {
  console.log('something');
}
printSomething();            // (1) Ok
printSomething();            // (2) Should not be allowed

Add a variable to memorize if the function has been called.

function printSomething() {
  let called = false;
  console.log('something');
}

If it is false, then return undefined.

function printSomething() {
  let called = false;
  if(called) {
    return undefined;
  }
  console.log('something');
}

… otherwise set the variable to true …

function printSomething() {
  let called = false;
  if(called) {
    return undefined;
  } else {
    called = true;
  }
}

… execute the remaining logic of the function …

function printSomething() {
  let called = false;
  if(called) {
    return undefined;
  } else {
    called = true;
    console.log('something');
  }
}

… and overwrite the function to do nothing.

function printSomething() {
  let called = false;
  if(called) {
    return undefined;
  } else {
    called = true;
    console.log('something');
    printSomething = function() {};
  }
}

Voilá, now if printSomething() is called a second time, it simply does nothing.

printSomething();        // (1) Ok
printSomething();        // (2) Does nothing

Notes

A function that overwrite itself is also called a self-defining function.

Alternative recipes

In tomorrow’s recipe we will see how to further improve the shown recipe.

Return after calling a callback

Tue, 05 Jul 2016 08:00:00 GMT

Problem

You want to be sure that a callback function is not accidentally called twice or more.

Ingredients

the return keyword

Directions

Given: a function that accepts a callback function and calls it in two different places.

function someFunction(callback) {
  let result = {};
  try {
    result = someOtherFunction();
  } catch(error) {
    callback(error, null);
  }
  callback(null, result);
}

Now assume that someOtherFunction() produces an error. What happens? The error is catched and callback(error, null) is executed. But additionally callback(null, result) is called as well. This is most likely not the intention.

function someFunction(callback) {
  let result = {};
  try {
    result = someOtherFunction();  // (1) Produces an error
  } catch(error) {
    callback(error, null);         // (2) Gets called
  }
  callback(null, result);          // (3) Gets called as well
}

Solution: add return after calling callbacks.

function someFunction(callback) {
  let result = {};
  try {
    result = someOtherFunction();  // (1) Produces an error
  } catch(error) {
    callback(error, null);         // (2) Gets called
    return;
  }
  callback(null, result);          // (3) Doesn't get called
  return;
}

Even better: add return before the call of the callback function.

function someFunction(callback) {
  let result = {};
  try {
    result = someOtherFunction();  // (1) Produces an error
  } catch(error) {
    return callback(error, null);  // (2) Gets called
  }
  return callback(null, result);   // (3) Doesn't get called
}

Voilá, now if someOtherFunction() produces an error, the second callback is not called.

Alternative recipes

Use promises.

Check type of callback parameter

Mon, 04 Jul 2016 08:00:00 GMT

Problem

You want to be sure that the value passed as the callback parameter is really a function.

Ingredients

the typeof operator
the === operator
optional: the toString() and the call method

Directions

Given: a function that accepts a callback function.

function someFunction(callback) {
  callback();
}

Check that callback is of type function.

function someFunction(callback) {
  if(typeof callback === 'function') {
    callback();
  }
}

Optional: otherwise throw an error.

function someFunction(callback) {
  if(typeof callback === 'function') {
    callback();
  } else {
    // handle it, throw error
    throw new TypeError('The callback parameter is no function.');
  }
}

Voilá, a delicious type check of the callback parameter.

someFunction(() => {console.log(4711)});  // 4711
someFunction({});                         // TypeError

Variants

Variant 1: use Object.prototype.toString as well.

function someFunction(callback) {
  if(Object.prototype.toString.call(callback) === '[object Function]'
    || typeof callback === 'function') {
    callback();
  } else {
    // handle it, throw error
    throw new TypeError('The callback parameter is no function.');
  }
}

Alternative recipes

Use a type checking library like typly (after installing it via npm install typly).

'use strict';
const typly = require('typly');
function someFunction(callback) {
  // only check
  if(typly.isFunction(callback)) {
    callback();
  } else {
    // handle it, throw error
    throw new TypeError('The callback parameter is no function.');
  }
}

'use strict';
const typly = require('typly');
function someFunction(callback) {
  // check and throw error when necessary
  typly.assertFunction(callback));
  callback();
}

Create a delaying function in promise-style

Sun, 03 Jul 2016 08:00:00 GMT

Problem

You want to create a function that creates a promise that delays for a given number of milliseconds.

Ingredients

a function
the Promise object
the setTimeout() function

Directions

Create a function that accepts the number of milliseconds.
```
function delay(ms) {
  ...
}
```

Let the function return a promise object.

function delay(ms) {
  return new Promise(...);
}

Add the resolve-/reject-callback to the promise.

function delay(ms) {
  return new Promise(
    (resolve, reject) => {
      ...
    }
  );
}

Inside that callback function call setTimeout().

function delay(ms) {
  return new Promise(
    (resolve, reject) => {
      setTimeout(resolve, ms);
    }
  );
}

Voilá, a perfect delaying function in promise-style.

delay(5000).then(() => {
  console.log('Printed after 5 seconds.')
});

Variants

If you want to pass data to the promise:

function delay(ms, data) {
  return new Promise(
    (resolve, reject) => {
      setTimeout(() => {
        resolve(data);
      }, ms);
    }
  );
}

Notes

Promises are natively supported since ES2015. If you are using ES5 you may want to use one of the many polyfill libraries for Promises.

Create a generic function for partial application

Sat, 02 Jul 2016 07:00:00 GMT

Problem

You want to create a generic function, that produces for a given function the partial applied function.

Ingredients

2 functions
the apply() method
the slice() method

Directions

Define a function that accepts another function (the one that should be partial applicable).
```
function partial(fn /*, args...*/) {
  ...
}
```

Let the function return another function (this will be the partial applicable function).

function partial(fn /*, args...*/) {
  ...
  return function() {
    ...
  }
}

Convert all but the first argument to an array by borrowing the slice() method.

function partial(fn /*, args...*/) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    ...
  };
}

Convert the arguments of the inner function to an array.

function partial(fn /*, args...*/) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    var argsInner = Array.prototype.slice.call(arguments, 0);
    ...
  };
}

Combine the arguments of the outer function with the arguments of the inner function.

function partial(fn /*, args...*/) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    var argsInner = Array.prototype.slice.call(arguments, 0);
    var argsAll = args.concat(argsInner);
    ...
  };
}

Call the passed function using the apply() method, passing the combined arguments.

function partial(fn /*, args...*/) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    var argsInner = Array.prototype.slice.call(arguments, 0);
    var argsAll = args.concat(argsInner);
    return fn.apply(this, argsAll);
  };
}

Optional: combine the previous three steps.

function partial(fn /*, args...*/) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    return fn.apply(this, args.concat(Array.prototype.slice.call(arguments, 0)));
  };
}

Voilá, a perfect, tasteful generic function that creates partial applicable functions.

function partial(fn /*, args...*/) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    return fn.apply(this, args.concat(Array.prototype.slice.call(arguments, 0)));
  };
}
function createPerson(firstName, lastName) {
  return {
   firstName: firstName,
   lastName: lastName
  }
}
var createPersonWithFirstNameJohn = partial(createPerson, 'John');
var johnDoe = createPersonWithFirstNameJohn('Doe');
console.log(johnDoe.firstName);  // "John"
console.log(johnDoe.lastName);   // "Doe"

Alternative recipes

Since ES2015: use rest parameters, fat arrow functions and the spread operator (implementation will follow in a later blog post).

Map array values to function parameters

Fri, 01 Jul 2016 08:00:00 GMT

Problem

You want to map values of an array to function parameters in ES5.

Ingredients

1 function
1 array
the apply() method

Directions

Given: a function that takes different parameters and an array containing concrete arguments.
```
function add(x, y, z) {
  return x + y + z;
}
var parameters = [2, 3, 4];
```

Naive solution, but also very verbose: access array values by index.

var result = add(
  parameters[0],
  parameters[1],
  parameters[2]
);
console.log(result);  // 9

Better to use the apply() method (at least when you are in ES5).

...
var parameters = [2, 3, 4];
var result = add.apply(null, parameters);
console.log(result);  // 9

Voilá, there you got a perfect mapping from array values to function parameters.

Alternative recipes

Since ES2015: use the spread operator, which can be used to map array values to function parameters:

...
let parameters = [2, 3, 4];
let result = add(...parameters);
console.log(result);  // 9

Define static properties using the class syntax

Thu, 30 Jun 2016 08:00:00 GMT

Problem

You want to define a static property inside a “class”.

Ingredients

1 “class”
1 property

Directions

Create a “class”.

class SomeClass {
  constructor(property) {
    this.property = property;
  }
}

Add the property that should be static directly to the “class”.

class SomeClass {
  constructor(property) {
    this.property = property;
  }
}
SomeClass.STATIC_PROPERTY = 'This is a static property.';

Voilá, there you got your static property.

console.log(SomeClass.STATIC_PROPERTY);  // "This is a static property."

Notes

Static properties cannot be accessed via an instance:

let instance = new SomeClass();
// console.log(instance.STATIC_PROPERTY);  // won't work

To access a static property based on an instance you need to access it via the constructor property:
```
let instance = new SomeClass();
console.log(instance.constructor.STATIC_PROPERTY);
```

Define static methods using the class syntax

Wed, 29 Jun 2016 08:00:00 GMT

Problem

You want to define a static method inside a “class”.

Ingredients

1 “class”
1 method
the static keyword

Directions

Create a “class”.

class SomeClass {
  constructor(property) {
    this.property = property;
  }
}

Add a method to that class (at this moment it is not static).

class SomeClass {
  constructor(property) {
    this.property = property;
  }
  someStaticMethod() {
    console.log('someStaticMethod');
  }
}

Add the static keyword before the method name to make it static.

class SomeClass {
  constructor(property) {
    this.property = property;
  }
  static someStaticMethod() {
    console.log('This is a static method');
  }
}

Voilá, there you got a static method.

SomeClass.someStaticMethod();  // "This is a static method"

Notes

Static methods cannot be called on an instance:

let instance = new SomeClass();
// instance.someStaticMethod();  // won't work

To call a static method based on an instance you need to call it via the constructor property:
```
let instance = new SomeClass();
instance.constructor.someStaticMethod();
```

Apply ES2015 class inheritance

Tue, 28 Jun 2016 08:00:00 GMT

Problem

You want to apply inheritance using the class syntax introduced in ES2015.

Ingredients

2 or more “classes”
the extends keyword
the super keyword

Directions

Define a “class”. Optionally define some properties, getter and setters.

'use strict';
class Animal {
  constructor(color) {
   this._color = color;
  }
  get color() {
    return this._color;
  }
  set color(color) {
    this._color = color;
  }
}

Define some methods in that “class”.

'use strict';
class Animal {
  constructor(color) {
   this._color = color;
  }
  ...
  makeSound() {
    console.log('Generic animal cannot make any sound.');
  }
}

Define another “class” as “subclass” using the extends keyword. Optionally defined some properties, getters and setters.

...
class Dog extends Animal {
  constructor(name, color) {
    this._name = name;
  }
  get name() {
    return this._name;
  }
  set name(name) {
    this._name = name;
  }
}

Call the super constructor using super(), passing the parameters expected by the super constructor.

...
class Dog extends Animal {
  constructor(name, color) {
    super(color);
    this._name = name;
  }
  get name() {
    return this._name;
  }
  set name(name) {
    this._name = name;
  }
}

Optional: overwrite some methods in the “subclass”.

...
class Dog extends Animal {
  ...
  makeSound() {
    console.log('Wuff wuff');
  }
}

Voilá, there you got a perfect, tasteful ES2015 inheritance.

'use strict';
class Animal {
  constructor(color) {
   this._color = color;
  }
  get color() {
    return this._color;
  }
  set color(color) {
    this._color = color;
  }
  makeSound() {
    console.log('Generic animal cannot make any sound.');
  }
}
class Dog extends Animal {
  constructor(name, color) {
    super(color);
    this._name = name;
  }
  get name() {
    return this._name;
  }
  set name(name) {
    this._name = name;
  }
  makeSound() {
    console.log('Wuff wuff');
  }
}
let dog = new Dog('Bello', 'brown');
console.log(dog.name);                 // "Bello"
console.log(dog.color);                // "brown"
console.log(dog instanceof Dog);       // true
console.log(dog instanceof Animal);    // true
dog.makeSound();                       // "Wuff wuff"
let animal = new Animal('yellow');
console.log(animal.color);             // "yellow"
console.log(animal instanceof Animal); // true
console.log(animal instanceof Dog);    // false
animal.makeSound();                    // "Generic animal cannot make any sound."

Alternative recipes

Use prototypical inheritance, which is more natural to the language JavaScript.
In ES5: use pure pseudoclassical inheritance

Create getters and setters in class syntax

Mon, 27 Jun 2016 08:00:00 GMT

Problem

You want to create getters and setters for a class in ES2015.

Ingredients

1 class
the get and set keywords

Directions

Create a class with some properties.

class Person {
  constructor(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
  }
}

Add methods that return the properties.

class Person {
  constructor(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
  }
  firstName() {
    return this._firstName;
  }
  lastName() {
    return this._lastName;
  }
}

Define those methods as getters using the get keyword.

class Person {
  constructor(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
  }
  get firstName() {
    return this._firstName;
  }
  get lastName() {
    return this._lastName;
  }
}

Add methods that sets new values to the properties.

class Person {
  constructor(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
  }
  firstName(value) {
    this._firstName = value;
  }
  get firstName() {
    return this._firstName;
  }
  lastName(value) {
    this._lastName = value;
  }
  get lastName() {
    return this._lastName;
  }
}

Define those methods as setters using the set keyword.

class Person {
  constructor(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
  }
  set firstName(value) {
    this._firstName = value;
  }
  get firstName() {
    return this._firstName;
  }
  set lastName(value) {
    this._lastName = value;
  }
  get lastName() {
    return this._lastName;
  }
}

Voilá, there you got perfect getters and setters.

let person = new Person('John', 'Doe');
console.log(person.firstName);  // "John"
console.log(person.lastName);   // "Doe"
person.firstName = 'Jane';      // "Jane"
console.log(person.lastName);   // "Doe"

Notes

Note that you cannot use the same names for the internal properties (e.g., _firstName and _lastName) and for the accessor properties (e.g., firstName and lastName). Otherwise you will have an endless loop.

Getters and setters does not prevent you from accessing the underlying properties directly:

let person = new Person('John', 'Doe');
console.log(person._firstName);  // "John"
console.log(person._lastName);   // "Doe"
person._firstName = 'Jane';      // "Jane"
console.log(person.firstName);   // "Jane"

Served best

Validation of property values

class Person {
  ...
  set firstName(value) {
    if(typeof value !== 'string') {
      throw new TypeError('First name must be of type string.');
    }
    this._firstName = value;
  }
  ...
}

Emulate private properties

Alternative recipes

Implement your own accessor methods (e.g., getFirstName(), setFirstName())

Apply pseudoclassical inheritance

Sun, 26 Jun 2016 08:00:00 GMT

Problem

You want to use pseudoclassical inheritance, i.e., create a “class” as “subclass” of another “class”.

Ingredients

2 or more functions
the prototype property
the call() method

Directions

Define a function intended to be a constructor function (this will be the “superclass”).
```
function Animal(color) {
  this._color = color;
}
```

Define some properties and/or methods on the prototype of that function. Those are the members of the “class”.

function Animal(color) {
  this._color = color;
}
Animal.prototype.getColor = function() {
  return this._color;
}
Animal.prototype.makeSound = function() {
  console.log('Generic animal cannot make any sound.');
}

Define another function intended to be a constructor function based on the previously defined function (this will be the “subclass”).
```
...
function Dog(name, color) {
  this._name = name;
}
```

Set the prototype property of that function.

...
function Dog(name, color) {
  this._name = name;
}
Dog.prototype = new Animal();

Call the super constructor function using the call() method, passing this and the parameters expected by the super constructor.

...
function Dog(name, color) {
  Animal.call(this, color);
  this._name = name;
}
Dog.prototype = new Animal();

Define some properties and/or methods on the prototype of that function.

...
function Dog(name, color) {
  Animal.call(this, color);
  this._name = name;
}
Dog.prototype = new Animal();
Dog.prototype.getName = function() {
  return this._name;
}

Optional: overwrite methods by defining them on the prototype of the “subclass”.

...
function Dog(name, color) {
  Animal.call(this, color);
  this._name = name;
}
Dog.prototype = new Animal();
Dog.prototype.getName = function() {
  return this._name;
}
Dog.prototype.makeSound = function() {
  console.log('Wuff wuff');
}

Voilá, there you got a perfect pseudoclassical inheritance.

function Animal(color) { 
  this._color = color; 
}
 Animal.prototype.getColor = function() { 
  return this._color;
} 
Animal.prototype.makeSound = function() { 
  console.log('Generic animal cannot make any sound');
 }
function Dog(name, color) {
  Animal.call(this, color);
  this._name = name;
}
Dog.prototype = new Animal();
Dog.prototype.getName = function() {
  return this._name;
}
Dog.prototype.makeSound = function() {
  console.log('Wuff wuff');
}

var dog = new Dog('Bello', 'brown');
console.log(dog.getName());            // "Bello"
console.log(dog.getColor());           // "brown"
console.log(dog instanceof Dog);       // true
console.log(dog instanceof Animal);    // true
dog.makeSound();                       // "Wuff wuff"
var animal = new Animal('yellow');
console.log(animal.getColor());        // "yellow"
console.log(animal instanceof Animal); // true
console.log(animal instanceof Dog);    // false
animal.makeSound();                    // "Generic animal cannot make any sound."

Alternative recipes

Use prototypical inheritance, which is more natural to the language JavaScript.
Since ES2015: use class syntax, which is syntactic sugar for pseudoclassical inheritance.
```
class Animal {
  ...
}
class Dog extends Animal {
  ...
}
```

Convert arguments object to array

Sat, 25 Jun 2016 08:00:00 GMT

Problem

You want to convert the array-like object arguments to a real array.

Ingredients

the Array prototype
the slice() method
the call() method

Directions

Given: a function that takes different parameters and accesses them via the arguments object.

function printAllArguments() {
  let values = arguments;
  for(let i=0; i<values.length; i++) {
    console.log(values[i]);
  }
}
printAllArguments(2, 3, 4);

Get a reference to the Array prototype.

function printAllArguments() {
  let arrayPrototype = Array.prototype;
  ...
}
...

Get a reference to the slice() method. (The slice() method creates a shallow copy of a part of an array and returns a new array. If you omit any parameters it copies the whole array.)
```
function printAllArguments() {
  let arrayPrototype = Array.prototype;
  let sliceMethod = arrayPrototype.slice;
  ...
}
...
```

Call the slice() method using the call() method.

function printAllArguments() {
  let arrayPrototype = Array.prototype;
  let sliceMethod = arrayPrototype.slice;
  let values = sliceMethod.call(arguments);
  for(let i=0; i<values.length; i++) {
    console.log(values[i]);
  }
}
printAllArguments(2, 3, 4);

Combine the code from the previous three steps.

function printAllArguments() {
  let values = Array.prototype.slice.call(arguments);
  for(let i=0; i<values.length; i++) {
    console.log(values[i]);
  }
}
printAllArguments(2, 3, 4);

Voilá, there you got a real array now, e.g., you can call array methods like forEach, map, reduce and filter on it.

function printAllArguments() {
  let values = Array.prototype.slice.call(arguments);
  values.forEach(function(value) {
    console.log(value);
  });
}
printAllArguments(2, 3, 4);

Notes

This recipe is also known as method borrowing.

Alternative recipes

Since ES2015: use Array.from() to create an array based on an array-like object:

function printAllArguments() {
  let values = Array.from(arguments);
  values.forEach(function(value) {
    console.log(value);
  });
}
printAllArguments(2, 3, 4);

And while you are in ES2015 you can also use fat arrow functions:

function printAllArguments() {
  let values = Array.from(arguments);
  values.forEach((value) => {
    console.log(value);
  });
}
printAllArguments(2, 3, 4);

And while you are at it, use rest parameters, which are real arrays:

function printAllArguments(...values) {
  values.forEach((value) => {
    console.log(value);
  });
}
printAllArguments(2, 3, 4);

Emulate block level scope

Fri, 24 Jun 2016 08:00:00 GMT

Problem

You want to emulate block level scope in ES5 to prevent naming conflicts.

Ingredients

Immediately-Invoked Function Expression (IIFE)

Directions

Given: some code that you want to put in a block.

var aVariable = 2345;
// Block should start here
var aVariable = 4711;
console.log(aVariable);      // should print 4711
// Block should end here
console.log(aVariable);      // should print 2345, but prints 411

Put the code into an anonymous function.

var aVariable = 2345;
function() {
  var aVariable = 4711;
  console.log(aVariable);
}
console.log(aVariable);

Put the function into a pair of rounded brackets.

var aVariable = 2345;
(function() {
  var aVariable = 4711;
  console.log(aVariable);
});
console.log(aVariable);

Append another pair of rounded brackets. This actually calls the defined function.

var aVariable = 2345;
(function () {
  var aVariable = 4711;      // prints 4711
  console.log(aVariable);
})();
console.log(aVariable);      // prints 2345

Voilá, there you got an emulated block scope.

Variants

Variant 1: put brackets at the end (as shown in the recipe)

(function() {
  var aVariable = 4711;
  console.log(aVariable);
})();

Variant 2: put brackets inside

(function() {
  var aVariable = 4711;
  console.log(aVariable);
}());

Alternative recipes

Since ES2015: use the let keyword, which provides a native way of declaring block scoped variables.