Variablen und Datentypen in JavaScript. Teil 3 des JavaScript-Kurses von Anfänger bis Fortgeschrittene in 10 Blogbeiträgen

Dies ist Teil 3 der JavaScript-Blogbeitragsreihe, die Ihnen helfen wird, das Thema Variablen und Datentypen in JavaScript zu erkunden. Am Ende dieser Reihe werden Sie alle Grundlagen kennen, die Sie benötigen, um mit dem Programmieren in JavaScript zu beginnen. Ohne weitere Umschweife, lassen Sie uns mit dem dritten Tutorial beginnen.

Variablen und Datentypen in JavaScript – Inhaltsverzeichnis:

1. Variablen
2. Grundlegende Datentypen in JavaScript

In diesem Blogbeitrag werden wir dort weitermachen, wo wir im zweiten Blogbeitrag aufgehört haben. Zu diesem Zeitpunkt sollten Sie Ihren Google Chrome-Browser geöffnet haben und spezifisch Ihre JavaScript-Konsole geöffnet haben. Wenn Sie aus irgendeinem Grund diese geschlossen haben, wäre jetzt ein guter Zeitpunkt, sie wieder zu öffnen.

Wenn Sie einen Mac verwenden, ist die Tastenkombination zum Öffnen der Konsole „Option + Command + J“, nachdem Sie Chrome geöffnet haben. Wenn Sie ein Windows-Gerät verwenden, können Sie die Tastenkombination „Control + Shift + J“ verwenden, um die JavaScript-Konsole zu öffnen, sobald Sie Chrome geöffnet haben. Alternativ können Sie auch zum Menü oben gehen und zu Ansicht -> Entwickler -> JavaScript-Konsole gehen.

Variablen

Variablen in JavaScript oder einer anderen Programmiersprache sind äußerst verbreitet. Und das aus gutem Grund. Variablen spielen eine sehr wichtige Rolle in der Programmierung. Kurz gesagt, Variablen ermöglichen es Ihnen, Daten zu speichern, um sie in Ihrem Programm zu verschieben, zu modifizieren, zu aktualisieren oder zu löschen. Es ist ein so wichtiges Konzept, dass es 3 Möglichkeiten gibt, Variablen zu erstellen. Die Programmiersprache für die Erstellung von Variablen wird als „Deklaration von Variablen“ bezeichnet, was im Grunde bedeutet, dass wir eine Variable im Speicher des Computers deklarieren.

Um die Variablen zu erstellen, verwenden wir eines der 3 Schlüsselwörter: „var“, „let“ und „const“. Eine der ersten Dinge, die Sie über diese 3 Schlüsselwörter wissen sollten, ist, dass bis 2015 nur das Schlüsselwort „var“ verwendet wurde und die Schlüsselwörter „let“ und „const“ mit einem JavaScript-Standard namens ES6 oder ES2015 eingeführt wurden.

Wenn Sie keine Ahnung haben, was ES6 oder ES2015 ist, hier ist, was Sie darüber wissen sollten. Als JavaScript erstmals herauskam, implementierten verschiedene Unternehmen unterschiedliche Versionen von JavaScript, und es musste einen Standard geben, damit Ihr Code vorhersehbar und zuverlässig in allen gängigen Browsern ausgeführt werden konnte. Eine Organisation namens ECMA (European Computer Manufacturing Association) entwickelte eine Reihe von JavaScript-Standards, die Browser implementieren sollten. Solange Sie diese Standards beim Schreiben von JavaScript befolgen, sollte Ihr Code gemäß diesen Standards vorhersehbar ausgeführt werden. Dieser Standard wird EcmaScript genannt, und sie haben seit 1997 aktualisierte Standards veröffentlicht. Und seit 2015 veröffentlichen sie diese Standards jährlich, und daher wird der zuletzt veröffentlichte Standard als ES2021 bezeichnet, während ich diesen Blogbeitrag schreibe.

Aber nicht alle Veröffentlichungen sind gleich, einige Versionsunterschiede sind nicht so groß, während andere ziemlich bedeutende Änderungen an der Sprache einführen. Die letzten wesentlichen Änderungen fanden mit ES2015 statt, auch bekannt als ES6, da es die Veröffentlichung der Version sechs der ECMAScript-Standardisierung war. Eine der wesentlichen Änderungen betraf die Variablendeklarationen.

