Week 11: Objects, dot vs bracket, object methods

1 / 44
next
Slide 1: Slide
JavaScriptMBOStudiejaar 2

This lesson contains 44 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 60 min

Items in this lesson

Slide 1 - Slide

Terugblik
Wat waren de onderwerpen van vorige week?
Wat heb jij geleerd?

Schrijf het op in de volgende dia.

Slide 2 - Slide

Onderwerpen vorige week?

Slide 3 - Mind map

Terugblik
  • Array's.
  • Array methods.
  • Code challenge.

Slide 4 - Slide

Code challenge bespreken
Docent zal het nu samen met jullie maken.
Kijk naar de beamer/bord.

Slide 5 - Slide

Doel van deze les
Advanced fundamentals van JS
  • Jij leert hoe je ongestructureerde data, organiseert door gebruik te maken van objecten.
  • Jij kiest wanneer je dot of bracket notation in jouw code.
  • Jij manipuleert objecten door de desbetreffende methods te gebruiken.
Alles wordt afgesloten met code challenges.

Slide 6 - Slide

Arrays
Strict mode is een belangrijke keyword. Het zorgt ervoor dat JS veel oplettender is op kleine foute en zal de compiler vertellen jouw feedback te geven wanneer je onduidelijk bent of een fout hebt gemaakt.

Laten wij dit zien aan de hand van een voorbeeld.

Slide 7 - Slide

Ongestructureerde data
Je kan je voorstellen dat de data die wij hebben gemaakt in de vorige les, ongestructureerd kan zijn. Dit komt omdat je veel data erin kan doen en het kan van alles zijn (string, number etc.) Array is een data structure, maar er is nog een data structure in JS; Objects!

Slide 8 - Slide

Ongestructureerde data
Stel jij wilt jouw sociale profiel coderen. Jij wilt jouw voornaam, achternaam, leeftijd, baan en vrienden in jouw profiel. Je wilt daar natuurlijk een template voor maken in je code zodat je het kan hergebruiken.

Enter objects.

Slide 9 - Slide

Ongestructureerde data
const taif = {
    firstName: `Taif`,
    lastName: `Rahim`,
    age: 2037 - 1989,
    job: `teacher`,
    friends: [`Rachel`, `Monica`, `Phoebe`]
};

Slide 10 - Slide

Introductie, objects
Een object op deze manier maken noem je een object literal. Omdat je letterlijk een object precies maakt zoals jij het wilt.

Slide 11 - Slide

Arrays vs objects
Bij een array is het belangrijk dat je weet op welke plek een element staat als je het wilt terugkrijgen.

Bij een object maakt dat niet uit, omdat je nu een parameter hebt die je kan opvragen.

Slide 12 - Slide

Dot of bracket notation
Een van de lesdoelen: Jij kiest wanneer je dot- of bracket-notation in jouw code.

Laten wij hier samen naar kijken wat het verschil is, en hoe je dit kan kiezen.

Slide 13 - Slide

Dot of bracket notation
De code die wij eerder hebben geschreven:

const taif = {
    firstName: `Taif`,
    lastName: `Rahim`,
    age: 2037 - 1989,
    job: `teacher`,
    friends: [`Rachel`, `Monica`, `Phoebe`]
};

Slide 14 - Slide

Dot of bracket notation
Een parameter van de taif object opvragen kan je op twee manieren doen.

Met de dot notation:
console.log(taif.lastName);
Met de bracket notation:
console.log(taif[`lastName`]);

Slide 15 - Slide

Dot of bracket notation
Wat is nu het verschil?
console.log(taif.lastName);

Na de punt, moet je de property naam opgeven. Geef je een verkeerde naam op? --> Dan krijg je een undefined error.

Slide 16 - Slide

Welk andere property kan je nog meer opvragen?
A
pincode
B
friends
C
schoenmaat
D
middleName

Slide 17 - Quiz

Dot of bracket notation
console.log(taif[`lastName`]);

Tussen de brackets kan je de property naam opgeven. Echter het verschil hier is dat je ook een expression kan invoeren. Dus je kan het ook laten uitrekenen! 

Laten wij een voorbeeld bekijken in de volgende dia.

Slide 18 - Slide

Dot of bracket notation
const nameKey = `Name`;
console.log(taif[`first` + nameKey]);
console.log(taif[`last` + nameKey]);

Kopieer deze code en bekijk wat het doet.

Slide 19 - Slide

Dot of bracket notation
const nameKey = `Name`;
console.log(taif[`first` + nameKey]);

Dit kan niet met dot notation:
console.log(taif.`last` + nameKey);                --> undefined

Slide 20 - Slide

Dot of bracket notation
Laten wij het volgende bekijken:

const interestedIn = prompt(`What do you want to know about Taif? You can choose between first- and last name, age, job and friends.`);

Gebruik voor deze code jouw browser.

Slide 21 - Slide

Dot of bracket notation
Vul de code op de vorige dia aan met:

if (Taif[interestedIn]) {
    console.log(Taif[interestedIn]);
} else {
    console.log(`Wrong request! You can choose between first- and last name, age, job and friends.`);
}

Gebruik voor deze code jouw browser.

Slide 22 - Slide

Dot of bracket notation
Als je de code nu uitvoert dan krijg je een prompt window. Wanneer een property niet gevonden is in jouw object dan zal je een message krijgen. Vind je de property wel, dan krijg je de waarde van die property.

Slide 23 - Slide

Dot of bracket notation
Als je het object wilt aanvullen met properties dan kan je daar de volgende syntax voor gebruiken:

Taif.location = `Netherlands`;
Taif[linkedIn] = `seenITdoneIT`;

Let op! Dit kan normaal niet bij andere talen! Je voegt nu location en linkedIn toe aan het Taif object.

