Commit4 //JavaScript Fundamentals [Objects & Methods]

Picture of my pandemic puppy when she was just over two months old. 🥹

I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above.
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!

Next! Time to begin Objects & Methods. I have no real inkling about these subject matters and I feel like I didn't truly comprehend enough in the first half of JS fundamentals to form an opinion here. So let's jump into it!

Introduction to Objects

OBJECT DATA TYPE
stores a collection of data into a single, unordered value

A JS object represents a thing
->like person, animal, instrument, house, etc.
the thing has characteristics [large, grey, square]

In this lesson we're covering:

1. Writing objects
2. Accessing and modifying objects
3. Constructing methods

PROPERTY
represents the different characteristics of your object

Property can be any data type:
number, string, array, boolean, or function

const house = {};

  house.size = 1500;
  house.color = blue;
  house.windows = 20;
//  ^      ^       ^
//OBJECT  KEY    VALUE
//NAME
//       KEY-VALUE PAIR

OBJECT LITERAL
collects the key-value pairs inside the object's curly braces

const house = {
  size: 1500,
  color: "blue",
  windows: 20
};

console.log(house.size);
//1500

house.color = "green";
console.log(house.color);
//green
//dot notation above changed the value

house.["windows"] = 17;
console.log(house["windows"]);
//17

Writing the Object Name . Key is called Dot notation.

You can also use bracket notation to access and modify properties. See above.

CONSTRUCTION METHOD
when a function is the property of an object it's called a METHOD

const house = {
  size: 1500,
  color: "blue",
  windows: 20
};

house.windowWash = function () {
  if(this.windows > 15) {
    return `That's a lot of windows to wash!`;
  }
};

console.log(house.windowWash());
//That's a lot of windows to wash!

THIS KEYWORD
allows you to reference another property from the same object as your method

Adding & Accessing Object Properties

Properties are different values of the object

The period between the object and the property (value) is called dot notation

When a object has a property that is a function, it's called a METHOD

KEYS are an object's unique elements. Also known as identifiers or names.

VALUES are data connected to the key. Keys must be unique, while more than one property can have the same value.

Accessing object properties:

• dot notation (.)
• bracket notation ([])

console.log(cat.nickname);
//dot notation
console.log(cat.favoriteToys[2]);
//dot notation

console.log(cat["name"]);
//bracket notation

THIS keyword you can see more on in the Repo below.

Compound Assignment Operators
is a type of operator that combines the assignment operator (=) with the arithmetic operator (+,-,/, %)

See examples in the Repo below.

GitHub Repo for Objects & Methods

Practice Quiz: Objects & Methods

Time to test my knowledge! I'll post here anything that confounds me.

First question already has me tripped up. I guess I'm just not understanding the phrasing.
What do you call a function that's a property of an object?

The answer is Method. Sometimes all these terms just turn into word salad in my head.

A few other slip-ups, but overall good. Sometimes I just don't know what I'm looking at and miss the context clues.

Properties & Dot Notation

Time for a coding challenge!

I made it all the way through without looking at the solution code! I did use Google's Bard AI for some help understanding a couple of the directions, but once I had that - I was golden!

GitHub Repo for Properties & Dot Notations

Celebrate with Methods

Another coding challenge.

I'm stumped at how to do the conditional statements part, so I'm going to have to resort to the solution code to determine what they're asking me to do.

"Inside the addStudyTime method, modify the hoursThisWeek property by adding the value of the hoursThisWeek property to the value of hours. Hints: Don’t forget to use the this keyword to access object properties from inside your method. Also, this is a great place to use the += assignment operator to create cleaner code!"

Looking at their code... it's probably more than just the step above. It looks like this:

addStudyTime: function (hours) {
    this.hoursThisWeek += hours;
    if (this.hoursThisWeek >= this.weeklyHourGoal) {
      this.achievedStudyGoal = true;
      this.celebrate();
    }

I got the first line, but I didn't know what to do from there.

This one was definitely a bit more difficult for me. I do think I'm starting to get the hang of it. No worries! 2 or 3 more practice exercises now await me!

GitHub Repo for Celebrate with Methods

Practice Exercises: Objects & Methods

Exercise #1
I made it down to the last 2-3 steps and then wasn't sure exactly how to build out the method. Looks like I missed the "this." before "currentChapter".

currentlyReading.updateChapter = function (chapterNum) {
  this.currentChapter = chapterNum;
};

GitHub Repo for Practice Exercises Objects & Methods 1

Exercise #2
I tried going through this one until I got to the "eat" method and it was giving me an error. This one comes with a code along video, so I will go forward with that and point out what I did wrong in my method.

I don't really see what I did incorrectly, I just built it inside the object literal instead of outside, like the instructor did.

eat: function () {
  if this.hungerScale = 0 {
    return `${name} is full and can't eat more.`
  }
}

I mean, when it comes to writing the method. I see inside the if statement and the console log I had some incorrect code there.

Here is what it looks like from the instructor outside the object literal.

bird.eat = function () {
  if (this.hungerScale === 0) {
    console.log(`${this.name} is full and can't eat any more.`);
  }
};

Finished the code along and then tried to redo it inside the object literal, but couldn't get it working. I sent it off to the teacher assistants to see if they can clarify for me.

GitHub Repo for Practice Exercises Objects & Methods 2

Exercise #3
Another debugging exercise!

I was able to fix all of the bugs but two from just glancing over it. One miss was something needing to be capitalized. Another was a property did not require "this." to be placed in front of it.

GitHub Repo for Practice Exercises Objects & Methods 3

That's it for Objects & Methods! We're cranking right along at this point.

Currently I am on what I'm calling a Career Break. Check out more about me on LinkedIn.

I have a couple job interviews lined up in Project Management. Right now I am really just enjoying this process of learning how to code. I know it will only help me in whichever direction I go in my life.

Thoughts or feedback? Please reply with a comment! I'd love to hear from you.