Variablen und Datentypen in JavaScript. Teil 3 JavaScript-Kurs vom Anfänger bis zum Fortgeschrittenen in 10 Blogbeiträgen

Dies ist Teil 3 der JavaScript-Blogbeitragsserie, die Ihnen helfen wird, das Thema Variablen und Datentypen in JavaScript zu erkunden. Am Ende dieser Serie kennen Sie alle Grundlagen, die Sie wissen müssen, um mit dem Programmieren in JavaScript zu beginnen. Beginnen wir ohne weiteres mit dem dritten Tutorial.

Variablen und Datentypen in JavaScript – Inhaltsverzeichnis:

1. Variablen
2. Grundlegende Datentypen in JavaScript

In diesem Blogpost machen wir da weiter, wo wir im zweiten Blogpost aufgehört haben. Zu diesem Zeitpunkt sollten Sie Ihren Google Chrome-Browser und insbesondere Ihre JavaScript-Konsole geöffnet haben. Wenn Sie sie aus irgendeinem Grund geschlossen haben, wäre es ein guter Zeitpunkt, sie wieder zu öffnen.

Wenn Sie sich auf einem Mac befinden, drücken Sie nach dem Öffnen von Chrome die Tastenkombination zum Öffnen der Konsole, indem Sie „Wahltaste + Befehlstaste + J“ drücken. Wenn Sie ein Windows-Gerät verwenden, können Sie die Tastenkombination „Strg + Umschalt + J“ verwenden, um die JavaScript-Konsole zu öffnen, sobald Sie Chrome öffnen. Oder Sie können auch in das Menü oben gehen und zu Ansicht -> Entwickler -> JavaScript-Konsole gehen.

Variablen

Variablen in JavaScript oder jeder anderen Programmiersprache sind sehr verbreitet. Und das aus gutem Grund. Variablen spielen eine sehr wichtige Rolle bei der Programmierung. Kurz gesagt, Variablen ermöglichen es Ihnen, einige Daten zu speichern, um die Daten in Ihrem Programm zu verschieben, zu ändern, zu aktualisieren oder zu löschen. Es ist in der Tat ein so wichtiges Konzept, dass es drei Möglichkeiten gibt, wie Sie Variablen erstellen können. Der Programmierjargon zum Erstellen von Variablen wird „Variablen deklarieren“ genannt, was im Grunde bedeutet, dass wir eine Variable im Computerspeicher deklarieren.

Um die Variablen zu erstellen, verwenden wir eines der 3 Schlüsselwörter: „var“, „let“ und „const“. Eines 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, finden Sie hier, was Sie darüber wissen sollten. Als JavaScript zum ersten Mal auf den Markt kam, implementierten verschiedene Unternehmen verschiedene 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. Also entwickelte eine Organisation namens ECMA (European Computer Manufacturing Association) eine Reihe von JavaScript-Standards, die Browser implementieren sollten. Solange Sie diese Standards beim Schreiben von JavaScript befolgen, sollte Ihr Code vorhersehbar gemäß diesen Standards ausgeführt werden. Dieser Standard heißt EcmaScript und sie haben die aktualisierten Standards seit 1997 veröffentlicht. Und seit 2015 haben sie diese Standards jährlich veröffentlicht, und daher heißt der neueste veröffentlichte Standard zum Zeitpunkt des Schreibens dieses Blogbeitrags ES2021.

