Objecten

Objecten in JavaScript, net zoals in andere programmeertalen, kan vergeleken worden met objecten in de echte wereld. Vergelijk het met bijvoorbeeld een fiets. Een fiets is een object en bevat de eigenschappen: merk, kleur, gewicht, aantal versnellingen,

Een JavaScript-object bevat eigenschappen (Eng. properties). Een eigenschap van een object kan uitgelegd worden als een variabele dat verbonden is aan het object. Objecteigenschappen definieren de karakterestieken van het object. Toegang tot deze eigenschappen van een object gebeurt via de dot-notatie (.):

objectName.propertyName

Laat ons als voorbeeld een object aanmaken via het instantiëren van de Object() klasse. In dit object beschrijven we een persoon met een voornaam, familienaam en leeftijd:

let person = new Object();
person.firstName = 'Philippe';
person.lastName = 'De Pauw - Waterschoot';
person.age = 32;

Het aangemaakt object bevat nu een reeks eigenschappen. Om bijvoorbeeld de leeftijd van deze persoon op te vragen schrijven we de volgende code:

const age = person.age;
console.log(age); // Output: 32

Spreken we een eigenschap aan die niet bestaat, dan resulteert dit in de waarde undefined:

let hairColor = person.hairColor;
console.log(hairColor); // Output: undefined
person.hairColor = 'brown';
hairColor = person.hairColor;
console.log(hairColor); // Output: brown

Een nieuwe eigenschap kan dynamisch aan een object toegekend worden. In dit voorbeeld kennen van een nieuwe eigenschap hairColor toe aan een personmet de waarde 'brown'.

Eigenschappen van JavaScripts objecten kunnen ook benaderd worden via de bracket notatie. Objecten worden hierdoor soms associatieve arrays genoemd, omdat elke eigenschap geassocieerd wordt met een string waarde waarmee we toegang hebben tot de corresponderende waarde. Toegang tot een eigenschap kan ook via een variabele die een waarde bevat.

person['height'] = 1.72;
let height = person['height'];
console.log(height); // Output: 1.72
height = person.height;
console.log(height); // Output: 1.72

In dit voorbeeld voegen we een nieuwe eigenschap height toe aan het person object met de waarde 1.72. De lengte van een persoon kan dan opgevraagd worden via de dot (.) notatie of via de bracket ([…]) notatie. Eigenschappen die:

• starten met een cijfer, bijv. 3tier
• een spatie bevatten, bijv. date created
• een koppelteken (Eng. hyphen) bevatten, bijv. cool-shit

kunnen enkel aangemaakt en opgevraagd worden via de bracket notatie.

person['3tier'] = 'Presentation, Logic and Data tier';
person['date created'] = Date.now();
person['cool-shit'] = 'Associate Degree in Programming makes Cool Shit!';
const quote = person['cool-shit'];
console.log(quote); // Output 'Associate Degree in Programming makes Cool Shit!'

Plaatsen we een object in de bracket notatie, dan zal de naam van de eigenschap gegenereerd worden op basis van de obj.toString() methode. Deze methode geeft de string representatie weer van het object.

Met de for...in-lus kunnen we alle eigenschappen van een object doorlopen:

let msg = 'Properties of the object person\n-------------------------------';
for(let i in person) {
	msg += `\n${i} = ${person[i]}`;
}
console.log(msg);

Dit resulteert in de volgende output:

Properties of the object person
-------------------------------
firstName = Philippe
lastName = De Pauw - Waterschoot
age = 32
hairColor = brown
height = 1.72
3tier = Presentation, Logic and Data tier
date created = 1569311008294
cool-shit = Associate Degree in Programming makes Cool Shit!

Voorgedefinieerde objecten

JavaScript bevat een hele resem voorgedefinieerde (Eng. predefined) objecten, zoals: Boolean, Number, String, Math, Date, Array … Deze objecten bevatten eigenschappen en methoden (functies) die we kunnen aanspreken. Eigenschappen kunnen gemanipuleerd worden via toewijzing of via de ingebouwd functies uit deze objecten.

Boolean

