11 wichtige JavaScript-Konzepte, die jeder Senior kennen sollte 👨‍💻

🧠 JavaScript mag einfach sein, aber unter der Haube verbirgt es eine Menge interessanter Dinge. Auch wenn Sie bereits seit Jahren mit der Sprache arbeiten, hilft Ihnen das Wissen über ihre interne Funktionsweise, Feinheiten und Fallstricke, einen saubereren, vorhersehbaren und effizienteren Code zu schreiben. Dieser Artikel ist eine detaillierte Anleitung zu den wichtigsten Funktionen von JavaScript, die nicht nur für Anfänger, sondern auch für erfahrene Entwickler nützlich sein wird.

🚀 Themen, die wir behandeln werden:

• Heben (Aufstieg)

• Temporäre tote Zone

• Function Declaration vs Function Expression

• Shallow Copy vs Deep Copy (oberflächliche und tiefe Kopie)

• Object.assign

• Slice vs Splice

• forEach vs Map

• Global Execution Context

• Polyfilling (Polyfills)

• Tiefes Eintauchen in map()

• Typkoersion (Type Coercion)

🪄 1. Heben (Hoisting)

Hoisting ist einer der rätselhaftesten JavaScript-Mechanismen für Anfänger. Dies ist das Verhalten der Engine, bei dem Variablen- und Funktionsdeklarationen zu Beginn ihres Sichtbereichs "auftauchen".

Dies bedeutet, dass Sie versuchen können, auf eine Variable oder Funktion zuzugreifen, bevor sie tatsächlich deklariert wird - und manchmal funktioniert dies sogar:

console.log(a); // undefined
var a = 10;

var — erscheint und initialisiert undefined, während let und const erscheinen, aber nicht initialisiert werden. Daher verursacht der folgende Code einen Fehler:

console.log(b); // ReferenceError
let b = 20;

Was die Funktionen betrifft, so gibt es hier einen Unterschied zwischen function declaration und function expression besonders wichtig:

console.log(getNum()); // OK
function getNum() { return 42; }

console.log(getArrow()); // TypeError: getArrow is not a function
var getArrow = () => 42;

📸 Fotoaufforderung: "Infografik zum Heben in JavaScript, mit Trennung von var/let/const und function/function expression"

🕳 2. Temporal Dead Zone (TDZ)

Eine temporäre tote Zone ist ein Zeitraum, in dem eine Variable bereits deklariert wurde (über let oder const), aber noch nicht initialisiert wurde. In TDZ verursacht jeder Versuch, auf eine Variable zuzugreifen, ReferenceError.

console.log(value); // ReferenceError
let value = 100;

Dieser Mechanismus schützt uns vor Fehlern und macht das Verhalten des Codes vorhersehbarer. TDZ gilt auch für Funktionen, die als const und let definiert sind.

🧩 3. Function Declaration vs Function Expression

Function Declaration

function greet() {
  console.log("Hello!");
}

Solche Funktionen werden eingeblendet und können überall im Geltungsbereich aufgerufen werden. Dies ist nützlich, wenn die Funktionslogik im gesamten Skript verfügbar sein soll.

Function Expression

const greet = function() {
  console.log("Hello!");
}

Hier wird die Funktion erst verfügbar, nachdem die Variable zugewiesen wurde. Dies ist ideal für die Verwendung in Closures oder Callbacks.

📦 4. Shallow Copy vs Deep Copy

Oberflächliche Kopie (Shallow Copy)

Es kopiert nur die oberste Ebene der Objekteigenschaften. Verschachtelte Objekte verweisen weiterhin auf dieselben Speicherbereiche:

const obj1 = { name: "Olga", address: { city: "Kazan" } };
const obj2 = { ...obj1 };
obj2.address.city = "Ufa";
console.log(obj1.address.city); // "Ufa"

Tiefes Kopieren (Deep Copy)

Ermöglicht das vollständige Kopieren eines Objekts, einschließlich untergeordneter Strukturen:

const deepCopy = structuredClone(obj1);
deepCopy.address.city = "Sochi";

Alternativen:

• JSON.stringify/parse — funktioniert nicht mit Funktionen und undefined