Slide 24 - Slide

Bekijk de volgende string:
//Taif has 3 friends, and his best friend is Ayah.
Log dit in de console zonder dat 'Taif', '3', 'friends', 'Ayah' hard coded is.

Slide 25 - Open question

Dot of bracket notation
Een van de lesdoelen: Jij manipuleert objecten door de desbetreffende methods te gebruiken.

Laten wij hier samen naar kijken wat het verschil is, en hoe je dit kan kiezen.

Slide 26 - Slide

Functions in objects

Slide 27 - Slide

Functions in objects
Twee dingen zijn toegevoegd aan de code. Beantwoordt welke dat zijn.

Slide 28 - Slide

Wat is het eerste wat is toegevoegd
A
Een number is toegevoegd
B
Een object is toegevoegd
C
Een parameter is toegevoegd (hasDriversLicense)
D
Een leeftijd is toegevoegd

Slide 29 - Quiz

Wat is het tweede dat is toegevoegd?
A
Een functie genaamd age
B
Wajoo vijf sterren
C
Een expression object
D
Een functie genaamd calcAge.

Slide 30 - Quiz

Wat voor functie is dat?
A
Een declarative function
B
Een function expression
C
Een expressive function
D
Een stuk code dat een waarde genereerd.

Slide 31 - Quiz

Functions in objects
In het object is een function expression toegevoegd. Als je dit declarative zou hebben gemaakt, dan zou je een error krijgen -->


Slide 32 - Slide

Functions in objects
Het is dan mogelijk om de functie aan te roepen via de dot of bracket notation.

Dot: console.log(Taif.calcAge(1989));
Bracket: console.log(Taif[calcAge](1989));

Slide 33 - Slide

This keyword
Laten wij het volgende bekijken. De 'this' keyword. Bekijk het volgende object:

const Taif = {
    firstName: `Taif`,
    lastName: `Rahim`,
    age: 2037 - 1989,
    job: `Beter dan Jesse zijn dev mode`,
    friends: [`Ayah`, `Phoebe`, `Monica`],
    hasDriversLicense: true,

    calcAge: function (birthYear) {
        return 2037 - birthYear;
    }
};

Slide 34 - Slide

This keyword
Als wij nu de leeftijd willen uitrekenen dan is er wel iets vreemds.

console.log(taif.calcAge(1989));

Wij moeten nu opnieuw '1989' invoeren ondanks dat het object zelf weet wanneer ik geboren ben. Hierdoor kan je ook sneller fouten maken.

JS geeft ons een tool om hier mee om te gaan.

Slide 35 - Slide

This keyword
De 'this' keyword verwijst naar het object zelf. Laten wij kijken naar de nieuwe code.Er zijn vier dingen veranderd.

1) Leeftijd is toegevoegd.
2) Parameter is weg gelaten uit calcAge.
3) Log de this keyword om het te begrijpen.
4) In de berekening wordt this gebruikt.

Dat laatste wordt gedaan om te refereren naar het object zelf.

Slide 36 - Slide

This keyword
Nu kan je calcAge aanroepen zonder de argument mee te geven.

console.log(taif.calcAge());

De this keyword wijst naar het object wat de functie aanroept. In dit geval is dat de naam voor de punt! (in dit geval dit taif).

Waarom doen wij dit? In de vorige les hebben wij de DRY principe besproken. 'Don't repeat yourself'. Echter door iedere keer die 1989 te moeten schrijven, breken wij die regel. Dat maakt het slechte code.

Slide 37 - Slide

This keyword
Waarom niet gewoon -->

Dat komt omdat als jij de objectnaam veranderd dan moet je dus manueel ook de de reference in de functie ook aanpassen. Met deze methode bespaar jij jezelf een hoop hoofdpijn op de lange termijn en is beter voor de onderhoudbaarheid van je code!

De docent laat een voorbeeld zien

Slide 38 - Slide

This keyword
Wij gaan onze code nog verder aanpassen:

In de voorgaande lessen hebben wij geleerd dat wij ook dynamisch properties aan het taif object kunnen toevoegen zoals:

taif.beterDanJesse = true;

Nu doen wij dit ook alleen gebruiken wij de this keyword. De 'age' property is nu toegevoegd door de calcAge functie!

Slide 39 - Slide

Mini-boss challenge
De volgende zin moet je printen in de console:

Taif is a 48 year-old teacher and he has a drivers license.

De woorden in het rood mogen niet hard-coded zijn. 'a' moet 'no' worden afhankelijk of het taif-object een rijbewijs heeft.

Hint: Je moet een beslissing nemen en de 'this' keyword is heel handig hier.

Geef je antwoord in de volgende dia


Slide 40 - Slide

Taif is a 48 year-old teacher and he has a drivers license.
Log dit in de console zonder dat 'Taif', '48', 'teacher' en 'a', hard-coded is.

Slide 41 - Open question

Wat is het verschil tussen arrays en objects?
A
Bij een array maakt de volgorde niet uit
B
Bij een object hoef je geen keys te gebruiken
C
Bij arrays gebruik je parameters
D
Bij een object maakt de volgorde niet uit

Slide 42 - Quiz

Wat waren de doelen?
Advanced fundamentals van JS
  • Jij leert hoe je ongestructureerde data, organiseert door gebruik te maken van objecten.
  • Jij kiest wanneer je dot of bracket notation in jouw code.
  • Jij manipuleert objecten door de desbetreffende methods te gebruiken.
Alles wordt afgesloten met code challenges.

Slide 43 - Slide

Functions in functions
Kan ik niet gewoon overal arrow functions gebruiken omdat het zo makkelijk is te gebruiken?

Nee

Dat komt omdat arrow functions geen 'this' keyword ondersteunen. Dit leg ik later uit.

Slide 44 - Slide