Objects

Wat zijn objecten?

Objects

Verzameling van:
- Eigenschappen (properties)
- Functies (methods)

Objectnotatie

const backpack = {
  color: "blue",
  zippers: 2,
  isOpen: false,
  open: function() {
    this.isOpen = true;
  }
}

Gebruik accolades {}
(meerdere) key-value pairs gescheiden door een komma ,

Voorbeeld

const igAccount = {
  username: "taylorswift",
  followers: 282000000,
  follow: function() {
    this.followers++;
  },
}

Social media profiel:

properties: username, profielfoto, bio,...
methods: volgen, liken, posten,...

Objects zijn niet nieuw voor ons

💡 We hebben al verschillende objecten gebruikt:

document
window
event-objecten in eventListeners
console
Math
...

Properties & values

Data types

Strings

{ name: "Spotify Premium" }

Numbers

{ monthlyPrice: 10.99 }

Booleans

{ hasAdvertisements: false }

Data types

Arrays

{ playLists: ["Gym", "Chill", "Study"] }

Andere objecten

{ user: { name: "Brendan", age: 22 } }

Data types

const spotifyAccount = {
  name: "Spotify Premium",
  monthlyPrice: 10.99,
  hasAdvertisements: false,
  playLists: [
    "Gym",
    "Chill",
    "Study"
  ],
  user: {
    name: "Timo",
    age: 22
  }
}

Full example:

Eigenschappen uitlezen

Optie 1: dot notatie

const telefoon = {
  merk: "iPhone",
  model: "15 Pro",
  jaar: 2023
};

console.log(telefoon.merk); // "iPhone"

puntje . gevolgd door de key name

Eigenschappen uitlezen

Optie 2: bracket notatie

const telefoon = {
  merk: "iPhone",
  model: "15 Pro",
  jaar: 2023
};

const property = "model";
console.log(telefoon[property]); // "15 Pro"

vierkante haken [] met daartussen een variabele

Eigenschappen wijzigen

const auto = {
  merk: "Toyota",
  model: "Yaris",
  kleur: "blauw"
};

auto.kleur = "rood";

puntje . gevolgd door de reeds bestaande key name

Eigenschappen toevoegen

const auto = {
  merk: "Toyota",
  model: "Yaris",
  kleur: "rood"
};

auto.bouwjaar = 2022;

puntje . gevolgd door de nieuwe key name

Methods

= functies die bij een object horen

const taylorsInsta = {
  gebruiker: "taylorswift",
  aantalVolgers: 282000000,
  post: function(foto) {
    // code die foto toevoegt aan feed
  }
};

taylorsInsta.post("selfie.jpg");

this keyword

Verwijst naar het object zelf binnen methods

const student = {
  naam: "Julie",
  studie: "Digitale Vormgeving",
  jaar: 1,
  verhoogJaar: function() {
    this.jaar = this.jaar + 1;
    console.log(`${this.naam} gaat naar jaar ${this.jaar}`);
  }
};

student.verhoogJaar(); // "Julie gaat nu naar jaar 2"

⚠️ Gebruik géén arrow functions () => {}
als je gebruik wilt maken van this

Voorbeeld

Property wijzigen via method:

const student = {
  naam: "Noah",
  aanwezig: false,
  toggleAanwezigheid: function() {
    this.aanwezig = !this.aanwezig;
    
    console.log(`${this.naam}: ${this.aanwezig}`);
  }
};


buttonElement.addEventListener("click", () => {
  student.toggleAanwezigheid();
});

Objects vs. arrays

Arrays

Geordende lijst []

const playlist = ["Bad Guy", "Cruel Summer"];

console.log(playlist[1]); // "Cruel Summer"

index tussen vierkante haken []

Waarden via indexen
💡 Array indexen starten altijd bij 0 (niet 1)

Objects

(ongeordende) verzameling eigenschappen
Waarden oproepen via naam (= key)

const festival = {
  naam: "Pukkelpop",
  uitverkocht: true
};

console.log(festival.naam); // "Pukkelpop"

key

Arrays van objecten

= Gestructureerde lijst
Handig bij gelijkaardige objecten:
- 💾 Items opslaan & aanpassen
- 🔎 Items zoeken, filteren, sorteren,...
- ➰ Itereren over items (➡️ loops)
📋 JSON compatibel

Arrays van objecten

const afspeellijst = [
  { titel: "Blinding Lights", artiest: "The Weeknd", duur: 3.20 },
  { titel: "Heat Waves", artiest: "Glass Animals", duur: 3.59 },
  { titel: "Stay", artiest: "The Kid LAROI", duur: 2.21 }
];

Zoeken: .find()

const favorite = afspeellijst.find((song) => {
  return song.titel === "Stay";
});

console.log(favorite);
//{ titel: "Stay", artiest: "The Kid LAROI", duur: 2.21 }

Arrays van objecten

Filteren: .filter()

const longest = afspeellijst.filter(song => song.duur > 3.00);

console.log(longest); 
// [
//   { titel: "Blinding Lights", artiest: "The Weeknd", duur: 3.20 },
//   { titel: "Heat Waves", artiest: "Glass Animals", duur: 3.59 },
// ]

const afspeellijst = [
  { titel: "Blinding Lights", artiest: "The Weeknd", duur: 3.20 },
  { titel: "Heat Waves", artiest: "Glass Animals", duur: 3.59 },
  { titel: "Stay", artiest: "The Kid LAROI", duur: 2.21 }
];

Arrays van objecten

Itereren: .forEach((item, index) => {})

afspeellijst.forEach((nummer, index) => {
  console.log(`${index + 1}. ${nummer.titel} - ${nummer.artiest}`);
});

// 1. Blinding Lights - The Weeknd
// 2. Heat Waves - Glass Animals
// 3. Stay - The Kid LAROI

const afspeellijst = [
  { titel: "Blinding Lights", artiest: "The Weeknd", duur: 3.20 },
  { titel: "Heat Waves", artiest: "Glass Animals", duur: 3.59 },
  { titel: "Stay", artiest: "The Kid LAROI", duur: 2.21 }
];

Voorbeeld

DOM elementen aanmaken voor elke gebruiker:

const container = document.querySelector(".container");

const gebruikers = [
  { naam: "Sofie", avatar: "sofie.jpg", online: true },
  { naam: "Thomas", avatar: "thomas.jpg", online: false }
];

gebruikers.forEach((gebruiker) => {
  const profielDiv = document.createElement("div");
  profielDiv.innerHTML = `
    <img src="${gebruiker.avatar}">
    <h3>${gebruiker.naam}</h3>
    <span>${gebruiker.online ? "Online" : "Offline"}</span>
  `;
  container.appendChild(profielDiv);
});

1️⃣

2️⃣

3️⃣

Tips

Log alle methods en properties in de console

console.log(Window);

Log alle property keys van een object:

console.log(Object.keys(mijnObject));

Log alle methods & properties in een tabel

console.table(document);

11. Objects

11. Objects

Lecturer GDM PRO

11. Objects

More from Lecturer GDM