• structuredClone — moderne Methode

• Benutzerdefinierte rekursive Funktion

📸 Fotoaufforderung: "Vergleich von Oberflächen- und Tiefenkopieren mit Visualisierung von verschachtelten Objekten"

🔄 5. Object.assign()

Mit dieser Methode können Sie Eigenschaften von einem oder mehreren Objekten in das Ziel kopieren:

const objA = { name: "Alice" };
const objB = { age: 30 };
const result = Object.assign({}, objA, objB);

Besonderheiten:

• Gibt das Zielobjekt zurück

• Kopiert nur die eigenen aufgezählten Eigenschaften

• Überschreibt gleichnamige Eigenschaften

Alternative - Spread-Syntax: { ...objA, ...objB }

✂️ 6. Slice vs Splice

slice() und splice() — Array-Methoden, die oft miteinander verwechselt werden:

• slice(start, end) - gibt ein neues Array zurück, ohne das Original zu ändern

• splice(start, deleteCount, ...items) — ändert das Array an Ort und Stelle

const arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3)); // [2, 3]
console.log(arr.splice(1, 2, 9, 9)); // [2, 3], arr jetzt [1, 9, 9, 4, 5]

🔁 7. forEach vs map

Beide Methoden durchlaufen das Array, aber es gibt Nuancen:

[1, 2, , 4].map(x => x || 0); // Wir verarbeiten ein Sparse-Array

Wenn Sie die Ausführung abbrechen müssen, verwenden Sie for, for...of, some oder every.

🌍 8. Global Execution Context

Ausführungskontext - Dies ist die Umgebung, in der der Code ausgeführt wird. Es gibt zwei Arten:

1. Global - wird zuerst erstellt, enthält globale Variablen, Funktionen und das Objekt this.

2. Funktional — wird erstellt, wenn jede Funktion aufgerufen wird.

Nach Abschluss des Skripts wird der globale Kontext gelöscht.

🛠 9. Polyfilling

Polyfills ermöglichen es, das Verhalten neuer Sprachfunktionen in alten Browsern zu emulieren.

Beispiel: Polyfill für Array.prototype.includes:

if (!Array.prototype.includes) {
  Array.prototype.includes = function(el) {
    return this.indexOf(el) !== -1;
  };
}

Polyfills sind besonders wichtig bei der Entwicklung von Cross-Browser-Lösungen.

🗺 10. Map Deep Dive

Die Methode map() nimmt drei Argumente an:

• Wert

• Index

• Quellarray

const data = [1, 2, , 4];
const result = data.map((val, idx, arr) => val ? val * 2 : (arr[idx - 1] || 1));

Besonderheiten:

• Fehlende Elemente (empty slots) werden ignoriert

• Neue Elemente, die während der Ausführung hinzugefügt wurden, werden nicht verarbeitet

• Vor der Ausführung entfernt — werden übersprungen

⚖️ 11. Type Coercion (Typumwandlung)

Implizit:

10 + "2"; // "102"
10 - "2"; // 8
true + 1; // 2
[] + 1;   // "1"
null + 1; // 1
undefined + 1; // NaN

Explizit (explizit):

String(123);
Number("456");
Boolean(0); // false

Es ist wichtig zu verstehen, wie und wann die Konvertierung stattfindet, um unerwartete Fehler zu vermeiden.

📝 Fazit

📚 Ein tiefes Verständnis der inneren Funktionsweise von JavaScript hilft Ihnen, nicht nur Code zu schreiben, sondern die Architektur von Anwendungen zuverlässiger und verständlicher zu gestalten. Dies ist besonders wichtig in der Teamentwicklung, wo Lesbarkeit und Vorhersagbarkeit des Verhaltens entscheidend sind.

Nachdem Sie Themen wie Heben, TDZ, Funktionstypen, Kopieren von Objekten, Funktionen von map und forEach sowie das Heruntersetzen von Typen analysiert haben, erreichen Sie eine Ebene, auf der JavaScript nicht mehr nur eine Sprache ist, sondern zu einem Werkzeug für die Feinabstimmung der Logik wird.