JavaScript lernen: Grundlagen ist eine Übersicht zu Grundlagen der objektbasierten Programmiersprache mit Erläuterungen zu Funktionen und Konzepten, Cheat Sheets zu Grundlagen, Empfehlungen und Verwendung der Browser DevTools.

Möchtest du dich nicht mit Grundlagen sondern erweiterten JavaScript Techniken, zum Beispiel der Verwendung von Frameworks beschäftigen, empfehle ich den Artikel zur Angular Referenz.

Die verschiedenen Beispiele kannst du als Code Snippets selbst ausprobieren und zum Beispiel in die JavaScript Konsole des Browsers einfügen.

In den meisten Beispielen wird das Ergebnis per console.log Methode direkt in der Konsole ausgegeben.

1. Sprachkern

Variablen

var

function Languages() {
  var sp = 'spanisch';
  console.log(sp);
}

Languages(); // spanisch

Variablen mit dem Schlüsselwort var können überschrieben werden und sind funktionsbezogen. Die Variable sp ist nur innerhalb der Funktion gültig

function Languages() {
  var en = 'englisch';
}
Languages();

console.log(en); // Uncaught ReferenceError: en is not defined

Wird die in der Funktion initialisierte Variable en außerhalb der Funktion aufgerufen, gilt sie als nicht definiert

let

for (let i = 1; i < 4; i ++) {
    console.log(i); // 1 2 3
}

Variablen mit dem Schlüsselwort let sind blockbezogen, wirken daher immer innerhalb eines Blocks mit geschweiften Klammern.

for (let i = 1; i < 4; i ++) {
    console.log(i);

    let a = 0;
    a = a + i;
}

console.log(a);// Uncaught ReferenceError: a is not defined

Die Variable a innerhalb des Blocks kann außerhalb nicht aufgerufen werden

const

const language = 'de';
console.log(language); // de

Variablen mit dem Schlüsselwort const werden als Konstante bezeichnet, die nicht überschreibbar sind …

const language = 'de';
language = 'fr';
console.log(language); // Uncaught TypeError: Assignment to constant variable.

… so wie es die Fehlermeldung auch beschreibt.

Operatoren

Es gibt in JavaScript verschiedene Operatoren, die dir bestimmt aus anderen Programmiersprachen bekannt sind. Eine Auswahl der wichtigsten Operatoren ist in der unten stehenden Tabelle aufgelistet.

Zuweisungsoperatoren

Operator	Beschreibung	Beispiele
=	Zuweisungsoperator Wert wird zugewiesen	city = ‚Madrid‘
+	Addition addieren zum linken Operanden	value = value + 10 Kurz: value += 10
–	Subtraktion subtrahieren zum linken Operanden	value = value – 10 Kurz: value -= 10
*	Multiplikation multiplizieren des linken Operanden	value = value * 10 Kurz: value *= 10
/	Division dividieren des linken Operanden	value = value / 10 Kurz: value /= 10
%	Restwert Restwert aus Division des linken Operanden	value = value % 10 Kurz: value %= 10
**	Potenzieren potenzieren des linken Operanden	value = value 10 Kurz: value = 10
>>	Verschieben zu rechtem Operanden verschieben	value = value >> value2 Kurz: value >>= value2
<<	Verschieben zu linkem Operanden verschieben	value = value << value2 Kurz: let value <<= value2

Vergleichsoperatoren

Operator	Beschreibung	Beispiele
==	Gleichheit prüfen auf Gleichheit der Werte	value == value2
!=	Ungleichheit prüfen auf Ungleichheit der Werte	value != value2
===	Identität prüfen auf Gleichheit der Werte und des Typs	value === value2
!==	Identität prüfen auf Ungleichheit der Werte bei Gleichheit des Typs	value !== value2
>	Größer prüfen, ob linker Operand größer dem rechten	value > value2
<	Kleiner prüfen, ob rechter Operand größer dem linken	value < value2
>=	Größer gleich prüfen, ob linker Operand größer oder gleich dem rechten	value >= value2
<=	Kleiner gleich prüfen, ob rechter Operand größer oder gleich dem linken	value <= value2
instanceof	prüfen, ob der linke Operand (das Objekt) eine Instanz der Klasse rechts vom Operator ist	let date = new Date(); date instanceof Date
in	prüfen, ob der linke Operand im Objekt (dem rechten Operanden) vorkommt	let citizen = { spain: 47000000, france: 67000000} ’spain‘ in countries

Arithmetische Operatoren

Operator	Beschreibung	Beispiele
++	Inkrementieren addieren um 1 zum Wert des Operanden	for (let i = 0; i < 10; i++) { … }
—	Dekrementieren subtrahieren um 1 zum Wert des Operanden	for (let i = 0; i > 10; i–) { … }
+	in eine Zahl umwandeln	+true ergibt 1
–	Negierung eines Wertes	let value = 5; -value ergibt -5

Logische Operatoren

