JavaScript

OBJEKT

Vad är ett objekt?

En datastruktur som tillåter en samling av egenskaper som är relaterade till varandra enligt nyckel - värde eller eng. key - value 

const object_name = {
   key1: value1,
   key2: value2
}
const myObject = {};

Initiera ett tomt objekt

Valbart namn

Initiera ett tomt objekt

const card = {
  color: 'Rött',
  type: 'Spader'
};

Initiera ett objekt med egenskaper

const card = {
  color: 'Rött',
  type: 'Spader',
};


//Skriver ut 'Rött'
console.log(card.color); 
//Skriver ut 'Spader'
console.log(card['type'];

Få åtkomst till värdet för key

Få åtkomst till ett keys värde med punktnotation

Få åtkomst till ett keys värde med punktnotation

Två sätt!

Få åtkomst till ett keys värde med bracketnotation

const card = {
  color: 'Rött',
  type: 'Spader'
};

card.number = 9;

Lägga till egenskaper

Objektet har nu tre egenskaper

const exam = {
  class: "FJS22",
  subject: "Advanced JS",
  grades: ["VG", "VG", "VG", "G", "G"]
};

console.log(exam.grades[2]); 
//Skriver ut B

Ett objekt kan innehålla arrayer

const rectangle = {
    position: {
        x: 87,
        y: 90
    },
    background: "cyan"
};

console.log(rectangle.size.x); 
//Skriver ut 87

Ett objekt kan innehålla andra objekt

const rectangle = {
    position: {
        x: 87,
        y: 90
    },
    background: "cyan",
    move: function() {console.log('moving')}
};

rectangle.move(); // 'moving'

Ett objekt kan innehålla en metod

En funktion i ett objekt kallas metod

Objekt Destructering

Svensk översättning 🤷🏻‍♀️ 

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { name, realName } = hero;

console.log(name);     // Output 'Batman',
console.log(realName); // Output 'Bruce Wayne'


const otherName = hero.name;
const otherRealName = hero.realName;

UTAN DESTRUCTERING

"Plocka ut" - "unpacka" - enskilda egenskaper från ett objekt

Ordningen spelar INTE roll, utan namngivningen. Ger en mer "clean" kod.

Objektmetoder

  • Hur iterera över objekt
  • Läsa ut Keys och Value
  • Använda dessa för att iterera / komma åt data

for...in

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

Stegar igenom objektet och ger oss en key i taget

Det inbyggda sättet.

Object.keys

Returnerar en array med alla keys i ett objekt

const object = { a: 1, b: 2, c: 3 };
const keys = Object.keys(object); // ['a', 'b', 'c'];

keys.forEach(function (key) {
  console.log(`${key}: ${object[key]}`);
})

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

objects.forEach

Går även bra med en vanlig for-loop

const objectArray = [{ a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 },{ a: 7, b: 8, c: 9 }];

objectArray.forEach(function (object) {
  console.log(`b: ${object.b}`);
})

// expected output:
// "b: 2"
// "b: 5"
// "b: 8"

const objectArray = [{ a: 1, b: 2, c: 3 }, 
                     { a: 4, b: 5, c: 6 }, 
                     { a: 7, b: 8, c: 9 }];

objectArray.forEach(function (object) {
  
    console.log(`b: ${object.b}`);
    const myLI = document.createElement('li');
    // Inuti varje li-element skriv ut pokemonens namn
    myLI.innerText = object.b
    // Stopp in li-elementet som ett child till vår ul(pokemonList)
    pokemonList.appendChild(myLI)
  
});

Array + DOM

Returnerar en array med alla keys i ett objekt

JavaScript Objekt

By sandra-larsson

JavaScript Objekt

  • 39

More from sandra-larsson