Arrayer (10 min)

💡 Introduktion till ämnet (flipped classroom)

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

Arrayer (10 min)

📖 Läsanvisningar

• JavaScript - The Definitive Guide: Hela kapitel 7 - Arrayer

❗ Heads up

När vi ska kopiera arrayer så kan vi inte skriva såhär:

const oldArray = [1, 2, 3];
const newArray = oldArray;

Då kopieras en referens till oldArray. Det innebär att om vi t.ex. tar bort nummer 3 från oldArray, så kommer även newArray att få nummer 3 borttagen.

Vi måste alltså kopiera värdena från oldArray, och inte en referens till oldArray.

Tänk dig att du har en post it-lapp med texten 1, 2 och 3. Att skriva newArray = oldArray är som att gå runt med samma post it-lapp, och sudda bort nummer 3. För att ha en till/ny post it-lapp där du kan kladda och sudda fritt, utan att förstöra den första lappen, behöver du alltså göra som nedan:

Gör såhär:

const sheeps = ['🐑', '🐑', '🐑'];
const clonedDollys = [...sheeps];

Här finns en i mitt tycke pedagogisk artikel i ämnet.

💬 Kodexempel

Array med strängar:

const stringArray = ['hello', 'world', 'today', 'is', 'monday'];
const donutNames = ['Chocolate', 'Banana', 'Strawberry'];

Array med siffror:

const numbers = [1, 5, 18, 0];

Array med booleans:

const matrix = [true, true, false, true, false, false];

Array med arrayer (två-dimensionell array):

const grid = [
  [true, false, true, true, true, true],
  [false, false, true, false, true, true],
  [true, false, false, true, true, true],
];

Array med objekt (som avhandlas i en kommande modul):

const persons = [
  { name: 'Kurt Cobain', age: 27 },
  { name: 'Bob Marley', age: 36 },
  { name: 'Amy Winehouse', age: 27 },
  { name: 'Jimi Hendrix', age: 27 },
];

Array med allt möjligt:

const random = [
  { name: 'Kurt Cobain', age: 27 },
  true,
  'Hello World!',
  27
];

🏋️ Övningsuppgifter

• Arrayer | w3schools
• Array methods | w3schools
• Arrayer | codecademy

✅ Avstämning

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

Terminologi

• Array
• Två- eller flerdimensionell array
• Spread operator
• Push, pop, shift, unshift
• Length
• Splice
• foreach
• map
• filter
• find, findIndex
• sort

Du är klar när…

• Du vet vad en array är & hur du skapar den
• Du vet vad du kan lagra i en array
• Du vet vad en multidimensionell array är
• Du har skummat igenom dokumentationen för arrayer på MDN & vet vilka metoder du kan använda på arrayer (du behöver inte kunna det utantill, duh!)
• Du vet vad en tvådimensionell array är
• Du vet hur du gör om en NodeList till en Array
• Loopar och iterationer gås igenom i nästa avsnitt

📚 Resurser

• Array | MDN

Våga Fråga-lådan

Anonyma frågelådan

Klar?