Week 11: Objects, dot vs bracket, object methods

• JavaScript
• MBO
• Studiejaar 2

Terugblik

Wat waren de onderwerpen van vorige week?

Wat heb jij geleerd?

Schrijf het op in de volgende dia.

Onderwerpen vorige week?

Terugblik

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

Code challenge bespreken

Docent zal het nu samen met jullie maken.

Kijk naar de beamer/bord.

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.

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.

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!

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.

Ongestructureerde data

const taif = {

    firstName: `Taif`,

    lastName: `Rahim`,

    age: 2037 - 1989,

    job: `teacher`,

    friends: [`Rachel`, `Monica`, `Phoebe`]

};

Introductie, objects

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

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.

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.

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`]

};

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`]);

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.

Welk andere property kan je nog meer opvragen?

1. pincode
2. friends
3. schoenmaat
4. middleName

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.

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.

Dot of bracket notation

const nameKey = `Name`;

console.log(taif[`first` + nameKey]);

Dit kan niet met dot notation:

console.log(taif.`last` + nameKey);                --> undefined

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.

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.

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.

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.

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.

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.

Functions in objects

Functions in objects

Twee dingen zijn toegevoegd aan de code. Beantwoordt welke dat zijn.

Wat is het eerste wat is toegevoegd

1. Een number is toegevoegd
2. Een object is toegevoegd
3. Een parameter is toegevoegd (hasDriversLicense)
4. Een leeftijd is toegevoegd

Wat is het tweede dat is toegevoegd?

1. Een functie genaamd age
2. Wajoo vijf sterren
3. Een expression object
4. Een functie genaamd calcAge.

Wat voor functie is dat?

1. Een declarative function
2. Een function expression
3. Een expressive function
4. Een stuk code dat een waarde genereerd.

Functions in objects

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

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));

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;

    }

};

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.

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.

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.

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

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!

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

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.

Wat is het verschil tussen arrays en objects?

1. Bij een array maakt de volgorde niet uit
2. Bij een object hoef je geen keys te gebruiken
3. Bij arrays gebruik je parameters
4. Bij een object maakt de volgorde niet uit

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.

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.