Vor ES6 wurde nur das Schlüsselwort „var“ verwendet, und es war die einzige Möglichkeit, Variablen zu deklarieren, daher der Name „var“. Das var-Schlüsselwort brachte Flexibilität mit sich, die unerwünschte Probleme verursachen konnte. Da es in der Verwendung erheblich flexibel war, war es einfacher, Fehler mit Variablen zu machen, wenn man weniger vorsichtig war, als man sein sollte. Zum Beispiel, wenn Sie eine Variable namens „user1“ deklariert haben, können Sie eine Variable namens user1 nicht mit den neuen „let“- und „const“-Schlüsselwörtern neu deklarieren, aber das könnten Sie mit dem „var“-Schlüsselwort tun. Und wenn Sie vergessen, dass Sie bereits einen user1 in Ihrem Programm haben, würden Sie beim zweiten Mal, wenn Sie den user1 mit den Informationen eines anderen Benutzers deklarieren, die tatsächlichen Informationen des ersten Benutzers überschreiben, was effektiv die Informationen des ersten Benutzers löschen würde.

// das kann Verwirrung stiften
var user1 = "John";
var user1 = "Jack";
// wenn Sie versuchen, dasselbe zu tun 
// mit let oder const, erhalten Sie einen Fehler
let user1 = "John";
let user1 = "Jack";
// ebenso erhalten Sie auch einen Fehler
// wenn Sie dasselbe mit dem const-Schlüsselwort versuchen
const user1 = "John";
const user1 = "Jack";

Aber es ist nicht so, dass Sie das „var“-Schlüsselwort nirgendwo sehen werden, Sie werden es sicherlich sehen, insbesondere in einigen Anfängerkursen zu JavaScript. Besonders wenn sie ein paar Jahre alt sind, gibt es viele Tutorials, die Ihnen immer noch die alte Art des Schreibens von JavaScript zeigen. Aber die Realität ist, dass es einfach nicht mehr die beste Praxis ist, das zu verwenden. Stattdessen ist die beste Praxis, die Schlüsselwörter „let“ oder „const“ zu verwenden, wenn Sie Variablen deklarieren, je nach Ihren Bedürfnissen. Aber welche Bedürfnisse sprechen wir hier an? Kurz gesagt, wenn Sie planen, den Wert innerhalb einer Variablen zu ändern, möchten Sie das Schlüsselwort „let“ verwenden. Wenn Sie wissen, dass Sie den Wert in einer Variablen nicht ändern werden, sollten Sie stattdessen „const“ verwenden. Lassen Sie uns einige Beispiele für Variablendeklarationen mit sowohl let als auch const sehen.

// wir können "let" verwenden, wenn wir das Spielniveau des Benutzers verfolgen wollen
// weil wir wissen, dass es sich ändern wird
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// wir können das "const"-Schlüsselwort verwenden, wenn wir die Benutzer-ID deklarieren
// weil wir wissen, dass wir sie nicht ändern werden
const userId = 1010101999;

Wenn Sie auch aus dem obigen Code bemerkt haben, verwenden wir mit den neuesten Best Practices die Deklarationsschlüsselwörter nur einmal, und das tun wir, wenn wir die Variable zum ersten Mal deklarieren. Wenn wir später den Wert innerhalb der Variablen ändern möchten, verwenden wir kein Schlüsselwort vor dem Variablennamen.

Wenn wir auf die Daten zugreifen möchten, die diese Variablen oder Konstanten halten, können wir einfach ihren Namen verwenden. Zum Beispiel, wenn wir dem Benutzer sein Spielniveau und seine Benutzer-ID anzeigen möchten, tun wir das mit dem folgenden Code:

// wir können die Benutzer-ID am Ende des Satzes mit einem Pluszeichen hinzufügen
// wir werden dies später im Tutorial erklären
alert("Ihre Benutzer-ID ist: " + userId);
// wir können dem Benutzer auch sein Spielniveau wie folgt anzeigen
alert("Ihr aktuelles Spielniveau ist: " + gameLevel);
// alternativ können wir auch direkt die 
// Inhalte der Variablen anzeigen, indem wir sie in einem Alert zeigen
alert(userId);
alert(gameLevel);

Das Ausführen der letzten beiden Codeblöcke würde die folgenden Ausgaben liefern:

Wie benennt man seine Variablen?

Beim Benennen Ihrer Variablen gibt es bestimmte Regeln und Konventionen, die Sie berücksichtigen sollten. Die erste Überlegung ist, welche Zeichen Sie verwenden können, um Ihre Variablen zu benennen? Können sie mit einer Zahl beginnen oder enden? Gibt es eine allgemeine unausgesprochene Wahrheit beim Benennen Ihrer Variablen? Lassen Sie uns all das und mehr beantworten.

