# Object Methods
Objecten maken we aan via een object literal, dit is de makkelijkste en meest leesbare techniek om objecten aan te maken. In één uitdrukking zullen we het object declareren (aanmaken) en er een waarde aan toewijzen.
Het Object-object in JavaScript is een ingebouwd object dat een ingebouwd basisonderdeel van de JavaScript-taal is. Het kan gebruikt worden om nieuwe objecten te maken, bestaande objecten te manipuleren maar kent vooral nut door een aantal ingebouwde methodes.
const person = new Object();
const person = {}; // We verkiezen deze methode!
person.name = "John";
person.age = 25;
2
3
4
5
# Built-in methods
const myObject = { a: 1, b: 2, c: 3 };
# .keys()
Maakt een array van de keys van het object.
const keys = Object.keys(myObject);
console.log(keys); // Output: ['a', 'b', 'c']
2
Voorbeeld: Je hebt een object met configuratie-instellingen en wilt snel de beschikbare opties weergeven.
const configOptions = { theme: "dark", fontSize: 16, language: "English" };
const availableOptions = Object.keys(configOptions);
console.log("Beschikbare opties:", availableOptions);
// Output: ['theme', 'fontSize', 'language']
2
3
4
5
# .values()
Maakt een array van de values van het object.
const values = Object.values(myObject);
console.log(values); // Output: [1, 2, 3]
2
Voorbeeld: Je hebt een object met de resultaten van een enquête en wilt de verzamelde antwoorden analyseren.
const surveyResults = {
question1: "Ja",
question2: "Nee",
question3: "Misschien",
};
const responses = Object.values(surveyResults);
console.log("Antwoorden:", responses);
// Output: ['Ja', 'Nee', 'Misschien']
2
3
4
5
6
7
8
9
# .entries()
Maakt een array bestaande uit arrays van elk key-value pair. In zo’n geneste array zal de eerste waarde de key zijn, en de tweede waarde de value.
const entries = Object.entries(myObject);
console.log(entries); // Output: [['a', 1], ['b', 2], ['c', 3]]
2
Voorbeeld: Je hebt een object met gebruikersgegevens en wilt door alle gegevens itereren voor verdere verwerking.
const userData = {
username: "JohnDoe",
email: "[email protected]",
role: "user",
};
const userEntries = Object.entries(userData);
for (const userEntry of userEntries) {
console.log(`${userEntry[0]}: ${userEntry[1]}`);
}
// Output:
// username: JohnDoe
// email: [email protected]
// role: user
2
3
4
5
6
7
8
9
10
11
12
13
14
# .fromEntries()
De Object.fromEntries()-methode wordt gebruikt om een object te maken op basis van een iterable van key-value pairs, zoals een array met subarrays. Deze methode is handig wanneer je een array van key-value pairs hebt en deze wilt omzetten naar een object.
// Array met sleutel-waardeparen
const keyValuePairs = [
["a", 1],
["b", 2],
["c", 3],
];
// Gebruik van Object.fromEntries() om een object te maken
const myObject = Object.fromEntries(keyValuePairs);
// Toon het resulterende object
console.log(myObject);
// Output: { a: 1, b: 2, c: 3 }
2
3
4
5
6
7
8
9
10
11
12
13
Voorbeeld: Je wil achterhalen welk gender een persoon heeft.
const people = [
["john", "male"],
["jane", "female"],
["alex", "none"],
];
const genderList = Object.fromEntries(people);
console.log(genderList);
console.log(genderList.john);
2
3
4
5
6
7
8
9
# Custom methods
We kunnen ook zelf methodes toevoegen aan een object. Dit geeft ons de mogelijkheid om extra functionaliteit toe te voegen.
const person = {
name: "John",
age: 25,
sayName() {
console.log(this.name);
},
};
person.sayName();
2
3
4
5
6
7
8
9
Merk op dat we binnen de methode this gebruiken om te verwijzen naar het huidige object. Zo kunnen we de eigenschappen van dat specifieke object aanpassen.
const shoppingCart = {
items: [
{ name: "Product 1", price: 20 },
{ name: "Product 2", price: 30 },
{ name: "Product 3", price: 15 },
],
// Aangepaste methode om totale prijs te berekenen
calculateTotal: function () {
let total = 0;
for (const item of this.items) {
total += item.price;
}
return total;
},
};
// Aangepaste methode aanroepen om totale prijs te berekenen
const totalPrice = shoppingCart.calculateTotal();
// Resultaat bekijken
console.log("Totale prijs van de winkelwagen:", totalPrice);
// Output: Totale prijs van de winkelwagen: 65
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Gebruik maken van object methodes kunnen mogelijks de leesbaarheid van je code verbeteren en zullen de basis vormen voor Objectgeoriënteerd Programmeren (OOP). In OOP zullen we real-world entiteiten modelleren als objecten met eigenschappen en gedragingen (methoden). Deze aanpak kan de leesbaarheid en onderhoudbaarheid van de code verbeteren.
// Een object om boekinformatie bij te houden
const bookInfo = {
title: "The Catcher in the Rye",
author: "J.D. Salinger",
pages: 224,
// Aangepaste methode om het aantal pagina's te verhogen
increasePages: function (amount) {
this.pages += amount;
},
// Aangepaste methode om de auteur te wijzigen
changeAuthor: function (newAuthor) {
this.author = newAuthor;
},
// Aangepaste methode om alle informatie weer te geven
displayInfo: function () {
console.log(`Title: ${this.title}`);
console.log(`Author: ${this.author}`);
console.log(`Pages: ${this.pages}`);
},
};
// Aanroepen van de aangepaste methoden
bookInfo.increasePages(50);
bookInfo.changeAuthor("John Doe");
// Weergeven van de bijgewerkte informatie
bookInfo.displayInfo();
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
We kunnen bovenstaand voorbeeld herschrijven met functies (Functional Programming).
function increasePages(book, amount) {
book.pages += amount;
}
function changeAuthor(book, newAuthor) {
book.author = newAuthor;
}
const bookInfo = {
title: 'The Catcher in the Rye',
author: 'J.D. Salinger',
pages: 224
};
increasePages(bookInfo, 50);
changeAuthor(bookInfo, 'John Doe');
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16