Aber nicht alle Versionen sind gleich, einige Versionsunterschiede sind nicht so groß, während einige ziemlich große Änderungen an der Sprache einführen. Die letzten großen Änderungen erfolgten mit ES2015, auch ES6 genannt, da es die Veröffentlichung der sechsten Version 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 Schlüsselwort var war mit Flexibilitäten ausgestattet, die unerwünschte Probleme verursachen konnten. Da es sehr flexibel in der Verwendung war, war es einfacher, Fehler mit Variablen zu machen, wenn Sie nicht vorsichtig waren, als Sie sein sollten. Wenn Sie beispielsweise eine Variable namens „user1“ deklariert haben, können Sie eine Variable namens user1 nicht mit den neuen Schlüsselwörtern „let“ und „const“ erneut deklarieren, aber Sie könnten dies mit dem Schlüsselwort „var“ tun. Und wenn Sie vergessen, dass Sie bereits einen Benutzer1 in Ihrem Programm haben, würden Sie beim zweiten Mal, wenn Sie den Benutzer1 mit anderen Benutzerinformationen deklarieren, die tatsächlichen Informationen des ersten Benutzers überschreiben, wodurch die Informationen des ersten Benutzers effektiv gelöscht würden.

// this can cause confusion
var user1 = "John";
var user1 = "Jack";
// if you try to do the same thing 
// with let or const you will get an error
let user1 = "John";
let user1 = "Jack";
// likewise you will also get an error
// if you try to do the same thing with the const keyword
const user1 = "John";
const user1 = "Jack";

Aber es ist nicht so, dass Sie das Schlüsselwort „var“ nirgendwo sehen werden, Sie werden es sicherlich sehen, besonders in einigen JavaScript-Kursen für Anfänger. 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 Methode ist, dies zu verwenden. Stattdessen ist es am besten, je nach Bedarf beim Deklarieren von Variablen die Schlüsselwörter „let“ oder „const“ zu verwenden. Aber von welchen Bedürfnissen sprechen wir? Kurz gesagt, wenn Sie vorhaben, den Wert in einer Variablen zu ändern, sollten Sie das Schlüsselwort „let“ verwenden. Wenn Sie wissen, dass Sie den Wert in einer Variablen nicht ändern, sollten Sie „const“ verwenden. stattdessen. Sehen wir uns einige Beispiele für Variablendeklarationen an, die sowohl let als auch const verwenden.

// we can use "let" when we want to track the game level of the user
// because we know that it will change
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// we can use the "const" keyword when declaring user ID
// because we know that we won't change it
const userId = 1010101999;

Wie Sie auch anhand des obigen Codes bemerkt haben, schreiben wir mit den neuesten Best Practices die deklarierenden Schlüsselwörter nur einmal, und zwar bei der ersten Deklaration der Variablen. Wenn wir später den Wert innerhalb der Variablen ändern wollen, verwenden wir kein Schlüsselwort vor dem Variablennamen.

Wenn wir auf die Daten zugreifen möchten, die diese Variablen oder Konstanten enthalten, können wir einfach ihren Namen verwenden. Wenn wir dem Benutzer beispielsweise sein Spiellevel und seine Benutzer-ID anzeigen möchten, können wir dies mit dem folgenden Code tun:

// we can add the userID to the end of the sentence with a plus sign
// we will explain this later on in the tutorial
alert("Your user ID is: " + userId);
// we can also show the user their game level like the following
alert("Your current game level is: " + gameLevel);
// alternatively we can directly display 
// the contents of the variables by showing them inside an alert
alert(userId);
alert(gameLevel);

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

Wie benennen Sie Ihre Variablen?

Bei der Benennung Ihrer Variablen sollten Sie bestimmte Regeln und Konventionen beachten. 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 gemeinsame unausgesprochene Wahrheit bei der Benennung Ihrer Variablen? Lassen Sie uns all das und mehr beantworten.

Unterschiedliche Programmiersprachen haben unterschiedliche Konventionen für die Benennung von Variablen. In JavaScript ist es üblich, sie mit dem sogenannten „Kamelgehäuse“ zu benennen, und das geht so. Wenn der Variablenname nur ein Wort hat, schreiben Sie dieses Wort einfach in Kleinbuchstaben. Wenn der Variablenname mehrere Wörter enthält, dann schreiben Sie das erste Wort mit allen kleinen Großbuchstaben und Sie schreiben alle nachfolgenden Wörter groß und schreiben sie ohne Leerzeichen oder andere Zeichen. Wenn wir zum Beispiel ein Spiel machen, könnten wir die Variablen so benennen:

