const language = ['dänisch', 'spanisch', 'französisch'];
const question = language.map(function (lang) {
    return `Translate into ${lang}?`;
})
console.log(question);

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

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

const language = ['dänisch', 'spanisch', 'französisch'];
const question = language.map((lang) => {
    return `Translate into ${lang}?`;
})
console.log(question);

2. Schritt: Klammern um das language Argument entfernen

const language = ['dänisch', 'spanisch', 'französisch'];
const question = language.map(lang => {
    return `Translate into ${lang}?`;
})
console.log(question);

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

const language = ['dänisch', 'spanisch', 'französisch'];
const question = language.map(lang => `Translate into ${lang}?`);
console.log(question);

.map() Funktion

Beispiel 1:

Ein Array mit beliebigen Werten soll gemapt und die Werte mit 10 addiert werden

const values = [30, 50, 60, 80]
const result = values.map(value => value + 10);
console.log(result); // [40, 60, 70, 90]

Beispiel 2:

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

const speaker = 'Tom Don';
const language = ['dänisch', 'spanisch', 'französisch'];
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

Beispiel 3:

In einem weiteren Beispiel wird ein Array mit verschachtelten Objekten mit der Map-Funktion über Template Literals ausgegeben

const language = [
  {
    name: 'englisch',
    speaker: 1268
  },
  {
    name: 'mandarin',
    speaker: 1117
  },
  {
    name: 'spanisch',
    speaker: 538
  }
]

const ranking = `
  <table>
    ${language.map(lg => `<tr><td>${lg.name} sprechen ${lg.speaker} mio. Menschen</td></tr>`)}
  </table>`;

document.body.innerHTML = ranking;

.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