Het ingebouwde (Eng. built-in) Boolean (opens new window) object is een wrapper voor een boolean waarde.

Opgelet

Gebruik het Boolean object niet in de plaats van het primitief datatype boolean.

Het bevat een reeks van eigenschappen (length, prototype …) en methoden (toString(), valueOf() …) die meestal ook aangesproken kunnen worden via het primitief datatype boolean.

Een nieuwe instantie kan aangemaakt worden via de new operator:

const b1 = new Boolean(false);

De waarde die de variabele b1 bevat is true, raar maar waar. Dit geldt ook voor alle andere waarden 0, null, undefined, '' …

Het Boolean object wordt voornamelijk gebruikt bij datatype conversie (converteren van een datatype naar een andere datatype) en dit via de Boolean() functie:

const b1 = Boolean('true'); // true
const b2 = Boolean(0); // false
const b3 = Boolean(undefined); //false
const b4 = Boolean(NaN); // false
const b5 = Boolean(1); // true
const b6 = Boolean(null); // false

Number

Een Number (opens new window) object is een wrapper rond een numerieke waarde met dubbele precisie (64-bit) (opens new window). Instanties kunnen aangemaakt worden via de new Number() constructor. Een primitieve numerieke waarde kan aangemaakt worden via de Number() functie.

Het bevat een reeks van eigenschappen (MIN_VALUE, POSITIVE_INFINITY …) en methoden (parseInt(), parseFloat(), isNaN(), toFixed() …) die meestal ook aangesproken kunnen worden via het primitief datatype number.

De eigenschappen vermeld in capitalen zijn eigenlijk constanten die we kunnen aanroepen zonder dat we een instantie moeten maken van het Number object:

const minValue = Number.MIN_VALUE; // 5e-324
const maxValue = Number.MAX_VALUE; // 1.7976931348623157e+308
const posInfinity = Number.POSITIVE_INFINITY; // Infinity

De Number function wordt gebruikt bij datatype conversies:

const n1 = Number('123') // 123
const n2 = Number('12.3') // 12.3
const n3 = Number('12.00') // 12
const n4 = Number('123e-1') // 12.3
const n5 = Number('') // 0
const n6 = Number(null) // 0
const n7 = Number('0x11') // 17
const n8 = Number('foo') // NaN
const n9 = Number('100a') // NaN
const n10 = Number('-Infinity') //-Infinity
const n11 = Number(true); // 1
const n12 = Number(Date.now()); // 1569314197567

Een handige functie is toFixed() waarmee we het aantal cijfers na de komma (decimaal punt) kunnen specificeren (geeft een string waarde terug):

const v = 12.678904;
const vNew1 = v.toFixed(2); // "12.68"
const vNew2 = Number(v).toFixed(2); // "12.68"
const vNew3 = new Number(v).toFixed(2); // "12.68"

String

Het String (opens new window) object is een wrapper voor het primitieve datatype string. Instanties kunnen aangemaakt worden via de new String() constructor. Een primitieve string waarde kan aangemaakt worden via de String() functie.

Het bevat een reeks van eigenschappen (length, POSITIVE_INFINITY …) en methoden (fromCharCode(), charAt(), concat(), indexOf(), endsWith(), match(), replace(), split(), substring(), trim() …) die meestal ook aangesproken kunnen worden via het primitief datatype string.

Een String object kan geconverteerd worden naar een primitieve waarde via de String() functie of via de valueOf() functie uit het String object:

const sPrim = 'john';
const sObj = new String(sPrim);

console.log(typeof sPrim); // "string"
console.log(typeof sObj);  // "object"

const sObjToPrim1 = String(sObj); // typeof sObjToPrim1 => "string"
const sObjToPrim2 = sObj.valueOf(); // typeof sObjToPrim2 => "string"

Voorbeeld “verwijderen van witruimte” vooraan en achteraan de string:

const greeting = '      like graphics love code make cool shit           ';
console.log(greeting);
console.log(greeting.trim());

Dit resulteert in de volgende output:

"      like graphics love code make cool shit           "
"like graphics love code make cool shit"

