TIL/2020–12–30&31

Day 18 and 19: Treehouse Full Stack JavaScript Techdegree

For these two days I started with the OOP (Object Oriented Programming) section. I learned quite a lot of new things in this part of the techdegree.

These are my notes:

Object — neat and tidy package of information about something you want to use in your code

-contains properties and functions that work together to represent something in your program

An object’s properties are key-value pairs that hold information about an object

An object’s functions are called methods — methods let your object do something or let something be done to it

An object’s states are represented by properties and it’s behaviors are represented by methods

JavaScript Object:

  • Properties
  • Methods

If we are making a radio object it would have:

Properties: volume, station

Method: turn off, change station

Objects are like data containers

— —

Most of everything that we encounter in JavaScript is an object or can be treated like one

DOM — Document Object Model

DOM Elements are objects,

For example we can get an element’s style with the .style property, or get the html property with the .innerHTML — .parentNode, .previousElementSibling, etc.

We can also use an element’s method as so: .toLowerCase() or .includes() or .appendChild(), .querySelector() and more

Arrays are objects as well

Properties: .length

Methods: .push(), .pop(), .shift(), .unshift()

We can design our own objects or use them as a container to store and access data

Objects are able to interact with other objects

A developer does not need to know how an object’s method’s work under the hood to use them

— — — -

Properties are like object specific variables that store information in a series of key value pairs

Methods are object specific functions that let your object do something or let something be done to it

Object literals

  • One way of creating an object
  • Good to use when you are modeling one single specific thing

Putting properties and methods into a package and attaching it into a variable is called encapsulation

This is an object literal — 3 properties and one method

— —

How do you access an object’s properties or methods?

. notation or bracket notation

.notation:

[ ] bracket notation

And even assign a key to a variable and call it with the bracket notation without the quotes — only using the variable name

Using “this” instead of the variable’s name:

Using “this” allows you to always access the property’s values attached to the particular object

JSON and bracket notation

JSON: JavaScript Object Notation — Data-interchange format

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

— — — -

Changing and adding properties

Object Oriented Programming is about designing programs that use objects for the primary logic of the program

You can also put arrays as a property!

Key name: [ ]

— — — —

When you want to represent multiples of something with the same or similar properties and methods

^ has exactly the same properties and methods

To fix this — to not repeat the code over and over again

JavaScript Class Syntax

  • A blueprint for an object
  • A specification
  • You create a base set of properties and methods — and are accessible by any object created of that class type
  • New to JS — ES2015
  • Known as syntactic sugar
  • Same functionality as prototype syntax but easier to use

When creating classes it is useful to look for patterns and commonalities among the objects we want to model

Keep it general — rather than having a dog class, have an animal class because in the future you might have a cat object

Class convention: capitalize first letter

  1. Create a class
  2. Add a constructor method (goes at the top inside the class — outlines the properties that your class will have — when create an object later on, we are actually invoking the constructor method inside the class) — the factory
  3. Add parameters as the properties
  4. Add properties inside the constructor method — to include a property in the constructor method = this.propertyname, the word this inside the constructor method is referring to the object that is being created
  5. Add values to the properties (values are the parameters and eventually once we create an object would be what we send to the parameters)

— — —

Instantiating

  1. Declare a variable that will hold your object
  2. const variable = new ClassName (arguments to be passed as parameters)

— —

Adding methods to classes

After the constructor method:

methodName( ) {

}

Challenge:

Note: constructor methods are not required to be inside of a class

— — —

Getters and setters — create, retrieve or update an object’s property

  • Using this will increase flexibility
  • You have the option to include logic when retrieving or setting the value of a property

Getters: special method used when you want to have a property that has a dynamic or computed value

  • The value of the property is computed in the getter method

When you have a dynamic property — like a property that changes — use the getter method

For example: we will add an activity property to our pet and it would change activity depending on the time (which makes it dynamic)

  1. get propertyName( ) {

}

The activity property is never attached to the object because we are only accessing it through the getter method. We can access the getter method just like any other property.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date — date object

We learned in getters that a value is computed and returned but never updated or stored anywhere.

Setter Method receives a value and can perform logic if needed. Then it either updates an existing property with that value or stores the value to new property

Setters always receive EXACTLY one parameter

The parameter is the value of the property of what we sent

Note: When you set something, it needs to be this._nameofProperty — if there is more then it still has to be this.nameofProperty because we are setting/adding the property to the class. So we need to declare this.

set nameOfProperty( ) {

}

The name of the property can never be the same as the name of a setter or getter method — we can’t use “this.owner = owner”. We have to create a property name that is different from the owner to hold the value of owner — which is called the backing property

Convention of backing property:

_nameOfSetterfunction

Backing properties are used when a property is meant to be updated with a setter method

Also when trying to retrieve the value of owner — do not use the setters name but the variable you stored the value to which is _nameOfSetterFunction

Or access it like this

— —

Object Interaction

The value of an object’s property can be another object

OOP is a programming paradigm that uses objects

  • These objects are designed to interact with one another

The name of a setter method cannot be equal to the name of an existing property

The value of returned from a getter method is never stored

It is invalid to set a property of an object equal to another object — FALSE

A setter method is used when you need to add logic when updating a property value

— — — -

Object Basics in JavaScript

.split(“ “) method returns an array of the string -

“Hello my name is renzo” will be [‘hello’, ‘my’, ‘name’, ‘is’, ‘renzo’ ]

Getters and Setters

Note: When you set something, it needs to be this._nameofProperty — if there is more then it still has to be this.nameofProperty because we are setting/adding the property to the class. So we need to declare this.

As you can see we can’t access the radius but we can access the area. This is because the radius’ name is using a backing property so to access it we would need to use console.log(circ._radius)

But a better way is to set a matching getter method and just return the value

— —

Then add a setter method on books

When you use this, you are pertaining to the current object. In this case, is patron. When we want to refer to the book object, we have to call it through the parameter. Which connects it and updates its values.

So basically, what is happening is that when we call checkOut or returnBook it either returns true or false to the .out setter in the book class. And it then initiates the logic for true and false and for the due date. Less code and more logic.

As you can see, the setter method works — the due date is added and the backing property _out is true

Now if we return the book using the returnBook method on the patron

We can see that the current book of patron is now false and the book’s patron is null

Charging fines to patrons

Now as you can see, the dateDiff is 18 days, and it is charged .1 per day so the balance of the patron is 1.8

What does the filter() do

It returns a new array composed of any element in the original array that meets a given condition .filter( ___ => condition)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store