ES6+ og moderne features

Computerspace · FGU · Programmering i JavaScript

✨ Hvad er ES6+ og moderne JavaScript features?

ES6 (ECMAScript 2015) og nyere versioner tilføjede kraftfulde features der gør JavaScript-kode kortere og mere elegant.

Destructuring – pak ud fra arrays og objekter:

```javascript

// Array destructuring

const [første, anden, ...resten] = [1, 2, 3, 4, 5];

// første=1, anden=2, resten=[3,4,5]

// Objekt destructuring

const person = { navn: "Anna", alder: 19, by: "Vejle" };

const { navn, alder } = person;

const { navn: n, alder: a } = person; // Rename

// Nested destructuring

const { adresse: { gade, postnr } } = bruger;

// I funktionsparametre

function vis({ navn, alder }) {

console.log(${navn} er ${alder} år);

}

vis(person);

```

Spread og rest operatorer:

```javascript

// Spread – udpak array/objekt

const arr1 = [1, 2, 3];

const arr2 = [4, 5, 6];

const samlet = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

const original = { navn: "Anna", alder: 19 };

const kopi = { ...original, by: "Vejle" }; // Kopi med nyt felt

// Rest – saml resterende argumenter

function sum(...tal) {

return tal.reduce((acc, x) => acc + x, 0);

}

sum(1, 2, 3, 4, 5); // 15

```

Optional chaining og nullish coalescing:

```javascript

// Optional chaining – sikkert objekt-adgang

const bruger = { adresse: null };

const gade = bruger?.adresse?.gade; // undefined (ingen fejl!)

const land = bruger?.adresse?.land ?? "Danmark"; // "Danmark"

// Nullish coalescing – default kun ved null/undefined

const navn = null ?? "Ukendt"; // "Ukendt"

const tal = 0 ?? 42; // 0 (0 er ikke null/undefined!)

const tal2 = 0 || 42; // 42 (|| behandler 0 som falsy)

```

Array-metoder:

```javascript

const elever = [

{ navn: "Anna", karakter: 12 },

{ navn: "Bo", karakter: 7 },

{ navn: "Carla", karakter: 10 }

];

const navne = elever.map(e => e.navn); // ["Anna", "Bo", "Carla"]

const gode = elever.filter(e => e.karakter >= 10); // [Anna, Carla]

const snit = elever.reduce((sum, e) => sum + e.karakter, 0) / elever.length; // 9.67

const anna = elever.find(e => e.navn === "Anna"); // { navn: "Anna", ... }

const harFemmer = elever.some(e => e.karakter >= 12); // true

const alleBestår = elever.every(e => e.karakter >= 2); // true

```

---

🎓 Læringsmål for ES6+ og moderne features

Læringsmål

• Bruge destructuring til at pakke ud fra arrays og objekter
• Anvende spread-operatoren (...) til at kopiere og merge arrays/objekter
• Bruge optional chaining (?.) og nullish coalescing (??) til sikker kode
• Mestre de vigtigste array-metoder: map, filter, reduce, find, some, every
• Forstå forskellen på ?? og || til default-værdier

Sådan kan du arbejde med emnet

• Hvad er destructuring og hvornår er det nyttigt?
• Hvad er spread-operatoren og hvad gør den?
• Hvad er optional chaining (?.) og hvornår bruger man det?
• Hvad er forskellen på ?? og || operatorerne?

⚠️ Typiske fejl at undgå

• Bruger || til default-værdier – 0 || 42 returnerer 42, brug ?? i stedet
• Glemmer spread er shallow copy – nested objekter kopieres som referencer
• Forveksler find() og filter() – find() returnerer ét element, filter() returnerer array

---

💡 Tips til at komme i gang

• Omskriv gammel kode – find en funktion med mange if-tjek og brug optional chaining
• Brug map/filter/reduce i stedet for for-løkker til array-transformation
• Øv destructuring – det bruges overalt i moderne React og andre frameworks