Object literal

Objekt är en samling av namngivna värden som vanligen kallas “properties” (egenskaper). För att referera till ett objekts egenskap används punkt. Det kallas dot notation. I andra programmeringsspråk kan du se konstruktionen som en dictionary (Python) eller associativ array (php).

Man kan skapa ett objekt med objekt-literalen {}. Vi kan antingen lägga till properties direkt och/eller vid ett senare tillfälle. Häng gärna med i programmeringen och koda lite själv.

object literal

let myObject = {
  height: 0,
  width: 0
}

console.log(myObject.height) // 0
console.log(myObject.width)  // 0

Objektet innehåller nu två egenskaper, height och width som ska representera storleken på objektet. Vi kan även lägga till egenskaper efterhand:

myObject.background = ""

Objekt i JavaScript är så kallat mutable vilket betyder att man kan ändra på det under resans gång. Det är både bra och dåligt. Om vi skulle råka stava fel på egenskapen så skapas det en ny egenskap istället för att ge ett felmeddelande att egenskapen inte finns:

console.log(myObject.backGround) // prints undefined

Ett objekt kan även innehålla andra objekt. Vi skapar om objektet och kikar på hur vi kan ändra ovan kod och placera height och width i ett eget objekt:

let myObject = {
  size: {
    h: 0,
    w: 0
  },
  background: ""
}

Vi kan nu nå storleken med myObject.size.h respektive myObject.size.w.

Vi kan till och med ha funktioner som egenskaper i objekten. De kallas då för metoder:

let myObject = {
  size: {
    h: 0,
    w: 0
  },
  background: "green",
  draw: function() {
    console.log("I am a method!")
  }
}

Det kan vara bra att nå objektets egenskaper inifrån objektet. Då behöver man med nyckelordet this markera att det är just objektets egenskaper man vill åt. Låt säga att vi i metoden draw() vill rita ut objektet på sidan. Vi kan då uppdatera det så här:

js

let myObject = {
  size: {
    h: 200,
    w: 200
  },
  background: "green",
  draw: function() {
    let element = document.getElementById("content")
    let obj = document.createElement("div")
    obj.style.height = this.size.h + "px"
    obj.style.width = this.size.w + "px"
    obj.style.backgroundColor = this.background

    element.appendChild(obj)
  }
}

myObject.draw()

Resultatet från vår sandbox blir då:

Bild: Lådan ritas ut inifrån objektet.

×