JavaScript-Tutorium:Grundlagen

Ziel

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

Überblick

Geschichtliches

• Erfunden von Brendan Eich bei Netscape
• Adaptiert von Microsoft und JScript benannt
• Netscape und Microsoft entwickeln unterschiedliche Implementierung
• Überreicht von Netscape an ECMA und standardisiert als ECMAScript

Spracheigenschaften

• Syntax ist an C angelehnt
• Hat fast nichts zu tun mit Java
• Ist interpretiert, nicht kompiliert
• Looses Typsystem
• Objektorientiert, nicht klassorientiert
• Begünstigt funktionales Programmieren
• Läuft in vielen unterschiedlichen Umgebungen

Umgebungen

• Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
• Server, z.B. NodeJS, Windows Scripting Host, Rhino
• Applikationen, z.B. Adobe Photoshop, Quartz Composer
• Betriebssysteme, z.B. GNOME

JavaScript-Engines

• SpiderMonkey/JägerMonkey: Firefox, GNOME
• V8: Chrome, NodeJS
• Trident/Chakra: Internet Explorer

ECMAScript Versionen

• ES3 ist vollständig implementiert von allen gängigen Browsern
• ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
• ES.next/Harmony ist von keinem Browser vollständig implementiert

Schlüsselwörter

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

abstract  
boolean break byte  
case catch char class const continue  
debugger default delete do double  
else enum export extends  
false final finally float for function  
goto  
if implements import in instanceof int interface  
long  
native new null  
package private protected public  
return  
short static super switch synchronized  
this throw throws transient true try typeof  
var volatile void  
while with

Die Auswahl der Begriffe orientierte sich stark an der Sprache Java. Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

Variablen

In JavaScript wird das Schlüsselwort var verwendet um Variablen zu deklarieren (und zu initialisieren).

Definition und Zuweisung

Variablen können unmittelbar bei der Deklaration definiert werden.

var tageProWoche = 7;
console.log(tageProWoche);

Oder auch zu späteren Zeitpunkten.

var tageProWoche;
tageProWoche = 7;
console.log(tageProWoche);

Eine Typabgabe ist nicht notwendig da es sich nicht um eine stark typisierte Sprachen handelt. Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

var pruefungBestanden = 1;
pruefungBestanden = true;
console.log(pruefungBestanden);

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

var tick, trick, track;
tick = trick = track = 'Ente';
console.log(tick);
console.log(trick);
console.log(track);

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

var doppeltDeklariert = false;
var doppeltDeklariert = true;
console.log(doppeltDeklariert);

Hoisting

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt. Dies betrifft ausschließlich die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man dadurch Code schreiben der Variablen verwendet bevor sie überhaupt definiert sind. Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

console.log(nochNichtDeklariert);
var nochNichtDeklariert = 5;

Tipp: Um Hoisting weitesgehend zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der jewilig umgebenden Funktion zu schreiben. Handelt es sich um globale Variable sollten diese am Anfang der JavaScript-Datei stehen.

Globale Variablen

In der Regel besitzt eine JavaScript-Umgebung ein globales Objekt, welches alle globalen Properties beherbergt. Im Browser wird das globale Objekt über die Variable window verfügbar gemacht. In Node.JS heisst es global. Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

var person1 = new Object();
console.log('ist person1 global?', person1 === window.person1);
var erstellePerson2 = function() {
  var person2 = new Object();
  console.log('is person2 global?', person2 === window.person2);
}
erstellePerson2();

Achtung: Wird das Schlüsselwort var vergessen, wird die Variable implizit als globale Variable definiert.

var erstelleGlobaleVariable = function() {
  globaleVariable = 1;
}
erstelleGlobaleVariable();
console.log(globaleVariable);
console.log(window.globaleVariable);

Primitive Datentypen

JavaScript stellt folgende primitive Datentypen zur Verfügung:

Null, Undefined, Number, Boolean, String

Anmerkung: Number, Boolean und String auch als Objekte behandelt mittels des sogenannten Boxings.

Null

Null ist ein Datentyp der nur einen definierten Wert annehmen kann: null. Anders als in anderen Sprachen ist null nicht der Standardwert einer nicht initialisierten Variable.

