JavaScript Grundlagen Cheatsheet

6 Kernkonzepte

Die wichtigsten Grundlagen von JavaScript: Syntax · Variablen · Datentypen · Operatoren · Funktionen · Strings JavaScript ist die Sprache des Webs – von interaktiven Webseiten bis zu Backend-Systemen mit Node.js. Diese Grundlagen sind der Einstieg in die JavaScript-Programmierung.

Syntax – Die Grundregeln

; · // · {} · case-sensitiv

// Einzeiliger Kommentar /* Mehrzeiliger Kommentar */ let name = "Anna"; // Anweisung mit ;

JavaScript-Syntax ist C-ähnlich und zeichnet sich durch geschweifte Klammern {} für Codeblöcke und Semikolons ; als Anweisungsende aus. Die Sprache ist case-sensitiv (Groß-/Kleinschreibung wird beachtet).

Wichtige Syntax-Regeln

Regel	Beschreibung
//	Einzeiliger Kommentar
/* ... */	Mehrzeiliger Kommentar
;	Semikolon beendet eine Anweisung (optional, aber empfohlen)
{}	Geschweifte Klammern definieren Codeblöcke (if, for, function)
case-sensitiv	meinName und MeinName sind unterschiedliche Variablen

Beispiele

// Einzeiliger Kommentar

Mehrzeiliger

Kommentar

if (x > 5) { // Block mit {}

console.log("x ist groß");

}

Tipp: Semikolons sind in JavaScript optional, aber es ist eine bewährte Praxis, sie immer zu setzen – das vermeidet unerwartete Fehler durch automatische Semikolon-Einfügung (ASI).

Variablen – Daten speichern

let · const · var

let name = "Anna"; // veränderbar const PI = 3.14159; // konstant (unveränderbar) var alt = 30; // veraltet (nicht mehr empfohlen)

Variablen in JavaScript werden mit let, const oder var deklariert. let und const sind block-scoped, var ist function-scoped.

Regeln für Variablennamen

Regel	Beschreibung
Buchstaben, Ziffern, _ , $	Erlaubte Zeichen (keine Sonderzeichen)
Nicht mit Ziffer	Name darf nicht mit einer Zahl beginnen
Groß-/Kleinschreibung	JavaScript unterscheidet zwischen Groß- und Kleinschreibung
Reservierte Wörter	Nicht verwenden: let, const, if, for, while, etc.
Konventionen	camelCase für Variablen und Funktionen (empfohlen)

Beispiele

// let – veränderbar

let alter = 25;

alter = 26; // möglich

// const – unveränderbar

const geburtsjahr = 1998;

// geburtsjahr = 1999; // Fehler!

// var – veraltet (nicht mehr verwenden)

// var name = "Max"; // nicht empfohlen

// Mehrfachzuweisung

let a = 1, b = 2, c = 3;

Tipp: Verwenden Sie const für Werte, die sich nicht ändern sollen, und let für veränderbare Werte. var sollte nicht mehr verwendet werden (veraltete Funktion).

Datentypen – Primitive & Objekte

typeof · number · string · boolean · null · undefined

console.log(typeof 42); // "number" console.log(typeof "Hallo"); // "string" console.log(typeof true); // "boolean"

Datentypen in JavaScript werden in primitive Typen und Objekte unterteilt. Die Typüberprüfung erfolgt mit typeof.

Die wichtigsten Datentypen

Typ	Beschreibung	Beispiel
number	Zahlen (ganze Zahlen & Gleitkomma)	42, 3.14, -7
string	Zeichenketten	"Hallo", 'Welt', `Hallo ${name}`
boolean	Wahrheitswerte	true, false
undefined	Nicht definiert (noch kein Wert)	let x; // undefined
null	Leerwert (bewusst kein Wert)	null
object	Objekte, Arrays, Funktionen	{name: "Anna"}, [1, 2, 3]
symbol	Eindeutige, unveränderbare Werte (ES6)	Symbol("id")
bigint	Sehr große ganze Zahlen (ES2020)	9007199254740991n

Beispiele

// Typüberprüfung mit typeof

console.log(typeof 42); // "number"

console.log(typeof "Text"); // "string"

console.log(typeof true); // "boolean"

console.log(typeof undefined); // "undefined"

console.log(typeof null); // "object" (bekannter Bug)

// Typumwandlung

text = "123";

zahl = Number(text); // 123 (number)

str = String(42); // "42" (string)

Tipp: typeof null gibt "object" zurück – das ist ein bekannter Bug in JavaScript, der aus historischen Gründen besteht.

Operatoren – Rechnen & Vergleichen

+ - * / % ** · == === · < > · && || !

summe = 10 + 5; // 15 potenz = 2 ** 3; // 8 gleich = 5 === 5; // true

Operatoren führen Berechnungen und Vergleiche durch. JavaScript bietet eine breite Palette von arithmetischen, Vergleichs- und logischen Operatoren.

Die wichtigsten Operatoren

Kategorie	Operatoren
Arithmetik	+, -, , /, % (Modulo), * (Potenz)
Vergleich	== (lose), === (streng), !=, !==, <, >, <=, >=
Logik	&& (UND), \|\| (ODER), ! (NICHT)
Zuweisung	=, +=, -=, =, /=, %=, *=
Inkrement/Dekrement	++, --
Nullish Coalescing	??
Optional Chaining	?.

