JavaScript Referenz

22 September, 2021

Die JavaScript Referenz ist eine Übersicht zu Grundlagen der objektbasierten Programmiersprache mit Erläuterungen zu Funktionen und Konzepten, Cheat Sheets zu Grundlagen, Empfehlungen und Verwendung der Browser DevTools.

Variablen

var

function Languages() {
  var sp = 'spanish';
  console.log(sp);
}

Languages(); // spanish

Variablen mit dem Schlüsselwort var können überschrieben werden und sind funktionsbezogen. Die Variable sp ist nur innerhalb der Funktion gültig

function Languages() {
  var en = 'english';
}
Languages();

console.log(en); // Uncaught ReferenceError: en is not defined

Wird die in der Funktion initialisierte Variable en außerhalb der Funktion aufgerufen, gilt sie als nicht definiert

let

for (let i = 1; i < 4; i ++) {
    console.log(i); // 1 2 3
}

Variablen mit dem Schlüsselwort let sind blockbezogen, wirken daher immer innerhalb eines Blocks mit geschweiften Klammern.

for (let i = 1; i < 4; i ++) {
    console.log(i);

    let a = 0;
    a = a + i;
}

console.log(a); // Uncaught ReferenceError: a is not defined

Die Variable a innerhalb des Blocks kann außerhalb nicht aufgerufen werden

const

const language = 'de';
console.log(language); // de

Variablen mit dem Schlüsselwort const werden als Konstante bezeichnet, die nicht überschreibbar sind …

const language = 'de';
language = 'fr';
console.log(language); // Uncaught TypeError: Assignment to constant variable.

… so wie es die Fehlermeldung auch beschreibt.

Funktionen

Arrow functions

const lang = ['dansk', 'spanish', 'french'];
const question = lang.map(function (lang) {
    return `Translate into ${lang}?`;
})
console.log(question);

Mit der map-Funktion wird eine Funktion für jedes Element des languages-Array aufgerufen. Die anonyme Funktion soll dabei als Arrow function geschrieben werden.

const lang = ['dansk', 'spanish', 'french'];
const question = lang.map((lang) => {
    return `Translate into ${lang}?`;
})
console.log(question);

1. Schritt: das Schlüsselwort function löschen und die Arrow function-Schreibweise (=>) vor die geschweifte Klammer schreiben

const lang = ['dansk', 'spanish', 'french'];
const question = lang.map(lang => {
    return `Translate into ${lang}?`;
})
console.log(question);

2. Schritt: Klammern um das languages Argument entfernen

const lang = ['dansk', 'spanish', 'french'];
const question = lang.map(lang => `Translate into ${lang}?`);
console.log(question);

3. Schritt: das Schlüsselwort return entfernen, sodass die gesamte Arrow function kompakt in eine Zeile passt

.map() Funktion

Neben dem oben gezeigten hier noch ein weiteres Beispiel mit der .map() Funktion:

const speaker = 'Tom Don';
const language = ['dansk', 'spanish', 'french'];
const list = language.map((lang, i) => ({Name: lang, Speaker: speaker, Count: i + 1}))
console.table(list);

Das Language Array wird gemapt und als Objekt mit den Eigenschaftsnamen Name, Speaker, Count als Tabelle ausgegeben

.filter() Funktion

const values = [2, 7, 11, 19, 4, 14, 6];
const high = values.filter(value => value > 10);
console.log(high);

Mit der .filter() Funktion lassen sich zum Beispiel Wertebereiche ermitteln. Im oben gezeigten Beispiel werden die Werte aus dem values Array größer 10 ausgegeben

Immediately invoked function (IIFE)

Template strings

Mit Verkettungsoperator

Man kann Strings mit JavaScript-Variablen mittels Verkettungsoperator kombinieren, was in einigen Fällen auch ausreicht:

const name = 'Tom';
const age = 28;
const myText = 'My name is ' + name + ' and I`m ' + age + ' years old';
console.log(myText); // My name is Tom and I´m 28 years old

String Interpolation – ${}

Die folgende String Interpolation in Zeile 3 ist etwas flexibler und mittlerweile auch üblicher. Der gesamte String wird in Backticks geschrieben und die Variable mit führendem Dollar-Zeichen in geschweifte Klammern eingebettet.

const name = 'Tom';
const age = 28;
const myText = `My name is ${name} and I´m ${age} years old`
console.log(myText);
Digitale Rundschau Logo

© Digitale Rundschau | Impressum