JavaScript Funktionen & Scope

6 Kernkonzepte

Die wichtigsten Konzepte zu Funktionen und Scope in JavaScript: function · Arrow Functions · Scope · Closures · Parameter · IIFE Funktionen sind die Bausteine jeder JavaScript-Anwendung. Dieses Cheatsheet erklärt Deklarationen, Arrow Functions, Scope, Closures und fortgeschrittene Techniken.

Funktionen – Deklarationen & Ausdrücke

function name() { } · const f = function() { }

// Funktionsdeklaration (wird gehoist) function grüßen(name) { return `Hallo ${name}!`; } // Funktionsausdruck (kein Hoisting) const summe = function(a, b) { return a + b; };

Funktionen sind in JavaScript erstklassige Bürger. Es gibt zwei Hauptwege, sie zu definieren: Funktionsdeklarationen (werden gehoist) und Funktionsausdrücke (kein Hoisting).

Vergleich

Typ	Syntax	Hoisting
Deklaration	function name() { }	Ja
Ausdruck	const f = function() { }	Nein
Arrow Function	const f = () => { }	Nein
Named Function Expression	const f = function name() { }	Nein

Beispiele

// Funktionsdeklaration

function quadrat(x) {

return x * x;

}

// Funktionsausdruck

const würfel = function(x) {

return x * x * x;

};

// Aufruf

console.log(quadrat(5)); // 25

console.log(würfel(3)); // 27

Tipp: Funktionsdeklarationen werden gehoist – Sie können sie vor der Definition aufrufen. Funktionsausdrücke und Arrow Functions nicht – verwenden Sie sie daher nach der Definition.

Arrow Functions – Kompakt & Modern

() => { } · () => wert · (a, b) => a + b

// Ohne Parameter, mit Block const hallo = () => { return "Hallo!"; }; // Ein Parameter, implizites Return const quadrat = x => x * x; // Mehrere Parameter, mit Block const summe = (a, b) => { return a + b; };

Arrow Functions sind eine kürzere Syntax für Funktionsausdrücke. Sie haben kein eigenes this und eignen sich besonders für Callbacks und funktionale Programmierung.

Arrow Function Varianten

Syntax	Beschreibung
() => wert	Kein Parameter, implizites Return
x => x * 2	Ein Parameter, implizites Return (Klammern optional)
(a, b) => a + b	Mehrere Parameter, implizites Return
() => { return wert; }	Kein Parameter, explizites Return (Block)
(a, b) => { const sum = a + b; return sum; }	Mehrere Anweisungen im Block

Beispiele

// Implizites Return (ein Ausdruck)

const verdoppeln = x => x * 2;

// Mit Block (mehrere Anweisungen)

const berechnen = (a, b) => {

const ergebnis = a + b;

return ergebnis;

};

// Objekt zurückgeben (Klammern nötig)

const user = (name) => ({ name, alter: 30 });

// Als Callback (häufigste Verwendung)

[1, 2, 3].map(x => x * 2); // [2, 4, 6]

Tipp: Bei Arrow Functions mit implizitem Return entfällt return und die geschweiften Klammern. Für Objekte brauchen Sie zusätzliche Klammern: () => ({ key: value }).

Scope – Global, Function, Block

var · let · const · Lexical Scope

// Globale Variable globalVar = "global"; // ohne var/let/const // Function Scope function test() { var x = 10; // nur in der Funktion sichtbar } // Block Scope (let/const) if (true) { let y = 20; // nur in diesem Block sichtbar }

Scope definiert die Sichtbarkeit von Variablen. JavaScript hat Global Scope, Function Scope (var) und Block Scope (let, const).

Scope-Typen im Vergleich

Schlüsselwort	Scope	Hoisting	Neu zuweisbar
var	Function Scope	Ja (undefined)	Ja
let	Block Scope	Ja (temporal dead zone)	Ja
const	Block Scope	Ja (temporal dead zone)	Nein (Konstante)
(kein)	Global Scope	Ja	Ja

Beispiele

// var: function-scoped

if (true) {

var x = 5;

}

console.log(x); // 5 (trotz Block)

// let/const: block-scoped

if (true) {

let y = 5;

const z = 10;

}

// console.log(y); // ReferenceError

// Lexical Scope (verschachtelte Funktionen)

function außen() {

let text = "Außen";

function innen() {

console.log(text); // Zugriff auf äußere Variable

}

innen();

}

Tipp: Bevorzugen Sie const für Werte, die sich nicht ändern, und let für veränderbare Variablen. Vermeiden Sie var – es führt oft zu unerwarteten Verhalten durch Function Scope.

Closures – Funktionen mit Erinnerung

Funktion + Lexical Environment

// Closure Beispiel function zähler() { let count = 0; return function() { count++; return count; }; } const inc = zähler(); inc(); // 1 inc(); // 2

