Lecture

Intro to objects

Let's say you want to sell books on your website...

You start with 1 book

Name: Raising goats for dummies

Price: 15 €

Length: 340 pages

How your HTML might look like?

					
              

                    
                    

                        
Name: Raising goats for dummies
                        
Price: 15 €
                        
Length: 340 pages
                    
                
                	
				

But all this information can come from elsewhere

Lest not hard-code it in HTML

let name = "Raising goats for dummies";
let image = "goats.jpg";
let pageCount = 340;
let price = 15;

document.querySelector(".js-book-img").src = image;
document.querySelector(".js-book-name").innerText = name;
document.querySelector(".js-book-price").innerText = price;
document.querySelector(".js-book-pages").innerText = pageCount;
          

Time to add a second book!

Time to add a second book!

            let title1 = "Raising goats for dummies";
            let image1 = "goats.jpg";
            let pageCount1 = 340;
            let price1 = 15;

            let title2 = "Zombie Raccoons & Killer Bunnies";
            let image2 = "zombie_raccoons.jpg";
            let pageCount2 = 643;
            let price2 = 20;
            

But in two weeks two new books arrived

What we gonna do now?

OBJECTS TO THE RESCUE!!

Objects in a nutshell

• Objects consist of keys and values
• The key is like the name of the variable
• The value is like a variable itself

  const goatBook = {
    title: "Raising goats for dummies",
    image: "goats.jpg",
    pageCount: 340,
    price: 15
  };

  const zombRacBook = {
    title: "Zombie Raccoons & Killer Bunnies",
    image: "zombie_raccoons.jpg",
    pageCount: 643,
    price: 20
  };
                
                    

What can we do with objects?

Get value of it's attributes

              let goatBook = {
                title: "Raising goats for dummies",
                image: "goats.jpg",
                pageCount: 340,
                price: 15
              };

          alert("Book name is " + goatBook.title);
            

Change value of it's attributes

              let goatBook = {
                title: "Raising goats for dummies",
                image: "goats.jpg",
                pageCount: 340,
                price: 15
              };
              let newPageCount =  prompt("There are " + goatBook.pageCount + " pages now, enter new page count value");
              goatBook.pageCount = newPageCount;
              alert(goatBook.title + " has " + goatBook.pageCount + " pages");
            

And even add new attributes

              let goatBook = {
                title: "Raising goats for dummies",
                image: "goats.jpg",
                pageCount: 340,
                price: 15
              };

              goatBook.rating = "5 stars";

              alert(goatBook.title + " goatBook was rated with " + goatBook.rating);
            

Objects in real life

We've seen them before: Every time we saw a dot! Do you remember?

let strangeButtonCmp = document.getElementById("strangeButton")
strangeButtonCmp.classList.add('new-class');
console.log(strangeButtonCmp.classList);
            

Values inside objects can be anything, even functions or objects!

Nested Objects

Objects inside objects are called "nested objects":

              let person = {
                name: "Anna",
                age: 17,
                favoriteBook: {
                  name: "Raising goats for dummies",
                  pageCount: 900
                }
              };

              alert(person.name + "'s favorite book is " + person.favoriteBook.name);
            

Class work

Homework