var referenz = null;
console.log(referenz);

Undefined

Undefined ist ein Datentyp der ebenso nur einen definerten Wert annehmen kann: undefined. Undefined ist der Standardwert einer nicht initialisierten Variable. Er ist nicht gleichbedeutend mit null.

var referenz1, referenz2 = null;
console.log(referenz1);
console.log(referenz1 === referenz2);

Anmerkung: Die JavaScript-Umgebung stellt eine Variable undefined zur Verfügung welche den Wert undefined enthält. Unglücklicherweise kann diese Variable in manchen JavaScript-Umgebung neu definiert werden.

Boolean

Boolean ist ein boolscher Datentyp welcher die Werte true und false annehmen kann.

var istGrasGruen = true, sindBananenBlau = false;
console.log(istGrasGruen);
console.log(sindBananenBlau);
console.log(istGrasGruen === sindBananenBlau);

Number

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu double wie in Java.

var monateProJahr = 12, pi = 3.14;
console.log(monateProJahr);
console.log(pi);

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen. Integer-Werte werden auch als Number abgebildet.

var ganzzahl = 1, gleitkomma = 1.0000;
console.log(ganzzahl === gleitkomma);

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);

Anmerkung: Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung. Diese muss über einen Umweg mithilfe der Number API emuliert werden.

var quotient = Math.floor(5 / 3);
console.log(quotient);

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);

Number API

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));

Eine komplette Referenz der String API finden sie auf [dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/) MDN-Seite.

String

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen. Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

var name1 = 'Paul', name2 = 'Peter';
console.log(name1);
console.log(name2);
console.log(name1 === name2);

Um Anführungszeichen selbst in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

console.log('\'');
console.log("\"");

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

console.log('Max' + ' ' + 'Mustermann');

String API

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung

var name = 'Max Mustermann';
console.log('Name hat eine Länge von ' + name.length);
console.log('Name als Großbuchstaben: ' + name.toUpperCase());
console.log('Name als Kleinbuchstaben: ' + name.toLowerCase());
console.log('Name erstes "e" ist an Position ' + name.indexOf('e'));

Eine komplette Referenz der String API finden sie auf [dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/) MDN-Seite.

Vergleiche

Gleichheit (==)

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte. Der Ungleichheitsoperator verhält sich analog.

Die Umwandlung bei Typungleichheit richtet sich nach den folgenden fünf Regeln:

 1. null und undefined sind gleich
 2. Strings werden in Zahlen konvertiert wenn sie mit Zahlen verglichen werden
 3. Boolsche Werte werden in Zahlen konvertiert
 4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden 
 5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden 

console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');

Anmerkung: Diese Regeln gelten lediglich für die Typumwandlung. Es ist trotzdem ohne weiteres möglich</source>

den Gleichheitsoperator zu verwenden um zum Beispiel Objektreferenzen zu vergleichen.

var person1 = {}, person2 = {};
console.log(person1 == person1);
console.log(person1 == person2);

Identität

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');

Anmerkung: Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

Größer und kleiner

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

console.log(2 > '1');
console.log(true > 1);

Kontrollanweisung

if-Anweisung

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen. Es gilt aber zu beachten dass folgende Ausdrücke als false interpretiert werden: false, null, undefined, , 0, NaN

if (!false) {
  console.log('!false ergibt true');
}

if (!null) {
  console.log('!null ergibt true');
  console.log('allerdings ist null nicht gleich false: ' + (null == false));
}

if (!undefined) {
  console.log('!undefined ergibt true');
  console.log('allerdings ist undefined nicht gleich false: ' + (undefined == false));
}

if (!'') {
  console.log('!"" ergibt true');
}

if (!NaN) {
  console.log('!NaN ergibt true');
}

Boolsche Logik

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

if (false || null || undefined || '' || NaN || true) {
  console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {
  
}
console.log(nichtVeraenderteVariable);

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);

switch-Anweisung

Die switch-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität). Stimmt die Identität eines Wertes mit dem Ausdruck überein so wird der nachfolgend stehende Code ausgeführt. Eine break-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