Operator	Beschreibung	Beispiele
&&	UND Block wird ausgeführt, wenn value und value2 true ergeben	if (value && value2) { … }
\|\|	ODER Block wird ausgeführt, wenn value oder value2 true ergeben	if (value \|\| value2) { … }
!	NOT Block wird ausgeführt, wenn value nicht true ergibt	if (!value) { … }

Unäre Operatoren

Bei unären Operationen wird nur ein einziger Operand verwendet.

Operator	Beschreibung	Beispiele
typeof	wertet den zu prüfenden Operanden aus und gibt den Typ zurück	typeof 12 // number typeof true // boolean
delete	löscht Eigenschaften aus einem Objekt	let country = { name: ’spain‘, citizen: 47000000 } delete country.name;
void	der Wert undefined wird zurückgegeben, wie bei einer IIFE	void function () { … } ();

Weitere Operatoren

Operator	Beschreibung	Beispiele
?:	Bedingungs-/Ternäroperator wird mit drei Operanden verwendet die	value > 10 ? true : false
await	await-Operator erwartet ein Promise-Objekt und wartet die asynchrone Operation ab, ohne dabei andere Operationen zu blockieren	async function getSetting() { let value = await 10; … }

Bedingungen, Schleifen

Bedingungen können auch als Abzweigungen bezeichnet werden. An diesen Stellen wird eine Entscheidung getroffen, wo und wie der Programmablauf fortgesetzt wird.

Das Schlüsselwort if wird für die Bedingung verwendet, die in runden Klammern formuliert wird

if (value >= 20) {
  console.log('Ziel erreicht!');
}

Mit dem else-Zweig lässt sich der false-Fall abfangen, der eintritt, wenn die Abfrage der if-Bedingung false zurückgibt

if (value >= 20) {
  console.log('Ziel erreicht!');
} else {
  console.log('Leider verloren!');
}

Möchtest du in dem else-Zweig noch eine Abfrage unterbringen, nimmst du den else-if-Zweig

if (value >= 20) {
  console.log('Ziel erreicht!');
} else if (value >= 10 && value < 20){
  console.log('Ziel bald erreicht!');
} else if (value < 10){
  console.log('Leider verloren!');
}

Objekte, Arrays

2. Template strings

Mit Verkettungsoperator

Man kann Strings mit JavaScript Variablen mittels Verkettungsoperator kombinieren, was in einigen Fällen auch ausreicht:

const name = 'Tom';
const age = 28;
const myText = 'My name is ' + name + ' and I`m ' + age + ' years old';
console.log(myText); // My name is Tom and I´m 28 years old

String Interpolation – ${}

In JavaScript ist die folgende String Interpolation in Zeile 3 ist etwas flexibler und mittlerweile auch üblicher. Der gesamte String wird in Backticks geschrieben und die Variable mit führendem Dollar-Zeichen in geschweifte Klammern eingebettet.

const name = 'Tom';
const age = 28;
const myText = `My name is ${name} and I´m ${age} years old`
console.log(myText);

3. Funktionen

Wer JavaScript lernen will, sollte sich intensiv mit Funktionen beschäftigen. Daher gehe ich hier auf die Definition von Funktionen ein und beschreibe unter JavaScript lernen: Fortgeschritten die Verwendung der map(), filter(), IIFE, Closures und weiteren Methoden.

Funktionen erzeugen

Funktionale Programmierung

Glossar

Begriff	Beispiele
Array sind Datentypen mit geordneter Sammlung aus veränderbaren Werten. Grundsätzlich gibt es 4 Möglichkeiten ein Array zu erzeugen	let numbers = [2, 4, 8] let numbers2 = [1, …numbers, 16] let numbers = new Array(2, 4, 8) Array.of(2, 4, 8)
Aufrufausdruck ist der Aufruf zum Beispiel einer Funktion	Math.random() oder m.n(x, y)
Funktionsausdruck ist der Ausdruck einer Funktion, der ähnlich wie das Funktionsstatement verstanden werden kann. Ein Funktionsausdruck kann ohne Funktionsnamen geschrieben werden	let languages = function() { … }
Identifier ist die Bezeichnung bzw. der Name, der für Variablen, Konstanten, Eigenschaften, Funktionen, Klassen verwendet wird	const languages oder class GetLang
Konstruktor mit dem Konstruktor wird ein neues Objekt erzeugt. Mit einem Konstruktor ist auch die Initialisierung mit Objekteigenschaften möglich	m = new Object() m = new Object(x = 5, y = 10)
Literal ist ein Datenwert, der unter anderem Zahlenwerte, Zeichenketten, Wahrheitswerte enthält	Zahl 15, die Zahl 2.9, die Zeichenkette „Text“, der Wahrheitswert true, oder null
Objektliteral beschreibt die Deklaration eines Objektes	let languages: { }
Primitive Werte sind Werte bzw. Datentypen die unveränderbar sind. Im Gegensatz zu Objekten sind sie immutabel, d.h. nicht veränderbar, werden also immer neu erzeugt	Wahrheitswerte, Zahlen, Zeichenketten, undefined, null