JavaScript ES6+ — let/const, arrow functions, async/await, fetch API

Kommunikation og IT A · HTX · A-niveau · Frontend og UX

💻 Moderne JavaScript

var vs. let vs. const:

• var: function-scoped, gammel praksis, undgå
• let: block-scoped, kan ændres
• const: block-scoped, kan IKKE reassignes (men objekt-properties kan stadig ændres)

Arrow functions:

```javascript

// Traditionel

function double(x) { return x * 2; }

// Arrow

const double = x => x * 2;

// Med body

const add = (a, b) => {

return a + b;

};

```

Destructuring:

```javascript

const {navn, alder} = bruger; // objekt

const [første, anden] = liste; // array

```

Template literals:

```javascript

const besked = Hej ${navn}, du er ${alder} år;

```

Async/Await og Fetch API:

```javascript

async function hentBruger(id) {

try {

const response = await fetch(/api/brugere/${id});

if (!response.ok) throw new Error("Netværksfejl");

const data = await response.json();

return data;

} catch (fejl) {

console.error(fejl);

}

}

```

Læringsmål

• Bruge let/const korrekt og forstå block scope
• Skrive arrow functions og forklare this-binding-forskellen
• Implementere async/await til asynkrone operationer
• Hente og behandle data fra en REST API med fetch

Sådan kan du arbejde med emnet

• Omskriv en function-erklæring til en arrow function
• Brug fetch og async/await til at hente data fra et offentligt API og vis resultatet i konsollen
• Forklar forskellen på let, const og var

Træningsforslag

• Hent og vis data fra et gratis offentligt API med fetch + async/await
• Omskriv callback-baseret kode til async/await
• Tag JavaScript.info's moderne JS-guide (javascript.info)