Closures entstehen, wenn eine innere Funktion auf Variablen einer äußeren Funktion zugreift, auch nachdem die äußere Funktion bereits zurückgekehrt ist. Sie "erinnern" sich an ihren lexikalischen Scope.

Typische Anwendungen

Anwendung	Beschreibung
Private Variablen	Daten kapseln und vor externem Zugriff schützen
Function Factory	Funktionen mit vorkonfigurierten Parametern erzeugen
Event Handler	Zustand in Event-Callbacks speichern
Currying	Funktionen schrittweise mit Argumenten versorgen

Beispiele

// Private Variable mit Closure

function geheimnis() {

let secret = "🔐";

return {

getSecret: function() { return secret; },

setSecret: function(neu) { secret = neu; }

};

}

const obj = geheimnis();

console.log(obj.getSecret()); // 🔐

// Factory Function mit Closure

function multiplizierer(faktor) {

return function(zahl) {

return zahl * faktor;

};

}

const doppelt = multiplizierer(2);

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

Tipp: Closures sind ein mächtiges Konzept, das in vielen JavaScript-Patterns (Modul-Pattern, Factory-Funktionen, Curry) verwendet wird. Sie ermöglichen funktionale Programmierung in JavaScript.

Parameter – Default, Rest, Destructuring

default = wert · ...rest · { } = { }

// Default Parameter function grüßen(name = "Gast") { return `Hallo ${name}!`; } // Rest Parameter function summe(...zahlen) { return zahlen.reduce((a, b) => a + b, 0); } // Destructuring function user({ name, alter = 0 }) { return `${name} ist ${alter} Jahre alt`; }

Parameter in JavaScript sind flexibel. Sie können Default-Werte setzen, Rest-Parameter für variable Argumente verwenden und Destructuring für Objekte und Arrays nutzen.

Beispiele

// Default Parameter

function begrüßung(name = "Welt") {

return `Hallo ${name}!`;

}

console.log(begrüßung()); // "Hallo Welt!"

// Rest Parameter (variable Anzahl)

function max(...zahlen) {

return Math.max(...zahlen);

}

console.log(max(1, 5, 3, 9)); // 9

// Destructuring mit Default

function printUser({ name, alter = 18, city = "Unbekannt" }) {

console.log(`${name} (${alter}) aus ${city}`);

}

printUser({ name: "Anna", alter: 25, city: "Berlin" });

// "Anna (25) aus Berlin"

// Array Destructuring

function firstLast([first, ...rest]) {

return { first, rest };

}

Tipp: Rest-Parameter (...rest) sammeln alle übrigen Argumente in einem Array. Die Spread-Syntax (...array) macht das Gegenteil – sie entpackt ein Array in einzelne Werte.

IIFE – Sofort ausgeführte Funktion

(function() { })(); · (() => { })();

// IIFE mit function (function() { console.log("Sofort ausgeführt!"); })(); // IIFE mit Arrow Function (() => { console.log("Arrow IIFE"); })(); // Mit Parametern ((x, y) => { console.log(x + y); })(5, 3); // 8

IIFE (Immediately Invoked Function Expression) ist eine Funktion, die sofort nach ihrer Definition ausgeführt wird. Sie wird verwendet, um einen neuen Scope zu erzeugen und globale Variablen zu vermeiden.

Anwendungen

Zweck	Beschreibung
Scope-Isolation	Verhindert Pollution des globalen Scope
Modul-Muster	Erzeugt private Variablen und Methoden
Initialisierung	Führt Code einmalig beim Laden aus
Async-Aufrufe	Kombination mit async/await möglich

Beispiele

// Klassische IIFE für Modul

const modul = (function() {

let private = "geheim";

return {

public: function() {

return private;

}

};

})();

console.log(modul.public()); // "geheim"

// IIFE mit async/await

(async () => {

const data = await fetch("https://api.example.com");

console.log(data);

})();

// IIFE mit Parameter

((a, b) => {

console.log(`Summe: ${a + b}`);

})(10, 20); // "Summe: 30"

Tipp: IIFEs werden heute oft durch ES-Module (import/export) ersetzt. Sie sind aber immer noch nützlich für Skripte, die einen isolierten Scope benötigen oder älteren Code unterstützen.

JavaScript Funktionen & Scope im Überblick

function Funktionsdeklaration
Hoisting, this-Kontext

() => Arrow Function
Kein eigenes this, kompakt

Scope Global, Function, Block
var, let, const

Closure Funktion + Lexical Environment
Private Variablen

...rest Rest Parameter
Variable Argumente

IIFE Sofort ausgeführte Funktion
Scope-Isolation

Quick Summary

function

Funktion deklarieren

() =>

Arrow Function

let/const

Block Scope

Closure

Funktion + Scope

...rest

Rest Parameter

IIFE

Sofort ausführen

const f = (a, b) => a + b; · function sum(...args) { return args.reduce((a,b) => a+b); }