Voorbeeld “bevat een string een bepaald woord”:

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

const searchTerm = 'Fox'.toLowerCase();
const position = paragraph.toLowerCase().indexOf(searchTerm);
if(position !== -1) {
	console.log(`We have a first occurence for the search term ${searchTerm} at position ${position}`);
} else {
	console.log(`No results for search term ${searchTerm}`);
}

Dit resulteert in de volgende output:

"We have a first occurence for the search term fox at position 16"

Voorbeeld “splijten van woorden op basis van characters”:

In dit voorbeeld splijten we een string op basis van een spatie (' '). Elke woord vormt een elment op een specifieke index in de resulterende array.

const quote = 'Like Graphics Love Code Make Cool Shit';
const quoteArray = quote.split(' ');
for(let i = 0; i < quoteArray.length; i++) {
	console.log(quoteArray[i]);
}

Dit resulteert in de volgende output:

"Like"
"Graphics"
"Love"
"Code"
"Make"
"Cool"
"Shit"

Math

Met het Math (opens new window) object kunnen we mathematische berekeningen uitvoeren. Het bevat constanten (eigenschappen: PI, E, SQRT2 …) en methoden (functies: abs, sin(), atan(), floor(), round(), ceil(), log(), pow(), random() …).

De trigoniometrische functies, zoals sin(), cos() e.d., gebruiken een argument uitgedrukt in radialen. Om de sinus van een hoek, uitgedrukt in graden, implementeren we de volgende code:

const angleDegrees = 45;
const angleRadians = Math.PI/180*angleDegrees;
const vSin = Math.sin(angleRadians);
console.log(`The sinus of ${angleDegrees} degrees is ${vSin}.`); // Output "The sinus of 45 degrees is 0.7071067811865475."

Voorbeeld "random integer waarde tussen twee getallen:

