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

It A · STX · A-niveau · Frontend og UX

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

JavaScript ES6 (ECMAScript 2015) og senere versioner introducerede massive forbedringer. let og const: erstatter var for variable-deklaration. let = mutable, blok-scoped. const = immutable reference (men objekter kan stadig modificeres).

Arrow functions: kortere syntax + lexical this. (x) => x 2 i stedet for function(x) { return x 2 }.

Template literals: ` Hello, ${name}! ` med backticks.

Destructuring: const { name, age } = person. const [first, second] = array.

Spread operator: [...arr1, ...arr2], {...obj1, ...obj2}. Rest parameters: function(...args) {}.

Default parameters: function greet(name = "World") {}.

Promises: håndtér asynkrone operationer. fetch(url).then(res => res.json()).then(data => console.log(data)).catch(err => ...). async/await (ES2017): syntactic sugar over Promises. Mere læsbar:

```javascript

async function getUser() {

try {

const response = await fetch('/api/user');

const data = await response.json();

return data;

} catch (error) {

console.error(error);

}

}

```

Læringsmål

• Anvende moderne JavaScript-syntaks som let/const og arrow functions
• Anvende async/await til asynkrone operationer
• Hente data fra et API med fetch

Sådan kan du arbejde med emnet

• Skriv en async funktion, der henter data fra en offentlig API og viser titlerne på siden
• Omskriv en callback-baseret funktion til at bruge Promises og derefter async/await
• Forklar, hvad der er forskellen på var, let og const med hensyn til scope og hoisting

Arbejd iterativt med prototyper og dokumentation. Test, evaluér og dokumentér.