Översikt

Kursvecka fem och nu är du verkligen igång! Nu gäller det att verkligen borra ner huvudet och jobba på. Du går in i en lite tyngre period av kursen nu med ständigt nya koncept som bygger på tidigare veckor. Denna vecka introduceras objekt. Information om veckans upplägg annonseras löpande i kursens Zulip-kanal.

2024-09-30 48:01

Vill du ändå se en gammal “Stå-upp”-vlogg med Mats & Mikael, inspelad under en tidigare kursomgång? (Det är fel titel på videon men rätt innehåll.)

Stödjande inspelningar

Objekt

Objekt är något oerhört centralt i JavaScript och i all objektbaserad programmering. Denna inspelning introducerar objekt ur dess allra renaste form.

Video och presentation

2021-09-27 1:16:57

Presentation

Sammanfattning

Skapa ett objekt

Ett objekt skapas med två klammerparenteser, precis som en array skapas med två hakparenteser:

const lovelace = {}

Även ett “tomt” objekt är i praktiken inte helt tomt. I bakgrunden finns alltid ett grundobjekt, Object, som varje objekt i JavaScript i grunden bygger vidare på – ungefär som en tom array redan har egenskaper som length och metoder som push. Det går att skapa ett objekt med new Object() också, men {} – en objektlitteral – är det moderna och rekommenderade sättet.

Ett objekt är ett sätt att paketera data. Till skillnad från en array – som ska hålla samma datatyp i varje element – kan ett objekt fritt blanda tal, strängar, booleaner och referenser till andra objekt.

Egenskaper och prototypkedjan

Det som finns i objektet kallas egenskaper (properties), och varje egenskap är i grunden ett nyckel-värde-par: en nyckel (namnet på egenskapen) kopplad till ett värde. Utöver de egenskaper man själv lägger till har varje objekt en intern egenskap (skriven __proto__) som pekar mot det bakomliggande grundobjektet – prototypen. Interna egenskaper av det slaget, inramade med dubbla understreck, ska man varken läsa eller ändra direkt; JavaScript sköter dem själv.

Anropas en metod som inte finns direkt på objektet letar JavaScript vidare uppåt i prototypkedjan. Finns metoden inte där heller blir det ett fel. Det här förklarar varför lovelace.toString() fungerar på ett objekt som aldrig själv fått en toString-egenskap – den hittas i stället på prototypen.

Sätta och hämta en egenskap

Egenskaper sätts och hämtas med punktnotation:

lovelace.firstName = 'Ada'
lovelace.lastName = 'Lovelace'

console.log(lovelace.firstName)  // OUTPUT: Ada

Finns inte egenskapen redan skapas den; finns den redan skrivs värdet över. JavaScript är här mycket tillåtande – stavar man fel skapas helt sonika en ny egenskap istället för att ett fel uppstår, vilket kan vara nog så lurigt att felsöka.

Det går även att komma åt egenskaper med hakparentesnotation (lovelace['firstName']), men kursens kodstandard kräver punktnotation eftersom det är tydligare – hakparenteser är egentligen till för fall där namnet på egenskapen i sig är dynamiskt (lagrat i en variabel), inte hårdkodat.

Egenskaper kan också sättas direkt när objektet skapas, med kolon istället för likhetstecken och kommatecken mellan varje par:

const lovelace = {
  firstName: 'Ada',
  lastName: 'Lovelace'
}

Ta bort en egenskap

Nyckelordet delete tar bort en egenskap helt:

delete lovelace.birthYear

Att istället sätta värdet till undefined är inte samma sak – då finns egenskapen kvar, bara med ett tomt värde.

Metoder – en egenskap vars värde är en funktion

En egenskap vars värde är en funktion kallas en metod. Det finns flera sätt att skriva en, men det kortare, nyare sättet (sedan ES6/2015) är att utelämna både kolon och function:

const lovelace = {
  firstName: 'Ada',
  lastName: 'Lovelace',
  says () {
    return `Hi, I'm ${this.firstName}`
  }
}

console.log(lovelace.says())  // OUTPUT: Hi, I'm Ada