// a single word variable
let strength = 50;
// a descriptive name that includes multiple words
let numberOfArrowsLeft = 145;

Neben alphabetischen Zeichen können wir auch Zahlen, das Dollarzeichen und den Unterstrich in den Variablennamen verwenden. Es ist wichtig zu beachten, dass Sie den Variablennamen nicht mit einer Zahl beginnen, aber mit einer Zahl beenden können.

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

Beachten Sie, dass wir unsere Variablen nicht mit unklaren Namen oder Symbolen benennen wollen, nur weil es möglich ist. Und das ist ein anderes Thema für sich. Bei der Benennung von Variablen besteht die Konvention darin, klare und aussagekräftige Namen zu verwenden. Wenn wir beispielsweise eine Variable benennen, um anzugeben, wie viele Pfeile noch in einer Bogenschützentasche sind, sollten wir einen beschreibenden Namen verwenden, wie den, den wir im obigen Beispiel verwendet haben. Wenn wir nur verwenden würden:

let x = 145;

Dieser Name würde uns nichts darüber sagen, welchen Wert er hat. 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. Aus diesem Grund 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, sehr wichtig, dass Sie sich daran gewöhnen, Ihre Variablen auf klare und beschreibende Weise zu benennen. Dies wird auch noch wichtiger, wenn Sie anfangen, mit anderen Menschen zusammenzuarbeiten und ihnen Ihren Code zu zeigen.

An dieser Stelle denken Sie vielleicht: Es ist großartig, dass wir die Daten verschieben und sogar mit Variablen ändern können. Aber von welchen Daten sprechen wir hier? Warum haben wir Teile in Anführungszeichen gesetzt und einige Teile sind nicht in Anführungszeichen? Um all das und mehr zu beantworten, sehen wir uns die grundlegenden Datentypen in JavaScript an.

Grundlegende Datentypen in JavaScript

Unterschiedliche Datentypen sind gut darin, unterschiedliche Dinge zu tun. In diesem Tutorial zu den grundlegenden Datentypen in JavaScript sehen wir die drei grundlegendsten Datentypen, die häufig in JavaScript verwendet werden. Später in der Serie lernen wir andere Datentypen in JavaScript kennen. 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, Numbers und Booleans. Beginnen wir ohne weiteres mit dem ersten.

Saiten

Wenn Sie das Tutorial von Anfang an mitverfolgt haben, haben Sie bereits mit dem Datentyp String gearbeitet! Als wir eine Benachrichtigung mit der Aufschrift „Hello, World!“ schrieben, das verwendete den String-Datentyp, um den von uns geschriebenen Text zu speichern. In JavaScript gibt es 3 Möglichkeiten, Strings darzustellen. Die erste besteht darin, Ihren Text mit doppelten Anführungszeichen zu umgeben. Die zweite besteht darin, Ihren Text mit einfachen Anführungszeichen zu umgeben. Und die dritte besteht darin, Ihren Text mit Backticks zu umgeben. Alle drei sehen so aus:

const string1 = "Some text here.";
const string2 = 'Some text here.';
const string3 = `Some text here.`;

Wie Sie sehen können, sieht das mit den „Back Ticks“ dem einfachen Zitat ziemlich ähnlich, ist aber etwas entspannter. Die Verwendung von Backticks zum Erstellen von Zeichenfolgen ist eine Funktion, die mit ES6 eingeführt wurde, um die Arbeit mit Textdaten zu vereinfachen. Es bietet mehrere Vorteile gegenüber den beiden vorherigen. Per Konvention sehen Sie möglicherweise, dass entweder die doppelten Anführungszeichen oder die Backticks häufiger verwendet werden. Sie finden die Backticks auf der linken Taste der Nummer 1 auf Ihrer Tastatur.

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