Beispiele

// Arithmetische Operatoren

console.log(10 / 3); // 3.333...

console.log(10 % 3); // 1 (Rest)

console.log(2 ** 3); // 8

// Vergleich (streng vs. lose)

console.log(5 == "5"); // true (lose)

console.log(5 === "5"); // false (streng)

// Logische Operatoren

console.log(true && false); // false

console.log(true || false); // true

console.log(!true); // false

Tipp: Verwenden Sie immer === (strenger Vergleich) statt == (loser Vergleich), um unerwartete Typumwandlungen zu vermeiden.

Funktionen – Code wiederverwenden

function · () · return · Arrow Functions

function greet(name) { return "Hallo " + name; } greet("Anna"); // "Hallo Anna"

Funktionen sind wiederverwendbare Codeblöcke. Sie können Parameter entgegennehmen und Werte mit return zurückgeben. Arrow Functions sind eine kürzere Schreibweise (ES6).

Funktions-Deklarationen

Art	Beschreibung	Beispiel
Function Declaration	Klassische Funktion (hoisting)	function add(a, b) { return a + b; }
Function Expression	Funktion als Variable (kein hoisting)	const add = function(a, b) { return a + b; };
Arrow Function	Kurze Syntax (ES6)	const add = (a, b) => a + b;
Implicit Return	Arrow ohne { } return automatisch	const double = x => x * 2;

Beispiele

// Function Declaration

function add(a, b) {

return a + b;

}

// Arrow Function (kurz)

const multiply = (a, b) => a * b;

// Arrow Function mit Block (mehrere Anweisungen)

const format = (name) => {

return `Hallo ${name}!`;

}

// Implicit Return (einzeilig)

const double = x => x * 2;

console.log(double(5)); // 10

// Default Parameter

function greet(name = "Gast") {

return `Hallo ${name}!`;

}

console.log(greet()); // "Hallo Gast!"

Tipp: Arrow Functions (() => {}) sind kürzer und haben ein anderes this-Verhalten. Sie sind ideal für Callbacks und kurze Funktionen.

Strings – Text verarbeiten

'' · "" · `` · .length · .toUpperCase()

text = "JavaScript"; console.log(text.length); // 10 console.log(text.toUpperCase()); // "JAVASCRIPT" console.log(text[0]); // "J"

Strings sind Zeichenketten in JavaScript. Sie sind unveränderbar (immutable) und bieten viele Methoden zur Textverarbeitung. Template-Strings (Backticks) ermöglichen Interpolation.

Wichtige String-Methoden

Methode	Beschreibung	Beispiel
str.length	Länge des Strings	"Hallo".length // 5
str.toUpperCase()	Alle Zeichen in Großbuchstaben	"hallo".toUpperCase() // "HALLO"
str.toLowerCase()	Alle Zeichen in Kleinbuchstaben	"HALLO".toLowerCase() // "hallo"
str.trim()	Leerzeichen am Anfang/Ende entfernen	" hallo ".trim() // "hallo"
str.split(sep)	Zerlegt String in Array	"a,b,c".split(",") // ["a","b","c"]
str.replace(old, new)	Ersetzt Teilstring (nur erstes Vorkommen)	"Hallo".replace("a", "e") // "Hello"
str.replaceAll(old, new)	Ersetzt alle Vorkommen (ES2021)	"aab".replaceAll("a","x") // "xxb"
str.includes(sub)	Prüft auf Teilstring	"Hallo".includes("ll") // true
str.startsWith(prefix)	Prüft auf Anfang	"Hallo".startsWith("Ha") // true
str.endsWith(suffix)	Prüft auf Ende	"Hallo".endsWith("lo") // true
str.indexOf(sub)	Findet Position (oder -1)	"Hallo".indexOf("ll") // 2
str.slice(start, end)	Extrahiert Teilstring	"Hallo".slice(0, 3) // "Hal"

Beispiele

// Strings mit Anführungszeichen

s1 = 'Hallo'; // einfache Anführungszeichen

s2 = "Welt"; // doppelte Anführungszeichen

// Template-Strings (Backticks) mit Interpolation

name = "Anna";

begrüßung = `Hallo ${name}!`; // "Hallo Anna!"

// Methoden

text = " JavaScript ist toll ";

console.log(text.trim()); // "JavaScript ist toll"

console.log(text.includes("Script")); // true

console.log(text.replace("toll", "super")); // "JavaScript ist super"

// Slicing

wort = "JavaScript";

console.log(wort.slice(0, 4)); // "Java"

console.log(wort.slice(-3)); // "ipt"

Tipp: Verwenden Sie Template-Strings (Backticks) für lesbare String-Interpolation: `Hallo ${name}!`. Sie unterstützen auch mehrzeilige Strings.

JavaScript Grundlagen im Überblick

{} Codeblöcke
if, for, function

let/const Variablendeklaration
block-scoped

typeof Typüberprüfung
typeof 42 → "number"

=== Strenger Vergleich
empfohlen

=> Arrow Function
() => {}

`${}` Template-Strings
String-Interpolation

Quick Summary

//

Kommentar

let x = 5

Variable

typeof

Typ prüfen

===

Strenger Vergleich

=>

Arrow Function

`${}`

Template-String

const name = "Anna"; · console.log(`Hallo ${name}!`); · if (x > 5) { console.log("Groß"); }