The 4 Pillars of Object-Oriented Programming (OOP) are Abstraction, Encapsulation, Inheritance, and Polymorphism. Within these lies classes and objects, and that's what I want to talk about here.

I've been learning about JS Objects recently and wanted to dive into them a bit deeper. I'm still far away from being an expert on how to use and interact with them, but I'm enjoying learning about the structure and how they can be written and manipulated.

One of my favorite ways to learn is to set up a test and run through it myself. To further my knowledge, I wanted to interact with other people and hear what they thought about objects, had difficulties with, and also listen to their explanations. I went to Twitter to see if anyone else was interested. Jackpot! They were interested! I tried to trick myself and write bad code because that's what I might come across in the wild. Rewriting and reviewing my mistakes helped me learn too! :) In fact, I'm doing this again because I want to get to know Objects even better.

Anyway, let's get started and see how much we know about Objects!

Are you ready!? Grab a pencil and paper (or read) and play along.

disclaimer: Not all examples are best practices. They are meant to help you learn.

We'll start off easy and progress to something more difficult.

#1. What is the output of...

console.log(john.sayGreeting('weather'))

class User {
    constructor(name, greeting) {
        this.name = name
        this.greeting = greeting
    }
    sayGreeting(greeting) {
        return `Hey! I'm ${this.name}, gotta love the ${this.greeting}`
    }
}

let john = new User('John', 'surf')

// what will the output be below?
console.log(john.sayGreeting('weather'))

... and the choices are ...

A. Hey! I'm John, gotta love the surf.
B. Hey! I'm John, gotta love the weather.
C. Hey! I'm John, gotta love the undefined.
D. Error

#2. Who will be the rock star?

Here is where I'll declare a rockStar object.

let rockStar = {
    name: "George",
    surname: "Harrison",
    get fullName() {
        return `${this.name} ${this.surname}`
    },
    set fullName(value) {
        [this.name, this.surname] = value.split(' ');
    }
};


// --> what should go here ? 


// this is the output
console.log(rockStar.fullName)

... and here are the choices to change the rockStar's fullName ...

// Only 1 rockStar will prevail! Who's your choice?
// ======= Jimmy Page ======= // 
rockStar.fullName = 'Jimmy Page'

// ======= Eric Clapton ======= // 
rockStar.fullName('Eric Clapton')

// ======= Jimi Hendrix ======= // 
rockStar.name('Jimi')
rockStar.surname('Hendrix')

// ======= John Mayer ======= // 
rockStar.fullName() = 'John Mayer'

So who is the current rock star?

#3. How can we print to the console...

This is Tom. He's going to teach Gym

class Teacher {
    constructor(name) {
        this.name = name
    }
}

class GymTeacher extends Teacher {
    // we need a constructor here
    constructor(name) {
        super(name)
        this.subject = 'Gym'
    }    
}

let tom = new GymTeacher('Tom', 'Gym')
console.log(`This is ${tom.name}. He's going to teach ${tom.subject}`)

... your four choices are ...

// ======= A. ======= //
constructor(name, subject) {         
    this._name = name        
    this._subject = subject 
}

// ======= B. ======= //
constructor(name, subject) {
    this.name = name
    this.subject = subject
}

// ======= C. ======= //
constructor(name) {
    super(name)
    this._subject = 'Gym'
}

// ======= D. ======= //
constructor(name) {
    super(name)
    this.subject = 'Gym'
}

#4. We want to double only the numbers in this object.

let character = { 
    strength: 75,  
    armor: 25, 
    title: 'Novice' 
}

function doubleNumbers(obj) {
    // we need to fill this with something besides
    console.log('what goes in the function?')
}

doubleNumbers(character)
console.log(character)

// We want this output
{ strength: 150, armor: 50, title: 'Novice' }

... what would go inside the function? ...

// ======= A ====== // 
for (let key in obj) {
    obj[key] *= 2
}

// ======= B ====== // 
for (let key in obj) {
    if (typeof obj[key] === 'number') {
        obj[key] *= 2
    }
}

// ======= C ====== // 
if (typeof obj === 'number') {
    obj *= 2
}

// ======= D ====== // 
let answer = Object.values(obj)
return answer.map(a => a * 2)

#5. How can I get the sum of all the heights of these Disney Characters?

let heights = {
    jamesSullivan: 2.29, 
    creullaDeVil: 1.7,   
    elsa: 1.7, 
    belle: 1.65, 
    gaston: 1.83
};

let sum = 0;


// This is the output
console.log(sum);

... here are the choices ...

// How can I sum up all the heights? 
// A. 
for (let i=0; i<heights.length; i++) {
    sum += heights[i]
}

// B. 
heights.reduce((sum, x) => sum + x, 0)

// C. 
for (let name in heights) {
    sum += heights[name]
}

// D. 
sum += Object.values(heights)

That's it! Easy peasy!

Well, not so much for me. I struggled to figure out what to ask and how to ask it. If it's easy for you, that's fantastic. I'm still learning :)

The worst part is I can't give you the answers yet!

If you've played along and want to check your answers, go ahead and leave a comment with your choices for #1, #2, #3, #4, and #5 and I will be sure to respond :)

Good luck!