JavaScript-Grundlagen

Dieser Artikel erklärt die Grundlagen von JavaScript.

YouTube Video

Ausführung von Hallo Welt!

Übersicht über JavaScript

JavaScript ist eine der am weitesten verbreiteten Programmiersprachen in der Webentwicklung. Es wird hauptsächlich verwendet, um dynamische Elemente zu Webseiten hinzuzufügen, Benutzeroberflächen zu manipulieren, Daten zu übertragen und Animationen zu erstellen. Es kann clientseitig (in einem Browser) und serverseitig mit Technologien wie Node.js betrieben werden. Aufgrund seiner Einfachheit und Flexibilität ist es für Anfänger leicht zu erlernen und wird von professionellen Entwicklern häufig genutzt.

Variablen in JavaScript

Variablen in JavaScript sind wie Behälter, die verwendet werden, um Daten zu speichern und wiederzuverwenden. Durch die Verwendung von Variablen können Sie Werte in Ihrem Programm verwalten und manipulieren.

Variablendeklaration

In JavaScript gibt es drei Schlüsselwörter, um Variablen zu deklarieren.

• var: Eine alte Methode, Variablen zu deklarieren, aber der Umgang mit seinem Scope ist komplex und erfordert Vorsicht. Es basiert auf dem Funktions-Scope.

1var x = 10;

• let: Eingeführt mit ES6, ist es eine Möglichkeit, Variablen mit Block-Scope zu deklarieren. Es kann neu zugewiesen, aber nicht im gleichen Scope erneut deklariert werden.

1let y = 20;

• const: Wird verwendet, um Variablen zu deklarieren, die unveränderlich sind (Konstanten). Es hat Block-Scope und kann nach der Deklaration weder neu zugewiesen noch neu deklariert werden.

1const z = 30;

Gültigkeitsbereich

Variablen haben das Konzept eines Gültigkeitsbereichs.

Globaler Gültigkeitsbereich

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• Globale Variablen sind von überall aus zugänglich. Mit var deklarierte Variablen haben globalen oder Funktions-Gültigkeitsbereich, aber let und const haben Block-Scope.

Block-Gültigkeitsbereich

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• Block-Scope: Variablen, die mit let oder const deklariert werden, sind nur innerhalb von {} (geschweifte Klammern) gültig.

• Ein Fehler tritt auf, wenn von außerhalb der {} (geschweiften Klammern) zugegriffen wird.

Funktions-Gültigkeitsbereich

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• Funktions-Scope: Innerhalb einer Funktion definierte Variablen und Funktionen können außerhalb der Funktion nicht aufgerufen werden. Mit var deklarierte Variablen innerhalb einer Funktion gehören zu diesem Gültigkeitsbereich.

• In diesem Beispiel kann die Variable functionVar von außerhalb der {} (geschweiften Klammern) zugegriffen werden, solange sie sich innerhalb des Funktionsbereichs befindet. Andererseits führt der Zugriff auf die Variable functionScoped von außerhalb des Funktionsbereichs zu einem Fehler.

Daher haben mit var deklarierte Variablen nur Funktions-Scope und keinen Block-Scope, was das Risiko birgt, in unerwarteten Bereichen verwendet zu werden. Es ist vorzuziehen, const für unveränderliche Variablen und in der Regel let zu verwenden, während die Verwendung von var möglichst vermieden werden sollte.

Datentypen

JavaScript-Variablen können Werte verschiedener Datentypen speichern. Es gibt string zur Verarbeitung von Text und number zur Verarbeitung numerischer Werte.

Die Hauptdatentypen sind wie folgt:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• Primitive Typen:
  • number: Verarbeitet numerische Werte (Ganzzahlen und Fließkommazahlen).
  • string: Verarbeitet Zeichenketten.
  • boolean: Behandelt boolesche Werte true oder false.
  • null: Repräsentiert explizit einen Wert von 'nichts'.
  • undefined: Ein Wert, der automatisch Variablen zugewiesen wird, die nicht initialisiert wurden.
  • Symbol: Ein Datentyp, der genutzt wird, um einzigartige Werte zu erstellen.

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• Objekttypen:
  • Object: Eine Datenstruktur mit mehreren Eigenschaften.
  • Array: Eine Liste, die mehrere Werte enthält.
  • Function: Ein Funktionsobjekt.

Zuweisung und Neuzuweisung von Variablen

Variablen, die mit let oder var deklariert wurden, können neu zugewiesen werden, während const nach der Deklaration nicht neu zugewiesen werden kann.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

Variable Hoisting

In JavaScript gibt es das Phänomen, dass Variablendeklarationen an den Anfang ihres Scopes 'gehoistet' werden. Variablen, die mit var deklariert wurden, werden gehoben, aber die Verwendung von let oder const vor der Deklaration führt zu einem Fehler.

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

• In diesem Fall werden mit var deklarierte Variablen gehoben, und ihre Werte werden ausgegeben.

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

• Mit let deklarierte Variablen werden nicht gehoben, was zu einem Fehler führt.

Richtiger Umgang mit Variablen

Beachten Sie die folgenden Punkte für den richtigen Umgang mit Variablen.

• Verwenden Sie bevorzugt const und vermeiden Sie var.
• Befolgen Sie die Konventionen zur Variablenbenennung.
  • Verwenden Sie camelCase, wie z. B. userName oder totalPrice.
  • Vermeiden Sie mehrdeutige Namen wie data oder value und verwenden Sie aussagekräftige Namen, um die Lesbarkeit zu verbessern.
  • Ein Variablenname darf nicht mit einer Zahl beginnen, daher sind Namen wie 1variable nicht zulässig.
