listeningTo: Arrested Development, Season 1, Episode 2 (for the 1569th time)

inRealLife: Halloween decorations are officially up and creepy! I was a few days late this year, I usually aim for September 1st. I’m in my happy place.

whatIReadThisWeek: So much! As the title of this post will tell you, I have been focused primarily on upping my JavaScript skills. And by upping, I mean getting some, there were no prior skills. A year (or more, probably) ago I started working through tutorials from The Odin Project, which is a free and open source project for anyone hoping to learn some cool tech skills from the ground up.

But, it’s me, so I go off on my own tangents trying to cram as much info into my skull as possible, and I retain like, I don’t know, 37% of it? One the many things I love about The Odin Project is all the external, vetted links they have to other awesome online resources. Codecademy is a given, I’ve worked through countless of their tutorials even before starting with Odin, and got sucked into the Intro to JavaScript course – 72% complete!

In non-work-related reads, I finished reading Baby Teeth by Zoje Stage and Ruthless Gods by Emily A. Duncan (pre-pub ARC). Baby Teeth did not live up to the hype, but Ruthless Gods was everything I was hoping it would be for the sequel to Wicked Saints.

whatILearnedThisWeek: I had previously learned all the basics to JavaScript in a cram-session meant to help me make sense of some custom automated testing scripts I had to write (despite, again, my “codeless” automated testing solution), so the tutorials I worked through this week were more “advanced” topics this time (fancy me, I know).

Topics included: Iterators – like how to use the forEach() function, Objects – which are still an enigma but I think in theory I understand what’s what, Methods and Nested Objects – methods are just functions but they’re sometimes referred to as methods… which was the main takeaway there (don’t quote me on that), Getters, Setters, and “this” – sure, you can use the code you wrote in this file, but make sure we know you mean “this” this file, and Classes – which roll all the aforementioned topics into one fun code block. There was also an exercise on Browser Compatibility and Transpilation (a fun word that means translating code from one programming language to another) that went over my head, and Node.js Modules that’s, also, up over my head. I think at that point I was too tired and I may have to re-read those exercises before they make sense in my head.

Let’s talk about classes! They’re used to really quickly produce similar objects, basically like an object template. Please don’t ask me to explain what an object is. It’s just a block of code that gives different parameters to a variable (right?). Let’s see a really simple example based on the one from Codecademy:

class Dog {
     constructor(name) {
          this._name=name;
     }
     get name() {
          return this._name;
     }
};

const pitbull= new Dog('Scout'); //This is a new instance of Dog
const rattie = new Dog('Sasha'); //This is another new instance of Dog

pitbull.name(); //returns: Scout
rattie.name(); //returns: Sasha 

Classes require a constructor() function which is the common thread between the class and it’s duplicates. In this example, name has to be passed into the new instance of the class, and that is the only required information needed to duplicate the class.

The line just under the constructor function defines what that function is doing. It is taking the name and saying – “okay, wherever you see name in this code, we mean the name passed into the constructor, and that is Scout or Sasha in Amanda’s example”. (Classes are very eloquent, sorry).

AND then, once your new class instance is created (via that const statement), you can call on it to run any method (function) on that new class (const). So, the very last line in the code example above, we can ask our code to politely return the name of pitbull, our new Dog class instance. When that code executes, it will return the name associated with the pitbull class, or, Scout, (the goodest girl).

There’s more! The whole point of classes are that they are reusable. I have two dogs and two cats, so the parent class should be Pets, which I can create Dog and Cat children of (aww). So, using the same simplistic example, let’s say:

 class Pets {
     constructor(name, type) {
          this._name=name;
          this._type=type;
     }
     get name() {
          return this._name;
     }
      get type() {
          return this.type;
     } 
}; 

This is my parent class, Pets! Notice the constructor() now requires two parameters: name and type. To create a Pets child, we have to make sure we extend Pets so all of Pets‘ properties are copied to the children. To create the Cat child class:

 class Cat extends Pet {
      constructor(name, type) {
          super(name, type);
     }
};  

const fireBreather = new Cat('Dracarys', 'Cat'); //This is one instance of the Cat child class of Pet

const cook = new Cat('Heisenberg', 'Cat'); //This is a different instance of the Cat child class of Pet

fireBreather.name(); // - MISSANDEI 😦 - (sorry). This returns: Dracarys
cook.name(); // - SAY MY NAME - (sorry!!). This returns: Heisenberg  

We have to use the extends keyword to make the connection, but after that, you can use any of Pets properties (in this example, name) in Cat. The first line of the constructor() should always be the super() function, which passes the child parameters back to the parent class, so the child can use the parent’s methods and properties. In my example, when we pass 'Dracarys' and 'Cat' to the child class Cat, the constructor() also makes sure 'Dracarys' and 'Cat' are passed to Pets.

However, when you extend a class, you don’t need to use all the inherited properties, and you can create properties on the child class that aren’t used in the parent. In my example, I changed the type to be hard coded to ‘Cat‘. If I were to extend Pets in a new child class named Dog, I could hard code the type in Dog to be ‘Dog‘.

Obviously this is an overly simple example and possibly more confusing than necessary, but, classes are cool, and complicated, but in a cool way.

whatIAmThinkingAbout: Uhh, classes? How can I make use of this in my own code? I recently endeavored in a long and arduous (okay it was like 4 days) project of refactoring my automated scripts. I have functions now, guys! I’ve come a long way. Maybe the next worthwhile project will be to take another close look at my code and see if those functions make even MORE sense as methods to plug into some sick classes.

recommendationsAndTakeAways: JavaScript is pretty easy to wrap your head around and is a pretty approachable language as the first I’m really trying to learn the “right” way (looking at you manual HTML edits on my angsty 8th grade Xanga page).

I recommend the Codecademy tutorials as a really organized laid out hands-on practice when learning a new language. What I do not recommend is their community forums. If you’re stuck, it’s a nice way to skim through and justify that other people are also stuck and you’re not just dumb. But, if you’re posting and looking for an answer, try researching more elsewhere. There is quick explanatory text before each exercise, so, if you’re like me, and need to read up on something more than just a few sentences before truly committing it to memory, I CANNOT recommend The Odin Project in conjunction with Codecademy enough.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s