var countdown = 3;
switch (countdown) {
  case 3:
    console.log('3');
  case 2:
    console.log('2');
  case 1:
    console.log('1');
    break;
  default:
    console.log('0');
}

while- und do-while-Schleifen

Die while-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert true ergibt. Ergibt der Ausdruck beim ersten Mal bereits nicht true so wird der gegebene Code nie ausgeführt.

var zaehler = 10;
while (zaehler--) {
  console.log(zaehler);
}

while (false) {
  console.log('wird nicht ausgegeben');
}

Die do-while-Schleife funktioniert genauso wie die while-Schleife mit der Ausnahme dass der gegebene auf jeden Fall einmal ausgeführt wird.

do {
  console.log('wird ausgegeben');
} while (false);

try, catch und throw

Die Anweisungen try und catch werden verwendet um Exceptions abzufangen und zu behandeln.

try {
  console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
  console.log(error);
}

throw wird verwendet um Exceptions zu werfen. Als Argument sollte ein Error-Objekt übergeben werden.

try {
  throw new Error('Custom error');
}
catch (error) {
  console.log(error);
}

for- und for-in-Schleifen

for-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.

Der for-in-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

Anmerkung: for in sollte in der Regel mit hasOwnProperty() verwendet werden

var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
  console.log(spieler);
}

Objekte

Jeder Wert mit einem anderen Datentypen als ein primitiver Datentyp ist ein Objekt. JavaScript bietet eingebaute/native Objekte wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte. Objekte sind veränderliche Sammlungen von Eigenschaften. Eine Eigenschaft ist ein Schlüssel-Wert-Paar, wobei der Schlüssel ein String und der Wert von beliebigem Typ ist. Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries.

Variablen speichern immer die Referenz zu Objekten, nicht die Objekte selbst.

Erstellung von Objekten

Die einfachste Art ein Objekt zu erstellen ist mittels des Objektliterals {}.

var person1 = {};
console.log(person1);

Eine weitere Möglichkeit ist der Objekt-Konstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

var person1 = new Object();
console.log(person1);

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden. Die Eigenschaften werden als kommaseparierte Liste angegeben. Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
console.log(person1);

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt oder der Name der Eigenschaft Zeichen enthält die nicht bei Variablennamen vorkommen dürfen.

var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

var person1 = {
  vorname: 'Max',
  nachname: 'Mustermann',
  getName: function() {
    return this.vorname + ' ' + this.nachname;
  },
};
console.log(person1);
console.log(person1.getName());

Lesen von Eigenschaften

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

var person1 = {name: 'Max Mustermann'};
console.log(person1.name);

Zum anderen ist es möglich eines String-Ausdruck in eckigen Klammern anzugeben:

var person1 = {name: 'Max Mustermann'};
console.log(person1['person1']);

In der Regel wird die erste Variante verwendet wenn der Name der Eigenschaft bekannt und statisch ist. Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird

var person1 = {vorname: 'Max', nachname: 'Mustermann'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
  return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(person1, 'vorname');
console.log(hatObjektEigenschaft(person1, 'nachname');

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

var person1 = {'mag viele Leerzeichen': true};
console.log(person1['mag viele Leerzeichen']);

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert undefined zurück.

var person1 = {};
console.log(person1.adresse);

Schreiben von Werten

Analog zum Lesen können Werte von Eigenschaften sowohl mittels Punktnotation als auch mittels String-Ausdruck verändert werden.

var person1 = {alter: 5};
person1.alter += 5;
person1['alter'] += 5;
console.log(person1.alter);

Beim schreibenden Zugriff auf eine nicht existierende Eigenschaft eines Objekts wird diese implizit definiert. Dies bedeutet dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

var person1 = {};
person1.alter = 42;
person1.name = 'Rainer Zufall';
person1.hatBrille = true;
console.log(person1);

Abfragen von Eigenschaften

Um alle Eigenschaften eines Objekts abzufragen wird der for in-Loop in Kombination mit hasOwnProperty() verwendet.

var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
for (var eigenschaft in person1) {
  if (person1.hasOwnProperty(eigenschaft)) {
    console.log(eigenschaft + ': ' + person1[eigenschaft]);
  }
}

Löschen von Eigenschaften

Eigenschaften können mittels dem delete Operator von Objekten entfernt werden.

var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);

Anmerkung: Den Wert einer Eigenschaft auf undefined zu setzen ist nicht mit einem delete gleichzusetzen. Die Zuweisung von undefined lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für for in-Schleifen.

Arrays

In JavaScript sind Arrays genau genommen Objekte mir listenähnlichem Verhalten. Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

Erstellung

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals [].

var personenregister = [];
console.log(personenregister);

Alternativ kann man ebenfalls einen Konstruktor verwenden und die length Eigenschaft initial definieren.

var personenregister = new Array(10);
console.log(personenregister.length);

Diese Eigenschaft hat allerdings keine Auswirkung auf das tatsächliche Speichervermögen eines Arrays.

Arrays können ebenso initial mit Werten vorbefüllt werden

var personenregister = [{}, {}, {}, {}, {}];
console.log(a);

Da JavaScript generell nicht stark typisiert ist können Arrays Werte mit unterschiedlichen Typen enthalten.

var personenregister = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}, 'fehlerhafter Datensatz];
console.log(personenregister);