Verschiedene Programmiersprachen haben unterschiedliche Konventionen für die Benennung von Variablen. In JavaScript ist die Konvention, sie mit dem zu benennen, was als „Camel Casing“ bezeichnet wird, und es funktioniert so. Wenn der Variablenname nur ein Wort hat, schreiben Sie dieses Wort einfach in Kleinbuchstaben. Wenn es mehrere Wörter im Variablennamen gibt, schreiben Sie das erste Wort in Kleinbuchstaben und kapitalisieren Sie alle nachfolgenden Wörter und schreiben Sie sie ohne Leerzeichen oder andere Zeichen. Zum Beispiel, wenn wir ein Spiel machen, könnten wir die Variablen so benennen:

// eine Einzelwortvariable
let strength = 50;
// ein beschreibender Name, der mehrere Wörter enthält
let numberOfArrowsLeft = 145;

Zusätzlich zur Verwendung von alphabetischen Zeichen können wir auch Zahlen, das Dollarzeichen und das Unterstrichzeichen in den Variablennamen verwenden. Es ist wichtig zu beachten, dass Sie den Variablennamen nicht mit einer Zahl beginnen können, aber Sie können ihn mit einer Zahl enden.

let some$$ = 100;
let another_$ = 20;
let car1 = "Tesla";

Beachten Sie, dass nur weil es möglich ist, wir unsere Variablen nicht mit unklaren Namen oder mit Symbolen benennen möchten. Und das ist ein weiteres Thema für sich. Beim Benennen von Variablen ist es üblich, klare und beschreibende Namen zu haben. Zum Beispiel, wenn wir eine Variable benennen möchten, um anzuzeigen, wie viele Pfeile in der Tasche eines Bogenschützen übrig sind, sollten wir einen beschreibenden Namen wie den verwenden, den wir im obigen Beispiel verwendet haben. Wenn wir einfach verwenden würden:

let x = 145;

Dieser Name würde uns nichts darüber sagen, welchen Wert er hält. Und selbst ein paar Tage nach dem Schreiben dieses Codes müssten wir den umgebenden Code lesen, um zu verstehen, was diese Variable bedeuten könnte. Deshalb ist es sowohl für Ihre eigene Klarheit beim Schreiben des Codes als auch für Ihr zukünftiges Ich, das den Code möglicherweise überprüft, wirklich wichtig, dass Sie sich daran gewöhnen, Ihre Variablen klar und beschreibend zu benennen. Dies wird auch noch wichtiger, wenn Sie anfangen, mit anderen Menschen zu arbeiten und ihnen Ihren Code zu zeigen.

Zu diesem Zeitpunkt denken Sie vielleicht: Es ist großartig, dass wir die Daten herumbewegen und sogar mit Variablen ändern können. Aber über welche Daten sprechen wir hier? Warum haben wir Teile in Anführungszeichen gesetzt und einige Teile nicht in Anführungszeichen? Um all das und mehr zu beantworten, lassen Sie uns die grundlegenden Datentypen in JavaScript ansehen.

Grundlegende Datentypen in JavaScript

Verschiedene Datentypen sind gut darin, verschiedene Dinge zu tun. In diesem Tutorial über grundlegende Datentypen in JavaScript werden wir die 3 grundlegendsten Datentypen sehen, die häufig in JavaScript verwendet werden. Später in der Reihe werden wir über andere Datentypen in JavaScript lernen. Sobald Sie diese ersten 3 grundlegenden Datentypen gelernt haben, wird es viel einfacher sein, die anderen Datentypen zu lernen. Die 3 Datentypen, die wir in diesem Tutorial sehen werden, sind: Strings, Zahlen und Booleans. Ohne weitere Umschweife, lassen Sie uns mit dem ersten beginnen.

Strings

Wenn Sie dem Tutorial von Anfang an gefolgt sind, haben Sie bereits mit dem Datentyp String gearbeitet! Als wir einen Alert schrieben, der „Hallo, Welt!“ sagte, verwendeten wir den Datentyp String, um den Text zu speichern, den wir geschrieben haben. In JavaScript gibt es 3 Möglichkeiten, Strings darzustellen. Die erste Möglichkeit besteht darin, Ihren Text mit doppelten Anführungszeichen zu umgeben. Die zweite Möglichkeit besteht darin, Ihren Text mit einfachen Anführungszeichen zu umgeben. Und die dritte Möglichkeit besteht darin, Ihren Text mit Backticks zu umgeben. Alle drei sehen so aus:

const string1 = "Einige Texte hier.";
const string2 = 'Einige Texte hier.';
const string3 = `Einige Texte hier.`;

Wie Sie sehen können, sieht die mit den „Backticks“ ziemlich ähnlich aus wie die mit den einfachen Anführungszeichen, ist aber etwas lockerer. Die Verwendung von Backticks zur Erstellung von Strings ist ein Feature, das mit ES6 eingeführt wurde, um die Arbeit mit Textdaten zu erleichtern. Es bietet mehrere Vorteile gegenüber den vorherigen beiden. Üblicherweise sehen Sie entweder die doppelten Anführungszeichen oder die Backticks häufiger verwendet. Sie finden die Backticks auf der linken Taste der Zahl 1 auf Ihrer Tastatur.

