Sortera & filtrera (35 min)

💡 Introduktion till ämnet (flipped classroom)

⏰ Tidsåtgång: c.a. 35 min

OBS!

❗ Sorteringen i videon för strängar verkar fungera för Firefox, men inte i Chromium-baserade webbläsare. Se längre ned för lösning tills jag hinner spela in en ny video.

Aritmetik 1 (22 min)

Aritmetik 2 (3 min)

Filtrera på både pris och kategori (10 min)

Sortering med strängar (korrigering till video)

Använd då följande sorteringssystem, där jämförelsen mellan a och b returnerar ett numeriskt värde.

let products = [
  {
    name: 'Tårta',
    description: 'En mycket god tårta',
    price: 10,
  },
  {
    name: 'Cake',
    description: 'An excellent cake',
    price: 30,
  },
  {
    name: 'Kakku',
    description: 'Vallan mainio kakku',
    price: 20,
  },
];

const sorted = products.sort((a, b) => {
  if (a.name < b.name) {
    return -1;
  }
  if (a.name > b.name) {
    return 1;
  }
  return 0;
});

Eller den förkortade versionen (detta kallas ternary operator när man använder frågetecken):

const sorted = products.sort((a, b) => {
  return a.name === b.name ? 0 : a.name < b.name ? -1 : 1;
});

Syntaxen ovan är: villkor ? sant : falskt, och här har vi då "nästlat" dubbla if-satser, så villkor ? sant : (villkor ? sant : falskt).

Generalisera 🤿

Och while I'm at it kunde jag inte låta bli att generalisera sorteringsfunktionen till en funktion:

function sortByStringProperty(array, property) {
  return array.sort((a, b) => {
    return a[property] === b[property] ? 0 : a[property] < b[property] ? -1 : 1;
  });  
}

console.table(sortByStringProperty(products, 'name'));
console.table(sortByStringProperty(products, 'description'));

📖 Läsanvisningar

• Inga

✅ Avstämning

Använd denna lista för att "checka av" att du förstår modulens koncept.

Terminologi

• sort
• reduce
• console.table
• map
• Math-funktioner

Du är klar när…

• Du vet hur du hanterar och sorterar "data"
• Du vet hur sort-funktionen används
• Du kan summera en objekt-array
• Du kan öka priset på alla produkter i en array bestående av objekt
• Du kan använda funktionerna i Math

📚 Resurser

• Inget just nu

Våga Fråga-lådan

Anonyma frågelådan

Klar?