Die bereits erwähnte Eigenschaft length beschreibt die aktuelle Anzahl an Werten im Array.

console.log('array has a length of ' + [1, 2, 3, 4, 5].length);

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

var ticTacToe = [
  ['O', 'O', 'X'],
  ['O', 'X', 'X'],
  ['O', 'X', 'O']
];

Lesen von Werten

Werte von Arrays können über den numerischen Index abgefragt werden.

var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenregister[0]);

Schreiben von Werten

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

var personenregister = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
personenregister[0].vorname = 'Max';
console.log(personenregister);

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert. Bisher nicht belegte Stellen werden mit dem Wert undefined belegt.

var personenreigster = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenreigster);
console.log(personenreigster.length);
personenreigster[5] = {name: 'Frau Holle'};
console.log(personenreigster);
console.log(personenreigster.length);

Veränderungen der Eigenschaft length legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

var personenregister = [];
personenregister.length = 10;
console.log(personenregister);

Um Werte ans Ende des Arrays einzufügen wird die push()-Funktion verwendet.

var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.push(person1);
console.log(personenregister);

Die pop()-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

var personenregister = [{name: 'Max Mustermann'}];
var person1 = personenregister.pop();
console.log(personenregister);
console.log(person1);

Die Funktionen unshift() und shift() funktionieren wie push() und pop(), jedoch für den Anfang eines Arrays.

var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.unshift(person1);
console.log(personenregister);
personenregister.shift();
console.log(personenregister);

Um mehrere Arrays miteinander zu kombinieren wird die concat()-Funktion verwendet.

console.log([1, 2].concat([3, 4]));

Eine komplette Referenz der Array API ist auf [dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/) MDN-Seite zu finden.

Enumerierung

Um alle Elemente eines Arrays abzufragen wird der for-Loop verwendet.

var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
for (var index = 0; index < personenregister.length; index++) {
    console.log(index + ': ' + personenregister[index]);
}

Funktionen

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden. Eine Funktion besteht aus dem Schlüsselwort function, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

Ausführung und Erstellung

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);

Es gibt zwei Möglichkeiten Funktionen zu erstellen. Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden. Diese führt dazu dass eine Variable mit demselben Namen der Funktion definiert wird welche auf die Funktion zeigt.

function sagHallo() {
  console.log('Hallo Welt!');
}
sagHallo();

Funktionsdeklaration unterliegen dem sogenannten Hoisting. Hoisting bedeutet dass der JavaScript-Interpreter die Funktionsdeklaration vor der eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

sagHallo();
function sagHallo() {
  console.log('Hallo Welt');
}

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen. Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

var sagHallo = function() {
  console.log('Hallo Welt');
};
sagHallo();

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

sagHallo();
var sagHallo = function() {
  console.log('Sag Hallo');
};

Theoretisch kann einem einer Variable zugewiesenen Funktionsausdruck auch eine Funktionsname gegeben werden. Dieser kann von dem Funktionskörper selbst verwendet werden um die Funktion zu referenzieren, z.B. bei Rekursion.