alert(string1 + string2 + string3);

Wie Sie sehen können, werden alle 3 direkt nach dem Ende eines von ihnen angezeigt. Dies liegt daran, dass der Interpreter gerade angewiesen wurde, die Zeichenfolgen miteinander zu addieren. Wenn wir Leerzeichen dazwischen einfügen möchten, können wir dieses Leerzeichen jederzeit mit einer anderen Zeichenfolge hinzufügen.

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

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

alert(typeof string1);

Zahlen

Wenn wir in JavaScript mit Zahlen arbeiten, verwenden wir im Allgemeinen den Datentyp „Zahl“. Es ist am einfachsten zu beginnen und hat fast keine Lernkurve.

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

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

Zusätzlich zu den regulären Zahlen, die wir haben, 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, wonach es sich anhört. Außerdem kann es positiv unendlich und negativ unendlich sein. Mal sehen, wie es mit einem Beispiel aussieht.

// we can divide by zero and that does not throw an error
// instead it returns Inifinity
alert(13 / 0);

// similarly we can also get negative infinity
alert(-25 / 0);

Wie Sie bereits an einigen Beispielen gesehen haben, können wir auch Rechenoperationen mit Zahlen durchführen. Von der grundlegenden Addition, Subtraktion, Multiplikation, Division bis hin zu noch mehr programmierspezifischen Rechenoperationen. Wir werden im nächsten Tutorial mehr darüber erfahren.

Boolesche Werte

Boolesche Werte sind in der Programmierung sehr verbreitet. Meistens werden wir ihre Namen nicht explizit verwenden, aber wir werden ihre einfache Eigenschaft unter der Haube verwenden. Ein boolescher Wert kann zwei Werte haben: „wahr“ und „falsch“, und sie sind genau das, wonach sie klingen. Sie werden viel Zeit damit verbringen, Code zu schreiben, um einen Vergleich und eine Schlussfolgerung auf der Grundlage des Ergebnisses dieses Vergleichs anzustellen.

Oft basieren diese Vergleiche auf realen Szenarien und folgen einer einfachen Logik. Ist das Licht an oder aus? Draußen regnet es? Bist du hungrig? Ist diese Zahl größer als die andere Zahl? Ist dieser Absatz länger als der nächste? Befindet sich der Benutzer auf einem großen Bildschirm?

Es kommt oft vor, dass Sie nicht nur einen Zahlenwert oder einen Zeichenfolgenwert haben möchten, sondern tatsächlich eine Ja- oder Nein-Antwort haben möchten. Kurz gesagt, zu diesen Zeiten werden wir den booleschen Datentyp verwenden.

// is the first number bigger than the second one
alert(13 > 12);

// check the variable type
let isRainyOutside = true;
alert(typeof isRainyOutside);

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

Jetzt kennen Sie Variablen und Datentypen in JavaScript. Im nächsten Blogbeitrag werden wir diese Datentypen verwenden, um Entscheidungen in unserem Code zu treffen und vieles mehr!

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

Autor: Robert Whitney

JavaScript-Experte und Ausbilder, der IT-Abteilungen coacht. Sein Hauptziel ist es, die Teamproduktivität zu steigern, indem er anderen beibringt, wie man beim Programmieren effektiv zusammenarbeitet.

Alle Beiträge anzeigen

JavaScript-Kurs vom Anfänger bis zum Fortgeschrittenen in 10 Blogbeiträgen:

1. Wie fange ich mit dem Programmieren in JavaScript an?
2. JavaScript-Grundlagen
3. Variablen und verschiedene Datentypen in JavaScript
4. Snippets und Kontrollstrukturen
5. While-Schleifen und For-Schleifen
6. Java-Array
7. JavaScript-Funktionen
8. JavaScript-Objekte
9. JavaScript-Methoden und mehr
10. Zusammenfassung des JavaScript-Kurses