Die Verwendung von doppelten Anführungszeichen sieht vertrauter aus und ist auf den ersten Blick leichter zu verstehen, aber Backticks bieten insgesamt mehr Vorteile. In diesem Beispiel funktionieren alle 3 auf die gleiche Weise, da es ein einfaches Beispiel ist. Um alle drei gleichzeitig oder sogar in derselben Zeile anzuzeigen, können wir ihre Namen schreiben und das Pluszeichen dazwischen verwenden, um die Strings aneinanderzufügen.

alert(string1 + string2 + string3);

Wie Sie sehen können, werden alle 3 direkt nach dem Ende eines von ihnen angezeigt. Das liegt daran, dass wir dem Interpreter gesagt haben, die Strings aneinanderzufügen. Wenn wir Leerzeichen dazwischen hinzufügen möchten, können wir diesen Raum immer mit einem weiteren String hinzufügen.

alert(string1 + " " + string2 + " " + string3);

Wir können auch den Datentyp einer Variablen überprüfen, indem wir „typeof“ davor schreiben. Zum Beispiel:

alert(typeof string1);

Zahlen

Wenn wir mit Zahlen in JavaScript arbeiten, verwenden wir im Allgemeinen den Datentyp „Number“. Es ist der einfachste, um damit zu beginnen, und hat fast keine Lernkurve.

Wenn wir eine Zahl eingeben, wird sie im Zahlentyp dargestellt. Und wenn wir diese Zahl einer Variablen oder einer Konstante zuweisen, haben sie ebenfalls den Datentyp Zahl.

let someNumber = 5;
const score = 90;
alert(typeof someNumber);
alert(typeof score);

Zusätzlich zu regulären Zahlen bietet JavaScript auch andere Funktionen, die uns helfen können, sichereren und vorhersehbareren Code zu schreiben. Zum Beispiel können wir in JavaScript etwas namens „Infinity“ haben, und es ist genau das, was es klingt. Darüber hinaus kann es positive Unendlichkeit und negative Unendlichkeit sein. Lassen Sie uns sehen, wie das mit einem Beispiel aussieht.

// wir können durch Null teilen und das wirft keinen Fehler
// stattdessen gibt es Inifinity zurück
alert(13 / 0);

// ebenso können wir auch negative Unendlichkeit erhalten
alert(-25 / 0);

Wie Sie bereits in einigen Beispielen gesehen haben, können wir auch arithmetische Operationen mit Zahlen durchführen. Von der grundlegenden Addition, Subtraktion, Multiplikation, Division bis hin zu spezifischeren arithmetischen Operationen in der Programmierung. Wir werden mehr darüber im nächsten Tutorial.

Booleans

Booleans sind in der Programmierung äußerst verbreitet. Die meiste Zeit verwenden wir nicht explizit ihre Namen, sondern nutzen ihre einfache Eigenschaft im Hintergrund. Ein Boolean kann zwei Werte haben: „true“ und „false“, und sie sind genau das, was sie klingen. Oft werden Sie Code schreiben, um einen Vergleich anzustellen und eine Schlussfolgerung basierend auf dem Ergebnis dieses Vergleichs zu ziehen.

Viele dieser Vergleiche stammen aus realen Szenarien und folgen einer einfachen Logik. Ist das Licht an oder aus? Regnet es draußen? Hast du Hunger? Ist diese Zahl größer als die andere Zahl? Ist dieser Absatz länger als der nächste? Ist der Benutzer auf einem großen Bildschirm?

Es gibt viele Situationen, in denen Sie nicht nur einen Zahlenwert oder einen Stringwert für Dinge haben möchten, sondern tatsächlich eine Ja- oder Nein-Antwort wünschen. Kurz gesagt, in diesen Fällen verwenden wir den Datentyp Boolean.

// ist die erste Zahl größer als die zweite
alert(13 > 12);

// überprüfen Sie den Variablentyp
let isRainyOutside = true;
alert(typeof isRainyOutside);

Das Ausführen dieses Codes würde uns die folgende Ausgabe geben:

Jetzt wissen Sie über Variablen und Datentypen in JavaScript Bescheid. Im nächsten Blogbeitrag werden wir diese Datentypen verwenden, um Entscheidungen in unserem Code zu treffen und noch viel mehr!

Wenn Ihnen unsere Inhalte gefallen, vergessen Sie nicht, der Facebook-Community beizutreten!