• Übermäßige Nutzung globaler Variablen kann zu Unklarheiten im Gültigkeitsbereich und zu Fehlern führen. Vermeiden Sie deren Verwendung, wann immer möglich.

Zusammenfassung

• var: Eine alte Methode zur Variablendeklaration mit Funktions-Scope.
• let: Eine blockbasierte Variable, die neu zugewiesen werden kann.
• const: Eine blockbasierte Variable, die nicht neu zugewiesen werden kann (Konstante).
• Es ist wichtig, Variablen entsprechend ihrer Datentypen zu verwenden und ihren Scope zu berücksichtigen.

Was sind Escape-Zeichen in JavaScript?

Escape-Zeichen sind eine Methode, um Zeichen mit besonderer Bedeutung innerhalb von regulären Zeichenketten darzustellen. In JavaScript werden Escape-Zeichen mit einem Backslash \ eingeleitet, um spezielle Effekte einer Zeichenkette hinzuzufügen oder Steuerzeichen einzubetten. Escape-Zeichen sind nützlich, um Elemente wie Zeilenumbrüche, Tabs oder Anführungszeichen in eine Zeichenkette aufzunehmen.

Beispiele für die Verwendung von Escape-Zeichen

Nachfolgend finden Sie einige Codebeispiele, die Escape-Zeichen verwenden.

Escape von doppelten und einfachen Anführungszeichen

Verwenden Sie Escape-Zeichen, um doppelte oder einfache Anführungszeichen innerhalb einer Zeichenkette darzustellen.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

Escape von Backslashes

Um einen Backslash selbst in eine Zeichenkette einzufügen, entziehen Sie ihn mit \.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

Escape von Zeilenumbrüchen und Tabs

Sie können Zeilenumbrüche und Tabs einfügen, um lange Zeichenketten besser lesbar zu machen.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Escape von Unicode-Zeichen

Mit Unicode-Escape-Sequenzen können Sie bestimmte Zeichen mit hexadezimalen Codes darstellen.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

Notizen

Exzessiver Gebrauch von Escape-Zeichen kann die Lesbarkeit schädigen

Der übermäßige Einsatz von Escape-Zeichen kann die Lesbarkeit Ihres Codes verringern. Es ist besonders wichtig, Escape-Zeichen in langen Zeichenketten sparsam zu verwenden.

Erwägen Sie die Verwendung von Template-Strings

In JavaScript ermöglichen Template-Strings mit Backticks, Zeilenumbrüche oder eingebettete Ausdrücke ohne Escape-Zeichen einzufügen.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

Zusammenfassung

Escape-Zeichen sind unerlässlich, um spezielle oder Steuerzeichen innerhalb von Zeichenketten darzustellen. Indem Sie einfache oder doppelte Anführungszeichen escapen und Zeilenumbrüche oder Tabs hinzufügen, können Sie flexiblere Zeichenketten erstellen. Ein übermäßiger Einsatz von Escape-Zeichen kann den Code jedoch schwerer lesbar machen, daher sollten Sie gegebenenfalls Template-Strings in Betracht ziehen.

JavaScript-Versionen

JavaScript hat eine Standardspezifikation namens ECMAScript (ES). JavaScript hat sich auf Grundlage dieses Standards weiterentwickelt. Nachfolgend finden Sie eine kurze Beschreibung der wichtigsten Versionen.

• ES3 (1999)

  Die erste weit verbreitete Version. Grundlegende Syntax und Funktionen wurden eingeführt.

• ES5 (2009)

  Einführung des strict mode und neue Funktionen wie Array.prototype.forEach, Object.keys usw. wurden hinzugefügt.

• ES6 / ES2015 (2015)

  Ein größeres Update von JavaScript wurde durchgeführt. Viele grundlegende Funktionen des modernen JavaScript, wie let, const, arrow functions, classes, promises, modules usw., wurden eingeführt.

• ES7 / ES2016 (2016)

  Array.prototype.includes und der Exponentiation Operator (**) wurden hinzugefügt.

• ES8 / ES2017 (2017)

  async/await wurde eingeführt, was das Schreiben asynchroner Prozesse erleichtert.

• ES9 / ES2018 (2018)

  Asynchrone Iteratoren und Rest/Spread Properties wurden hinzugefügt.

• ES10 / ES2019 (2019)

  flatMap und Object.fromEntries wurden hinzugefügt.

• ES11 / ES2020 (2020)

  Optional Chaining (?.) und der Nullish Coalescing Operator (??) wurden hinzugefügt, wodurch Code einfacher und sicherer geschrieben werden kann.

• ES12 / ES2021 (2021)

  String.prototype.replaceAll und Promise.any wurden unter anderem hinzugefügt.

• ES13 / ES2022 (2022)

  Array.prototype.at und Klassen-private-Felder (#field) wurden unter anderem hinzugefügt.

• ES14 / ES2023 (2023)

  Array.prototype.toSorted und Symbol.prototype.description wurden unter anderem hinzugefügt.

• ES15 / ES2024 (2024)

  Promise.withResolvers für einfacheres Promise-Management und skalierbare ArrayBuffer wurden unter anderem hinzugefügt.

Das aktuelle JavaScript wird jedes Jahr aktualisiert, und selbst in der neuesten Version werden neue Funktionen hinzugefügt.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video