Notera return – låter man metoden console.log direkt istället för att returnera strängen bryter man mot separation of concerns: metoden bör lämna ifrån sig ett värde, inte själv bestämma hur det skrivs ut.

this

Nyckelordet this refererar till det objekt som “kör koden” – mer precist: det objekt en metod anropas för. Anropas lovelace.says() sätts this att referera till lovelace under körningen av says. Fördelen är att metoden blir generell – den bryr sig inte om objektet råkar heta lovelace eller något helt annat, och kan därmed återanvändas rakt av på flera olika objekt istället för att hårdkoda ett specifikt variabelnamn inuti sig själv.

Undvika upprepning av kod

Skapar man flera objekt av samma “form” – till exempel lovelace, hopper och hamilton, alla med firstName, lastName och says – hamnar samma metod dubbeldeklarerad i varje objekt. Det är upprepning av kod, precis det man vill undvika. En tanke kan vara att lyfta upp en delad metod till det gemensamma grundobjektet (Object.prototype) istället, men det är i praktiken en dålig idé – det objektet delas av alla objekt i hela programmet (och i en webbläsarmiljö av alla komponenter på sidan, oavsett vem som skapat dem), så att bygga på det riskerar att krocka med annan kod. Ett bättre svar på problemet – klasser – kommer i nästa vecka.

Läsanvisningar

Under läsanvisningar hittar du veckans kapitel som ska läsas i kurslitteraturen. Planera upp och dela upp läsningen under veckan.

Övningar

Under Övningsuppgifter hittar du övningsuppgifter som det är lämpligt att du arbetar med under veckan.

Seminarier + individuell handledning

Missa inte möjligheten att ställa frågor inför handledningstillfällena. Det är ett bra sätt att påverka det som tas upp i varje träff.

• Frågor inför handledning

Examinationsuppgift A2

Examinationsuppgift A2 finns publicerad och denna vecka är det dags att börja jobba med uppgiften. Tillsammans med veckans teorimoment har du det som krävs för att genomföra hela examinationsuppgiften. (För att komma igång se Kursvecka-03).

Du får fråga om vad som helst

Ett vanligt påstående brukar vara: “Jag får väl inte fråga något om examinationsuppgiften på handledningarna?”

Jodå! Du får fråga om vad som helst, men det är upp till kursledning och amanuenser hur de väljer att svara. Kursledningen försöker alltid hjälpa dig genom att puffa dig åt rätt håll när du kört fast!

Omexamination av A1

Om du inte blev godkänd på, eller inte genomförde, examinationsuppgift A1 kursvecka 3 så bör du definitivt ta chansen denna kursvecka.

Läs mer om examinationsuppgift A1 här.

Utmaningar

Det finns en del utmaningar att titta på även denna veckan. Tänk att utmaningar kan vara bra för att komma igång med egna kodexempel kring veckans fokus.

Studiefrågor

Här är ett antal frågor som du kan försöka besvara och diskutera tillsammans med din AI-assistent. Tveka inte att lyfta någon av frågorna till handledningen för att fortsätta diskussionen med lärare och studiekamrater.

1. Förklara grunderna i konstruktionen objektliteral i JavaScript.
2. Vilka är de vanligaste inbyggda metoderna som man behöver lära sig när det gäller objectliteralen?
3. Kan man loopa runt properties i ett objekt?
4. Vilken är den stora skillnaden mellan array och objektliteral?
5. Finns det något särskilt jag bör tänka på om jag gör ett program som jobbar med objekt skapade från objektliteralen?

Här är en utskrift från hur det såg ut när jag diskuterade ovan frågor med min AI-assistent Ajj.

Tips

Här följer tips till hur du kan prioritera bland kursmaterialet för att komma igång med veckan.

1. Det finns en föreläsning som ger grunden, efter den bör du kunna komma igång med både utmaningar och de blå övningsuppgifterna.
2. När du kommit igång med grunden kan du se om du kan använda objekt för att lösa delar i A2, till exempel delen med summary().
3. Försök komma en bit in på att lösa A2 under denna veckan, försök minst komma en tredjedel, men gärna halvvägs.
4. Missa inte tipset om hur man endast kör enhetstester mot en specifik funktion.