function getRandomInteger(min, max) {
	const minV = Math.ceil(min);
	const maxV = Math.floor(max);
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

const v = getRandomInteger(10, 80);
console.log(`The generated random value is ${v}.`); // Example output: "The generated random value is 13." 

De Math.random() genereert een decimaal getal tussen 0 en 1, waarbij de waarde 1 niet wordt meegerekend, maar de waarde 0 wel. We berkenen eerst de plafondwaarde van het agrument min (bijv.: 10.6 wordt 11), vervolgens de vloerwaarde van het argument max (bijv.: 90.4 wordt 90) en tenslotte geven we een positief geheel random getal terug aan de aanvrager.

Date

Met het Date (opens new window) object kunnen we een instantie maken (lees een object) voor een specifieke datum (incl. tijd) en dit platformonafhankelijk. Het Date object bevat een getal uitgedrukt in milliseconden sinds 1 January 1970 UTC (epoch time).

Een date object kan aangemaakt worden via:

• een instatie van het Date object te maken via de constructur en new keyword
• statische methode (geen instantie van een object nodig) parse() bijv.: const startOfJS = Date.now('04 Dec 1995 00:12:00 GMT');

Het bevat een reeks van eigenschappen (length …) en methoden (getDate(), getSeconds(), getTime(), setYear(), setHours(), toISOString(), toLocalString(), toTimeString() …).

Custom Object

Een op maat gemaakt object (Eng. custom object) is een object dat niet behoort tot de voorgedefinieerde objecten. In een custom object beschrijven we de eigenschappen en methoden die inherent zijn aan dit nieuw object.

Beschrijven we een persoon als object in een programmeertaal, dan bevat deze:

• eigenschappen
  • haarkleur
  • lengte
  • gewicht
  • voornaam
  • …
• functies (acties)
  • haarkleur veranderen
  • sporten
  • studeren
  • …

Methoden zijn acties die een persoon in kwestie kan ondernemen of die door een andere partij kan ondernomen worden. Door een actie kan één of meerdere eigenschappen gemanipuleerd worden.

Voorheen definieerde we alle eigenschappen apart die allen van toepassing waren op eenzelfde persoon. Het is stukken beter om al deze eigenschappen te omsluiten door een custom object. Het custom object is toegankelijk door één aanroep, waardoor tevens alle onderliggende eigenschappen en methoden aanspreekbaar zijn.

Aanmaak nieuwe objecten

Object constructur

Custom objecten kunnen in JavaScript aangemaakt worden met een Object constructor in combinatie met het new keyword. Er wordt als het waren een instatie gemaakt van het Object() object. De instantie wordt opgeslagen in een variabele. Eigenschappen kunnen hier dynamisch aan toegekend worden via de dot (.) notatie.

let person = new Object();
person.firstName = 'Philippe';
person.surName = 'De Pauw - Waterschoot';
person['666'] = 'The Devil';
person.quote = 'Learning by doing';
person.toString = function() {
  return `${ this.firstName } ${ this.surName }`;
}
console.log(person.toString());

Voegen we de onderstaande code toe aan het voorbeeld:

let person1 = person;
person1.firstName = 'Evelien';
console.log(person.toString());

De regel let person1 = person; kopieert alle inhoud naar een nieuwe variabele person1. De variabelen person en person1 verwijzen naar dezelfde geheugenruimte. Dit betekent dat wanneer we bijv. via de variabele person1 de eigenschap firstName een andere waarde geven, deze nieuwe waarde ook toegekend is aan de corresponderende eigenschap in de person variabele.

Object initalizers

Objecten kunnen ook aangemaakt worden via object initialisers of object literals (gelijkaardig met een JSON (opens new window) object). . Een object initaliser is een expressie dat de initalisatie van een object beschrijft. Binnen de curly brackets ({ ... }) worden de eigenschappen en functies gedefinieerd. De eigenschappen en functies kunnen beschreven worden via een identifier, een nummer, bracket ([...]) notatie of een string en worden gescheiden door een komma (,).

const person = {
    firstName: 'Philippe',
    surName: 'De Pauw - Waterschoot',
    666: 'The Devil',
    "quote": 'Learning by doing',
    toString: function() {
        return `${ this.firstName } ${ this.surName }`;
    },
    completeTask(task) {
        return `Task "${task}" completed!`;
    }
};
console.log(person.toString()); // Output: Philippe De Pauw - Waterschoot
console.log(person.completeTask('Buy some food')); // Output: Task "By some food" completed

In het voorbeeld definiëren we een persoon met de variabele person. Binnen de curly brackets ({...}) omschrijven we de persoon met specifieke eigenschappen en acties (die we kunnen uitvoeren).

Het this (opens new window) keyword refereert naar het huidige object waarin deze code wordt geschreven. Dit betekent dat we met this de persoon kunnen aanspreken. Hierdoor kunnen we bijv. in de functie toString() eigenschappen aanspreken binnen het object via this.firstName …

const car = {
    color: 'red',
    wheels: 4,
    engine: {
      cylinders: 6,
      size: 3.6,
			toString: function() {
				return this.color;
			}
    },
};
console.log(car.engine.toString()); // Output: undefined

In het voorbeeld met de car variabele willen we in de engine eigenschap (zelf een object) een functie toString() specifiëren die tracht een eigenschap color uit het bovenliggend niveau aan te sprekene via het this keyword. Dit is niet mogelijk omdat this betrekking heeft op de engine en niet op de car.

Constructor function

Als alternatief kunt u een object maken met deze twee stappen:

Definiëren object via de constructor function dan gebruiken we als eerste letter een hoofdletter bijv. function Post() { ... }. Bevat de naam van deze functie meerdere woorden, dan begint elk woord met een hoofdletter bijv. function InstructionGuide() { ... }. Een instatie van een constructor function gebeurt via het new keyword.

Wensen we een object type te creëren voor posts (bevat een titel, synopsis en het volledige verhaal), dan schrijven we de volgende functie:

function Post(title, synopsis, body) {
  this.title = title;
  this.synopsis = synopsis;
  this.body = body;
}

Het this keyword heeft betrekken tot het object in dit geval op het object type Post. Eigenschappen kunnen aan dit object toegekend worden via this.propertyName bijv. this.firstName. De waarden aan deze eigenschappen worden toegekend gebasseerd op de waarden uit de argumenten.

We kunnen nu een instantie maken van het object type Post als volgt:

const post1 = new Post('SpaceX assembleert en toont eerste Starship prototype', 'SpaceX heeft de beide helften van het Starship in elkaar gezet bij zijn fabriek in Texas. Het nieuwe generatie ruimtevaartuig moet onder meer gebruikt worden om naar Mars te reizen en is volledig herbruikbaar. Later op zaterdag komt SpaceX met een update over het programma.', '<p>Het Starship staat op een locatie van SpaceX in het zuiden van de Amerikaanse staat Texas, en werd door een grote kraan in elkaar gezet door twee helften op elkaar te plaatsen. Daarmee is er voor het eerst een volledig exemplaar van het Starship te zien. Het geheel, met de codenaam Mk1, is 50 meter hoog, aldus SpaceX-topman Elon Musk. Eerder <a href="https://tweakers.net/nieuws/155512/kleine-spacex-testraket-komt-kort-van-de-grond-tijdens-vrijevluchttest.html">testte</a> SpaceX al een kleinere versie, onder de naam Starhopper.</p>');

De titel van post1 kan opgevraagd worden via post1.title of post1['title']. Nieuwe eigenschappen kunnen dynamisch aan de variabele post1 toegekend worden. Bijvoorbeeld:

post1.createdAt = Date.now();
post1.likes = 1256;

Veronderstellen we dat een post een categorie bevat, dan kunnen we deze categorie toekennen via een corresponderend argument:

function Category(name, description) {
  this.name = name;
  this.description = description;
}
const c1 = new Category('Nieuws', 'Nieuws uit de ruimte!');

function Post(title, synopsis, body, category) {
  ...
  this.category = category;
}
const p1 = new Post(..., c1);

De naam van de categorie die gekoppeld is aan een post p1 kunnen bevragen via p1.category.name.

In het volgende voorbeeld definiëren we een persoon via de Person() object constructor die vier argumenten bevat. De waarden van de argumenten kennen we toe aan de corresponderende eigenschappen. We voegen aan dit object ook een methode toString() toe waarmee we een string representatie kunnen teruggeven van dit object.

function Person(firstName, surName, _666, quote) {
  this.firstName = firstName;
  this.surName = surName;
  this['666'] = _666;
  this.quote = quote;
  this.toString = function() {
    return `${ this.firstName } ${ this.surName }`;
  }
} 
const person1 = new Person('Philippe', 'De Pauw - Waterschoot', 'The Devil', 'Learning by doing');
console.log(person1.toString());

We maken twee instantie van het object type Person() als volgt:

const person1 = new Person('Philippe', 'De Pauw - Waterschoot', 'Learning by doing');
const person2 = new Person('Evelien', 'Rutsaert', 'Together we are strong');

Object.create methode

Objecten kunnen ook aangemaakt worden d.m.v. de Object.create() methode en dit op basis van een bestaand object literal (zonder dat een object constructor nodig is).

const Person = {
  type: 'person',
  displayType: function() {
    return this.type;
  }
}

const p1 = Object.create(Person);
p1.type = 'lecturer';
console.log(p1.displayType()); // Output: lecturer

const p2 = Object.create(Person);
p2.type = 'student';
console.log(p2.displayType()); // Output: student

Getters en setters

Een getter (opens new window) is een methode dat de waarde van een specifieke eigenschap ophaalt. Een setter (opens new window) is een methode dat een waarde toekent aan een specifieke eigenschap. De getter en setter methoden kunnen toegepast op alle voorgedefinieerde objecten en custom objecten.

let person = {
  firstName: 'Philippe,
  earn: 0,
  get earnings() { 
    return this.earn;
  },
  set earnings(x) {
    this.earn = x;
  }
};

console.log(person.earn); // Output: 0
person.earnings = 2000;
console.log(person.earnings); // Output: 2000
console.log(person.earn); // Output: 2000

De volgende code illustreert hoe getters en setters de functionaliteit van een Date object kan uitgebreid worden met een year eigenschap voor alle instanties. De volgende statements definiëren een getter en setter voor de year eigenschap:

let d = Date.prototype;
Object.defineProperty(d, 'year', {
  get: function() { return this.getFullYear(); },
  set: function(y) { this.setFullYear(y); }
});

De vogende statements gebruiken de getter en setter in een Date object:

let now = new Date();
console.log(now.year); // Output: 2022
now.year = 2023;
console.log(now.getFullYear()); // Output: 2023

Om meerdere getters en setters te definiëren kunnen de de defineProperties methode aanspreken uit het Object object:

let obj = { a: 0 };

Object.defineProperties(obj, {
    'b': { get: function() { return this.a + 1; } },
    'c': { set: function(x) { this.a = x / 2; } }
});

Verwijderen van eigenschappen

In JavaScript kunnen we eigenschappen (die niet overgeërfd zijn) verwijderen door gebruik te maken van de delete operator. De volgende code toont hoe we een eigenschap kunnen verwijderen:

let person = new Object();
person.firstName = 'Philippe';
person.blah = 'bleuh';

delete person.blah;
console.log('blah' in person); // Output: false;

Indien het var keyword niet werd gebruikt bij een globale variabele, dan kunnen we deze variabele verwijderen met de delete operator:

g = 17;
delete g;

Vergelijken van objecten

Objecten zijn van het referentie (Eng. reference) type. Twee objecten met dezelfde inhoud of structuur zijn nooit gelijk aan elkaar. Enkel objecten met dezelfde referentie zijn gelijk aan elkaar:

const person1 = { firstName: 'Philippe' };
const person2 = { firstName: 'Philippe' };
console.log(person1 == person2); // Output: false
console.log(person1 === person2); // Output: false

const person3 = person2;
console.log(person3 == person2); // Output: true
console.log(person3 === person2); // Output: true

person2.firstName = 'Evelien';
console.log(person3.firstName); // Output: "Evelien" instead of "Philippe"

Voorbeeldoefening 1

Schrijf een JavaScript programma om de rollNumber eigenschap van het volgende object te verwijderen. Druk ook het object af voor of na het verwijderen van de eigenschap.

Voorbeeld object: let student = { name : “Irena Svalkova”, class : “PGM-1”, rollNumber : 12 };

Oplossing

let student = {
  name : "Irena Svalkova",
  class : "PGM-1",
  rollNumber : 12 };
console.log(student);
delete student.rollNumber;
console.log(student);

Voorbeeldoefening 2

IsEqual - Schrijf een methode die een oppervlakkige vergelijking van twee objecten maakt. Dit is een vergelijking van de waarde van de primitieve elementen in een object. Meer info vind je hier (Shallow Comparison vs Deep Comparison in Javascript)[https://monsterlessons-academy.com/posts/shallow-comparison-vs-deep-comparison-in-javascript] Je kan gebruik maken van Object.keys(objectName) om de sleutels van een object terug te krijgen.

const data = { a: 1, b: 1 };
const data2 = { a: 1, b: 1 };
const data3 = { a: 1, b: 2 };
console.log(isEqual(data, data2)); // true
console.log(isEqual(data, data3)); // false

Oplossing

// methode 1
export const isEqual = (firstObj, secondObj) => {
  const firstObjKeys = Object.keys(firstObj);
  const secondObjKeys = Object.keys(secondObj);

  if (firstObjKeys.length !== secondObjKeys.length) {
    return false;
  }

  for (const prop in firstObj) {
    if (firstObj.hasOwnProperty(prop) && (firstObj[prop] !== secondObj[prop])) {
      return false;
    }
  }

  return true;
};

// methode 2
const isEqual1 = (firstObj, secondObj) => {
  return Object.keys(firstObj).every((key) => firstObj[key] === secondObj[key]);
}

// methode 2
const isEqual3 = (firstObj, secondObj) => {
  const firstObjKeys = Object.keys(firstObj);
  const secondObjKeys = Object.keys(secondObj);

  if (firstObjKeys.length !== secondObjKeys.length) {
    return false;
  }

  return !firstObjKeys.filter((key) => firstObj[key] !== secondObj[key]).length;
};