Week 11: Objects, dot vs bracket, object methods

1 / 44
volgende
Slide 1: Tekstslide
JavaScriptMBOStudiejaar 2

In deze les zitten 44 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

Slide 1 - Tekstslide

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

Schrijf het op in de volgende dia.

Slide 2 - Tekstslide

Onderwerpen vorige week?

Slide 3 - Woordweb

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

Slide 4 - Tekstslide

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

Slide 5 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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

Slide 10 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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

Slide 17 - Quizvraag

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 vraag

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 - Tekstslide

Functions in objects

Slide 27 - Tekstslide

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

Slide 28 - Tekstslide

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 - Quizvraag

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 - Quizvraag

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 - Quizvraag

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 vraag

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 - Quizvraag

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 - Tekstslide

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 - Tekstslide