var zeichneAlles = function zeichneNaechstesObjekt() {
  // ...
  zeichneNaechstesObjekt();
}
zeichneAlles();

Anmerkung: Persönlich hatte ich noch nie Verwendung dafür.

Argumente

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

var kombiniere = function(string1, string2) {
  return string1 + ' ' + string2;
}
var name = kombiniere('Max', 'Mustermann');
console.log(name);

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

var kombiniere = function(string1, string2) {
  return string1 + ' ' + string2;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));

Funktionen verfügen über eine lokale Variable namens arguments. Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

var zaehleArgumente = function() {
  return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));

Außerdem besitzen Funktionen eine Eigenschaft namens length welche die Anzahl an erwarteten Argumenten beschreibt.

var addiere = function(a, b) {}
console.log(addiere.length);

Rückgabewert

Funktionen in JavaScript können beliebige Werte zurückgeben. Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit undefined zurück.

var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
  return 1;
}
console.log(gibEinsZurück());

Anmerkung: Ein impliziter Rückgabewert von undefined ist nicht gegeben wenn eine Funktion mit new aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

var sindArgumenteGegeben = function() {
  if (arguments.length > 0) {
    return true;
  }
}
console.log(sindArgumenteGegeben());
console.log(sindArgumenteGegeben(1)));

(anonymer) Funktionsausdruck

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise nützlich wenn es darum geht Funktionen als Argumente zu übergeben oder als Rückgabewerte zu verwenden.

var erstelleFunktion = function() {
  return function() {};
}

console.log(erstelleFunktion());
console.log(erstelleFunktion() == erstelleFunktion());

Scope

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten. Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

var sucheErstesLeerzeichen = function(eingabe) {
  var index = 0;
  for (var index = 0; index < eingabe.length; i++) {
    if (eingabe.charAt(index) == ' ') {
      index =  
    }
  }
  return zaehler;
}
console.log(f2());

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts

let Variablen mit Block-Scope zu deklarieren.

Innere Funktionen

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden. Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

var erstelleName = function() {
  var erstelleVorname = function() {
    return 'Max';
  };
  var erstelleNachname = function() {
    return 'Mustermann';
  };

  return erstelleVorname() + ' ' + erstelleNachname();
};
console.log(erstelleName());

Objektfunktionen

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

var person1 = {
  vorname: 'Max',
  nachname: 'Mustermann',
  erstelleName: function() {
    return this.vorname + ' ' + this.nachname;
  },
};
console.log(person1);
console.log(person1.erstelleName());

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

var addiere = function(a, b) {
  return a + b;
};

var substrahiere = function(a, b) {
  return addiere(a, -b);
};

var multipliziere = function(a, b) {
  return a * b;
};

