Gr

Grundlagen in JavaScript

3 Übungen

Über Grundlagen

JavaScript ist eine dynamische, prototypbasierte Sprache. Sie hat ein paar primitive Werte, und alles andere gilt als Objekt.

Sie ist vor allem als Skriptsprache für Webseiten bekannt, doch auch viele Umgebungen außerhalb des Browsers nutzen sie, zum Beispiel Node.js. Die Sprache wird aktiv weiterentwickelt, und wegen ihrer Multiparadigmen-Eigenschaft erlaubt sie viele Programmierstile. JavaScript ist eine dynamische Sprache und unterstützt objektorientierte, imperative und deklarative Stile (zum Beispiel funktionale Programmierung).

(Neu-)Zuweisung

In JavaScript gibt es ein paar grundlegende Möglichkeiten, Namen Werte zuzuweisen: Variablen oder Konstanten. Bei Exercism werden Variablen immer in camelCase geschrieben, Konstanten in SCREAMING_SNAKE_CASE. Es gibt keinen offiziellen Leitfaden, an den man sich halten muss, und verschiedene Firmen und Organisationen haben verschiedene Styleguides. Du kannst Variablen so schreiben, wie du möchtest. Der Vorteil, sie so zu schreiben, wie die Übungen vorbereitet sind, ist, dass sie in der Weboberfläche und in den meisten IDEs anders hervorgehoben werden.

Variablen lassen sich in JavaScript mit dem Schlüsselwort const, let oder var definieren.

Wenn du let oder var verwendest, kann eine Variable im Laufe ihres Lebens auf verschiedene Werte verweisen. Zum Beispiel kann myFirstVariable mit dem Zuweisungsoperator = viele Male definiert und neu definiert werden:

let myFirstVariable = 1;
myFirstVariable = 'Some string';
myFirstVariable = new SomeComplexClass();

Im Gegensatz zu let und var können Variablen, die mit const definiert werden, nur einmal zugewiesen werden. Damit werden in JavaScript Konstanten definiert.

const MY_FIRST_CONSTANT = 10;

// Can not be re-assigned.
MY_FIRST_CONSTANT = 20;
// => TypeError: Assignment to constant variable.

Zuweisung an Konstanten

Das Schlüsselwort const wird sowohl bei Variablen als auch bei Konstanten erwähnt. Ein weiteres Konzept, das oft im Zusammenhang mit Konstanten genannt wird, ist die (Un-)Veränderlichkeit.

Das Schlüsselwort const macht nur die Bindung unveränderlich, das heißt, du kannst einer const-Variable nur einmal einen Wert zuweisen. In JavaScript sind nur primitive Werte unveränderlich. Nicht-primitive Werte können jedoch weiterhin verändert werden.

const MY_MUTABLE_VALUE_CONSTANT = { food: 'apple' };

// This is possible
MY_MUTABLE_VALUE_CONSTANT.food = 'pear';

MY_MUTABLE_VALUE_CONSTANT;
// => { food: "pear" }

Konstantenwert (Unveränderlichkeit)

In der Regel solltest du bei Exercism und in vielen anderen Organisationen und Projekt-Styleguides keine Werte verändern, die wie const SCREAMING_SNAKE_CASE aussehen. Technisch gesehen können die Werte geändert werden, aber aus Gründen der Klarheit und um Erwartungen zu steuern, wird davon bei Exercism abgeraten. Wenn dies erzwungen werden muss, verwende Object.freeze(value).

const MY_VALUE_CONSTANT = Object.freeze({ food: 'apple' });

// This silently fails
MY_VALUE_CONSTANT.food = 'pear';

MY_VALUE_CONSTANT;
// => { food: "apple" }

In freier Wildbahn wirst du Object.freeze kaum überall in einer Codebasis sehen, aber die Regel, einen SCREAMING_SNAKE_CASE-Wert niemals zu verändern, ist eine gute Regel. Sie wird oft durch automatisierte Analysen wie einen Linter durchgesetzt.

Funktionsdeklarationen

In JavaScript werden Funktionseinheiten in Funktionen gekapselt, wobei Funktionen, die zusammengehören, meist in derselben Datei gebündelt werden. Diese Funktionen können Parameter (Argumente) entgegennehmen und mit dem Schlüsselwort return einen Wert zurückgeben. Funktionen werden mit der Syntax () aufgerufen.

function add(num1, num2) {
  return num1 + num2;
}

add(1, 3);
// => 4

💡 In JavaScript gibt es viele verschiedene Möglichkeiten, eine Funktion zu deklarieren. Diese anderen Möglichkeiten sehen anders aus als die Verwendung des Schlüsselworts function. Der Track versucht, sie nach und nach einzuführen, aber wenn du sie bereits kennst, kannst du jede davon verwenden. In den meisten Fällen ist die eine oder andere Variante nicht besser oder schlechter.

Export und Import

Die Schlüsselwörter export und import sind mächtige Werkzeuge, die aus einer gewöhnlichen JavaScript-Datei ein JavaScript-Modul machen. Abgesehen davon, dass Code damit gezielt Komponenten wie Funktionen, Klassen, Variablen und Konstanten verfügbar machen kann, ermöglicht es auch eine ganze Reihe weiterer Funktionen, zum Beispiel:

  • Umbenennen von Exporten und Importen, wodurch du Namenskonflikte vermeidest,
  • Dynamische Importe, die Code bei Bedarf laden,
  • Tree Shaking, wodurch der endgültige Code kleiner wird, weil Module ohne Seiteneffekte und sogar Inhalte von Modulen die nicht verwendet werden, entfernt werden,
  • Das Exportieren von Live-Bindings, wodurch du einen Wert exportieren kannst, der sich überall, wo er importiert wurde, mitändert, wenn sich der ursprüngliche Wert ändert.

Ein konkretes Beispiel ist, wie die Tests im JavaScript-Track von Exercism funktionieren. Jede Übung hat mindestens eine Implementierungsdatei, zum Beispiel lasagna.js, und jede Übung hat mindestens eine Testdatei, zum Beispiel lasagna.spec.js. Die Implementierungsdatei verwendet export, um die öffentliche API verfügbar zu machen, und die Testdatei verwendet import, um darauf zuzugreifen. So kann sie die Ergebnisse der Implementierung testen.

// file.js
export const MY_VALUE = 10;

export function add(num1, num2) {
  return num1 + num2;
}

// file.spec.js
import { MY_VALUE, add } from './file';

add(MY_VALUE, 5);
// => 15
Über GitHub bearbeiten Der Link öffnet sich in einem neuen Fenster oder Tab

Lerne Grundlagen