var dividiere = function(a, b) {
  return a / b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;
taschenrechner.substrahiere = substrahiere;
taschenrechner.multipliziere = multipliziere;
taschenrechner.dividiere = dividiere;

taschenrechner.teileGanzzahl = function() {
  return Math.flor(dividiere(a, b));
}

console.log(taschenrechner.addiere(taschenrechner.memory, 23));

Konstruktoren

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen. Eine von mehreren Möglichkeiten Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind Konstruktorfunktionen.

Verwendung

Jenseits der normalen Ausführung kann jede Funktion mit dem Schlüsselwort new aufgerufen werden. Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

var addiere = function(a, b) {
  return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort "new" aufzurufen. Dies kann zu unerwarteten Seiteneffekten führen.

var Person = function() {

};
console.log(Person());
console.log(new Person());

Funktionen die als Konstruktoren dienen sollten mit einem Großbuchstaben beginnen um sie deutlich erkennbar zu machen.

var person = function() {

};
console.log(person()); // ?
console.log(new person()); // ?

Wenn eine Funktion mit dem Schlüsselwort new aufgerufen wird, wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

var Person = function() {

};
var person1 = new Person();
person1.name = 'John Doe';
console.log(person1);

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

var Person = function(vorname, nachname) {
  return {
    vorname: vorname, 
    nachname: nachname
    erstelleName: function() {
      return this.vorname + ' ' + this.nachname;
    }
  };
};
var person1 = new Person('John Doe');
console.log(person1);

Anmerkung: Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

this

Das Schlüsselwort this zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

var Person = function(name) {
  this.name = name;
};
var person1 = new Person('John Doe');
console.log(person1);

Achtung: Wird eine Konstruktorfunktion ohne new aufgerufen so zeigt this aber auf das globale Objekt (im Browser: window).

var Person = function(name) {
  this.name = name;
}
Person('John Doe');
console.log(window.name);

Sichere Verwendung

Es ist bedingt möglich sicherzustellen dass eine Funktion mit dem Schlüsselwort new aufgerufen wurde. Dazu kann der instanceof-Operator genutzt werden. Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

Anmerkung: Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

var Person = function(name) {
  if (!(this instanceof Person)) {
    throw new Error('Person is a constructor');
  }
  this.name = name;
}
console.log(new Person('John Doe'));
console.log(Person('Jan Doe'));

Alternativen

Konstruktorfunktionen sollten im Allgemeinen nur verwendet werden wenn die Funktionsweise klar ist. Vorteile bestehen zum Beispiel in der Syntax (Verwendung von new) und der Möglichkeit instanceof zu verwenden. Viel wichtiger ist jedoch die effiziente Wiederverwendung von wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es aber auch viele andere Möglichkeiten gleichartige Objekte zu erzeugen.

var erstellePerson = function(name, alter) {
  return {name: name, alter:};
}
var person1 = erstellePerson('Max Mustermann');
console.log(person1);

Typüberprüfung

typeof-Operator

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen. Zum einen gibt es den typeof-Operator, ähnlich wie in anderen Sprachen (z.B. C).

console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator allerdings nicht wie erwartet.

var Person = function(name) {
  this.name = name;
};

var person1 = new Person('John Doe');
console.log('typeof person1 ist ' + typeof person1);

var person2 = null;
console.log('typeof person2 ist ' + typeof person2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);

Selbst bei Wrappern für primitive Datentypen liefert der typeof-Operator keine nützlichen Resultate.

var wahr = new Boolean(true);
console.log('typeof wahr ist ' + typeof wahr);

Object.prototype.toString()

Eine Alternative zu dem typeof-Operator ist die toString()-Methode auf dem Object-Prototypen. Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

var getType = function(object) {
  return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));

Für eigene Klassen bleibt der Rückgabewert allerdings Object und damit relativ unspezifisch.

var Person = function(name) {
  this.name = name;
};
var person1 = new Person('John Doe');
console.log('getType() von person1 ist ' + getType(person1));

this

Das Schlüsselwort this hat JavaScript unterschiedliche Bedeutungen je nach Kontext. Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

Unterschiedliche Kontexte

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit nicht als Eigenschaft eines Objekts dann zeigt this auf das globale Objekt.

var loggeThis = function() {
  console.log(this);
};

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

var tuEtwas = function() {
  var loggeThis = function() {
    console.log(this);
  };
};

tuEtwas();

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird zeigt this auf das Objekt.

var person1 = {
  vorname: 'Max',
  nachname: 'Mustermann',
  erstelleName: function() {
    return this.vorname + ' ' + this.nachname
  }
}

console.log(person1.erstellName());

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.

Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

var loggeThis = function() {
  console.log(this);
};

person1 = {
  vorname: 'Max',
  nachname: 'Mustermann',
  loggePerson: loggeThis
}

person1.loggePerson();

3. Wenn eine Funktion als Konstruktor mit new aufgerufen wird zeigt this auf das automatisch erstellte Objekt.

var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
  this.erstelleInitialen = function() {
    return this.vorname.charAt(0) + this.nachname.charAt(1);
  }
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.erstelleInitialen());

Manipulation von this

Mithilfe von zwei Funktionen kann kontrolliert werden auf was this innerhalb einer aufgerufenen Funktion verweist.

Die Funktion apply() ist auf jeder Funktion verfügbar, führt diese aus und akzeptiert zwei Argumente. Das erste Argument ist das Objekt auf welches this bei der Ausführung zeigt. Das zweite Argument ist ein Array welches als Liste von Argumenten für den Funkionsaufruf verwendet wird.

var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
}

var erstelleInitialen = function(mitPunkten) {
  var i1 = this.vorname.charAt(0);
  var i2 = this.nachname.charAt(0);
  if (mitPunkten) {
     return i1 + '.' + i2 + '.';
  }
  return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen.apply(person2, [true]);
console.log(initialen);

Die Funktion call() ist sehr ähnlich zu apply(), akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt auf welches this bei der Funktionsausführung zeigt. Die restlichen Argumente sind wiederum die Argumente welche an die ausführende Funktionen übergeben werden.

In der Regel ist die Verwendung von apply() flexibler, da sie mit einem Array arbeitet.

Anmerkung: Im Normalfall ist eine Manipulation von this nicht notwendig und kann elegant umgangen werden.

var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
}

var erstelleInitialen = function(person, mitPunkten) {
  var i1 = person.vorname.charAt(0);
  var i2 = person.nachname.charAt(0);
  if (mitPunkten) {
     return i1 + '.' + i2 + '.';
  }
  return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen(person2, true);
console.log(initialen);

Sichere Verwendung in Konstruktorfunktionen

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von this innerhalb von Konstruktorfunktionen.

var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
  this.erstelleNamen = function() {
    return this.vorname + ' ' + this.nachname;
  };
};

var loggeErgebnisVonFunktion = function(funktion) {
  console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);

Dieses Problem kann leicht umgangen werden indem man eine Hilfsvariable erzeugt und ihr den Wert von this zuweist. Auf diese Weise kann man in immer das aktuell erzeugte Objekt referenzieren unabhängig von dem aktuellen Scope.

var Person = function(vorname, nachname) {
  var self = this;
  self.vorname = vorname;
  self.nachname = nachname;
  self.erstelleNamen = function() {
    return self.vorname + ' ' + self.nachname;
  };
};

var loggeErgebnisVonFunktion = function(funktion) {
  console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);

Prototypen

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen. Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen. Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

Zugriff auf Prototypen

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist. Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen. In älteren ECMAScript-Versionen gibt es keine standardisierte Weise um auf den Prototypen eines Objekts zuzugreifen. In ECMAScript 5 wurde dafür die Funktion Object.getPrototypeOf() eingeführt.

var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);

Prototypen erweitern

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

var Person = function() {};
Person.prototype.erstelleInitialen = function() {
  return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber nicht bereits erzeugte Objekte.

var Person = function() {};
Person.prototype = {
  erstelleInitialen: function() {
    return this.vorname + this.nachname;
  };
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);

Die Prototype-Chain

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt. Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
  return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist. Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
  return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());

Anmerkung: Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.

Dementsprechend ist der Prototyp des Prototypen wiederum der der Object-Konstruktorfunktion.

var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);

Wiederverwendung

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein. Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
  anzahlErstellterFunktionen++;
  return function() {
    console.log('Hallo Welt');
  };
};

var Person = function() {
  this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
  personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

var Person = function() {};
Person.prototype.sagHallo = function() {
  console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));

Prototypische Vererbung

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen. Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

var Person = function() {
  this.sagHallo = function() {
    console.log('Hallo Welt');
  };
};

var Student = function() {
  this.schreibHtml = function() {
    console.log('<html><head></head><body></body></html>');
  };
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());

Prototypen auf nativen Objekten

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt. Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

Object.prototype.sagMirWasDuBist = function() {
  console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();

Anmerkung: Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

• Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
• In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
• Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

Verwendung von Vererbung

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht. Stattdessen folgen viel dem Paradigma Composition over Inheritance.

Kapselung

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

Closures

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen. Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird. Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

var erzeugeLogFunktion = function(prefix) {
  var logge = function(message) {
    console.log(prefix + message);
  };
  return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

var Person = function(vorname, nachname) {
  var name = vorname + ' ' + nachname;
  this.hatNamen = function(zuPruefenderName) {
    return name === zuPruefenderName;
  };
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));

Pseudo-private Eigenschaften

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript. Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird. Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

var Person = function(vorname, nachname) {
  this._vorname = vorname;
  this._nachname = nachname;
  this._name = this._vorname + ' ' + this._nachname;
  this.hatNamen = function(zuPruefenderName) {
    return this._name === zuPruefenderName;
  };
}